boruto-xrmui 1.22.24 → 1.22.25

package/fesm2022/boruto-xrmui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, ChangeDetectionStrategy, Component, effect, input, output, HostListener, Directive, inject, ElementRef, Input, signal, ChangeDetectorRef, ViewChild, NgModule, Injectable, computed, ViewContainerRef, DestroyRef, model, ViewChildren, EventEmitter, Output } from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, effect, input, output, HostListener, Directive, inject, ElementRef, Input, signal, ChangeDetectorRef, ViewChild, NgModule, Injectable, computed, ViewContainerRef, DestroyRef, model, untracked, ViewChildren, EventEmitter, Output } from '@angular/core';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import { NativeDateAdapter } from '@angular/material/core';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
@@ -14,10 +14,10 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
 import * as i1$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i1$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatButtonModule } from '@angular/material/button';
 
 class KoButtonGroupComponent {
@@ -1521,6 +1521,18 @@ const NAVIGATIONKEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Esca
 const NUMBERS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 const DECIMALS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ','];
 const CTRL_KEYS = ['c', 'C', 'v', 'V', 'x', 'X'];
+const bo_counter = {
+    lastName: 0,
+    lastId: 0
+};
+const bo_nextName = function () {
+    bo_counter.lastName++;
+    return `bo_name_${bo_counter.lastName}`;
+};
+const bo_nextId = function () {
+    bo_counter.lastId++;
+    return `bo_id_${bo_counter.lastId}`;
+};
 class XrmuiInput {
     searchElement;
     textareaElement;
@@ -1534,6 +1546,14 @@ class XrmuiInput {
     formScope = inject(FormScopeDirective, { optional: true, host: true });
     destroyRef = inject(DestroyRef);
     blurThead;
+    setdefaultitem = {
+        id: "-999999",
+        name: "--select--"
+    };
+    selectall = {
+        id: "-999999",
+        name: "Select all"
+    };
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     _shortLabel = input(undefined, { ...(ngDevMode ? { debugName: "_shortLabel" } : /* istanbul ignore next */ {}), alias: 'short-label' });
@@ -1582,6 +1602,10 @@ class XrmuiInput {
     ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     type = input('text', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    name = input(bo_nextName(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    inputid = input(bo_nextId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputid" }] : /* istanbul ignore next */ []));
     setfocus = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "setfocus" }] : /* istanbul ignore next */ []));
     autocomplete = input(null, /* @ts-ignore */
@@ -1590,6 +1614,8 @@ class XrmuiInput {
     ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
     selected = model(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    multiselected = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiselected" }] : /* istanbul ignore next */ []));
     optionsetvalue = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "optionsetvalue" }] : /* istanbul ignore next */ []));
     entityreference = input(null, /* @ts-ignore */
@@ -1616,6 +1642,12 @@ class XrmuiInput {
     release = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "release" }] : /* istanbul ignore next */ []));
     released = output();
+    isautocomplete = computed(() => this.autocomplete() != null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isautocomplete" }] : /* istanbul ignore next */ []));
+    isselectable = computed(() => !this.isautocomplete() && this.selectable() != null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isselectable" }] : /* istanbul ignore next */ []));
+    ismultible = computed(() => this.multiselected() != undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ismultible" }] : /* istanbul ignore next */ []));
     autoopenonblank = computed(() => {
         const au = this._autoopenonblank();
         if (au != undefined) {
@@ -1672,6 +1704,8 @@ class XrmuiInput {
         return this.type() + ' ' + 'number';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputclasses" }] : /* istanbul ignore next */ []));
+    isover = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isover" }] : /* istanbul ignore next */ []));
     constructor() {
         this.destroyRef.onDestroy(() => {
             if (this.blurThead) {
@@ -1719,12 +1753,6 @@ class XrmuiInput {
             }
             this.shadowValue.set(value.toString());
         });
-        effect(() => {
-            const sel = this.selected();
-            if (sel) {
-                this.shadowValue.set(sel.name ?? '');
-            }
-        });
         effect(() => {
             const osv = this.optionsetvalue();
             const sels = this.selectable();
@@ -1757,17 +1785,47 @@ class XrmuiInput {
                 this.bindItems(next);
             }
         });
+        effect(() => {
+            const _sels = this.selectable();
+            const isnullable = untracked(() => this.nullable());
+            const multi = untracked(() => this.ismultible());
+            if (_sels && _sels.length > 0) {
+                const sels = [..._sels];
+                if (this.nullable() && !multi && sels[0] != this.setdefaultitem) {
+                    sels.unshift(this.setdefaultitem);
+                }
+                if (multi && sels[0] != this.selectall) {
+                    sels.unshift(this.selectall);
+                }
+                this.bindItems(sels);
+                const sel = this.selected();
+                if (sel) {
+                    this.shadowValue.set(sel.name ?? '');
+                    this.current = sel;
+                    const ci = sels.findIndex(s => s.id == sel.id);
+                    if (ci >= 0) {
+                        this.currentindex.set(ci);
+                    }
+                }
+                else {
+                    this.shadowValue.set(this.setdefaultitem.name ?? '');
+                    this.currentindex.set(-1);
+                }
+            }
+        });
         effect(() => {
             const si = this.showitems();
             if (si) {
-                this.showSuggestions();
+                this.showAutocompleteSuggestions();
             }
             else {
-                this.hideSuggestions();
+                this.hideAutocompleteSuggestions();
             }
         });
     }
     lastBind = [];
+    allIsSelected = computed(() => this.ismultible() && this.selectable()?.length == this.multiselected()?.length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allIsSelected" }] : /* istanbul ignore next */ []));
     bindItems(values) {
         const same = values.length === this.lastBind.length &&
             values.every(v => this.lastBind.includes(v));
@@ -1833,6 +1891,12 @@ class XrmuiInput {
             }
         }
     }
+    autoRefocus() {
+        if (this.blurThead) {
+            clearTimeout(this.blurThead);
+        }
+        this.focusMe(undefined, false);
+    }
     onBlur() {
         this.handleNumber();
         this.blurThead = setTimeout(() => {
@@ -1877,12 +1941,6 @@ class XrmuiInput {
             this.onblurEvent.emit();
         }, 200);
     }
-    onBlurSelect() {
-        setTimeout(() => {
-            this.hasfocus.set(false);
-            this.onblurEvent.emit();
-        }, 200);
-    }
     ondown(e) {
         e.stopPropagation();
         e.preventDefault();
@@ -1893,6 +1951,9 @@ class XrmuiInput {
         e.preventDefault();
         this.next(-1);
     }
+    openSelect() {
+        this.showitems.set(true);
+    }
     onenter(e) {
         e.stopPropagation();
         e.preventDefault();
@@ -1904,7 +1965,21 @@ class XrmuiInput {
             this.complete(e, this.current);
             return;
         }
-        this.onEnter.emit();
+        if (this.isselectable()) {
+            const showitemisopen = untracked(() => this.showitems());
+            if (!showitemisopen) {
+                this.openSelect();
+                return;
+            }
+            if (this.current != null) {
+                this.SetSelectedItem(this.current);
+            }
+            if (!this.ismultible()) {
+                this.showitems.set(false);
+            }
+            this.onEnter.emit();
+            return;
+        }
         if (this.showitems() == false) {
             this.searchbyname();
             return;
@@ -1924,6 +1999,18 @@ class XrmuiInput {
     onesc(e) {
         this.showitems.set(false);
     }
+    onbackspace(e) {
+        const ms = untracked(() => this.multiselected());
+        if (ms && ms.length > 0) {
+            this.multiselected.set(ms.slice(0, -1));
+            this.notifyOnChange();
+            setTimeout(() => {
+                if (this.overlayRef) {
+                    this.overlayRef.updatePosition();
+                }
+            }, 100);
+        }
+    }
     onClick() {
         this.click.emit();
     }
@@ -1952,32 +2039,13 @@ class XrmuiInput {
             }
         }
     }
-    setchoice(v) {
-        const sel = this.selectable();
-        if (sel && sel.length > 0) {
-            const value = v.target.value;
-            const next = sel.find(r => r.id == value);
-            if (next) {
-                const osv = this.optionsetvalue();
-                if (osv) {
-                    osv.set(Number(next.id), next.name);
-                }
-                this.selected.set(next);
-                this.notifyOnChange();
-            }
-        }
-    }
-    setMenuChoice(v) {
-        const osv = this.optionsetvalue();
-        if (osv) {
-            osv.set(Number(v.id), v.name);
-        }
-        this.selected.set(v);
-        this.notifyOnChange();
-    }
     select(e, v) {
         e.stopImmediatePropagation();
         e.stopPropagation();
+        if (this.isselectable()) {
+            this.SetSelectedItem(v);
+            return;
+        }
         if (v.expandable == true && !this.isexpanded(v)) {
             this.expanding = true;
             this.expand(e, v);
@@ -1997,7 +2065,80 @@ class XrmuiInput {
         this.onselect.emit(v);
         this.notifyOnChange();
     }
+    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([]);
+                    }
+                    else {
+                        this.multiselected.set([...this.selectable()]);
+                    }
+                    this.notifyOnChange();
+                    this.autoRefocus();
+                    setTimeout(() => {
+                        if (this.overlayRef) {
+                            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;
+        }
+        else {
+            const os = this.optionsetvalue();
+            if (v == undefined || v == this.setdefaultitem) {
+                this.selected.set(undefined);
+                if (os) {
+                    os.set(undefined, undefined);
+                }
+                this.shadowValue.set(this.setdefaultitem.name ?? '');
+            }
+            else {
+                this.selected.set(v);
+                if (os) {
+                    os.set(Number(v.id), v.name);
+                }
+                this.shadowValue.set(v.name ?? '');
+            }
+            this.current = v;
+            if (v) {
+                const sels = untracked(() => this.itemlist());
+                this.currentindex.set(sels.indexOf(v));
+            }
+            else {
+                this.currentindex.set(-1);
+            }
+            this.onselect.emit(v);
+            this.notifyOnChange();
+        }
+    }
     next(e) {
+        if (!this.showitems()) {
+            return;
+        }
         const items = this.itemlist();
         if (items.length > 0) {
             this.currentindex.set(this.currentindex() + e);
@@ -2037,6 +2178,18 @@ class XrmuiInput {
         if (!this.disabled() && this.datefieldElement != null) {
             this.datefieldElement.nativeElement.focus();
         }
+        if (!this.disabled() && this.ismultible()) {
+            const si = untracked(() => this.showitems());
+            if (si && clicked) {
+                this.showitems.set(false);
+            }
+            else {
+                this.showitems.set(true);
+            }
+        }
+        if (this.blurThead) {
+            clearTimeout(this.blurThead);
+        }
         if (clicked) {
             this.click.emit();
         }
@@ -2053,6 +2206,10 @@ class XrmuiInput {
             this.dosearchbyname();
         }, 600);
     }
+    isSelected(s) {
+        const mus = this.multiselected();
+        return mus.find(m => m.id == s.id) != undefined;
+    }
     async dosearchbyname(ommitcm) {
         const ap = this.autocomplete();
         if (ap) {
@@ -2148,6 +2305,12 @@ class XrmuiInput {
     expandedvalues(e) {
         return this.expandedItems.get(e) ?? null;
     }
+    removeMultiSelected(e, v) {
+        e.stopPropagation();
+        const nextMS = this.multiselected().filter(r => r.id != v.id);
+        this.multiselected.set(nextMS);
+        this.notifyOnChange();
+    }
     setNumberValueString() {
         const v = Number(this.value());
         let decimals = this.decimals();
@@ -2161,7 +2324,7 @@ class XrmuiInput {
             this.shadowValue.set(nFormater.flex(v));
         }
     }
-    showSuggestions() {
+    showAutocompleteSuggestions() {
         if (!this.overlayRef && this.searchElement) {
             const positionStrategy = this.overlay
                 .position()
@@ -2192,15 +2355,15 @@ class XrmuiInput {
             }
         }
     }
-    hideSuggestions() {
+    hideAutocompleteSuggestions() {
         this.overlayRef?.detach();
     }
     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 }, 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 }, 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", 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\" [ngClass]=\"{ focus: hasfocus(), error: error(), textarea: numberoflines() > 1, labelabove: shortLabel() == 'above', toolicon: toolIcon()?.length ?? 0 > 0 }\" (click)=\"focusMe($event)\">\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        #inputfield \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            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        #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            #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()\"\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)\"></textarea>\r\n    }\r\n    @let options = selectable();\r\n    @if (options && options.length > 0) {\r\n        <button \r\n        [matMenuTriggerFor]=\"menu\"\r\n        (click)=\"onFocus()\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlurSelect()\"\r\n        [disabled]=\"disabled()\"\r\n        (menuOpened)=\"onFocus()\"\r\n        (menuClosed)=\"onBlur()\"\r\n        class=\"optionsetbutton\">{{ selected()?.name }}</button>\r\n        <mat-menu #menu=\"matMenu\">\r\n            @for(option of options; track option.id) {\r\n                <button mat-menu-item (click)=\"setMenuChoice(option)\">\r\n                    @if (option.icon) { <mat-icon fontSet=\"material-symbols-outlined\">{{ option.icon }}</mat-icon>}\r\n                    <span>{{ option.name }}</span>\r\n                </button>\r\n            }\r\n        </mat-menu>\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                <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                        {{ elm.name }}\r\n                    }\r\n                </div>\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", 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}@media(prefers-color-scheme:dark){.boruto-ui div.autocomplete{background-color:#000;color:#fff}}@media(prefers-color-scheme:dark){.boruto-ui div.autocomplete.notdark{background-color:#fff;color:#000}}.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{flex-grow:1}.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.labelabove{height:48px}.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:20px;border:none;box-sizing:border-box;background-color:transparent;text-align:left;padding-left:15px}\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"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], 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 }, 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}@media(prefers-color-scheme:dark){.boruto-ui div.autocomplete{background-color:#000;color:#fff}}@media(prefers-color-scheme:dark){.boruto-ui div.autocomplete.notdark{background-color:#fff;color:#000}}.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{flex-grow:1}.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 });
 }
 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, MatMenuModule], 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\" [ngClass]=\"{ focus: hasfocus(), error: error(), textarea: numberoflines() > 1, labelabove: shortLabel() == 'above', toolicon: toolIcon()?.length ?? 0 > 0 }\" (click)=\"focusMe($event)\">\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        #inputfield \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            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        #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            #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()\"\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)\"></textarea>\r\n    }\r\n    @let options = selectable();\r\n    @if (options && options.length > 0) {\r\n        <button \r\n        [matMenuTriggerFor]=\"menu\"\r\n        (click)=\"onFocus()\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlurSelect()\"\r\n        [disabled]=\"disabled()\"\r\n        (menuOpened)=\"onFocus()\"\r\n        (menuClosed)=\"onBlur()\"\r\n        class=\"optionsetbutton\">{{ selected()?.name }}</button>\r\n        <mat-menu #menu=\"matMenu\">\r\n            @for(option of options; track option.id) {\r\n                <button mat-menu-item (click)=\"setMenuChoice(option)\">\r\n                    @if (option.icon) { <mat-icon fontSet=\"material-symbols-outlined\">{{ option.icon }}</mat-icon>}\r\n                    <span>{{ option.name }}</span>\r\n                </button>\r\n            }\r\n        </mat-menu>\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                <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                        {{ elm.name }}\r\n                    }\r\n                </div>\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", 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}@media(prefers-color-scheme:dark){.boruto-ui div.autocomplete{background-color:#000;color:#fff}}@media(prefers-color-scheme:dark){.boruto-ui div.autocomplete.notdark{background-color:#fff;color:#000}}.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{flex-grow:1}.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.labelabove{height:48px}.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:20px;border:none;box-sizing:border-box;background-color:transparent;text-align:left;padding-left:15px}\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                    <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}@media(prefers-color-scheme:dark){.boruto-ui div.autocomplete{background-color:#000;color:#fff}}@media(prefers-color-scheme:dark){.boruto-ui div.autocomplete.notdark{background-color:#fff;color:#000}}.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{flex-grow:1}.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"] }]
         }], ctorParameters: () => [], propDecorators: { searchElement: [{
                 type: ViewChild,
                 args: ['inputfield']
@@ -2216,7 +2379,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 }] }], 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"] }], 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 }] }], 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 }] }] } });
 
 class XrmuiRibbon {
     fill = input(true, /* @ts-ignore */
@@ -2295,7 +2458,7 @@ class XrmuiButton {
         this.isCurrent = this.menu.length > 0 && this.current != undefined && this.menu.find(m => m == this.current) != null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: XrmuiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: XrmuiButton, isStandalone: true, selector: "xrmui-button", inputs: { label: "label", icon: "icon", disabled: "disabled", working: "working", menu: "menu", current: "current", selected: "selected" }, outputs: { clicked: "click" }, usesOnChanges: true, ngImport: i0, template: "@if (menu == undefined || menu.length == 0 || disabled) {\r\n<button [disabled]=\"disabled\" (click)=\"onClick($event)\" [ngClass]=\"{ selected: selected }\">\r\n    @if (working) {\r\n        <div class=\"spin\">\r\n            <xrmui-spinner [diameter]=\"20\"></xrmui-spinner>\r\n        </div>\r\n        }\r\n        @if (icon != ''){<mat-icon fontSet=\"material-symbols-outlined\">{{ icon }}</mat-icon>}\r\n        @if (label != ''){ {{ label }} }\r\n    </button>\r\n}\r\n@if (menu != null && menu.length > 0 && !disabled) {\r\n    <button [matMenuTriggerFor]=\"menupopup\" [ngClass]=\"{ selected: isCurrent || selected }\" (click)=\"ignore($event)\">\r\n        @if (!isCurrent) {\r\n            @if (icon != '') {<mat-icon fontSet=\"material-symbols-outlined\">{{ icon }}</mat-icon>}\r\n            @if (label != '') { {{ label }} }\r\n        }\r\n        @if (current != undefined && isCurrent) {\r\n            @if (current.icon != undefined && current.icon != '') {<mat-icon fontSet=\"material-symbols-outlined\">{{ current.icon }}</mat-icon>}\r\n            @if (current.label != undefined && current.label != '') { {{ current.label }} }\r\n        }\r\n    </button>\r\n    <mat-menu #menupopup>\r\n        @for (m of menu; track m.label) {\r\n        <button mat-menu-item (click)=\"onClick($event, m)\">\r\n            @if (m.icon != undefined && m.icon != '') {<mat-icon fontSet=\"material-symbols-outlined\">{{ m.icon }}</mat-icon>}\r\n            @if (m.label != undefined && m.label != '') { {{ m.label }} }\r\n        </button>\r\n        }\r\n    </mat-menu>\r\n}\r\n", styles: [":host button{border:solid;border-width:1px;border-color:transparent;border-radius:3px;background-color:transparent;cursor:pointer;line-height:20px;padding-left:3px;padding-right:3px;margin-top:2px;margin-bottom:2px;margin-right:3px;color:#5c5858}@media(prefers-color-scheme:dark){:host button{color:#fff}}:host div.spin{position:absolute;margin:auto;padding-left:25px}:host(.selected) button:hover,:host button:hover{background-color:#f0eded;border-color:#f0eded;color:#5c5858}@media(prefers-color-scheme:dark){:host(.selected) button:hover,:host button:hover{background-color:#5c5858;border-color:#5c5858;color:#f0eded}}:host(.ommit-over) button:hover,:host(.selected.ommit-over) button:hover,:host button:hover{background-color:transparent;border-color:transparent;color:#5c5858}@media(prefers-color-scheme:dark){:host(.ommit-over) button:hover,:host(.selected.ommit-over) button:hover,:host button:hover{color:#fff}}:host button:disabled,:host button:hover:disabled{cursor:default;color:#d1cfcf;background-color:transparent;border-color:transparent}:host(.selected) button{background-color:#5c5858;border-color:#5c5858;color:#fff}@media(prefers-color-scheme:dark){:host(.selected) button{background-color:#fff;border-color:#fff;color:#5c5858}}:host mat-icon{position:relative;top:3px;margin-right:2px;font-size:16px;height:16px}:host button.selected{background-color:#5c5858;border-color:#5c5858;color:#fff}@media(prefers-color-scheme:dark){:host button.selected{background-color:#fff;border-color:#fff;color:#5c5858}}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: "component", type: XrmuiSpinner, selector: "xrmui-spinner", inputs: ["diameter"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: XrmuiButton, isStandalone: true, selector: "xrmui-button", inputs: { label: "label", icon: "icon", disabled: "disabled", working: "working", menu: "menu", current: "current", selected: "selected" }, outputs: { clicked: "click" }, usesOnChanges: true, ngImport: i0, template: "@if (menu == undefined || menu.length == 0 || disabled) {\r\n<button [disabled]=\"disabled\" (click)=\"onClick($event)\" [ngClass]=\"{ selected: selected }\">\r\n    @if (working) {\r\n        <div class=\"spin\">\r\n            <xrmui-spinner [diameter]=\"20\"></xrmui-spinner>\r\n        </div>\r\n        }\r\n        @if (icon != ''){<mat-icon fontSet=\"material-symbols-outlined\">{{ icon }}</mat-icon>}\r\n        @if (label != ''){ {{ label }} }\r\n    </button>\r\n}\r\n@if (menu != null && menu.length > 0 && !disabled) {\r\n    <button [matMenuTriggerFor]=\"menupopup\" [ngClass]=\"{ selected: isCurrent || selected }\" (click)=\"ignore($event)\">\r\n        @if (!isCurrent) {\r\n            @if (icon != '') {<mat-icon fontSet=\"material-symbols-outlined\">{{ icon }}</mat-icon>}\r\n            @if (label != '') { {{ label }} }\r\n        }\r\n        @if (current != undefined && isCurrent) {\r\n            @if (current.icon != undefined && current.icon != '') {<mat-icon fontSet=\"material-symbols-outlined\">{{ current.icon }}</mat-icon>}\r\n            @if (current.label != undefined && current.label != '') { {{ current.label }} }\r\n        }\r\n    </button>\r\n    <mat-menu #menupopup>\r\n        @for (m of menu; track m.label) {\r\n        <button mat-menu-item (click)=\"onClick($event, m)\">\r\n            @if (m.icon != undefined && m.icon != '') {<mat-icon fontSet=\"material-symbols-outlined\">{{ m.icon }}</mat-icon>}\r\n            @if (m.label != undefined && m.label != '') { {{ m.label }} }\r\n        </button>\r\n        }\r\n    </mat-menu>\r\n}\r\n", styles: [":host button{border:solid;border-width:1px;border-color:transparent;border-radius:3px;background-color:transparent;cursor:pointer;line-height:20px;padding-left:3px;padding-right:3px;margin-top:2px;margin-bottom:2px;margin-right:3px;color:#5c5858}@media(prefers-color-scheme:dark){:host button{color:#fff}}:host div.spin{position:absolute;margin:auto;padding-left:25px}:host(.selected) button:hover,:host button:hover{background-color:#f0eded;border-color:#f0eded;color:#5c5858}@media(prefers-color-scheme:dark){:host(.selected) button:hover,:host button:hover{background-color:#5c5858;border-color:#5c5858;color:#f0eded}}:host(.ommit-over) button:hover,:host(.selected.ommit-over) button:hover,:host button:hover{background-color:transparent;border-color:transparent;color:#5c5858}@media(prefers-color-scheme:dark){:host(.ommit-over) button:hover,:host(.selected.ommit-over) button:hover,:host button:hover{color:#fff}}:host button:disabled,:host button:hover:disabled{cursor:default;color:#d1cfcf;background-color:transparent;border-color:transparent}:host(.selected) button{background-color:#5c5858;border-color:#5c5858;color:#fff}@media(prefers-color-scheme:dark){:host(.selected) button{background-color:#fff;border-color:#fff;color:#5c5858}}:host mat-icon{position:relative;top:3px;margin-right:2px;font-size:16px;height:16px}:host button.selected{background-color:#5c5858;border-color:#5c5858;color:#fff}@media(prefers-color-scheme:dark){:host button.selected{background-color:#fff;border-color:#fff;color:#5c5858}}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: "component", type: XrmuiSpinner, selector: "xrmui-spinner", inputs: ["diameter"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: XrmuiButton, decorators: [{
             type: Component,