boruto-xrmui 1.0.0

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.
Files changed (5) hide show
  1. package/README.md +12 -0
  2. package/fesm2022/boruto-xrmui.mjs +1372 -0
  3. package/fesm2022/boruto-xrmui.mjs.map +1 -0
  4. package/package.json +25 -0
  5. package/types/boruto-xrmui.d.ts +394 -0
package/fesm2022/boruto-xrmui.mjs ADDED
@@ -0,0 +1,1372 @@
1
+ import * as i0 from '@angular/core';
2
+ import { ViewEncapsulation, Component, effect, input, output, HostListener, Directive, inject, ElementRef, Input, signal, ChangeDetectorRef, ViewChild, NgModule, Injectable, computed } from '@angular/core';
3
+ import { NgClass, NgStyle } from '@angular/common';
4
+ import { KoHorizontalScrollComponent as KoHorizontalScrollComponent$1, KoHorizontalSplitComponent as KoHorizontalSplitComponent$1, KoMainComponent as KoMainComponent$1, KoTitlePanelComponent as KoTitlePanelComponent$1, KoVerticalScrollComponent as KoVerticalScrollComponent$1, KoVerticalSplitComponent as KoVerticalSplitComponent$1, KoViewComponent as KoViewComponent$1, KoExpansionPanelComponent as KoExpansionPanelComponent$1, KoTablePanelComponent as KoTablePanelComponent$1, KoButtonGroupComponent as KoButtonGroupComponent$1, KoDecimalDirective as KoDecimalDirective$1, KoFocusDirective as KoFocusDirective$1, KoAlertComponent as KoAlertComponent$1, KoHeaderComponent as KoHeaderComponent$1, KoOverDirective as KoOverDirective$1, KoTopMenuComponent as KoTopMenuComponent$1, KoLeftMenuComponent as KoLeftMenuComponent$1, KoWriteDirective as KoWriteDirective$1, XrmuiInfo as XrmuiInfo$1, XrmuiPanel as XrmuiPanel$2, XrmuiIcon as XrmuiIcon$1 } from 'xrmui';
5
+ import { MatIcon } from '@angular/material/icon';
6
+ import { MatBadge } from '@angular/material/badge';
7
+ import { Subject, BehaviorSubject } from 'rxjs';
8
+ import { CdkDrag } from '@angular/cdk/drag-drop';
9
+
10
+ class KoButtonGroupComponent {
11
+ constructor() {
12
+ }
13
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
14
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: KoButtonGroupComponent, isStandalone: true, selector: "ko-button-group", ngImport: i0, template: "<ng-content></ng-content>", styles: ["ko-button-group{position:absolute;inset:0;padding:2px}ko-button-group input,ko-button-group button{display:inline-block;margin-left:2px}ko-button-group div.divider{display:inline-block;width:1px;height:20px;background-color:#d3d3d3;overflow:hidden;margin-left:2px}ko-button-group button{border:solid;border-width:1px 1px 1px 1px;border-color:#000;color:#000;background-color:#fff;padding:2px 5px;cursor:pointer}ko-button-group button:disabled,ko-button-group button[disabled]{border-color:#d3d3d3;color:#d3d3d3;cursor:not-allowed}ko-button-group button:hover{background-color:#d3d3d3}ko-button-group button:disabled:hover,ko-button-group button[disabled]:hover{background-color:#fff}\n"], encapsulation: i0.ViewEncapsulation.None });
15
+ }
16
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoButtonGroupComponent, decorators: [{
17
+ type: Component,
18
+ args: [{ selector: 'ko-button-group', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>", styles: ["ko-button-group{position:absolute;inset:0;padding:2px}ko-button-group input,ko-button-group button{display:inline-block;margin-left:2px}ko-button-group div.divider{display:inline-block;width:1px;height:20px;background-color:#d3d3d3;overflow:hidden;margin-left:2px}ko-button-group button{border:solid;border-width:1px 1px 1px 1px;border-color:#000;color:#000;background-color:#fff;padding:2px 5px;cursor:pointer}ko-button-group button:disabled,ko-button-group button[disabled]{border-color:#d3d3d3;color:#d3d3d3;cursor:not-allowed}ko-button-group button:hover{background-color:#d3d3d3}ko-button-group button:disabled:hover,ko-button-group button[disabled]:hover{background-color:#fff}\n"] }]
19
+ }], ctorParameters: () => [] });
20
+
21
+ class KoDecimalDirective {
22
+ el;
23
+ constructor(el) {
24
+ this.el = el;
25
+ effect(() => {
26
+ const align = this.align();
27
+ if (this.el.nativeElement) {
28
+ this.el.nativeElement.style['text-align'] = this.align();
29
+ }
30
+ });
31
+ effect(() => {
32
+ const v = this.value();
33
+ this.setValueString();
34
+ });
35
+ }
36
+ decimals = input(2, { ...(ngDevMode ? { debugName: "decimals" } : {}), alias: 'ko-decimals' });
37
+ value = input(null, { ...(ngDevMode ? { debugName: "value" } : {}), alias: 'ko-value' });
38
+ valueChanged = output({ alias: 'ko-valueChange' });
39
+ align = input('right', ...(ngDevMode ? [{ debugName: "align" }] : []));
40
+ controlDown = false;
41
+ syncThread;
42
+ onKeydown($event) {
43
+ switch ($event.key) {
44
+ case 'Backspace':
45
+ case 'Tab':
46
+ case 'ArrowLeft':
47
+ case 'ArrowRight':
48
+ case 'Delete':
49
+ case '0':
50
+ case '1':
51
+ case '2':
52
+ case '3':
53
+ case '4':
54
+ case '5':
55
+ case '6':
56
+ case '7':
57
+ case '8':
58
+ case '9':
59
+ case '-': {
60
+ this.bindValueBack();
61
+ return true;
62
+ }
63
+ case ',': {
64
+ if (this.decimals() == 0) {
65
+ return false;
66
+ }
67
+ this.bindValueBack();
68
+ return true;
69
+ }
70
+ case 'Control': {
71
+ this.controlDown = true;
72
+ this.bindValueBack();
73
+ return true;
74
+ }
75
+ case 'c':
76
+ case 'C':
77
+ case 'v':
78
+ case 'V': {
79
+ if (this.controlDown == true) {
80
+ this.bindValueBack();
81
+ return true;
82
+ }
83
+ $event.stopPropagation();
84
+ return false;
85
+ }
86
+ default: {
87
+ $event.stopPropagation();
88
+ return false;
89
+ }
90
+ }
91
+ }
92
+ onBlur() {
93
+ if (this.syncThread != null)
94
+ clearTimeout(this.syncThread);
95
+ this.syncThread = null;
96
+ this.doBindValueBack();
97
+ this.setValueString();
98
+ }
99
+ setValueString() {
100
+ if (this.el.nativeElement != null) {
101
+ const v = this.value();
102
+ if (v != null) {
103
+ this.el.nativeElement.value = this.numberToString(v, this.decimals());
104
+ }
105
+ else {
106
+ this.el.nativeElement.value = "";
107
+ }
108
+ }
109
+ }
110
+ bindValueBack(timeout = 3000) {
111
+ if (this.syncThread != null)
112
+ clearTimeout(this.syncThread);
113
+ this.syncThread = setTimeout(() => {
114
+ this.syncThread = null;
115
+ this.doBindValueBack();
116
+ }, timeout);
117
+ }
118
+ doBindValueBack() {
119
+ if (this.el.nativeElement != null) {
120
+ let v = this.el.nativeElement.value;
121
+ if (v == null || v == '') {
122
+ this.valueChanged.emit(null);
123
+ return;
124
+ }
125
+ else {
126
+ this.valueChanged.emit(Number(v.replace(',', '.')));
127
+ }
128
+ }
129
+ }
130
+ numberToString(value, decimals) {
131
+ if (value == null) {
132
+ return '';
133
+ }
134
+ if (decimals == null) {
135
+ return value.toString().replace('.', ',');
136
+ }
137
+ let result = value.toString().replace('.', ',');
138
+ if (decimals <= 0) {
139
+ var split = result.split(',');
140
+ if (split.length == 2 && Number(split[1]) > 0) {
141
+ return Math.round(value).toString().replace(".", ",").split(',')[0];
142
+ }
143
+ return result.split(',')[0];
144
+ }
145
+ if (result.indexOf(',') < 0) {
146
+ result += ',0';
147
+ }
148
+ let decimalPart = result.split(',')[1];
149
+ if (decimalPart.length == decimals) {
150
+ return result;
151
+ }
152
+ if (decimalPart.length <= decimals) {
153
+ return result.split(',')[0] + ',' + String(decimalPart + '00000000000000000' + decimalPart).substring(0, decimals);
154
+ }
155
+ var round = Number('1' + String('00000000000000000').slice((-1) * decimals));
156
+ var roundedValue = Math.round(value * round) / round;
157
+ return this.numberToString(roundedValue, decimals);
158
+ }
159
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoDecimalDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
160
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: KoDecimalDirective, isStandalone: true, selector: "[ko-decimal]", inputs: { decimals: { classPropertyName: "decimals", publicName: "ko-decimals", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ko-value", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "ko-valueChange" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "onBlur()" } }, ngImport: i0 });
161
+ }
162
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoDecimalDirective, decorators: [{
163
+ type: Directive,
164
+ args: [{
165
+ selector: '[ko-decimal]'
166
+ }]
167
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "ko-decimals", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ko-value", required: false }] }], valueChanged: [{ type: i0.Output, args: ["ko-valueChange"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], onKeydown: [{
168
+ type: HostListener,
169
+ args: ['keydown', ['$event']]
170
+ }], onBlur: [{
171
+ type: HostListener,
172
+ args: ['blur']
173
+ }] } });
174
+
175
+ class KoFocusDirective {
176
+ hostElement = inject(ElementRef);
177
+ focus = input(false, { ...(ngDevMode ? { debugName: "focus" } : {}), alias: 'ko-focus' });
178
+ focusChange = output({ alias: 'ko-focusChange' });
179
+ constructor() {
180
+ effect(() => {
181
+ const isFocused = this.focus();
182
+ if (isFocused) {
183
+ setTimeout(() => {
184
+ this.hostElement.nativeElement.focus();
185
+ this.focusChange.emit(false);
186
+ }, 10);
187
+ }
188
+ });
189
+ }
190
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
191
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: KoFocusDirective, isStandalone: true, selector: "[ko-focus]", inputs: { focus: { classPropertyName: "focus", publicName: "ko-focus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusChange: "ko-focusChange" }, ngImport: i0 });
192
+ }
193
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoFocusDirective, decorators: [{
194
+ type: Directive,
195
+ args: [{ selector: '[ko-focus]' }]
196
+ }], ctorParameters: () => [], propDecorators: { focus: [{ type: i0.Input, args: [{ isSignal: true, alias: "ko-focus", required: false }] }], focusChange: [{ type: i0.Output, args: ["ko-focusChange"] }] } });
197
+
198
+ class KoAlertComponent {
199
+ align = 'left';
200
+ constructor() {
201
+ }
202
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
203
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: KoAlertComponent, isStandalone: true, selector: "ko-alert", inputs: { align: "align" }, ngImport: i0, template: "<div [ngClass]=\"align\"><ng-content></ng-content></div>\r\n", styles: ["ko-alert{position:absolute;inset:0;transition:opacity 1s;overflow:hidden;border:none}ko-alert.warning{background-color:#fff19d;border:none}ko-alert:before{content:\"\";display:inline-block;vertical-align:middle;height:100%}ko-alert>div{display:inline-block;vertical-align:middle;margin-left:15px;margin-right:15px;font-size:large;width:calc(100% - 30px)}ko-alert>div.left{text-align:left}ko-alert div.right{text-align:right}ko-alert div.center{text-align:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
204
+ }
205
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoAlertComponent, decorators: [{
206
+ type: Component,
207
+ args: [{ selector: 'ko-alert', imports: [NgClass], encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"align\"><ng-content></ng-content></div>\r\n", styles: ["ko-alert{position:absolute;inset:0;transition:opacity 1s;overflow:hidden;border:none}ko-alert.warning{background-color:#fff19d;border:none}ko-alert:before{content:\"\";display:inline-block;vertical-align:middle;height:100%}ko-alert>div{display:inline-block;vertical-align:middle;margin-left:15px;margin-right:15px;font-size:large;width:calc(100% - 30px)}ko-alert>div.left{text-align:left}ko-alert div.right{text-align:right}ko-alert div.center{text-align:center}\n"] }]
208
+ }], ctorParameters: () => [], propDecorators: { align: [{
209
+ type: Input,
210
+ args: ['align']
211
+ }] } });
212
+
213
+ class KoHeaderComponent {
214
+ align = input('left', ...(ngDevMode ? [{ debugName: "align" }] : []));
215
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
216
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: KoHeaderComponent, isStandalone: true, selector: "ko-header", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngClass]=\"align()\"><ng-content></ng-content></div>\r\n", styles: ["ko-header{position:absolute;inset:0;transition:opacity 1s;overflow:hidden;border:none}ko-header.warning{background-color:#fff19d;border:none}ko-header:before{content:\"\";display:inline-block;vertical-align:middle;height:100%}ko-header>div{display:inline-block;vertical-align:middle;margin-left:15px;margin-right:15px;font-size:large;width:calc(100% - 30px)}ko-header>div.left{text-align:left}ko-header div.right{text-align:right}ko-header div.center{text-align:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
217
+ }
218
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoHeaderComponent, decorators: [{
219
+ type: Component,
220
+ args: [{ selector: 'ko-header', imports: [NgClass], encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"align()\"><ng-content></ng-content></div>\r\n", styles: ["ko-header{position:absolute;inset:0;transition:opacity 1s;overflow:hidden;border:none}ko-header.warning{background-color:#fff19d;border:none}ko-header:before{content:\"\";display:inline-block;vertical-align:middle;height:100%}ko-header>div{display:inline-block;vertical-align:middle;margin-left:15px;margin-right:15px;font-size:large;width:calc(100% - 30px)}ko-header>div.left{text-align:left}ko-header div.right{text-align:right}ko-header div.center{text-align:center}\n"] }]
221
+ }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
222
+
223
+ class KoWriteDirective {
224
+ direction = input('up', { ...(ngDevMode ? { debugName: "direction" } : {}), alias: 'ko-write' });
225
+ hostElement = inject(ElementRef);
226
+ constructor() {
227
+ effect(() => {
228
+ const dir = this.direction();
229
+ this.render();
230
+ });
231
+ }
232
+ render() {
233
+ var host = this.hostElement.nativeElement;
234
+ if (host.parentElement) {
235
+ var parent = host.parentElement;
236
+ parent.style.overflow = "hidden";
237
+ var h = parent.offsetHeight;
238
+ var w = parent.offsetWidth;
239
+ if (h && w) {
240
+ host.style.width = h.toString() + "px";
241
+ host.style.height = w.toString() + "px";
242
+ host.style.lineHeight = w.toString() + "px";
243
+ host.style.textAlign = "center";
244
+ host.style.position = "relative";
245
+ host.style.transformOrigin = "0% 0%";
246
+ host.style.display = "inline-block";
247
+ if (this.direction() == "up") {
248
+ host.style.transform = "rotate(-90deg)";
249
+ host.style.top = h.toString() + "px";
250
+ }
251
+ else {
252
+ host.style.transform = "rotate(90deg)";
253
+ host.style.left = w.toString() + "px";
254
+ }
255
+ }
256
+ }
257
+ }
258
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoWriteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
259
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: KoWriteDirective, isStandalone: true, selector: "[ko-write]", inputs: { direction: { classPropertyName: "direction", publicName: "ko-write", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
260
+ }
261
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoWriteDirective, decorators: [{
262
+ type: Directive,
263
+ args: [{ selector: '[ko-write]' }]
264
+ }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "ko-write", required: false }] }] } });
265
+
266
+ class KoDivider {
267
+ id;
268
+ title;
269
+ disabled;
270
+ click = null;
271
+ over = null;
272
+ cssClass = null;
273
+ imgUrl = null;
274
+ constructor() {
275
+ this.id = "##divider##";
276
+ this.title = "";
277
+ this.disabled = true;
278
+ }
279
+ }
280
+ class KoNavigationByCssClass {
281
+ id;
282
+ title = null;
283
+ disabled;
284
+ cssClass;
285
+ click;
286
+ over = null;
287
+ imgUrl = null;
288
+ constructor(id, cssClass, disabled = false, title = null, click = null) {
289
+ this.id = id;
290
+ this.title = title;
291
+ this.disabled = disabled;
292
+ this.cssClass = cssClass;
293
+ this.click = click;
294
+ }
295
+ }
296
+ class KoNavigationByImageUrl {
297
+ id;
298
+ title = null;
299
+ disabled;
300
+ imgUrl;
301
+ click;
302
+ over = null;
303
+ cssClass = null;
304
+ constructor(id, imgUrl, disabled = false, title = null, click = null) {
305
+ this.id = id;
306
+ this.title = null;
307
+ this.disabled = disabled;
308
+ this.imgUrl = imgUrl;
309
+ this.click = null;
310
+ }
311
+ }
312
+
313
+ class KoLeftMenuComponent {
314
+ er = inject(ElementRef);
315
+ items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
316
+ current = input(null, ...(ngDevMode ? [{ debugName: "current" }] : []));
317
+ currentChange = output();
318
+ itemheight$ = signal('', ...(ngDevMode ? [{ debugName: "itemheight$" }] : []));
319
+ over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
320
+ constructor() {
321
+ }
322
+ itemheight(v) {
323
+ if (v.id == "##divider##") {
324
+ return '2px';
325
+ }
326
+ return this.itemheight$();
327
+ }
328
+ ngAfterViewInit() {
329
+ setTimeout(() => {
330
+ this.itemheight$.set((this.er.nativeElement.offsetWidth - 40).toString() + "px");
331
+ }, 1);
332
+ }
333
+ setCurrent(item) {
334
+ if (!item.disabled) {
335
+ if (item.click == null) {
336
+ this.currentChange.emit(item.id);
337
+ }
338
+ else {
339
+ item.click();
340
+ }
341
+ }
342
+ }
343
+ overItem(v) {
344
+ if (v != null && !v.disabled) {
345
+ this.over.set(v);
346
+ }
347
+ }
348
+ outItem() {
349
+ this.over.set(null);
350
+ }
351
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoLeftMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
352
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: KoLeftMenuComponent, isStandalone: true, selector: "ko-left-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentChange: "currentChange" }, ngImport: i0, template: "@for(item of items(); track item) {\r\n<div\r\n (click)=\"setCurrent(item)\"\r\n class=\"ko-left-menu-item\"\r\n [ngClass]=\"{ current: item.id == current(), disabled: item.disabled == true && item.id != '##divider##', over: item == over(), divider: item.id == '##divider##' }\"\r\n (mouseover)=\"overItem(item)\"\r\n (mouseleave)=\"outItem()\"\r\n [style.height]=\"itemheight(item)\"\r\n >\r\n @if (item.title != null && item.title != '' && item.id != '##divider##' && item.cssClass == null && item.imgUrl == null){<span>{{ item.title }}</span>}\r\n @if (item.cssClass != null && item.cssClass != ''){ <span class=\"byclass\" [ngClass]=\"item.cssClass\" [title]=\"item.title\"></span> }\r\n @if (item.imgUrl != null){<img [src]=\"item.imgUrl\" [alt]=\"item.title\" />}\r\n</div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: ["ko-left-menu{position:absolute;inset:0;background-color:#000;color:#f5f5f5;display:block}ko-left-menu>div.ko-left-menu-item{background-color:#31353a;color:#f7f4f2;padding:20px;cursor:pointer;width:calc(100% - 40px)}ko-left-menu>div.ko-left-menu-item.disabled{color:#dee2e8;cursor:not-allowed}ko-left-menu>div.ko-left-menu-item.current{padding:20px 16px 20px 20px;border:solid;border-width:0 4px 0 0;border-color:#ce5206;color:#fff}ko-left-menu>div.ko-left-menu-item.over{color:#ce5206}ko-left-menu>div.ko-left-menu-item.divider{height:2px;cursor:none;padding:0;margin:0;width:calc(100% - 30px);border:solid;border-width:0 15px 0 15px;border-color:#31353a;background-color:#dee2e8;overflow:hidden}ko-left-menu span.byclass{display:inline-block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
353
+ }
354
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoLeftMenuComponent, decorators: [{
355
+ type: Component,
356
+ args: [{ selector: 'ko-left-menu', imports: [NgClass], encapsulation: ViewEncapsulation.None, template: "@for(item of items(); track item) {\r\n<div\r\n (click)=\"setCurrent(item)\"\r\n class=\"ko-left-menu-item\"\r\n [ngClass]=\"{ current: item.id == current(), disabled: item.disabled == true && item.id != '##divider##', over: item == over(), divider: item.id == '##divider##' }\"\r\n (mouseover)=\"overItem(item)\"\r\n (mouseleave)=\"outItem()\"\r\n [style.height]=\"itemheight(item)\"\r\n >\r\n @if (item.title != null && item.title != '' && item.id != '##divider##' && item.cssClass == null && item.imgUrl == null){<span>{{ item.title }}</span>}\r\n @if (item.cssClass != null && item.cssClass != ''){ <span class=\"byclass\" [ngClass]=\"item.cssClass\" [title]=\"item.title\"></span> }\r\n @if (item.imgUrl != null){<img [src]=\"item.imgUrl\" [alt]=\"item.title\" />}\r\n</div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: ["ko-left-menu{position:absolute;inset:0;background-color:#000;color:#f5f5f5;display:block}ko-left-menu>div.ko-left-menu-item{background-color:#31353a;color:#f7f4f2;padding:20px;cursor:pointer;width:calc(100% - 40px)}ko-left-menu>div.ko-left-menu-item.disabled{color:#dee2e8;cursor:not-allowed}ko-left-menu>div.ko-left-menu-item.current{padding:20px 16px 20px 20px;border:solid;border-width:0 4px 0 0;border-color:#ce5206;color:#fff}ko-left-menu>div.ko-left-menu-item.over{color:#ce5206}ko-left-menu>div.ko-left-menu-item.divider{height:2px;cursor:none;padding:0;margin:0;width:calc(100% - 30px);border:solid;border-width:0 15px 0 15px;border-color:#31353a;background-color:#dee2e8;overflow:hidden}ko-left-menu span.byclass{display:inline-block;width:100%;height:100%}\n"] }]
357
+ }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], currentChange: [{ type: i0.Output, args: ["currentChange"] }] } });
358
+
359
+ class KoTopMenuComponent {
360
+ er = inject(ElementRef);
361
+ items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
362
+ current = input(null, ...(ngDevMode ? [{ debugName: "current" }] : []));
363
+ currentChange = output();
364
+ over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
365
+ topcornerwidth = signal('', ...(ngDevMode ? [{ debugName: "topcornerwidth" }] : []));
366
+ constructor() {
367
+ }
368
+ ngAfterViewInit() {
369
+ setTimeout(() => {
370
+ this.topcornerwidth.set(this.er.nativeElement.offsetHeight.toString() + "px");
371
+ }, 1);
372
+ }
373
+ setCurrent(item) {
374
+ if (!item.disabled) {
375
+ if (item.click == null) {
376
+ this.currentChange.emit(item.id);
377
+ }
378
+ else {
379
+ item.click();
380
+ }
381
+ }
382
+ }
383
+ itemwidth(v) {
384
+ if (v.id == "##divider##") {
385
+ return '0';
386
+ }
387
+ return this.topcornerwidth();
388
+ }
389
+ overItem(v) {
390
+ if (v != null && !v.disabled) {
391
+ this.over.set(v);
392
+ }
393
+ }
394
+ outItem() {
395
+ this.over.set(null);
396
+ }
397
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoTopMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
398
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: KoTopMenuComponent, isStandalone: true, selector: "ko-top-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentChange: "currentChange" }, ngImport: i0, template: "<div class=\"ko-top-menu-corner\" [style.width]=\"topcornerwidth()\"></div>\r\n@for (item of items(); track item) {\r\n<div (click)=\"setCurrent(item)\"\r\n class=\"ko-top-menu-item\"\r\n [ngClass]=\"{ current: item.id == current(), disabled: item.disabled == true && item.id != '##divider##', over: item == over(), divider: item.id == '##divider##' }\"\r\n (mouseover)=\"overItem(item)\"\r\n (mouseleave)=\"outItem()\"\r\n [style.width]=\"itemwidth(item)\">\r\n @if (item.title != null && item.title != '' && item.id != '##divider##' && item.cssClass==null && item.imgUrl==null) {<span>{{ item.title }}</span>}\r\n @if (item.cssClass != null && item.cssClass != ''){<span class=\"byclass\" [ngClass]=\"item.cssClass\" [title]=\"item.title\"></span>}\r\n @if (item.imgUrl != null) {<img [src]=\"item.imgUrl\" [alt]=\"item.title\" />}\r\n</div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: ["ko-top-menu{position:absolute;inset:0;background-color:#000;color:#f5f5f5}ko-top-menu>div.ko-top-menu-corner{height:100%;float:left;cursor:none}ko-top-menu>div.ko-top-menu-item{height:100%;box-sizing:border-box;background-color:#31353a;color:#f7f4f2;padding:20px;display:block;float:left;cursor:pointer}ko-top-menu>div.ko-top-menu-item.disabled{color:#dee2e8;cursor:not-allowed}ko-top-menu>div.ko-top-menu-item.current{padding:20px 20px 16px;border:solid;border-width:0 0 4px 0;border-color:#ce5206;color:#fff}ko-top-menu>div.ko-top-menu-item.over{color:#ce5206}ko-top-menu>div.ko-top-menu-item.divider{width:0;cursor:none;padding:0;margin:0;box-sizing:border-box;height:100%;line-height:0;border:solid;border-width:0 2px 0 0;border-color:#dee2e8;background-color:#31353a;overflow:hidden}ko-top-menu span.byclass{display:inline-block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
399
+ }
400
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoTopMenuComponent, decorators: [{
401
+ type: Component,
402
+ args: [{ selector: 'ko-top-menu', imports: [NgClass], encapsulation: ViewEncapsulation.None, template: "<div class=\"ko-top-menu-corner\" [style.width]=\"topcornerwidth()\"></div>\r\n@for (item of items(); track item) {\r\n<div (click)=\"setCurrent(item)\"\r\n class=\"ko-top-menu-item\"\r\n [ngClass]=\"{ current: item.id == current(), disabled: item.disabled == true && item.id != '##divider##', over: item == over(), divider: item.id == '##divider##' }\"\r\n (mouseover)=\"overItem(item)\"\r\n (mouseleave)=\"outItem()\"\r\n [style.width]=\"itemwidth(item)\">\r\n @if (item.title != null && item.title != '' && item.id != '##divider##' && item.cssClass==null && item.imgUrl==null) {<span>{{ item.title }}</span>}\r\n @if (item.cssClass != null && item.cssClass != ''){<span class=\"byclass\" [ngClass]=\"item.cssClass\" [title]=\"item.title\"></span>}\r\n @if (item.imgUrl != null) {<img [src]=\"item.imgUrl\" [alt]=\"item.title\" />}\r\n</div>\r\n}\r\n<ng-content></ng-content>\r\n", styles: ["ko-top-menu{position:absolute;inset:0;background-color:#000;color:#f5f5f5}ko-top-menu>div.ko-top-menu-corner{height:100%;float:left;cursor:none}ko-top-menu>div.ko-top-menu-item{height:100%;box-sizing:border-box;background-color:#31353a;color:#f7f4f2;padding:20px;display:block;float:left;cursor:pointer}ko-top-menu>div.ko-top-menu-item.disabled{color:#dee2e8;cursor:not-allowed}ko-top-menu>div.ko-top-menu-item.current{padding:20px 20px 16px;border:solid;border-width:0 0 4px 0;border-color:#ce5206;color:#fff}ko-top-menu>div.ko-top-menu-item.over{color:#ce5206}ko-top-menu>div.ko-top-menu-item.divider{width:0;cursor:none;padding:0;margin:0;box-sizing:border-box;height:100%;line-height:0;border:solid;border-width:0 2px 0 0;border-color:#dee2e8;background-color:#31353a;overflow:hidden}ko-top-menu span.byclass{display:inline-block;width:100%;height:100%}\n"] }]
403
+ }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], currentChange: [{ type: i0.Output, args: ["currentChange"] }] } });
404
+
405
+ class KoOverDirective {
406
+ el = inject(ElementRef);
407
+ constructor() {
408
+ }
409
+ current = input.required({ ...(ngDevMode ? { debugName: "current" } : {}), alias: 'ko-over' });
410
+ onMouseover($event) {
411
+ const me = this.current();
412
+ if (this.current != null) {
413
+ me['over'] = true;
414
+ }
415
+ }
416
+ onMouseleave($event) {
417
+ const me = this.current();
418
+ if (this.current != null) {
419
+ delete me['over'];
420
+ }
421
+ }
422
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoOverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
423
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: KoOverDirective, isStandalone: true, selector: "[ko-over]", inputs: { current: { classPropertyName: "current", publicName: "ko-over", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseover($event)", "mouseleave": "onMouseleave($event)" } }, ngImport: i0 });
424
+ }
425
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoOverDirective, decorators: [{
426
+ type: Directive,
427
+ args: [{
428
+ selector: '[ko-over]'
429
+ }]
430
+ }], ctorParameters: () => [], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "ko-over", required: true }] }], onMouseover: [{
431
+ type: HostListener,
432
+ args: ['mouseover', ['$event']]
433
+ }], onMouseleave: [{
434
+ type: HostListener,
435
+ args: ['mouseleave', ['$event']]
436
+ }] } });
437
+
438
+ class KoExpansionPanelComponent {
439
+ expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
440
+ expandedChange = output();
441
+ isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
442
+ constructor() {
443
+ effect(() => {
444
+ this.isExpanded.set(this.expanded());
445
+ });
446
+ }
447
+ toggle() {
448
+ this.isExpanded.set(!this.isExpanded());
449
+ this.expandedChange.emit(this.isExpanded());
450
+ }
451
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
452
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: KoExpansionPanelComponent, isStandalone: true, selector: "ko-expansion-panel", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div class=\"ko-container\">\r\n <div class=\"ko-title\">\r\n <div style=\"position: relative; width: 100%\">\r\n <div style=\"position: absolute; left: -25px; height: 40px; width: 20px; text-align: center; vertical-align: middle; cursor: pointer\" (click)=\"toggle()\">\r\n @if (!isExpanded()){<span class=\"fa fa-angle-up\"></span>}\r\n @if (isExpanded()){<span class=\"fa fa-angle-down\"></span>}\r\n </div>\r\n </div>\r\n <div (click)=\"toggle()\" style=\"cursor: pointer\"><ng-content select=\"[ko-title]\"></ng-content></div>\r\n </div>\r\n @if (isExpanded()) {\r\n <div class=\"ko-body\">\r\n <ng-content select=\"[ko-body]\"></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["ko-expansion-panel{display:block}ko-expansion-panel .ko-container{width:100%}ko-expansion-panel .ko-container .ko-title{margin-left:20px;margin-right:20px;height:40px;border:solid;border-width:0 0 1px 0;border-color:#a1a7af;line-height:40px;padding-left:5px}ko-expansion-panel .ko-container .ko-body{margin:20px}\n"], encapsulation: i0.ViewEncapsulation.None });
453
+ }
454
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoExpansionPanelComponent, decorators: [{
455
+ type: Component,
456
+ args: [{ selector: 'ko-expansion-panel', imports: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"ko-container\">\r\n <div class=\"ko-title\">\r\n <div style=\"position: relative; width: 100%\">\r\n <div style=\"position: absolute; left: -25px; height: 40px; width: 20px; text-align: center; vertical-align: middle; cursor: pointer\" (click)=\"toggle()\">\r\n @if (!isExpanded()){<span class=\"fa fa-angle-up\"></span>}\r\n @if (isExpanded()){<span class=\"fa fa-angle-down\"></span>}\r\n </div>\r\n </div>\r\n <div (click)=\"toggle()\" style=\"cursor: pointer\"><ng-content select=\"[ko-title]\"></ng-content></div>\r\n </div>\r\n @if (isExpanded()) {\r\n <div class=\"ko-body\">\r\n <ng-content select=\"[ko-body]\"></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["ko-expansion-panel{display:block}ko-expansion-panel .ko-container{width:100%}ko-expansion-panel .ko-container .ko-title{margin-left:20px;margin-right:20px;height:40px;border:solid;border-width:0 0 1px 0;border-color:#a1a7af;line-height:40px;padding-left:5px}ko-expansion-panel .ko-container .ko-body{margin:20px}\n"] }]
457
+ }], ctorParameters: () => [], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
458
+
459
+ class KoHorizontalScrollComponent {
460
+ constructor() {
461
+ }
462
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoHorizontalScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
463
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: KoHorizontalScrollComponent, isStandalone: true, selector: "ko-horizontal-scroll", ngImport: i0, template: "<ng-content></ng-content>", styles: ["ko-horizontal-scroll{position:absolute;inset:0;overflow-y:hidden;overflow-x:scroll;display:block}\n"], encapsulation: i0.ViewEncapsulation.None });
464
+ }
465
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoHorizontalScrollComponent, decorators: [{
466
+ type: Component,
467
+ args: [{ selector: 'ko-horizontal-scroll', imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>", styles: ["ko-horizontal-scroll{position:absolute;inset:0;overflow-y:hidden;overflow-x:scroll;display:block}\n"] }]
468
+ }], ctorParameters: () => [] });
469
+
470
+ class KoHorizontalSplitComponent {
471
+ height = input("50%", ...(ngDevMode ? [{ debugName: "height" }] : []));
472
+ fixed = input('top', ...(ngDevMode ? [{ debugName: "fixed" }] : []));
473
+ constructor() {
474
+ effect(() => {
475
+ const h = this.height();
476
+ const f = this.fixed();
477
+ this.init();
478
+ });
479
+ }
480
+ topStyle;
481
+ bottomStyle;
482
+ init() {
483
+ if (this.fixed() == 'top') {
484
+ this.topStyle = {
485
+ height: this.height()
486
+ };
487
+ this.bottomStyle = {
488
+ top: this.height()
489
+ };
490
+ }
491
+ else {
492
+ this.topStyle = {
493
+ bottom: this.height()
494
+ };
495
+ this.bottomStyle = {
496
+ height: this.height()
497
+ };
498
+ }
499
+ }
500
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoHorizontalSplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
501
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: KoHorizontalSplitComponent, isStandalone: true, selector: "ko-horizontal-split", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ko-top\" [ngStyle]=\"topStyle\">\r\n <ng-content select=\"[ko-top]\"></ng-content>\r\n</div>\r\n<div class=\"ko-bottom\" [ngStyle]=\"bottomStyle\">\r\n <ng-content select=\"[ko-bottom]\"></ng-content>\r\n</div>\r\n", styles: ["ko-horizontal-split{position:absolute;inset:0;display:block}ko-horizontal-split .ko-top{position:absolute;top:0;left:0;right:0;border:solid;border-width:0 0 1px 0;border-color:#d3d3d3}ko-horizontal-split.raw .ko-top,ko-horizontal-split.raw .ko-bottom{border:none;margin:0;padding:0}ko-horizontal-split .ko-bottom{position:absolute;bottom:0;left:0;right:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
502
+ }
503
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoHorizontalSplitComponent, decorators: [{
504
+ type: Component,
505
+ args: [{ selector: 'ko-horizontal-split', imports: [NgStyle], encapsulation: ViewEncapsulation.None, template: "<div class=\"ko-top\" [ngStyle]=\"topStyle\">\r\n <ng-content select=\"[ko-top]\"></ng-content>\r\n</div>\r\n<div class=\"ko-bottom\" [ngStyle]=\"bottomStyle\">\r\n <ng-content select=\"[ko-bottom]\"></ng-content>\r\n</div>\r\n", styles: ["ko-horizontal-split{position:absolute;inset:0;display:block}ko-horizontal-split .ko-top{position:absolute;top:0;left:0;right:0;border:solid;border-width:0 0 1px 0;border-color:#d3d3d3}ko-horizontal-split.raw .ko-top,ko-horizontal-split.raw .ko-bottom{border:none;margin:0;padding:0}ko-horizontal-split .ko-bottom{position:absolute;bottom:0;left:0;right:0}\n"] }]
506
+ }], ctorParameters: () => [], propDecorators: { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }] } });
507
+
508
+ class KoMainComponent {
509
+ constructor() {
510
+ }
511
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
512
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: KoMainComponent, isStandalone: true, selector: "ko-main", ngImport: i0, template: "<ng-content></ng-content>", styles: ["ko-main{position:absolute;inset:0;overflow:hidden;display:block}\n"], encapsulation: i0.ViewEncapsulation.None });
513
+ }
514
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoMainComponent, decorators: [{
515
+ type: Component,
516
+ args: [{ selector: 'ko-main', imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>", styles: ["ko-main{position:absolute;inset:0;overflow:hidden;display:block}\n"] }]
517
+ }], ctorParameters: () => [] });
518
+
519
+ class KoTablePanelComponent {
520
+ tableheader;
521
+ tablebody;
522
+ tablefooter;
523
+ height = input('40px', ...(ngDevMode ? [{ debugName: "height" }] : []));
524
+ cdRef = inject(ChangeDetectorRef);
525
+ constructor() {
526
+ effect(() => {
527
+ const h = this.height();
528
+ this.doSetStyle();
529
+ });
530
+ }
531
+ topHeight;
532
+ fotHeight;
533
+ hasTop = true;
534
+ hasFot = true;
535
+ topStyle = signal({}, ...(ngDevMode ? [{ debugName: "topStyle" }] : []));
536
+ bodStyle = signal({}, ...(ngDevMode ? [{ debugName: "bodStyle" }] : []));
537
+ fotStyle = signal({}, ...(ngDevMode ? [{ debugName: "fotStyle" }] : []));
538
+ ngAfterViewInit() {
539
+ this.hasTop = this.tableheader.nativeElement != null && this.tableheader.nativeElement.children.length > 0;
540
+ this.hasFot = this.tablefooter.nativeElement != null && this.tablefooter.nativeElement.children.length > 0;
541
+ this.cdRef.detectChanges();
542
+ this.setStyle();
543
+ }
544
+ updateScroll() {
545
+ const header = this.tableheader.nativeElement;
546
+ const body = this.tablebody.nativeElement;
547
+ const footer = this.tablefooter.nativeElement;
548
+ var toScroll = this.hasFot ? footer.scrollLeft : body.scrollLeft;
549
+ if (this.hasTop) {
550
+ header.scrollLeft = toScroll;
551
+ }
552
+ if (this.hasFot) {
553
+ footer.scrollLeft = toScroll;
554
+ }
555
+ body.scrollLeft = toScroll;
556
+ }
557
+ setStyle() {
558
+ var spl = this.height().split(' ');
559
+ if (spl.length == 2) {
560
+ this.topHeight = spl[0];
561
+ this.fotHeight = spl[1];
562
+ }
563
+ else {
564
+ this.topHeight = spl[0];
565
+ this.fotHeight = spl[0];
566
+ }
567
+ setTimeout(() => this.doSetStyle(), 10);
568
+ }
569
+ doSetStyle() {
570
+ if (this.hasTop && this.hasFot) {
571
+ this.topStyle.set({
572
+ height: this.topHeight,
573
+ display: 'block'
574
+ });
575
+ this.bodStyle.set({
576
+ top: this.topHeight,
577
+ bottom: this.fotHeight,
578
+ "overflow-x": "hidden"
579
+ });
580
+ this.fotStyle.set({
581
+ height: this.fotHeight,
582
+ display: ' block'
583
+ });
584
+ return;
585
+ }
586
+ if (this.hasTop && !this.hasFot) {
587
+ this.topStyle.set({
588
+ height: this.topHeight,
589
+ display: 'block'
590
+ });
591
+ this.bodStyle.set({
592
+ top: this.topHeight,
593
+ bottom: 0,
594
+ "overflow-x": "auto"
595
+ });
596
+ this.fotStyle.set({
597
+ display: 'none'
598
+ });
599
+ return;
600
+ }
601
+ if (!this.hasTop && this.hasFot) {
602
+ this.topStyle.set({
603
+ display: 'none'
604
+ });
605
+ this.bodStyle.set({
606
+ top: 0,
607
+ bottom: this.fotHeight
608
+ });
609
+ this.fotStyle.set({
610
+ height: this.fotHeight,
611
+ display: 'block'
612
+ });
613
+ return;
614
+ }
615
+ if (!this.hasTop && !this.hasFot) {
616
+ this.topStyle.set({
617
+ display: 'none'
618
+ });
619
+ this.bodStyle.set({
620
+ top: 0,
621
+ bottom: 0
622
+ });
623
+ this.fotStyle.set({
624
+ display: 'none'
625
+ });
626
+ }
627
+ }
628
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoTablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
629
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: KoTablePanelComponent, isStandalone: true, selector: "ko-table-panel", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tableheader", first: true, predicate: ["tableheader"], descendants: true }, { propertyName: "tablebody", first: true, predicate: ["tablebody"], descendants: true }, { propertyName: "tablefooter", first: true, predicate: ["tablefooter"], descendants: true }], ngImport: i0, template: "<div class=\"ko-table\">\r\n <div class=\"ko-table-header\" [ngStyle]=\"topStyle()\" #tableheader>\r\n <ng-content select=\"[ko-table-header]\"></ng-content>\r\n </div>\r\n <div class=\"ko-table-body\" [ngStyle]=\"bodStyle()\" #tablebody (scroll)=\"updateScroll()\">\r\n <ng-content select=\"[ko-table-body]\"></ng-content>\r\n </div>\r\n <div class=\"ko-table-footer\" [ngStyle]=\"fotStyle()\" #tablefooter (scroll)=\"updateScroll()\">\r\n <ng-content select=\"[ko-table-footer]\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["ko-table-panel{position:absolute;inset:0;display:block}ko-table-panel table{table-layout:fixed;width:100%}ko-table-panel div.ko-table{position:absolute;inset:0}ko-table-panel div.ko-table-header{position:absolute;left:0;right:0;top:0;height:40px;border:none;overflow:hidden;white-space:nowrap}ko-table-panel div.ko-table-body{position:absolute;left:0;right:0;border:none;overflow-x:auto;overflow-y:scroll}ko-table-panel div.ko-table-footer{position:absolute;left:0;right:0;bottom:0;height:40px;border:none;overflow:auto;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
630
+ }
631
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoTablePanelComponent, decorators: [{
632
+ type: Component,
633
+ args: [{ selector: 'ko-table-panel', imports: [NgStyle], encapsulation: ViewEncapsulation.None, template: "<div class=\"ko-table\">\r\n <div class=\"ko-table-header\" [ngStyle]=\"topStyle()\" #tableheader>\r\n <ng-content select=\"[ko-table-header]\"></ng-content>\r\n </div>\r\n <div class=\"ko-table-body\" [ngStyle]=\"bodStyle()\" #tablebody (scroll)=\"updateScroll()\">\r\n <ng-content select=\"[ko-table-body]\"></ng-content>\r\n </div>\r\n <div class=\"ko-table-footer\" [ngStyle]=\"fotStyle()\" #tablefooter (scroll)=\"updateScroll()\">\r\n <ng-content select=\"[ko-table-footer]\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["ko-table-panel{position:absolute;inset:0;display:block}ko-table-panel table{table-layout:fixed;width:100%}ko-table-panel div.ko-table{position:absolute;inset:0}ko-table-panel div.ko-table-header{position:absolute;left:0;right:0;top:0;height:40px;border:none;overflow:hidden;white-space:nowrap}ko-table-panel div.ko-table-body{position:absolute;left:0;right:0;border:none;overflow-x:auto;overflow-y:scroll}ko-table-panel div.ko-table-footer{position:absolute;left:0;right:0;bottom:0;height:40px;border:none;overflow:auto;white-space:nowrap}\n"] }]
634
+ }], ctorParameters: () => [], propDecorators: { tableheader: [{
635
+ type: ViewChild,
636
+ args: ['tableheader']
637
+ }], tablebody: [{
638
+ type: ViewChild,
639
+ args: ['tablebody']
640
+ }], tablefooter: [{
641
+ type: ViewChild,
642
+ args: ['tablefooter']
643
+ }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
644
+
645
+ class KoTitlePanelComponent {
646
+ constructor() {
647
+ }
648
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoTitlePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
649
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: KoTitlePanelComponent, isStandalone: true, selector: "ko-title-panel", ngImport: i0, template: "<div class=\"ko-container\">\r\n <div class=\"ko-title\">\r\n <ng-content select=\"[ko-title]\"></ng-content>\r\n </div>\r\n <div class=\"ko-body\">\r\n <ng-content select=\"[ko-body]\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["ko-title-panel{position:absolute;inset:0;display:block}ko-title-panel .ko-container{position:absolute;inset:5px;border:solid;border-width:1px 1px 1px 1px;border-color:#00000020;border-radius:4px}ko-title-panel.raw .ko-container{position:absolute;inset:0;border:none;border-radius:unset}ko-title-panel .ko-container .ko-title{position:absolute;left:0;right:0;top:0;height:50px;padding:4px;background-color:#00000008;border-bottom:1px solid rgba(0,0,0,.125)}:ko-title-panel.raw .ko-container .ko-title{padding:0;border:none}ko-title-panel.no-padding .ko-container .ko-title{padding:0}ko-title-panel .ko-container .ko-body{position:absolute;inset:55px 0 0;overflow-x:hidden;overflow-y:auto;padding:4px}ko-title-panel.raw .ko-container .ko-body{padding:0}ko-title-panel.no-padding .ko-container .ko-body{padding:0}\n"], encapsulation: i0.ViewEncapsulation.None });
650
+ }
651
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoTitlePanelComponent, decorators: [{
652
+ type: Component,
653
+ args: [{ selector: 'ko-title-panel', imports: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"ko-container\">\r\n <div class=\"ko-title\">\r\n <ng-content select=\"[ko-title]\"></ng-content>\r\n </div>\r\n <div class=\"ko-body\">\r\n <ng-content select=\"[ko-body]\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["ko-title-panel{position:absolute;inset:0;display:block}ko-title-panel .ko-container{position:absolute;inset:5px;border:solid;border-width:1px 1px 1px 1px;border-color:#00000020;border-radius:4px}ko-title-panel.raw .ko-container{position:absolute;inset:0;border:none;border-radius:unset}ko-title-panel .ko-container .ko-title{position:absolute;left:0;right:0;top:0;height:50px;padding:4px;background-color:#00000008;border-bottom:1px solid rgba(0,0,0,.125)}:ko-title-panel.raw .ko-container .ko-title{padding:0;border:none}ko-title-panel.no-padding .ko-container .ko-title{padding:0}ko-title-panel .ko-container .ko-body{position:absolute;inset:55px 0 0;overflow-x:hidden;overflow-y:auto;padding:4px}ko-title-panel.raw .ko-container .ko-body{padding:0}ko-title-panel.no-padding .ko-container .ko-body{padding:0}\n"] }]
654
+ }], ctorParameters: () => [] });
655
+
656
+ class KoVerticalScrollComponent {
657
+ constructor() {
658
+ }
659
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoVerticalScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
660
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: KoVerticalScrollComponent, isStandalone: true, selector: "ko-vertical-scroll", ngImport: i0, template: "<ng-content></ng-content>", styles: ["ko-vertical-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:scroll;display:block}\n"], encapsulation: i0.ViewEncapsulation.None });
661
+ }
662
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoVerticalScrollComponent, decorators: [{
663
+ type: Component,
664
+ args: [{ selector: 'ko-vertical-scroll', imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>", styles: ["ko-vertical-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:scroll;display:block}\n"] }]
665
+ }], ctorParameters: () => [] });
666
+
667
+ class KoViewComponent {
668
+ constructor() {
669
+ }
670
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
671
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: KoViewComponent, isStandalone: true, selector: "ko-view", ngImport: i0, template: "<ng-content></ng-content>", styles: ["ko-view{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;padding:2px;display:block}ko-view.no-padding{padding:0;overflow-x:initial;overflow-y:initial}ko-view.pad20{overflow-x:hidden;overflow-y:auto;padding:20px}\n"], encapsulation: i0.ViewEncapsulation.None });
672
+ }
673
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoViewComponent, decorators: [{
674
+ type: Component,
675
+ args: [{ selector: 'ko-view', imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>", styles: ["ko-view{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;padding:2px;display:block}ko-view.no-padding{padding:0;overflow-x:initial;overflow-y:initial}ko-view.pad20{overflow-x:hidden;overflow-y:auto;padding:20px}\n"] }]
676
+ }], ctorParameters: () => [] });
677
+
678
+ class KoVerticalSplitComponent {
679
+ width = input('50%', ...(ngDevMode ? [{ debugName: "width" }] : []));
680
+ fixed = input('left', ...(ngDevMode ? [{ debugName: "fixed" }] : []));
681
+ constructor() {
682
+ effect(() => {
683
+ const w = this.width();
684
+ const f = this.fixed();
685
+ this.init();
686
+ });
687
+ }
688
+ leftStyle = signal({}, ...(ngDevMode ? [{ debugName: "leftStyle" }] : []));
689
+ rightStyle = signal({}, ...(ngDevMode ? [{ debugName: "rightStyle" }] : []));
690
+ init() {
691
+ if (this.fixed() == 'left') {
692
+ this.leftStyle.set({
693
+ width: this.width()
694
+ });
695
+ this.rightStyle.set({
696
+ left: this.width()
697
+ });
698
+ }
699
+ else {
700
+ this.leftStyle.set({
701
+ right: this.width()
702
+ });
703
+ this.rightStyle.set({
704
+ width: this.width()
705
+ });
706
+ }
707
+ }
708
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoVerticalSplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
709
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: KoVerticalSplitComponent, isStandalone: true, selector: "ko-vertical-split", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ko-left\" [ngStyle]=\"leftStyle()\">\r\n <ng-content select=\"[ko-left]\"></ng-content>\r\n</div>\r\n<div class=\"ko-right\" [ngStyle]=\"rightStyle()\">\r\n <ng-content select=\"[ko-right]\"></ng-content>\r\n</div>\r\n", styles: ["ko-vertical-split{position:absolute;inset:0}ko-vertical-split .ko-left{position:absolute;top:0;left:0;bottom:0;border:solid;border-width:0 1px 0 0;border-color:#d3d3d3}ko-vertical-split .ko-right{position:absolute;top:0;bottom:0;right:0}ko-vertical-split.raw .ko-left,ko-vertical-split.raw .ko-right{border:none;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
710
+ }
711
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KoVerticalSplitComponent, decorators: [{
712
+ type: Component,
713
+ args: [{ selector: 'ko-vertical-split', imports: [NgStyle], encapsulation: ViewEncapsulation.None, template: "<div class=\"ko-left\" [ngStyle]=\"leftStyle()\">\r\n <ng-content select=\"[ko-left]\"></ng-content>\r\n</div>\r\n<div class=\"ko-right\" [ngStyle]=\"rightStyle()\">\r\n <ng-content select=\"[ko-right]\"></ng-content>\r\n</div>\r\n", styles: ["ko-vertical-split{position:absolute;inset:0}ko-vertical-split .ko-left{position:absolute;top:0;left:0;bottom:0;border:solid;border-width:0 1px 0 0;border-color:#d3d3d3}ko-vertical-split .ko-right{position:absolute;top:0;bottom:0;right:0}ko-vertical-split.raw .ko-left,ko-vertical-split.raw .ko-right{border:none;margin:0;padding:0}\n"] }]
714
+ }], ctorParameters: () => [], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }] } });
715
+
716
+ class KiponUiModule {
717
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KiponUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
718
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: KiponUiModule, imports: [KoHorizontalScrollComponent$1,
719
+ KoHorizontalSplitComponent$1,
720
+ KoMainComponent$1,
721
+ KoTitlePanelComponent$1,
722
+ KoVerticalScrollComponent$1,
723
+ KoVerticalSplitComponent$1,
724
+ KoViewComponent$1,
725
+ KoExpansionPanelComponent$1,
726
+ KoTablePanelComponent$1,
727
+ KoButtonGroupComponent$1,
728
+ KoDecimalDirective$1,
729
+ KoFocusDirective$1,
730
+ KoAlertComponent$1,
731
+ KoHeaderComponent$1,
732
+ KoOverDirective$1,
733
+ KoTopMenuComponent$1,
734
+ KoLeftMenuComponent$1,
735
+ KoWriteDirective$1], exports: [KoHorizontalScrollComponent$1,
736
+ KoHorizontalSplitComponent$1,
737
+ KoMainComponent$1,
738
+ KoTitlePanelComponent$1,
739
+ KoVerticalScrollComponent$1,
740
+ KoVerticalSplitComponent$1,
741
+ KoViewComponent$1,
742
+ KoExpansionPanelComponent$1,
743
+ KoTablePanelComponent$1,
744
+ KoButtonGroupComponent$1,
745
+ KoDecimalDirective$1,
746
+ KoFocusDirective$1,
747
+ KoAlertComponent$1,
748
+ KoHeaderComponent$1,
749
+ KoOverDirective$1,
750
+ KoTopMenuComponent$1,
751
+ KoLeftMenuComponent$1,
752
+ KoWriteDirective$1] });
753
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KiponUiModule });
754
+ }
755
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: KiponUiModule, decorators: [{
756
+ type: NgModule,
757
+ args: [{
758
+ imports: [
759
+ KoHorizontalScrollComponent$1,
760
+ KoHorizontalSplitComponent$1,
761
+ KoMainComponent$1,
762
+ KoTitlePanelComponent$1,
763
+ KoVerticalScrollComponent$1,
764
+ KoVerticalSplitComponent$1,
765
+ KoViewComponent$1,
766
+ KoExpansionPanelComponent$1,
767
+ KoTablePanelComponent$1,
768
+ KoButtonGroupComponent$1,
769
+ KoDecimalDirective$1,
770
+ KoFocusDirective$1,
771
+ KoAlertComponent$1,
772
+ KoHeaderComponent$1,
773
+ KoOverDirective$1,
774
+ KoTopMenuComponent$1,
775
+ KoLeftMenuComponent$1,
776
+ KoWriteDirective$1
777
+ ],
778
+ exports: [
779
+ KoHorizontalScrollComponent$1,
780
+ KoHorizontalSplitComponent$1,
781
+ KoMainComponent$1,
782
+ KoTitlePanelComponent$1,
783
+ KoVerticalScrollComponent$1,
784
+ KoVerticalSplitComponent$1,
785
+ KoViewComponent$1,
786
+ KoExpansionPanelComponent$1,
787
+ KoTablePanelComponent$1,
788
+ KoButtonGroupComponent$1,
789
+ KoDecimalDirective$1,
790
+ KoFocusDirective$1,
791
+ KoAlertComponent$1,
792
+ KoHeaderComponent$1,
793
+ KoOverDirective$1,
794
+ KoTopMenuComponent$1,
795
+ KoLeftMenuComponent$1,
796
+ KoWriteDirective$1
797
+ ]
798
+ }]
799
+ }] });
800
+
801
+ class SelectedService {
802
+ selectedItems = {};
803
+ notSelectedItems = {};
804
+ lastSelectedItems = {};
805
+ binds = {};
806
+ keys = [];
807
+ nots = [];
808
+ counts = {};
809
+ resetFilter$;
810
+ constructor() {
811
+ this.resetFilter$ = new Subject();
812
+ }
813
+ resetAll() {
814
+ this.resetFilter$.next();
815
+ }
816
+ reset() {
817
+ return this.resetFilter$;
818
+ }
819
+ get(key) {
820
+ if (this.selectedItems[key] != null) {
821
+ return this.selectedItems[key];
822
+ }
823
+ this.selectedItems[key] = new BehaviorSubject({ selected: [], empty: false, loaded: false });
824
+ this.lastSelectedItems[key] = { selected: [], empty: false, loaded: false };
825
+ this.keys.push(key);
826
+ return this.selectedItems[key];
827
+ }
828
+ count(key) {
829
+ if (this.counts[key] != null) {
830
+ return this.counts[key];
831
+ }
832
+ const con = this.get(key);
833
+ this.counts[key] = signal(con.value.selected.length);
834
+ return this.counts[key];
835
+ }
836
+ bind(service) {
837
+ this.binds[service.key] = service;
838
+ }
839
+ not(key) {
840
+ if (this.notSelectedItems[key] != null) {
841
+ return this.notSelectedItems[key];
842
+ }
843
+ this.notSelectedItems[key] = new BehaviorSubject(false);
844
+ this.nots.push(key);
845
+ return this.notSelectedItems[key];
846
+ }
847
+ push(key, values) {
848
+ const selector = this.binds[key];
849
+ if (selector != null && selector != undefined) {
850
+ selector.items().value.forEach(r => {
851
+ r.selected = values.find(v => v == r.id) != null;
852
+ });
853
+ const tobepublished = selector.items().value.filter(r => r.selected == true).map(r => r.id);
854
+ this.publish(key, tobepublished, false);
855
+ }
856
+ else {
857
+ throw '[' + key + ']' + ' er ikke blevet bundet til service';
858
+ }
859
+ }
860
+ publish(key, values, empty) {
861
+ var beh = this.get(key);
862
+ var value = beh.value;
863
+ value.selected = values;
864
+ value.empty = empty;
865
+ var las = this.lastSelectedItems[key];
866
+ if (!las.loaded || !this.isSame(value, las)) {
867
+ las.loaded = true;
868
+ las.empty = value.empty;
869
+ las.selected = value.selected;
870
+ beh.next(value);
871
+ }
872
+ if (this.counts[key] != null) {
873
+ this.counts[key].set(values.length);
874
+ }
875
+ }
876
+ silentUnselectAll(items) {
877
+ if (items != undefined) {
878
+ items.value.forEach(r => { r.selected = false; });
879
+ }
880
+ }
881
+ toggleNot(k) {
882
+ const n = this.not(k);
883
+ const next = !n.value;
884
+ n.next(next);
885
+ }
886
+ clearAllNots() {
887
+ this.nots.forEach(n => {
888
+ if (this.notSelectedItems[n].value == true) {
889
+ this.notSelectedItems[n].next(false);
890
+ }
891
+ });
892
+ }
893
+ isSame(next, last) {
894
+ if (next.empty != last.empty)
895
+ return false;
896
+ if (next.selected.length != last.selected.length)
897
+ return false;
898
+ for (var i = 0; i < next.selected.length; i++) {
899
+ if (next.selected[i] != last.selected[i]) {
900
+ return false;
901
+ }
902
+ }
903
+ return true;
904
+ }
905
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
906
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectedService, providedIn: 'root' });
907
+ }
908
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectedService, decorators: [{
909
+ type: Injectable,
910
+ args: [{ providedIn: 'root' }]
911
+ }], ctorParameters: () => [] });
912
+
913
+ class XrmuiInfo {
914
+ selectedService = inject(SelectedService);
915
+ label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
916
+ onlyshowselected = input(false, ...(ngDevMode ? [{ debugName: "onlyshowselected" }] : []));
917
+ items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
918
+ icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
919
+ click = output();
920
+ clear = output();
921
+ badget = input(...(ngDevMode ? [undefined, { debugName: "badget" }] : []));
922
+ list$;
923
+ list = [];
924
+ select$;
925
+ grouped = [];
926
+ over = null;
927
+ isnot = false;
928
+ isnot$;
929
+ constructor() {
930
+ }
931
+ ngOnInit() {
932
+ const service = this.items();
933
+ if (service != null) {
934
+ this.select$ = this.selectedService.get(service.key).subscribe(v => {
935
+ this.list = this.list.filter(v => v.selected == true);
936
+ });
937
+ this.list$ = service.items().subscribe(r => {
938
+ this.list = r.filter(v => v.selected == true);
939
+ this.doGrouping();
940
+ });
941
+ }
942
+ else {
943
+ this.list$?.unsubscribe();
944
+ this.select$?.unsubscribe();
945
+ this.isnot$?.unsubscribe();
946
+ this.list = [];
947
+ this.doGrouping();
948
+ }
949
+ }
950
+ ngOnDestroy() {
951
+ this.list$?.unsubscribe();
952
+ this.isnot$?.unsubscribe();
953
+ this.select$?.unsubscribe();
954
+ }
955
+ onClick() {
956
+ this.click.emit();
957
+ }
958
+ doClear() {
959
+ this.clear.emit();
960
+ }
961
+ isover(v) {
962
+ this.over = v;
963
+ }
964
+ isout() {
965
+ this.over = null;
966
+ }
967
+ remove(e, v) {
968
+ e.stopImmediatePropagation();
969
+ const it = this.items();
970
+ if (it) {
971
+ v.selected = false;
972
+ this.list = this.list.filter(r => r.selected == true);
973
+ const sn = this.list.filter(r => r.selected == true).map(r => r.id);
974
+ this.selectedService.publish(it.key, sn, false);
975
+ this.doGrouping();
976
+ }
977
+ }
978
+ doGrouping() {
979
+ this.grouped = [];
980
+ let lastGroup = undefined;
981
+ const result = [];
982
+ this.list.forEach(v => {
983
+ if (v.selected == true) {
984
+ if (lastGroup == undefined) {
985
+ lastGroup = { group: v.group, items: [v] };
986
+ result.push(lastGroup);
987
+ return;
988
+ }
989
+ if (lastGroup.group == v.group) {
990
+ lastGroup.items.push(v);
991
+ return;
992
+ }
993
+ lastGroup = { group: v.group, items: [v] };
994
+ result.push(lastGroup);
995
+ }
996
+ });
997
+ this.grouped = result;
998
+ }
999
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XrmuiInfo, deps: [], target: i0.ɵɵFactoryTarget.Component });
1000
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: XrmuiInfo, isStandalone: true, selector: "xrmui-info", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, onlyshowselected: { classPropertyName: "onlyshowselected", publicName: "onlyshowselected", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badget: { classPropertyName: "badget", publicName: "badget", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", clear: "clear" }, ngImport: i0, template: "@if (!onlyshowselected() || list.length > 0) {\r\n <div class=\"line\" (click)=\"onClick()\">\r\n @if (icon() != undefined){\r\n <div class=\"ic\">\r\n @let bad = badget() ?? 0;\r\n @if ( bad == 0) {<mat-icon fontSet=\"material-symbols-outlined\">{{ icon() }}</mat-icon>}\r\n @if (bad > 0) {<mat-icon fontSet=\"material-symbols-outlined\" [matBadge]=\"badget()\" aria-hidden=\"false\">{{ icon()\r\n }}</mat-icon>}\r\n </div>}\r\n @if (label() != undefined){<div class=\"lab\">{{ label() }}</div>}\r\n <div class=\"con\">\r\n <ng-content></ng-content>\r\n @if (list.length > 0) {\r\n @for(gr of grouped; track gr) {\r\n @if (gr.group != undefined && gr.group != '') {\r\n <div class=\"selected-item\"><b>{{ gr.group }}</b></div>\r\n }\r\n @for(li of gr.items; track li) {\r\n <div class=\"selected-item\" (mouseover)=\"isover(li)\" (mouseleave)=\"isout()\">\r\n <div class=\"selected-item-name\">{{ li.name }}</div>\r\n @if (over == li){<div class=\"selected-item-tool\" title=\"Fjern fra valgt listen\"\r\n (click)=\"remove($event, li)\"><mat-icon fontSet=\"material-symbols-outlined\"\r\n style=\"color: gray; font-size: small; height: 16px\">delete</mat-icon></div>}\r\n </div>\r\n }\r\n }\r\n }\r\n </div>\r\n </div>\r\n }", styles: [":host{font-size:small;cursor:pointer;display:block}:host div.line{display:flex}:host div.ic{width:40px;min-width:40px;text-align:center;padding:3px 0;border:solid;border-width:0 1px 0 0}:host div.lab{width:100px;height:24px;line-height:24px;font-weight:700;padding-left:3px}:host div.con{flex-grow:1;min-height:24px;line-height:24px;overflow-x:hidden;overflow-y:hidden}:host div.toggler{height:30px;width:20px}:host div.selected-item{flex-grow:1;display:flex;position:relative}:host div.selected-item-name{flex-grow:1}:host div.selected-item-tool{position:absolute;z-index:1000;right:10px;top:5px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] });
1001
+ }
1002
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XrmuiInfo, decorators: [{
1003
+ type: Component,
1004
+ args: [{ selector: 'xrmui-info', imports: [MatIcon, MatBadge], template: "@if (!onlyshowselected() || list.length > 0) {\r\n <div class=\"line\" (click)=\"onClick()\">\r\n @if (icon() != undefined){\r\n <div class=\"ic\">\r\n @let bad = badget() ?? 0;\r\n @if ( bad == 0) {<mat-icon fontSet=\"material-symbols-outlined\">{{ icon() }}</mat-icon>}\r\n @if (bad > 0) {<mat-icon fontSet=\"material-symbols-outlined\" [matBadge]=\"badget()\" aria-hidden=\"false\">{{ icon()\r\n }}</mat-icon>}\r\n </div>}\r\n @if (label() != undefined){<div class=\"lab\">{{ label() }}</div>}\r\n <div class=\"con\">\r\n <ng-content></ng-content>\r\n @if (list.length > 0) {\r\n @for(gr of grouped; track gr) {\r\n @if (gr.group != undefined && gr.group != '') {\r\n <div class=\"selected-item\"><b>{{ gr.group }}</b></div>\r\n }\r\n @for(li of gr.items; track li) {\r\n <div class=\"selected-item\" (mouseover)=\"isover(li)\" (mouseleave)=\"isout()\">\r\n <div class=\"selected-item-name\">{{ li.name }}</div>\r\n @if (over == li){<div class=\"selected-item-tool\" title=\"Fjern fra valgt listen\"\r\n (click)=\"remove($event, li)\"><mat-icon fontSet=\"material-symbols-outlined\"\r\n style=\"color: gray; font-size: small; height: 16px\">delete</mat-icon></div>}\r\n </div>\r\n }\r\n }\r\n }\r\n </div>\r\n </div>\r\n }", styles: [":host{font-size:small;cursor:pointer;display:block}:host div.line{display:flex}:host div.ic{width:40px;min-width:40px;text-align:center;padding:3px 0;border:solid;border-width:0 1px 0 0}:host div.lab{width:100px;height:24px;line-height:24px;font-weight:700;padding-left:3px}:host div.con{flex-grow:1;min-height:24px;line-height:24px;overflow-x:hidden;overflow-y:hidden}:host div.toggler{height:30px;width:20px}:host div.selected-item{flex-grow:1;display:flex;position:relative}:host div.selected-item-name{flex-grow:1}:host div.selected-item-tool{position:absolute;z-index:1000;right:10px;top:5px}\n"] }]
1005
+ }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], onlyshowselected: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyshowselected", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], clear: [{ type: i0.Output, args: ["clear"] }], badget: [{ type: i0.Input, args: [{ isSignal: true, alias: "badget", required: false }] }] } });
1006
+
1007
+ let XrmuiPanel$1 = class XrmuiPanel {
1008
+ orientation = 'horizontal';
1009
+ top = '';
1010
+ bottom = '';
1011
+ height = '';
1012
+ left = '';
1013
+ right = '';
1014
+ width = '';
1015
+ style = '';
1016
+ resizeStyle = '';
1017
+ dyn = false;
1018
+ index = 0;
1019
+ initialWidth = 0;
1020
+ initialHeight = 0;
1021
+ render(isresize = false) {
1022
+ this.style = '';
1023
+ this.add('top', this.top);
1024
+ this.add('bottom', this.bottom);
1025
+ this.add('height', this.height);
1026
+ this.add('left', this.left);
1027
+ this.add('right', this.right);
1028
+ this.add('width', this.width);
1029
+ if (!isresize && this.orientation == 'vertical') {
1030
+ this.resizeStyle = 'left: ' + this.width;
1031
+ this.initialWidth = Number(this.width.replace('px', ''));
1032
+ }
1033
+ if (!isresize && this.orientation == 'horizontal') {
1034
+ this.resizeStyle = 'top: ' + this.height;
1035
+ this.initialHeight = Number(this.height.replace('px', ''));
1036
+ }
1037
+ }
1038
+ add(s, v) {
1039
+ if (v != '') {
1040
+ if (this.style.length > 0) {
1041
+ this.style += ";";
1042
+ }
1043
+ this.style += s + ": " + v;
1044
+ }
1045
+ }
1046
+ moveTo(pixel, next) {
1047
+ if (this.orientation == 'vertical') {
1048
+ // vertical increase/decrease width on current
1049
+ // vertical increase/decrease left on next
1050
+ const newWidth = this.initialWidth + pixel;
1051
+ this.width = newWidth + 'px';
1052
+ next.left = newWidth + 'px';
1053
+ this.render(true);
1054
+ next.render(true);
1055
+ }
1056
+ if (this.orientation == 'horizontal') {
1057
+ const newHeight = this.initialHeight + pixel;
1058
+ this.height = newHeight + 'px';
1059
+ next.top = newHeight + 'px';
1060
+ this.render(true);
1061
+ next.render(true);
1062
+ }
1063
+ }
1064
+ endResize() {
1065
+ if (this.orientation == 'vertical') {
1066
+ this.initialWidth = Number(this.width.replace('px', ''));
1067
+ }
1068
+ if (this.orientation == 'horizontal') {
1069
+ this.initialHeight = Number(this.height.replace('px', ''));
1070
+ }
1071
+ }
1072
+ };
1073
+
1074
+ class XrmuiLayout {
1075
+ _panels = input('', { ...(ngDevMode ? { debugName: "_panels" } : {}), alias: 'panels' });
1076
+ _orientation = input('horizontal', { ...(ngDevMode ? { debugName: "_orientation" } : {}), alias: 'orientation' });
1077
+ _resizeable = input(false, { ...(ngDevMode ? { debugName: "_resizeable" } : {}), alias: 'resizeable' });
1078
+ panels = signal('', ...(ngDevMode ? [{ debugName: "panels" }] : []));
1079
+ orientation = signal('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
1080
+ resizeable = signal(false, ...(ngDevMode ? [{ debugName: "resizeable" }] : []));
1081
+ totalHeight = 0;
1082
+ totalWidth = 0;
1083
+ unit = 'px';
1084
+ panellist$ = signal([], ...(ngDevMode ? [{ debugName: "panellist$" }] : []));
1085
+ panellist = this.panellist$.asReadonly();
1086
+ element = inject(ElementRef);
1087
+ constructor() {
1088
+ effect(() => {
1089
+ this.panels.set(this._panels());
1090
+ this.orientation.set(this._orientation());
1091
+ this.resizeable.set(this._resizeable());
1092
+ });
1093
+ }
1094
+ resizeObserver;
1095
+ ngAfterViewInit() {
1096
+ this.resizeObserver = new ResizeObserver(entries => {
1097
+ const width = entries[0].contentRect.width;
1098
+ if (width > 0) {
1099
+ this.render();
1100
+ }
1101
+ });
1102
+ this.resizeObserver.observe(this.element.nativeElement);
1103
+ }
1104
+ ngOnDestroy() {
1105
+ this.resizeObserver?.disconnect();
1106
+ }
1107
+ render() {
1108
+ this.totalWidth = this.element.nativeElement.offsetWidth;
1109
+ this.totalHeight = this.element.nativeElement.clientHeight;
1110
+ const nextpanellist = [];
1111
+ // If panels are resizeable, we will work in px only
1112
+ if (this.resizeable() && this.panels() != null && this.panels().length > 1) {
1113
+ const ps = [];
1114
+ let used = 0;
1115
+ this.panels().split(',').forEach(r => {
1116
+ if (r == '?') {
1117
+ ps.push(r);
1118
+ return;
1119
+ }
1120
+ if (r.indexOf('px') >= 0) {
1121
+ used += this.sizeToNumber(r);
1122
+ ps.push(r);
1123
+ return;
1124
+ }
1125
+ const pct = this.sizeToNumber(r);
1126
+ if (this.orientation() == 'vertical') {
1127
+ const next = Math.round(this.totalWidth * pct / 100);
1128
+ used += next;
1129
+ ps.push(next.toString() + 'px');
1130
+ }
1131
+ else {
1132
+ const next = Math.round(this.totalHeight * pct / 100);
1133
+ used += next;
1134
+ ps.push(next.toString() + 'px');
1135
+ }
1136
+ });
1137
+ let left = this.totalHeight - used;
1138
+ if (this.orientation() == 'vertical') {
1139
+ left = this.totalWidth - used;
1140
+ }
1141
+ var freeIndex = ps.indexOf('?');
1142
+ if (freeIndex >= 0 && freeIndex < (ps.length - 1)) {
1143
+ ps[freeIndex] = left.toString() + 'px';
1144
+ ps[ps.length - 1] = '?';
1145
+ }
1146
+ this.panels.set(ps.join(','));
1147
+ }
1148
+ if (this.panels().length > 0) {
1149
+ var numbers = this.getNumbers();
1150
+ var countOpen = numbers.filter(r => r == -1).length;
1151
+ if (numbers.length > 5) {
1152
+ throw new Error("A maximum of 5 containers is supported");
1153
+ }
1154
+ var bind = 'top';
1155
+ var currentcursor = 0;
1156
+ if (countOpen > 1) {
1157
+ throw new Error('Only one open container is supported');
1158
+ }
1159
+ for (var i = 0; i < numbers.length; i++) {
1160
+ var num = numbers[i];
1161
+ var next = new XrmuiPanel$1();
1162
+ next.index = i;
1163
+ next.orientation = this.orientation();
1164
+ if (num > 0 && bind == 'top') {
1165
+ if (this.orientation() == 'horizontal') {
1166
+ next.top = currentcursor.toString() + this.toUnit(currentcursor);
1167
+ next.height = num.toString() + this.unit;
1168
+ }
1169
+ else {
1170
+ next.left = currentcursor.toString() + this.toUnit(currentcursor);
1171
+ next.width = num.toString() + this.unit;
1172
+ }
1173
+ currentcursor += num;
1174
+ nextpanellist.push(next);
1175
+ continue;
1176
+ }
1177
+ if (num == -1) {
1178
+ var sum = this.sumAfter(numbers, i);
1179
+ if (this.orientation() == 'horizontal') {
1180
+ next.top = currentcursor.toString() + this.toUnit(currentcursor);
1181
+ next.bottom = sum.toString() + this.toUnit(sum);
1182
+ }
1183
+ else {
1184
+ next.left = currentcursor.toString() + this.toUnit(currentcursor);
1185
+ next.right = sum.toString() + this.toUnit(sum);
1186
+ }
1187
+ next.dyn = true;
1188
+ nextpanellist.push(next);
1189
+ bind = 'bottom';
1190
+ continue;
1191
+ }
1192
+ if (num >= 0 && bind == 'bottom') {
1193
+ var sum = this.sumAfter(numbers, i);
1194
+ if (this.orientation() == 'horizontal') {
1195
+ next.bottom = sum.toString() + this.toUnit(sum);
1196
+ next.height = num.toString() + this.unit;
1197
+ }
1198
+ else {
1199
+ next.right = sum.toString() + this.toUnit(sum);
1200
+ next.width = num.toString() + this.unit;
1201
+ }
1202
+ nextpanellist.push(next);
1203
+ continue;
1204
+ }
1205
+ throw new Error("Unexpected handle of elements");
1206
+ }
1207
+ nextpanellist.forEach(p => p.render());
1208
+ this.panellist$.set(nextpanellist);
1209
+ }
1210
+ }
1211
+ resize(e, panel) {
1212
+ const d = e['distance'];
1213
+ if (panel.orientation == 'vertical') {
1214
+ panel.moveTo(d.x, this.panellist$()[panel.index + 1]);
1215
+ }
1216
+ if (panel.orientation == 'horizontal') {
1217
+ panel.moveTo(d.y, this.panellist$()[panel.index + 1]);
1218
+ }
1219
+ }
1220
+ drop(e, panel) {
1221
+ panel.endResize();
1222
+ }
1223
+ toUnit(n) {
1224
+ if (n > 0) {
1225
+ return this.unit;
1226
+ }
1227
+ return '';
1228
+ }
1229
+ getNumbers() {
1230
+ this.unit = 'px';
1231
+ var result = [];
1232
+ if (this.panels().length > 0) {
1233
+ var unitAssigned = false;
1234
+ this.panels().split(',').forEach(r => {
1235
+ if (r.indexOf('px') >= 0) {
1236
+ if (unitAssigned && this.unit != 'px') {
1237
+ throw new Error("unit can only be assigned once and must be consistent. Unit already set to " + this.unit);
1238
+ }
1239
+ this.unit = 'px';
1240
+ unitAssigned = true;
1241
+ }
1242
+ if (r.indexOf('%') >= 0) {
1243
+ if (unitAssigned && this.unit != '%') {
1244
+ throw new Error("unit can only be assigned once and must be consistent. Unit already set to " + this.unit);
1245
+ }
1246
+ this.unit = '%';
1247
+ unitAssigned = true;
1248
+ }
1249
+ if (r == '?') {
1250
+ result.push(-1);
1251
+ }
1252
+ else {
1253
+ result.push(this.sizeToNumber(r));
1254
+ }
1255
+ });
1256
+ }
1257
+ return result;
1258
+ }
1259
+ sizeToNumber(r) {
1260
+ return Number(r.replace('px', '').replace('%', ''));
1261
+ }
1262
+ sumAfter(numbers, index) {
1263
+ var result = 0;
1264
+ for (var i = index + 1; i < numbers.length; i++) {
1265
+ result += numbers[i];
1266
+ }
1267
+ return result;
1268
+ }
1269
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XrmuiLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
1270
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: XrmuiLayout, isStandalone: true, selector: "xrmui-layout", inputs: { _panels: { classPropertyName: "_panels", publicName: "panels", isSignal: true, isRequired: false, transformFunction: null }, _orientation: { classPropertyName: "_orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, _resizeable: { classPropertyName: "_resizeable", publicName: "resizeable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (panellist().length >= 1) {\r\n <div [style]=\"panellist()[0].style\" [ngClass]=\"{ dynamics: panellist()[0].dyn, horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\">\r\n <ng-content select=\"[C1]\"></ng-content>\r\n </div>\r\n\r\n @if (panellist().length > 1 && resizeable()) {\r\n <div \r\n [style]=\"panellist()[0].resizeStyle\" \r\n class=\"resizer\" \r\n cdkDrag \r\n [cdkDragLockAxis]=\"orientation() == 'horizontal' ? 'y' : 'x'\" \r\n (cdkDragMoved)=\"resize($event, panellist()[0])\"\r\n (cdkDragEnded)=\"drop($event, panellist()[0])\"\r\n [ngClass]=\"{ horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\"></div>\r\n }\r\n}\r\n@if (panellist().length >= 2) {\r\n <div [style]=\"panellist()[1].style\" [ngClass]=\"{ dynamics: panellist()[1].dyn, horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\"><ng-content select=\"[C2]\"></ng-content></div>\r\n}\r\n@if (panellist().length >= 3) {\r\n <div [style]=\"panellist()[2].style\" [ngClass]=\"{ dynamics: panellist()[2].dyn, horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\"><ng-content select=\"[C3]\"></ng-content></div>\r\n}\r\n@if (panellist().length >= 4) {\r\n <div [style]=\"panellist()[3].style\" [ngClass]=\"{ dynamics: panellist()[3].dyn, horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\"><ng-content select=\"[C4]\"></ng-content></div>\r\n}\r\n@if (panellist().length == 5) {\r\n <div [style]=\"panellist()[4].style\" [ngClass]=\"{ dynamics: panellist()[4].dyn, horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\"><ng-content select=\"[C5]\"></ng-content></div>\r\n}", styles: [":host{position:absolute;inset:0;margin:0;padding:0;overflow:hidden;display:block}:host div.horizontal{position:absolute;left:0;right:0;overflow:hidden}:host div.vertical{position:absolute;top:0;bottom:0;overflow:hidden}:host div.dynamic{overflow-x:hidden;overflow-y:auto}:host div.vertical.resizer{position:absolute;top:0;bottom:0;width:1px;background-color:transparent;cursor:pointer;z-index:1;cursor:ew-resize}:host div.vertical.resizer:hover{width:3px;background-color:#a9a9a9}:host div.horizontal.resizer{position:absolute;left:0;right:0;height:1px;background-color:transparent;cursor:pointer;z-index:1;cursor:ns-resize}:host div.horizontal.resizer:hover{height:3px;background-color:#a9a9a9}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
1271
+ }
1272
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XrmuiLayout, decorators: [{
1273
+ type: Component,
1274
+ args: [{ selector: 'xrmui-layout', imports: [CdkDrag, NgClass], template: "@if (panellist().length >= 1) {\r\n <div [style]=\"panellist()[0].style\" [ngClass]=\"{ dynamics: panellist()[0].dyn, horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\">\r\n <ng-content select=\"[C1]\"></ng-content>\r\n </div>\r\n\r\n @if (panellist().length > 1 && resizeable()) {\r\n <div \r\n [style]=\"panellist()[0].resizeStyle\" \r\n class=\"resizer\" \r\n cdkDrag \r\n [cdkDragLockAxis]=\"orientation() == 'horizontal' ? 'y' : 'x'\" \r\n (cdkDragMoved)=\"resize($event, panellist()[0])\"\r\n (cdkDragEnded)=\"drop($event, panellist()[0])\"\r\n [ngClass]=\"{ horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\"></div>\r\n }\r\n}\r\n@if (panellist().length >= 2) {\r\n <div [style]=\"panellist()[1].style\" [ngClass]=\"{ dynamics: panellist()[1].dyn, horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\"><ng-content select=\"[C2]\"></ng-content></div>\r\n}\r\n@if (panellist().length >= 3) {\r\n <div [style]=\"panellist()[2].style\" [ngClass]=\"{ dynamics: panellist()[2].dyn, horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\"><ng-content select=\"[C3]\"></ng-content></div>\r\n}\r\n@if (panellist().length >= 4) {\r\n <div [style]=\"panellist()[3].style\" [ngClass]=\"{ dynamics: panellist()[3].dyn, horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\"><ng-content select=\"[C4]\"></ng-content></div>\r\n}\r\n@if (panellist().length == 5) {\r\n <div [style]=\"panellist()[4].style\" [ngClass]=\"{ dynamics: panellist()[4].dyn, horizontal: orientation() == 'horizontal', vertical: orientation() == 'vertical'}\"><ng-content select=\"[C5]\"></ng-content></div>\r\n}", styles: [":host{position:absolute;inset:0;margin:0;padding:0;overflow:hidden;display:block}:host div.horizontal{position:absolute;left:0;right:0;overflow:hidden}:host div.vertical{position:absolute;top:0;bottom:0;overflow:hidden}:host div.dynamic{overflow-x:hidden;overflow-y:auto}:host div.vertical.resizer{position:absolute;top:0;bottom:0;width:1px;background-color:transparent;cursor:pointer;z-index:1;cursor:ew-resize}:host div.vertical.resizer:hover{width:3px;background-color:#a9a9a9}:host div.horizontal.resizer{position:absolute;left:0;right:0;height:1px;background-color:transparent;cursor:pointer;z-index:1;cursor:ns-resize}:host div.horizontal.resizer:hover{height:3px;background-color:#a9a9a9}\n"] }]
1275
+ }], ctorParameters: () => [], propDecorators: { _panels: [{ type: i0.Input, args: [{ isSignal: true, alias: "panels", required: false }] }], _orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], _resizeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeable", required: false }] }] } });
1276
+
1277
+ class XrmuiPanel {
1278
+ constructor() {
1279
+ }
1280
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XrmuiPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
1281
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: XrmuiPanel, isStandalone: true, selector: "xrmui-panel", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{position:absolute;inset:0;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;display:block}\n"] });
1282
+ }
1283
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XrmuiPanel, decorators: [{
1284
+ type: Component,
1285
+ args: [{ selector: 'xrmui-panel', imports: [], template: "<ng-content></ng-content>", styles: [":host{position:absolute;inset:0;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;display:block}\n"] }]
1286
+ }], ctorParameters: () => [] });
1287
+
1288
+ class XrmuiIcon {
1289
+ host = inject(ElementRef);
1290
+ _icon = input('', { ...(ngDevMode ? { debugName: "_icon" } : {}), alias: 'icon' });
1291
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
1292
+ type = input('mat', ...(ngDevMode ? [{ debugName: "type" }] : []));
1293
+ icon = signal('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
1294
+ classes = computed(() => {
1295
+ const i = this.icon();
1296
+ const d = this.disabled();
1297
+ const t = this.type();
1298
+ if (t == 'mat') {
1299
+ if (d)
1300
+ return ["disabled"];
1301
+ return [];
1302
+ }
1303
+ if (d) {
1304
+ return ['fa', i, 'disabled'];
1305
+ }
1306
+ return ['fa', i];
1307
+ }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
1308
+ constructor() {
1309
+ effect(() => {
1310
+ const i = this._icon();
1311
+ if (i != '') {
1312
+ this.icon.set(i);
1313
+ }
1314
+ });
1315
+ }
1316
+ ngAfterContentInit() {
1317
+ const i = this._icon();
1318
+ if (i == '') {
1319
+ const content = this.host.nativeElement.textContent?.trim() ?? '';
1320
+ if (content != '') {
1321
+ this.icon.set(content);
1322
+ }
1323
+ }
1324
+ }
1325
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XrmuiIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
1326
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: XrmuiIcon, isStandalone: true, selector: "xrmui-icon", inputs: { _icon: { classPropertyName: "_icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span style=\"display: none;\"><ng-content></ng-content></span>\r\n@if (icon() != '') {\r\n@if (type() == 'mat') {\r\n <mat-icon [ngClass]=\"classes()\" fontSet=\"material-symbols-outlined\">{{ icon() }}</mat-icon>\r\n}\r\n@if (type() == 'fa') {\r\n <i [ngClass]=\"classes()\"></i>\r\n}\r\n}", styles: [":host mat-icon.disabled{opacity:20%}:host .fa.disabled{opacity:20%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
1327
+ }
1328
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: XrmuiIcon, decorators: [{
1329
+ type: Component,
1330
+ args: [{ selector: 'xrmui-icon', imports: [NgClass, MatIcon], template: "<span style=\"display: none;\"><ng-content></ng-content></span>\r\n@if (icon() != '') {\r\n@if (type() == 'mat') {\r\n <mat-icon [ngClass]=\"classes()\" fontSet=\"material-symbols-outlined\">{{ icon() }}</mat-icon>\r\n}\r\n@if (type() == 'fa') {\r\n <i [ngClass]=\"classes()\"></i>\r\n}\r\n}", styles: [":host mat-icon.disabled{opacity:20%}:host .fa.disabled{opacity:20%}\n"] }]
1331
+ }], ctorParameters: () => [], propDecorators: { _icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
1332
+
1333
+ class BorutoXrmUIModule {
1334
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BorutoXrmUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1335
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: BorutoXrmUIModule, imports: [XrmuiInfo$1,
1336
+ XrmuiLayout,
1337
+ XrmuiPanel$2,
1338
+ XrmuiIcon$1], exports: [XrmuiInfo$1,
1339
+ XrmuiLayout,
1340
+ XrmuiPanel$2,
1341
+ XrmuiIcon$1] });
1342
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BorutoXrmUIModule, imports: [XrmuiInfo$1,
1343
+ XrmuiIcon$1] });
1344
+ }
1345
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BorutoXrmUIModule, decorators: [{
1346
+ type: NgModule,
1347
+ args: [{
1348
+ imports: [
1349
+ XrmuiInfo$1,
1350
+ XrmuiLayout,
1351
+ XrmuiPanel$2,
1352
+ XrmuiIcon$1
1353
+ ],
1354
+ exports: [
1355
+ XrmuiInfo$1,
1356
+ XrmuiLayout,
1357
+ XrmuiPanel$2,
1358
+ XrmuiIcon$1
1359
+ ]
1360
+ }]
1361
+ }] });
1362
+
1363
+ /*
1364
+ * Public API Surface of Old Kipon UI
1365
+ */
1366
+
1367
+ /**
1368
+ * Generated bundle index. Do not edit.
1369
+ */
1370
+
1371
+ export { BorutoXrmUIModule, KiponUiModule, KoAlertComponent, KoButtonGroupComponent, KoDecimalDirective, KoDivider, KoExpansionPanelComponent, KoFocusDirective, KoHeaderComponent, KoHorizontalScrollComponent, KoHorizontalSplitComponent, KoLeftMenuComponent, KoMainComponent, KoNavigationByCssClass, KoNavigationByImageUrl, KoOverDirective, KoTablePanelComponent, KoTitlePanelComponent, KoTopMenuComponent, KoVerticalScrollComponent, KoVerticalSplitComponent, KoViewComponent, KoWriteDirective, XrmuiIcon, XrmuiInfo, XrmuiLayout, XrmuiPanel };
1372
+ //# sourceMappingURL=boruto-xrmui.mjs.map