@joster-dev/chaos-control 0.1.0

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

@@ -0,0 +1,894 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, Input, Self, Component, EventEmitter, Output, ViewChild, HostListener, NgModule, Injectable } from '@angular/core';
+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 { debounceTime } from 'rxjs/operators';
+
+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;
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BorderRadiusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[joBorderRadius]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { borderRadiusRight: [{
+                type: Input
+            }], borderRadiusLeft: [{
+                type: Input
+            }] } });
+
+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();
+    }
+    constructor() {
+        super();
+        this._required = false;
+        this.isDisabled = false;
+        this.validation = new Subject();
+    }
+    ngOnDestroy() {
+        this.validation.complete();
+    }
+    onTouched() { }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[joControl]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { required: [{
+                type: Input
+            }] } });
+
+function isNumber(value) {
+    return typeof value === 'number'
+        && !isNaN(value);
+}
+
+function isPrimitive(value) {
+    return typeof value === 'boolean'
+        || isNumber(value)
+        || typeof value === 'string';
+}
+
+function isItem(item) {
+    return typeof (item) === 'object'
+        && item !== null
+        && isPrimitive(item.key)
+        && typeof item.value === 'string';
+}
+
+function isItems(value) {
+    return Array.isArray(value) && value.every(item => isItem(item));
+}
+
+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.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;
+        this.onChange(value.length === 0
+            ? null
+            : this.isMultiple
+                ? this._model
+                : this._model[0]);
+    }
+    constructor(ngControl) {
+        super();
+        this.ngControl = ngControl;
+        this._items = [];
+        this._limit = 0;
+        this._isMultiple = false;
+        this._model = [];
+        this.validation
+            .pipe(debounceTime(100))
+            .subscribe(() => this.validate());
+        ngControl.valueAccessor = this;
+    }
+    onChange(_value) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    writeValue(value) {
+        if (value == null)
+            value = [];
+        if (!Array.isArray(value))
+            value = [value];
+        if (value.every(item => isPrimitive(item)))
+            this._model = value;
+    }
+    invalidValidator(items, isMultiple) {
+        return (control) => (isMultiple
+            ? Array.isArray(control.value) && control.value.every((key) => !items.map(item => item.key).includes(key))
+            : ![undefined, null].includes(control.value) && !items.map(item => item.key).includes(control.value))
+            ? { invalid: control.value }
+            : null;
+    }
+    limitValidator(limit) {
+        return (control) => control.value !== null && limit !== 0 && control.value.length > limit
+            ? { limit: { value: control.value } }
+            : null;
+    }
+    validate() {
+        const validators = [
+            this.invalidValidator(this._items, this._isMultiple),
+        ];
+        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();
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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: [{
+                type: Input
+            }] } });
+
+class ChoiceComponent extends ItemDirective {
+    constructor(ngControl) {
+        super(ngControl);
+        this.ngControl = ngControl;
+        this._isColumn = false;
+        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)
+                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];
+    }
+    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 text-left\"\r\n    role=\"menuitemcheckbox\"\r\n    [class.border-radius-right]=\"borderRadiusRight\"\r\n    [class.border-radius-left]=\"borderRadiusLeft\"\r\n    (click)=\"onClick(item)\"\r\n    (blur)=\"onTouched()\"\r\n  >\r\n    <div\r\n      class=\"button margin-right-1 {{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=\"1em\"\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\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>.button{position:relative;text-align:left}:host>.d-flex>button>.button>icon{position:absolute;top:0;left:0}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\n", ".d-flex{display:flex}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}.justify-content-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.align-self-center{align-self:center}.margin-right-1{margin-right:.5em}.margin-right-2{margin-right:1em}.margin-left-1{margin-left:.5em}.margin-left-2{margin-left:1em}.border-radius-right{border-top-right-radius:.5em;border-bottom-right-radius:.5em}.border-radius-left{border-top-left-radius:.5em;border-bottom-left-radius:.5em}.white-space-nowrap{white-space:nowrap}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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 text-left\"\r\n    role=\"menuitemcheckbox\"\r\n    [class.border-radius-right]=\"borderRadiusRight\"\r\n    [class.border-radius-left]=\"borderRadiusLeft\"\r\n    (click)=\"onClick(item)\"\r\n    (blur)=\"onTouched()\"\r\n  >\r\n    <div\r\n      class=\"button margin-right-1 {{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=\"1em\"\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\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>.button{position:relative;text-align:left}:host>.d-flex>button>.button>icon{position:absolute;top:0;left:0}.br-20{border-radius:20%}.br-50{border-radius:50%}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\n", ".d-flex{display:flex}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}.justify-content-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.align-self-center{align-self:center}.margin-right-1{margin-right:.5em}.margin-right-2{margin-right:1em}.margin-left-1{margin-left:.5em}.margin-left-2{margin-left:1em}.border-radius-right{border-top-right-radius:.5em;border-bottom-right-radius:.5em}.border-radius-left{border-top-left-radius:.5em;border-bottom-left-radius:.5em}.white-space-nowrap{white-space:nowrap}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }] }], propDecorators: { isColumn: [{
+                type: Input
+            }] } });
+
+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) {
+        super();
+        this.ngControl = ngControl;
+        this.partialHex = /^[0-9A-Fa-f]{1,6}$/;
+        this.fullHex = /^[0-9A-Fa-f]{6}$/;
+        this._model = null;
+        this.id = `_${Math.random().toString(36).substring(2, 11)}`;
+        this.validation
+            .pipe(debounceTime(100))
+            .subscribe(() => this.validate());
+        ngControl.valueAccessor = this;
+    }
+    onChangeColor(event) {
+        const ele = event.target;
+        this.model = ele.value.substring(1).toUpperCase();
+    }
+    onChange(_model) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    onBeforeinput(e) {
+        const event = e;
+        if (event.data === null)
+            return;
+        const ele = event.target;
+        const tooLong = event.data.length + (ele.selectionStart || 0) > 6;
+        const valid = this.partialHex.test(event.data);
+        if (tooLong || !valid)
+            event.preventDefault();
+    }
+    writeValue(value) {
+        if (value === undefined || typeof value !== 'string' || !this.partialHex.test(value))
+            value = null;
+        if (value === null || this.partialHex.test(value))
+            this._model = value;
+    }
+    invalidValidator() {
+        return (control) => control.value !== null && (typeof control.value !== 'string' || !this.fullHex.test(control.value))
+            ? { invalid: control.value }
+            : null;
+    }
+    validate() {
+        const validators = [
+            this.invalidValidator()
+        ];
+        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.border-radius-left]=\"borderRadiusLeft\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"colorInput.click()\"\r\n  >\r\n    <icon\r\n      size=\"1em\"\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.border-radius-right]=\"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", ".d-flex{display:flex}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}.justify-content-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.align-self-center{align-self:center}.margin-right-1{margin-right:.5em}.margin-right-2{margin-right:1em}.margin-left-1{margin-left:.5em}.margin-left-2{margin-left:1em}.border-radius-right{border-top-right-radius:.5em;border-bottom-right-radius:.5em}.border-radius-left{border-top-left-radius:.5em;border-bottom-left-radius:.5em}.white-space-nowrap{white-space:nowrap}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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.border-radius-left]=\"borderRadiusLeft\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"colorInput.click()\"\r\n  >\r\n    <icon\r\n      size=\"1em\"\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.border-radius-right]=\"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", ".d-flex{display:flex}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}.justify-content-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.align-self-center{align-self:center}.margin-right-1{margin-right:.5em}.margin-right-2{margin-right:1em}.margin-left-1{margin-left:.5em}.margin-left-2{margin-left:1em}.border-radius-right{border-top-right-radius:.5em;border-bottom-right-radius:.5em}.border-radius-left{border-top-left-radius:.5em;border-bottom-left-radius:.5em}.white-space-nowrap{white-space:nowrap}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }] }] });
+
+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) {
+        super();
+        this.ngControl = ngControl;
+        this._acceptedTypes = [];
+        this._sizeLimitMb = 0;
+        this._multiple = false;
+        this.showSize = false;
+        this.model = null;
+        this.id = `${Math.random().toString(36).substr(2, 9)}`;
+        this.validation
+            .pipe(debounceTime(100))
+            .subscribe(() => this.validate());
+        ngControl.valueAccessor = this;
+    }
+    get fileNames() {
+        if (this.ngControl.value instanceof FileList)
+            return Object.values(this.ngControl.value).map(file => file.name).join(', ');
+        if (this.ngControl.value instanceof File)
+            return this.ngControl.value.name;
+        return '';
+    }
+    get sizeLimit() {
+        return this.sizeLimitMb < 1
+            ? `${this.sizeLimitMb * 1000} KB`
+            : `${this.sizeLimitMb} MB`;
+    }
+    onFileChange(event) {
+        const target = event.target;
+        this.onChange(target.files?.length
+            ? target.files
+            : null);
+    }
+    onChange(_model) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    writeValue(value) {
+        if (value === undefined)
+            value = null;
+        if (value !== null && !(value instanceof FileList))
+            throw new Error('control value must be: File or null');
+        // todo
+        // this.model = value;
+    }
+    acceptedTypesValidator(acceptedTypes) {
+        return (control) => control.value !== null
+            && control.value instanceof FileList
+            && !Object.values(control.value).map(item => item.type.toLowerCase())
+                .every(type => acceptedTypes.includes(type.toLowerCase()))
+            ? { acceptedTypes: { value: control.value } }
+            : null;
+    }
+    invalidValidator(multiple) {
+        return (control) => control.value !== null
+            && (!(control.value instanceof FileList) || (control.value.length > 1 && !multiple))
+            ? { invalid: { value: control.value } }
+            : null;
+    }
+    sizeLimitMbValidator(sizeLimitMb) {
+        return (control) => control.value instanceof FileList
+            && Object.values(control.value).map(item => item.size / 1024 / 1024)
+                .reduce((acc, cur) => acc + cur, 0) > sizeLimitMb
+            ? { sizeLimitMb: { value: control.value } }
+            : null;
+    }
+    validate() {
+        const validators = [
+            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)
+            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.border-radius-right]=\"borderRadiusRight\"\r\n      [class.border-radius-left]=\"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=\"1em\"\r\n        class=\"margin-right-1\"\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    id=\"filename\"\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/>\r\n", styles: ["input[type=file]{display:none}#filename{margin-left:.5em}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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.border-radius-right]=\"borderRadiusRight\"\r\n      [class.border-radius-left]=\"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=\"1em\"\r\n        class=\"margin-right-1\"\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    id=\"filename\"\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/>\r\n", styles: ["input[type=file]{display:none}#filename{margin-left:.5em}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }] }], propDecorators: { acceptedTypes: [{
+                type: Input
+            }], sizeLimitMb: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], showSize: [{
+                type: Input
+            }] } });
+
+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) {
+        super();
+        this.ngControl = ngControl;
+        this._min = 0;
+        this._max = 9;
+        this._step = 1;
+        this.mustBeInteger = true;
+        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);
+    }
+    onBeforeinput(e) {
+        const event = e;
+        if (event.data === null)
+            return;
+        const isDigit = /\d/.test(event.data);
+        const isMinus = event.data === '-';
+        const isMinusAllowed = this.min < 0;
+        const isBlockedNonDigit = !isDigit && !(isMinus && isMinusAllowed);
+        const isPastMax = Number((this._model || '') + event.data) > this.max;
+        if (isBlockedNonDigit || isPastMax)
+            event.preventDefault();
+    }
+    add(e) {
+        if (this.model === null) {
+            this.model = this.max;
+            return;
+        }
+        e.stepUp();
+        this.model = e.valueAsNumber;
+    }
+    subtract(e) {
+        if (this.model === null) {
+            this.model = this.min;
+            return;
+        }
+        e.stepDown();
+        this.model = e.valueAsNumber;
+    }
+    onChange(_model) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    writeValue(value) {
+        if (value === undefined)
+            value = null;
+        if (typeof value === 'string')
+            value = parseFloat(value);
+        if (value === null || isNumber(value))
+            this._model = value;
+    }
+    validate() {
+        const validators = [
+            Validators.min(this.min),
+            Validators.max(this.max)
+        ];
+        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.border-radius-left]=\"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=\"1em\"\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.border-radius-right]=\"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=\"1em\"\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", ".d-flex{display:flex}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}.justify-content-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.align-self-center{align-self:center}.margin-right-1{margin-right:.5em}.margin-right-2{margin-right:1em}.margin-left-1{margin-left:.5em}.margin-left-2{margin-left:1em}.border-radius-right{border-top-right-radius:.5em;border-bottom-right-radius:.5em}.border-radius-left{border-top-left-radius:.5em;border-bottom-left-radius:.5em}.white-space-nowrap{white-space:nowrap}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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.border-radius-left]=\"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=\"1em\"\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.border-radius-right]=\"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=\"1em\"\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", ".d-flex{display:flex}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}.justify-content-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.align-self-center{align-self:center}.margin-right-1{margin-right:.5em}.margin-right-2{margin-right:1em}.margin-left-1{margin-left:.5em}.margin-left-2{margin-left:1em}.border-radius-right{border-top-right-radius:.5em;border-bottom-right-radius:.5em}.border-radius-left{border-top-left-radius:.5em;border-bottom-left-radius:.5em}.white-space-nowrap{white-space:nowrap}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }] }], propDecorators: { min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }] } });
+
+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\">\r\n  {{model}}\r\n</div>\r\n", styles: [":host>div{color:inherit;background:transparent;border-width:.15em;border-color:transparent;border-style:solid;padding:.5em}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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\">\r\n  {{model}}\r\n</div>\r\n", styles: [":host>div{color:inherit;background:transparent;border-width:.15em;border-color:transparent;border-style:solid;padding:.5em}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class TextComponent extends ControlDirective {
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(v) {
+        const value = v;
+        if (typeof value !== 'string')
+            throw new Error('[placeholder] expects: string');
+        this._placeholder = value;
+    }
+    get minLength() {
+        return this._minLength;
+    }
+    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();
+    }
+    get maxLength() {
+        return this._maxLength;
+    }
+    set maxLength(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) {
+        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.id = `_${Math.random().toString(36).substring(2, 11)}`;
+        this.resizeSubject = new Subject();
+        this.validation.subscribe(() => this.validate());
+        ngControl.valueAccessor = this;
+        this.resizeSubject
+            .pipe(debounceTime(300))
+            .subscribe(() => this._isGrow && this.setTextareaHeight());
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.resizeSubject.complete();
+    }
+    onWindowResize() {
+        this.resizeSubject.next();
+    }
+    setTextareaHeight() {
+        if (!this.textareaElement || !this.textareaHiddenElement)
+            return;
+        const textarea = this.textareaElement.nativeElement;
+        const textareaHidden = this.textareaHiddenElement.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`);
+    }
+    onChange(_model) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    writeValue(v) {
+        let value = v;
+        if (value === '' || value === undefined)
+            value = null;
+        if (isNumber(value))
+            value = value.toString();
+        if (value === null || typeof value === 'string') {
+            this._model = 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)
+            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.border-radius-right]=\"borderRadiusRight\"\r\n    [class.border-radius-left]=\"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.border-radius-right]=\"borderRadiusRight\"\r\n    [class.border-radius-left]=\"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", ".d-flex{display:flex}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}.justify-content-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.align-self-center{align-self:center}.margin-right-1{margin-right:.5em}.margin-right-2{margin-right:1em}.margin-left-1{margin-left:.5em}.margin-left-2{margin-left:1em}.border-radius-right{border-top-right-radius:.5em;border-bottom-right-radius:.5em}.border-radius-left{border-top-left-radius:.5em;border-bottom-left-radius:.5em}.white-space-nowrap{white-space:nowrap}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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.border-radius-right]=\"borderRadiusRight\"\r\n    [class.border-radius-left]=\"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.border-radius-right]=\"borderRadiusRight\"\r\n    [class.border-radius-left]=\"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", ".d-flex{display:flex}.align-items-start{align-items:flex-start}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}.justify-content-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-column{flex-direction:column}.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.align-self-center{align-self:center}.margin-right-1{margin-right:.5em}.margin-right-2{margin-right:1em}.margin-left-1{margin-left:.5em}.margin-left-2{margin-left:1em}.border-radius-right{border-top-right-radius:.5em;border-bottom-right-radius:.5em}.border-radius-left{border-top-left-radius:.5em;border-bottom-left-radius:.5em}.white-space-nowrap{white-space:nowrap}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\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: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class SelectComponent extends ItemDirective {
+    set searchTerm(value) {
+        this._searchTerm = value;
+    }
+    get showDropdown() {
+        return this._showDropdown;
+    }
+    set showDropdown(value) {
+        this._showDropdown = value;
+        if (this._showDropdown === false)
+            return;
+        const hostBoundingRect = this.hostElement.nativeElement.getBoundingClientRect();
+        this.isDropdownCloseToBottom = window.innerHeight < hostBoundingRect.bottom + parseInt(this.dropdownMaxHeight, 10);
+    }
+    constructor(ngControl, hostElement) {
+        super(ngControl);
+        this.ngControl = ngControl;
+        this.hostElement = hostElement;
+        this.dropdownMaxHeight = '200px';
+        this._searchTerm = '';
+        this._showDropdown = false;
+        this.isDropdownCloseToBottom = false;
+    }
+    onGlobalClick(event) {
+        if (!this.hostElement.nativeElement.contains(event.target))
+            this._showDropdown = false;
+    }
+    onClickSearch() {
+        this.showDropdown = !this.showDropdown;
+    }
+    onFocusSearch() {
+        this.showDropdown = !this.showDropdown;
+    }
+    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];
+    }
+    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: { dropdownMaxHeight: "dropdownMaxHeight" }, host: { listeners: { "document:mousedown": "onGlobalClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<label>\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n  <jo-text\r\n    [borderRadiusLeft]=\"borderRadiusLeft\"\r\n    [borderRadiusRight]=\"false\"\r\n    [(ngModel)]=\"searchTerm\"\r\n    [isGrow]=\"false\"\r\n    class=\"flex-1\"\r\n    (onFocus)=\"onFocusSearch()\"\r\n  ></jo-text>\r\n  <button\r\n    class=\"d-flex\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"onClickSearch()\"\r\n  >\r\n    <icon\r\n      size=\"1em\"\r\n      type=\"chevron\"\r\n      [fill]=\"[null, 'current']\"\r\n      fillRotate=\"90\"\r\n      [stroke]=\"['current']\"\r\n    ></icon>\r\n  </button>\r\n</div>\r\n\r\n<div\r\n  class=\"drop {{isDropdownCloseToBottom ? 'up' : 'down'}}\"\r\n  [hidden]=\"!showDropdown\"\r\n  [style.max-height]=\"dropdownMaxHeight\"\r\n>\r\n  <!-- <jo-button *ngIf=\"items.length === 0\">\r\n    No Results\r\n  </jo-button> -->\r\n  <button\r\n    *ngFor=\"let item of items; let idx = index\"\r\n    class=\"d-flex\"\r\n    [class.active]=\"_model.includes(item.key)\"\r\n    [disabled]=\"isDisabled\"\r\n    [class.invalid]=\"!ngControl.control?.invalid\"\r\n    [class.border-radius-right]=\"borderRadiusRight && idx === items.length - 1\"\r\n    [class.border-radius-left]=\"borderRadiusLeft && idx === 0\"\r\n    (click)=\"onClick(item)\"\r\n    (blur)=\"onTouched()\"\r\n  >\r\n    <icon-stack\r\n      class=\"margin-right-1\"\r\n      size=\"1em\"\r\n    >\r\n      <icon [type]=\"isMultiple ? 'squircle' : 'circle'\"></icon>\r\n      <icon\r\n        *ngIf=\"_model.includes(item.key)\"\r\n        [type]=\"isMultiple ? 'check' : 'dot'\"\r\n        [fill]=\"[null, 'current']\"\r\n        fillRotate=\"90\"\r\n      ></icon>\r\n    </icon-stack>\r\n    {{item.value}}\r\n  </button>\r\n</div>", styles: [":host{position:relative;display:block}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}icon[type=chevron]{transform:rotate(180deg)}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\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: 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"] }, { kind: "component", type: i3.IconStackComponent, selector: "icon-stack" }, { kind: "component", type: TextComponent, selector: "jo-text", inputs: ["placeholder", "minLength", "maxLength", "isSpellCheck", "isGrow", "rows"], outputs: ["onBlur", "onFocus"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jo-select', template: "<label>\r\n  <ng-content></ng-content>\r\n</label>\r\n\r\n<div class=\"d-flex align-items-stretch\">\r\n  <jo-text\r\n    [borderRadiusLeft]=\"borderRadiusLeft\"\r\n    [borderRadiusRight]=\"false\"\r\n    [(ngModel)]=\"searchTerm\"\r\n    [isGrow]=\"false\"\r\n    class=\"flex-1\"\r\n    (onFocus)=\"onFocusSearch()\"\r\n  ></jo-text>\r\n  <button\r\n    class=\"d-flex\"\r\n    [disabled]=\"isDisabled\"\r\n    (click)=\"onClickSearch()\"\r\n  >\r\n    <icon\r\n      size=\"1em\"\r\n      type=\"chevron\"\r\n      [fill]=\"[null, 'current']\"\r\n      fillRotate=\"90\"\r\n      [stroke]=\"['current']\"\r\n    ></icon>\r\n  </button>\r\n</div>\r\n\r\n<div\r\n  class=\"drop {{isDropdownCloseToBottom ? 'up' : 'down'}}\"\r\n  [hidden]=\"!showDropdown\"\r\n  [style.max-height]=\"dropdownMaxHeight\"\r\n>\r\n  <!-- <jo-button *ngIf=\"items.length === 0\">\r\n    No Results\r\n  </jo-button> -->\r\n  <button\r\n    *ngFor=\"let item of items; let idx = index\"\r\n    class=\"d-flex\"\r\n    [class.active]=\"_model.includes(item.key)\"\r\n    [disabled]=\"isDisabled\"\r\n    [class.invalid]=\"!ngControl.control?.invalid\"\r\n    [class.border-radius-right]=\"borderRadiusRight && idx === items.length - 1\"\r\n    [class.border-radius-left]=\"borderRadiusLeft && idx === 0\"\r\n    (click)=\"onClick(item)\"\r\n    (blur)=\"onTouched()\"\r\n  >\r\n    <icon-stack\r\n      class=\"margin-right-1\"\r\n      size=\"1em\"\r\n    >\r\n      <icon [type]=\"isMultiple ? 'squircle' : 'circle'\"></icon>\r\n      <icon\r\n        *ngIf=\"_model.includes(item.key)\"\r\n        [type]=\"isMultiple ? 'check' : 'dot'\"\r\n        [fill]=\"[null, 'current']\"\r\n        fillRotate=\"90\"\r\n      ></icon>\r\n    </icon-stack>\r\n    {{item.value}}\r\n  </button>\r\n</div>", styles: [":host{position:relative;display:block}.drop{max-height:200px;overflow-y:auto}.drop.down{top:100%}.drop.up{bottom:100%}icon[type=chevron]{transform:rotate(180deg)}\n", "label{display:block;padding-bottom:.5em;font-weight:700}label:empty{display:none}label.required:after{content:\"*\"}ul{list-style:none;margin:0;padding:0}ul>li{padding-top:.25em}a:not(.jo-ignore),button:not(.jo-ignore),.button,input,textarea{color:inherit;background:transparent;border-width:.15em;border-style:outset;border-color:currentColor;padding:.5em;margin:0;font-size:1em;line-height:1em}a:not(.jo-ignore):active,a:not(.jo-ignore).active,button:not(.jo-ignore):active,button:not(.jo-ignore).active,.button:active,.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,.button:disabled,.button.disabled,input:disabled,input.disabled,textarea:disabled,textarea.disabled{cursor:not-allowed;border-style:solid;box-shadow:none;opacity:.5}a,button,.button{cursor:pointer}@keyframes invalid-border{0%,to{border-style:inset}50%{border-style:outset}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }] }, { type: i0.ElementRef }], propDecorators: { dropdownMaxHeight: [{
+                type: Input
+            }], onGlobalClick: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
+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,
+            ChoiceComponent,
+            ColorComponent,
+            FileComponent,
+            NumberComponent,
+            TextComponent,
+            ControlDirective,
+            ItemDirective,
+            SelectComponent,
+            BorderRadiusDirective], imports: [CommonModule,
+            FormsModule,
+            IconModule,
+            RouterModule], 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] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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,
+                    ]
+                }]
+        }] });
+
+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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: ChaosControlService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+// Public API Surface of chaos-control
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChaosControlModule, ChaosControlService, ChoiceComponent, ColorComponent, FileComponent, NumberComponent, ReadonlyComponent, SelectComponent, TextComponent, isItem, isItems, isNumber, isPrimitive };
+//# sourceMappingURL=joster-dev-chaos-control.mjs.map