boruto-xrmui 1.0.54 → 1.0.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,6 +11,7 @@ import { FormsModule } from '@angular/forms';
11
11
  import { TextFieldModule } from '@angular/cdk/text-field';
12
12
  import * as i2 from '@angular/material/datepicker';
13
13
  import { MatDatepickerModule } from '@angular/material/datepicker';
14
+ import { MatCheckboxModule } from '@angular/material/checkbox';
14
15
  import * as i1$1 from '@angular/material/progress-spinner';
15
16
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
16
17
  import * as i1$2 from '@angular/material/menu';
@@ -1528,6 +1529,7 @@ class XrmuiInput {
1528
1529
  info = input(null, ...(ngDevMode ? [{ debugName: "info" }] : []));
1529
1530
  notdark = input(false, ...(ngDevMode ? [{ debugName: "notdark" }] : []));
1530
1531
  _autoopenonblank = input(undefined, { ...(ngDevMode ? { debugName: "_autoopenonblank" } : {}), alias: "autoopenonblank" });
1532
+ nullable = input(true, ...(ngDevMode ? [{ debugName: "nullable" }] : []));
1531
1533
  autoopenonblank = computed(() => {
1532
1534
  const au = this._autoopenonblank();
1533
1535
  if (au != undefined) {
@@ -1555,6 +1557,7 @@ class XrmuiInput {
1555
1557
  currentindex = -1;
1556
1558
  shadowValue = signal('', ...(ngDevMode ? [{ debugName: "shadowValue" }] : []));
1557
1559
  shadowDate = signal(null, ...(ngDevMode ? [{ debugName: "shadowDate" }] : []));
1560
+ shadowBool = signal(false, ...(ngDevMode ? [{ debugName: "shadowBool" }] : []));
1558
1561
  isselect = computed(() => {
1559
1562
  const s = this.selectable();
1560
1563
  if (s && s.length > 0)
@@ -1588,12 +1591,16 @@ class XrmuiInput {
1588
1591
  if (type == 'number' && validate == null) {
1589
1592
  this.validate.set('decimal');
1590
1593
  }
1594
+ if (type == 'checkbox' && validate != 'checkbox') {
1595
+ this.validate.set('checkbox');
1596
+ }
1591
1597
  });
1592
1598
  effect(() => {
1593
1599
  const value = this.value();
1594
1600
  if (value == null) {
1595
1601
  this.shadowValue.set('');
1596
1602
  this.shadowDate.set(null);
1603
+ this.shadowBool.set(false);
1597
1604
  return;
1598
1605
  }
1599
1606
  if (this.validate() == 'decimal' || this.validate() == 'number') {
@@ -1604,6 +1611,10 @@ class XrmuiInput {
1604
1611
  this.shadowDate.set(value);
1605
1612
  return;
1606
1613
  }
1614
+ if (this.validate() == 'checkbox') {
1615
+ this.shadowBool.set(value);
1616
+ return;
1617
+ }
1607
1618
  this.shadowValue.set(value.toString());
1608
1619
  });
1609
1620
  effect(() => {
@@ -1661,7 +1672,12 @@ class XrmuiInput {
1661
1672
  onValueChanged() {
1662
1673
  const sv = this.shadowValue();
1663
1674
  if (sv == '') {
1664
- this.value.set(null);
1675
+ if (this.nullable() == true) {
1676
+ this.value.set(null);
1677
+ }
1678
+ else {
1679
+ this.value.set('');
1680
+ }
1665
1681
  }
1666
1682
  else {
1667
1683
  const next = sv.replaceAll('.', '').replace(',', '.');
@@ -1680,6 +1696,9 @@ class XrmuiInput {
1680
1696
  }
1681
1697
  this.searchbyname();
1682
1698
  }
1699
+ onCheckboxToggle() {
1700
+ this.value.set(this.shadowBool());
1701
+ }
1683
1702
  onFocus() {
1684
1703
  this.hasfocus.set(true);
1685
1704
  this.onfocusEvent.emit();
@@ -1717,6 +1736,18 @@ class XrmuiInput {
1717
1736
  this.onblurEvent.emit();
1718
1737
  }, 200);
1719
1738
  }
1739
+ onBlurCheckbox() {
1740
+ setTimeout(() => {
1741
+ this.hasfocus.set(false);
1742
+ this.onblurEvent.emit();
1743
+ }, 200);
1744
+ }
1745
+ onBlurDate() {
1746
+ setTimeout(() => {
1747
+ this.hasfocus.set(false);
1748
+ this.onblurEvent.emit();
1749
+ }, 200);
1750
+ }
1720
1751
  ondown(e) {
1721
1752
  e.stopPropagation();
1722
1753
  e.preventDefault();
@@ -1875,7 +1906,7 @@ class XrmuiInput {
1875
1906
  this.changeScope?.notifyChanged();
1876
1907
  }
1877
1908
  handleNumber() {
1878
- const sv = this.shadowValue();
1909
+ let sv = this.shadowValue();
1879
1910
  if (sv == '') {
1880
1911
  this.value.set(null);
1881
1912
  }
@@ -1918,11 +1949,11 @@ class XrmuiInput {
1918
1949
  }
1919
1950
  }
1920
1951
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XrmuiInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
1921
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, 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: "options", predicate: ["option"], descendants: true }], ngImport: i0, template: "@if (showitems()) {\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></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\">{{ elm.name }}</div>\r\n </div>\r\n }\r\n </div>\r\n}\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' && !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 (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)=\"onBlur()\"/>\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", styles: [":host{position:relative;display:flex;margin-bottom:10px}:host div.autocomplete{position:absolute;z-index:100;top:37px;left:215px;right:0;background-color:red;min-height:40px;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}:host div.autocomplete.nolabel{left:0}:host div.autocomplete.shortLabel{left:124px}:host div.autocomplete div.element.selectable{cursor:pointer}@media(prefers-color-scheme:dark){:host div.autocomplete{background-color:#000;color:#fff}}@media(prefers-color-scheme:dark){:host div.autocomplete.notdark{background-color:#fff;color:#000}}:host 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}:host div.autocomplete div.element.current{border-color:#0f6cbd;color:#000}:host div.autocomplete div.element div.item{flex-grow:1}:host div.label{width:180px;min-width:180px;max-height:180px;height:32px;line-height:32px}:host div.label.short{width:90px;min-width:90px}:host div.locked{width:30px;min-width:30px;max-width:30px;height:32px;line-height:32px;text-align:right;padding-right:3px}:host div.input{flex-grow:1;height:32px;line-height:32px;background-color:#e6e8e8;border-radius:3px;margin:0;padding:0;border:solid;border-width:0 0 3px 0;border-color:transparent}:host div.input.labelabove{height:48px}:host div.input.labelabove div.label-above{font-size:12px;line-height:12px;width:100%;padding-left:15px;padding-top:5px;color:gray}:host div.input.focus.labelabove div.label-above{color:#0f6cbd}:host div.input.textarea{height:inherit}:host div.info{width:30px}:host div textarea{background-color:#e6e8e8;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}:host div.input.focus,:host div.textarea.focus,:host div.select.focus{border-color:#0f6cbd}:host div.input.error,:host div.input.focus.error,:host div.select.focus.error{border-color:red;color:red}:host input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:100%;box-sizing:border-box}:host input.number{text-align:right}:host select{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:calc(100% - 10px);box-sizing:border-box}:host input.datepicker{width:calc(100% - 35px)}:host div.input.toolicon input{width:calc(100% - 35px)}@media(prefers-color-scheme:dark){:host input{color:#000}:host input:disabled{color:#5f615f}}:host input.number{text-align:right;padding-right:15px;padding-left:0}:host *:focus{outline:none}:host mat-icon{color:#d3d3d3;font-size:12px;position:relative;top:5px;width:12px}:host textarea.noresize{resize:none}:host mat-icon.info{font-size:30px;width:30px;height:30px;color:gray}:host mat-icon.info:hover{color:#000}:host mat-icon.calendar-icon{font-size:25px;width:25px;height:25px;color:#a9a9a9}:host mat-icon.toolicon{cursor:pointer;font-size:25px;width:25px;height:25px;color:gray}:host mat-icon.dropdown{position:absolute;right:10px;top:4px;font-size:25px;width:25px;height:25px;color:gray;pointer-events:none}:host div.input.labelabove mat-icon.dropdown{top:12px}:host div.input.labelabove mat-icon.toolicon,:host div.input.labelabove mat-icon.calendar-icon{position:relative;top:-5px}:host 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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"] }] });
1952
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, 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: "options", predicate: ["option"], descendants: true }], ngImport: i0, template: "@if (showitems()) {\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></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\">{{ elm.name }}</div>\r\n </div>\r\n }\r\n </div>\r\n}\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", styles: [":host{position:relative;display:flex;margin-bottom:10px}:host div.autocomplete{position:absolute;z-index:100;top:37px;left:215px;right:0;background-color:red;min-height:40px;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}:host div.autocomplete.nolabel{left:0}:host div.autocomplete.shortLabel{left:124px}:host div.autocomplete div.element.selectable{cursor:pointer}@media(prefers-color-scheme:dark){:host div.autocomplete{background-color:#000;color:#fff}}@media(prefers-color-scheme:dark){:host div.autocomplete.notdark{background-color:#fff;color:#000}}:host 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}:host div.autocomplete div.element.current{border-color:#0f6cbd;color:#000}:host div.autocomplete div.element div.item{flex-grow:1}:host div.label{width:180px;min-width:180px;max-height:180px;height:32px;line-height:32px}:host div.label.short{width:90px;min-width:90px}:host div.locked{width:30px;min-width:30px;max-width:30px;height:32px;line-height:32px;text-align:right;padding-right:3px}:host div.input{flex-grow:1;height:32px;line-height:32px;background-color:#e6e8e8;border-radius:3px;margin:0;padding:0;border:solid;border-width:0 0 3px 0;border-color:transparent}:host div.input.labelabove{height:48px}:host div.input.labelabove div.label-above{font-size:12px;line-height:12px;width:100%;padding-left:15px;padding-top:5px;color:gray}:host div.input.focus.labelabove div.label-above{color:#0f6cbd}:host div.input.textarea{height:inherit}:host div.info{width:30px}:host div textarea{background-color:#e6e8e8;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}:host div.input.focus,:host div.textarea.focus,:host div.select.focus{border-color:#0f6cbd}:host div.input.error,:host div.input.focus.error,:host div.select.focus.error{border-color:red;color:red}:host input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:100%;box-sizing:border-box}:host input.number{text-align:right}:host select{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:calc(100% - 10px);box-sizing:border-box}:host input.datepicker{width:calc(100% - 35px)}:host div.input>div.checkbox{margin-left:15px;margin-top:5px}:host div.input.above>div.checkbox{margin-top:2px}:host input.checkbox{width:15px;height:15px}:host div.input.toolicon input{width:calc(100% - 35px)}@media(prefers-color-scheme:dark){:host input{color:#000}:host input:disabled{color:#5f615f}}:host input.number{text-align:right;padding-right:15px;padding-left:0}:host *:focus{outline:none}:host mat-icon{color:#d3d3d3;font-size:12px;position:relative;top:5px;width:12px}:host textarea.noresize{resize:none}:host mat-icon.info{font-size:30px;width:30px;height:30px;color:gray}:host mat-icon.info:hover{color:#000}:host mat-icon.calendar-icon{font-size:25px;width:25px;height:25px;color:#a9a9a9}:host mat-icon.toolicon{cursor:pointer;font-size:25px;width:25px;height:25px;color:gray}:host mat-icon.dropdown{position:absolute;right:10px;top:4px;font-size:25px;width:25px;height:25px;color:gray;pointer-events:none}:host div.input.labelabove mat-icon.dropdown{top:12px}:host div.input.labelabove mat-icon.toolicon,:host div.input.labelabove mat-icon.calendar-icon{position:relative;top:-5px}:host 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][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 }] });
1922
1953
  }
1923
1954
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XrmuiInput, decorators: [{
1924
1955
  type: Component,
1925
- args: [{ selector: 'xrmui-input', imports: [FormsModule, NgClass, MatIcon, TextFieldModule, MatDatepickerModule], template: "@if (showitems()) {\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></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\">{{ elm.name }}</div>\r\n </div>\r\n }\r\n </div>\r\n}\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' && !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 (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)=\"onBlur()\"/>\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", styles: [":host{position:relative;display:flex;margin-bottom:10px}:host div.autocomplete{position:absolute;z-index:100;top:37px;left:215px;right:0;background-color:red;min-height:40px;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}:host div.autocomplete.nolabel{left:0}:host div.autocomplete.shortLabel{left:124px}:host div.autocomplete div.element.selectable{cursor:pointer}@media(prefers-color-scheme:dark){:host div.autocomplete{background-color:#000;color:#fff}}@media(prefers-color-scheme:dark){:host div.autocomplete.notdark{background-color:#fff;color:#000}}:host 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}:host div.autocomplete div.element.current{border-color:#0f6cbd;color:#000}:host div.autocomplete div.element div.item{flex-grow:1}:host div.label{width:180px;min-width:180px;max-height:180px;height:32px;line-height:32px}:host div.label.short{width:90px;min-width:90px}:host div.locked{width:30px;min-width:30px;max-width:30px;height:32px;line-height:32px;text-align:right;padding-right:3px}:host div.input{flex-grow:1;height:32px;line-height:32px;background-color:#e6e8e8;border-radius:3px;margin:0;padding:0;border:solid;border-width:0 0 3px 0;border-color:transparent}:host div.input.labelabove{height:48px}:host div.input.labelabove div.label-above{font-size:12px;line-height:12px;width:100%;padding-left:15px;padding-top:5px;color:gray}:host div.input.focus.labelabove div.label-above{color:#0f6cbd}:host div.input.textarea{height:inherit}:host div.info{width:30px}:host div textarea{background-color:#e6e8e8;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}:host div.input.focus,:host div.textarea.focus,:host div.select.focus{border-color:#0f6cbd}:host div.input.error,:host div.input.focus.error,:host div.select.focus.error{border-color:red;color:red}:host input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:100%;box-sizing:border-box}:host input.number{text-align:right}:host select{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:calc(100% - 10px);box-sizing:border-box}:host input.datepicker{width:calc(100% - 35px)}:host div.input.toolicon input{width:calc(100% - 35px)}@media(prefers-color-scheme:dark){:host input{color:#000}:host input:disabled{color:#5f615f}}:host input.number{text-align:right;padding-right:15px;padding-left:0}:host *:focus{outline:none}:host mat-icon{color:#d3d3d3;font-size:12px;position:relative;top:5px;width:12px}:host textarea.noresize{resize:none}:host mat-icon.info{font-size:30px;width:30px;height:30px;color:gray}:host mat-icon.info:hover{color:#000}:host mat-icon.calendar-icon{font-size:25px;width:25px;height:25px;color:#a9a9a9}:host mat-icon.toolicon{cursor:pointer;font-size:25px;width:25px;height:25px;color:gray}:host mat-icon.dropdown{position:absolute;right:10px;top:4px;font-size:25px;width:25px;height:25px;color:gray;pointer-events:none}:host div.input.labelabove mat-icon.dropdown{top:12px}:host div.input.labelabove mat-icon.toolicon,:host div.input.labelabove mat-icon.calendar-icon{position:relative;top:-5px}:host select{appearance:none;-webkit-appearance:none;-moz-appearance:none}\n"] }]
1956
+ args: [{ selector: 'xrmui-input', imports: [FormsModule, NgClass, MatIcon, TextFieldModule, MatDatepickerModule, MatCheckboxModule], template: "@if (showitems()) {\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></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\">{{ elm.name }}</div>\r\n </div>\r\n }\r\n </div>\r\n}\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", styles: [":host{position:relative;display:flex;margin-bottom:10px}:host div.autocomplete{position:absolute;z-index:100;top:37px;left:215px;right:0;background-color:red;min-height:40px;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}:host div.autocomplete.nolabel{left:0}:host div.autocomplete.shortLabel{left:124px}:host div.autocomplete div.element.selectable{cursor:pointer}@media(prefers-color-scheme:dark){:host div.autocomplete{background-color:#000;color:#fff}}@media(prefers-color-scheme:dark){:host div.autocomplete.notdark{background-color:#fff;color:#000}}:host 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}:host div.autocomplete div.element.current{border-color:#0f6cbd;color:#000}:host div.autocomplete div.element div.item{flex-grow:1}:host div.label{width:180px;min-width:180px;max-height:180px;height:32px;line-height:32px}:host div.label.short{width:90px;min-width:90px}:host div.locked{width:30px;min-width:30px;max-width:30px;height:32px;line-height:32px;text-align:right;padding-right:3px}:host div.input{flex-grow:1;height:32px;line-height:32px;background-color:#e6e8e8;border-radius:3px;margin:0;padding:0;border:solid;border-width:0 0 3px 0;border-color:transparent}:host div.input.labelabove{height:48px}:host div.input.labelabove div.label-above{font-size:12px;line-height:12px;width:100%;padding-left:15px;padding-top:5px;color:gray}:host div.input.focus.labelabove div.label-above{color:#0f6cbd}:host div.input.textarea{height:inherit}:host div.info{width:30px}:host div textarea{background-color:#e6e8e8;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}:host div.input.focus,:host div.textarea.focus,:host div.select.focus{border-color:#0f6cbd}:host div.input.error,:host div.input.focus.error,:host div.select.focus.error{border-color:red;color:red}:host input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:100%;box-sizing:border-box}:host input.number{text-align:right}:host select{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px;width:calc(100% - 10px);box-sizing:border-box}:host input.datepicker{width:calc(100% - 35px)}:host div.input>div.checkbox{margin-left:15px;margin-top:5px}:host div.input.above>div.checkbox{margin-top:2px}:host input.checkbox{width:15px;height:15px}:host div.input.toolicon input{width:calc(100% - 35px)}@media(prefers-color-scheme:dark){:host input{color:#000}:host input:disabled{color:#5f615f}}:host input.number{text-align:right;padding-right:15px;padding-left:0}:host *:focus{outline:none}:host mat-icon{color:#d3d3d3;font-size:12px;position:relative;top:5px;width:12px}:host textarea.noresize{resize:none}:host mat-icon.info{font-size:30px;width:30px;height:30px;color:gray}:host mat-icon.info:hover{color:#000}:host mat-icon.calendar-icon{font-size:25px;width:25px;height:25px;color:#a9a9a9}:host mat-icon.toolicon{cursor:pointer;font-size:25px;width:25px;height:25px;color:gray}:host mat-icon.dropdown{position:absolute;right:10px;top:4px;font-size:25px;width:25px;height:25px;color:gray;pointer-events:none}:host div.input.labelabove mat-icon.dropdown{top:12px}:host div.input.labelabove mat-icon.toolicon,:host div.input.labelabove mat-icon.calendar-icon{position:relative;top:-5px}:host select{appearance:none;-webkit-appearance:none;-moz-appearance:none}\n"] }]
1926
1957
  }], ctorParameters: () => [], propDecorators: { searchElement: [{
1927
1958
  type: ViewChild,
1928
1959
  args: ['inputfield']
@@ -1935,7 +1966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
1935
1966
  }], options: [{
1936
1967
  type: ViewChildren,
1937
1968
  args: ['option']
1938
- }], 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 }] }], 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 }] }] } });
1969
+ }], 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 }] }], 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 }] }] } });
1939
1970
 
1940
1971
  class XrmuiRibbon {
1941
1972
  fill = input(true, ...(ngDevMode ? [{ debugName: "fill" }] : []));