@joster-dev/chaos-control 0.1.2 → 0.3.0

package/fesm2022/joster-dev-chaos-control.mjs

@@ -1,95 +1,127 @@
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { IconComponent, IconStackComponent } from '@joster-dev/icon';
+export { IconComponent, IconStackComponent, iconTypes } from '@joster-dev/icon';
 import * as i0 from '@angular/core';
-import { Directive, Input, Self, Component, EventEmitter, Output, ViewChild, HostListener, HostBinding, NgModule, Injectable } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, booleanAttribute, Directive, inject, ElementRef, ViewContainerRef, Renderer2, Input, signal, effect, computed, viewChild, numberAttribute, HostListener, output, NgModule, Injectable } from '@angular/core';
+import { Subject, from, interval, map, filter, take, takeUntil } from 'rxjs';
 import * as i1 from '@angular/forms';
-import { Validators, FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import * as i3 from '@joster-dev/icon';
-import { IconModule } from '@joster-dev/icon';
-import { Subject } from 'rxjs';
+import { NgControl, Validators, FormsModule } from '@angular/forms';
+import { NgTemplateOutlet } from '@angular/common';
 import { debounceTime } from 'rxjs/operators';
 
+class BusyComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BusyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: BusyComponent, isStandalone: true, selector: "jo-busy", ngImport: i0, template: "<!-- <div class=\"spinner spinner-1\"></div> -->\n<div class=\"spinner big\"></div>\n<div class=\"spinner small\"></div>\n", styles: [":host{position:absolute;inset:0;background:color-mix(in srgb,currentColor 30%,transparent);display:flex;align-items:center;justify-content:center}.spinner{position:absolute}.spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:.25rem solid transparent;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.big{width:3rem;height:3rem;animation:rotate-animation 1s linear 0s infinite}.big:before{background:conic-gradient(transparent 40%,currentColor) border-box}.small{width:2rem;height:2rem;animation:anti-rotate-animation 1s linear 0s infinite}.small:before{background:conic-gradient(currentColor,transparent 60%) border-box}@keyframes rotate-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes anti-rotate-animation{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BusyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jo-busy', changeDetection: ChangeDetectionStrategy.Eager, template: "<!-- <div class=\"spinner spinner-1\"></div> -->\n<div class=\"spinner big\"></div>\n<div class=\"spinner small\"></div>\n", styles: [":host{position:absolute;inset:0;background:color-mix(in srgb,currentColor 30%,transparent);display:flex;align-items:center;justify-content:center}.spinner{position:absolute}.spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:.25rem solid transparent;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.big{width:3rem;height:3rem;animation:rotate-animation 1s linear 0s infinite}.big:before{background:conic-gradient(transparent 40%,currentColor) border-box}.small{width:2rem;height:2rem;animation:anti-rotate-animation 1s linear 0s infinite}.small:before{background:conic-gradient(currentColor,transparent 60%) border-box}@keyframes rotate-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes anti-rotate-animation{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
+        }] });
+
 class BorderRadiusDirective {
-    get borderRadiusRight() {
-        return this._borderRadiusRight;
-    }
-    set borderRadiusRight(value) {
-        if (value === '')
-            value = true;
-        if (value == null)
-            value = false;
-        this._borderRadiusRight = value;
-    }
-    get borderRadiusLeft() {
-        return this._borderRadiusLeft;
-    }
-    set borderRadiusLeft(value) {
-        if (value === '')
-            value = true;
-        if (value == null)
-            value = false;
-        this._borderRadiusLeft = value;
-    }
     constructor() {
-        this._borderRadiusRight = true;
-        this._borderRadiusLeft = true;
+        this.borderRadiusRight = input(true, { ...(ngDevMode ? { debugName: "borderRadiusRight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.borderRadiusLeft = input(true, { ...(ngDevMode ? { debugName: "borderRadiusLeft" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BorderRadiusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BorderRadiusDirective, selector: "[joBorderRadius]", inputs: { borderRadiusRight: "borderRadiusRight", borderRadiusLeft: "borderRadiusLeft" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BorderRadiusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BorderRadiusDirective, isStandalone: true, selector: "[joBorderRadius]", inputs: { borderRadiusRight: { classPropertyName: "borderRadiusRight", publicName: "borderRadiusRight", isSignal: true, isRequired: false, transformFunction: null }, borderRadiusLeft: { classPropertyName: "borderRadiusLeft", publicName: "borderRadiusLeft", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BorderRadiusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BorderRadiusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[joBorderRadius]'
                 }]
-        }], ctorParameters: () => [], propDecorators: { borderRadiusRight: [{
-                type: Input
-            }], borderRadiusLeft: [{
-                type: Input
-            }] } });
+        }], propDecorators: { borderRadiusRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadiusRight", required: false }] }], borderRadiusLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadiusLeft", required: false }] }] } });
 
-class ControlDirective extends BorderRadiusDirective {
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        if (value === '')
-            value = true;
-        if (value == null)
-            value = false;
-        if (typeof value !== 'boolean')
-            throw new Error('required input must be: boolean');
-        this._required = value;
-        this.validation.next();
-    }
+class BusyDirective {
     constructor() {
-        super();
-        this._required = false;
-        this.isDisabled = false;
-        this.validation = new Subject();
+        this.element = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.host = this.element.nativeElement;
+        this.endSubscription$ = new Subject();
+    }
+    ngOnChanges(changes) {
+        if (changes['asyncEvents'].currentValue) {
+            const valueArray = Array.isArray(changes['asyncEvents'].currentValue)
+                ? changes['asyncEvents'].currentValue
+                : [changes['asyncEvents'].currentValue];
+            const subscriptionValueArray = valueArray
+                .filter(item => Boolean(item))
+                .map(item => {
+                if (item instanceof Promise) {
+                    return from(item).subscribe();
+                }
+                return item;
+            });
+            if (subscriptionValueArray.length > 0) {
+                if (this.busySubscription && !this.busySubscription.closed) {
+                    this.endSubscription$.next();
+                }
+                this.addSpinner(subscriptionValueArray);
+            }
+        }
     }
     ngOnDestroy() {
-        this.validation.complete();
+        this.endSubscription$.complete();
+    }
+    addSpinner(asyncEvents) {
+        const componentRef = this.viewContainerRef.createComponent(BusyComponent);
+        this.insertedNode = this.host.insertBefore(componentRef.location.nativeElement, this.host.firstChild);
+        this.renderer.addClass(this.host, 'position-relative');
+        this.renderer.addClass(this.host, 'overflow-hidden');
+        this.busySubscription = interval()
+            .pipe(map(() => asyncEvents.every(item => item.closed)), filter(everySubscriptionClosed => Boolean(everySubscriptionClosed)), take(1), takeUntil(this.endSubscription$))
+            .subscribe(({
+            complete: () => {
+                this.removeSpinner();
+            },
+            error: () => {
+                this.removeSpinner();
+            },
+        }));
+    }
+    removeSpinner() {
+        if (this.insertedNode)
+            this.host.removeChild(this.insertedNode);
+        this.renderer.removeClass(this.host, 'position-relative');
+        this.renderer.removeClass(this.host, 'overflow-hidden');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BusyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: BusyDirective, isStandalone: true, selector: "[joBusy]", inputs: { asyncEvents: ["joBusy", "asyncEvents"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BusyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[joBusy]'
+                }]
+        }], propDecorators: { asyncEvents: [{
+                type: Input,
+                args: ['joBusy']
+            }] } });
+
+class ControlDirective extends BorderRadiusDirective {
+    constructor() {
+        super(...arguments);
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     }
     onTouched() { }
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
+        this.isDisabled.set(isDisabled);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: ControlDirective, selector: "[joControl]", inputs: { required: "required" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ControlDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ControlDirective, isStandalone: true, selector: "[joControl]", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[joControl]'
                 }]
-        }], ctorParameters: () => [], propDecorators: { required: [{
-                type: Input
-            }] } });
+        }], propDecorators: { required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
 
 function isNumber(value) {
     return typeof value === 'number'
@@ -113,60 +145,45 @@ function isItems(value) {
     return Array.isArray(value) && value.every(item => isItem(item));
 }
 
+function toItems(value) {
+    if (!isItems(value))
+        throw new Error('[items] expects: { key: boolean | number | string, value: string }[]');
+    return value;
+}
+function toLimit(value) {
+    if (value == null)
+        value = 0;
+    if (!isNumber(value) || value < 0 || !Number.isInteger(value))
+        throw new Error('limit expects: positive integer');
+    return value;
+}
 class ItemDirective extends ControlDirective {
-    get items() {
-        return this._items;
-    }
-    set items(value) {
-        if (!isItems(value))
-            throw new Error('[items] expects: { key: boolean | number | string, value: string }[]');
-        this._items = value;
-        this.filteredItems = value;
-        this.validation.next();
-    }
-    get limit() {
-        return this._limit;
-    }
-    set limit(value) {
-        if (value == null)
-            value = 0;
-        if (!isNumber(value) || value < 0 || !Number.isInteger(value))
-            throw new Error('limit expects: positive integer');
-        this._limit = value;
-        this.validation.next();
-    }
-    get isMultiple() {
-        return this._isMultiple;
-    }
-    set isMultiple(value) {
-        if (value === '')
-            value = true;
-        if (value == null)
-            value = false;
-        if (typeof value !== 'boolean')
-            throw new Error('multiple expects: boolean');
-        this._isMultiple = value;
-    }
-    set model(value) {
-        this._model = value;
+    constructor() {
+        super();
+        this.ngControl = inject(NgControl, { self: true });
+        this.items = input([], { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), transform: toItems });
+        this.limit = input(0, { ...(ngDevMode ? { debugName: "limit" } : /* istanbul ignore next */ {}), transform: toLimit });
+        this.isMultiple = input(false, { ...(ngDevMode ? { debugName: "isMultiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.model = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.ngControl.valueAccessor = this;
+        // Re-run validation synchronously whenever an input that feeds the
+        // validators changes. No debounce means validity repaints under zoneless.
+        effect(() => {
+            this.items();
+            this.limit();
+            this.isMultiple();
+            this.required();
+            this.validate();
+        });
+    }
+    setModel(value) {
+        this.model.set(value);
         this.onChange(value.length === 0
             ? null
-            : this.isMultiple
-                ? this._model
-                : this._model[0]);
-    }
-    constructor(ngControl) {
-        super();
-        this.ngControl = ngControl;
-        this._items = [];
-        this.filteredItems = [];
-        this._limit = 0;
-        this._isMultiple = false;
-        this._model = [];
-        this.validation
-            .pipe(debounceTime(100))
-            .subscribe(() => this.validate());
-        ngControl.valueAccessor = this;
+            : this.isMultiple()
+                ? value
+                : value[0]);
     }
     onChange(_value) { }
     registerOnChange(fn) {
@@ -178,7 +195,7 @@ class ItemDirective extends ControlDirective {
         if (!Array.isArray(value))
             value = [value];
         if (value.every(item => isPrimitive(item)))
-            this._model = value;
+            this.model.set(value);
     }
     invalidValidator(items, isMultiple) {
         return (control) => (isMultiple
@@ -194,106 +211,116 @@ class ItemDirective extends ControlDirective {
     }
     validate() {
         const validators = [
-            this.invalidValidator(this._items, this._isMultiple),
+            this.invalidValidator(this.items(), this.isMultiple()),
         ];
-        if (this._isMultiple)
-            validators.push(this.limitValidator(this._limit));
-        if (this.required === true)
+        if (this.isMultiple())
+            validators.push(this.limitValidator(this.limit()));
+        if (this.required() === true)
             validators.push(Validators.required);
-        if (this.ngControl.control === null)
-            throw new Error('expected control to be defined');
-        this.ngControl.control.setValidators(validators);
-        this.ngControl.control.updateValueAndValidity();
+        this.ngControl.control?.setValidators(validators);
+        this.ngControl.control?.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ItemDirective, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: ItemDirective, selector: "[joItem]", inputs: { items: "items", limit: "limit", isMultiple: "isMultiple" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ItemDirective, isStandalone: true, selector: "[joItem]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[joItem]'
                 }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }] }], propDecorators: { items: [{
-                type: Input
-            }], limit: [{
-                type: Input
-            }], isMultiple: [{
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], isMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiple", required: false }] }] } });
+
+class SizeDirective {
+    constructor() {
+        this._size = '100%';
+        this.sizeChangesSubject = new Subject();
+    }
+    get size() {
+        return this._size;
+    }
+    set size(value) {
+        if (value === null || value === undefined)
+            value = '100%';
+        if (typeof value === 'number' && value >= 0 && value <= 100)
+            value = `${value}%`;
+        if (typeof value !== 'string')
+            throw new Error('size input must be: string');
+        // todo: write regex
+        // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height
+        this._size = value;
+        this.sizeChangesSubject.next();
+    }
+    ngOnDestroy() {
+        this.sizeChangesSubject.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: SizeDirective, isStandalone: true, selector: "[size]", inputs: { size: "size" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[size]'
+                }]
+        }], propDecorators: { size: [{
                 type: Input
             }] } });
 
 class ChoiceComponent extends ItemDirective {
-    constructor(ngControl) {
-        super(ngControl);
-        this.ngControl = ngControl;
-        this._isColumn = false;
+    constructor() {
+        super(...arguments);
+        this.isColumn = input(false, { ...(ngDevMode ? { debugName: "isColumn" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.id = `${Math.random().toString(36).substr(2, 9)}`;
     }
-    get isColumn() {
-        return this._isColumn;
-    }
-    set isColumn(value) {
-        if (value === '')
-            value = true;
-        if (value == null)
-            value = false;
-        if (typeof value !== 'boolean')
-            throw new Error('isColumn expects: boolean');
-        this._isColumn = value;
-    }
     onClick(item) {
-        this._model = this._model
-            .filter(key => this._items.map(item => item.key).includes(key));
-        if (this._model.includes(item.key)) {
-            if (this.required === true && this._model.length === 1)
+        const keys = this.items().map(item => item.key);
+        const model = this.model().filter(key => keys.includes(key));
+        if (model.includes(item.key)) {
+            if (this.required() === true && model.length === 1)
                 return;
-            this.model = this._model.filter(key => key !== item.key);
+            this.setModel(model.filter(key => key !== item.key));
             return;
         }
-        if (!this.isMultiple && this._model.length === 1) {
-            this.model = [item.key];
+        if (!this.isMultiple() && model.length === 1) {
+            this.setModel([item.key]);
             return;
         }
-        this.model = [...this._model, item.key];
+        this.setModel([...model, item.key]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChoiceComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ChoiceComponent, selector: "jo-choice", inputs: { isColumn: "isColumn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n  <label\r\n    id=\"choice_{{id}}\"\r\n    [class.required]=\"required\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </label>\r\n  <div>\r\n    <ng-content select=\"[rightAligned]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  class=\"d-flex flex-wrap align-items-start\"\r\n  role=\"group\"\r\n  attr.aria-labelledby=\"choice_{{id}}\"\r\n  [class.flex-column]=\"isColumn\"\r\n>\r\n  <button\r\n    *ngFor=\"let item of items; let idx = index\"\r\n    type=\"button\"\r\n    class=\"d-flex align-items-center gap-2 text-start\"\r\n    role=\"menuitemcheckbox\"\r\n    [class.br-end]=\"borderRadiusRight\"\r\n    [class.br-start]=\"borderRadiusLeft\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"onClick(item)\"\r\n    (blur)=\"onTouched()\"\r\n  >\r\n    <div\r\n      class=\"jo-button {{isMultiple ? 'br-20' : 'br-50'}}\"\r\n      [class.active]=\"_model.includes(item.key)\"\r\n      [class.disabled]=\"isDisabled\"\r\n      [class.invalid]=\"ngControl.control?.invalid\"\r\n    >\r\n      <icon\r\n        *ngIf=\"_model.includes(item.key)\"\r\n        size=\"1rem\"\r\n        [type]=\"isMultiple ? 'check' : 'dot'\"\r\n        [fill]=\"[null, 'current']\"\r\n        fillRotate=\"90\"\r\n      ></icon>\r\n    </div>\r\n    <span>{{item.value}}</span>\r\n  </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n  <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n    invalid model\r\n  </li>\r\n</ul> -->", styles: [":host{display:block}:host>.d-flex>button{border-color:transparent;border-width:.075em}:host>.d-flex>button>.jo-button{position:relative;text-align:left}:host>.d-flex>button>.jo-button>icon{position:absolute;top:0;left:0}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChoiceComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChoiceComponent, isStandalone: true, selector: "jo-choice", inputs: { isColumn: { classPropertyName: "isColumn", publicName: "isColumn", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\n  <label\n    id=\"choice_{{id}}\"\n    [class.required]=\"required()\"\n    >\n    <ng-content></ng-content>\n  </label>\n  <div>\n    <ng-content select=\"[rightAligned]\"></ng-content>\n  </div>\n</div>\n\n<div\n  class=\"d-flex flex-wrap align-items-start\"\n  role=\"group\"\n  attr.aria-labelledby=\"choice_{{id}}\"\n  [class.flex-column]=\"isColumn()\"\n  >\n  @for (item of items(); track item; let idx = $index) {\n    <button\n      type=\"button\"\n      class=\"d-flex align-items-center gap-2 text-start\"\n      role=\"menuitemcheckbox\"\n      [class.br-end]=\"borderRadiusRight()\"\n      [class.br-start]=\"borderRadiusLeft()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClick(item)\"\n      (blur)=\"onTouched()\"\n      >\n      <div\n        class=\"jo-button {{isMultiple() ? 'br-20' : 'br-50'}}\"\n        [class.active]=\"model().includes(item.key)\"\n        [class.disabled]=\"isDisabled()\"\n        [class.invalid]=\"ngControl.control?.invalid\"\n        >\n        @if (model().includes(item.key)) {\n          <icon\n            size=\"1rem\"\n            [type]=\"isMultiple() ? 'check' : 'dot'\"\n            [fill]=\"[null, 'current']\"\n            fillRotate=\"90\"\n          ></icon>\n        }\n      </div>\n      <span>{{item.value}}</span>\n    </button>\n  }\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n  invalid model\n</li>\n</ul> -->\n", styles: [":host{display:block}:host>.d-flex>button{border-color:transparent;border-width:.075em}:host>.d-flex>button>.jo-button{position:relative;text-align:left}:host>.d-flex>button>.jo-button>icon{position:absolute;top:0;left:0}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChoiceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChoiceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jo-choice', template: "<div class=\"d-flex justify-content-between\">\r\n  <label\r\n    id=\"choice_{{id}}\"\r\n    [class.required]=\"required\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </label>\r\n  <div>\r\n    <ng-content select=\"[rightAligned]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  class=\"d-flex flex-wrap align-items-start\"\r\n  role=\"group\"\r\n  attr.aria-labelledby=\"choice_{{id}}\"\r\n  [class.flex-column]=\"isColumn\"\r\n>\r\n  <button\r\n    *ngFor=\"let item of items; let idx = index\"\r\n    type=\"button\"\r\n    class=\"d-flex align-items-center gap-2 text-start\"\r\n    role=\"menuitemcheckbox\"\r\n    [class.br-end]=\"borderRadiusRight\"\r\n    [class.br-start]=\"borderRadiusLeft\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"onClick(item)\"\r\n    (blur)=\"onTouched()\"\r\n  >\r\n    <div\r\n      class=\"jo-button {{isMultiple ? 'br-20' : 'br-50'}}\"\r\n      [class.active]=\"_model.includes(item.key)\"\r\n      [class.disabled]=\"isDisabled\"\r\n      [class.invalid]=\"ngControl.control?.invalid\"\r\n    >\r\n      <icon\r\n        *ngIf=\"_model.includes(item.key)\"\r\n        size=\"1rem\"\r\n        [type]=\"isMultiple ? 'check' : 'dot'\"\r\n        [fill]=\"[null, 'current']\"\r\n        fillRotate=\"90\"\r\n      ></icon>\r\n    </div>\r\n    <span>{{item.value}}</span>\r\n  </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n  <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n    invalid model\r\n  </li>\r\n</ul> -->", styles: [":host{display:block}:host>.d-flex>button{border-color:transparent;border-width:.075em}:host>.d-flex>button>.jo-button{position:relative;text-align:left}:host>.d-flex>button>.jo-button>icon{position:absolute;top:0;left:0}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }] }], propDecorators: { isColumn: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'jo-choice', changeDetection: ChangeDetectionStrategy.Eager, imports: [IconComponent], template: "<div class=\"d-flex justify-content-between\">\n  <label\n    id=\"choice_{{id}}\"\n    [class.required]=\"required()\"\n    >\n    <ng-content></ng-content>\n  </label>\n  <div>\n    <ng-content select=\"[rightAligned]\"></ng-content>\n  </div>\n</div>\n\n<div\n  class=\"d-flex flex-wrap align-items-start\"\n  role=\"group\"\n  attr.aria-labelledby=\"choice_{{id}}\"\n  [class.flex-column]=\"isColumn()\"\n  >\n  @for (item of items(); track item; let idx = $index) {\n    <button\n      type=\"button\"\n      class=\"d-flex align-items-center gap-2 text-start\"\n      role=\"menuitemcheckbox\"\n      [class.br-end]=\"borderRadiusRight()\"\n      [class.br-start]=\"borderRadiusLeft()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onClick(item)\"\n      (blur)=\"onTouched()\"\n      >\n      <div\n        class=\"jo-button {{isMultiple() ? 'br-20' : 'br-50'}}\"\n        [class.active]=\"model().includes(item.key)\"\n        [class.disabled]=\"isDisabled()\"\n        [class.invalid]=\"ngControl.control?.invalid\"\n        >\n        @if (model().includes(item.key)) {\n          <icon\n            size=\"1rem\"\n            [type]=\"isMultiple() ? 'check' : 'dot'\"\n            [fill]=\"[null, 'current']\"\n            fillRotate=\"90\"\n          ></icon>\n        }\n      </div>\n      <span>{{item.value}}</span>\n    </button>\n  }\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n  invalid model\n</li>\n</ul> -->\n", styles: [":host{display:block}:host>.d-flex>button{border-color:transparent;border-width:.075em}:host>.d-flex>button>.jo-button{position:relative;text-align:left}:host>.d-flex>button>.jo-button>icon{position:absolute;top:0;left:0}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
+        }], propDecorators: { isColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColumn", required: false }] }] } });
 
 class ColorComponent extends ControlDirective {
-    get model() {
-        return this._model;
-    }
-    set model(value) {
-        this._model = value;
-        this.onChange(this._model !== null && this.fullHex.test(this._model)
-            ? this._model
-            : null);
-    }
-    constructor(ngControl) {
+    constructor() {
         super();
-        this.ngControl = ngControl;
+        this.ngControl = inject(NgControl, { self: true });
         this.partialHex = /^[0-9A-Fa-f]{1,6}$/;
         this.fullHex = /^[0-9A-Fa-f]{6}$/;
-        this._model = null;
+        this.model = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
         this.id = `_${Math.random().toString(36).substring(2, 11)}`;
-        this.validation
-            .pipe(debounceTime(100))
-            .subscribe(() => this.validate());
-        ngControl.valueAccessor = this;
+        this.ngControl.valueAccessor = this;
+        effect(() => {
+            this.required();
+            this.validate();
+        });
+    }
+    onModelChange(value) {
+        this.setModel(value);
     }
     onChangeColor(event) {
         const ele = event.target;
-        this.model = ele.value.substring(1).toUpperCase();
+        this.setModel(ele.value.substring(1).toUpperCase());
+    }
+    setModel(value) {
+        this.model.set(value);
+        this.onChange(value !== null && this.fullHex.test(value)
+            ? value
+            : null);
     }
     onChange(_model) { }
     registerOnChange(fn) {
@@ -313,7 +340,7 @@ class ColorComponent extends ControlDirective {
         if (value === undefined || typeof value !== 'string' || !this.partialHex.test(value))
             value = null;
         if (value === null || this.partialHex.test(value))
-            this._model = value;
+            this.model.set(value);
     }
     invalidValidator() {
         return (control) => control.value !== null && (typeof control.value !== 'string' || !this.fullHex.test(control.value))
@@ -324,60 +351,48 @@ class ColorComponent extends ControlDirective {
         const validators = [
             this.invalidValidator()
         ];
-        if (this.required === true)
+        if (this.required() === true)
             validators.push(Validators.required);
         this.ngControl.control?.setValidators(validators);
         this.ngControl.control?.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ColorComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ColorComponent, selector: "jo-color", usesInheritance: true, ngImport: i0, template: "<label\r\n  [for]=\"id\"\r\n  [class.required]=\"required\"\r\n>\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n  <button\r\n    class=\"d-flex align-items-center\"\r\n    title=\"Color\"\r\n    [class.br-start]=\"borderRadiusLeft\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"colorInput.click()\"\r\n  >\r\n    <icon\r\n      size=\"1rem\"\r\n      type=\"square\"\r\n      [fill]=\"fullHex.test(_model || '') ? _model : [null, 'current']\"\r\n      fillRotate=\"90\"\r\n      [stroke]=\"fullHex.test(_model || '') ? _model : ['current']\"\r\n    ></icon>\r\n  </button>\r\n  <input\r\n    [(ngModel)]=\"model\"\r\n    spellcheck=\"false\"\r\n    size=\"5\"\r\n    type=\"text\"\r\n    [class.active]=\"ngControl.control?.value !== null\"\r\n    [class.br-end]=\"borderRadiusRight\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    [disabled]=\"isDisabled\"\r\n    [id]=\"id\"\r\n    (beforeinput)=\"onBeforeinput($event)\"\r\n    (blur)=\"onTouched()\"\r\n  />\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n  <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n    invalid model\r\n  </li>\r\n</ul> -->\r\n\r\n<input\r\n  #colorInput\r\n  type=\"color\"\r\n  (change)=\"onChangeColor($event)\"\r\n/>", styles: [":host{display:block}input[type=color]{margin-top:-2em;padding:0;position:absolute;visibility:hidden;transition:none}:host>div>input{border-left:0}:host>div>button{border-right:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: ColorComponent, isStandalone: true, selector: "jo-color", usesInheritance: true, ngImport: i0, template: "<label\n  [for]=\"id\"\n  [class.required]=\"required()\"\n>\n  <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex align-items-stretch\">\n  <button\n    class=\"d-flex align-items-center\"\n    title=\"Color\"\n    [class.br-start]=\"borderRadiusLeft()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"colorInput.click()\"\n  >\n    <icon\n      size=\"1rem\"\n      type=\"square\"\n      [fill]=\"fullHex.test(model() || '') ? model() : [null, 'current']\"\n      fillRotate=\"90\"\n      [stroke]=\"fullHex.test(model() || '') ? model() : ['current']\"\n    ></icon>\n  </button>\n  <input\n    [ngModel]=\"model()\"\n    (ngModelChange)=\"onModelChange($event)\"\n    spellcheck=\"false\"\n    size=\"5\"\n    type=\"text\"\n    [class.active]=\"ngControl.control?.value !== null\"\n    [class.br-end]=\"borderRadiusRight()\"\n    [class.invalid]=\"ngControl.control?.invalid\"\n    [disabled]=\"isDisabled()\"\n    [id]=\"id\"\n    (beforeinput)=\"onBeforeinput($event)\"\n    (blur)=\"onTouched()\"\n  />\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n  <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n    invalid model\n  </li>\n</ul> -->\n\n<input\n  #colorInput\n  type=\"color\"\n  (change)=\"onChangeColor($event)\"\n/>\n", styles: [":host{display:block}input[type=color]{margin-top:-2em;padding:0;position:absolute;visibility:hidden;transition:none}:host>div>input{border-left:0}:host>div>button{border-right:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ColorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ColorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jo-color', template: "<label\r\n  [for]=\"id\"\r\n  [class.required]=\"required\"\r\n>\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n  <button\r\n    class=\"d-flex align-items-center\"\r\n    title=\"Color\"\r\n    [class.br-start]=\"borderRadiusLeft\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"colorInput.click()\"\r\n  >\r\n    <icon\r\n      size=\"1rem\"\r\n      type=\"square\"\r\n      [fill]=\"fullHex.test(_model || '') ? _model : [null, 'current']\"\r\n      fillRotate=\"90\"\r\n      [stroke]=\"fullHex.test(_model || '') ? _model : ['current']\"\r\n    ></icon>\r\n  </button>\r\n  <input\r\n    [(ngModel)]=\"model\"\r\n    spellcheck=\"false\"\r\n    size=\"5\"\r\n    type=\"text\"\r\n    [class.active]=\"ngControl.control?.value !== null\"\r\n    [class.br-end]=\"borderRadiusRight\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    [disabled]=\"isDisabled\"\r\n    [id]=\"id\"\r\n    (beforeinput)=\"onBeforeinput($event)\"\r\n    (blur)=\"onTouched()\"\r\n  />\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n  <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n    invalid model\r\n  </li>\r\n</ul> -->\r\n\r\n<input\r\n  #colorInput\r\n  type=\"color\"\r\n  (change)=\"onChangeColor($event)\"\r\n/>", styles: [":host{display:block}input[type=color]{margin-top:-2em;padding:0;position:absolute;visibility:hidden;transition:none}:host>div>input{border-left:0}:host>div>button{border-right:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }] }] });
+            args: [{ selector: 'jo-color', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IconComponent], template: "<label\n  [for]=\"id\"\n  [class.required]=\"required()\"\n>\n  <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex align-items-stretch\">\n  <button\n    class=\"d-flex align-items-center\"\n    title=\"Color\"\n    [class.br-start]=\"borderRadiusLeft()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"colorInput.click()\"\n  >\n    <icon\n      size=\"1rem\"\n      type=\"square\"\n      [fill]=\"fullHex.test(model() || '') ? model() : [null, 'current']\"\n      fillRotate=\"90\"\n      [stroke]=\"fullHex.test(model() || '') ? model() : ['current']\"\n    ></icon>\n  </button>\n  <input\n    [ngModel]=\"model()\"\n    (ngModelChange)=\"onModelChange($event)\"\n    spellcheck=\"false\"\n    size=\"5\"\n    type=\"text\"\n    [class.active]=\"ngControl.control?.value !== null\"\n    [class.br-end]=\"borderRadiusRight()\"\n    [class.invalid]=\"ngControl.control?.invalid\"\n    [disabled]=\"isDisabled()\"\n    [id]=\"id\"\n    (beforeinput)=\"onBeforeinput($event)\"\n    (blur)=\"onTouched()\"\n  />\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n  <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n    invalid model\n  </li>\n</ul> -->\n\n<input\n  #colorInput\n  type=\"color\"\n  (change)=\"onChangeColor($event)\"\n/>\n", styles: [":host{display:block}input[type=color]{margin-top:-2em;padding:0;position:absolute;visibility:hidden;transition:none}:host>div>input{border-left:0}:host>div>button{border-right:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
+        }], ctorParameters: () => [] });
 
+function toAcceptedTypes(value) {
+    if (!Array.isArray(value) || !value.every(item => typeof item === 'string'))
+        throw new Error(`acceptedTypes expects: string[]`);
+    return value;
+}
+function toSizeLimitMb(value) {
+    if (!isNumber(value) || value < 0)
+        throw new Error('sizeLimitMb expects: positive number');
+    return value;
+}
 class FileComponent extends ControlDirective {
-    get acceptedTypes() {
-        return this._acceptedTypes;
-    }
-    set acceptedTypes(value) {
-        if (!Array.isArray(value) || !value.every(item => typeof item === 'string'))
-            throw new Error(`acceptedTypes expects: string[]`);
-        this._acceptedTypes = value;
-        this.validation.next();
-    }
-    get sizeLimitMb() {
-        return this._sizeLimitMb;
-    }
-    set sizeLimitMb(value) {
-        if (!isNumber(value) || value < 0)
-            throw new Error('sizeLimitMb expects: positive number');
-        this._sizeLimitMb = value;
-        this.validation.next();
-    }
-    get multiple() {
-        return this._multiple;
-    }
-    set multiple(value) {
-        this._multiple = value === true;
-        this.validation.next();
-    }
-    constructor(ngControl) {
+    constructor() {
         super();
-        this.ngControl = ngControl;
-        this._acceptedTypes = [];
-        this._sizeLimitMb = 0;
-        this._multiple = false;
-        this.showSize = false;
-        this.model = null;
+        this.ngControl = inject(NgControl, { self: true });
+        this.acceptedTypes = input([], { ...(ngDevMode ? { debugName: "acceptedTypes" } : /* istanbul ignore next */ {}), transform: toAcceptedTypes });
+        this.sizeLimitMb = input(0, { ...(ngDevMode ? { debugName: "sizeLimitMb" } : /* istanbul ignore next */ {}), transform: toSizeLimitMb });
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.showSize = input(false, { ...(ngDevMode ? { debugName: "showSize" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.model = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
         this.id = `${Math.random().toString(36).substr(2, 9)}`;
-        this.validation
-            .pipe(debounceTime(100))
-            .subscribe(() => this.validate());
-        ngControl.valueAccessor = this;
+        this.ngControl.valueAccessor = this;
+        effect(() => {
+            this.acceptedTypes();
+            this.sizeLimitMb();
+            this.multiple();
+            this.required();
+            this.validate();
+        });
     }
     get fileNames() {
         if (this.ngControl.value instanceof FileList)
@@ -387,9 +402,9 @@ class FileComponent extends ControlDirective {
         return '';
     }
     get sizeLimit() {
-        return this.sizeLimitMb < 1
-            ? `${this.sizeLimitMb * 1000} KB`
-            : `${this.sizeLimitMb} MB`;
+        return this.sizeLimitMb() < 1
+            ? `${this.sizeLimitMb() * 1000} KB`
+            : `${this.sizeLimitMb()} MB`;
     }
     onFileChange(event) {
         const target = event.target;
@@ -397,6 +412,9 @@ class FileComponent extends ControlDirective {
             ? target.files
             : null);
     }
+    onFileCancel() {
+        this.onChange(null);
+    }
     onChange(_model) { }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -407,7 +425,7 @@ class FileComponent extends ControlDirective {
         if (value !== null && !(value instanceof FileList))
             throw new Error('control value must be: File or null');
         // todo
-        // this.model = value;
+        // this.model.set(value);
     }
     acceptedTypesValidator(acceptedTypes) {
         return (control) => control.value !== null
@@ -432,95 +450,64 @@ class FileComponent extends ControlDirective {
     }
     validate() {
         const validators = [
-            this.invalidValidator(this.multiple)
+            this.invalidValidator(this.multiple())
         ];
-        if (this.acceptedTypes.length > 0)
-            validators.push(this.acceptedTypesValidator(this.acceptedTypes));
-        if (this.sizeLimitMb > 0)
-            validators.push(this.sizeLimitMbValidator(this.sizeLimitMb));
-        if (this.required === true)
+        if (this.acceptedTypes().length > 0)
+            validators.push(this.acceptedTypesValidator(this.acceptedTypes()));
+        if (this.sizeLimitMb() > 0)
+            validators.push(this.sizeLimitMbValidator(this.sizeLimitMb()));
+        if (this.required() === true)
             validators.push(Validators.required);
         this.ngControl.control?.setValidators(validators);
         this.ngControl.control?.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FileComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: FileComponent, selector: "jo-file", inputs: { acceptedTypes: "acceptedTypes", sizeLimitMb: "sizeLimitMb", multiple: "multiple", showSize: "showSize" }, usesInheritance: true, ngImport: i0, template: "<label [class.required]=\"required\">\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-center\">\r\n  <div>\r\n    <button\r\n      class=\"white-space-nowrap\"\r\n      [class.br-end]=\"borderRadiusRight\"\r\n      [class.br-start]=\"borderRadiusLeft\"\r\n      [class.active]=\"ngControl.value !== null\"\r\n      [disabled]=\"isDisabled\"\r\n      (click)=\"fileInput.click()\"\r\n    >\r\n      <icon\r\n        type=\"folder\"\r\n        size=\"1rem\"\r\n        class=\"me-2\"\r\n        [fill]=\"[null, 'current']\"\r\n        fillRotate=\"90\"\r\n      ></icon>\r\n      Choose {{multiple ? 'Files' : 'File'}}\r\n    </button>\r\n  </div>\r\n  <div\r\n    *ngIf=\"ngControl.value\"\r\n    class=\"ml-2\"\r\n  >\r\n    {{fileNames}}\r\n  </div>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n  <li *ngIf=\"ngControl.control?.errors?.['acceptedTypes']\">\r\n    valid types are {{acceptedTypes.join(', ')}}\r\n  </li>\r\n  <li *ngIf=\"ngControl.control?.errors?.['sizeLimitMb']\">\r\n    max file size is {{sizeLimit}}\r\n  </li>\r\n  <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n    invalid model\r\n  </li>\r\n</ul> -->\r\n\r\n<input\r\n  [(ngModel)]=\"model\"\r\n  #fileInput\r\n  type=\"file\"\r\n  [accept]=\"acceptedTypes.join()\"\r\n  [multiple]=\"multiple\"\r\n  [id]=\"id\"\r\n  (change)=\"onFileChange($event)\"\r\n/>", styles: ["input[type=file]{display:none}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: FileComponent, isStandalone: true, selector: "jo-file", inputs: { acceptedTypes: { classPropertyName: "acceptedTypes", publicName: "acceptedTypes", isSignal: true, isRequired: false, transformFunction: null }, sizeLimitMb: { classPropertyName: "sizeLimitMb", publicName: "sizeLimitMb", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSize: { classPropertyName: "showSize", publicName: "showSize", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\n  <label [class.required]=\"required()\">\n    <ng-content></ng-content>\n  </label>\n  <div>\n    <ng-content select=\"[rightAligned]\"></ng-content>\n  </div>\n</div>\n\n<div class=\"d-flex align-items-stretch\">\n  <button\n    class=\"d-flex align-items-center gap-2\"\n    [class.br-start]=\"borderRadiusLeft()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"fileInput.click()\"\n    >\n    <icon\n      type=\"folder\"\n      size=\"1rem\"\n      [fill]=\"[null, 'current']\"\n      fillRotate=\"90\"\n    ></icon>\n    Browse...\n  </button>\n  <button\n    class=\"d-flex align-items-center\"\n    [class.br-end]=\"borderRadiusRight()\"\n    [class.active]=\"ngControl.value !== null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"fileInput.click()\"\n    >\n    @if (!ngControl.value) {\n      No {{multiple() ? 'files' : 'file'}} selected\n    }\n    @if (ngControl.value) {\n      {{fileNames}}\n    }\n  </button>\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['acceptedTypes']\">\n  valid types are {{acceptedTypes().join(', ')}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['sizeLimitMb']\">\n  max file size is {{sizeLimit}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n  invalid model\n</li>\n</ul> -->\n\n<input\n  [ngModel]=\"model()\"\n  #fileInput\n  type=\"file\"\n  [accept]=\"acceptedTypes().join()\"\n  [multiple]=\"multiple()\"\n  [id]=\"id\"\n  (change)=\"onFileChange($event)\"\n  (cancel)=\"onFileCancel()\"\n  />\n", styles: ["input[type=file]{display:none}div button:first-child{border-right:none;flex-shrink:0}div button:last-child{border-left:none;display:block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jo-file', template: "<label [class.required]=\"required\">\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-center\">\r\n  <div>\r\n    <button\r\n      class=\"white-space-nowrap\"\r\n      [class.br-end]=\"borderRadiusRight\"\r\n      [class.br-start]=\"borderRadiusLeft\"\r\n      [class.active]=\"ngControl.value !== null\"\r\n      [disabled]=\"isDisabled\"\r\n      (click)=\"fileInput.click()\"\r\n    >\r\n      <icon\r\n        type=\"folder\"\r\n        size=\"1rem\"\r\n        class=\"me-2\"\r\n        [fill]=\"[null, 'current']\"\r\n        fillRotate=\"90\"\r\n      ></icon>\r\n      Choose {{multiple ? 'Files' : 'File'}}\r\n    </button>\r\n  </div>\r\n  <div\r\n    *ngIf=\"ngControl.value\"\r\n    class=\"ml-2\"\r\n  >\r\n    {{fileNames}}\r\n  </div>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n  <li *ngIf=\"ngControl.control?.errors?.['acceptedTypes']\">\r\n    valid types are {{acceptedTypes.join(', ')}}\r\n  </li>\r\n  <li *ngIf=\"ngControl.control?.errors?.['sizeLimitMb']\">\r\n    max file size is {{sizeLimit}}\r\n  </li>\r\n  <li *ngIf=\"ngControl.control?.errors?.['invalid']\">\r\n    invalid model\r\n  </li>\r\n</ul> -->\r\n\r\n<input\r\n  [(ngModel)]=\"model\"\r\n  #fileInput\r\n  type=\"file\"\r\n  [accept]=\"acceptedTypes.join()\"\r\n  [multiple]=\"multiple\"\r\n  [id]=\"id\"\r\n  (change)=\"onFileChange($event)\"\r\n/>", styles: ["input[type=file]{display:none}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }] }], propDecorators: { acceptedTypes: [{
-                type: Input
-            }], sizeLimitMb: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], showSize: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'jo-file', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IconComponent], template: "<div class=\"d-flex justify-content-between\">\n  <label [class.required]=\"required()\">\n    <ng-content></ng-content>\n  </label>\n  <div>\n    <ng-content select=\"[rightAligned]\"></ng-content>\n  </div>\n</div>\n\n<div class=\"d-flex align-items-stretch\">\n  <button\n    class=\"d-flex align-items-center gap-2\"\n    [class.br-start]=\"borderRadiusLeft()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"fileInput.click()\"\n    >\n    <icon\n      type=\"folder\"\n      size=\"1rem\"\n      [fill]=\"[null, 'current']\"\n      fillRotate=\"90\"\n    ></icon>\n    Browse...\n  </button>\n  <button\n    class=\"d-flex align-items-center\"\n    [class.br-end]=\"borderRadiusRight()\"\n    [class.active]=\"ngControl.value !== null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"fileInput.click()\"\n    >\n    @if (!ngControl.value) {\n      No {{multiple() ? 'files' : 'file'}} selected\n    }\n    @if (ngControl.value) {\n      {{fileNames}}\n    }\n  </button>\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['acceptedTypes']\">\n  valid types are {{acceptedTypes().join(', ')}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['sizeLimitMb']\">\n  max file size is {{sizeLimit}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['invalid']\">\n  invalid model\n</li>\n</ul> -->\n\n<input\n  [ngModel]=\"model()\"\n  #fileInput\n  type=\"file\"\n  [accept]=\"acceptedTypes().join()\"\n  [multiple]=\"multiple()\"\n  [id]=\"id\"\n  (change)=\"onFileChange($event)\"\n  (cancel)=\"onFileCancel()\"\n  />\n", styles: ["input[type=file]{display:none}div button:first-child{border-right:none;flex-shrink:0}div button:last-child{border-left:none;display:block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { acceptedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedTypes", required: false }] }], sizeLimitMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeLimitMb", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSize", required: false }] }] } });
 
+function toNumber(label) {
+    return (value) => {
+        const result = typeof value === 'string' ? parseFloat(value) : value;
+        if (!isNumber(result))
+            throw new Error(`[${label}] expects: number`);
+        return result;
+    };
+}
 class NumberComponent extends ControlDirective {
-    get min() {
-        return this._min;
-    }
-    set min(value) {
-        if (!isNumber(value))
-            throw new Error('[min] expects: number');
-        this._min = value;
-        this.validation.next();
-    }
-    get max() {
-        return this._max;
-    }
-    set max(value) {
-        if (!isNumber(value))
-            throw new Error('[max] expects: number');
-        this._max = value;
-        this.validation.next();
-    }
-    get step() {
-        return this._step;
-    }
-    set step(value) {
-        if (!isNumber(value))
-            throw new Error('[step] expects: number');
-        this._step = value;
-        this.mustBeInteger = Number.isInteger(this._step);
-    }
-    constructor(ngControl) {
+    constructor() {
         super();
-        this.ngControl = ngControl;
-        this._min = 0;
-        this._max = 9;
-        this._step = 1;
-        this.mustBeInteger = true;
+        this.ngControl = inject(NgControl, { self: true });
+        this.min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: toNumber('min') });
+        this.max = input(9, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: toNumber('max') });
+        this.step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: toNumber('step') });
         this.sizePadding = 5;
-        this._model = null;
-        this.validation.subscribe(() => this.validate());
-        this.validation.next();
-        ngControl.valueAccessor = this;
-    }
-    get model() {
-        return this._model;
-    }
-    set model(value) {
-        this._model = value;
-        this.onChange(this._model);
-    }
-    get isDisabledAdd() {
-        return this.isDisabled === true
-            || this.model !== null
-                && this.model + this.step > this.max;
-    }
-    get isDisabledSubtract() {
-        return this.isDisabled === true
-            || this._model !== null
-                && this._model - this.step < this.min;
-    }
-    get maxDigitSize() {
-        return Math.max(this._step.toString().length, this._max.toString().length, this._min.toString().length);
+        this.model = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.mustBeInteger = computed(() => Number.isInteger(this.step()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mustBeInteger" }] : /* istanbul ignore next */ []));
+        this.maxDigitSize = computed(() => Math.max(this.step().toString().length, this.max().toString().length, this.min().toString().length), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDigitSize" }] : /* istanbul ignore next */ []));
+        this.isDisabledAdd = computed(() => this.isDisabled() === true
+            || this.model() !== null
+                && this.model() + this.step() > this.max(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabledAdd" }] : /* istanbul ignore next */ []));
+        this.isDisabledSubtract = computed(() => this.isDisabled() === true
+            || this.model() !== null
+                && this.model() - this.step() < this.min(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDisabledSubtract" }] : /* istanbul ignore next */ []));
+        this.ngControl.valueAccessor = this;
+        // Re-run validation synchronously whenever an input that feeds the
+        // validators changes. No debounce means validity repaints under zoneless.
+        effect(() => {
+            this.min();
+            this.max();
+            this.required();
+            this.validate();
+        });
     }
     onBeforeinput(e) {
         const event = e;
@@ -528,27 +515,34 @@ class NumberComponent extends ControlDirective {
             return;
         const isDigit = /\d/.test(event.data);
         const isMinus = event.data === '-';
-        const isMinusAllowed = this.min < 0;
+        const isMinusAllowed = this.min() < 0;
         const isBlockedNonDigit = !isDigit && !(isMinus && isMinusAllowed);
-        const isPastMax = Number((this._model || '') + event.data) > this.max;
+        const isPastMax = Number((this.model() || '') + event.data) > this.max();
         if (isBlockedNonDigit || isPastMax)
             event.preventDefault();
     }
     add(e) {
-        if (this.model === null) {
-            this.model = this.max;
+        if (this.model() === null) {
+            this.setModel(this.max());
             return;
         }
         e.stepUp();
-        this.model = e.valueAsNumber;
+        this.setModel(e.valueAsNumber);
     }
     subtract(e) {
-        if (this.model === null) {
-            this.model = this.min;
+        if (this.model() === null) {
+            this.setModel(this.min());
             return;
         }
         e.stepDown();
-        this.model = e.valueAsNumber;
+        this.setModel(e.valueAsNumber);
+    }
+    onModelChange(value) {
+        this.setModel(value);
+    }
+    setModel(value) {
+        this.model.set(value);
+        this.onChange(value);
     }
     onChange(_model) { }
     registerOnChange(fn) {
@@ -560,138 +554,196 @@ class NumberComponent extends ControlDirective {
         if (typeof value === 'string')
             value = parseFloat(value);
         if (value === null || isNumber(value))
-            this._model = value;
+            this.model.set(value);
     }
     validate() {
         const validators = [
-            Validators.min(this.min),
-            Validators.max(this.max)
+            Validators.min(this.min()),
+            Validators.max(this.max())
         ];
-        if (this.required === true)
+        if (this.required() === true)
             validators.push(Validators.required);
         this.ngControl.control?.setValidators(validators);
         this.ngControl.control?.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NumberComponent, deps: [{ token: i1.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: NumberComponent, selector: "jo-number", inputs: { min: "min", max: "max", step: "step" }, usesInheritance: true, ngImport: i0, template: "<label [class.required]=\"required\">\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n  <input\r\n    [(ngModel)]=\"model\"\r\n    #numberInput\r\n    class=\"d-flex align-items-center\"\r\n    type=\"number\"\r\n    [size]=\"maxDigitSize + sizePadding\"\r\n    [class.active]=\"_model !== null\"\r\n    [class.br-start]=\"borderRadiusLeft\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    [disabled]=\"isDisabled\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    (beforeinput)=\"onBeforeinput($event)\"\r\n  />\r\n  <button\r\n    class=\"d-flex align-items-center\"\r\n    title=\"Subtract\"\r\n    type=\"button\"\r\n    [disabled]=\"isDisabledSubtract\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    (blur)=\"onTouched()\"\r\n    (click)=\"subtract(numberInput)\"\r\n  >\r\n    <icon\r\n      type=\"minus\"\r\n      size=\"1rem\"\r\n      [fill]=\"[null, 'current']\"\r\n      fillRotate=\"90\"\r\n    ></icon>\r\n  </button>\r\n  <button\r\n    class=\"d-flex align-items-center\"\r\n    title=\"Add\"\r\n    type=\"button\"\r\n    [class.br-end]=\"borderRadiusRight\"\r\n    [disabled]=\"isDisabledAdd\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    (blur)=\"onTouched()\"\r\n    (click)=\"add(numberInput)\"\r\n  >\r\n    <icon\r\n      type=\"plus\"\r\n      size=\"1rem\"\r\n      [fill]=\"[null, 'current']\"\r\n      fillRotate=\"90\"\r\n    ></icon>\r\n  </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n  <li *ngIf=\"ngControl.control?.errors?.['min']\">\r\n    minimum number is {{min}}\r\n  </li>\r\n  <li *ngIf=\"ngControl.control?.errors?.['max']\">\r\n    maximum number is {{max}}\r\n  </li>\r\n</ul> -->", styles: ["input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host>div>input{border-right:0}:host>div>button:not(:last-child){border-right:0;border-left:0}:host>div>button:last-child{border-left:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: NumberComponent, isStandalone: true, selector: "jo-number", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<label [class.required]=\"required()\">\n  <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex align-items-stretch\">\n  <input\n    [ngModel]=\"model()\"\n    (ngModelChange)=\"onModelChange($event)\"\n    #numberInput\n    class=\"d-flex align-items-center\"\n    type=\"number\"\n    [size]=\"maxDigitSize() + sizePadding\"\n    [class.active]=\"model() !== null\"\n    [class.br-start]=\"borderRadiusLeft()\"\n    [class.invalid]=\"ngControl.control?.invalid\"\n    [disabled]=\"isDisabled()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    (beforeinput)=\"onBeforeinput($event)\"\n  />\n  <button\n    class=\"d-flex align-items-center\"\n    title=\"Subtract\"\n    type=\"button\"\n    [disabled]=\"isDisabledSubtract()\"\n    [class.invalid]=\"ngControl.control?.invalid\"\n    (blur)=\"onTouched()\"\n    (click)=\"subtract(numberInput)\"\n  >\n    <icon\n      type=\"minus\"\n      size=\"1rem\"\n      [fill]=\"[null, 'current']\"\n      fillRotate=\"90\"\n    ></icon>\n  </button>\n  <button\n    class=\"d-flex align-items-center\"\n    title=\"Add\"\n    type=\"button\"\n    [class.br-end]=\"borderRadiusRight()\"\n    [disabled]=\"isDisabledAdd()\"\n    [class.invalid]=\"ngControl.control?.invalid\"\n    (blur)=\"onTouched()\"\n    (click)=\"add(numberInput)\"\n  >\n    <icon\n      type=\"plus\"\n      size=\"1rem\"\n      [fill]=\"[null, 'current']\"\n      fillRotate=\"90\"\n    ></icon>\n  </button>\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n  <li *ngIf=\"ngControl.control?.errors?.['min']\">\n    minimum number is {{min}}\n  </li>\n  <li *ngIf=\"ngControl.control?.errors?.['max']\">\n    maximum number is {{max}}\n  </li>\n</ul> -->", styles: ["input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host>div>input{border-right:0}:host>div>button:not(:last-child){border-right:0;border-left:0}:host>div>button:last-child{border-left:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jo-number', template: "<label [class.required]=\"required\">\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n  <input\r\n    [(ngModel)]=\"model\"\r\n    #numberInput\r\n    class=\"d-flex align-items-center\"\r\n    type=\"number\"\r\n    [size]=\"maxDigitSize + sizePadding\"\r\n    [class.active]=\"_model !== null\"\r\n    [class.br-start]=\"borderRadiusLeft\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    [disabled]=\"isDisabled\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    (beforeinput)=\"onBeforeinput($event)\"\r\n  />\r\n  <button\r\n    class=\"d-flex align-items-center\"\r\n    title=\"Subtract\"\r\n    type=\"button\"\r\n    [disabled]=\"isDisabledSubtract\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    (blur)=\"onTouched()\"\r\n    (click)=\"subtract(numberInput)\"\r\n  >\r\n    <icon\r\n      type=\"minus\"\r\n      size=\"1rem\"\r\n      [fill]=\"[null, 'current']\"\r\n      fillRotate=\"90\"\r\n    ></icon>\r\n  </button>\r\n  <button\r\n    class=\"d-flex align-items-center\"\r\n    title=\"Add\"\r\n    type=\"button\"\r\n    [class.br-end]=\"borderRadiusRight\"\r\n    [disabled]=\"isDisabledAdd\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    (blur)=\"onTouched()\"\r\n    (click)=\"add(numberInput)\"\r\n  >\r\n    <icon\r\n      type=\"plus\"\r\n      size=\"1rem\"\r\n      [fill]=\"[null, 'current']\"\r\n      fillRotate=\"90\"\r\n    ></icon>\r\n  </button>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n  <li *ngIf=\"ngControl.control?.errors?.['min']\">\r\n    minimum number is {{min}}\r\n  </li>\r\n  <li *ngIf=\"ngControl.control?.errors?.['max']\">\r\n    maximum number is {{max}}\r\n  </li>\r\n</ul> -->", styles: ["input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host>div>input{border-right:0}:host>div>button:not(:last-child){border-right:0;border-left:0}:host>div>button:last-child{border-left:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }] }], propDecorators: { min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'jo-number', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IconComponent], template: "<label [class.required]=\"required()\">\n  <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex align-items-stretch\">\n  <input\n    [ngModel]=\"model()\"\n    (ngModelChange)=\"onModelChange($event)\"\n    #numberInput\n    class=\"d-flex align-items-center\"\n    type=\"number\"\n    [size]=\"maxDigitSize() + sizePadding\"\n    [class.active]=\"model() !== null\"\n    [class.br-start]=\"borderRadiusLeft()\"\n    [class.invalid]=\"ngControl.control?.invalid\"\n    [disabled]=\"isDisabled()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    (beforeinput)=\"onBeforeinput($event)\"\n  />\n  <button\n    class=\"d-flex align-items-center\"\n    title=\"Subtract\"\n    type=\"button\"\n    [disabled]=\"isDisabledSubtract()\"\n    [class.invalid]=\"ngControl.control?.invalid\"\n    (blur)=\"onTouched()\"\n    (click)=\"subtract(numberInput)\"\n  >\n    <icon\n      type=\"minus\"\n      size=\"1rem\"\n      [fill]=\"[null, 'current']\"\n      fillRotate=\"90\"\n    ></icon>\n  </button>\n  <button\n    class=\"d-flex align-items-center\"\n    title=\"Add\"\n    type=\"button\"\n    [class.br-end]=\"borderRadiusRight()\"\n    [disabled]=\"isDisabledAdd()\"\n    [class.invalid]=\"ngControl.control?.invalid\"\n    (blur)=\"onTouched()\"\n    (click)=\"add(numberInput)\"\n  >\n    <icon\n      type=\"plus\"\n      size=\"1rem\"\n      [fill]=\"[null, 'current']\"\n      fillRotate=\"90\"\n    ></icon>\n  </button>\n</div>\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n  <li *ngIf=\"ngControl.control?.errors?.['min']\">\n    minimum number is {{min}}\n  </li>\n  <li *ngIf=\"ngControl.control?.errors?.['max']\">\n    maximum number is {{max}}\n  </li>\n</ul> -->", styles: ["input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host>div>input{border-right:0}:host>div>button:not(:last-child){border-right:0;border-left:0}:host>div>button:last-child{border-left:0}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
 
 class ReadonlyComponent {
-    constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: ReadonlyComponent, selector: "jo-readonly", inputs: { model: "model" }, ngImport: i0, template: "<label>\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"readonly p-2\">\r\n  {{model}}\r\n</div>", styles: [":host>div{color:inherit;background:transparent;border-width:.15em;border-color:transparent;border-style:solid}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }); }
+    constructor() {
+        this.model = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "model" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: ReadonlyComponent, isStandalone: true, selector: "jo-readonly", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label>\n  <ng-content></ng-content>\n</label>\n\n<div class=\"readonly p-2\">\n  {{model()}}\n</div>", styles: [":host>div{color:inherit;background:transparent;border-width:.15em;border-color:transparent;border-style:solid}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ReadonlyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ReadonlyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jo-readonly', template: "<label>\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"readonly p-2\">\r\n  {{model}}\r\n</div>", styles: [":host>div{color:inherit;background:transparent;border-width:.15em;border-color:transparent;border-style:solid}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { model: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'jo-readonly', changeDetection: ChangeDetectionStrategy.Eager, template: "<label>\n  <ng-content></ng-content>\n</label>\n\n<div class=\"readonly p-2\">\n  {{model()}}\n</div>", styles: [":host>div{color:inherit;background:transparent;border-width:.15em;border-color:transparent;border-style:solid}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }] } });
 
-class TextComponent extends ControlDirective {
-    get placeholder() {
-        return this._placeholder;
+class SelectComponent extends ItemDirective {
+    constructor() {
+        super(...arguments);
+        this.hostElement = inject(ElementRef);
+        this.dropGroup = viewChild.required('dropGroup');
+        this.dropup = viewChild.required('dropup');
+        this.dropdown = viewChild.required('dropdown');
+        this.dropHeightPx = input(200, { ...(ngDevMode ? { debugName: "dropHeightPx" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.searchTerm = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        this.filteredItems = computed(() => {
+            const term = this.searchTerm().toLowerCase();
+            return term
+                ? this.items().filter(item => item.value.toLowerCase().includes(term))
+                : this.items();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+        this.isDropdownCloseToBottom = false;
+        this.id = `${Math.random().toString(36).substr(2, 9)}`;
+        this.activeItemValues = computed(() => this.items()
+            .filter(item => this.model().includes(item.key))
+            .map(item => item.value)
+            .join(', '), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeItemValues" }] : /* istanbul ignore next */ []));
+        this.isSelectedAll = computed(() => this.items().every(item => this.model().includes(item.key)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectedAll" }] : /* istanbul ignore next */ []));
     }
-    set placeholder(v) {
-        const value = v;
-        if (typeof value !== 'string')
-            throw new Error('[placeholder] expects: string');
-        this._placeholder = value;
+    onGlobalClick(event) {
+        if (!this.hostElement.nativeElement.contains(event.target))
+            this.closeDropdown();
     }
-    get minLength() {
-        return this._minLength;
+    onSearchChange(value) {
+        this.searchTerm.set(value);
     }
-    set minLength(value) {
-        if (typeof value === 'string')
-            value = parseInt(value, 10);
-        if (value === undefined)
-            value = null;
-        if (!isNumber(value) || value < 0 || !Number.isInteger(value) || value === null)
-            throw new Error('[minLength] expects: positive integer');
-        this._minLength = value;
-        this.validation.next();
+    onClickGroup() {
+        this.closeDropdown();
+        if (this.dropGroup().nativeElement.getBoundingClientRect().bottom + this.dropHeightPx() > window.innerHeight) {
+            this.dropup().nativeElement.show();
+        }
+        else {
+            this.dropdown().nativeElement.show();
+        }
+    }
+    onClick(item) {
+        const keys = this.items().map(item => item.key);
+        const model = this.model().filter(key => keys.includes(key));
+        if (model.includes(item.key)) {
+            if (this.required() === true && model.length === 1)
+                return;
+            this.setModel(model.filter(key => key !== item.key));
+            return;
+        }
+        if (!this.isMultiple() && model.length === 1) {
+            this.setModel([item.key]);
+            return;
+        }
+        this.setModel([...model, item.key]);
+    }
+    onClickSelectAll() {
+        this.setModel(this.isSelectedAll()
+            ? []
+            : this.items().map(item => item.key));
     }
-    get maxLength() {
-        return this._maxLength;
+    closeDropdown() {
+        this.searchTerm.set('');
+        this.dropdown().nativeElement.close();
+        this.dropup().nativeElement.close();
     }
-    set maxLength(value) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SelectComponent, isStandalone: true, selector: "jo-select", inputs: { dropHeightPx: { classPropertyName: "dropHeightPx", publicName: "dropHeightPx", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousedown": "onGlobalClick($event)" }, properties: { "style.--dropHeightPx": "dropHeightPx()" } }, viewQueries: [{ propertyName: "dropGroup", first: true, predicate: ["dropGroup"], descendants: true, isSignal: true }, { propertyName: "dropup", first: true, predicate: ["dropup"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\n  <label\n    id=\"select_{{id}}\"\n    [class.required]=\"required()\"\n    >\n    <ng-content></ng-content>\n  </label>\n  <div>\n    <ng-content select=\"[rightAligned]\"></ng-content>\n  </div>\n</div>\n\n<div class=\"position-relative\">\n  <dialog #dropup>\n    <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\n  </dialog>\n</div>\n\n<div\n  #dropGroup\n  class=\"d-flex align-items-stretch\"\n  role=\"group\"\n  attr.aria-labelledby=\"select_{{id}}\"\n  >\n  <button\n    class=\"flex-1 br-start text-start\"\n    type=\"button\"\n    [class.active]=\"model().length > 0\"\n    [class.invalid]=\"!ngControl.control?.invalid\"\n    (click)=\"onClickGroup()\"\n    (blur)=\"onTouched()\"\n    >\n    {{activeItemValues()}}\n  </button>\n  <button\n    class=\"d-flex br-end d-flex align-items-center justify-content-center\"\n    [class.invalid]=\"!ngControl.control?.invalid\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"onClickGroup()\"\n    (blur)=\"onTouched()\"\n    >\n    <icon\n      size=\"1rem\"\n      type=\"chevron\"\n      [fill]=\"[null, 'current']\"\n      fillRotate=\"90\"\n      [stroke]=\"['current']\"\n      [class.up]=\"dropup.open\"\n      [class.down]=\"dropdown.open\"\n    ></icon>\n  </button>\n</div>\n\n<dialog #dropdown>\n  <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\n</dialog>\n\n<ng-template #dropContent>\n  <div class=\"card\">\n    <div class=\"card-body\">\n      <div class=\"d-flex gap-2 align-items-stretch\">\n        <input\n          [ngModel]=\"searchTerm()\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          class=\"flex-1 br-start br-end\"\n          />\n        @if (isMultiple()) {\n          <button\n            type=\"button\"\n            class=\"br-start br-end\"\n            (click)=\"onClickSelectAll()\"\n            >\n            {{isSelectedAll() ? 'Deselect' : 'Select'}} All\n          </button>\n        }\n      </div>\n    </div>\n    <div class=\"d-flex flex-column\">\n      @for (item of filteredItems(); track item) {\n        <button\n          class=\"d-flex flex-1 align-items-center text-start gap-2\"\n          [disabled]=\"isDisabled()\"\n          [class.active]=\"model().includes(item.key)\"\n          (click)=\"onClick(item)\"\n          >\n          <div\n            class=\"jo-button {{isMultiple() ? 'br-20' : 'br-50'}}\"\n            [class.active]=\"model().includes(item.key)\"\n            [class.disabled]=\"isDisabled()\"\n            [class.invalid]=\"ngControl.control?.invalid\"\n            >\n            @if (model().includes(item.key)) {\n              <icon\n                size=\"1rem\"\n                [type]=\"isMultiple() ? 'check' : 'dot'\"\n                [fill]=\"[null, 'current']\"\n                fillRotate=\"90\"\n              ></icon>\n            }\n          </div>\n          {{item.value}}\n        </button>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block}:host>.position-relative>dialog{bottom:0}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}div[role=group]>button:first-child{border-right:none;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}div[role=group]>button:last-child{border-left:none}dialog{padding:0;border:0;margin:0;background:transparent;width:100%;z-index:2;color:currentColor}dialog>.card{-webkit-backdrop-filter:blur(1.5rem);backdrop-filter:blur(1.5rem);max-height:calc(var(--dropHeightPx) * 1px);overflow-y:auto}dialog>.card>.flex-column>button{border-color:transparent;border-width:.075em}dialog>.card>.flex-column>button>.jo-button{position:relative;text-align:left}dialog>.card>.flex-column>button>.jo-button>icon{position:absolute;top:0;left:0}icon[type=chevron]{transform:rotate(90deg)}icon[type=chevron].up{transform:rotate(0)}icon[type=chevron].down{transform:rotate(180deg)}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jo-select', changeDetection: ChangeDetectionStrategy.Eager, host: {
+                        '[style.--dropHeightPx]': 'dropHeightPx()',
+                    }, imports: [FormsModule, NgTemplateOutlet, IconComponent], template: "<div class=\"d-flex justify-content-between\">\n  <label\n    id=\"select_{{id}}\"\n    [class.required]=\"required()\"\n    >\n    <ng-content></ng-content>\n  </label>\n  <div>\n    <ng-content select=\"[rightAligned]\"></ng-content>\n  </div>\n</div>\n\n<div class=\"position-relative\">\n  <dialog #dropup>\n    <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\n  </dialog>\n</div>\n\n<div\n  #dropGroup\n  class=\"d-flex align-items-stretch\"\n  role=\"group\"\n  attr.aria-labelledby=\"select_{{id}}\"\n  >\n  <button\n    class=\"flex-1 br-start text-start\"\n    type=\"button\"\n    [class.active]=\"model().length > 0\"\n    [class.invalid]=\"!ngControl.control?.invalid\"\n    (click)=\"onClickGroup()\"\n    (blur)=\"onTouched()\"\n    >\n    {{activeItemValues()}}\n  </button>\n  <button\n    class=\"d-flex br-end d-flex align-items-center justify-content-center\"\n    [class.invalid]=\"!ngControl.control?.invalid\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"onClickGroup()\"\n    (blur)=\"onTouched()\"\n    >\n    <icon\n      size=\"1rem\"\n      type=\"chevron\"\n      [fill]=\"[null, 'current']\"\n      fillRotate=\"90\"\n      [stroke]=\"['current']\"\n      [class.up]=\"dropup.open\"\n      [class.down]=\"dropdown.open\"\n    ></icon>\n  </button>\n</div>\n\n<dialog #dropdown>\n  <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\n</dialog>\n\n<ng-template #dropContent>\n  <div class=\"card\">\n    <div class=\"card-body\">\n      <div class=\"d-flex gap-2 align-items-stretch\">\n        <input\n          [ngModel]=\"searchTerm()\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          class=\"flex-1 br-start br-end\"\n          />\n        @if (isMultiple()) {\n          <button\n            type=\"button\"\n            class=\"br-start br-end\"\n            (click)=\"onClickSelectAll()\"\n            >\n            {{isSelectedAll() ? 'Deselect' : 'Select'}} All\n          </button>\n        }\n      </div>\n    </div>\n    <div class=\"d-flex flex-column\">\n      @for (item of filteredItems(); track item) {\n        <button\n          class=\"d-flex flex-1 align-items-center text-start gap-2\"\n          [disabled]=\"isDisabled()\"\n          [class.active]=\"model().includes(item.key)\"\n          (click)=\"onClick(item)\"\n          >\n          <div\n            class=\"jo-button {{isMultiple() ? 'br-20' : 'br-50'}}\"\n            [class.active]=\"model().includes(item.key)\"\n            [class.disabled]=\"isDisabled()\"\n            [class.invalid]=\"ngControl.control?.invalid\"\n            >\n            @if (model().includes(item.key)) {\n              <icon\n                size=\"1rem\"\n                [type]=\"isMultiple() ? 'check' : 'dot'\"\n                [fill]=\"[null, 'current']\"\n                fillRotate=\"90\"\n              ></icon>\n            }\n          </div>\n          {{item.value}}\n        </button>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block}:host>.position-relative>dialog{bottom:0}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}div[role=group]>button:first-child{border-right:none;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}div[role=group]>button:last-child{border-left:none}dialog{padding:0;border:0;margin:0;background:transparent;width:100%;z-index:2;color:currentColor}dialog>.card{-webkit-backdrop-filter:blur(1.5rem);backdrop-filter:blur(1.5rem);max-height:calc(var(--dropHeightPx) * 1px);overflow-y:auto}dialog>.card>.flex-column>button{border-color:transparent;border-width:.075em}dialog>.card>.flex-column>button>.jo-button{position:relative;text-align:left}dialog>.card>.flex-column>button>.jo-button>icon{position:absolute;top:0;left:0}icon[type=chevron]{transform:rotate(90deg)}icon[type=chevron].up{transform:rotate(0)}icon[type=chevron].down{transform:rotate(180deg)}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
+        }], propDecorators: { dropGroup: [{ type: i0.ViewChild, args: ['dropGroup', { isSignal: true }] }], dropup: [{ type: i0.ViewChild, args: ['dropup', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], dropHeightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropHeightPx", required: false }] }], onGlobalClick: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
+function toPlaceholder(value) {
+    if (typeof value !== 'string')
+        throw new Error('[placeholder] expects: string');
+    return value;
+}
+function toLength(label) {
+    return (value) => {
         if (typeof value === 'string')
             value = parseInt(value, 10);
         if (value === undefined)
             value = null;
         if (!isNumber(value) || value < 0 || !Number.isInteger(value) || value === null)
-            throw new Error('[maxLength] expects: positive integer');
-        this._maxLength = value;
-        this.validation.next();
-    }
-    set isGrow(value) {
-        if (value === '')
-            value = true;
-        if (value == null)
-            value = false;
-        if (typeof value !== 'boolean')
-            throw new Error('[isGrow] expects: boolean');
-        this._isGrow = value;
-    }
-    get model() {
-        return this._model;
-    }
-    set model(value) {
-        if (value === '')
-            value = null;
-        this._model = value;
-        this.onChange(this._model);
-        setTimeout(() => this.setTextareaHeight());
-    }
-    constructor(ngControl, renderer) {
+            throw new Error(`[${label}] expects: positive integer`);
+        return value;
+    };
+}
+class TextComponent extends ControlDirective {
+    constructor() {
         super();
-        this.ngControl = ngControl;
-        this.renderer = renderer;
-        this._placeholder = '';
-        this._minLength = null;
-        this._maxLength = null;
-        this.isSpellCheck = false;
-        this._isGrow = false;
-        this.rows = 3;
-        this.onBlur = new EventEmitter();
-        this.onFocus = new EventEmitter();
-        this._model = null;
+        this.ngControl = inject(NgControl, { self: true });
+        this.renderer = inject(Renderer2);
+        this.placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : /* istanbul ignore next */ {}), transform: toPlaceholder });
+        this.minLength = input(null, { ...(ngDevMode ? { debugName: "minLength" } : /* istanbul ignore next */ {}), transform: toLength('minLength') });
+        this.maxLength = input(null, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: toLength('maxLength') });
+        this.isSpellCheck = input(false, { ...(ngDevMode ? { debugName: "isSpellCheck" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isGrow = input(false, { ...(ngDevMode ? { debugName: "isGrow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.rows = input(3, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.onBlur = output();
+        this.onFocus = output();
+        this.textareaElement = viewChild('textarea', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textareaElement" }] : /* istanbul ignore next */ []));
+        this.textareaHiddenElement = viewChild('textareaHidden', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textareaHiddenElement" }] : /* istanbul ignore next */ []));
+        this.model = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
         this.id = `_${Math.random().toString(36).substring(2, 11)}`;
         this.resizeSubject = new Subject();
-        this.validation.subscribe(() => this.validate());
-        ngControl.valueAccessor = this;
+        this.ngControl.valueAccessor = this;
         this.resizeSubject
             .pipe(debounceTime(300))
-            .subscribe(() => this._isGrow && this.setTextareaHeight());
+            .subscribe(() => this.isGrow() && this.setTextareaHeight());
+        effect(() => {
+            this.minLength();
+            this.maxLength();
+            this.required();
+            this.validate();
+        });
     }
     ngOnDestroy() {
-        super.ngOnDestroy();
         this.resizeSubject.complete();
     }
     onWindowResize() {
         this.resizeSubject.next();
     }
     setTextareaHeight() {
-        if (!this.textareaElement || !this.textareaHiddenElement)
+        const textareaRef = this.textareaElement();
+        const textareaHiddenRef = this.textareaHiddenElement();
+        if (!textareaRef || !textareaHiddenRef)
             return;
-        const textarea = this.textareaElement.nativeElement;
-        const textareaHidden = this.textareaHiddenElement.nativeElement;
+        const textarea = textareaRef.nativeElement;
+        const textareaHidden = textareaHiddenRef.nativeElement;
         this.renderer.setStyle(textareaHidden, 'width', `calc(${textarea.scrollWidth}px - 1em)`);
         this.renderer.setStyle(textareaHidden, 'height', 'auto');
         this.renderer.setStyle(textarea, 'height', `${textareaHidden.scrollHeight}px`);
     }
+    onModelChange(value) {
+        this.setModel(value);
+    }
+    setModel(value) {
+        if (value === '')
+            value = null;
+        this.model.set(value);
+        this.onChange(value);
+        setTimeout(() => this.setTextareaHeight());
+    }
     onChange(_model) { }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -703,213 +755,93 @@ class TextComponent extends ControlDirective {
         if (isNumber(value))
             value = value.toString();
         if (value === null || typeof value === 'string') {
-            this._model = value;
+            this.model.set(value);
             setTimeout(() => this.setTextareaHeight());
         }
     }
     validate() {
         const validators = [];
-        if (this._minLength != null)
-            validators.push(Validators.minLength(this._minLength));
-        if (this._maxLength != null)
-            validators.push(Validators.maxLength(this._maxLength));
-        if (this.required === true)
+        const minLength = this.minLength();
+        if (minLength != null)
+            validators.push(Validators.minLength(minLength));
+        const maxLength = this.maxLength();
+        if (maxLength != null)
+            validators.push(Validators.maxLength(maxLength));
+        if (this.required() === true)
             validators.push(Validators.required);
         this.ngControl.control?.setValidators(validators);
         this.ngControl.control?.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TextComponent, deps: [{ token: i1.NgControl, self: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: TextComponent, selector: "jo-text", inputs: { placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", isSpellCheck: "isSpellCheck", isGrow: "isGrow", rows: "rows" }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true }, { propertyName: "textareaHiddenElement", first: true, predicate: ["textareaHidden"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<label\r\n  [for]=\"id\"\r\n  [class.required]=\"required\"\r\n>\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex\">\r\n  <input\r\n    *ngIf=\"!_isGrow\"\r\n    type=\"text\"\r\n    [(ngModel)]=\"model\"\r\n    [class.br-end]=\"borderRadiusRight\"\r\n    [class.br-start]=\"borderRadiusLeft\"\r\n    class=\"flex-1\"\r\n    [minlength]=\"_minLength\"\r\n    [maxlength]=\"_maxLength\"\r\n    [class.active]=\"_model !== null\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    [disabled]=\"isDisabled\"\r\n    [id]=\"id\"\r\n    [spellcheck]=\"isSpellCheck\"\r\n    [placeholder]=\"placeholder\"\r\n    (blur)=\"onTouched(); onBlur.emit($event)\"\r\n    (focus)=\"onFocus.emit($event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"_isGrow\"\r\n    #textarea\r\n    [(ngModel)]=\"model\"\r\n    [class.br-end]=\"borderRadiusRight\"\r\n    [class.br-start]=\"borderRadiusLeft\"\r\n    class=\"flex-1\"\r\n    [rows]=\"rows\"\r\n    [minlength]=\"_minLength\"\r\n    [maxlength]=\"_maxLength\"\r\n    [class.active]=\"_model !== null\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    [disabled]=\"isDisabled\"\r\n    [id]=\"id\"\r\n    [spellcheck]=\"isSpellCheck\"\r\n    [placeholder]=\"placeholder\"\r\n    (blur)=\"onTouched(); onBlur.emit($event)\"\r\n    (focus)=\"onFocus.emit($event)\"\r\n  ></textarea>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"_isGrow\"\r\n  class=\"d-flex\"\r\n>\r\n  <textarea\r\n    #textareaHidden\r\n    [ngModel]=\"model\"\r\n    class=\"hidden flex-1\"\r\n    [rows]=\"rows\"\r\n  ></textarea>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n  <li *ngIf=\"ngControl.control?.errors?.['minlength']\">\r\n    minimum length is {{minLength}}\r\n  </li>\r\n  <li *ngIf=\"ngControl.control?.errors?.['maxLength']\">\r\n    maximum length is {{maxLength}}\r\n  </li>\r\n</ul> -->", styles: [":host{display:block}textarea{font-family:inherit;cursor:text;overflow:hidden;resize:none;width:100%}textarea.hidden{padding:0;position:absolute;visibility:hidden;transition:none}input[type=text]{font-family:inherit;width:100%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: TextComponent, isStandalone: true, selector: "jo-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isSpellCheck: { classPropertyName: "isSpellCheck", publicName: "isSpellCheck", isSignal: true, isRequired: false, transformFunction: null }, isGrow: { classPropertyName: "isGrow", publicName: "isGrow", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textarea"], descendants: true, isSignal: true }, { propertyName: "textareaHiddenElement", first: true, predicate: ["textareaHidden"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label\n  [for]=\"id\"\n  [class.required]=\"required()\"\n  >\n  <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex\">\n  @if (!isGrow()) {\n    <input\n      type=\"text\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.br-end]=\"borderRadiusRight()\"\n      [class.br-start]=\"borderRadiusLeft()\"\n      class=\"flex-1\"\n      [minlength]=\"minLength()\"\n      [maxlength]=\"maxLength()\"\n      [class.active]=\"model() !== null\"\n      [class.invalid]=\"ngControl.control?.invalid\"\n      [disabled]=\"isDisabled()\"\n      [id]=\"id\"\n      [spellcheck]=\"isSpellCheck()\"\n      [placeholder]=\"placeholder()\"\n      (blur)=\"onTouched(); onBlur.emit($event)\"\n      (focus)=\"onFocus.emit($event)\"\n      />\n  }\n  @if (isGrow()) {\n    <textarea\n      #textarea\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.br-end]=\"borderRadiusRight()\"\n      [class.br-start]=\"borderRadiusLeft()\"\n      class=\"flex-1\"\n      [rows]=\"rows()\"\n      [minlength]=\"minLength()\"\n      [maxlength]=\"maxLength()\"\n      [class.active]=\"model() !== null\"\n      [class.invalid]=\"ngControl.control?.invalid\"\n      [disabled]=\"isDisabled()\"\n      [id]=\"id\"\n      [spellcheck]=\"isSpellCheck()\"\n      [placeholder]=\"placeholder()\"\n      (blur)=\"onTouched(); onBlur.emit($event)\"\n      (focus)=\"onFocus.emit($event)\"\n    ></textarea>\n  }\n</div>\n\n@if (isGrow()) {\n  <div\n    class=\"d-flex\"\n    >\n    <textarea\n      #textareaHidden\n      [ngModel]=\"model()\"\n      class=\"hidden flex-1\"\n      [rows]=\"rows()\"\n    ></textarea>\n  </div>\n}\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['minlength']\">\n  minimum length is {{minLength()}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['maxLength']\">\n  maximum length is {{maxLength()}}\n</li>\n</ul> -->\n", styles: [":host{display:block}textarea{font-family:inherit;cursor:text;overflow:hidden;resize:none;width:100%}textarea.hidden{padding:0;position:absolute;visibility:hidden;transition:none}input[type=text]{font-family:inherit;width:100%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jo-text', template: "<label\r\n  [for]=\"id\"\r\n  [class.required]=\"required\"\r\n>\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex\">\r\n  <input\r\n    *ngIf=\"!_isGrow\"\r\n    type=\"text\"\r\n    [(ngModel)]=\"model\"\r\n    [class.br-end]=\"borderRadiusRight\"\r\n    [class.br-start]=\"borderRadiusLeft\"\r\n    class=\"flex-1\"\r\n    [minlength]=\"_minLength\"\r\n    [maxlength]=\"_maxLength\"\r\n    [class.active]=\"_model !== null\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    [disabled]=\"isDisabled\"\r\n    [id]=\"id\"\r\n    [spellcheck]=\"isSpellCheck\"\r\n    [placeholder]=\"placeholder\"\r\n    (blur)=\"onTouched(); onBlur.emit($event)\"\r\n    (focus)=\"onFocus.emit($event)\"\r\n  />\r\n  <textarea\r\n    *ngIf=\"_isGrow\"\r\n    #textarea\r\n    [(ngModel)]=\"model\"\r\n    [class.br-end]=\"borderRadiusRight\"\r\n    [class.br-start]=\"borderRadiusLeft\"\r\n    class=\"flex-1\"\r\n    [rows]=\"rows\"\r\n    [minlength]=\"_minLength\"\r\n    [maxlength]=\"_maxLength\"\r\n    [class.active]=\"_model !== null\"\r\n    [class.invalid]=\"ngControl.control?.invalid\"\r\n    [disabled]=\"isDisabled\"\r\n    [id]=\"id\"\r\n    [spellcheck]=\"isSpellCheck\"\r\n    [placeholder]=\"placeholder\"\r\n    (blur)=\"onTouched(); onBlur.emit($event)\"\r\n    (focus)=\"onFocus.emit($event)\"\r\n  ></textarea>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"_isGrow\"\r\n  class=\"d-flex\"\r\n>\r\n  <textarea\r\n    #textareaHidden\r\n    [ngModel]=\"model\"\r\n    class=\"hidden flex-1\"\r\n    [rows]=\"rows\"\r\n  ></textarea>\r\n</div>\r\n\r\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\r\n  <li *ngIf=\"ngControl.control?.errors?.['minlength']\">\r\n    minimum length is {{minLength}}\r\n  </li>\r\n  <li *ngIf=\"ngControl.control?.errors?.['maxLength']\">\r\n    maximum length is {{maxLength}}\r\n  </li>\r\n</ul> -->", styles: [":host{display:block}textarea{font-family:inherit;cursor:text;overflow:hidden;resize:none;width:100%}textarea.hidden{padding:0;position:absolute;visibility:hidden;transition:none}input[type=text]{font-family:inherit;width:100%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }] }, { type: i0.Renderer2 }], propDecorators: { placeholder: [{
-                type: Input
-            }], minLength: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }], isSpellCheck: [{
-                type: Input
-            }], isGrow: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], onBlur: [{
-                type: Output
-            }], onFocus: [{
-                type: Output
-            }], textareaElement: [{
-                type: ViewChild,
-                args: ['textarea']
-            }], textareaHiddenElement: [{
-                type: ViewChild,
-                args: ['textareaHidden']
-            }], onWindowResize: [{
+            args: [{ selector: 'jo-text', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule], template: "<label\n  [for]=\"id\"\n  [class.required]=\"required()\"\n  >\n  <ng-content></ng-content>\n</label>\n\n<div class=\"d-flex\">\n  @if (!isGrow()) {\n    <input\n      type=\"text\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.br-end]=\"borderRadiusRight()\"\n      [class.br-start]=\"borderRadiusLeft()\"\n      class=\"flex-1\"\n      [minlength]=\"minLength()\"\n      [maxlength]=\"maxLength()\"\n      [class.active]=\"model() !== null\"\n      [class.invalid]=\"ngControl.control?.invalid\"\n      [disabled]=\"isDisabled()\"\n      [id]=\"id\"\n      [spellcheck]=\"isSpellCheck()\"\n      [placeholder]=\"placeholder()\"\n      (blur)=\"onTouched(); onBlur.emit($event)\"\n      (focus)=\"onFocus.emit($event)\"\n      />\n  }\n  @if (isGrow()) {\n    <textarea\n      #textarea\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.br-end]=\"borderRadiusRight()\"\n      [class.br-start]=\"borderRadiusLeft()\"\n      class=\"flex-1\"\n      [rows]=\"rows()\"\n      [minlength]=\"minLength()\"\n      [maxlength]=\"maxLength()\"\n      [class.active]=\"model() !== null\"\n      [class.invalid]=\"ngControl.control?.invalid\"\n      [disabled]=\"isDisabled()\"\n      [id]=\"id\"\n      [spellcheck]=\"isSpellCheck()\"\n      [placeholder]=\"placeholder()\"\n      (blur)=\"onTouched(); onBlur.emit($event)\"\n      (focus)=\"onFocus.emit($event)\"\n    ></textarea>\n  }\n</div>\n\n@if (isGrow()) {\n  <div\n    class=\"d-flex\"\n    >\n    <textarea\n      #textareaHidden\n      [ngModel]=\"model()\"\n      class=\"hidden flex-1\"\n      [rows]=\"rows()\"\n    ></textarea>\n  </div>\n}\n\n<!-- <ul *ngIf=\"ngControl.control?.errors\">\n<li *ngIf=\"ngControl.control?.errors?.['minlength']\">\n  minimum length is {{minLength()}}\n</li>\n<li *ngIf=\"ngControl.control?.errors?.['maxLength']\">\n  maximum length is {{maxLength()}}\n</li>\n</ul> -->\n", styles: [":host{display:block}textarea{font-family:inherit;cursor:text;overflow:hidden;resize:none;width:100%}textarea.hidden{padding:0;position:absolute;visibility:hidden;transition:none}input[type=text]{font-family:inherit;width:100%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit;min-width:0}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], isSpellCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSpellCheck", required: false }] }], isGrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGrow", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], textareaElement: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }], textareaHiddenElement: [{ type: i0.ViewChild, args: ['textareaHidden', { isSignal: true }] }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
 
-class SelectComponent extends ItemDirective {
-    get searchTerm() {
-        return this._searchTerm;
-    }
-    set searchTerm(value) {
-        this._searchTerm = value;
-        this.filteredItems = value
-            ? this._items.filter(item => item.value.toLowerCase().includes(value.toLowerCase()))
-            : this._items;
-    }
-    constructor(ngControl, hostElement) {
-        super(ngControl);
-        this.ngControl = ngControl;
-        this.hostElement = hostElement;
-        this.dropHeightPx = 200;
-        this._searchTerm = '';
-        this.isDropdownCloseToBottom = false;
-        this.id = `${Math.random().toString(36).substr(2, 9)}`;
-    }
-    get activeItemValues() {
-        return this._items
-            .filter(item => this._model.includes(item.key))
-            .map(item => item.value)
-            .join(', ');
-    }
-    get isSelectedAll() {
-        return this._items.every(item => this._model.includes(item.key));
-    }
-    onGlobalClick(event) {
-        if (!this.hostElement.nativeElement.contains(event.target))
-            this.closeDropdown();
-    }
-    onClickGroup() {
-        this.closeDropdown();
-        if (this.dropGroup.nativeElement.getBoundingClientRect().bottom + this.dropHeightPx > window.innerHeight) {
-            this.dropup.nativeElement.show();
-        }
-        else {
-            this.dropdown.nativeElement.show();
-        }
-    }
-    onClick(item) {
-        this._model = this._model.filter(key => this._items.map(item => item.key).includes(key));
-        if (this._model.includes(item.key)) {
-            if (this.required === true && this._model.length === 1)
-                return;
-            this.model = this._model.filter(key => key !== item.key);
-            return;
-        }
-        if (!this.isMultiple && this._model.length === 1) {
-            this.model = [item.key];
-            return;
-        }
-        this.model = [...this._model, item.key];
-    }
-    onClickSelectAll() {
-        this.model = this.isSelectedAll
-            ? []
-            : this._items.map(item => item.key);
-    }
-    closeDropdown() {
-        this.searchTerm = '';
-        this.dropdown.nativeElement.close();
-        this.dropup.nativeElement.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SelectComponent, deps: [{ token: i1.NgControl, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: SelectComponent, selector: "jo-select", inputs: { dropHeightPx: "dropHeightPx" }, host: { listeners: { "document:mousedown": "onGlobalClick($event)" }, properties: { "style.--dropHeightPx": "this.dropHeightPx" } }, viewQueries: [{ propertyName: "dropGroup", first: true, predicate: ["dropGroup"], descendants: true }, { propertyName: "dropup", first: true, predicate: ["dropup"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n  <label\r\n    id=\"select_{{id}}\"\r\n    [class.required]=\"required\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </label>\r\n  <div>\r\n    <ng-content select=\"[rightAligned]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n  <dialog #dropup>\r\n    <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\r\n  </dialog>\r\n</div>\r\n\r\n<div\r\n  #dropGroup\r\n  class=\"d-flex align-items-stretch\"\r\n  role=\"group\"\r\n  attr.aria-labelledby=\"select_{{id}}\"\r\n>\r\n  <button\r\n    class=\"flex-1 br-start text-start\"\r\n    type=\"button\"\r\n    [class.active]=\"_model.length > 0\"\r\n    [class.invalid]=\"!ngControl.control?.invalid\"\r\n    (click)=\"onClickGroup()\"\r\n    (blur)=\"onTouched()\"\r\n  >\r\n    {{activeItemValues}}\r\n  </button>\r\n  <button\r\n    class=\"d-flex br-end d-flex align-items-center justify-content-center\"\r\n    [class.invalid]=\"!ngControl.control?.invalid\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"onClickGroup()\"\r\n    (blur)=\"onTouched()\"\r\n  >\r\n    <icon\r\n      size=\"1rem\"\r\n      type=\"chevron\"\r\n      [fill]=\"[null, 'current']\"\r\n      fillRotate=\"90\"\r\n      [stroke]=\"['current']\"\r\n      [class.up]=\"dropup.open\"\r\n      [class.down]=\"dropdown.open\"\r\n    ></icon>\r\n  </button>\r\n</div>\r\n\r\n<dialog #dropdown>\r\n  <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\r\n</dialog>\r\n\r\n<ng-template #dropContent>\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      <div class=\"d-flex gap-2 align-items-stretch\">\r\n        <input\r\n          [(ngModel)]=\"searchTerm\"\r\n          class=\"flex-1 br-start br-end\"\r\n        />\r\n        <button\r\n          *ngIf=\"_isMultiple\"\r\n          type=\"button\"\r\n          class=\"br-start br-end\"\r\n          (click)=\"onClickSelectAll()\"\r\n        >\r\n          {{isSelectedAll ? 'Deselect' : 'Select'}} All\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column\">\r\n      <button\r\n        *ngFor=\"let item of filteredItems\"\r\n        class=\"d-flex flex-1 align-items-center text-start gap-2\"\r\n        [disabled]=\"isDisabled\"\r\n        [class.active]=\"_model.includes(item.key)\"\r\n        (click)=\"onClick(item)\"\r\n      >\r\n        <div\r\n          class=\"jo-button {{isMultiple ? 'br-20' : 'br-50'}}\"\r\n          [class.active]=\"_model.includes(item.key)\"\r\n          [class.disabled]=\"isDisabled\"\r\n          [class.invalid]=\"ngControl.control?.invalid\"\r\n        >\r\n          <icon\r\n            *ngIf=\"_model.includes(item.key)\"\r\n            size=\"1rem\"\r\n            [type]=\"isMultiple ? 'check' : 'dot'\"\r\n            [fill]=\"[null, 'current']\"\r\n            fillRotate=\"90\"\r\n          ></icon>\r\n        </div>\r\n        {{item.value}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [":host{position:relative;display:block}:host>.position-relative>dialog{bottom:0}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}div[role=group]>button:first-child{border-right:none;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}div[role=group]>button:last-child{border-left:none}dialog{padding:0;border:0;margin:0;background:transparent;width:100%;z-index:2;color:currentColor}dialog>.card{-webkit-backdrop-filter:blur(1.5rem);backdrop-filter:blur(1.5rem);max-height:calc(var(--dropHeightPx) * 1px);overflow-y:auto}dialog>.card>.flex-column>button{border-color:transparent;border-width:.075em}dialog>.card>.flex-column>button>.jo-button{position:relative;text-align:left}dialog>.card>.flex-column>button>.jo-button>icon{position:absolute;top:0;left:0}icon[type=chevron]{transform:rotate(90deg)}icon[type=chevron].up{transform:rotate(0)}icon[type=chevron].down{transform:rotate(180deg)}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.IconComponent, selector: "icon[type]", inputs: ["type", "fill", "fillRotate", "fillOpacity", "stroke", "strokeRotate", "spin"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'jo-select', template: "<div class=\"d-flex justify-content-between\">\r\n  <label\r\n    id=\"select_{{id}}\"\r\n    [class.required]=\"required\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </label>\r\n  <div>\r\n    <ng-content select=\"[rightAligned]\"></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n  <dialog #dropup>\r\n    <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\r\n  </dialog>\r\n</div>\r\n\r\n<div\r\n  #dropGroup\r\n  class=\"d-flex align-items-stretch\"\r\n  role=\"group\"\r\n  attr.aria-labelledby=\"select_{{id}}\"\r\n>\r\n  <button\r\n    class=\"flex-1 br-start text-start\"\r\n    type=\"button\"\r\n    [class.active]=\"_model.length > 0\"\r\n    [class.invalid]=\"!ngControl.control?.invalid\"\r\n    (click)=\"onClickGroup()\"\r\n    (blur)=\"onTouched()\"\r\n  >\r\n    {{activeItemValues}}\r\n  </button>\r\n  <button\r\n    class=\"d-flex br-end d-flex align-items-center justify-content-center\"\r\n    [class.invalid]=\"!ngControl.control?.invalid\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"onClickGroup()\"\r\n    (blur)=\"onTouched()\"\r\n  >\r\n    <icon\r\n      size=\"1rem\"\r\n      type=\"chevron\"\r\n      [fill]=\"[null, 'current']\"\r\n      fillRotate=\"90\"\r\n      [stroke]=\"['current']\"\r\n      [class.up]=\"dropup.open\"\r\n      [class.down]=\"dropdown.open\"\r\n    ></icon>\r\n  </button>\r\n</div>\r\n\r\n<dialog #dropdown>\r\n  <ng-template [ngTemplateOutlet]=\"dropContent\"></ng-template>\r\n</dialog>\r\n\r\n<ng-template #dropContent>\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      <div class=\"d-flex gap-2 align-items-stretch\">\r\n        <input\r\n          [(ngModel)]=\"searchTerm\"\r\n          class=\"flex-1 br-start br-end\"\r\n        />\r\n        <button\r\n          *ngIf=\"_isMultiple\"\r\n          type=\"button\"\r\n          class=\"br-start br-end\"\r\n          (click)=\"onClickSelectAll()\"\r\n        >\r\n          {{isSelectedAll ? 'Deselect' : 'Select'}} All\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column\">\r\n      <button\r\n        *ngFor=\"let item of filteredItems\"\r\n        class=\"d-flex flex-1 align-items-center text-start gap-2\"\r\n        [disabled]=\"isDisabled\"\r\n        [class.active]=\"_model.includes(item.key)\"\r\n        (click)=\"onClick(item)\"\r\n      >\r\n        <div\r\n          class=\"jo-button {{isMultiple ? 'br-20' : 'br-50'}}\"\r\n          [class.active]=\"_model.includes(item.key)\"\r\n          [class.disabled]=\"isDisabled\"\r\n          [class.invalid]=\"ngControl.control?.invalid\"\r\n        >\r\n          <icon\r\n            *ngIf=\"_model.includes(item.key)\"\r\n            size=\"1rem\"\r\n            [type]=\"isMultiple ? 'check' : 'dot'\"\r\n            [fill]=\"[null, 'current']\"\r\n            fillRotate=\"90\"\r\n          ></icon>\r\n        </div>\r\n        {{item.value}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [":host{position:relative;display:block}:host>.position-relative>dialog{bottom:0}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}div[role=group]>button:first-child{border-right:none;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}div[role=group]>button:last-child{border-left:none}dialog{padding:0;border:0;margin:0;background:transparent;width:100%;z-index:2;color:currentColor}dialog>.card{-webkit-backdrop-filter:blur(1.5rem);backdrop-filter:blur(1.5rem);max-height:calc(var(--dropHeightPx) * 1px);overflow-y:auto}dialog>.card>.flex-column>button{border-color:transparent;border-width:.075em}dialog>.card>.flex-column>button>.jo-button{position:relative;text-align:left}dialog>.card>.flex-column>button>.jo-button>icon{position:absolute;top:0;left:0}icon[type=chevron]{transform:rotate(90deg)}icon[type=chevron].up{transform:rotate(0)}icon[type=chevron].down{transform:rotate(180deg)}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "body{font-family:Arial;margin:0}h1,h2,h3,h4,h5,h6{margin:0}a:not(.jo-ignore),button:not(.jo-ignore),.jo-button,input,textarea{color:inherit;background:transparent;border-width:.15rem;border-style:outset;border-color:currentColor;padding:.5rem;margin:0;font-size:1rem;line-height:1rem;font-family:inherit}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.jo-button:active,.jo-button.active,input:active,input.active,textarea:active,textarea.active{border-style:inset}a:not(.jo-ignore):disabled,a:not(.jo-ignore).disabled,button:not(.jo-ignore):disabled,button:not(.jo-ignore).disabled,.jo-button:disabled,.jo-button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.jo-button{cursor:pointer}.card{border:1px solid currentColor;border-radius:.5rem}.card .card-header{padding:1rem;border-bottom:1px solid currentColor}.card .card-body,.card .card-footer{padding:1rem}.card .card-table{overflow-x:auto}.card .card-body+.card-table,.card .card-table+.card-body,.card .card-body+.card-body,.card .card-table+.card-table,.card .card-table+.card-footer,.card .card-body+.card-footer{border-top:1px solid currentColor}.card table{width:100%;border-collapse:collapse}.card table>thead{text-align:left}.card table>thead th{border-bottom:1px solid currentColor}.card table>tfoot td{margin-top:1px;border-top:1px solid currentColor}.card table th,.card table td{padding:1rem}.card table tbody tr>td:last-child{text-align:right}.card table tbody tr:nth-child(odd) td{-webkit-backdrop-filter:brightness(85%);backdrop-filter:brightness(85%)}.card table tbody tr:last-child>td:first-child{border-bottom-left-radius:.5rem}.card table tbody tr:last-child>td:last-child{border-bottom-right-radius:.5rem}.card table tbody tr.active td{font-weight:700}.position-relative{position:relative}.d-flex{display:flex}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.align-items-stretch{align-items:stretch}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-around{justify-content:space-around}.justify-content-evenly{justify-content:space-evenly}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.gap-1{gap:.25rem}.m-1{margin:.25rem}.p-1{padding:.25rem}.mx-1{margin-right:.25rem;margin-left:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.px-1{padding-right:.25rem;padding-left:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.ms-1{margin-right:.25rem}.me-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.mb-1{margin-bottom:.25rem}.ps-1{padding-right:.25rem}.pe-1{padding-left:.25rem}.pt-1{padding-top:.25rem}.pb-1{padding-bottom:.25rem}.gap-2{gap:.5rem}.m-2{margin:.5rem}.p-2{padding:.5rem}.mx-2{margin-right:.5rem;margin-left:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.px-2{padding-right:.5rem;padding-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.ms-2{margin-right:.5rem}.me-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem}.ps-2{padding-right:.5rem}.pe-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.gap-3{gap:1rem}.m-3{margin:1rem}.p-3{padding:1rem}.mx-3{margin-right:1rem;margin-left:1rem}.my-3{margin-top:1rem;margin-bottom:1rem}.px-3{padding-right:1rem;padding-left:1rem}.py-3{padding-top:1rem;padding-bottom:1rem}.ms-3{margin-right:1rem}.me-3{margin-left:1rem}.mt-3{margin-top:1rem}.mb-3{margin-bottom:1rem}.ps-3{padding-right:1rem}.pe-3{padding-left:1rem}.pt-3{padding-top:1rem}.pb-3{padding-bottom:1rem}.gap-4{gap:1.5rem}.m-4{margin:1.5rem}.p-4{padding:1.5rem}.mx-4{margin-right:1.5rem;margin-left:1.5rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}.px-4{padding-right:1.5rem;padding-left:1.5rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.ms-4{margin-right:1.5rem}.me-4{margin-left:1.5rem}.mt-4{margin-top:1.5rem}.mb-4{margin-bottom:1.5rem}.ps-4{padding-right:1.5rem}.pe-4{padding-left:1.5rem}.pt-4{padding-top:1.5rem}.pb-4{padding-bottom:1.5rem}.gap-5{gap:2rem}.m-5{margin:2rem}.p-5{padding:2rem}.mx-5{margin-right:2rem;margin-left:2rem}.my-5{margin-top:2rem;margin-bottom:2rem}.px-5{padding-right:2rem;padding-left:2rem}.py-5{padding-top:2rem;padding-bottom:2rem}.ms-5{margin-right:2rem}.me-5{margin-left:2rem}.mt-5{margin-top:2rem}.mb-5{margin-bottom:2rem}.ps-5{padding-right:2rem}.pe-5{padding-left:2rem}.pt-5{padding-top:2rem}.pb-5{padding-bottom:2rem}.border{border:1px solid currentColor}.br-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.br-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.white-space-nowrap{white-space:nowrap}.text-end{text-align:right}.text-start{text-align:left}.text-center{text-align:center}label{display:block;padding-bottom:.5rem;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }] }, { type: i0.ElementRef }], propDecorators: { dropGroup: [{
-                type: ViewChild,
-                args: ['dropGroup']
-            }], dropup: [{
-                type: ViewChild,
-                args: ['dropup']
-            }], dropdown: [{
-                type: ViewChild,
-                args: ['dropdown']
-            }], dropHeightPx: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.--dropHeightPx']
-            }], onGlobalClick: [{
-                type: HostListener,
-                args: ['document:mousedown', ['$event']]
-            }] } });
-
+// The components and directives are standalone; this module is kept purely as a
+// convenience aggregator so existing consumers can keep importing
+// `ChaosControlModule`. New consumers can import the standalone pieces directly.
+const PUBLIC_DECLARABLES = [
+    ReadonlyComponent,
+    ChoiceComponent,
+    ColorComponent,
+    FileComponent,
+    NumberComponent,
+    TextComponent,
+    SelectComponent,
+    BusyDirective,
+    IconComponent,
+    IconStackComponent,
+];
 class ChaosControlModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlModule, declarations: [ReadonlyComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlModule, imports: [ReadonlyComponent,
             ChoiceComponent,
             ColorComponent,
             FileComponent,
             NumberComponent,
             TextComponent,
-            ControlDirective,
-            ItemDirective,
             SelectComponent,
-            BorderRadiusDirective], imports: [CommonModule,
-            FormsModule,
-            IconModule,
-            RouterModule], exports: [ReadonlyComponent,
+            BusyDirective,
+            IconComponent,
+            IconStackComponent], exports: [ReadonlyComponent,
             ChoiceComponent,
             ColorComponent,
             FileComponent,
             NumberComponent,
             TextComponent,
-            SelectComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlModule, imports: [CommonModule,
-            FormsModule,
-            IconModule,
-            RouterModule] }); }
+            SelectComponent,
+            BusyDirective,
+            IconComponent,
+            IconStackComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlModule, imports: [ChoiceComponent,
+            ColorComponent,
+            FileComponent,
+            NumberComponent,
+            TextComponent,
+            SelectComponent,
+            IconComponent,
+            IconStackComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        ReadonlyComponent,
-                        ChoiceComponent,
-                        ColorComponent,
-                        FileComponent,
-                        NumberComponent,
-                        TextComponent,
-                        ControlDirective,
-                        ItemDirective,
-                        SelectComponent,
-                        BorderRadiusDirective,
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        IconModule,
-                        RouterModule,
-                    ],
-                    exports: [
-                        ReadonlyComponent,
-                        ChoiceComponent,
-                        ColorComponent,
-                        FileComponent,
-                        NumberComponent,
-                        TextComponent,
-                        SelectComponent,
-                    ]
+                    imports: PUBLIC_DECLARABLES,
+                    exports: PUBLIC_DECLARABLES,
                 }]
         }] });
 
 class ChaosControlService {
     constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChaosControlService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -922,5 +854,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ChaosControlModule, ChaosControlService, ChoiceComponent, ColorComponent, FileComponent, NumberComponent, ReadonlyComponent, SelectComponent, TextComponent, isItem, isItems, isNumber, isPrimitive };
+export { BorderRadiusDirective, BusyComponent, BusyDirective, ChaosControlModule, ChaosControlService, ChoiceComponent, ColorComponent, ControlDirective, FileComponent, ItemDirective, NumberComponent, ReadonlyComponent, SelectComponent, SizeDirective, TextComponent, isItem, isItems, isNumber, isPrimitive };
 //# sourceMappingURL=joster-dev-chaos-control.mjs.map