boruto-xrmui 1.22.32 → 1.22.34

package/fesm2022/boruto-xrmui.mjs

@@ -852,6 +852,23 @@ function selectablesFromEnum(values, options) {
     return options.filter(item => ids.has(item.id));
 }
 
+function createOptionSetValue(value, name) {
+    const value$ = signal(value, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value$" }] : /* istanbul ignore next */ []));
+    const name$ = signal(name, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name$" }] : /* istanbul ignore next */ []));
+    return {
+        name: name,
+        value: value,
+        value$,
+        name$,
+        set(id, name) {
+            value$.set(id);
+            name$.set(name);
+        }
+    };
+}
+
 class DKCustomDateAdapter extends NativeDateAdapter {
     format(date, displayFormat) {
         if (!date)
@@ -1591,6 +1608,8 @@ class XrmuiInput {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    _initialValue = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_initialValue" }] : /* istanbul ignore next */ []));
     _disabled = input(undefined, { ...(ngDevMode ? { debugName: "_disabled" } : /* istanbul ignore next */ {}), alias: 'disabled' });
     disabled = computed(() => {
         const d = this._disabled();
@@ -1635,6 +1654,8 @@ class XrmuiInput {
     ...(ngDevMode ? [{ debugName: "multiselected" }] : /* istanbul ignore next */ []));
     optionsetvalue = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "optionsetvalue" }] : /* istanbul ignore next */ []));
+    multioptionsetvalue = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multioptionsetvalue" }] : /* istanbul ignore next */ []));
     entityreference = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "entityreference" }] : /* istanbul ignore next */ []));
     onselect = output();
@@ -1665,6 +1686,8 @@ class XrmuiInput {
     ...(ngDevMode ? [{ debugName: "isselectable" }] : /* istanbul ignore next */ []));
     ismultible = computed(() => this.multiselected() != undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ismultible" }] : /* istanbul ignore next */ []));
+    inputalign = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputalign" }] : /* istanbul ignore next */ []));
     autoopenonblank = computed(() => {
         const au = this._autoopenonblank();
         if (au != undefined) {
@@ -1716,6 +1739,14 @@ class XrmuiInput {
     isnumber = computed(() => this.validate() == 'decimal' || this.validate() == 'number', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isnumber" }] : /* istanbul ignore next */ []));
     inputclasses = computed(() => {
+        if (this.inputalign() == 'left')
+            return 'left';
+        if (this.inputalign() == 'right')
+            return 'right';
+        if (this.isnumber() && this.formScope?.formScope().inputalign == 'left')
+            return 'left';
+        if (this.isnumber() && this.formScope?.formScope().inputalign == 'right')
+            return 'right';
         if (!this.isnumber())
             return this.type();
         return this.type() + ' ' + 'number';
@@ -1729,6 +1760,7 @@ class XrmuiInput {
                 clearTimeout(this.blurThead);
             }
         });
+        effect(() => this._initialValue.set(this.value()));
         effect(() => {
             const sf = this.setfocus();
             if (sf == true) {
@@ -1774,8 +1806,8 @@ class XrmuiInput {
             const osv = this.optionsetvalue();
             const sels = this.selectable();
             if (osv) {
-                const n = osv.name$();
-                this.shadowValue.set(n ?? '');
+                const n = osv.name$() ?? '';
+                this.shadowValue.set(n);
             }
             if (osv && sels && sels.length > 0) {
                 const v = osv.value$();
@@ -1785,9 +1817,35 @@ class XrmuiInput {
                         this.selected.set(sel);
                     }
                 }
+                else {
+                    this.selected.set(undefined);
+                }
             }
             ;
         });
+        effect(() => {
+            const mus = this.multioptionsetvalue();
+            if (mus) {
+                const selectable = this.selectable();
+                if (selectable && selectable.length > 0) {
+                    const values = mus.values();
+                    if (values.length == 0) {
+                        this.multiselected.set([]);
+                    }
+                    else {
+                        const next = [];
+                        values.forEach(v => {
+                            const id = (untracked(() => v.value$()) ?? -1).toString();
+                            const s = selectable.find(s => s.id == id);
+                            if (s) {
+                                next.push(s);
+                            }
+                        });
+                        this.multiselected.set(next);
+                    }
+                }
+            }
+        });
         effect(() => {
             const re = this.entityreference();
             if (re) {
@@ -1868,31 +1926,32 @@ class XrmuiInput {
         }
     }
     onValueChanged() {
+        const _i = untracked(() => this._initialValue());
         const sv = this.shadowValue();
-        if (sv == '') {
+        if (sv == '' || sv == null || sv == undefined) {
             if (this.nullable() == true) {
                 this.value.set(null);
             }
             else {
                 this.value.set('');
             }
+            this.notifyIfNeeded(_i);
         }
         else {
-            const next = sv.replaceAll('.', '').replace(',', '.');
             switch (this.validate()) {
                 case 'number': {
                     // sync value on blue ... this is to early
-                    break;
+                    return;
                 }
                 case 'decimal': {
                     // syncvalue on blur ... this is to early
-                    break;
+                    return;
                 }
                 default:
                     this.value.set(sv);
+                    this.searchbyname();
             }
         }
-        this.searchbyname();
     }
     onCheckboxToggle() {
         this.value.set(this.shadowBool());
@@ -2011,6 +2070,7 @@ class XrmuiInput {
             this.onselect.emit(this.current);
             this.showitems.set(false);
             this.shadowValue.set(this.current.name ?? '');
+            this.notifyOnChange();
         }
     }
     onesc(e) {
@@ -2085,15 +2145,33 @@ class XrmuiInput {
     SetSelectedItem(v) {
         if (this.ismultible()) {
             if (v != undefined) {
-                const issel = this.isSelected(v);
-                if (v == this.selectall) {
-                    const allSelected = untracked(() => this.allIsSelected());
-                    if (allSelected) {
-                        this.multiselected.set([]);
+                try {
+                    const issel = this.isSelected(v);
+                    if (v == this.selectall) {
+                        const allSelected = untracked(() => this.allIsSelected());
+                        if (allSelected) {
+                            this.multiselected.set([]);
+                        }
+                        else {
+                            this.multiselected.set([...this.selectable()]);
+                        }
+                        return;
+                    }
+                    if (issel) {
+                        const next = this.multiselected().filter(r => r.id != v.id);
+                        this.multiselected.set(next);
+                        this.notifyOnChange();
                     }
                     else {
-                        this.multiselected.set([...this.selectable()]);
+                        const next = [...this.multiselected(), v];
+                        this.multiselected.set(next);
                     }
+                    this.current = v;
+                    this.currentindex.set(this.itemlist().indexOf(v));
+                    return;
+                }
+                finally {
+                    this.syncToMultiOptionSetValue();
                     this.notifyOnChange();
                     this.autoRefocus();
                     setTimeout(() => {
@@ -2101,26 +2179,7 @@ class XrmuiInput {
                             this.overlayRef.updatePosition();
                         }
                     }, 100);
-                    return;
-                }
-                if (issel) {
-                    const next = this.multiselected().filter(r => r.id != v.id);
-                    this.multiselected.set(next);
-                    this.notifyOnChange();
                 }
-                else {
-                    const next = [...this.multiselected(), v];
-                    this.multiselected.set(next);
-                }
-                this.current = v;
-                this.currentindex.set(this.itemlist().indexOf(v));
-                this.notifyOnChange();
-                this.autoRefocus();
-                setTimeout(() => {
-                    if (this.overlayRef) {
-                        this.overlayRef.updatePosition();
-                    }
-                }, 100);
             }
             return;
         }
@@ -2152,6 +2211,19 @@ class XrmuiInput {
             this.notifyOnChange();
         }
     }
+    syncToMultiOptionSetValue() {
+        const multi = untracked(() => this.multioptionsetvalue());
+        if (multi) {
+            const multiValues = untracked(() => multi.values());
+            const newValues = untracked(() => this.multiselected()) ?? [];
+            const multiIds = multiValues.map(r => untracked(() => r.value$() ?? -1).toString());
+            const newIds = newValues?.map(r => r.id);
+            if (multiIds.length != newIds?.length || !multiIds.every(m => newIds.includes(m))) {
+                const next = newValues.map(n => createOptionSetValue(Number(n.id), n.name ?? '')).sort((a, b) => a.name.localeCompare(b.name));
+                multi.values.set(next);
+            }
+        }
+    }
     next(e) {
         if (!this.showitems()) {
             return;
@@ -2255,10 +2327,22 @@ class XrmuiInput {
             }, mSec);
         }
     }
+    notifyIfNeeded(_i) {
+        const _v = untracked(() => this.value());
+        if ((_v == undefined || _v == null) && (_i == undefined || _i == null)) {
+            return;
+        }
+        if (_v != _i) {
+            this.notifyOnChange();
+            this._initialValue.set(_v);
+        }
+    }
     handleNumber() {
+        const _i = untracked(() => this._initialValue());
         let sv = this.shadowValue();
         if (sv == '') {
             this.value.set(null);
+            this.notifyIfNeeded(_i);
         }
         else {
             const next = sv.replaceAll('.', '').replace(',', '.');
@@ -2283,6 +2367,7 @@ class XrmuiInput {
                     this.decimalsUsed.emit(spl[1].length);
                 }
             }
+            this.notifyIfNeeded(_i);
         }
     }
     expandedItems = new Map();
@@ -2326,10 +2411,16 @@ class XrmuiInput {
         e.stopPropagation();
         const nextMS = this.multiselected().filter(r => r.id != v.id);
         this.multiselected.set(nextMS);
+        this.syncToMultiOptionSetValue();
         this.notifyOnChange();
     }
     setNumberValueString() {
-        const v = Number(this.value());
+        const _v = untracked(() => this.value());
+        if (this.nullable() && (_v == undefined || _v == null || _v == '')) {
+            this.shadowValue.set('');
+            return;
+        }
+        const v = Number(_v);
         let decimals = this.decimals();
         if (decimals == undefined && this.validate() == 'number') {
             decimals = 0;
@@ -2364,23 +2455,45 @@ class XrmuiInput {
         if (this.searchElement && this.overlayRef && !this.overlayRef.hasAttached()) {
             const portal = new TemplatePortal(this.suggestionsTemplate, this.viewContainerRef);
             this.overlayRef.attach(portal);
+            this.overlayRef.updateSize({
+                width: this.searchElement.nativeElement.getBoundingClientRect().width
+            });
             const autocomplete = this.overlayRef.overlayElement
                 .querySelector('.autocomplete');
             if (autocomplete) {
                 autocomplete.style.width =
                     `${this.searchElement.nativeElement.offsetWidth}px`;
             }
+            this.observeInputResize();
         }
     }
     hideAutocompleteSuggestions() {
         this.overlayRef?.detach();
     }
+    resizeObserver;
+    observeInputResize() {
+        this.resizeObserver = new ResizeObserver(() => {
+            const w = this.searchElement?.nativeElement.getBoundingClientRect().width;
+            if (this.overlayRef?.hasAttached()) {
+                this.overlayRef.updateSize({
+                    width: w
+                });
+                this.overlayRef.updatePosition();
+            }
+        });
+        this.resizeObserver.observe(this.searchElement?.nativeElement);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.overlayRef?.detach();
+        this.overlayRef?.dispose();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: XrmuiInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: XrmuiInput, isStandalone: true, selector: "xrmui-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, _shortLabel: { classPropertyName: "_shortLabel", publicName: "short-label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _showlock: { classPropertyName: "_showlock", publicName: "showlock", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputid: { classPropertyName: "inputid", publicName: "inputid", isSignal: true, isRequired: false, transformFunction: null }, setfocus: { classPropertyName: "setfocus", publicName: "setfocus", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, multiselected: { classPropertyName: "multiselected", publicName: "multiselected", isSignal: true, isRequired: false, transformFunction: null }, optionsetvalue: { classPropertyName: "optionsetvalue", publicName: "optionsetvalue", isSignal: true, isRequired: false, transformFunction: null }, entityreference: { classPropertyName: "entityreference", publicName: "entityreference", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, resizeable: { classPropertyName: "resizeable", publicName: "resizeable", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, notdark: { classPropertyName: "notdark", publicName: "notdark", isSignal: true, isRequired: false, transformFunction: null }, _autoopenonblank: { classPropertyName: "_autoopenonblank", publicName: "autoopenonblank", isSignal: true, isRequired: false, transformFunction: null }, nullable: { classPropertyName: "nullable", publicName: "nullable", isSignal: true, isRequired: false, transformFunction: null }, release: { classPropertyName: "release", publicName: "release", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolIcon: { classPropertyName: "toolIcon", publicName: "toolIcon", isSignal: true, isRequired: false, transformFunction: null }, numberoflines: { classPropertyName: "numberoflines", publicName: "numberoflines", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", setfocus: "setfocusChange", selected: "selectedChange", multiselected: "multiselectedChange", onselect: "onselect", validate: "validateChange", onfocusEvent: "focus", onblurEvent: "blur", click: "click", released: "released", decimalsUsed: "decimalsUsed", onEnter: "onEnter", toolClick: "toolClick" }, viewQueries: [{ propertyName: "searchElement", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "textareaElement", first: true, predicate: ["textareafield"], descendants: true }, { propertyName: "datefieldElement", first: true, predicate: ["datefield"], descendants: true }, { propertyName: "suggestionsTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true }, { propertyName: "options", predicate: ["option"], descendants: true }], ngImport: i0, template: "<div class=\"boruto-ui\">\r\n@if (label() != '' && label().length > 0 && shortLabel() != 'above') {\r\n<div class=\"label\" [ngClass]=\"{ short: shortLabel() == true }\" (click)=\"focusMe($event)\">{{ label() }}</div>\r\n}\r\n@if ((label() != '' || type() == 'number') && showlock()) {\r\n<div class=\"locked\">\r\n    @if (required() && shortLabel() != 'above') {\r\n    <div style=\"display: inline-block;height: 10px;color: red; position:  relative; top: -8px; right: 0\">*</div>\r\n    }\r\n    @if (disabled()) {\r\n    <mat-icon fontSet=\"material-symbols-outlined\">lock</mat-icon>\r\n    }\r\n</div>\r\n}\r\n<div class=\"input\" \r\n    [ngClass]=\"{ focus: hasfocus(), multi: ismultible(), error: error(), textarea: numberoflines() > 1, labelabove: shortLabel() == 'above', toolicon: toolIcon()?.length ?? 0 > 0 }\" \r\n    (mouseover)=\"isover.set(true)\"\r\n    (mouseleave)=\"isover.set(false)\"\r\n    (click)=\"focusMe($event, true)\">\r\n    @if (shortLabel() == 'above' && label() != '') {\r\n        <div class=\"label-above\">\r\n            {{ label() }}\r\n            @if (required()) {<span style=\"color: red\">&nbsp;*</span>}\r\n        </div>\r\n    }\r\n    @if (numberoflines() == 1 && validate() != 'date' && validate() != 'checkbox' && !isselect()) {\r\n    <input\r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        #inputfield \r\n        autocomplete=\"off\"\r\n        [ngClass]=\"inputclasses()\"\r\n        [type]=\"type() != 'password'? 'text' : 'password'\"\r\n        [disabled]=\"disabled()\" \r\n        [placeholder]=\"placeholder()\" \r\n        [(ngModel)]=\"shadowValue\" \r\n        (ngModelChange)=\"onValueChanged()\" \r\n        (focus)=\"onFocus()\" \r\n        (blur)=\"onBlur()\"\r\n        (keydown.arrowdown)=\"ondown($event)\"\r\n        (keydown.arrowup)=\"onup($event)\"\r\n        (keydown.enter)=\"onenter($event)\"\r\n        (keydown.esc)=\"onesc($event)\"\r\n        (keydown)=\"onkeydown($event)\"\r\n        [maxlength]=\"maxlength()\"/>\r\n    }\r\n    @if (validate() == 'checkbox') {\r\n        <div class=\"checkbox\">\r\n        <input\r\n            [id]=\"inputid()\"\r\n            [name]=\"name()\"\r\n            type=\"checkbox\"\r\n            class=\"text checkbox\"\r\n            [(ngModel)]=\"shadowBool\"\r\n            [disabled]=\"disabled()\"\r\n            (ngModelChange)=\"onCheckboxToggle()\" \r\n            (focus)=\"onFocus()\" \r\n            (blur)=\"onBlurCheckbox()\"\r\n         />\r\n         </div>\r\n    }\r\n    @if (numberoflines() == 1 && validate() == 'date' && !isselect()) {\r\n        <input\r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        #datefield\r\n        class=\"text datepicker\"\r\n         [matDatepicker]=\"picker\"\r\n         [value]=\"shadowDate()\"\r\n         (dateChange)=\"pickDate($event)\"\r\n         [disabled]=\"disabled()\" \r\n         [placeholder]=\"placeholder()\" \r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlurDate()\"/>\r\n        @if (!disabled()) {\r\n        <mat-icon \r\n            class=\"calendar-icon\" \r\n            fontSet=\"material-symbols-outlined\"\r\n            (click)=\"picker.open()\">calendar_month</mat-icon>\r\n        }\r\n        <mat-datepicker #picker></mat-datepicker>\r\n    }\r\n    @if (numberoflines() > 1 && !isselect()) {\r\n        <textarea\r\n            [id]=\"inputid()\"\r\n            [name]=\"name()\"\r\n            #textareafield\r\n            [maxlength]=\"maxlength()\"\r\n            [rows]=\"numberoflines()\"\r\n            [disabled]=\"disabled()\" \r\n            [placeholder]=\"placeholder()\" \r\n            [(ngModel)]=\"shadowValue\" \r\n            [ngClass]=\"{ noresize: !resizeable() }\"\r\n            (ngModelChange)=\"onValueChanged()\" \r\n            (focus)=\"onFocus()\" \r\n            (blur)=\"onBlur()\"></textarea>\r\n    }\r\n    @let options = selectable();\r\n    @if (options && options.length > 0 && !ismultible()) {\r\n        <button \r\n        #inputfield \r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        (click)=\"openSelect()\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\"\r\n        [disabled]=\"disabled()\"\r\n        class=\"optionsetbutton\"\r\n        [ngClass]=\"{ grayed: selected() === undefined }\"\r\n        (keydown.arrowdown)=\"ondown($event)\"\r\n        (keydown.arrowup)=\"onup($event)\"\r\n        (keydown.enter)=\"onenter($event)\"\r\n        (keydown.esc)=\"onesc($event)\"\r\n        (keydown)=\"onkeydown($event)\">\r\n        <div class=\"bo-grid-rows\">\r\n            <div class=\"bo-row\">\r\n                <div class=bo-grid-columns>\r\n                    <div class=\"bo-column\">{{ selected()?.name ?? setdefaultitem.name }}</div>\r\n                    <div class=\"bo-column bo-fixed\" style=\"--bo-fixed-size: 25  px; margin-top: -10px;position: relative;\">\r\n                        <xrmui-icon icon=\"keyboard_arrow_down\" type=\"font\" style=\"color: black\"></xrmui-icon>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        </button>\r\n    }\r\n    @if (options && options.length > 0 && ismultible()) {\r\n        <div class=\"multi-select\">\r\n        @let optionsselected = multiselected()!;\r\n        @for (ms of optionsselected; track ms.id; let ix = $index) {\r\n            <div class=\"multi-select-item\" [ngClass]=\"{ over: isover() && !showitems() }\">@if(ix>0 && (!isover() || showitems())) {, }\r\n                <button tabindex=\"-1\" (click)=\"removeMultiSelected($event, ms)\">\r\n                @if (ms.icon && ms.icon.length > 0) {\r\n                    <span class=\"material-symbols-outlined\" style=\"font-size: small; position: relative; top: 3px\">{{ ms.icon }}</span>\r\n                }\r\n                 {{ ms.name }}\r\n                @if (isover() && !showitems()) {\r\n                    <span class=\"material-symbols-outlined\" style=\"font-size: small; position: relative; top: 3px\">close_small</span>\r\n                }\r\n                </button>\r\n            </div>\r\n        }\r\n        </div>\r\n        <div style=\"height: 2px\" class=\"multi-select-input\">\r\n            <input \r\n                #inputfield \r\n                readonly\r\n                [id]=\"inputid()\"\r\n                [name]=\"name()\"\r\n                (click)=\"openSelect()\"\r\n                (focus)=\"onFocus()\"\r\n                (blur)=\"onBlur()\"\r\n                [disabled]=\"disabled()\"\r\n                (keydown.arrowdown)=\"ondown($event)\"\r\n                (keydown.arrowup)=\"onup($event)\"\r\n                (keydown.enter)=\"onenter($event)\"\r\n                (keydown.esc)=\"onesc($event)\"\r\n                (keydown.backspace)=\"onbackspace($event)\"\r\n                (keydown)=\"onkeydown($event)\"\r\n                />\r\n        </div>\r\n    }\r\n    @let ti = toolIcon();\r\n    @if (!disabled() && ti && ti.length > 0) {\r\n        <mat-icon class=\"toolicon\" fontSet=\"material-symbols-outlined\" (click)=\"toolClicked($event)\">{{ ti }}</mat-icon>\r\n    }\r\n</div>\r\n\r\n@if (label() == '' && type() != 'number' && showlock()) {\r\n    <div class=\"locked\" style=\"text-align: left;\">\r\n        @if (disabled()) {\r\n            <mat-icon fontSet=\"material-symbols-outlined\">lock</mat-icon>\r\n        }\r\n    </div>\r\n}\r\n\r\n@if (info()) {<div class=\"info\" [title]=\"info()\"><mat-icon class=\"info\">info</mat-icon></div>}\r\n</div>\r\n\r\n<ng-template #suggestionsTemplate>\r\n    <div class=\"boruto-ui\">\r\n        <div class=\"autocomplete\" [ngClass]=\"{ nolabel: (!label() || label().length == 0 || shortLabel() == 'above'), shortLabel: shortLabel() == true, notdark: notdark() }\">\r\n            @if (itemlist().length == 0) {\r\n            <div class=\"element\"><div class=\"item\">Ingen fundet</div></div>\r\n            }\r\n            @for (elm of itemlist(); track elm) {\r\n            <div #option class=\"element\" [ngClass]=\"{ current: current == elm, selectable: !elm.disabled }\" (click)=\"select($event, elm)\">\r\n                @if (elm.icon && elm.icon.length > 0) {\r\n                    <div class=\"icon\" style=\"min-width: 28px;\">\r\n                        <xrmui-icon type=\"font\" [icon]=\"elm.icon\"></xrmui-icon>\r\n                    </div>\r\n                }\r\n                <div class=\"item\">\r\n                    @if (itemTemplate(); as template) {\r\n                        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: elm }\"></ng-container>\r\n                    } @else {\r\n                        @if (elm == selectall) {\r\n                            @if (allIsSelected()) {\r\n                                Remove all\r\n                            } @else {\r\n                                Select all\r\n                            }\r\n                        } @else {\r\n                            {{ elm.name }}\r\n                        }\r\n                    }\r\n                </div>\r\n                @if (isselectable() && !multiselected()) {\r\n                    <div class=\"icon\" style=\"min-width: 24px;\">\r\n                        @if (current == elm && elm != setdefaultitem) {\r\n                            <xrmui-icon type=\"font\" icon=\"check\" inlineStyle=\"font-size: small\"></xrmui-icon>\r\n                        }\r\n                    </div>\r\n                }\r\n                @if (isselectable() && multiselected() && elm != selectall) {\r\n                    <div class=\"icon\" style=\"min-width: 24px;\">\r\n                        @if (isSelected(elm)) {\r\n                            <xrmui-icon type=\"font\" icon=\"check_box\"></xrmui-icon>\r\n                        }\r\n                        @if (!isSelected(elm)) {\r\n                            <xrmui-icon type=\"font\" icon=\"check_box_outline_blank\"></xrmui-icon>\r\n                        }\r\n                    </div>\r\n                }\r\n                @if (elm.expandable == true) {\r\n                <div class=\"icon expand\" (click)=\"expand($event, elm)\">\r\n                    <xrmui-icon icon=\"arrow_drop_down\" size=\"24\"></xrmui-icon>\r\n                </div>\r\n                }\r\n                @if (elm.completeOnly == true) {\r\n                <div class=\"icon complete\" (click)=\"complete($event, elm)\">\r\n                    <xrmui-icon icon=\"search\" size=\"24\"></xrmui-icon>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".boruto-ui{display:flex;margin-bottom:10px}.boruto-ui div.autocomplete{display:block;box-sizing:border-box;background-color:#fff;color:#000;border:solid;border-width:1px 1px 1px 1px;border-color:#d3d3d3;border-radius:4px;padding:5px;max-height:200px;overflow-x:hidden;overflow-y:auto}.boruto-ui div.autocomplete.nolabel{left:0}.boruto-ui div.autocomplete.shortLabel{left:124px}.boruto-ui div.autocomplete div.element.selectable{cursor:pointer}.boruto-ui div.autocomplete div.element{margin:5px;padding:5px;display:flex;border:solid;border-width:0 0 1px 0;border-color:#d3d3d3;font-size:14px;color:gray}.boruto-ui div.autocomplete div.element.current{border-color:#0f6cbd;color:#000}.boruto-ui div.autocomplete div.element div.item{display:flex;flex-grow:1;align-items:center}.boruto-ui div.label{width:180px;min-width:180px;max-height:180px;height:32px;line-height:32px}.boruto-ui div.label.short{width:90px;min-width:90px}.boruto-ui div.locked{width:30px;min-width:30px;max-width:30px;height:32px;line-height:32px;text-align:right;padding-right:3px}.boruto-ui div.input{flex-grow:1;height:32px;line-height:32px;background-color:#f5f5f5;border-radius:3px;margin:0;padding:0;border:solid;border-width:0 0 3px 0;border-color:transparent}.boruto-ui div.input.multi{height:auto;min-height:32px;line-height:normal}.boruto-ui div.input.labelabove{height:48px}.boruto-ui div.input.labelabove.multi{height:auto;min-height:48px;line-height:normal}.boruto-ui div.input.labelabove div.label-above{font-size:12px;line-height:12px;width:100%;padding-left:15px;padding-top:5px;color:gray}.boruto-ui div.input.focus.labelabove div.label-above{color:#0f6cbd}.boruto-ui div.input.textarea{height:inherit}.boruto-ui div.info{width:30px}.boruto-ui div textarea{background-color:#f5f5f5;border-radius:3px;margin:0;padding:10px 15px;border:solid;border-width:0 0 3px 0;border-color:transparent;width:100%;box-sizing:border-box}.boruto-ui div.input.focus,.boruto-ui div.textarea.focus,.boruto-ui div.select.focus{border-color:#0f6cbd}.boruto-ui div.input.error,.boruto-ui div.input.focus.error,.boruto-ui div.select.focus.error{border-color:red;color:red}.boruto-ui input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:100%;box-sizing:border-box}.boruto-ui input.number{text-align:right}.boruto-ui select{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:calc(100% - 10px);box-sizing:border-box}.boruto-ui input.datepicker{width:calc(100% - 35px)}.boruto-ui div.input>div.checkbox{margin-left:15px;margin-top:5px}.boruto-ui div.input.above>div.checkbox{margin-top:2px}.boruto-ui input.checkbox{width:15px;height:15px}.boruto-ui div.input.toolicon input{width:calc(100% - 35px)}@media(prefers-color-scheme:dark){.boruto-ui input{color:#000}.boruto-ui input:disabled{color:#5f615f}}.boruto-ui input.number{text-align:right;padding-right:15px;padding-left:0}.boruto-ui *:focus{outline:none}.boruto-ui mat-icon{color:#d3d3d3;font-size:12px;position:relative;top:5px;width:12px}.boruto-ui .complete mat-icon,.boruto-ui .expand mat-icon{width:24px}.boruto-ui textarea.noresize{resize:none}.boruto-ui mat-icon.info{font-size:30px;width:30px;height:30px;color:gray}.boruto-ui mat-icon.info:hover{color:#000}.boruto-ui mat-icon.calendar-icon{font-size:25px;width:25px;height:25px;color:#a9a9a9}.boruto-ui mat-icon.toolicon{cursor:pointer;font-size:25px;width:25px;height:25px;color:gray}.boruto-ui mat-icon.dropdown{position:absolute;right:10px;top:4px;font-size:25px;width:25px;height:25px;color:gray;pointer-events:none}.boruto-ui div.input.labelabove mat-icon.dropdown{top:12px}.boruto-ui div.input.labelabove mat-icon.toolicon,.boruto-ui div.input.labelabove mat-icon.calendar-icon{position:relative;top:-5px}.boruto-ui select{appearance:none;-webkit-appearance:none;-moz-appearance:none}.boruto-ui button.optionsetbutton{width:100%;height:29px;border:none;box-sizing:border-box;background-color:transparent;text-align:left;padding-left:15px}.boruto-ui button.optionsetbutton.grayed{color:gray}.boruto-ui div.multi-select{padding-left:15px;font-size:small;display:flex;flex-direction:row;flex-wrap:wrap;min-height:27px}.boruto-ui div.multi-select div.multi-select-item{line-height:1.2;margin-right:2px;margin-top:5px;white-space:nowrap}.boruto-ui div.multi-select div.multi-select-item.over{padding:4px;margin-right:4px;background-color:#d8d8d8;cursor:pointer}.boruto-ui div.multi-select div.multi-select-item button{margin:0;padding:0;border:none;background-color:transparent;height:100%;cursor:pointer}.boruto-ui div.multi-select-input{position:relative;height:6px}.boruto-ui div.multi-select-input input{position:absolute;opacity:0;width:100%;height:11px;padding:0;border: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.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: XrmuiIcon, selector: "xrmui-icon", inputs: ["icon", "fontClass", "inlineStyle", "disabled", "type", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: XrmuiInput, isStandalone: true, selector: "xrmui-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, _shortLabel: { classPropertyName: "_shortLabel", publicName: "short-label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _showlock: { classPropertyName: "_showlock", publicName: "showlock", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputid: { classPropertyName: "inputid", publicName: "inputid", isSignal: true, isRequired: false, transformFunction: null }, setfocus: { classPropertyName: "setfocus", publicName: "setfocus", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, multiselected: { classPropertyName: "multiselected", publicName: "multiselected", isSignal: true, isRequired: false, transformFunction: null }, optionsetvalue: { classPropertyName: "optionsetvalue", publicName: "optionsetvalue", isSignal: true, isRequired: false, transformFunction: null }, multioptionsetvalue: { classPropertyName: "multioptionsetvalue", publicName: "multioptionsetvalue", isSignal: true, isRequired: false, transformFunction: null }, entityreference: { classPropertyName: "entityreference", publicName: "entityreference", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, resizeable: { classPropertyName: "resizeable", publicName: "resizeable", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, notdark: { classPropertyName: "notdark", publicName: "notdark", isSignal: true, isRequired: false, transformFunction: null }, _autoopenonblank: { classPropertyName: "_autoopenonblank", publicName: "autoopenonblank", isSignal: true, isRequired: false, transformFunction: null }, nullable: { classPropertyName: "nullable", publicName: "nullable", isSignal: true, isRequired: false, transformFunction: null }, release: { classPropertyName: "release", publicName: "release", isSignal: true, isRequired: false, transformFunction: null }, inputalign: { classPropertyName: "inputalign", publicName: "inputalign", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, toolIcon: { classPropertyName: "toolIcon", publicName: "toolIcon", isSignal: true, isRequired: false, transformFunction: null }, numberoflines: { classPropertyName: "numberoflines", publicName: "numberoflines", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", setfocus: "setfocusChange", selected: "selectedChange", multiselected: "multiselectedChange", onselect: "onselect", validate: "validateChange", onfocusEvent: "focus", onblurEvent: "blur", click: "click", released: "released", decimalsUsed: "decimalsUsed", onEnter: "onEnter", toolClick: "toolClick" }, viewQueries: [{ propertyName: "searchElement", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "textareaElement", first: true, predicate: ["textareafield"], descendants: true }, { propertyName: "datefieldElement", first: true, predicate: ["datefield"], descendants: true }, { propertyName: "suggestionsTemplate", first: true, predicate: ["suggestionsTemplate"], descendants: true }, { propertyName: "options", predicate: ["option"], descendants: true }], ngImport: i0, template: "<div class=\"boruto-ui\">\r\n@if (label() != '' && label().length > 0 && shortLabel() != 'above') {\r\n<div class=\"label\" [ngClass]=\"{ short: shortLabel() == true }\" (click)=\"focusMe($event)\">{{ label() }}</div>\r\n}\r\n@if ((label() != '' || type() == 'number') && showlock()) {\r\n<div class=\"locked\">\r\n    @if (required() && shortLabel() != 'above') {\r\n    <div style=\"display: inline-block;height: 10px;color: red; position:  relative; top: -8px; right: 0\">*</div>\r\n    }\r\n    @if (disabled()) {\r\n    <mat-icon fontSet=\"material-symbols-outlined\">lock</mat-icon>\r\n    }\r\n</div>\r\n}\r\n<div class=\"input\" \r\n    [ngClass]=\"{ focus: hasfocus(), multi: ismultible(), error: error(), textarea: numberoflines() > 1, labelabove: shortLabel() == 'above', toolicon: toolIcon()?.length ?? 0 > 0 }\" \r\n    (mouseover)=\"isover.set(true)\"\r\n    (mouseleave)=\"isover.set(false)\"\r\n    (click)=\"focusMe($event, true)\">\r\n    @if (shortLabel() == 'above' && label() != '') {\r\n        <div class=\"label-above\">\r\n            {{ label() }}\r\n            @if (required()) {<span style=\"color: red\">&nbsp;*</span>}\r\n        </div>\r\n    }\r\n    @if (numberoflines() == 1 && validate() != 'date' && validate() != 'checkbox' && !isselect()) {\r\n    <input\r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        #inputfield \r\n        autocomplete=\"off\"\r\n        [ngClass]=\"inputclasses()\"\r\n        [type]=\"type() != 'password'? 'text' : 'password'\"\r\n        [disabled]=\"disabled()\" \r\n        [placeholder]=\"placeholder()\" \r\n        [(ngModel)]=\"shadowValue\" \r\n        (ngModelChange)=\"onValueChanged()\" \r\n        (focus)=\"onFocus()\" \r\n        (blur)=\"onBlur()\"\r\n        (keydown.arrowdown)=\"ondown($event)\"\r\n        (keydown.arrowup)=\"onup($event)\"\r\n        (keydown.enter)=\"onenter($event)\"\r\n        (keydown.esc)=\"onesc($event)\"\r\n        (keydown)=\"onkeydown($event)\"\r\n        [maxlength]=\"maxlength()\"/>\r\n    }\r\n    @if (validate() == 'checkbox') {\r\n        <div class=\"checkbox\">\r\n        <input\r\n            [id]=\"inputid()\"\r\n            [name]=\"name()\"\r\n            type=\"checkbox\"\r\n            class=\"text checkbox\"\r\n            [(ngModel)]=\"shadowBool\"\r\n            [disabled]=\"disabled()\"\r\n            (ngModelChange)=\"onCheckboxToggle()\" \r\n            (focus)=\"onFocus()\" \r\n            (blur)=\"onBlurCheckbox()\"\r\n         />\r\n         </div>\r\n    }\r\n    @if (numberoflines() == 1 && validate() == 'date' && !isselect()) {\r\n        <input\r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        #datefield\r\n        class=\"text datepicker\"\r\n         [matDatepicker]=\"picker\"\r\n         [value]=\"shadowDate()\"\r\n         (dateChange)=\"pickDate($event)\"\r\n         [disabled]=\"disabled()\" \r\n         [placeholder]=\"placeholder()\" \r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlurDate()\"/>\r\n        @if (!disabled()) {\r\n        <mat-icon \r\n            class=\"calendar-icon\" \r\n            fontSet=\"material-symbols-outlined\"\r\n            (click)=\"picker.open()\">calendar_month</mat-icon>\r\n        }\r\n        <mat-datepicker #picker></mat-datepicker>\r\n    }\r\n    @if (numberoflines() > 1 && !isselect()) {\r\n        <textarea\r\n            [id]=\"inputid()\"\r\n            [name]=\"name()\"\r\n            #textareafield\r\n            [maxlength]=\"maxlength()\"\r\n            [rows]=\"numberoflines()\"\r\n            [disabled]=\"disabled()\" \r\n            [placeholder]=\"placeholder()\" \r\n            [(ngModel)]=\"shadowValue\" \r\n            [ngClass]=\"{ noresize: !resizeable() }\"\r\n            (ngModelChange)=\"onValueChanged()\" \r\n            (focus)=\"onFocus()\" \r\n            (blur)=\"onBlur()\"></textarea>\r\n    }\r\n    @let options = selectable();\r\n    @if (options && options.length > 0 && !ismultible()) {\r\n        <button \r\n        #inputfield \r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        (click)=\"openSelect()\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\"\r\n        [disabled]=\"disabled()\"\r\n        class=\"optionsetbutton\"\r\n        [ngClass]=\"{ grayed: selected() === undefined }\"\r\n        (keydown.arrowdown)=\"ondown($event)\"\r\n        (keydown.arrowup)=\"onup($event)\"\r\n        (keydown.enter)=\"onenter($event)\"\r\n        (keydown.esc)=\"onesc($event)\"\r\n        (keydown)=\"onkeydown($event)\">\r\n        <div class=\"bo-grid-rows\">\r\n            <div class=\"bo-row\">\r\n                <div class=bo-grid-columns>\r\n                    <div class=\"bo-column\">{{ selected()?.name ?? setdefaultitem.name }}</div>\r\n                    @if (!disabled()) {\r\n                        <div class=\"bo-column bo-fixed\" style=\"--bo-fixed-size: 25  px; margin-top: -2px;position: relative;\">\r\n                            <xrmui-icon icon=\"keyboard_arrow_down\" type=\"font\" style=\"color: black\"></xrmui-icon>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        </button>\r\n    }\r\n    @if (options && options.length > 0 && ismultible()) {\r\n        <div style=\"display: flex; flex-direction: row;\">\r\n        <div style=\"flex-grow: 1;\">\r\n            <div class=\"multi-select\">\r\n                @let optionsselected = multiselected()!;\r\n                @for (ms of optionsselected; track ms.id; let ix = $index) {\r\n                    <div class=\"multi-select-item\" [ngClass]=\"{ over: isover() && !showitems() }\">@if(ix>0 && (!isover() || showitems())) {, }\r\n                        <button tabindex=\"-1\" (click)=\"removeMultiSelected($event, ms)\">\r\n                        @if (ms.icon && ms.icon.length > 0) {\r\n                            <span class=\"material-symbols-outlined\" style=\"font-size: small; position: relative; top: 3px\">{{ ms.icon }}</span>\r\n                        }\r\n                        {{ ms.name }}\r\n                        @if (isover() && !showitems() && !disabled()) {\r\n                            <span class=\"material-symbols-outlined\" style=\"font-size: small; position: relative; top: 3px\">close_small</span>\r\n                        }\r\n                        </button>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <div style=\"height: 2px\" class=\"multi-select-input\">\r\n                <input \r\n                    #inputfield \r\n                    readonly\r\n                    [id]=\"inputid()\"\r\n                    [name]=\"name()\"\r\n                    (click)=\"openSelect()\"\r\n                    (focus)=\"onFocus()\"\r\n                    (blur)=\"onBlur()\"\r\n                    [disabled]=\"disabled()\"\r\n                    (keydown.arrowdown)=\"ondown($event)\"\r\n                    (keydown.arrowup)=\"onup($event)\"\r\n                    (keydown.enter)=\"onenter($event)\"\r\n                    (keydown.esc)=\"onesc($event)\"\r\n                    (keydown.backspace)=\"onbackspace($event)\"\r\n                    (keydown)=\"onkeydown($event)\"\r\n                    />\r\n            </div>\r\n        </div>\r\n        @if (!disabled()) {\r\n            <div style=\"max-width: 25px; max-width: 25px; width: 25px; margin-right: 5px;margin-top: 5px; cursor: pointer;\">\r\n                <xrmui-icon icon=\"keyboard_arrow_down\" type=\"font\" style=\"color: black\"></xrmui-icon>\r\n            </div>\r\n        }\r\n        </div>\r\n    }\r\n    @let ti = toolIcon();\r\n    @if (!disabled() && ti && ti.length > 0) {\r\n        <mat-icon class=\"toolicon\" fontSet=\"material-symbols-outlined\" (click)=\"toolClicked($event)\">{{ ti }}</mat-icon>\r\n    }\r\n</div>\r\n\r\n@if (label() == '' && type() != 'number' && showlock()) {\r\n    <div class=\"locked\" style=\"text-align: left;\">\r\n        @if (disabled()) {\r\n            <mat-icon fontSet=\"material-symbols-outlined\">lock</mat-icon>\r\n        }\r\n    </div>\r\n}\r\n\r\n@if (info()) {<div class=\"info\" [title]=\"info()\"><mat-icon class=\"info\">info</mat-icon></div>}\r\n</div>\r\n\r\n<ng-template #suggestionsTemplate>\r\n    <div class=\"boruto-ui autocomplete\">\r\n        <div class=\"autocomplete\" [ngClass]=\"{ nolabel: (!label() || label().length == 0 || shortLabel() == 'above'), shortLabel: shortLabel() == true, notdark: notdark() }\">\r\n            @if (itemlist().length == 0) {\r\n            <div class=\"element\"><div class=\"item\">Ingen fundet</div></div>\r\n            }\r\n            @for (elm of itemlist(); track elm) {\r\n            <div #option class=\"element\" [ngClass]=\"{ current: current == elm, selectable: !elm.disabled }\" (click)=\"select($event, elm)\">\r\n                @if (elm.icon && elm.icon.length > 0) {\r\n                    <div class=\"icon\" style=\"min-width: 28px;\">\r\n                        <xrmui-icon type=\"font\" [icon]=\"elm.icon\"></xrmui-icon>\r\n                    </div>\r\n                }\r\n                <div class=\"item\">\r\n                    @if (itemTemplate(); as template) {\r\n                        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: elm }\"></ng-container>\r\n                    } @else {\r\n                        @if (elm == selectall) {\r\n                            @if (allIsSelected()) {\r\n                                Remove all\r\n                            } @else {\r\n                                Select all\r\n                            }\r\n                        } @else {\r\n                            {{ elm.name }}\r\n                        }\r\n                    }\r\n                </div>\r\n                @if (isselectable() && !multiselected()) {\r\n                    <div class=\"icon\" style=\"min-width: 24px;\">\r\n                        @if (current == elm && elm != setdefaultitem) {\r\n                            <xrmui-icon type=\"font\" icon=\"check\" inlineStyle=\"font-size: small\"></xrmui-icon>\r\n                        }\r\n                    </div>\r\n                }\r\n                @if (isselectable() && multiselected() && elm != selectall) {\r\n                    <div class=\"icon\" style=\"min-width: 24px;\">\r\n                        @if (isSelected(elm)) {\r\n                            <xrmui-icon type=\"font\" icon=\"check_box\"></xrmui-icon>\r\n                        }\r\n                        @if (!isSelected(elm)) {\r\n                            <xrmui-icon type=\"font\" icon=\"check_box_outline_blank\"></xrmui-icon>\r\n                        }\r\n                    </div>\r\n                }\r\n                @if (elm.expandable == true) {\r\n                <div class=\"icon expand\" (click)=\"expand($event, elm)\">\r\n                    <xrmui-icon icon=\"arrow_drop_down\" size=\"24\"></xrmui-icon>\r\n                </div>\r\n                }\r\n                @if (elm.completeOnly == true) {\r\n                <div class=\"icon complete\" (click)=\"complete($event, elm)\">\r\n                    <xrmui-icon icon=\"search\" size=\"24\"></xrmui-icon>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".boruto-ui{display:flex;margin-bottom:10px}.boruto-ui.autocomplete{width:100%;display:flex;flex-grow:1}.boruto-ui div.autocomplete{display:block;background-color:#fff;color:#000;border:solid;border-width:1px 1px 1px 1px;border-color:#d3d3d3;border-radius:4px;padding:5px;max-height:250px;overflow-x:hidden;overflow-y:auto;width:100%;box-sizing:border-box}.boruto-ui div.autocomplete.nolabel{left:0}.boruto-ui div.autocomplete.shortLabel{left:124px}.boruto-ui div.autocomplete div.element.selectable{cursor:pointer}.boruto-ui div.autocomplete div.element{margin:5px;padding:5px;display:flex;border:solid;border-width:0 0 1px 0;border-color:#d3d3d3;font-size:14px;color:gray}.boruto-ui div.autocomplete div.element.current{border-color:#0f6cbd;color:#000}.boruto-ui div.autocomplete div.element div.item{display:flex;flex-grow:1;align-items:center}.boruto-ui div.label{width:180px;min-width:180px;max-height:180px;height:32px;line-height:32px}.boruto-ui div.label.short{width:90px;min-width:90px}.boruto-ui div.locked{width:30px;min-width:30px;max-width:30px;height:32px;line-height:32px;text-align:right;padding-right:3px}.boruto-ui div.input{flex-grow:1;height:32px;line-height:32px;background-color:#f5f5f5;border-radius:3px;margin:0;padding:0;border:solid;border-width:0 0 3px 0;border-color:transparent}.boruto-ui div.input.multi{height:auto;min-height:32px;line-height:normal}.boruto-ui div.input.labelabove{height:48px}.boruto-ui div.input.labelabove.multi{height:auto;min-height:48px;line-height:normal}.boruto-ui div.input.labelabove div.label-above{font-size:12px;line-height:12px;width:100%;padding-left:15px;padding-top:5px;color:gray}.boruto-ui div.input.focus.labelabove div.label-above{color:#0f6cbd}.boruto-ui div.input.textarea{height:inherit}.boruto-ui div.info{width:30px}.boruto-ui div textarea{background-color:#f5f5f5;border-radius:3px;margin:0;padding:10px 15px;border:solid;border-width:0 0 3px 0;border-color:transparent;width:100%;box-sizing:border-box}.boruto-ui div.input.focus,.boruto-ui div.textarea.focus,.boruto-ui div.select.focus{border-color:#0f6cbd}.boruto-ui div.input.error,.boruto-ui div.input.focus.error,.boruto-ui div.select.focus.error{border-color:red;color:red}.boruto-ui input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:100%;box-sizing:border-box}.boruto-ui input.right,.boruto-ui input.number{text-align:right}.boruto ui-input.left{text-align:left}.boruto-ui select{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:calc(100% - 10px);box-sizing:border-box}.boruto-ui input.datepicker{width:calc(100% - 35px)}.boruto-ui div.input>div.checkbox{margin-left:15px;margin-top:5px}.boruto-ui div.input.above>div.checkbox{margin-top:2px}.boruto-ui input.checkbox{width:15px;height:15px}.boruto-ui div.input.toolicon input{width:calc(100% - 35px)}@media(prefers-color-scheme:dark){.boruto-ui input{color:#000}.boruto-ui input:disabled{color:#5f615f}}.boruto-ui input.right,.boruto-ui input.number{text-align:right;padding-right:15px;padding-left:0}.boruto-ui input.left{text-align:left;padding-left:15px}.boruto-ui *:focus{outline:none}.boruto-ui mat-icon{color:#d3d3d3;font-size:12px;position:relative;top:5px;width:12px}.boruto-ui .complete mat-icon,.boruto-ui .expand mat-icon{width:24px}.boruto-ui textarea.noresize{resize:none}.boruto-ui mat-icon.info{font-size:30px;width:30px;height:30px;color:gray}.boruto-ui mat-icon.info:hover{color:#000}.boruto-ui mat-icon.calendar-icon{font-size:25px;width:25px;height:25px;color:#a9a9a9}.boruto-ui mat-icon.toolicon{cursor:pointer;font-size:25px;width:25px;height:25px;color:gray}.boruto-ui mat-icon.dropdown{position:absolute;right:10px;top:4px;font-size:25px;width:25px;height:25px;color:gray;pointer-events:none}.boruto-ui div.input.labelabove mat-icon.dropdown{top:12px}.boruto-ui div.input.labelabove mat-icon.toolicon,.boruto-ui div.input.labelabove mat-icon.calendar-icon{position:relative;top:-5px}.boruto-ui select{appearance:none;-webkit-appearance:none;-moz-appearance:none}.boruto-ui button.optionsetbutton{width:100%;height:29px;border:none;box-sizing:border-box;background-color:transparent;text-align:left;padding-left:15px}.boruto-ui button.optionsetbutton.grayed{color:gray}.boruto-ui div.multi-select{padding-left:15px;font-size:small;display:flex;flex-direction:row;flex-wrap:wrap;min-height:27px}.boruto-ui div.multi-select div.multi-select-item{line-height:1.2;margin-right:2px;margin-top:5px;white-space:nowrap}.boruto-ui div.multi-select div.multi-select-item.over{padding:4px;margin-right:4px;background-color:#d8d8d8;cursor:pointer}.boruto-ui div.multi-select div.multi-select-item button{margin:0;padding:0;border:none;background-color:transparent;height:100%;cursor:pointer}.boruto-ui div.multi-select-input{position:relative;height:6px}.boruto-ui div.multi-select-input input{position:absolute;opacity:0;width:calc(100% + 30px);height:11px;padding:0;border: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.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: XrmuiIcon, selector: "xrmui-icon", inputs: ["icon", "fontClass", "inlineStyle", "disabled", "type", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: XrmuiInput, decorators: [{
             type: Component,
-            args: [{ selector: 'xrmui-input', changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, imports: [FormsModule, NgClass, MatIcon, TextFieldModule, MatDatepickerModule, MatCheckboxModule, XrmuiIcon, NgTemplateOutlet], template: "<div class=\"boruto-ui\">\r\n@if (label() != '' && label().length > 0 && shortLabel() != 'above') {\r\n<div class=\"label\" [ngClass]=\"{ short: shortLabel() == true }\" (click)=\"focusMe($event)\">{{ label() }}</div>\r\n}\r\n@if ((label() != '' || type() == 'number') && showlock()) {\r\n<div class=\"locked\">\r\n    @if (required() && shortLabel() != 'above') {\r\n    <div style=\"display: inline-block;height: 10px;color: red; position:  relative; top: -8px; right: 0\">*</div>\r\n    }\r\n    @if (disabled()) {\r\n    <mat-icon fontSet=\"material-symbols-outlined\">lock</mat-icon>\r\n    }\r\n</div>\r\n}\r\n<div class=\"input\" \r\n    [ngClass]=\"{ focus: hasfocus(), multi: ismultible(), error: error(), textarea: numberoflines() > 1, labelabove: shortLabel() == 'above', toolicon: toolIcon()?.length ?? 0 > 0 }\" \r\n    (mouseover)=\"isover.set(true)\"\r\n    (mouseleave)=\"isover.set(false)\"\r\n    (click)=\"focusMe($event, true)\">\r\n    @if (shortLabel() == 'above' && label() != '') {\r\n        <div class=\"label-above\">\r\n            {{ label() }}\r\n            @if (required()) {<span style=\"color: red\">&nbsp;*</span>}\r\n        </div>\r\n    }\r\n    @if (numberoflines() == 1 && validate() != 'date' && validate() != 'checkbox' && !isselect()) {\r\n    <input\r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        #inputfield \r\n        autocomplete=\"off\"\r\n        [ngClass]=\"inputclasses()\"\r\n        [type]=\"type() != 'password'? 'text' : 'password'\"\r\n        [disabled]=\"disabled()\" \r\n        [placeholder]=\"placeholder()\" \r\n        [(ngModel)]=\"shadowValue\" \r\n        (ngModelChange)=\"onValueChanged()\" \r\n        (focus)=\"onFocus()\" \r\n        (blur)=\"onBlur()\"\r\n        (keydown.arrowdown)=\"ondown($event)\"\r\n        (keydown.arrowup)=\"onup($event)\"\r\n        (keydown.enter)=\"onenter($event)\"\r\n        (keydown.esc)=\"onesc($event)\"\r\n        (keydown)=\"onkeydown($event)\"\r\n        [maxlength]=\"maxlength()\"/>\r\n    }\r\n    @if (validate() == 'checkbox') {\r\n        <div class=\"checkbox\">\r\n        <input\r\n            [id]=\"inputid()\"\r\n            [name]=\"name()\"\r\n            type=\"checkbox\"\r\n            class=\"text checkbox\"\r\n            [(ngModel)]=\"shadowBool\"\r\n            [disabled]=\"disabled()\"\r\n            (ngModelChange)=\"onCheckboxToggle()\" \r\n            (focus)=\"onFocus()\" \r\n            (blur)=\"onBlurCheckbox()\"\r\n         />\r\n         </div>\r\n    }\r\n    @if (numberoflines() == 1 && validate() == 'date' && !isselect()) {\r\n        <input\r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        #datefield\r\n        class=\"text datepicker\"\r\n         [matDatepicker]=\"picker\"\r\n         [value]=\"shadowDate()\"\r\n         (dateChange)=\"pickDate($event)\"\r\n         [disabled]=\"disabled()\" \r\n         [placeholder]=\"placeholder()\" \r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlurDate()\"/>\r\n        @if (!disabled()) {\r\n        <mat-icon \r\n            class=\"calendar-icon\" \r\n            fontSet=\"material-symbols-outlined\"\r\n            (click)=\"picker.open()\">calendar_month</mat-icon>\r\n        }\r\n        <mat-datepicker #picker></mat-datepicker>\r\n    }\r\n    @if (numberoflines() > 1 && !isselect()) {\r\n        <textarea\r\n            [id]=\"inputid()\"\r\n            [name]=\"name()\"\r\n            #textareafield\r\n            [maxlength]=\"maxlength()\"\r\n            [rows]=\"numberoflines()\"\r\n            [disabled]=\"disabled()\" \r\n            [placeholder]=\"placeholder()\" \r\n            [(ngModel)]=\"shadowValue\" \r\n            [ngClass]=\"{ noresize: !resizeable() }\"\r\n            (ngModelChange)=\"onValueChanged()\" \r\n            (focus)=\"onFocus()\" \r\n            (blur)=\"onBlur()\"></textarea>\r\n    }\r\n    @let options = selectable();\r\n    @if (options && options.length > 0 && !ismultible()) {\r\n        <button \r\n        #inputfield \r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        (click)=\"openSelect()\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\"\r\n        [disabled]=\"disabled()\"\r\n        class=\"optionsetbutton\"\r\n        [ngClass]=\"{ grayed: selected() === undefined }\"\r\n        (keydown.arrowdown)=\"ondown($event)\"\r\n        (keydown.arrowup)=\"onup($event)\"\r\n        (keydown.enter)=\"onenter($event)\"\r\n        (keydown.esc)=\"onesc($event)\"\r\n        (keydown)=\"onkeydown($event)\">\r\n        <div class=\"bo-grid-rows\">\r\n            <div class=\"bo-row\">\r\n                <div class=bo-grid-columns>\r\n                    <div class=\"bo-column\">{{ selected()?.name ?? setdefaultitem.name }}</div>\r\n                    <div class=\"bo-column bo-fixed\" style=\"--bo-fixed-size: 25  px; margin-top: -10px;position: relative;\">\r\n                        <xrmui-icon icon=\"keyboard_arrow_down\" type=\"font\" style=\"color: black\"></xrmui-icon>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        </button>\r\n    }\r\n    @if (options && options.length > 0 && ismultible()) {\r\n        <div class=\"multi-select\">\r\n        @let optionsselected = multiselected()!;\r\n        @for (ms of optionsselected; track ms.id; let ix = $index) {\r\n            <div class=\"multi-select-item\" [ngClass]=\"{ over: isover() && !showitems() }\">@if(ix>0 && (!isover() || showitems())) {, }\r\n                <button tabindex=\"-1\" (click)=\"removeMultiSelected($event, ms)\">\r\n                @if (ms.icon && ms.icon.length > 0) {\r\n                    <span class=\"material-symbols-outlined\" style=\"font-size: small; position: relative; top: 3px\">{{ ms.icon }}</span>\r\n                }\r\n                 {{ ms.name }}\r\n                @if (isover() && !showitems()) {\r\n                    <span class=\"material-symbols-outlined\" style=\"font-size: small; position: relative; top: 3px\">close_small</span>\r\n                }\r\n                </button>\r\n            </div>\r\n        }\r\n        </div>\r\n        <div style=\"height: 2px\" class=\"multi-select-input\">\r\n            <input \r\n                #inputfield \r\n                readonly\r\n                [id]=\"inputid()\"\r\n                [name]=\"name()\"\r\n                (click)=\"openSelect()\"\r\n                (focus)=\"onFocus()\"\r\n                (blur)=\"onBlur()\"\r\n                [disabled]=\"disabled()\"\r\n                (keydown.arrowdown)=\"ondown($event)\"\r\n                (keydown.arrowup)=\"onup($event)\"\r\n                (keydown.enter)=\"onenter($event)\"\r\n                (keydown.esc)=\"onesc($event)\"\r\n                (keydown.backspace)=\"onbackspace($event)\"\r\n                (keydown)=\"onkeydown($event)\"\r\n                />\r\n        </div>\r\n    }\r\n    @let ti = toolIcon();\r\n    @if (!disabled() && ti && ti.length > 0) {\r\n        <mat-icon class=\"toolicon\" fontSet=\"material-symbols-outlined\" (click)=\"toolClicked($event)\">{{ ti }}</mat-icon>\r\n    }\r\n</div>\r\n\r\n@if (label() == '' && type() != 'number' && showlock()) {\r\n    <div class=\"locked\" style=\"text-align: left;\">\r\n        @if (disabled()) {\r\n            <mat-icon fontSet=\"material-symbols-outlined\">lock</mat-icon>\r\n        }\r\n    </div>\r\n}\r\n\r\n@if (info()) {<div class=\"info\" [title]=\"info()\"><mat-icon class=\"info\">info</mat-icon></div>}\r\n</div>\r\n\r\n<ng-template #suggestionsTemplate>\r\n    <div class=\"boruto-ui\">\r\n        <div class=\"autocomplete\" [ngClass]=\"{ nolabel: (!label() || label().length == 0 || shortLabel() == 'above'), shortLabel: shortLabel() == true, notdark: notdark() }\">\r\n            @if (itemlist().length == 0) {\r\n            <div class=\"element\"><div class=\"item\">Ingen fundet</div></div>\r\n            }\r\n            @for (elm of itemlist(); track elm) {\r\n            <div #option class=\"element\" [ngClass]=\"{ current: current == elm, selectable: !elm.disabled }\" (click)=\"select($event, elm)\">\r\n                @if (elm.icon && elm.icon.length > 0) {\r\n                    <div class=\"icon\" style=\"min-width: 28px;\">\r\n                        <xrmui-icon type=\"font\" [icon]=\"elm.icon\"></xrmui-icon>\r\n                    </div>\r\n                }\r\n                <div class=\"item\">\r\n                    @if (itemTemplate(); as template) {\r\n                        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: elm }\"></ng-container>\r\n                    } @else {\r\n                        @if (elm == selectall) {\r\n                            @if (allIsSelected()) {\r\n                                Remove all\r\n                            } @else {\r\n                                Select all\r\n                            }\r\n                        } @else {\r\n                            {{ elm.name }}\r\n                        }\r\n                    }\r\n                </div>\r\n                @if (isselectable() && !multiselected()) {\r\n                    <div class=\"icon\" style=\"min-width: 24px;\">\r\n                        @if (current == elm && elm != setdefaultitem) {\r\n                            <xrmui-icon type=\"font\" icon=\"check\" inlineStyle=\"font-size: small\"></xrmui-icon>\r\n                        }\r\n                    </div>\r\n                }\r\n                @if (isselectable() && multiselected() && elm != selectall) {\r\n                    <div class=\"icon\" style=\"min-width: 24px;\">\r\n                        @if (isSelected(elm)) {\r\n                            <xrmui-icon type=\"font\" icon=\"check_box\"></xrmui-icon>\r\n                        }\r\n                        @if (!isSelected(elm)) {\r\n                            <xrmui-icon type=\"font\" icon=\"check_box_outline_blank\"></xrmui-icon>\r\n                        }\r\n                    </div>\r\n                }\r\n                @if (elm.expandable == true) {\r\n                <div class=\"icon expand\" (click)=\"expand($event, elm)\">\r\n                    <xrmui-icon icon=\"arrow_drop_down\" size=\"24\"></xrmui-icon>\r\n                </div>\r\n                }\r\n                @if (elm.completeOnly == true) {\r\n                <div class=\"icon complete\" (click)=\"complete($event, elm)\">\r\n                    <xrmui-icon icon=\"search\" size=\"24\"></xrmui-icon>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".boruto-ui{display:flex;margin-bottom:10px}.boruto-ui div.autocomplete{display:block;box-sizing:border-box;background-color:#fff;color:#000;border:solid;border-width:1px 1px 1px 1px;border-color:#d3d3d3;border-radius:4px;padding:5px;max-height:200px;overflow-x:hidden;overflow-y:auto}.boruto-ui div.autocomplete.nolabel{left:0}.boruto-ui div.autocomplete.shortLabel{left:124px}.boruto-ui div.autocomplete div.element.selectable{cursor:pointer}.boruto-ui div.autocomplete div.element{margin:5px;padding:5px;display:flex;border:solid;border-width:0 0 1px 0;border-color:#d3d3d3;font-size:14px;color:gray}.boruto-ui div.autocomplete div.element.current{border-color:#0f6cbd;color:#000}.boruto-ui div.autocomplete div.element div.item{display:flex;flex-grow:1;align-items:center}.boruto-ui div.label{width:180px;min-width:180px;max-height:180px;height:32px;line-height:32px}.boruto-ui div.label.short{width:90px;min-width:90px}.boruto-ui div.locked{width:30px;min-width:30px;max-width:30px;height:32px;line-height:32px;text-align:right;padding-right:3px}.boruto-ui div.input{flex-grow:1;height:32px;line-height:32px;background-color:#f5f5f5;border-radius:3px;margin:0;padding:0;border:solid;border-width:0 0 3px 0;border-color:transparent}.boruto-ui div.input.multi{height:auto;min-height:32px;line-height:normal}.boruto-ui div.input.labelabove{height:48px}.boruto-ui div.input.labelabove.multi{height:auto;min-height:48px;line-height:normal}.boruto-ui div.input.labelabove div.label-above{font-size:12px;line-height:12px;width:100%;padding-left:15px;padding-top:5px;color:gray}.boruto-ui div.input.focus.labelabove div.label-above{color:#0f6cbd}.boruto-ui div.input.textarea{height:inherit}.boruto-ui div.info{width:30px}.boruto-ui div textarea{background-color:#f5f5f5;border-radius:3px;margin:0;padding:10px 15px;border:solid;border-width:0 0 3px 0;border-color:transparent;width:100%;box-sizing:border-box}.boruto-ui div.input.focus,.boruto-ui div.textarea.focus,.boruto-ui div.select.focus{border-color:#0f6cbd}.boruto-ui div.input.error,.boruto-ui div.input.focus.error,.boruto-ui div.select.focus.error{border-color:red;color:red}.boruto-ui input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:100%;box-sizing:border-box}.boruto-ui input.number{text-align:right}.boruto-ui select{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:calc(100% - 10px);box-sizing:border-box}.boruto-ui input.datepicker{width:calc(100% - 35px)}.boruto-ui div.input>div.checkbox{margin-left:15px;margin-top:5px}.boruto-ui div.input.above>div.checkbox{margin-top:2px}.boruto-ui input.checkbox{width:15px;height:15px}.boruto-ui div.input.toolicon input{width:calc(100% - 35px)}@media(prefers-color-scheme:dark){.boruto-ui input{color:#000}.boruto-ui input:disabled{color:#5f615f}}.boruto-ui input.number{text-align:right;padding-right:15px;padding-left:0}.boruto-ui *:focus{outline:none}.boruto-ui mat-icon{color:#d3d3d3;font-size:12px;position:relative;top:5px;width:12px}.boruto-ui .complete mat-icon,.boruto-ui .expand mat-icon{width:24px}.boruto-ui textarea.noresize{resize:none}.boruto-ui mat-icon.info{font-size:30px;width:30px;height:30px;color:gray}.boruto-ui mat-icon.info:hover{color:#000}.boruto-ui mat-icon.calendar-icon{font-size:25px;width:25px;height:25px;color:#a9a9a9}.boruto-ui mat-icon.toolicon{cursor:pointer;font-size:25px;width:25px;height:25px;color:gray}.boruto-ui mat-icon.dropdown{position:absolute;right:10px;top:4px;font-size:25px;width:25px;height:25px;color:gray;pointer-events:none}.boruto-ui div.input.labelabove mat-icon.dropdown{top:12px}.boruto-ui div.input.labelabove mat-icon.toolicon,.boruto-ui div.input.labelabove mat-icon.calendar-icon{position:relative;top:-5px}.boruto-ui select{appearance:none;-webkit-appearance:none;-moz-appearance:none}.boruto-ui button.optionsetbutton{width:100%;height:29px;border:none;box-sizing:border-box;background-color:transparent;text-align:left;padding-left:15px}.boruto-ui button.optionsetbutton.grayed{color:gray}.boruto-ui div.multi-select{padding-left:15px;font-size:small;display:flex;flex-direction:row;flex-wrap:wrap;min-height:27px}.boruto-ui div.multi-select div.multi-select-item{line-height:1.2;margin-right:2px;margin-top:5px;white-space:nowrap}.boruto-ui div.multi-select div.multi-select-item.over{padding:4px;margin-right:4px;background-color:#d8d8d8;cursor:pointer}.boruto-ui div.multi-select div.multi-select-item button{margin:0;padding:0;border:none;background-color:transparent;height:100%;cursor:pointer}.boruto-ui div.multi-select-input{position:relative;height:6px}.boruto-ui div.multi-select-input input{position:absolute;opacity:0;width:100%;height:11px;padding:0;border:0}\n"] }]
+            args: [{ selector: 'xrmui-input', changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, imports: [FormsModule, NgClass, MatIcon, TextFieldModule, MatDatepickerModule, MatCheckboxModule, XrmuiIcon, NgTemplateOutlet], template: "<div class=\"boruto-ui\">\r\n@if (label() != '' && label().length > 0 && shortLabel() != 'above') {\r\n<div class=\"label\" [ngClass]=\"{ short: shortLabel() == true }\" (click)=\"focusMe($event)\">{{ label() }}</div>\r\n}\r\n@if ((label() != '' || type() == 'number') && showlock()) {\r\n<div class=\"locked\">\r\n    @if (required() && shortLabel() != 'above') {\r\n    <div style=\"display: inline-block;height: 10px;color: red; position:  relative; top: -8px; right: 0\">*</div>\r\n    }\r\n    @if (disabled()) {\r\n    <mat-icon fontSet=\"material-symbols-outlined\">lock</mat-icon>\r\n    }\r\n</div>\r\n}\r\n<div class=\"input\" \r\n    [ngClass]=\"{ focus: hasfocus(), multi: ismultible(), error: error(), textarea: numberoflines() > 1, labelabove: shortLabel() == 'above', toolicon: toolIcon()?.length ?? 0 > 0 }\" \r\n    (mouseover)=\"isover.set(true)\"\r\n    (mouseleave)=\"isover.set(false)\"\r\n    (click)=\"focusMe($event, true)\">\r\n    @if (shortLabel() == 'above' && label() != '') {\r\n        <div class=\"label-above\">\r\n            {{ label() }}\r\n            @if (required()) {<span style=\"color: red\">&nbsp;*</span>}\r\n        </div>\r\n    }\r\n    @if (numberoflines() == 1 && validate() != 'date' && validate() != 'checkbox' && !isselect()) {\r\n    <input\r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        #inputfield \r\n        autocomplete=\"off\"\r\n        [ngClass]=\"inputclasses()\"\r\n        [type]=\"type() != 'password'? 'text' : 'password'\"\r\n        [disabled]=\"disabled()\" \r\n        [placeholder]=\"placeholder()\" \r\n        [(ngModel)]=\"shadowValue\" \r\n        (ngModelChange)=\"onValueChanged()\" \r\n        (focus)=\"onFocus()\" \r\n        (blur)=\"onBlur()\"\r\n        (keydown.arrowdown)=\"ondown($event)\"\r\n        (keydown.arrowup)=\"onup($event)\"\r\n        (keydown.enter)=\"onenter($event)\"\r\n        (keydown.esc)=\"onesc($event)\"\r\n        (keydown)=\"onkeydown($event)\"\r\n        [maxlength]=\"maxlength()\"/>\r\n    }\r\n    @if (validate() == 'checkbox') {\r\n        <div class=\"checkbox\">\r\n        <input\r\n            [id]=\"inputid()\"\r\n            [name]=\"name()\"\r\n            type=\"checkbox\"\r\n            class=\"text checkbox\"\r\n            [(ngModel)]=\"shadowBool\"\r\n            [disabled]=\"disabled()\"\r\n            (ngModelChange)=\"onCheckboxToggle()\" \r\n            (focus)=\"onFocus()\" \r\n            (blur)=\"onBlurCheckbox()\"\r\n         />\r\n         </div>\r\n    }\r\n    @if (numberoflines() == 1 && validate() == 'date' && !isselect()) {\r\n        <input\r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        #datefield\r\n        class=\"text datepicker\"\r\n         [matDatepicker]=\"picker\"\r\n         [value]=\"shadowDate()\"\r\n         (dateChange)=\"pickDate($event)\"\r\n         [disabled]=\"disabled()\" \r\n         [placeholder]=\"placeholder()\" \r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlurDate()\"/>\r\n        @if (!disabled()) {\r\n        <mat-icon \r\n            class=\"calendar-icon\" \r\n            fontSet=\"material-symbols-outlined\"\r\n            (click)=\"picker.open()\">calendar_month</mat-icon>\r\n        }\r\n        <mat-datepicker #picker></mat-datepicker>\r\n    }\r\n    @if (numberoflines() > 1 && !isselect()) {\r\n        <textarea\r\n            [id]=\"inputid()\"\r\n            [name]=\"name()\"\r\n            #textareafield\r\n            [maxlength]=\"maxlength()\"\r\n            [rows]=\"numberoflines()\"\r\n            [disabled]=\"disabled()\" \r\n            [placeholder]=\"placeholder()\" \r\n            [(ngModel)]=\"shadowValue\" \r\n            [ngClass]=\"{ noresize: !resizeable() }\"\r\n            (ngModelChange)=\"onValueChanged()\" \r\n            (focus)=\"onFocus()\" \r\n            (blur)=\"onBlur()\"></textarea>\r\n    }\r\n    @let options = selectable();\r\n    @if (options && options.length > 0 && !ismultible()) {\r\n        <button \r\n        #inputfield \r\n        [id]=\"inputid()\"\r\n        [name]=\"name()\"\r\n        (click)=\"openSelect()\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\"\r\n        [disabled]=\"disabled()\"\r\n        class=\"optionsetbutton\"\r\n        [ngClass]=\"{ grayed: selected() === undefined }\"\r\n        (keydown.arrowdown)=\"ondown($event)\"\r\n        (keydown.arrowup)=\"onup($event)\"\r\n        (keydown.enter)=\"onenter($event)\"\r\n        (keydown.esc)=\"onesc($event)\"\r\n        (keydown)=\"onkeydown($event)\">\r\n        <div class=\"bo-grid-rows\">\r\n            <div class=\"bo-row\">\r\n                <div class=bo-grid-columns>\r\n                    <div class=\"bo-column\">{{ selected()?.name ?? setdefaultitem.name }}</div>\r\n                    @if (!disabled()) {\r\n                        <div class=\"bo-column bo-fixed\" style=\"--bo-fixed-size: 25  px; margin-top: -2px;position: relative;\">\r\n                            <xrmui-icon icon=\"keyboard_arrow_down\" type=\"font\" style=\"color: black\"></xrmui-icon>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        </button>\r\n    }\r\n    @if (options && options.length > 0 && ismultible()) {\r\n        <div style=\"display: flex; flex-direction: row;\">\r\n        <div style=\"flex-grow: 1;\">\r\n            <div class=\"multi-select\">\r\n                @let optionsselected = multiselected()!;\r\n                @for (ms of optionsselected; track ms.id; let ix = $index) {\r\n                    <div class=\"multi-select-item\" [ngClass]=\"{ over: isover() && !showitems() }\">@if(ix>0 && (!isover() || showitems())) {, }\r\n                        <button tabindex=\"-1\" (click)=\"removeMultiSelected($event, ms)\">\r\n                        @if (ms.icon && ms.icon.length > 0) {\r\n                            <span class=\"material-symbols-outlined\" style=\"font-size: small; position: relative; top: 3px\">{{ ms.icon }}</span>\r\n                        }\r\n                        {{ ms.name }}\r\n                        @if (isover() && !showitems() && !disabled()) {\r\n                            <span class=\"material-symbols-outlined\" style=\"font-size: small; position: relative; top: 3px\">close_small</span>\r\n                        }\r\n                        </button>\r\n                    </div>\r\n                }\r\n            </div>\r\n            <div style=\"height: 2px\" class=\"multi-select-input\">\r\n                <input \r\n                    #inputfield \r\n                    readonly\r\n                    [id]=\"inputid()\"\r\n                    [name]=\"name()\"\r\n                    (click)=\"openSelect()\"\r\n                    (focus)=\"onFocus()\"\r\n                    (blur)=\"onBlur()\"\r\n                    [disabled]=\"disabled()\"\r\n                    (keydown.arrowdown)=\"ondown($event)\"\r\n                    (keydown.arrowup)=\"onup($event)\"\r\n                    (keydown.enter)=\"onenter($event)\"\r\n                    (keydown.esc)=\"onesc($event)\"\r\n                    (keydown.backspace)=\"onbackspace($event)\"\r\n                    (keydown)=\"onkeydown($event)\"\r\n                    />\r\n            </div>\r\n        </div>\r\n        @if (!disabled()) {\r\n            <div style=\"max-width: 25px; max-width: 25px; width: 25px; margin-right: 5px;margin-top: 5px; cursor: pointer;\">\r\n                <xrmui-icon icon=\"keyboard_arrow_down\" type=\"font\" style=\"color: black\"></xrmui-icon>\r\n            </div>\r\n        }\r\n        </div>\r\n    }\r\n    @let ti = toolIcon();\r\n    @if (!disabled() && ti && ti.length > 0) {\r\n        <mat-icon class=\"toolicon\" fontSet=\"material-symbols-outlined\" (click)=\"toolClicked($event)\">{{ ti }}</mat-icon>\r\n    }\r\n</div>\r\n\r\n@if (label() == '' && type() != 'number' && showlock()) {\r\n    <div class=\"locked\" style=\"text-align: left;\">\r\n        @if (disabled()) {\r\n            <mat-icon fontSet=\"material-symbols-outlined\">lock</mat-icon>\r\n        }\r\n    </div>\r\n}\r\n\r\n@if (info()) {<div class=\"info\" [title]=\"info()\"><mat-icon class=\"info\">info</mat-icon></div>}\r\n</div>\r\n\r\n<ng-template #suggestionsTemplate>\r\n    <div class=\"boruto-ui autocomplete\">\r\n        <div class=\"autocomplete\" [ngClass]=\"{ nolabel: (!label() || label().length == 0 || shortLabel() == 'above'), shortLabel: shortLabel() == true, notdark: notdark() }\">\r\n            @if (itemlist().length == 0) {\r\n            <div class=\"element\"><div class=\"item\">Ingen fundet</div></div>\r\n            }\r\n            @for (elm of itemlist(); track elm) {\r\n            <div #option class=\"element\" [ngClass]=\"{ current: current == elm, selectable: !elm.disabled }\" (click)=\"select($event, elm)\">\r\n                @if (elm.icon && elm.icon.length > 0) {\r\n                    <div class=\"icon\" style=\"min-width: 28px;\">\r\n                        <xrmui-icon type=\"font\" [icon]=\"elm.icon\"></xrmui-icon>\r\n                    </div>\r\n                }\r\n                <div class=\"item\">\r\n                    @if (itemTemplate(); as template) {\r\n                        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: elm }\"></ng-container>\r\n                    } @else {\r\n                        @if (elm == selectall) {\r\n                            @if (allIsSelected()) {\r\n                                Remove all\r\n                            } @else {\r\n                                Select all\r\n                            }\r\n                        } @else {\r\n                            {{ elm.name }}\r\n                        }\r\n                    }\r\n                </div>\r\n                @if (isselectable() && !multiselected()) {\r\n                    <div class=\"icon\" style=\"min-width: 24px;\">\r\n                        @if (current == elm && elm != setdefaultitem) {\r\n                            <xrmui-icon type=\"font\" icon=\"check\" inlineStyle=\"font-size: small\"></xrmui-icon>\r\n                        }\r\n                    </div>\r\n                }\r\n                @if (isselectable() && multiselected() && elm != selectall) {\r\n                    <div class=\"icon\" style=\"min-width: 24px;\">\r\n                        @if (isSelected(elm)) {\r\n                            <xrmui-icon type=\"font\" icon=\"check_box\"></xrmui-icon>\r\n                        }\r\n                        @if (!isSelected(elm)) {\r\n                            <xrmui-icon type=\"font\" icon=\"check_box_outline_blank\"></xrmui-icon>\r\n                        }\r\n                    </div>\r\n                }\r\n                @if (elm.expandable == true) {\r\n                <div class=\"icon expand\" (click)=\"expand($event, elm)\">\r\n                    <xrmui-icon icon=\"arrow_drop_down\" size=\"24\"></xrmui-icon>\r\n                </div>\r\n                }\r\n                @if (elm.completeOnly == true) {\r\n                <div class=\"icon complete\" (click)=\"complete($event, elm)\">\r\n                    <xrmui-icon icon=\"search\" size=\"24\"></xrmui-icon>\r\n                </div>\r\n                }\r\n            </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".boruto-ui{display:flex;margin-bottom:10px}.boruto-ui.autocomplete{width:100%;display:flex;flex-grow:1}.boruto-ui div.autocomplete{display:block;background-color:#fff;color:#000;border:solid;border-width:1px 1px 1px 1px;border-color:#d3d3d3;border-radius:4px;padding:5px;max-height:250px;overflow-x:hidden;overflow-y:auto;width:100%;box-sizing:border-box}.boruto-ui div.autocomplete.nolabel{left:0}.boruto-ui div.autocomplete.shortLabel{left:124px}.boruto-ui div.autocomplete div.element.selectable{cursor:pointer}.boruto-ui div.autocomplete div.element{margin:5px;padding:5px;display:flex;border:solid;border-width:0 0 1px 0;border-color:#d3d3d3;font-size:14px;color:gray}.boruto-ui div.autocomplete div.element.current{border-color:#0f6cbd;color:#000}.boruto-ui div.autocomplete div.element div.item{display:flex;flex-grow:1;align-items:center}.boruto-ui div.label{width:180px;min-width:180px;max-height:180px;height:32px;line-height:32px}.boruto-ui div.label.short{width:90px;min-width:90px}.boruto-ui div.locked{width:30px;min-width:30px;max-width:30px;height:32px;line-height:32px;text-align:right;padding-right:3px}.boruto-ui div.input{flex-grow:1;height:32px;line-height:32px;background-color:#f5f5f5;border-radius:3px;margin:0;padding:0;border:solid;border-width:0 0 3px 0;border-color:transparent}.boruto-ui div.input.multi{height:auto;min-height:32px;line-height:normal}.boruto-ui div.input.labelabove{height:48px}.boruto-ui div.input.labelabove.multi{height:auto;min-height:48px;line-height:normal}.boruto-ui div.input.labelabove div.label-above{font-size:12px;line-height:12px;width:100%;padding-left:15px;padding-top:5px;color:gray}.boruto-ui div.input.focus.labelabove div.label-above{color:#0f6cbd}.boruto-ui div.input.textarea{height:inherit}.boruto-ui div.info{width:30px}.boruto-ui div textarea{background-color:#f5f5f5;border-radius:3px;margin:0;padding:10px 15px;border:solid;border-width:0 0 3px 0;border-color:transparent;width:100%;box-sizing:border-box}.boruto-ui div.input.focus,.boruto-ui div.textarea.focus,.boruto-ui div.select.focus{border-color:#0f6cbd}.boruto-ui div.input.error,.boruto-ui div.input.focus.error,.boruto-ui div.select.focus.error{border-color:red;color:red}.boruto-ui input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:100%;box-sizing:border-box}.boruto-ui input.right,.boruto-ui input.number{text-align:right}.boruto ui-input.left{text-align:left}.boruto-ui select{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:calc(100% - 10px);box-sizing:border-box}.boruto-ui input.datepicker{width:calc(100% - 35px)}.boruto-ui div.input>div.checkbox{margin-left:15px;margin-top:5px}.boruto-ui div.input.above>div.checkbox{margin-top:2px}.boruto-ui input.checkbox{width:15px;height:15px}.boruto-ui div.input.toolicon input{width:calc(100% - 35px)}@media(prefers-color-scheme:dark){.boruto-ui input{color:#000}.boruto-ui input:disabled{color:#5f615f}}.boruto-ui input.right,.boruto-ui input.number{text-align:right;padding-right:15px;padding-left:0}.boruto-ui input.left{text-align:left;padding-left:15px}.boruto-ui *:focus{outline:none}.boruto-ui mat-icon{color:#d3d3d3;font-size:12px;position:relative;top:5px;width:12px}.boruto-ui .complete mat-icon,.boruto-ui .expand mat-icon{width:24px}.boruto-ui textarea.noresize{resize:none}.boruto-ui mat-icon.info{font-size:30px;width:30px;height:30px;color:gray}.boruto-ui mat-icon.info:hover{color:#000}.boruto-ui mat-icon.calendar-icon{font-size:25px;width:25px;height:25px;color:#a9a9a9}.boruto-ui mat-icon.toolicon{cursor:pointer;font-size:25px;width:25px;height:25px;color:gray}.boruto-ui mat-icon.dropdown{position:absolute;right:10px;top:4px;font-size:25px;width:25px;height:25px;color:gray;pointer-events:none}.boruto-ui div.input.labelabove mat-icon.dropdown{top:12px}.boruto-ui div.input.labelabove mat-icon.toolicon,.boruto-ui div.input.labelabove mat-icon.calendar-icon{position:relative;top:-5px}.boruto-ui select{appearance:none;-webkit-appearance:none;-moz-appearance:none}.boruto-ui button.optionsetbutton{width:100%;height:29px;border:none;box-sizing:border-box;background-color:transparent;text-align:left;padding-left:15px}.boruto-ui button.optionsetbutton.grayed{color:gray}.boruto-ui div.multi-select{padding-left:15px;font-size:small;display:flex;flex-direction:row;flex-wrap:wrap;min-height:27px}.boruto-ui div.multi-select div.multi-select-item{line-height:1.2;margin-right:2px;margin-top:5px;white-space:nowrap}.boruto-ui div.multi-select div.multi-select-item.over{padding:4px;margin-right:4px;background-color:#d8d8d8;cursor:pointer}.boruto-ui div.multi-select div.multi-select-item button{margin:0;padding:0;border:none;background-color:transparent;height:100%;cursor:pointer}.boruto-ui div.multi-select-input{position:relative;height:6px}.boruto-ui div.multi-select-input input{position:absolute;opacity:0;width:calc(100% + 30px);height:11px;padding:0;border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchElement: [{
                 type: ViewChild,
                 args: ['inputfield']
@@ -2396,7 +2509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
             }], suggestionsTemplate: [{
                 type: ViewChild,
                 args: ['suggestionsTemplate']
-            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], _shortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "short-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _showlock: [{ type: i0.Input, args: [{ isSignal: true, alias: "showlock", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputid: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputid", required: false }] }], setfocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "setfocus", required: false }] }, { type: i0.Output, args: ["setfocusChange"] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], multiselected: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselected", required: false }] }, { type: i0.Output, args: ["multiselectedChange"] }], optionsetvalue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsetvalue", required: false }] }], entityreference: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityreference", required: false }] }], onselect: [{ type: i0.Output, args: ["onselect"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }, { type: i0.Output, args: ["validateChange"] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], onfocusEvent: [{ type: i0.Output, args: ["focus"] }], onblurEvent: [{ type: i0.Output, args: ["blur"] }], click: [{ type: i0.Output, args: ["click"] }], resizeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeable", required: false }] }], info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: false }] }], notdark: [{ type: i0.Input, args: [{ isSignal: true, alias: "notdark", required: false }] }], _autoopenonblank: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoopenonblank", required: false }] }], nullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullable", required: false }] }], release: [{ type: i0.Input, args: [{ isSignal: true, alias: "release", required: false }] }], released: [{ type: i0.Output, args: ["released"] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], decimalsUsed: [{ type: i0.Output, args: ["decimalsUsed"] }], onEnter: [{ type: i0.Output, args: ["onEnter"] }], toolIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolIcon", required: false }] }], toolClick: [{ type: i0.Output, args: ["toolClick"] }], numberoflines: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberoflines", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }] } });
+            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], _shortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "short-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _showlock: [{ type: i0.Input, args: [{ isSignal: true, alias: "showlock", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputid: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputid", required: false }] }], setfocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "setfocus", required: false }] }, { type: i0.Output, args: ["setfocusChange"] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], multiselected: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselected", required: false }] }, { type: i0.Output, args: ["multiselectedChange"] }], optionsetvalue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsetvalue", required: false }] }], multioptionsetvalue: [{ type: i0.Input, args: [{ isSignal: true, alias: "multioptionsetvalue", required: false }] }], entityreference: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityreference", required: false }] }], onselect: [{ type: i0.Output, args: ["onselect"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }, { type: i0.Output, args: ["validateChange"] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], onfocusEvent: [{ type: i0.Output, args: ["focus"] }], onblurEvent: [{ type: i0.Output, args: ["blur"] }], click: [{ type: i0.Output, args: ["click"] }], resizeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeable", required: false }] }], info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: false }] }], notdark: [{ type: i0.Input, args: [{ isSignal: true, alias: "notdark", required: false }] }], _autoopenonblank: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoopenonblank", required: false }] }], nullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullable", required: false }] }], release: [{ type: i0.Input, args: [{ isSignal: true, alias: "release", required: false }] }], released: [{ type: i0.Output, args: ["released"] }], inputalign: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputalign", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], decimalsUsed: [{ type: i0.Output, args: ["decimalsUsed"] }], onEnter: [{ type: i0.Output, args: ["onEnter"] }], toolIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolIcon", required: false }] }], toolClick: [{ type: i0.Output, args: ["toolClick"] }], numberoflines: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberoflines", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }] } });
 
 class XrmuiRibbon {
     fill = input(true, /* @ts-ignore */
@@ -2760,5 +2873,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BorutoXrmUIModule, CTRL_KEYS, ChangeScopeDirective, DECIMALS, DKCustomDateAdapter, FormScopeDirective, KiponUiModule, KoAlertComponent, KoButtonGroupComponent, KoDecimalDirective, KoDivider, KoExpansionPanelComponent, KoFocusDirective, KoHeaderComponent, KoHorizontalScrollComponent, KoHorizontalSplitComponent, KoLeftMenuComponent, KoMainComponent, KoNavigationByCssClass, KoNavigationByImageUrl, KoOverDirective, KoTablePanelComponent, KoTitlePanelComponent, KoTopMenuComponent, KoVerticalScrollComponent, KoVerticalSplitComponent, KoViewComponent, KoWriteDirective, NAVIGATIONKEYS, NUMBERS, XrmuiButton, XrmuiDevider, XrmuiIcon, XrmuiInfo, XrmuiInput, XrmuiLayout, XrmuiPanel, XrmuiRibbon, XrmuiSection, XrmuiSpinner, XrmuiTabs, enumToSelectable, nFormater, selectableToEnum, selectablesFromEnum };
+export { BorutoXrmUIModule, CTRL_KEYS, ChangeScopeDirective, DECIMALS, DKCustomDateAdapter, FormScopeDirective, KiponUiModule, KoAlertComponent, KoButtonGroupComponent, KoDecimalDirective, KoDivider, KoExpansionPanelComponent, KoFocusDirective, KoHeaderComponent, KoHorizontalScrollComponent, KoHorizontalSplitComponent, KoLeftMenuComponent, KoMainComponent, KoNavigationByCssClass, KoNavigationByImageUrl, KoOverDirective, KoTablePanelComponent, KoTitlePanelComponent, KoTopMenuComponent, KoVerticalScrollComponent, KoVerticalSplitComponent, KoViewComponent, KoWriteDirective, NAVIGATIONKEYS, NUMBERS, XrmuiButton, XrmuiDevider, XrmuiIcon, XrmuiInfo, XrmuiInput, XrmuiLayout, XrmuiPanel, XrmuiRibbon, XrmuiSection, XrmuiSpinner, XrmuiTabs, createOptionSetValue, enumToSelectable, nFormater, selectableToEnum, selectablesFromEnum };
 //# sourceMappingURL=boruto-xrmui.mjs.map