boruto-xrmui 1.22.8 → 1.22.10

package/fesm2022/boruto-xrmui.mjs

@@ -1609,6 +1609,9 @@ class XrmuiInput {
     _autoopenonblank = input(undefined, { ...(ngDevMode ? { debugName: "_autoopenonblank" } : /* istanbul ignore next */ {}), alias: "autoopenonblank" });
     nullable = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nullable" }] : /* istanbul ignore next */ []));
+    release = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "release" }] : /* istanbul ignore next */ []));
+    released = output();
     autoopenonblank = computed(() => {
         const au = this._autoopenonblank();
         if (au != undefined) {
@@ -2034,6 +2037,19 @@ class XrmuiInput {
     }
     notifyOnChange() {
         this.changeScope?.notifyChanged();
+        this.releaseOnChanged();
+    }
+    releaseThread;
+    releaseOnChanged() {
+        if (this.releaseThread) {
+            clearTimeout(this.releaseThread);
+        }
+        const mSec = this.release();
+        if (mSec && mSec > 0) {
+            this.releaseThread = setTimeout(() => {
+                this.released.emit();
+            }, mSec);
+        }
     }
     handleNumber() {
         let sv = this.shadowValue();
@@ -2150,7 +2166,7 @@ class XrmuiInput {
         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 }, 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", 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        <select \r\n            (change)=\"setchoice($event)\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\"\r\n            [disabled]=\"disabled()\">\r\n            @for (option of options; track option) {\r\n                <option [value]=\"option.id\" [selected]=\"option == selected()\">{{ option.name }}</option>\r\n            }\r\n        </select>\r\n        @if (!disabled()) {\r\n            <mat-icon class=\"dropdown\" fontSet=\"material-symbols-outlined\">arrow_drop_down</mat-icon>\r\n        }\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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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", "disabled", "type", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: XrmuiInput, isStandalone: true, selector: "xrmui-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, _shortLabel: { classPropertyName: "_shortLabel", publicName: "short-label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _showlock: { classPropertyName: "_showlock", publicName: "showlock", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, 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        <select \r\n            (change)=\"setchoice($event)\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\"\r\n            [disabled]=\"disabled()\">\r\n            @for (option of options; track option) {\r\n                <option [value]=\"option.id\" [selected]=\"option == selected()\">{{ option.name }}</option>\r\n            }\r\n        </select>\r\n        @if (!disabled()) {\r\n            <mat-icon class=\"dropdown\" fontSet=\"material-symbols-outlined\">arrow_drop_down</mat-icon>\r\n        }\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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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", "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,
@@ -2170,7 +2186,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 }] }], 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 }] }], 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 }] }] } });
 
 class XrmuiRibbon {
     fill = input(true, /* @ts-ignore */
@@ -2310,6 +2326,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
             args: [{ selector: 'xrmui-tabs', imports: [NgClass, MatIcon, MatBadge, MatButtonModule, MatMenuModule, MatIconModule], changeDetection: ChangeDetectionStrategy.Eager, providers: [], template: "<div class=\"xrmui-tabs\">\r\n@for (tab of tabs(); track tab; let idx = $index) {\r\n    @if (tab.visible == undefined || tab.visible()) {\r\n    <div class=\"xrmui-tab\" [ngClass]=\"{ 'current' : tab == current(), 'disabled': tab.disabled, error: tab != current() && tab.error != undefined && tab.error()}\" (click)=\"current.set(tab)\">\r\n        @if (tab.badget != undefined && tab.badget > 0) {\r\n            <div [matBadge]=\"tab.badget\" [matBadgeOverlap]=\"false\">\r\n                @if (tab.icon != undefined && tab.icon != null && tab.icon != ''){<div class=\"icon\"><mat-icon class=\"mat-icon-14\">{{ tab.icon }}</mat-icon></div>}\r\n                <span>\r\n                @if (tab.label != undefined && tab.label != null && tab.label != '') { {{ tab.label }} }\r\n                @if (tab.label == undefined || tab.label == null || tab.label == '') { {{ tab.id }} }\r\n                </span>\r\n            </div>\r\n        }\r\n\r\n        @if (tab.badget == undefined || tab.badget == 0) {\r\n            @if (tab.icon != undefined && tab.icon != null && tab.icon != ''){<div class=\"icon\"><mat-icon class=\"mat-icon-14\">{{ tab.icon }}</mat-icon></div>}\r\n            <span>\r\n            @if (tab.label != undefined && tab.label != null && tab.label != '') { {{ tab.label }} }\r\n            @if (tab.label == undefined || tab.label == null || tab.label == '') { {{ tab.id }} }\r\n            </span>\r\n        }\r\n    </div>\r\n    }\r\n}\r\n</div>", styles: [":host div.xrmui-tabs{display:flex}:host div.xrmui-tab{margin:10px 5px 5px;padding:10px 10px 8px;font-family:var(--mat-sys-body-medium-font);border:solid;border-width:0 0 2px 0;border-color:#d3d3d3;color:gray;cursor:pointer;font-size:small}:host div.xrmui-tab.current{border-color:#0f6cbd;color:#0f6cbd}:host div.xrmui-tab.disabled{border-color:#d3d3d3;color:#d3d3d3;cursor:auto}:host div.xrmui-tab.space{flex-grow:1;border-color:transparent;cursor:default}:host div.xrmui-burger{padding-top:15px;width:20px;cursor:pointer}:host button.xrmui-burger-button{border:none;background-color:transparent;height:25px;overflow:hidden;margin:0;padding:0}:host div.icon{float:left;padding-right:3px}:host mat-icon.mat-icon-14{font-size:14px;width:14px;height:14px}:host .error{--color1: #FF6347;--color2: #f7f7f7;--duration: 3s;background-color:var(--color1);-webkit-animation-name:colorPulser;-webkit-animation-duration:var(--duration);animation-name:colorPulser;animation-duration:var(--duration);animation-iteration-count:infinite}@-webkit-keyframes colorPulser{0%{background-color:var(--color1)}50%{background-color:var(--color2)}to{background-color:var(--color1)}}@keyframes colorPulser{0%{background-color:var(--color1)}50%{background-color:var(--color2)}to{background-color:var(--color1)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], burgers: [{ type: i0.Input, args: [{ isSignal: true, alias: "burgers", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: true }] }, { type: i0.Output, args: ["currentChange"] }] } });
 
+class XrmuiSection {
+    searchElement;
+    title = '';
+    topTitle = '';
+    searchable = false;
+    search = '';
+    searchChange = new EventEmitter();
+    focusSearchTrigger = false;
+    focusSearchTriggerChange = new EventEmitter();
+    checkable = false;
+    checked = false;
+    checkChange = new EventEmitter();
+    prev = new EventEmitter();
+    next = new EventEmitter();
+    enter = new EventEmitter();
+    esc = new EventEmitter();
+    constructor() {
+    }
+    ngOnChanges(changes) {
+        if (this.focusSearchTrigger == true) {
+            setTimeout(() => {
+                this.focusSearch();
+                this.focusSearchTriggerChange.emit(false);
+            }, 10);
+        }
+    }
+    searchChanged() {
+        this.searchChange.emit(this.search);
+    }
+    check() {
+        this.checked = true;
+        this.checkChange.emit(this.checked);
+        this.focusSearch();
+    }
+    uncheck() {
+        this.checked = false;
+        this.checkChange.emit(this.checked);
+        this.focusSearch();
+    }
+    onkeydown(e) {
+        if (this.prev.observed) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.prev.emit();
+        }
+    }
+    onkeyup(e) {
+        if (this.next.observed) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.next.emit();
+        }
+    }
+    onkeyenter(e) {
+        if (this.enter.observed) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.enter.emit();
+        }
+    }
+    onkeyesc(e) {
+        if (this.esc.observed) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.esc.emit();
+        }
+    }
+    focusSearch() {
+        if (this.searchElement != null) {
+            this.searchElement.nativeElement.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: XrmuiSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: XrmuiSection, isStandalone: true, selector: "xrmui-section", inputs: { title: "title", topTitle: ["top-title", "topTitle"], searchable: "searchable", search: "search", focusSearchTrigger: ["focusSearch", "focusSearchTrigger"], checkable: "checkable", checked: "checked" }, outputs: { searchChange: "searchChange", focusSearchTriggerChange: "focusSearchChange", checkChange: "checkedChange", prev: "prev", next: "next", enter: "enter", esc: "esc" }, viewQueries: [{ propertyName: "searchElement", first: true, predicate: ["searchelement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (topTitle != '') {<div class=\"toptitle-container\">\r\n    <div class=\"toptitle\">{{ topTitle }}</div>\r\n</div>}\r\n@if(title != '' && !searchable) {<div class=\"header\">{{ title }}</div>}\r\n@if (searchable) {\r\n<div class=\"search\">\r\n    <div class=\"chexkbox\">\r\n        @if (checkable) {\r\n        @if (checked){<mat-icon title=\"Frav\u00E6lg alle\" (click)=\"uncheck()\">check_box</mat-icon>}\r\n        @if(!checked) {<mat-icon title=\"V\u00E6lg alle\" (click)=\"check()\">check_box_outline_blank</mat-icon>}\r\n        }\r\n    </div>\r\n    <input #searchelement [(ngModel)]=\"search\" (ngModelChange)=\"searchChanged()\" [placeholder]=\"title\"\r\n        (keydown.esc)=\"onkeyesc($event)\" (keydown.arrowdown)=\"onkeydown($event)\" (keydown.arrowup)=\"onkeyup($event)\"\r\n        (keydown.enter)=\"onkeyenter($event)\" />\r\n    <div class=\"therest\"></div>\r\n</div>\r\n}\r\n<ng-content></ng-content>", styles: [":host.all{position:absolute;inset:0}:host{border:solid;border-width:1px 1px 1px 1px;border-color:#d3d3d3;border-style:solid;border-radius:5px;display:block;margin:10px;padding:10px;box-shadow:1px 1px #d3d3d3}:host.nopadding{padding:0}:host.noborder{border:none;border-radius:0;margin:0;padding:0}:host.global{border-color:#4f8a4e}:host.nomargin{margin:0}:host div.toptitle-container{position:relative;width:100%}:host div.toptitle{position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;background-color:gray;color:#fff;padding:1px 20px;max-width:fit-content;display:table;z-index:2;border-radius:15px;border:solid;border-width:1px 1px 1px 1px;border-color:gray}:host div.toptitle{top:-19px}:host div.header{border-width:0 0 1px 0;border-color:#d3d3d3;border-style:solid;font-size:16px;font-weight:700;margin-bottom:15px;padding-top:5px;padding-bottom:5px}:host div.search{border-width:0 0 1px 0;border-color:#d3d3d3;border-style:solid;margin-bottom:15px;padding-top:5px;padding-bottom:5px;display:flex}:host div.therest{flex-grow:1}:host div.chexkbox{width:25px;min-width:25px;max-width:25px}:host input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px}:host input[type=number]:focus,:host input[type=number]:hover{pointer-events:none;cursor:text}:host *:focus{outline:none}:host input:focus{outline:none;border:solid;border-width:0 0 2px 0;border-color:#0f6cbd}:host mat-icon{color:gray}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: XrmuiSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'xrmui-section', imports: [FormsModule, MatIcon], template: "@if (topTitle != '') {<div class=\"toptitle-container\">\r\n    <div class=\"toptitle\">{{ topTitle }}</div>\r\n</div>}\r\n@if(title != '' && !searchable) {<div class=\"header\">{{ title }}</div>}\r\n@if (searchable) {\r\n<div class=\"search\">\r\n    <div class=\"chexkbox\">\r\n        @if (checkable) {\r\n        @if (checked){<mat-icon title=\"Frav\u00E6lg alle\" (click)=\"uncheck()\">check_box</mat-icon>}\r\n        @if(!checked) {<mat-icon title=\"V\u00E6lg alle\" (click)=\"check()\">check_box_outline_blank</mat-icon>}\r\n        }\r\n    </div>\r\n    <input #searchelement [(ngModel)]=\"search\" (ngModelChange)=\"searchChanged()\" [placeholder]=\"title\"\r\n        (keydown.esc)=\"onkeyesc($event)\" (keydown.arrowdown)=\"onkeydown($event)\" (keydown.arrowup)=\"onkeyup($event)\"\r\n        (keydown.enter)=\"onkeyenter($event)\" />\r\n    <div class=\"therest\"></div>\r\n</div>\r\n}\r\n<ng-content></ng-content>", styles: [":host.all{position:absolute;inset:0}:host{border:solid;border-width:1px 1px 1px 1px;border-color:#d3d3d3;border-style:solid;border-radius:5px;display:block;margin:10px;padding:10px;box-shadow:1px 1px #d3d3d3}:host.nopadding{padding:0}:host.noborder{border:none;border-radius:0;margin:0;padding:0}:host.global{border-color:#4f8a4e}:host.nomargin{margin:0}:host div.toptitle-container{position:relative;width:100%}:host div.toptitle{position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;background-color:gray;color:#fff;padding:1px 20px;max-width:fit-content;display:table;z-index:2;border-radius:15px;border:solid;border-width:1px 1px 1px 1px;border-color:gray}:host div.toptitle{top:-19px}:host div.header{border-width:0 0 1px 0;border-color:#d3d3d3;border-style:solid;font-size:16px;font-weight:700;margin-bottom:15px;padding-top:5px;padding-bottom:5px}:host div.search{border-width:0 0 1px 0;border-color:#d3d3d3;border-style:solid;margin-bottom:15px;padding-top:5px;padding-bottom:5px;display:flex}:host div.therest{flex-grow:1}:host div.chexkbox{width:25px;min-width:25px;max-width:25px}:host input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px}:host input[type=number]:focus,:host input[type=number]:hover{pointer-events:none;cursor:text}:host *:focus{outline:none}:host input:focus{outline:none;border:solid;border-width:0 0 2px 0;border-color:#0f6cbd}:host mat-icon{color:gray}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchElement: [{
+                type: ViewChild,
+                args: ['searchelement']
+            }], title: [{
+                type: Input,
+                args: ['title']
+            }], topTitle: [{
+                type: Input,
+                args: ['top-title']
+            }], searchable: [{
+                type: Input,
+                args: ['searchable']
+            }], search: [{
+                type: Input,
+                args: ['search']
+            }], searchChange: [{
+                type: Output,
+                args: ['searchChange']
+            }], focusSearchTrigger: [{
+                type: Input,
+                args: ['focusSearch']
+            }], focusSearchTriggerChange: [{
+                type: Output,
+                args: ['focusSearchChange']
+            }], checkable: [{
+                type: Input,
+                args: ['checkable']
+            }], checked: [{
+                type: Input,
+                args: ['checked']
+            }], checkChange: [{
+                type: Output,
+                args: ['checkedChange']
+            }], prev: [{
+                type: Output,
+                args: ['prev']
+            }], next: [{
+                type: Output,
+                args: ['next']
+            }], enter: [{
+                type: Output,
+                args: ['enter']
+            }], esc: [{
+                type: Output,
+                args: ['esc']
+            }] } });
+
 class BorutoXrmUIModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BorutoXrmUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: BorutoXrmUIModule, imports: [XrmuiInfo,
@@ -2322,6 +2463,7 @@ class BorutoXrmUIModule {
             XrmuiButton,
             XrmuiDevider,
             XrmuiTabs,
+            XrmuiSection,
             ChangeScopeDirective,
             FormScopeDirective], exports: [XrmuiInfo,
             XrmuiLayout,
@@ -2333,6 +2475,7 @@ class BorutoXrmUIModule {
             XrmuiButton,
             XrmuiDevider,
             XrmuiTabs,
+            XrmuiSection,
             ChangeScopeDirective,
             FormScopeDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BorutoXrmUIModule, imports: [XrmuiInfo,
@@ -2340,7 +2483,8 @@ class BorutoXrmUIModule {
             XrmuiInput,
             XrmuiSpinner,
             XrmuiButton,
-            XrmuiTabs] });
+            XrmuiTabs,
+            XrmuiSection] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BorutoXrmUIModule, decorators: [{
             type: NgModule,
@@ -2356,6 +2500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         XrmuiButton,
                         XrmuiDevider,
                         XrmuiTabs,
+                        XrmuiSection,
                         ChangeScopeDirective,
                         FormScopeDirective,
                     ],
@@ -2370,6 +2515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         XrmuiButton,
                         XrmuiDevider,
                         XrmuiTabs,
+                        XrmuiSection,
                         ChangeScopeDirective,
                         FormScopeDirective
                     ]
@@ -2384,5 +2530,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BorutoXrmUIModule, CTRL_KEYS, ChangeScopeDirective, DECIMALS, DKCustomDateAdapter, FormScopeDirective, KiponUiModule, KoAlertComponent, KoButtonGroupComponent, KoDecimalDirective, KoDivider, KoExpansionPanelComponent, KoFocusDirective, KoHeaderComponent, KoHorizontalScrollComponent, KoHorizontalSplitComponent, KoLeftMenuComponent, KoMainComponent, KoNavigationByCssClass, KoNavigationByImageUrl, KoOverDirective, KoTablePanelComponent, KoTitlePanelComponent, KoTopMenuComponent, KoVerticalScrollComponent, KoVerticalSplitComponent, KoViewComponent, KoWriteDirective, NAVIGATIONKEYS, NUMBERS, XrmuiButton, XrmuiDevider, XrmuiIcon, XrmuiInfo, XrmuiInput, XrmuiLayout, XrmuiPanel, XrmuiRibbon, XrmuiSpinner, XrmuiTabs, nFormater };
+export { BorutoXrmUIModule, CTRL_KEYS, ChangeScopeDirective, DECIMALS, DKCustomDateAdapter, FormScopeDirective, KiponUiModule, KoAlertComponent, KoButtonGroupComponent, KoDecimalDirective, KoDivider, KoExpansionPanelComponent, KoFocusDirective, KoHeaderComponent, KoHorizontalScrollComponent, KoHorizontalSplitComponent, KoLeftMenuComponent, KoMainComponent, KoNavigationByCssClass, KoNavigationByImageUrl, KoOverDirective, KoTablePanelComponent, KoTitlePanelComponent, KoTopMenuComponent, KoVerticalScrollComponent, KoVerticalSplitComponent, KoViewComponent, KoWriteDirective, NAVIGATIONKEYS, NUMBERS, XrmuiButton, XrmuiDevider, XrmuiIcon, XrmuiInfo, XrmuiInput, XrmuiLayout, XrmuiPanel, XrmuiRibbon, XrmuiSection, XrmuiSpinner, XrmuiTabs, nFormater };
 //# sourceMappingURL=boruto-xrmui.mjs.map