boruto-xrmui 1.22.9 → 1.22.11

package/fesm2022/boruto-xrmui.mjs

@@ -2326,6 +2326,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
             args: [{ selector: 'xrmui-tabs', imports: [NgClass, MatIcon, MatBadge, MatButtonModule, MatMenuModule, MatIconModule], changeDetection: ChangeDetectionStrategy.Eager, providers: [], template: "<div class=\"xrmui-tabs\">\r\n@for (tab of tabs(); track tab; let idx = $index) {\r\n    @if (tab.visible == undefined || tab.visible()) {\r\n    <div class=\"xrmui-tab\" [ngClass]=\"{ 'current' : tab == current(), 'disabled': tab.disabled, error: tab != current() && tab.error != undefined && tab.error()}\" (click)=\"current.set(tab)\">\r\n        @if (tab.badget != undefined && tab.badget > 0) {\r\n            <div [matBadge]=\"tab.badget\" [matBadgeOverlap]=\"false\">\r\n                @if (tab.icon != undefined && tab.icon != null && tab.icon != ''){<div class=\"icon\"><mat-icon class=\"mat-icon-14\">{{ tab.icon }}</mat-icon></div>}\r\n                <span>\r\n                @if (tab.label != undefined && tab.label != null && tab.label != '') { {{ tab.label }} }\r\n                @if (tab.label == undefined || tab.label == null || tab.label == '') { {{ tab.id }} }\r\n                </span>\r\n            </div>\r\n        }\r\n\r\n        @if (tab.badget == undefined || tab.badget == 0) {\r\n            @if (tab.icon != undefined && tab.icon != null && tab.icon != ''){<div class=\"icon\"><mat-icon class=\"mat-icon-14\">{{ tab.icon }}</mat-icon></div>}\r\n            <span>\r\n            @if (tab.label != undefined && tab.label != null && tab.label != '') { {{ tab.label }} }\r\n            @if (tab.label == undefined || tab.label == null || tab.label == '') { {{ tab.id }} }\r\n            </span>\r\n        }\r\n    </div>\r\n    }\r\n}\r\n</div>", styles: [":host div.xrmui-tabs{display:flex}:host div.xrmui-tab{margin:10px 5px 5px;padding:10px 10px 8px;font-family:var(--mat-sys-body-medium-font);border:solid;border-width:0 0 2px 0;border-color:#d3d3d3;color:gray;cursor:pointer;font-size:small}:host div.xrmui-tab.current{border-color:#0f6cbd;color:#0f6cbd}:host div.xrmui-tab.disabled{border-color:#d3d3d3;color:#d3d3d3;cursor:auto}:host div.xrmui-tab.space{flex-grow:1;border-color:transparent;cursor:default}:host div.xrmui-burger{padding-top:15px;width:20px;cursor:pointer}:host button.xrmui-burger-button{border:none;background-color:transparent;height:25px;overflow:hidden;margin:0;padding:0}:host div.icon{float:left;padding-right:3px}:host mat-icon.mat-icon-14{font-size:14px;width:14px;height:14px}:host .error{--color1: #FF6347;--color2: #f7f7f7;--duration: 3s;background-color:var(--color1);-webkit-animation-name:colorPulser;-webkit-animation-duration:var(--duration);animation-name:colorPulser;animation-duration:var(--duration);animation-iteration-count:infinite}@-webkit-keyframes colorPulser{0%{background-color:var(--color1)}50%{background-color:var(--color2)}to{background-color:var(--color1)}}@keyframes colorPulser{0%{background-color:var(--color1)}50%{background-color:var(--color2)}to{background-color:var(--color1)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], burgers: [{ type: i0.Input, args: [{ isSignal: true, alias: "burgers", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: true }] }, { type: i0.Output, args: ["currentChange"] }] } });
 
+class XrmuiSection {
+    searchElement;
+    title = '';
+    topTitle = '';
+    searchable = false;
+    search = '';
+    placeholder = '';
+    searchChange = new EventEmitter();
+    focusSearchTrigger = false;
+    focusSearchTriggerChange = new EventEmitter();
+    checkable = false;
+    checked = false;
+    checkChange = new EventEmitter();
+    prev = new EventEmitter();
+    next = new EventEmitter();
+    enter = new EventEmitter();
+    esc = new EventEmitter();
+    constructor() {
+    }
+    ngOnChanges(changes) {
+        if (this.focusSearchTrigger == true) {
+            setTimeout(() => {
+                this.focusSearch();
+                this.focusSearchTriggerChange.emit(false);
+            }, 10);
+        }
+    }
+    searchChanged() {
+        this.searchChange.emit(this.search);
+    }
+    check() {
+        this.checked = true;
+        this.checkChange.emit(this.checked);
+        this.focusSearch();
+    }
+    uncheck() {
+        this.checked = false;
+        this.checkChange.emit(this.checked);
+        this.focusSearch();
+    }
+    onkeydown(e) {
+        if (this.prev.observed) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.prev.emit();
+        }
+    }
+    onkeyup(e) {
+        if (this.next.observed) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.next.emit();
+        }
+    }
+    onkeyenter(e) {
+        if (this.enter.observed) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.enter.emit();
+        }
+    }
+    onkeyesc(e) {
+        if (this.esc.observed) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.esc.emit();
+        }
+    }
+    focusSearch() {
+        if (this.searchElement != null) {
+            this.searchElement.nativeElement.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: XrmuiSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: XrmuiSection, isStandalone: true, selector: "xrmui-section", inputs: { title: "title", topTitle: ["top-title", "topTitle"], searchable: "searchable", search: "search", placeholder: "placeholder", focusSearchTrigger: ["focusSearch", "focusSearchTrigger"], checkable: "checkable", checked: "checked" }, outputs: { searchChange: "searchChange", focusSearchTriggerChange: "focusSearchChange", checkChange: "checkedChange", prev: "prev", next: "next", enter: "enter", esc: "esc" }, viewQueries: [{ propertyName: "searchElement", first: true, predicate: ["searchelement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (topTitle != '') {<div class=\"toptitle-container\">\r\n    <div class=\"toptitle\">{{ topTitle }}</div>\r\n</div>}\r\n@if(title != '' && !searchable) {<div class=\"header\">{{ title }}</div>}\r\n@if (searchable) {\r\n<div class=\"search\">\r\n        @if (checkable) {\r\n        <div class=\"chexkbox\">\r\n            @if (checked){<mat-icon title=\"Frav\u00E6lg alle\" (click)=\"uncheck()\">check_box</mat-icon>}\r\n            @if(!checked) {<mat-icon title=\"V\u00E6lg alle\" (click)=\"check()\">check_box_outline_blank</mat-icon>}\r\n        </div>\r\n        }\r\n    <input #searchelement [(ngModel)]=\"search\" (ngModelChange)=\"searchChanged()\" [placeholder]=\"title\"\r\n        (keydown.esc)=\"onkeyesc($event)\" (keydown.arrowdown)=\"onkeydown($event)\" (keydown.arrowup)=\"onkeyup($event)\"\r\n        (keydown.enter)=\"onkeyenter($event)\" \r\n        [placeholder]=\"placeholder\" />\r\n    <div class=\"therest\"></div>\r\n</div>\r\n}\r\n<div class=\"xrmui-section-content\" [ngClass]=\"{'nosearchortitle': searchable == false && title == ''}\"><ng-content></ng-content></div>", styles: [":host.all{position:absolute;inset:0}:host.all div.xrmui-section-content{position:absolute;inset:50px 1px 1px;overflow-y:auto}:host.all div.xrmui-section-content.nosearchortitle{top:1px}:host{border:solid;border-width:1px 1px 1px 1px;border-color:#d3d3d3;border-style:solid;border-radius:5px;display:block;margin:10px;padding:10px;box-shadow:1px 1px #d3d3d3}:host.nopadding{padding:0}:host.noborder{border:none;border-radius:0;margin:0;padding:0}:host.global{border-color:#4f8a4e}:host.nomargin{margin:0}:host div.toptitle-container{position:relative;width:100%}:host div.toptitle{position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;background-color:gray;color:#fff;padding:1px 20px;max-width:fit-content;display:table;z-index:2;border-radius:15px;border:solid;border-width:1px 1px 1px 1px;border-color:gray}:host div.toptitle{top:-19px}:host div.header{border-width:0 0 1px 0;border-color:#d3d3d3;border-style:solid;font-size:16px;font-weight:700;margin-bottom:15px;padding-top:5px;padding-bottom:5px}:host div.search{border-width:0 0 1px 0;border-color:#d3d3d3;border-style:solid;margin-bottom:15px;padding-top:5px;padding-bottom:5px;display:flex}:host div.therest{flex-grow:1}:host div.chexkbox{width:25px;min-width:25px;max-width:25px}:host input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px}:host input[type=number]:focus,:host input[type=number]:hover{pointer-events:none;cursor:text}:host *:focus{outline:none}:host input:focus{outline:none;border:solid;border-width:0 0 2px 0;border-color:#0f6cbd}:host mat-icon{color:gray}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: XrmuiSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'xrmui-section', imports: [FormsModule, MatIcon, NgClass], template: "@if (topTitle != '') {<div class=\"toptitle-container\">\r\n    <div class=\"toptitle\">{{ topTitle }}</div>\r\n</div>}\r\n@if(title != '' && !searchable) {<div class=\"header\">{{ title }}</div>}\r\n@if (searchable) {\r\n<div class=\"search\">\r\n        @if (checkable) {\r\n        <div class=\"chexkbox\">\r\n            @if (checked){<mat-icon title=\"Frav\u00E6lg alle\" (click)=\"uncheck()\">check_box</mat-icon>}\r\n            @if(!checked) {<mat-icon title=\"V\u00E6lg alle\" (click)=\"check()\">check_box_outline_blank</mat-icon>}\r\n        </div>\r\n        }\r\n    <input #searchelement [(ngModel)]=\"search\" (ngModelChange)=\"searchChanged()\" [placeholder]=\"title\"\r\n        (keydown.esc)=\"onkeyesc($event)\" (keydown.arrowdown)=\"onkeydown($event)\" (keydown.arrowup)=\"onkeyup($event)\"\r\n        (keydown.enter)=\"onkeyenter($event)\" \r\n        [placeholder]=\"placeholder\" />\r\n    <div class=\"therest\"></div>\r\n</div>\r\n}\r\n<div class=\"xrmui-section-content\" [ngClass]=\"{'nosearchortitle': searchable == false && title == ''}\"><ng-content></ng-content></div>", styles: [":host.all{position:absolute;inset:0}:host.all div.xrmui-section-content{position:absolute;inset:50px 1px 1px;overflow-y:auto}:host.all div.xrmui-section-content.nosearchortitle{top:1px}:host{border:solid;border-width:1px 1px 1px 1px;border-color:#d3d3d3;border-style:solid;border-radius:5px;display:block;margin:10px;padding:10px;box-shadow:1px 1px #d3d3d3}:host.nopadding{padding:0}:host.noborder{border:none;border-radius:0;margin:0;padding:0}:host.global{border-color:#4f8a4e}:host.nomargin{margin:0}:host div.toptitle-container{position:relative;width:100%}:host div.toptitle{position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;background-color:gray;color:#fff;padding:1px 20px;max-width:fit-content;display:table;z-index:2;border-radius:15px;border:solid;border-width:1px 1px 1px 1px;border-color:gray}:host div.toptitle{top:-19px}:host div.header{border-width:0 0 1px 0;border-color:#d3d3d3;border-style:solid;font-size:16px;font-weight:700;margin-bottom:15px;padding-top:5px;padding-bottom:5px}:host div.search{border-width:0 0 1px 0;border-color:#d3d3d3;border-style:solid;margin-bottom:15px;padding-top:5px;padding-bottom:5px;display:flex}:host div.therest{flex-grow:1}:host div.chexkbox{width:25px;min-width:25px;max-width:25px}:host input{background-color:transparent;margin:0;border:none;height:29px;padding:0 0 0 15px}:host input[type=number]:focus,:host input[type=number]:hover{pointer-events:none;cursor:text}:host *:focus{outline:none}:host input:focus{outline:none;border:solid;border-width:0 0 2px 0;border-color:#0f6cbd}:host mat-icon{color:gray}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchElement: [{
+                type: ViewChild,
+                args: ['searchelement']
+            }], title: [{
+                type: Input,
+                args: ['title']
+            }], topTitle: [{
+                type: Input,
+                args: ['top-title']
+            }], searchable: [{
+                type: Input,
+                args: ['searchable']
+            }], search: [{
+                type: Input,
+                args: ['search']
+            }], placeholder: [{
+                type: Input,
+                args: ['placeholder']
+            }], searchChange: [{
+                type: Output,
+                args: ['searchChange']
+            }], focusSearchTrigger: [{
+                type: Input,
+                args: ['focusSearch']
+            }], focusSearchTriggerChange: [{
+                type: Output,
+                args: ['focusSearchChange']
+            }], checkable: [{
+                type: Input,
+                args: ['checkable']
+            }], checked: [{
+                type: Input,
+                args: ['checked']
+            }], checkChange: [{
+                type: Output,
+                args: ['checkedChange']
+            }], prev: [{
+                type: Output,
+                args: ['prev']
+            }], next: [{
+                type: Output,
+                args: ['next']
+            }], enter: [{
+                type: Output,
+                args: ['enter']
+            }], esc: [{
+                type: Output,
+                args: ['esc']
+            }] } });
+
 class BorutoXrmUIModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BorutoXrmUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: BorutoXrmUIModule, imports: [XrmuiInfo,
@@ -2338,6 +2467,7 @@ class BorutoXrmUIModule {
             XrmuiButton,
             XrmuiDevider,
             XrmuiTabs,
+            XrmuiSection,
             ChangeScopeDirective,
             FormScopeDirective], exports: [XrmuiInfo,
             XrmuiLayout,
@@ -2349,6 +2479,7 @@ class BorutoXrmUIModule {
             XrmuiButton,
             XrmuiDevider,
             XrmuiTabs,
+            XrmuiSection,
             ChangeScopeDirective,
             FormScopeDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BorutoXrmUIModule, imports: [XrmuiInfo,
@@ -2356,7 +2487,8 @@ class BorutoXrmUIModule {
             XrmuiInput,
             XrmuiSpinner,
             XrmuiButton,
-            XrmuiTabs] });
+            XrmuiTabs,
+            XrmuiSection] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BorutoXrmUIModule, decorators: [{
             type: NgModule,
@@ -2372,6 +2504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         XrmuiButton,
                         XrmuiDevider,
                         XrmuiTabs,
+                        XrmuiSection,
                         ChangeScopeDirective,
                         FormScopeDirective,
                     ],
@@ -2386,6 +2519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         XrmuiButton,
                         XrmuiDevider,
                         XrmuiTabs,
+                        XrmuiSection,
                         ChangeScopeDirective,
                         FormScopeDirective
                     ]
@@ -2400,5 +2534,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BorutoXrmUIModule, CTRL_KEYS, ChangeScopeDirective, DECIMALS, DKCustomDateAdapter, FormScopeDirective, KiponUiModule, KoAlertComponent, KoButtonGroupComponent, KoDecimalDirective, KoDivider, KoExpansionPanelComponent, KoFocusDirective, KoHeaderComponent, KoHorizontalScrollComponent, KoHorizontalSplitComponent, KoLeftMenuComponent, KoMainComponent, KoNavigationByCssClass, KoNavigationByImageUrl, KoOverDirective, KoTablePanelComponent, KoTitlePanelComponent, KoTopMenuComponent, KoVerticalScrollComponent, KoVerticalSplitComponent, KoViewComponent, KoWriteDirective, NAVIGATIONKEYS, NUMBERS, XrmuiButton, XrmuiDevider, XrmuiIcon, XrmuiInfo, XrmuiInput, XrmuiLayout, XrmuiPanel, XrmuiRibbon, XrmuiSpinner, XrmuiTabs, nFormater };
+export { BorutoXrmUIModule, CTRL_KEYS, ChangeScopeDirective, DECIMALS, DKCustomDateAdapter, FormScopeDirective, KiponUiModule, KoAlertComponent, KoButtonGroupComponent, KoDecimalDirective, KoDivider, KoExpansionPanelComponent, KoFocusDirective, KoHeaderComponent, KoHorizontalScrollComponent, KoHorizontalSplitComponent, KoLeftMenuComponent, KoMainComponent, KoNavigationByCssClass, KoNavigationByImageUrl, KoOverDirective, KoTablePanelComponent, KoTitlePanelComponent, KoTopMenuComponent, KoVerticalScrollComponent, KoVerticalSplitComponent, KoViewComponent, KoWriteDirective, NAVIGATIONKEYS, NUMBERS, XrmuiButton, XrmuiDevider, XrmuiIcon, XrmuiInfo, XrmuiInput, XrmuiLayout, XrmuiPanel, XrmuiRibbon, XrmuiSection, XrmuiSpinner, XrmuiTabs, nFormater };
 //# sourceMappingURL=boruto-xrmui.mjs.map