@zambon-dev/library 2.0.1 → 3.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.
- package/CHANGELOG.md +14 -1
- package/README.md +6 -6
- package/fesm2022/zambon-dev-library.mjs +150 -162
- package/fesm2022/zambon-dev-library.mjs.map +1 -1
- package/package.json +10 -9
- package/types/zambon-dev-library.d.ts +1045 -0
- package/index.d.ts +0 -10
- package/lib/components/base.component.d.ts +0 -9
- package/lib/components/catalog-select/catalog-select.component.d.ts +0 -121
- package/lib/components/data-grid/data-grid.component.d.ts +0 -51
- package/lib/components/data-grid-row/data-grid-row.component.d.ts +0 -31
- package/lib/components/form-group/form-group.component.d.ts +0 -8
- package/lib/components/form-input/form-input.component.d.ts +0 -47
- package/lib/components/form-input-group/form-input-group.component.d.ts +0 -40
- package/lib/components/group-accordion/group-accordion.component.d.ts +0 -13
- package/lib/components/group-container/group-container.component.d.ts +0 -16
- package/lib/components/group-scroll-spy/group-scroll-spy.component.d.ts +0 -14
- package/lib/components/index.d.ts +0 -18
- package/lib/components/modal/modal.component.d.ts +0 -26
- package/lib/components/multi-editor/multi-editor.component.d.ts +0 -30
- package/lib/components/multi-select/multi-select.component.d.ts +0 -25
- package/lib/components/multi-select/result-grid/result-grid.component.d.ts +0 -18
- package/lib/components/ribbon/ribbon.component.d.ts +0 -5
- package/lib/components/ribbon-button/ribbon-button.component.d.ts +0 -32
- package/lib/components/ribbon-group/ribbon-group.component.d.ts +0 -10
- package/lib/components/sidebar/sidebar.component.d.ts +0 -41
- package/lib/components/sidebar-item/sidebar-item.component.d.ts +0 -34
- package/lib/directives/index.d.ts +0 -1
- package/lib/directives/scroll-spy.directive.d.ts +0 -16
- package/lib/helpers/date-helpers.d.ts +0 -3
- package/lib/helpers/display-controls.d.ts +0 -29
- package/lib/helpers/guid-helper.d.ts +0 -3
- package/lib/helpers/index.d.ts +0 -4
- package/lib/helpers/route-formatter.d.ts +0 -4
- package/lib/library.module.d.ts +0 -27
- package/lib/models/batch-update.d.ts +0 -4
- package/lib/models/catalog-entry.d.ts +0 -4
- package/lib/models/catalog-result.d.ts +0 -5
- package/lib/models/configs/data-grid-configs.d.ts +0 -9
- package/lib/models/configs/grid-configs.d.ts +0 -9
- package/lib/models/configs/index.d.ts +0 -2
- package/lib/models/data-grid-parameters.d.ts +0 -12
- package/lib/models/grid-column.d.ts +0 -9
- package/lib/models/index.d.ts +0 -14
- package/lib/models/list-result.d.ts +0 -4
- package/lib/models/modal.interface.d.ts +0 -7
- package/lib/models/multi-editor-changes.d.ts +0 -6
- package/lib/models/multi-selector-changes.d.ts +0 -4
- package/lib/models/ribbon-button-option.d.ts +0 -13
- package/lib/models/ribbon-group-child.d.ts +0 -3
- package/lib/models/sidebar/index.d.ts +0 -5
- package/lib/models/sidebar/sidebar-configs.d.ts +0 -22
- package/lib/models/sidebar/sidebar-menu-open-mode.d.ts +0 -32
- package/lib/models/sidebar/sidebar-menu.d.ts +0 -22
- package/lib/models/sidebar/sidebar-profile.d.ts +0 -5
- package/lib/models/sidebar/sidebar-region.d.ts +0 -6
- package/lib/models/tab-view.d.ts +0 -5
- package/lib/pipes/enum.d.ts +0 -12
- package/lib/pipes/index.d.ts +0 -3
- package/lib/pipes/replace-many.pipe.d.ts +0 -9
- package/lib/pipes/replace.pipe.d.ts +0 -7
- package/lib/services/catalog.service.d.ts +0 -11
- package/lib/services/configs-providers/data-grid-configs.provider.d.ts +0 -8
- package/lib/services/configs-providers/grid-configs.provider.d.ts +0 -9
- package/lib/services/configs-providers/index.d.ts +0 -2
- package/lib/services/data-providers/data-provider.service.d.ts +0 -29
- package/lib/services/data-providers/index.d.ts +0 -1
- package/lib/services/datasets/base.dataset.d.ts +0 -15
- package/lib/services/datasets/data-grid.dataset.d.ts +0 -37
- package/lib/services/datasets/grid.dataset.d.ts +0 -59
- package/lib/services/datasets/index.d.ts +0 -5
- package/lib/services/datasets/multi-editor.dataset.d.ts +0 -22
- package/lib/services/datasets/multi-select-result.dataset.d.ts +0 -26
- package/lib/services/form-group.service.d.ts +0 -5
- package/lib/services/form.service.d.ts +0 -39
- package/lib/services/index.d.ts +0 -6
- package/lib/services/sidebar.service.d.ts +0 -34
- package/lib/validators/date.validators.d.ts +0 -13
- package/lib/validators/index.d.ts +0 -1
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, inject, Injectable, EventEmitter, InjectionToken,
|
|
2
|
+
import { ChangeDetectionStrategy, Component, inject, Injectable, EventEmitter, InjectionToken, Output, Input, KeyValueDiffers, ViewContainerRef, TemplateRef, ElementRef, ViewChild, HostListener, ChangeDetectorRef, NgZone, Directive, ContentChildren, Pipe, NgModule } from '@angular/core';
|
|
3
3
|
import { Subject, ReplaySubject, take, throwError, tap, map, takeUntil, filter, debounceTime, startWith, pairwise, Observable, forkJoin, switchMap, of, fromEvent, delay, merge } from 'rxjs';
|
|
4
4
|
import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
|
|
5
5
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
6
|
-
import * as i1 from '@angular/common';
|
|
7
|
-
import { formatDate, CommonModule, NgIf, NgSwitch, NgSwitchCase, KeyValuePipe, NgFor, NgStyle, NgTemplateOutlet, NgClass } from '@angular/common';
|
|
8
6
|
import * as i1$1 from '@angular/forms';
|
|
9
|
-
import { FormGroupDirective, FormGroupName, FormsModule, ReactiveFormsModule,
|
|
7
|
+
import { FormGroupDirective, FormGroupName, ControlContainer, FormsModule, ReactiveFormsModule, FormControl, FormArray, FormGroup } from '@angular/forms';
|
|
10
8
|
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
|
|
11
9
|
import { HttpClient } from '@angular/common/http';
|
|
12
10
|
import { ActivatedRoute, Router, NavigationStart, NavigationEnd } from '@angular/router';
|
|
11
|
+
import * as i1 from '@angular/common';
|
|
12
|
+
import { formatDate, CommonModule, NgStyle, NgTemplateOutlet, KeyValuePipe, NgClass } from '@angular/common';
|
|
13
13
|
import * as i1$2 from '@angular/cdk/scrolling';
|
|
14
|
-
import {
|
|
14
|
+
import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
15
15
|
import * as i2 from 'ngx-resize-observer';
|
|
16
16
|
import { NgxResizeObserverModule } from 'ngx-resize-observer';
|
|
17
17
|
|
|
@@ -30,12 +30,12 @@ class BaseComponent {
|
|
|
30
30
|
this.destroy$.next(true);
|
|
31
31
|
this.destroy$.complete();
|
|
32
32
|
}
|
|
33
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
34
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
33
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: BaseComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
35
35
|
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseComponent, decorators: [{
|
|
37
37
|
type: Component,
|
|
38
|
-
args: [{ template: '' }]
|
|
38
|
+
args: [{ changeDetection: ChangeDetectionStrategy.Eager, template: '' }]
|
|
39
39
|
}] });
|
|
40
40
|
|
|
41
41
|
class DateHelpers {
|
|
@@ -115,7 +115,7 @@ class RouterFormatter {
|
|
|
115
115
|
}
|
|
116
116
|
let path = route.routeConfig?.path ?? '';
|
|
117
117
|
route.paramMap.keys.forEach((k) => {
|
|
118
|
-
path = path.replace(':' + k, k === 'view' ? '' : route.paramMap.get(k) ?? '');
|
|
118
|
+
path = path.replace(':' + k, k === 'view' ? '' : (route.paramMap.get(k) ?? ''));
|
|
119
119
|
});
|
|
120
120
|
if (!route.parent || (parentRoute !== '' && parentRoute !== '/' && route.routeConfig?.path && path)) {
|
|
121
121
|
parentRoute += '/';
|
|
@@ -140,10 +140,10 @@ class CatalogService {
|
|
|
140
140
|
search(endpoint, maxResults, criteria, filters = null) {
|
|
141
141
|
return this.http.post(`${endpoint}`, { maxResults, criteria, filters });
|
|
142
142
|
}
|
|
143
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
144
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
143
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
144
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogService, providedIn: 'root' });
|
|
145
145
|
}
|
|
146
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogService, decorators: [{
|
|
147
147
|
type: Injectable,
|
|
148
148
|
args: [{
|
|
149
149
|
providedIn: 'root',
|
|
@@ -237,10 +237,10 @@ class DataProviderService {
|
|
|
237
237
|
}
|
|
238
238
|
this.modelCache.next(model);
|
|
239
239
|
}
|
|
240
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
241
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
240
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
241
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataProviderService });
|
|
242
242
|
}
|
|
243
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
243
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataProviderService, decorators: [{
|
|
244
244
|
type: Injectable
|
|
245
245
|
}], ctorParameters: () => [] });
|
|
246
246
|
|
|
@@ -270,10 +270,10 @@ class BaseDataset {
|
|
|
270
270
|
this.destroy$.next(true);
|
|
271
271
|
this.destroy$.complete();
|
|
272
272
|
}
|
|
273
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
274
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
273
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
274
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseDataset });
|
|
275
275
|
}
|
|
276
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
276
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BaseDataset, decorators: [{
|
|
277
277
|
type: Injectable
|
|
278
278
|
}], ctorParameters: () => [] });
|
|
279
279
|
|
|
@@ -298,10 +298,10 @@ class GridConfigsProvider {
|
|
|
298
298
|
rowsToDisplay: 6,
|
|
299
299
|
};
|
|
300
300
|
}
|
|
301
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
302
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
301
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridConfigsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
302
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridConfigsProvider });
|
|
303
303
|
}
|
|
304
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
304
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridConfigsProvider, decorators: [{
|
|
305
305
|
type: Injectable
|
|
306
306
|
}], ctorParameters: () => [] });
|
|
307
307
|
|
|
@@ -368,6 +368,10 @@ class GridDataset extends BaseDataset {
|
|
|
368
368
|
addNewRow(row) {
|
|
369
369
|
this.updateLoadedRows([row]);
|
|
370
370
|
}
|
|
371
|
+
/** The key of the currently focused row, or null. Read by DataGridRowComponent's host binding. */
|
|
372
|
+
get focusedRowKey() {
|
|
373
|
+
return this.focusedRow;
|
|
374
|
+
}
|
|
371
375
|
clearFocusedRow() {
|
|
372
376
|
this.focusedRow = null;
|
|
373
377
|
}
|
|
@@ -498,10 +502,10 @@ class GridDataset extends BaseDataset {
|
|
|
498
502
|
this.loadedLastRow = true;
|
|
499
503
|
}
|
|
500
504
|
}
|
|
501
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
502
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
505
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
506
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridDataset });
|
|
503
507
|
}
|
|
504
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
508
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GridDataset, decorators: [{
|
|
505
509
|
type: Injectable
|
|
506
510
|
}], ctorParameters: () => [] });
|
|
507
511
|
|
|
@@ -680,10 +684,10 @@ class DataGridDataset extends GridDataset {
|
|
|
680
684
|
this.selectedRowKeys.splice(index, 1);
|
|
681
685
|
}
|
|
682
686
|
}
|
|
683
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
684
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
687
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
688
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridDataset });
|
|
685
689
|
}
|
|
686
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
690
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridDataset, decorators: [{
|
|
687
691
|
type: Injectable
|
|
688
692
|
}], ctorParameters: () => [] });
|
|
689
693
|
|
|
@@ -750,10 +754,10 @@ class MultiEditorDataset extends BaseDataset {
|
|
|
750
754
|
this.modifiedValues.changed[key] = newRowData;
|
|
751
755
|
this.dataGridDataset.updateRow(key, newRowData);
|
|
752
756
|
}
|
|
753
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
754
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
757
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiEditorDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
758
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiEditorDataset });
|
|
755
759
|
}
|
|
756
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiEditorDataset, decorators: [{
|
|
757
761
|
type: Injectable
|
|
758
762
|
}], ctorParameters: () => [] });
|
|
759
763
|
|
|
@@ -840,18 +844,18 @@ class MultiSelectResultDataset extends GridDataset {
|
|
|
840
844
|
this.displayedRows = loadedKeys.map((key) => this.getRowData(key));
|
|
841
845
|
this.displayedRows.push(...this.addedRowData);
|
|
842
846
|
}
|
|
843
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
844
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
847
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultDataset, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
848
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultDataset });
|
|
845
849
|
}
|
|
846
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
850
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultDataset, decorators: [{
|
|
847
851
|
type: Injectable
|
|
848
852
|
}] });
|
|
849
853
|
|
|
850
854
|
class FormGroupService {
|
|
851
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
852
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
855
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
856
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupService });
|
|
853
857
|
}
|
|
854
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupService, decorators: [{
|
|
855
859
|
type: Injectable
|
|
856
860
|
}] });
|
|
857
861
|
|
|
@@ -987,10 +991,10 @@ class FormService {
|
|
|
987
991
|
});
|
|
988
992
|
}
|
|
989
993
|
}
|
|
990
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
991
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
994
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
995
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormService });
|
|
992
996
|
}
|
|
993
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
997
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormService, decorators: [{
|
|
994
998
|
type: Injectable
|
|
995
999
|
}] });
|
|
996
1000
|
|
|
@@ -1218,10 +1222,10 @@ class SidebarService {
|
|
|
1218
1222
|
this.selectMenu(menu.parent);
|
|
1219
1223
|
}
|
|
1220
1224
|
}
|
|
1221
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1222
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1225
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1226
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarService, providedIn: 'root' });
|
|
1223
1227
|
}
|
|
1224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarService, decorators: [{
|
|
1225
1229
|
type: Injectable,
|
|
1226
1230
|
args: [{
|
|
1227
1231
|
providedIn: 'root',
|
|
@@ -1351,17 +1355,17 @@ class FormInputComponent extends BaseComponent {
|
|
|
1351
1355
|
this.fixedValue = newText;
|
|
1352
1356
|
this.fixedValueChanged.emit(this.fixedValue);
|
|
1353
1357
|
}
|
|
1354
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1355
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: FormInputComponent, isStandalone: true, selector: "lib-form-input", inputs: { autofocus: "autofocus", controlName: "controlName", disabledControlName: "disabledControlName", displayReadOnlyAsDisabled: "displayReadOnlyAsDisabled", fixedValue: "fixedValue", format: "format", invalid: "invalid", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", readOnly: "readOnly", rows: "rows", step: "step", type: "type" }, outputs: { blurred: "blurred", changed: "changed", fixedValueChanged: "fixedValueChanged", focused: "focused", inputChanged: "inputChanged" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode; else disabledControl\">\n <ng-container [ngSwitch]=\"type\">\n <textarea\n *ngSwitchCase=\"'textarea'\"\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.rows]=\"rows\"\n [class.invalid]=\"invalid\"\n [formControlName]=\"controlName\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n >\n </textarea>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <input\n *ngIf=\"isFormControl; else fixedCheckbox\"\n class=\"switch\"\n type=\"checkbox\"\n [class.invalid]=\"invalid\"\n [formControlName]=\"controlName\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n />\n\n <ng-template #fixedCheckbox>\n <input\n class=\"switch\"\n type=\"checkbox\"\n [(ngModel)]=\"fixedValue\"\n [attr.readonly]=\"true\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [disabled]=\"isDisabled\"\n [ngModelOptions]=\"{ standalone: true }\"\n (blur)=\"onBlur()\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (ngModelChange)=\"onValueChanged($event)\"\n />\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <input\n *ngIf=\"isFormControl; else fixedTextBox\"\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.min]=\"minAttributeValue\"\n [attr.readonly]=\"readOnly ? true : null\"\n [attr.step]=\"stepAttributeValue\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [formControlName]=\"controlName\"\n [type]=\"type\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n />\n\n <ng-template #fixedTextBox>\n <input\n type=\"text\"\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.min]=\"minAttributeValue\"\n [attr.readonly]=\"true\"\n [attr.step]=\"stepAttributeValue\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [disabled]=\"isDisabled\"\n [ngModel]=\"\n type === 'date' || type === 'datetime-local'\n ? (fixedValue | date : format)\n : type === 'number'\n ? (fixedValue | number)\n : fixedValue\n \"\n [ngModelOptions]=\"{ standalone: true }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (ngModelChange)=\"onValueChanged($event)\"\n />\n </ng-template>\n </ng-container>\n </ng-container>\n</ng-container>\n\n<ng-template #disabledControl>\n <ng-container [ngSwitch]=\"type\">\n <span class=\"value\" *ngSwitchCase=\"'checkbox'\">\n <i\n [ngClass]=\"\n fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value\n ? 'fa-solid fa-square-check'\n : 'fa-regular fa-square'\n \"\n ></i>\n </span>\n\n <span class=\"value\" *ngSwitchCase=\"'date'\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date : format }}\n </span>\n\n <span class=\"value\" *ngSwitchCase=\"'datetime-local'\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date : format }}\n </span>\n\n <span class=\"value\" *ngSwitchCase=\"'number'\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number : format }}\n </span>\n\n <span class=\"value text\" *ngSwitchDefault>{{\n fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value\n }}</span>\n </ng-container>\n</ng-template>\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\"> </ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label,.value{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text,.value.text{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
|
|
1358
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1359
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormInputComponent, isStandalone: true, selector: "lib-form-input", inputs: { autofocus: "autofocus", controlName: "controlName", disabledControlName: "disabledControlName", displayReadOnlyAsDisabled: "displayReadOnlyAsDisabled", fixedValue: "fixedValue", format: "format", invalid: "invalid", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", readOnly: "readOnly", rows: "rows", step: "step", type: "type" }, outputs: { blurred: "blurred", changed: "changed", fixedValueChanged: "fixedValueChanged", focused: "focused", inputChanged: "inputChanged" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "@if (formGroupDirective.form?.enabled || isFormEditMode) {\n @switch (type) {\n @case ('textarea') {\n <textarea\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.rows]=\"rows\"\n [class.invalid]=\"invalid\"\n [formControlName]=\"controlName\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n ></textarea>\n }\n @case ('checkbox') {\n @if (isFormControl) {\n <input\n class=\"switch\"\n type=\"checkbox\"\n [class.invalid]=\"invalid\"\n [formControlName]=\"controlName\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n />\n } @else {\n <input\n class=\"switch\"\n type=\"checkbox\"\n [(ngModel)]=\"fixedValue\"\n [attr.readonly]=\"true\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [disabled]=\"isDisabled\"\n [ngModelOptions]=\"{ standalone: true }\"\n (blur)=\"onBlur()\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (ngModelChange)=\"onValueChanged($event)\"\n />\n }\n }\n @default {\n @if (isFormControl) {\n <input\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.min]=\"minAttributeValue\"\n [attr.readonly]=\"readOnly ? true : null\"\n [attr.step]=\"stepAttributeValue\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [formControlName]=\"controlName\"\n [type]=\"type\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n />\n } @else {\n <input\n type=\"text\"\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.min]=\"minAttributeValue\"\n [attr.readonly]=\"true\"\n [attr.step]=\"stepAttributeValue\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [disabled]=\"isDisabled\"\n [ngModel]=\"\n type === 'date' || type === 'datetime-local'\n ? (fixedValue | date: format)\n : type === 'number'\n ? (fixedValue | number)\n : fixedValue\n \"\n [ngModelOptions]=\"{ standalone: true }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (ngModelChange)=\"onValueChanged($event)\"\n />\n }\n }\n }\n} @else {\n @switch (type) {\n @case ('checkbox') {\n <span class=\"value\">\n <i\n [ngClass]=\"\n (fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value)\n ? 'fa-solid fa-square-check'\n : 'fa-regular fa-square'\n \"\n ></i>\n </span>\n }\n @case ('date') {\n <span class=\"value\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n </span>\n }\n @case ('datetime-local') {\n <span class=\"value\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n </span>\n }\n @case ('number') {\n <span class=\"value\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n </span>\n }\n @default {\n <span class=\"value text\">{{\n fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value\n }}</span>\n }\n }\n}\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\"> </ng-template>\n", styles: [":host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label,.value{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text,.value.text{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1356
1360
|
}
|
|
1357
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
1358
1362
|
type: Component,
|
|
1359
|
-
args: [{ selector: 'lib-form-input', imports: [CommonModule, FormsModule,
|
|
1363
|
+
args: [{ selector: 'lib-form-input', imports: [CommonModule, FormsModule, ReactiveFormsModule], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], changeDetection: ChangeDetectionStrategy.Eager, host: {
|
|
1360
1364
|
'[class.full-height]': 'isFullHeight',
|
|
1361
1365
|
// Clears a stray `type` attribute for the same reason as FormInputGroupComponent — see the
|
|
1362
1366
|
// comment there. Applies when a consumer sets `type` on `lib-form-input` directly.
|
|
1363
1367
|
'[attr.type]': 'null',
|
|
1364
|
-
}, template: "<ng-container *ngIf=\"formGroupDirective.form?.enabled || isFormEditMode; else disabledControl\">\n <ng-container [ngSwitch]=\"type\">\n <textarea\n *ngSwitchCase=\"'textarea'\"\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.rows]=\"rows\"\n [class.invalid]=\"invalid\"\n [formControlName]=\"controlName\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n >\n </textarea>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <input\n *ngIf=\"isFormControl; else fixedCheckbox\"\n class=\"switch\"\n type=\"checkbox\"\n [class.invalid]=\"invalid\"\n [formControlName]=\"controlName\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n />\n\n <ng-template #fixedCheckbox>\n <input\n class=\"switch\"\n type=\"checkbox\"\n [(ngModel)]=\"fixedValue\"\n [attr.readonly]=\"true\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [disabled]=\"isDisabled\"\n [ngModelOptions]=\"{ standalone: true }\"\n (blur)=\"onBlur()\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (ngModelChange)=\"onValueChanged($event)\"\n />\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <input\n *ngIf=\"isFormControl; else fixedTextBox\"\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.min]=\"minAttributeValue\"\n [attr.readonly]=\"readOnly ? true : null\"\n [attr.step]=\"stepAttributeValue\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [formControlName]=\"controlName\"\n [type]=\"type\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n />\n\n <ng-template #fixedTextBox>\n <input\n type=\"text\"\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.min]=\"minAttributeValue\"\n [attr.readonly]=\"true\"\n [attr.step]=\"stepAttributeValue\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [disabled]=\"isDisabled\"\n [ngModel]=\"\n type === 'date' || type === 'datetime-local'\n ? (fixedValue | date : format)\n : type === 'number'\n ? (fixedValue | number)\n : fixedValue\n \"\n [ngModelOptions]=\"{ standalone: true }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (ngModelChange)=\"onValueChanged($event)\"\n />\n </ng-template>\n </ng-container>\n </ng-container>\n</ng-container>\n\n<ng-template #disabledControl>\n <ng-container [ngSwitch]=\"type\">\n <span class=\"value\" *ngSwitchCase=\"'checkbox'\">\n <i\n [ngClass]=\"\n fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value\n ? 'fa-solid fa-square-check'\n : 'fa-regular fa-square'\n \"\n ></i>\n </span>\n\n <span class=\"value\" *ngSwitchCase=\"'date'\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date : format }}\n </span>\n\n <span class=\"value\" *ngSwitchCase=\"'datetime-local'\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date : format }}\n </span>\n\n <span class=\"value\" *ngSwitchCase=\"'number'\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number : format }}\n </span>\n\n <span class=\"value text\" *ngSwitchDefault>{{\n fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value\n }}</span>\n </ng-container>\n</ng-template>\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\"> </ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label,.value{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text,.value.text{white-space:pre-wrap}\n"] }]
|
|
1368
|
+
}, template: "@if (formGroupDirective.form?.enabled || isFormEditMode) {\n @switch (type) {\n @case ('textarea') {\n <textarea\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.rows]=\"rows\"\n [class.invalid]=\"invalid\"\n [formControlName]=\"controlName\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n ></textarea>\n }\n @case ('checkbox') {\n @if (isFormControl) {\n <input\n class=\"switch\"\n type=\"checkbox\"\n [class.invalid]=\"invalid\"\n [formControlName]=\"controlName\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n />\n } @else {\n <input\n class=\"switch\"\n type=\"checkbox\"\n [(ngModel)]=\"fixedValue\"\n [attr.readonly]=\"true\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [disabled]=\"isDisabled\"\n [ngModelOptions]=\"{ standalone: true }\"\n (blur)=\"onBlur()\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (ngModelChange)=\"onValueChanged($event)\"\n />\n }\n }\n @default {\n @if (isFormControl) {\n <input\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.min]=\"minAttributeValue\"\n [attr.readonly]=\"readOnly ? true : null\"\n [attr.step]=\"stepAttributeValue\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [formControlName]=\"controlName\"\n [type]=\"type\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n />\n } @else {\n <input\n type=\"text\"\n [attr.maxLength]=\"maxLength ?? null\"\n [attr.min]=\"minAttributeValue\"\n [attr.readonly]=\"true\"\n [attr.step]=\"stepAttributeValue\"\n [class.invalid]=\"invalid\"\n [class.readonly-as-disabled]=\"displayReadOnlyAsDisabled\"\n [disabled]=\"isDisabled\"\n [ngModel]=\"\n type === 'date' || type === 'datetime-local'\n ? (fixedValue | date: format)\n : type === 'number'\n ? (fixedValue | number)\n : fixedValue\n \"\n [ngModelOptions]=\"{ standalone: true }\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput()\"\n (ngModelChange)=\"onValueChanged($event)\"\n />\n }\n }\n }\n} @else {\n @switch (type) {\n @case ('checkbox') {\n <span class=\"value\">\n <i\n [ngClass]=\"\n (fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value)\n ? 'fa-solid fa-square-check'\n : 'fa-regular fa-square'\n \"\n ></i>\n </span>\n }\n @case ('date') {\n <span class=\"value\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n </span>\n }\n @case ('datetime-local') {\n <span class=\"value\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | date: format }}\n </span>\n }\n @case ('number') {\n <span class=\"value\">\n {{ fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value | number: format }}\n </span>\n }\n @default {\n <span class=\"value text\">{{\n fixedValue ?? formGroupDirective.form.get(disabledControlName ?? controlName)?.value\n }}</span>\n }\n }\n}\n\n<ng-template #fixedTextbox let-fixedValue=\"fixedValue\"> </ng-template>\n", styles: [":host{display:block}:host.full-height{height:100%}:host.full-height textarea{height:100%}input,textarea{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}input:focus,textarea:focus{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 107 182 / .3) }input,textarea{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}input:invalid,textarea:invalid{--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1))}input:disabled,input.readonly-as-disabled[readonly],textarea:disabled,textarea.readonly-as-disabled[readonly]{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}input.ng-invalid.ng-touched,input.invalid,textarea.ng-invalid.ng-touched,textarea.invalid{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}input[type=text],input[type=number],input[type=password],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=tel],input[type=time],input[type=url],input[type=week],textarea{display:block;width:100%;border-radius:.375rem;padding:.25rem .5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{margin-right:-2.25rem;padding-right:2.25rem;transition-property:none}input[type=text].ng-invalid.ng-touched:focus,input[type=text].invalid:focus,input[type=number].ng-invalid.ng-touched:focus,input[type=number].invalid:focus,input[type=password].ng-invalid.ng-touched:focus,input[type=password].invalid:focus,input[type=date].ng-invalid.ng-touched:focus,input[type=date].invalid:focus,input[type=datetime-local].ng-invalid.ng-touched:focus,input[type=datetime-local].invalid:focus,input[type=email].ng-invalid.ng-touched:focus,input[type=email].invalid:focus,input[type=file].ng-invalid.ng-touched:focus,input[type=file].invalid:focus,input[type=month].ng-invalid.ng-touched:focus,input[type=month].invalid:focus,input[type=tel].ng-invalid.ng-touched:focus,input[type=tel].invalid:focus,input[type=time].ng-invalid.ng-touched:focus,input[type=time].invalid:focus,input[type=url].ng-invalid.ng-touched:focus,input[type=url].invalid:focus,input[type=week].ng-invalid.ng-touched:focus,input[type=week].invalid:focus,textarea.ng-invalid.ng-touched:focus,textarea.invalid:focus{--tw-ring-color: rgb(248 113 113 / .3) }input[type=text].ng-invalid.ng-touched,input[type=text].invalid,input[type=number].ng-invalid.ng-touched,input[type=number].invalid,input[type=password].ng-invalid.ng-touched,input[type=password].invalid,input[type=date].ng-invalid.ng-touched,input[type=date].invalid,input[type=datetime-local].ng-invalid.ng-touched,input[type=datetime-local].invalid,input[type=email].ng-invalid.ng-touched,input[type=email].invalid,input[type=file].ng-invalid.ng-touched,input[type=file].invalid,input[type=month].ng-invalid.ng-touched,input[type=month].invalid,input[type=tel].ng-invalid.ng-touched,input[type=tel].invalid,input[type=time].ng-invalid.ng-touched,input[type=time].invalid,input[type=url].ng-invalid.ng-touched,input[type=url].invalid,input[type=week].ng-invalid.ng-touched,input[type=week].invalid,textarea.ng-invalid.ng-touched,textarea.invalid{background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\")}input[type=checkbox]{position:relative;margin-top:.25rem;margin-bottom:.25rem;height:1.25rem;width:1.25rem;border-radius:.25rem;padding:.125rem;display:inline-flex;flex-direction:row;justify-content:flex-end;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox]:disabled{pointer-events:none;opacity:.5}input[type=checkbox]:not(.switch){border-width:2px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}input[type=checkbox]:not(.switch):focus{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}input[type=checkbox]:not(.switch):before{border-radius:.25rem;--tw-content: \"\";content:var(--tw-content);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem;font-family:\"Font Awesome 6 Free\";font-weight:900}input[type=checkbox]:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox]:checked:before{--tw-content: \"\\f00c\";content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}input[type=checkbox]:disabled~label{opacity:.5}input[type=checkbox]~label{margin-left:.5rem;-webkit-user-select:none;user-select:none}input[type=checkbox].switch{height:1.5rem;width:3rem;border-radius:2rem;appearance:none;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:before{aspect-ratio:1 / 1;height:100%;border-radius:9999px;--tw-content: \"\";content:var(--tw-content);background-color:#6b728099}input[type=checkbox].switch:after{flex-grow:1;--tw-content: \"\";content:var(--tw-content);transition:flex-grow .15s ease-in-out}input[type=checkbox].switch:focus:before{background-color:#3b82f699}input[type=checkbox].switch:checked{border-color:#006bb6cc;--tw-bg-opacity: 1;background-color:rgb(0 107 182 / var(--tw-bg-opacity, 1));background-image:none}input[type=checkbox].switch:checked:before{--tw-content: \"\";content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}input[type=checkbox].switch:checked:after{flex-grow:0}label,.value{display:block;overflow-wrap:break-word;padding-top:.25rem;padding-bottom:.25rem}label.text,.value.text{white-space:pre-wrap}\n"] }]
|
|
1365
1369
|
}], ctorParameters: () => [], propDecorators: { autofocus: [{
|
|
1366
1370
|
type: Input
|
|
1367
1371
|
}], controlName: [{
|
|
@@ -1475,12 +1479,12 @@ class FormInputGroupComponent extends BaseComponent {
|
|
|
1475
1479
|
hasValidation(errorKey) {
|
|
1476
1480
|
return Object.keys(this.validations).indexOf(errorKey) >= 0;
|
|
1477
1481
|
}
|
|
1478
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1479
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1482
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1483
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormInputGroupComponent, isStandalone: true, selector: "lib-form-input-group", inputs: { autofocus: "autofocus", alignContent: "alignContent", controlName: "controlName", fixedValue: "fixedValue", format: "format", label: "label", isDisabled: "isDisabled", isFullHeight: "isFullHeight", maxLength: "maxLength", min: "min", notes: "notes", readOnly: "readOnly", rows: "rows", showLabel: "showLabel", step: "step", template: "template", type: "type", validations: "validations" }, host: { properties: { "class.full-height": "isFullHeight", "attr.type": "null" } }, usesInheritance: true, ngImport: i0, template: "@if (showLabel) {\n <label [attr.for]=\"controlName\"> {{ label | translate }}: </label>\n}\n\n<div class=\"field\" [class.col-span-2]=\"!showLabel\" [ngStyle]=\"{ 'align-content': alignContent }\">\n @if (loadingField || (formService.loading && formService.model === null)) {\n <div class=\"loading\">\n <div></div>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\"> </ng-container>\n @if (formControl?.touched) {\n <div class=\"validations\" [class.show]=\"formControl?.invalid\">\n @for (error of $safeNavigationMigration(formControl?.errors) | keyvalue; track error) {\n @if (hasValidation(error.key)) {\n <span>{{ validations[error.key] | translate }}</span>\n }\n <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n }\n </div>\n }\n <ng-template #defaultTemplate>\n <lib-form-input\n #formInput\n [autofocus]=\"autofocus\"\n [controlName]=\"controlName\"\n [fixedValue]=\"fixedValue\"\n [format]=\"format\"\n [isDisabled]=\"isDisabled\"\n [isFullHeight]=\"isFullHeight\"\n [min]=\"min\"\n [maxLength]=\"maxLength\"\n [readOnly]=\"readOnly\"\n [rows]=\"rows\"\n [step]=\"step\"\n [type]=\"type\"\n >\n </lib-form-input>\n </ng-template>\n @if (hasNotes) {\n <span class=\"text-sm italic\"> *{{ notes | translate }} </span>\n }\n }\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["blurred", "changed", "fixedValueChanged", "focused", "inputChanged"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1480
1484
|
}
|
|
1481
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormInputGroupComponent, decorators: [{
|
|
1482
1486
|
type: Component,
|
|
1483
|
-
args: [{ selector: 'lib-form-input-group', imports: [FormInputComponent, KeyValuePipe,
|
|
1487
|
+
args: [{ selector: 'lib-form-input-group', imports: [FormInputComponent, KeyValuePipe, NgStyle, NgTemplateOutlet, TranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, host: {
|
|
1484
1488
|
'[class.full-height]': 'isFullHeight',
|
|
1485
1489
|
// Angular keeps static attributes in the DOM even when a directive consumes them as an
|
|
1486
1490
|
// @Input(), so `type="checkbox"` would linger on this host element — where
|
|
@@ -1488,7 +1492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
1488
1492
|
// a checkbox (1px border, white fill, height:1rem). Clearing the attribute removes the
|
|
1489
1493
|
// stray box for every type while leaving the `type` @Input() untouched.
|
|
1490
1494
|
'[attr.type]': 'null',
|
|
1491
|
-
}, template: "
|
|
1495
|
+
}, template: "@if (showLabel) {\n <label [attr.for]=\"controlName\"> {{ label | translate }}: </label>\n}\n\n<div class=\"field\" [class.col-span-2]=\"!showLabel\" [ngStyle]=\"{ 'align-content': alignContent }\">\n @if (loadingField || (formService.loading && formService.model === null)) {\n <div class=\"loading\">\n <div></div>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"template ? template : defaultTemplate\"> </ng-container>\n @if (formControl?.touched) {\n <div class=\"validations\" [class.show]=\"formControl?.invalid\">\n @for (error of $safeNavigationMigration(formControl?.errors) | keyvalue; track error) {\n @if (hasValidation(error.key)) {\n <span>{{ validations[error.key] | translate }}</span>\n }\n <ng-template #defaultValidationError>{{ error.key }}</ng-template>\n }\n </div>\n }\n <ng-template #defaultTemplate>\n <lib-form-input\n #formInput\n [autofocus]=\"autofocus\"\n [controlName]=\"controlName\"\n [fixedValue]=\"fixedValue\"\n [format]=\"format\"\n [isDisabled]=\"isDisabled\"\n [isFullHeight]=\"isFullHeight\"\n [min]=\"min\"\n [maxLength]=\"maxLength\"\n [readOnly]=\"readOnly\"\n [rows]=\"rows\"\n [step]=\"step\"\n [type]=\"type\"\n >\n </lib-form-input>\n </ng-template>\n @if (hasNotes) {\n <span class=\"text-sm italic\"> *{{ notes | translate }} </span>\n }\n }\n</div>\n", styles: [":host{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid;gap:.75rem}:host.full-height{max-height:100%;overflow:auto}label{white-space:nowrap;padding-top:.25rem;padding-bottom:.25rem;text-align:right;font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.5rem;letter-spacing:.025em;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.field .validations{flex-basis:100%;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.field .validations.show{margin-top:.25rem}.field .validations span{display:block}.field .loading{max-width:24rem}@keyframes pulse{50%{opacity:.5}}.field .loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.field .loading *{height:.625rem;width:100%;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.field .loading *{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}\n"] }]
|
|
1492
1496
|
}], ctorParameters: () => [], propDecorators: { autofocus: [{
|
|
1493
1497
|
type: Input
|
|
1494
1498
|
}], alignContent: [{
|
|
@@ -2085,12 +2089,12 @@ class CatalogSelectComponent extends BaseComponent {
|
|
|
2085
2089
|
input.removeAttribute('aria-activedescendant');
|
|
2086
2090
|
}
|
|
2087
2091
|
}
|
|
2088
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2089
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2092
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2093
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CatalogSelectComponent, isStandalone: true, selector: "lib-catalog-select", inputs: { autofocus: "autofocus", controlName: "controlName", displayControlName: "displayControlName", displayProperty: "displayProperty", entriesList: "entriesList", filters: "filters", label: "label", maxEntries: "maxEntries", minimumLengthSearch: "minimumLengthSearch", notes: "notes", readOnly: "readOnly", searchEndpoint: "searchEndpoint", validations: "validations", valueProperty: "valueProperty" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)" } }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, read: TemplateRef }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<lib-form-input-group\n [controlName]=\"controlName\"\n [label]=\"label\"\n [notes]=\"notes\"\n [template]=\"template\"\n [validations]=\"validations\"\n>\n</lib-form-input-group>\n\n<ng-template #template>\n <div class=\"catalog-container\" [class.show]=\"isDropDownShown\">\n <lib-form-input\n #input\n [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n [autofocus]=\"autofocus\"\n [controlName]=\"displayControlName\"\n [invalid]=\"isInvalid && isTouched\"\n [readOnly]=\"readOnly\"\n (blurred)=\"onContainerBlur()\"\n (click)=\"onContainerClick()\"\n (focused)=\"onContainerFocus()\"\n (keydown)=\"onKeyDown($event)\"\n >\n </lib-form-input>\n @if (showClearButton) {\n <button class=\"clear-button\" type=\"button\" tabindex=\"-1\" (click)=\"onClearClick($event)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n <div class=\"dropdown-container\">\n <ul class=\"dropdown\" role=\"listbox\" [attr.id]=\"listboxId\">\n <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n listbox's option set, and they carry no click handler. The dropdown already\n closes on Escape, on blur and on an outside click. -->\n @if (isLoading) {\n <li role=\"presentation\" aria-live=\"polite\">\n {{ 'CatalogSelect-Loading' | translate }}\n </li>\n }\n @if (shouldUseCriteria && showMinimumCharactersMessage) {\n <li\n role=\"presentation\"\n aria-live=\"polite\"\n title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\n >\n {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n </li>\n }\n @if (showNoResultsMessage) {\n <li role=\"presentation\" aria-live=\"polite\" title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n {{ 'CatalogSelect-NoResultsFound' | translate }}\n </li>\n }\n\n <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n @if (showFailureMessage) {\n <li class=\"error\" role=\"presentation\">\n <button\n class=\"retry\"\n type=\"button\"\n title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n (click)=\"onDropDownErrorClick()\"\n >\n {{ 'CatalogSelect-FailureMessage' | translate }}\n </button>\n </li>\n }\n\n <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n Options in a combobox listbox are deliberately not focusable. Keyboard\n interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n points at the active option through aria-activedescendant. Giving each option\n its own tabindex and key handlers would break that pattern. -->\n @for (entry of displayedEntries; track entry; let i = $index) {\n <li\n class=\"dropdown-item\"\n role=\"option\"\n [attr.id]=\"getOptionId(i)\"\n [attr.aria-selected]=\"selectedValue === entry.value\"\n [class.focused]=\"focusedIndex === i\"\n [class.selected]=\"selectedValue === entry.value\"\n (click)=\"onDropDownItemClick(entry)\"\n >\n {{ entry.display }}\n </li>\n }\n <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n </ul>\n </div>\n</ng-template>\n", styles: [":host-context{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid}.catalog-container{position:relative}.catalog-container .clear-button{position:absolute;right:1.75rem;top:50%;display:flex;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border-radius:9999px;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.catalog-container .clear-button:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.catalog-container .clear-button{z-index:10;cursor:pointer;border-style:none;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;line-height:1}.catalog-container:has(.clear-button) lib-form-input ::ng-deep input{padding-right:3.5rem}div lib-form-input ::ng-deep input{cursor:pointer;text-overflow:ellipsis;background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;padding-right:2.25rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%239ca3af' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e\")}.dropdown-container{width:100%;-webkit-user-select:none;user-select:none}.dropdown{overflow-y:auto;overscroll-behavior:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-height:13rem}.dropdown li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem}.dropdown li:not(.dropdown-item){font-size:.875rem;line-height:1.25rem}.dropdown li .retry{width:100%;cursor:pointer;border-style:none;background-color:transparent;padding:0;text-align:left;text-decoration-line:underline;color:inherit;font:inherit}.dropdown li.dropdown-item{cursor:pointer}.dropdown li.dropdown-item:nth-child(2n){background-color:#f5f5f4b3}.dropdown li.dropdown-item.selected{background-color:#59a5db33;font-weight:700}.dropdown li.dropdown-item.focused{background-color:#59a5db4d;outline:2px solid transparent;outline-offset:2px}.dropdown li.dropdown-item:hover,.dropdown li.dropdown-item:nth-child(2n):hover,.dropdown li.dropdown-item.selected:hover,.dropdown li.dropdown-item.focused:hover{background-color:#59a5db80}lib-form-input-group{flex-basis:100%}\n"], dependencies: [{ kind: "component", type: FormInputComponent, selector: "lib-form-input", inputs: ["autofocus", "controlName", "disabledControlName", "displayReadOnlyAsDisabled", "fixedValue", "format", "invalid", "isDisabled", "isFullHeight", "maxLength", "min", "readOnly", "rows", "step", "type"], outputs: ["blurred", "changed", "fixedValueChanged", "focused", "inputChanged"] }, { kind: "component", type: FormInputGroupComponent, selector: "lib-form-input-group", inputs: ["autofocus", "alignContent", "controlName", "fixedValue", "format", "label", "isDisabled", "isFullHeight", "maxLength", "min", "notes", "readOnly", "rows", "showLabel", "step", "template", "type", "validations"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
2090
2094
|
}
|
|
2091
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2095
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CatalogSelectComponent, decorators: [{
|
|
2092
2096
|
type: Component,
|
|
2093
|
-
args: [{ selector: 'lib-catalog-select', imports: [FormInputComponent, FormInputGroupComponent,
|
|
2097
|
+
args: [{ selector: 'lib-catalog-select', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormInputComponent, FormInputGroupComponent, TranslatePipe], template: "<lib-form-input-group\n [controlName]=\"controlName\"\n [label]=\"label\"\n [notes]=\"notes\"\n [template]=\"template\"\n [validations]=\"validations\"\n>\n</lib-form-input-group>\n\n<ng-template #template>\n <div class=\"catalog-container\" [class.show]=\"isDropDownShown\">\n <lib-form-input\n #input\n [class.fixed-content]=\"readOnly && !shouldUseCriteria\"\n [autofocus]=\"autofocus\"\n [controlName]=\"displayControlName\"\n [invalid]=\"isInvalid && isTouched\"\n [readOnly]=\"readOnly\"\n (blurred)=\"onContainerBlur()\"\n (click)=\"onContainerClick()\"\n (focused)=\"onContainerFocus()\"\n (keydown)=\"onKeyDown($event)\"\n >\n </lib-form-input>\n @if (showClearButton) {\n <button class=\"clear-button\" type=\"button\" tabindex=\"-1\" (click)=\"onClearClick($event)\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n <div class=\"dropdown-container\">\n <ul class=\"dropdown\" role=\"listbox\" [attr.id]=\"listboxId\">\n <!-- Status rows are not options: role=\"presentation\" keeps them out of the\n listbox's option set, and they carry no click handler. The dropdown already\n closes on Escape, on blur and on an outside click. -->\n @if (isLoading) {\n <li role=\"presentation\" aria-live=\"polite\">\n {{ 'CatalogSelect-Loading' | translate }}\n </li>\n }\n @if (shouldUseCriteria && showMinimumCharactersMessage) {\n <li\n role=\"presentation\"\n aria-live=\"polite\"\n title=\"{{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\"\n >\n {{ 'CatalogSelect-MinimumLengthSearch' | translate: { minimumLengthSearch: minimumLengthSearch } }}\n </li>\n }\n @if (showNoResultsMessage) {\n <li role=\"presentation\" aria-live=\"polite\" title=\"{{ 'CatalogSelect-NoResultsFound' | translate }}\">\n {{ 'CatalogSelect-NoResultsFound' | translate }}\n </li>\n }\n\n <!-- Retrying is a real action, so it is a real button and reachable by keyboard. -->\n @if (showFailureMessage) {\n <li class=\"error\" role=\"presentation\">\n <button\n class=\"retry\"\n type=\"button\"\n title=\"{{ 'CatalogSelect-FailureMessage' | translate }}\"\n (click)=\"onDropDownErrorClick()\"\n >\n {{ 'CatalogSelect-FailureMessage' | translate }}\n </button>\n </li>\n }\n\n <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus --\n Options in a combobox listbox are deliberately not focusable. Keyboard\n interaction lives on the input, which owns ArrowUp/ArrowDown/Enter/Escape and\n points at the active option through aria-activedescendant. Giving each option\n its own tabindex and key handlers would break that pattern. -->\n @for (entry of displayedEntries; track entry; let i = $index) {\n <li\n class=\"dropdown-item\"\n role=\"option\"\n [attr.id]=\"getOptionId(i)\"\n [attr.aria-selected]=\"selectedValue === entry.value\"\n [class.focused]=\"focusedIndex === i\"\n [class.selected]=\"selectedValue === entry.value\"\n (click)=\"onDropDownItemClick(entry)\"\n >\n {{ entry.display }}\n </li>\n }\n <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n </ul>\n </div>\n</ng-template>\n", styles: [":host-context{grid-column:span 2 / span 2;display:grid;grid-template-columns:subgrid}.catalog-container{position:relative}.catalog-container .clear-button{position:absolute;right:1.75rem;top:50%;display:flex;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border-radius:9999px;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.catalog-container .clear-button:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.catalog-container .clear-button{z-index:10;cursor:pointer;border-style:none;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;line-height:1}.catalog-container:has(.clear-button) lib-form-input ::ng-deep input{padding-right:3.5rem}div lib-form-input ::ng-deep input{cursor:pointer;text-overflow:ellipsis;background-size:1.125rem 1.125rem;background-position:right .5625rem center;background-repeat:no-repeat;padding-right:2.25rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%239ca3af' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3e%3c/svg%3e\")}.dropdown-container{width:100%;-webkit-user-select:none;user-select:none}.dropdown{overflow-y:auto;overscroll-behavior:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-height:13rem}.dropdown li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .5rem}.dropdown li:not(.dropdown-item){font-size:.875rem;line-height:1.25rem}.dropdown li .retry{width:100%;cursor:pointer;border-style:none;background-color:transparent;padding:0;text-align:left;text-decoration-line:underline;color:inherit;font:inherit}.dropdown li.dropdown-item{cursor:pointer}.dropdown li.dropdown-item:nth-child(2n){background-color:#f5f5f4b3}.dropdown li.dropdown-item.selected{background-color:#59a5db33;font-weight:700}.dropdown li.dropdown-item.focused{background-color:#59a5db4d;outline:2px solid transparent;outline-offset:2px}.dropdown li.dropdown-item:hover,.dropdown li.dropdown-item:nth-child(2n):hover,.dropdown li.dropdown-item.selected:hover,.dropdown li.dropdown-item.focused:hover{background-color:#59a5db80}lib-form-input-group{flex-basis:100%}\n"] }]
|
|
2094
2098
|
}], ctorParameters: () => [], propDecorators: { bodyMouseDown: [{
|
|
2095
2099
|
type: HostListener,
|
|
2096
2100
|
args: ['body:mousedown', ['$event']]
|
|
@@ -2242,15 +2246,15 @@ class DataGridRowComponent extends BaseComponent {
|
|
|
2242
2246
|
refreshSelection() {
|
|
2243
2247
|
this.selected = this.isRowDataSelected;
|
|
2244
2248
|
}
|
|
2245
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2246
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DataGridRowComponent, isStandalone: true, selector: "lib-data-grid-row", inputs: { disabled: "disabled", isFirstRow: "isFirstRow", rowData: "rowData" }, outputs: { selectionResized: "selectionResized" }, host: { listeners: { "click": "setFocus()" }, properties: { "class.focused": "dataGridDataset.focusedRowKey === rowData", "class.selected": "dataGridDataset.isKeySelected(rowKey)" } }, usesInheritance: true, ngImport: i0, template: "<!-- A <label> rather than a clickable <div>: clicking anywhere in the cell still\nreaches the checkbox, natively. The click handler is a mouse-only convenience;\nthe keyboard path is the nested checkbox, which is focusable and toggles with\nSpace on its own. -->\n@if (dataGridDataset.configs.multiSelect) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <label class=\"cell selection\" (click)=\"onToggleSelection()\" (onResize)=\"onResizeSelection($event)\">\n <input class=\"form-input\" type=\"checkbox\" [attr.disabled]=\"disabled\" [(ngModel)]=\"selected\" />\n </label>\n}\n@for (column of columns; track column; let i = $index) {\n <div #cell class=\"cell\" [class.disabled]=\"disabled\" [ngClass]=\"column.customClass\">\n @if (isFirstRow) {\n <div class=\"spacer\" (onResize)=\"onResize(i, $event)\"></div>\n }\n <ng-container\n *ngTemplateOutlet=\"\n column.template ? column.template : simpleTemplate;\n context: { rowData: rowData, column: column }\n \"\n >\n </ng-container>\n </div>\n}\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n <span>{{ getValue(column.field) }}</span>\n</ng-template>\n", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgxResizeObserverModule }, { kind: "directive", type: i2.NgxResizeObserverDirective, selector: "[onResize]", inputs: ["resizeBoxModel"], outputs: ["onResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2247
2251
|
}
|
|
2248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridRowComponent, decorators: [{
|
|
2249
2253
|
type: Component,
|
|
2250
2254
|
args: [{ selector: 'lib-data-grid-row', host: {
|
|
2251
|
-
'[class.focused]': 'dataGridDataset.
|
|
2255
|
+
'[class.focused]': 'dataGridDataset.focusedRowKey === rowData',
|
|
2252
2256
|
'[class.selected]': 'dataGridDataset.isKeySelected(rowKey)',
|
|
2253
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgClass,
|
|
2257
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgClass, NgTemplateOutlet, NgxResizeObserverModule], template: "<!-- A <label> rather than a clickable <div>: clicking anywhere in the cell still\nreaches the checkbox, natively. The click handler is a mouse-only convenience;\nthe keyboard path is the nested checkbox, which is focusable and toggles with\nSpace on its own. -->\n@if (dataGridDataset.configs.multiSelect) {\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <label class=\"cell selection\" (click)=\"onToggleSelection()\" (onResize)=\"onResizeSelection($event)\">\n <input class=\"form-input\" type=\"checkbox\" [attr.disabled]=\"disabled\" [(ngModel)]=\"selected\" />\n </label>\n}\n@for (column of columns; track column; let i = $index) {\n <div #cell class=\"cell\" [class.disabled]=\"disabled\" [ngClass]=\"column.customClass\">\n @if (isFirstRow) {\n <div class=\"spacer\" (onResize)=\"onResize(i, $event)\"></div>\n }\n <ng-container\n *ngTemplateOutlet=\"\n column.template ? column.template : simpleTemplate;\n context: { rowData: rowData, column: column }\n \"\n >\n </ng-container>\n </div>\n}\n\n<ng-template #simpleTemplate let-rowData=\"rowData\" let-column=\"column\">\n <span>{{ getValue(column.field) }}</span>\n</ng-template>\n", styles: [":host{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.cell{position:relative;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell.disabled{pointer-events:none;cursor:default;overflow:hidden;text-overflow:ellipsis;opacity:.6}.cell input{vertical-align:super}.cell.selection{display:flex;align-items:center}.spacer{position:absolute;inset:0;z-index:-1;height:0px}\n"] }]
|
|
2254
2258
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
2255
2259
|
type: Input
|
|
2256
2260
|
}], isFirstRow: [{
|
|
@@ -2336,7 +2340,7 @@ class DataGridComponent extends BaseComponent {
|
|
|
2336
2340
|
get selectionColWidth() {
|
|
2337
2341
|
return this.selectionColRealSize
|
|
2338
2342
|
? `${this.selectionColRealSize}px`
|
|
2339
|
-
: this.configs.multiSelectSize ?? 'minmax(1.5rem,min-content)';
|
|
2343
|
+
: (this.configs.multiSelectSize ?? 'minmax(1.5rem,min-content)');
|
|
2340
2344
|
}
|
|
2341
2345
|
get shouldDisplayMessageWhenEmpty() {
|
|
2342
2346
|
return this.dataGridDataset?.configs?.showMessageOnEmpty ?? true;
|
|
@@ -2467,14 +2471,14 @@ class DataGridComponent extends BaseComponent {
|
|
|
2467
2471
|
trackByFn(index, item) {
|
|
2468
2472
|
return item.key;
|
|
2469
2473
|
}
|
|
2470
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2471
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2474
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2475
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: DataGridComponent, isStandalone: true, selector: "lib-data-grid", inputs: { disabled: "disabled", lazyLoadRows: "lazyLoadRows", showButtons: "showButtons" }, host: { properties: { "class.no-borders": "showButtons" } }, viewQueries: [{ propertyName: "bodyElement", first: true, predicate: ["body"], descendants: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showButtons) {\n <div class=\"buttons\">\n <ng-content select=\"[buttons]\"></ng-content>\n </div>\n}\n\n<div class=\"header\" [class.hide]=\"isHideColumns\" [style.padding-right.px]=\"headerRightMargin\">\n <!-- Translated by however far the body is scrolled sideways. The rows scroll inside the CDK\n viewport and the header sits outside it, so without this the headings simply stay put\n while the cells move away from them. -->\n <div class=\"header-row\" [style.transform]=\"headerScrollLeft ? 'translateX(-' + headerScrollLeft + 'px)' : null\">\n @if (isShowMultiSelect) {\n <div\n class=\"header-cell selection\"\n [ngStyle]=\"{\n width: selectionColWidth ? selectionColWidth : null,\n }\"\n >\n \n </div>\n }\n\n <!-- A measured zero is a width, not the absence of one: it is a 1fr column that collapsed,\n and its heading has to collapse too.\n\n Such a heading is removed rather than merely made zero wide, because a flex item still\n takes a gap on each side while the body grid allows the collapsed track only one, and\n that spare gap pushed every heading to its right out by 16px. -->\n @for (column of columns; track column) {\n <div\n class=\"header-cell\"\n [ngStyle]=\"{\n display: column.realSize === 0 ? 'none' : null,\n 'width.px': column.realSize ?? null,\n }\"\n >\n <span>{{ column.headerName | translate }}</span>\n </div>\n }\n </div>\n</div>\n\n<div #body class=\"body\" [style.min-height.px]=\"bodyMinHeight\">\n <cdk-virtual-scroll-viewport [itemSize]=\"configs.rowHeight\" [style.grid-template-columns]=\"gridColumns\">\n <lib-data-grid-row\n #row\n *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\n [disabled]=\"disabled\"\n [isFirstRow]=\"isFirstVisibleRow(i)\"\n [rowData]=\"row\"\n [style.height.px]=\"configs.rowHeight\"\n (selectionResized)=\"onSelectionResized($event)\"\n >\n </lib-data-grid-row>\n\n @if (loading) {\n <div class=\"loading\" [style.height.px]=\"configs.rowHeight\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n @if (!loading && !hasBeenLoaded && lazyLoadRows) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenLazyLoad | translate }}\n </span>\n </div>\n }\n @if (!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)) {\n @if (!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenEmpty | translate }}\n </span>\n </div>\n }\n @if (hasFailed) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\n </span>\n </div>\n }\n }\n </cdk-virtual-scroll-viewport>\n</div>\n", styles: [":host-context{display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}:host-context.no-borders .header .header-row{padding-top:.375rem;padding-bottom:.375rem}:host-context.no-borders .body lib-data-grid-row{padding-top:.25rem;padding-bottom:.25rem}.header-row,lib-data-grid-row,.loading,.message{gap:1rem;padding-left:1rem;padding-right:1rem}.header{overflow:hidden;border-bottom-width:1px;border-color:#d1d5dbe6;background-color:#e5e7eb66;font-weight:700}.header.hide{display:none}.header .header-row{display:flex;flex-direction:row;padding-top:.75rem;padding-bottom:.75rem}.header .header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .header-cell:not(.selection){flex:none}.body{position:relative;flex-grow:1}.body cdk-virtual-scroll-viewport{position:absolute;inset:0}.body cdk-virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{display:grid;grid-template-columns:inherit}.body lib-data-grid-row{margin-top:-1px;cursor:pointer;border-top-width:1px;border-bottom-width:1px;border-color:#cbd5e180;padding-top:.5rem;padding-bottom:.5rem}.body lib-data-grid-row:nth-child(2n){background-color:#f8fafcb3}.body lib-data-grid-row:hover{background-color:#bfdbfe33}.body lib-data-grid-row.focused{z-index:1;border-color:#94a3b899}.body lib-data-grid-row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body lib-data-grid-row.selected:hover{background-color:#bfdbfe66}.body .loading,.body .message{display:flex;align-items:center;gap:.5rem;white-space:nowrap;height:2.5rem;border-bottom-width:1px;border-color:#cbd5e180;grid-column:1 / -1}.body .loading span,.body .message span{overflow:hidden;text-overflow:ellipsis}.body .loading svg{height:1.5rem;min-height:1.5rem;width:1.5rem;min-width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.buttons{display:flex;border-top-width:1px;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem}\n"], dependencies: [{ kind: "component", type: DataGridRowComponent, selector: "lib-data-grid-row", inputs: ["disabled", "isFirstRow", "rowData"], outputs: ["selectionResized"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
2472
2476
|
}
|
|
2473
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridComponent, decorators: [{
|
|
2474
2478
|
type: Component,
|
|
2475
2479
|
args: [{ selector: 'lib-data-grid', host: {
|
|
2476
2480
|
'[class.no-borders]': 'showButtons',
|
|
2477
|
-
}, imports: [DataGridRowComponent,
|
|
2481
|
+
}, changeDetection: ChangeDetectionStrategy.Eager, imports: [DataGridRowComponent, NgStyle, ScrollingModule, TranslatePipe], template: "@if (showButtons) {\n <div class=\"buttons\">\n <ng-content select=\"[buttons]\"></ng-content>\n </div>\n}\n\n<div class=\"header\" [class.hide]=\"isHideColumns\" [style.padding-right.px]=\"headerRightMargin\">\n <!-- Translated by however far the body is scrolled sideways. The rows scroll inside the CDK\n viewport and the header sits outside it, so without this the headings simply stay put\n while the cells move away from them. -->\n <div class=\"header-row\" [style.transform]=\"headerScrollLeft ? 'translateX(-' + headerScrollLeft + 'px)' : null\">\n @if (isShowMultiSelect) {\n <div\n class=\"header-cell selection\"\n [ngStyle]=\"{\n width: selectionColWidth ? selectionColWidth : null,\n }\"\n >\n \n </div>\n }\n\n <!-- A measured zero is a width, not the absence of one: it is a 1fr column that collapsed,\n and its heading has to collapse too.\n\n Such a heading is removed rather than merely made zero wide, because a flex item still\n takes a gap on each side while the body grid allows the collapsed track only one, and\n that spare gap pushed every heading to its right out by 16px. -->\n @for (column of columns; track column) {\n <div\n class=\"header-cell\"\n [ngStyle]=\"{\n display: column.realSize === 0 ? 'none' : null,\n 'width.px': column.realSize ?? null,\n }\"\n >\n <span>{{ column.headerName | translate }}</span>\n </div>\n }\n </div>\n</div>\n\n<div #body class=\"body\" [style.min-height.px]=\"bodyMinHeight\">\n <cdk-virtual-scroll-viewport [itemSize]=\"configs.rowHeight\" [style.grid-template-columns]=\"gridColumns\">\n <lib-data-grid-row\n #row\n *cdkVirtualFor=\"let row of dataGridDataset.loadedRows; index as i; trackBy: trackByFn\"\n [disabled]=\"disabled\"\n [isFirstRow]=\"isFirstVisibleRow(i)\"\n [rowData]=\"row\"\n [style.height.px]=\"configs.rowHeight\"\n (selectionResized)=\"onSelectionResized($event)\"\n >\n </lib-data-grid-row>\n\n @if (loading) {\n <div class=\"loading\" [style.height.px]=\"configs.rowHeight\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ dataGridDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n @if (!loading && !hasBeenLoaded && lazyLoadRows) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenLazyLoad | translate }}\n </span>\n </div>\n }\n @if (!loading && hasBeenLoaded && (!hasLoadedRows || hasFailed)) {\n @if (!hasFailed && !hasLoadedRows && hasMessageToDisplayWhenEmpty && shouldDisplayMessageWhenEmpty) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n {{ messageToDisplayWhenEmpty | translate }}\n </span>\n </div>\n }\n @if (hasFailed) {\n <div class=\"message\" [style.height.px]=\"configs.rowHeight\">\n <span>\n <i class=\"fas fa-exclamation-triangle mr-2 text-yellow-600\"></i>{{ messageToDisplayWhenFailed | translate }}\n </span>\n </div>\n }\n }\n </cdk-virtual-scroll-viewport>\n</div>\n", styles: [":host-context{display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}:host-context.no-borders .header .header-row{padding-top:.375rem;padding-bottom:.375rem}:host-context.no-borders .body lib-data-grid-row{padding-top:.25rem;padding-bottom:.25rem}.header-row,lib-data-grid-row,.loading,.message{gap:1rem;padding-left:1rem;padding-right:1rem}.header{overflow:hidden;border-bottom-width:1px;border-color:#d1d5dbe6;background-color:#e5e7eb66;font-weight:700}.header.hide{display:none}.header .header-row{display:flex;flex-direction:row;padding-top:.75rem;padding-bottom:.75rem}.header .header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .header-cell:not(.selection){flex:none}.body{position:relative;flex-grow:1}.body cdk-virtual-scroll-viewport{position:absolute;inset:0}.body cdk-virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{display:grid;grid-template-columns:inherit}.body lib-data-grid-row{margin-top:-1px;cursor:pointer;border-top-width:1px;border-bottom-width:1px;border-color:#cbd5e180;padding-top:.5rem;padding-bottom:.5rem}.body lib-data-grid-row:nth-child(2n){background-color:#f8fafcb3}.body lib-data-grid-row:hover{background-color:#bfdbfe33}.body lib-data-grid-row.focused{z-index:1;border-color:#94a3b899}.body lib-data-grid-row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body lib-data-grid-row.selected:hover{background-color:#bfdbfe66}.body .loading,.body .message{display:flex;align-items:center;gap:.5rem;white-space:nowrap;height:2.5rem;border-bottom-width:1px;border-color:#cbd5e180;grid-column:1 / -1}.body .loading span,.body .message span{overflow:hidden;text-overflow:ellipsis}.body .loading svg{height:1.5rem;min-height:1.5rem;width:1.5rem;min-width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.buttons{display:flex;border-top-width:1px;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem}\n"] }]
|
|
2478
2482
|
}], ctorParameters: () => [], propDecorators: { bodyElement: [{
|
|
2479
2483
|
type: ViewChild,
|
|
2480
2484
|
args: ['body']
|
|
@@ -2500,14 +2504,14 @@ class FormGroupComponent {
|
|
|
2500
2504
|
get hasTitle() {
|
|
2501
2505
|
return !!this.label;
|
|
2502
2506
|
}
|
|
2503
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2504
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2507
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2508
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormGroupComponent, isStandalone: true, selector: "lib-form-group", inputs: { shouldExpand: "shouldExpand", label: "label" }, host: { properties: { "class.expand": "shouldExpand" } }, ngImport: i0, template: "@if (hasTitle) {\n <h3 class=\"title\">\n {{ label | translate }}\n </h3>\n}\n\n<div class=\"content\" [class.has-title]=\"hasTitle\">\n <ng-content></ng-content>\n</div>\n", styles: [":host-context.expand{display:flex;max-height:100%;flex-direction:column;overflow-y:hidden}:host-context.expand .content{max-height:100%;flex-grow:1;overflow-y:hidden}.title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.content{display:grid;grid-auto-rows:auto;grid-template-columns:min-content minmax(0,1fr);gap:.25rem}.content.has-title{border-top-width:1px;border-color:#d1d5dbe6;padding:.75rem .5rem .5rem}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2505
2509
|
}
|
|
2506
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2510
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormGroupComponent, decorators: [{
|
|
2507
2511
|
type: Component,
|
|
2508
|
-
args: [{ selector: 'lib-form-group', imports: [
|
|
2512
|
+
args: [{ selector: 'lib-form-group', imports: [TranslatePipe], host: {
|
|
2509
2513
|
'[class.expand]': 'shouldExpand',
|
|
2510
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "
|
|
2514
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasTitle) {\n <h3 class=\"title\">\n {{ label | translate }}\n </h3>\n}\n\n<div class=\"content\" [class.has-title]=\"hasTitle\">\n <ng-content></ng-content>\n</div>\n", styles: [":host-context.expand{display:flex;max-height:100%;flex-direction:column;overflow-y:hidden}:host-context.expand .content{max-height:100%;flex-grow:1;overflow-y:hidden}.title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.content{display:grid;grid-auto-rows:auto;grid-template-columns:min-content minmax(0,1fr);gap:.25rem}.content.has-title{border-top-width:1px;border-color:#d1d5dbe6;padding:.75rem .5rem .5rem}\n"] }]
|
|
2511
2515
|
}], propDecorators: { shouldExpand: [{
|
|
2512
2516
|
type: Input
|
|
2513
2517
|
}], label: [{
|
|
@@ -2556,12 +2560,12 @@ class GroupAccordionComponent {
|
|
|
2556
2560
|
setMaxHeight() {
|
|
2557
2561
|
this._maxHeight = this.containerElementRef?.nativeElement?.offsetHeight ?? 0;
|
|
2558
2562
|
}
|
|
2559
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2560
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2563
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2564
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: GroupAccordionComponent, isStandalone: true, selector: "lib-group-accordion", inputs: { label: "label" }, host: { properties: { "class.collapsed": "collapsed" } }, viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n <h6\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"!collapsed\"\n (click)=\"onToggle()\"\n (keydown.enter)=\"onToggle()\"\n (keydown.space)=\"onToggle(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}\n </h6>\n</div>\n\n<div\n #container\n class=\"content animate\"\n [ngStyle]=\"\n (maxHeight >= 0 && {\n 'height.px': maxHeight,\n 'max-height.px': maxHeight,\n }) ||\n null\n \"\n>\n <div #maxHeighContainer>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host-context{margin-bottom:1rem;display:flex;flex-direction:column}:host-context.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host-context.collapsed .content{max-height:0px!important;overflow:hidden!important}:host-context:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media(min-width:1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media(min-width:1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
2561
2565
|
}
|
|
2562
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2566
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupAccordionComponent, decorators: [{
|
|
2563
2567
|
type: Component,
|
|
2564
|
-
args: [{ selector: 'lib-group-accordion', host: { '[class.collapsed]': 'collapsed' }, imports: [NgStyle], template: "<div class=\"title\">\n <h6\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"!collapsed\"\n (click)=\"onToggle()\"\n (keydown.enter)=\"onToggle()\"\n (keydown.space)=\"onToggle(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}\n </h6>\n</div>\n\n<div\n #container\n class=\"content animate\"\n [ngStyle]=\"\n (maxHeight >= 0 && {\n 'height.px': maxHeight,\n 'max-height.px': maxHeight
|
|
2568
|
+
args: [{ selector: 'lib-group-accordion', host: { '[class.collapsed]': 'collapsed' }, changeDetection: ChangeDetectionStrategy.Eager, imports: [NgStyle], template: "<div class=\"title\">\n <h6\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"!collapsed\"\n (click)=\"onToggle()\"\n (keydown.enter)=\"onToggle()\"\n (keydown.space)=\"onToggle(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down fa-sm\"></i>{{ this.label }}\n </h6>\n</div>\n\n<div\n #container\n class=\"content animate\"\n [ngStyle]=\"\n (maxHeight >= 0 && {\n 'height.px': maxHeight,\n 'max-height.px': maxHeight,\n }) ||\n null\n \"\n>\n <div #maxHeighContainer>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host-context{margin-bottom:1rem;display:flex;flex-direction:column}:host-context.collapsed i{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host-context.collapsed .content{max-height:0px!important;overflow:hidden!important}:host-context:not(.collapsed) .content{animation:show .15s}.title{-webkit-user-select:none;user-select:none}.title i{margin-right:.5rem;padding-top:.25rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.title h6{margin-bottom:0;display:inline;height:3rem;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;padding-left:.25rem;padding-right:.5rem;font-size:1.125rem;text-transform:uppercase;line-height:3rem}.content{box-sizing:content-box;flex-grow:1;overflow-y:hidden;padding-left:.25rem;padding-right:.25rem}.content.animate{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.content div{padding-bottom:.25rem}@media(min-width:1024px){.content div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}@media(min-width:1280px){.content div{grid-template-columns:repeat(3,minmax(0,1fr))}}.content div{height:100%}@keyframes show{0%{overflow:hidden}99%{overflow:hidden}to{overflow:auto}}\n"] }]
|
|
2565
2569
|
}], propDecorators: { containerElementRef: [{
|
|
2566
2570
|
type: ViewChild,
|
|
2567
2571
|
args: ['container']
|
|
@@ -2623,10 +2627,10 @@ class ScrollSpyDirective {
|
|
|
2623
2627
|
}
|
|
2624
2628
|
});
|
|
2625
2629
|
}
|
|
2626
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2627
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2630
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ScrollSpyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2631
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: ScrollSpyDirective, isStandalone: true, selector: "[libScrollSpy]", inputs: { spiedTags: "spiedTags" }, outputs: { activeSectionChange: "activeSectionChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, ngImport: i0 });
|
|
2628
2632
|
}
|
|
2629
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ScrollSpyDirective, decorators: [{
|
|
2630
2634
|
type: Directive,
|
|
2631
2635
|
args: [{
|
|
2632
2636
|
selector: '[libScrollSpy]',
|
|
@@ -2655,12 +2659,12 @@ class GroupContainerComponent {
|
|
|
2655
2659
|
scrollTo(section) {
|
|
2656
2660
|
this.scrollSpy.scrollTo(section);
|
|
2657
2661
|
}
|
|
2658
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2659
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2662
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2663
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: GroupContainerComponent, isStandalone: true, selector: "lib-group-container", inputs: { title: "title", icon: "icon" }, queries: [{ propertyName: "sections", predicate: GroupAccordionComponent, descendants: true }], viewQueries: [{ propertyName: "scrollSpy", first: true, predicate: ScrollSpyDirective, descendants: true }], ngImport: i0, template: "<div class=\"title\">\n @if (!!title && !!icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\n }\n @if (!!title) {\n <h4>{{ title | translate }}</h4>\n }\n @if (!title) {\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n }\n</div>\n\n<div class=\"content-container\">\n <ng-content></ng-content>\n</div>\n", styles: [":host-context{position:relative;display:flex;flex-grow:1;flex-direction:column;overflow:hidden;border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;background-color:#fffc}.title{display:flex;height:2rem;align-items:center;text-overflow:ellipsis;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem .5rem}.title i{padding-right:.5rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.title h4{font-weight:600}.title svg{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(360deg)}}.title svg{animation:spin 1s linear infinite}.content-container{position:relative;display:flex;flex-grow:1;overflow:hidden}.content-container ::ng-deep>*{flex-grow:1;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2660
2664
|
}
|
|
2661
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupContainerComponent, decorators: [{
|
|
2662
2666
|
type: Component,
|
|
2663
|
-
args: [{ selector: 'lib-group-container', imports: [NgClass,
|
|
2667
|
+
args: [{ selector: 'lib-group-container', imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"title\">\n @if (!!title && !!icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"icon\"></i>\n }\n @if (!!title) {\n <h4>{{ title | translate }}</h4>\n }\n @if (!title) {\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n }\n</div>\n\n<div class=\"content-container\">\n <ng-content></ng-content>\n</div>\n", styles: [":host-context{position:relative;display:flex;flex-grow:1;flex-direction:column;overflow:hidden;border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;background-color:#fffc}.title{display:flex;height:2rem;align-items:center;text-overflow:ellipsis;border-bottom-width:1px;border-color:#d1d5dbe6;padding:.25rem .5rem}.title i{padding-right:.5rem;--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.title h4{font-weight:600}.title svg{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(360deg)}}.title svg{animation:spin 1s linear infinite}.content-container{position:relative;display:flex;flex-grow:1;overflow:hidden}.content-container ::ng-deep>*{flex-grow:1;overflow:hidden}\n"] }]
|
|
2664
2668
|
}], propDecorators: { scrollSpy: [{
|
|
2665
2669
|
type: ViewChild,
|
|
2666
2670
|
args: [ScrollSpyDirective]
|
|
@@ -2686,12 +2690,12 @@ class GroupScrollSpyComponent {
|
|
|
2686
2690
|
scrollTo(section) {
|
|
2687
2691
|
this.scrollSpy.scrollTo(section);
|
|
2688
2692
|
}
|
|
2689
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2690
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2693
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupScrollSpyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2694
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: GroupScrollSpyComponent, isStandalone: true, selector: "lib-group-scroll-spy", queries: [{ propertyName: "sections", predicate: GroupAccordionComponent, descendants: true }], viewQueries: [{ propertyName: "scrollSpy", first: true, predicate: ScrollSpyDirective, descendants: true }], ngImport: i0, template: "<div class=\"scroll-spy\">\n @for (title of titles; track title; let i = $index) {\n <a\n class=\"item\"\n [class.active]=\"i === activeSection\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-current]=\"i === activeSection\"\n (click)=\"scrollTo(i)\"\n (keydown.enter)=\"scrollTo(i)\"\n (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n >{{ title }}</a\n >\n }\n</div>\n\n<div\n class=\"content\"\n libScrollSpy\n [class.no-scroll-spy]=\"titles.length === 0\"\n [spiedTags]=\"['lib-group-accordion']\"\n (activeSectionChange)=\"activeSectionChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host-context{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media(min-width:768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media(min-width:768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"], dependencies: [{ kind: "directive", type: ScrollSpyDirective, selector: "[libScrollSpy]", inputs: ["spiedTags"], outputs: ["activeSectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
2691
2695
|
}
|
|
2692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2696
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: GroupScrollSpyComponent, decorators: [{
|
|
2693
2697
|
type: Component,
|
|
2694
|
-
args: [{ selector: 'lib-group-scroll-spy', imports: [
|
|
2698
|
+
args: [{ selector: 'lib-group-scroll-spy', changeDetection: ChangeDetectionStrategy.Eager, imports: [ScrollSpyDirective], template: "<div class=\"scroll-spy\">\n @for (title of titles; track title; let i = $index) {\n <a\n class=\"item\"\n [class.active]=\"i === activeSection\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-current]=\"i === activeSection\"\n (click)=\"scrollTo(i)\"\n (keydown.enter)=\"scrollTo(i)\"\n (keydown.space)=\"scrollTo(i); $event.preventDefault()\"\n >{{ title }}</a\n >\n }\n</div>\n\n<div\n class=\"content\"\n libScrollSpy\n [class.no-scroll-spy]=\"titles.length === 0\"\n [spiedTags]=\"['lib-group-accordion']\"\n (activeSectionChange)=\"activeSectionChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host-context{position:relative;display:flex;height:100%;max-height:100%;min-height:100%;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:1;flex-direction:column;overflow:auto;scroll-behavior:smooth;padding:.75rem .75rem .25rem}@media(min-width:768px){.content{padding-right:10.5rem}.content.no-scroll-spy{padding-right:.75rem}}.scroll-spy{position:absolute;top:.75rem;right:.75rem;display:none;width:9rem;-webkit-user-select:none;user-select:none;flex-direction:column}@media(min-width:768px){.scroll-spy{display:flex}}.scroll-spy a{cursor:pointer;border-left-width:2px;--tw-border-opacity: 1;border-left-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.scroll-spy a.active{--tw-border-opacity: 1;border-left-color:rgb(0 107 182 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(0 107 182 / var(--tw-text-opacity, 1))}.scroll-spy a:active{background-color:#006bb61a}\n"] }]
|
|
2695
2699
|
}], propDecorators: { scrollSpy: [{
|
|
2696
2700
|
type: ViewChild,
|
|
2697
2701
|
args: [ScrollSpyDirective]
|
|
@@ -2779,26 +2783,21 @@ class ModalComponent extends BaseComponent {
|
|
|
2779
2783
|
}
|
|
2780
2784
|
documentKeyDown(event) {
|
|
2781
2785
|
event = event || window.event;
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
isEscape = event.key === 'Escape' || event.key === 'Esc';
|
|
2785
|
-
}
|
|
2786
|
-
else {
|
|
2787
|
-
isEscape = event.keyCode === 27;
|
|
2788
|
-
}
|
|
2786
|
+
// keyCode is the fallback for engines predating KeyboardEvent.key.
|
|
2787
|
+
const isEscape = 'key' in event ? event.key === 'Escape' || event.key === 'Esc' : event.keyCode === 27;
|
|
2789
2788
|
if (!this.modalProcessing && this.isShown && isEscape && document.body.classList.contains('modal-active')) {
|
|
2790
2789
|
this.toggleModal();
|
|
2791
2790
|
}
|
|
2792
2791
|
}
|
|
2793
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2794
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2792
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", inputs: { closeButtonText: "closeButtonText", dialog: "dialog", modalProcessing: "modalProcessing", position: "position", size: "size", title: "title" }, outputs: { closed: "closed" }, host: { attributes: { "title": "" }, listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)", "document:keydown.escape": "documentKeyDown($event)" }, properties: { "class.show": "isShown" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"modal-overlay\"></div>\n\n<div class=\"modal-container size-{{ size }} {{ position }}\">\n <form class=\"modal-content\">\n @if (title) {\n <div class=\"modal-header\">\n <p class=\"text-2xl font-bold\">{{ title }}</p>\n <button type=\"button\" class=\"modal-close\" (click)=\"toggleModal()\">\n <svg\n class=\"fill-current text-black\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n >\n <path\n d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\"\n ></path>\n </svg>\n </button>\n </div>\n }\n\n <div class=\"modal-body\">\n <ng-content select=\"[body]\"></ng-content>\n </div>\n\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn gray-300\" [disabled]=\"modalProcessing\" (click)=\"onCloseClick()\">\n {{ closeButtonText }}\n </button>\n\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </form>\n</div>\n", styles: ["body.modal-active{overflow-x:hidden;overflow-y:visible!important}:host{position:fixed;top:0;left:0;z-index:50;height:100%;width:100%}:host:not(.show){pointer-events:none;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-delay:.15s}:host:not(.show) .modal-overlay{opacity:0;transition-delay:.15s}:host:not(.show) .modal-container.top,:host:not(.show) .modal-container.center{--tw-translate-y: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.bottom{--tw-translate-y: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.left{--tw-translate-x: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.right{--tw-translate-x: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container .modal-content{animation:hidden 0s ease-in-out forwards}.modal-overlay{position:fixed;inset:0;height:100vh;width:100vw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));opacity:.5;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.modal-container{margin:auto;display:grid;height:100%;max-height:100vh;min-height:100%;grid-template-columns:repeat(1,minmax(0,1fr));padding:1.75rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.modal-container.top{align-items:flex-start}.modal-container.bottom{align-items:flex-end}.modal-container.left{margin-right:0;align-items:center}.modal-container.right{margin-left:0;align-items:center}.modal-container.center{align-items:center}.modal-container.size-sm{max-width:24rem}.modal-container.size-md{max-width:28rem}.modal-container.size-lg{max-width:32rem}.modal-container.size-xl{max-width:36rem}.modal-container.size-2xl{max-width:42rem}.modal-container.size-3xl{max-width:48rem}.modal-container.size-4xl{max-width:56rem}.modal-container.size-5xl{max-width:64rem}.modal-container.size-6xl{max-width:72rem}.modal-container.size-7xl{max-width:80rem}.modal-container.size-full{max-width:100%}.modal-container.size-auto{width:100%}@media(min-width:640px){.modal-container.size-auto{max-width:640px}}@media(min-width:768px){.modal-container.size-auto{max-width:768px}}@media(min-width:1024px){.modal-container.size-auto{max-width:1024px}}@media(min-width:1280px){.modal-container.size-auto{max-width:1280px}}@media(min-width:1536px){.modal-container.size-auto{max-width:1536px}}.modal-container .modal-content{position:relative;width:100%;border-radius:.375rem;border-width:1px;border-color:#0003;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));background-clip:padding-box;outline-width:0px;display:grid;max-height:100%;grid-template-rows:min-content 1fr min-content;overflow:hidden;--tw-shadow: 0 0 4px 0 rgba(0,0,0,.2), 0 3px 20px 0 rgba(0,0,0,.19);--tw-shadow-colored: 0 0 4px 0 var(--tw-shadow-color), 0 3px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);animation:shown .3s ease-in-out forwards}.modal-container .modal-content .modal-header{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:1rem}.modal-container .modal-content .modal-header .modal-close{position:absolute;top:0;right:0;margin:.5rem;cursor:pointer;padding:.5rem;opacity:.6}.modal-container .modal-content .modal-body{overflow:hidden;padding:1rem}.modal-container .modal-content .modal-footer{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;justify-content:flex-end;gap:.25rem;white-space:nowrap;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.75rem}.modal-container .modal-content .modal-footer>*,.modal-container .modal-content .modal-footer ::ng-deep div[footer]>*{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;gap:.25rem}@keyframes hidden{0%{display:flex}to{display:none}}@keyframes shown{0%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
2795
2794
|
}
|
|
2796
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
2797
2796
|
type: Component,
|
|
2798
2797
|
args: [{ selector: 'lib-modal', host: {
|
|
2799
2798
|
title: '', // This is to ensure that the title input does not conflict with the native HTML title attribute.
|
|
2800
2799
|
'[class.show]': 'isShown',
|
|
2801
|
-
}, imports: [
|
|
2800
|
+
}, changeDetection: ChangeDetectionStrategy.Eager, imports: [], template: "<div class=\"modal-overlay\"></div>\n\n<div class=\"modal-container size-{{ size }} {{ position }}\">\n <form class=\"modal-content\">\n @if (title) {\n <div class=\"modal-header\">\n <p class=\"text-2xl font-bold\">{{ title }}</p>\n <button type=\"button\" class=\"modal-close\" (click)=\"toggleModal()\">\n <svg\n class=\"fill-current text-black\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n >\n <path\n d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\"\n ></path>\n </svg>\n </button>\n </div>\n }\n\n <div class=\"modal-body\">\n <ng-content select=\"[body]\"></ng-content>\n </div>\n\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn gray-300\" [disabled]=\"modalProcessing\" (click)=\"onCloseClick()\">\n {{ closeButtonText }}\n </button>\n\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </form>\n</div>\n", styles: ["body.modal-active{overflow-x:hidden;overflow-y:visible!important}:host{position:fixed;top:0;left:0;z-index:50;height:100%;width:100%}:host:not(.show){pointer-events:none;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-delay:.15s}:host:not(.show) .modal-overlay{opacity:0;transition-delay:.15s}:host:not(.show) .modal-container.top,:host:not(.show) .modal-container.center{--tw-translate-y: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.bottom{--tw-translate-y: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.left{--tw-translate-x: -3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container.right{--tw-translate-x: 3.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host:not(.show) .modal-container .modal-content{animation:hidden 0s ease-in-out forwards}.modal-overlay{position:fixed;inset:0;height:100vh;width:100vw;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));opacity:.5;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.modal-container{margin:auto;display:grid;height:100%;max-height:100vh;min-height:100%;grid-template-columns:repeat(1,minmax(0,1fr));padding:1.75rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.modal-container.top{align-items:flex-start}.modal-container.bottom{align-items:flex-end}.modal-container.left{margin-right:0;align-items:center}.modal-container.right{margin-left:0;align-items:center}.modal-container.center{align-items:center}.modal-container.size-sm{max-width:24rem}.modal-container.size-md{max-width:28rem}.modal-container.size-lg{max-width:32rem}.modal-container.size-xl{max-width:36rem}.modal-container.size-2xl{max-width:42rem}.modal-container.size-3xl{max-width:48rem}.modal-container.size-4xl{max-width:56rem}.modal-container.size-5xl{max-width:64rem}.modal-container.size-6xl{max-width:72rem}.modal-container.size-7xl{max-width:80rem}.modal-container.size-full{max-width:100%}.modal-container.size-auto{width:100%}@media(min-width:640px){.modal-container.size-auto{max-width:640px}}@media(min-width:768px){.modal-container.size-auto{max-width:768px}}@media(min-width:1024px){.modal-container.size-auto{max-width:1024px}}@media(min-width:1280px){.modal-container.size-auto{max-width:1280px}}@media(min-width:1536px){.modal-container.size-auto{max-width:1536px}}.modal-container .modal-content{position:relative;width:100%;border-radius:.375rem;border-width:1px;border-color:#0003;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));background-clip:padding-box;outline-width:0px;display:grid;max-height:100%;grid-template-rows:min-content 1fr min-content;overflow:hidden;--tw-shadow: 0 0 4px 0 rgba(0,0,0,.2), 0 3px 20px 0 rgba(0,0,0,.19);--tw-shadow-colored: 0 0 4px 0 var(--tw-shadow-color), 0 3px 20px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);animation:shown .3s ease-in-out forwards}.modal-container .modal-content .modal-header{border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:1rem}.modal-container .modal-content .modal-header .modal-close{position:absolute;top:0;right:0;margin:.5rem;cursor:pointer;padding:.5rem;opacity:.6}.modal-container .modal-content .modal-body{overflow:hidden;padding:1rem}.modal-container .modal-content .modal-footer{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;justify-content:flex-end;gap:.25rem;white-space:nowrap;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:.75rem}.modal-container .modal-content .modal-footer>*,.modal-container .modal-content .modal-footer ::ng-deep div[footer]>*{display:grid;grid-auto-columns:min-content;grid-auto-flow:column;gap:.25rem}@keyframes hidden{0%{display:flex}to{display:none}}@keyframes shown{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
2802
2801
|
}], ctorParameters: () => [], propDecorators: { closeButtonText: [{
|
|
2803
2802
|
type: Input
|
|
2804
2803
|
}], dialog: [{
|
|
@@ -2984,12 +2983,12 @@ class MultiEditorComponent extends ModalComponent {
|
|
|
2984
2983
|
}
|
|
2985
2984
|
});
|
|
2986
2985
|
}
|
|
2987
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2988
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2986
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2987
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: MultiEditorComponent, isStandalone: true, selector: "lib-multi-editor", inputs: { addButtonLabel: "addButtonLabel", formGroup: "formGroup", removeButtonLabel: "removeButtonLabel", showAddButton: "showAddButton", showDeleteButton: "showDeleteButton" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ModalComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-modal\n [closeButtonText]=\"closeButtonText | translate\"\n [dialog]=\"dialog\"\n [modalProcessing]=\"modalProcessing\"\n [position]=\"position\"\n [size]=\"size\"\n [title]=\"title\"\n>\n <div body class=\"body-content\">\n <div class=\"data-grid\">\n <lib-data-grid [disabled]=\"modalProcessing\" [lazyLoadRows]=\"true\"></lib-data-grid>\n </div>\n\n <div class=\"data\">\n <div class=\"buttons\">\n @if (showAddButton) {\n <button\n class=\"btn gray-500\"\n type=\"button\"\n [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n [disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n (click)=\"onNewClick()\"\n >\n {{ addButtonLabel }}\n </button>\n }\n @if (showDeleteButton && hasSelectedKey) {\n <button\n class=\"btn red-500\"\n type=\"button\"\n [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\n [disabled]=\"modalProcessing || gridLoading || formLoading\"\n (click)=\"onDeleteClick()\"\n >\n {{ removeButtonLabel }}\n </button>\n }\n </div>\n\n <lib-form-group>\n <ng-content></ng-content>\n </lib-form-group>\n </div>\n </div>\n\n <div footer>\n <button\n class=\"btn blue-500\"\n type=\"button\"\n [class.disabled]=\"gridLoading || formLoading\"\n [class.loading]=\"modalProcessing\"\n (click)=\"onSaveClick()\"\n >\n {{ 'Button-Modal-MultiEditor-Confirm' | translate }}\n </button>\n </div>\n</lib-modal>\n", styles: [".body-content{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;overflow:clip;overflow-clip-margin:4px}.data-grid{display:grid;-webkit-user-select:none;user-select:none;overflow:hidden}.data{display:grid;-webkit-user-select:none;user-select:none;overflow:clip;overflow-clip-margin:4px;min-height:24rem;grid-template-rows:min-content minmax(0,1fr);gap:.5rem}.data .buttons{display:grid;grid-auto-columns:auto;grid-auto-flow:column;gap:.5rem;border-bottom-color:#d1d5dbe6}\n"], dependencies: [{ kind: "component", type: DataGridComponent, selector: "lib-data-grid", inputs: ["disabled", "lazyLoadRows", "showButtons"] }, { kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closed"] }, { kind: "component", type: FormGroupComponent, selector: "lib-form-group", inputs: ["shouldExpand", "label"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
2989
2988
|
}
|
|
2990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2989
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiEditorComponent, decorators: [{
|
|
2991
2990
|
type: Component,
|
|
2992
|
-
args: [{ selector: 'lib-multi-editor', imports: [DataGridComponent, ModalComponent,
|
|
2991
|
+
args: [{ selector: 'lib-multi-editor', changeDetection: ChangeDetectionStrategy.Eager, imports: [DataGridComponent, ModalComponent, FormGroupComponent, TranslatePipe], template: "<lib-modal\n [closeButtonText]=\"closeButtonText | translate\"\n [dialog]=\"dialog\"\n [modalProcessing]=\"modalProcessing\"\n [position]=\"position\"\n [size]=\"size\"\n [title]=\"title\"\n>\n <div body class=\"body-content\">\n <div class=\"data-grid\">\n <lib-data-grid [disabled]=\"modalProcessing\" [lazyLoadRows]=\"true\"></lib-data-grid>\n </div>\n\n <div class=\"data\">\n <div class=\"buttons\">\n @if (showAddButton) {\n <button\n class=\"btn gray-500\"\n type=\"button\"\n [class.disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n [disabled]=\"modalProcessing || gridLoading || formLoading || formGroup.invalid\"\n (click)=\"onNewClick()\"\n >\n {{ addButtonLabel }}\n </button>\n }\n @if (showDeleteButton && hasSelectedKey) {\n <button\n class=\"btn red-500\"\n type=\"button\"\n [class.disabled]=\"modalProcessing || gridLoading || formLoading\"\n [disabled]=\"modalProcessing || gridLoading || formLoading\"\n (click)=\"onDeleteClick()\"\n >\n {{ removeButtonLabel }}\n </button>\n }\n </div>\n\n <lib-form-group>\n <ng-content></ng-content>\n </lib-form-group>\n </div>\n </div>\n\n <div footer>\n <button\n class=\"btn blue-500\"\n type=\"button\"\n [class.disabled]=\"gridLoading || formLoading\"\n [class.loading]=\"modalProcessing\"\n (click)=\"onSaveClick()\"\n >\n {{ 'Button-Modal-MultiEditor-Confirm' | translate }}\n </button>\n </div>\n</lib-modal>\n", styles: [".body-content{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;overflow:clip;overflow-clip-margin:4px}.data-grid{display:grid;-webkit-user-select:none;user-select:none;overflow:hidden}.data{display:grid;-webkit-user-select:none;user-select:none;overflow:clip;overflow-clip-margin:4px;min-height:24rem;grid-template-rows:min-content minmax(0,1fr);gap:.5rem}.data .buttons{display:grid;grid-auto-columns:auto;grid-auto-flow:column;gap:.5rem;border-bottom-color:#d1d5dbe6}\n"] }]
|
|
2993
2992
|
}], ctorParameters: () => [], propDecorators: { modal: [{
|
|
2994
2993
|
type: ViewChild,
|
|
2995
2994
|
args: [ModalComponent]
|
|
@@ -3043,14 +3042,14 @@ class MultiSelectResultGridComponent extends BaseComponent {
|
|
|
3043
3042
|
this.resultDataset.loadRows();
|
|
3044
3043
|
}
|
|
3045
3044
|
}
|
|
3046
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3047
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3045
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3046
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: MultiSelectResultGridComponent, isStandalone: true, selector: "lib-multi-select-result-grid", inputs: { isDisabled: "isDisabled", template: "template" }, host: { classAttribute: "flex-grow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"body\" (scroll)=\"onScrolled($event)\">\n @for (row of resultDataset.displayedRows; track row; let i = $index) {\n <div class=\"row\">\n <div class=\"cell\">\n <button\n class=\"remove\"\n type=\"button\"\n [class.disabled]=\"isDisabled\"\n [disabled]=\"isDisabled\"\n (click)=\"onItemRemoved(i)\"\n >\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"cell\">\n <div>\n <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\"> </ng-container>\n </div>\n </div>\n </div>\n }\n @if (isLoading) {\n <div class=\"loading\">\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ resultDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n</div>\n", styles: [":host-context{display:grid;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.body{overflow:overlay}.body .row{border-bottom-width:1px;border-color:#cbd5e180;margin-top:0;cursor:pointer;display:grid;grid-auto-flow:column;grid-template-columns:min-content minmax(0,1fr);gap:1rem;padding:.5rem 1rem}.body .row:nth-child(2n){background-color:#f8fafcb3}.body .row:hover{background-color:#bfdbfe33}.body .row.focused{z-index:1;border-color:#94a3b899}.body .row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body .row.selected:hover{background-color:#bfdbfe66}.body .row .cell{white-space:nowrap;display:flex;align-items:center}.body .row .cell a{padding-left:.5rem;padding-right:.5rem;font-size:1.125rem;line-height:1.75rem}.body .row .cell a:not(.disabled){cursor:pointer}.body .row .cell a.disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.body .row .cell .remove{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1));cursor:pointer;border-style:none;background-color:transparent;padding:0}.body .row .cell.disabled{pointer-events:none;cursor:default;opacity:.6}.body .row .cell>*{overflow:hidden;text-overflow:ellipsis}.body .row .cell div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body .loading{margin-bottom:.5rem;display:flex;height:2.5rem;align-items:center;border-bottom-width:1px;border-color:#cbd5e180;padding-left:1rem;padding-right:1rem}.body .loading svg{height:1.5rem;width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.body .loading span{padding-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
3048
3047
|
}
|
|
3049
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3048
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectResultGridComponent, decorators: [{
|
|
3050
3049
|
type: Component,
|
|
3051
3050
|
args: [{ selector: 'lib-multi-select-result-grid', host: {
|
|
3052
3051
|
class: 'flex-grow',
|
|
3053
|
-
}, imports: [CommonModule,
|
|
3052
|
+
}, changeDetection: ChangeDetectionStrategy.Eager, imports: [CommonModule, TranslatePipe], template: "<div class=\"body\" (scroll)=\"onScrolled($event)\">\n @for (row of resultDataset.displayedRows; track row; let i = $index) {\n <div class=\"row\">\n <div class=\"cell\">\n <button\n class=\"remove\"\n type=\"button\"\n [class.disabled]=\"isDisabled\"\n [disabled]=\"isDisabled\"\n (click)=\"onItemRemoved(i)\"\n >\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"cell\">\n <div>\n <ng-container *ngTemplateOutlet=\"template; context: { rowData: row }\"> </ng-container>\n </div>\n </div>\n </div>\n }\n @if (isLoading) {\n <div class=\"loading\">\n <svg [ngClass]=\"''\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>\n {{ resultDataset.configs.loadingDisplayText ?? '' | translate }}\n </span>\n </div>\n }\n</div>\n", styles: [":host-context{display:grid;-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;overflow:hidden}:host-context:not(.no-borders){border-radius:.5rem;border-width:1px;border-color:#d1d5dbe6;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.body{overflow:overlay}.body .row{border-bottom-width:1px;border-color:#cbd5e180;margin-top:0;cursor:pointer;display:grid;grid-auto-flow:column;grid-template-columns:min-content minmax(0,1fr);gap:1rem;padding:.5rem 1rem}.body .row:nth-child(2n){background-color:#f8fafcb3}.body .row:hover{background-color:#bfdbfe33}.body .row.focused{z-index:1;border-color:#94a3b899}.body .row.selected{position:relative;z-index:10;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1));background-color:#bfdbfe4d}.body .row.selected:hover{background-color:#bfdbfe66}.body .row .cell{white-space:nowrap;display:flex;align-items:center}.body .row .cell a{padding-left:.5rem;padding-right:.5rem;font-size:1.125rem;line-height:1.75rem}.body .row .cell a:not(.disabled){cursor:pointer}.body .row .cell a.disabled{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.body .row .cell .remove{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1));cursor:pointer;border-style:none;background-color:transparent;padding:0}.body .row .cell.disabled{pointer-events:none;cursor:default;opacity:.6}.body .row .cell>*{overflow:hidden;text-overflow:ellipsis}.body .row .cell div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body .loading{margin-bottom:.5rem;display:flex;height:2.5rem;align-items:center;border-bottom-width:1px;border-color:#cbd5e180;padding-left:1rem;padding-right:1rem}.body .loading svg{height:1.5rem;width:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.body .loading svg{animation:spin 1s linear infinite;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.body .loading span{padding-left:.5rem}\n"] }]
|
|
3054
3053
|
}], ctorParameters: () => [], propDecorators: { isDisabled: [{
|
|
3055
3054
|
type: Input
|
|
3056
3055
|
}], template: [{
|
|
@@ -3175,12 +3174,12 @@ class MultiSelectComponent extends ModalComponent {
|
|
|
3175
3174
|
const keysToSelect = (this.dataGridDataset.loadedKeys ?? []).filter((key) => idsFromResult.indexOf(this.dataGridDataset.getRowID(key)) >= 0);
|
|
3176
3175
|
this.dataGridDataset.selectRows(keysToSelect);
|
|
3177
3176
|
}
|
|
3178
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3179
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3177
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3178
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: MultiSelectComponent, isStandalone: true, selector: "lib-multi-select", inputs: { itemTemplate: "itemTemplate" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ModalComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-modal\n [closeButtonText]=\"closeButtonText | translate\"\n [dialog]=\"dialog\"\n [modalProcessing]=\"modalProcessing\"\n [position]=\"position\"\n [size]=\"size\"\n [title]=\"title\"\n>\n <div body class=\"body-content\">\n <div class=\"search-grid\">\n <div class=\"search\">\n <input\n class=\"form-input\"\n placeholder=\"Search...\"\n type=\"text\"\n [(ngModel)]=\"searchCriteria\"\n [disabled]=\"modalProcessing || isSearchGridLoading\"\n (keydown.enter)=\"onSearch()\"\n />\n </div>\n\n <lib-data-grid [disabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\" [lazyLoadRows]=\"true\">\n </lib-data-grid>\n </div>\n\n <lib-multi-select-result-grid\n [isDisabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\n [template]=\"itemTemplate\"\n >\n </lib-multi-select-result-grid>\n </div>\n\n <div footer>\n <button class=\"btn blue-500\" type=\"button\" [class.loading]=\"modalProcessing\" (click)=\"onSave()\">\n {{ 'Button-Modal-MultiSelect-Confirm' | translate }}\n </button>\n </div>\n</lib-modal>\n", styles: [".body-content{display:grid;height:100%;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;grid-template-rows:min-content minmax(0,1fr);grid-auto-flow:row!important;overflow:clip;overflow-clip-margin:4px}.search-grid{display:grid;grid-template-rows:subgrid}.search-grid,lib-multi-select-result-grid{grid-row:1 / -1}lib-multi-select-result-grid{min-height:24rem}\n"], dependencies: [{ kind: "component", type: DataGridComponent, selector: "lib-data-grid", inputs: ["disabled", "lazyLoadRows", "showButtons"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closed"] }, { kind: "component", type: MultiSelectResultGridComponent, selector: "lib-multi-select-result-grid", inputs: ["isDisabled", "template"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
3180
3179
|
}
|
|
3181
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
3182
3181
|
type: Component,
|
|
3183
|
-
args: [{ selector: 'lib-multi-select', imports: [DataGridComponent, FormsModule, ModalComponent, MultiSelectResultGridComponent, TranslatePipe], template: "<lib-modal\n [closeButtonText]=\"closeButtonText | translate\"\n [dialog]=\"dialog\"\n [modalProcessing]=\"modalProcessing\"\n [position]=\"position\"\n [size]=\"size\"\n [title]=\"title\"\n>\n <div body class=\"body-content\">\n <div class=\"search-grid\">\n <div class=\"search\">\n <input\n class=\"form-input\"\n placeholder=\"Search...\"\n type=\"text\"\n [(ngModel)]=\"searchCriteria\"\n [disabled]=\"modalProcessing || isSearchGridLoading\"\n (keydown.enter)=\"onSearch()\"\n />\n </div>\n\n <lib-data-grid [disabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\" [lazyLoadRows]=\"true\">\n </lib-data-grid>\n </div>\n\n <lib-multi-select-result-grid\n [isDisabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\n [template]=\"itemTemplate\"\n >\n </lib-multi-select-result-grid>\n </div>\n\n <div footer>\n <button class=\"btn blue-500\" type=\"button\" [class.loading]=\"modalProcessing\" (click)=\"onSave()\">\n {{ 'Button-Modal-MultiSelect-Confirm' | translate }}\n </button>\n </div>\n</lib-modal>\n", styles: [".body-content{display:grid;height:100%;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;grid-template-rows:min-content minmax(0,1fr);grid-auto-flow:row!important;overflow:clip;overflow-clip-margin:4px}.search-grid{display:grid;grid-template-rows:subgrid}.search-grid,lib-multi-select-result-grid{grid-row:1 / -1}lib-multi-select-result-grid{min-height:24rem}\n"] }]
|
|
3182
|
+
args: [{ selector: 'lib-multi-select', changeDetection: ChangeDetectionStrategy.Eager, imports: [DataGridComponent, FormsModule, ModalComponent, MultiSelectResultGridComponent, TranslatePipe], template: "<lib-modal\n [closeButtonText]=\"closeButtonText | translate\"\n [dialog]=\"dialog\"\n [modalProcessing]=\"modalProcessing\"\n [position]=\"position\"\n [size]=\"size\"\n [title]=\"title\"\n>\n <div body class=\"body-content\">\n <div class=\"search-grid\">\n <div class=\"search\">\n <input\n class=\"form-input\"\n placeholder=\"Search...\"\n type=\"text\"\n [(ngModel)]=\"searchCriteria\"\n [disabled]=\"modalProcessing || isSearchGridLoading\"\n (keydown.enter)=\"onSearch()\"\n />\n </div>\n\n <lib-data-grid [disabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\" [lazyLoadRows]=\"true\">\n </lib-data-grid>\n </div>\n\n <lib-multi-select-result-grid\n [isDisabled]=\"modalProcessing || isSearchGridLoading || isResultGridLoading\"\n [template]=\"itemTemplate\"\n >\n </lib-multi-select-result-grid>\n </div>\n\n <div footer>\n <button class=\"btn blue-500\" type=\"button\" [class.loading]=\"modalProcessing\" (click)=\"onSave()\">\n {{ 'Button-Modal-MultiSelect-Confirm' | translate }}\n </button>\n </div>\n</lib-modal>\n", styles: [".body-content{display:grid;height:100%;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1rem;grid-template-rows:min-content minmax(0,1fr);grid-auto-flow:row!important;overflow:clip;overflow-clip-margin:4px}.search-grid{display:grid;grid-template-rows:subgrid}.search-grid,lib-multi-select-result-grid{grid-row:1 / -1}lib-multi-select-result-grid{min-height:24rem}\n"] }]
|
|
3184
3183
|
}], ctorParameters: () => [], propDecorators: { modal: [{
|
|
3185
3184
|
type: ViewChild,
|
|
3186
3185
|
args: [ModalComponent]
|
|
@@ -3301,18 +3300,18 @@ class SidebarItemComponent extends BaseComponent {
|
|
|
3301
3300
|
updateSubMenuHeight() {
|
|
3302
3301
|
this._childHeight = this.getChildHeight(this.menu);
|
|
3303
3302
|
}
|
|
3304
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3303
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3304
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { isLast: "isLast", level: "level", menu: "menu" }, host: { properties: { "class.active": "isActive", "class.expanded": "!isCollapsed", "class.first-level": "level === 0", "class.last-child": "isLast", "class.selected": "isSelected" } }, viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<li>\n <div\n #menuContainer\n [class.external]=\"opensInNewBrowserTab\"\n [class.failed]=\"hasFailed\"\n [class.loading]=\"isLoading\"\n [class.parent]=\"isParent\"\n [class.selected]=\"isSelected\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-current]=\"isSelected\"\n (click)=\"onSelectItem()\"\n (keydown.enter)=\"onSelectItem()\"\n (keydown.space)=\"onSelectItem(); $event.preventDefault()\"\n >\n <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n @if (hasIcon && level === 0) {\n <i class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n }\n <span>{{ menu.label | translate }}</span>\n </a>\n\n @if (isParent) {\n <div class=\"loading\">\n <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n </div>\n }\n </div>\n\n @if (isParent) {\n <ul\n [class.open]=\"isSelected\"\n [ngStyle]=\"{\n 'height.px': childHeight,\n 'max-height.px': childHeight,\n }\"\n >\n @for (child of menu.children; track trackByFn($index, child); let last = $last) {\n <lib-sidebar-item [menu]=\"child\" [level]=\"level + 1\" [isLast]=\"last\"> </lib-sidebar-item>\n }\n </ul>\n }\n</li>\n", styles: [":host{position:relative;display:block}@media(max-width:767px){:host:not(.active) li>ul{height:0px!important}}@media(min-width:768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
3306
3305
|
}
|
|
3307
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3306
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarItemComponent, decorators: [{
|
|
3308
3307
|
type: Component,
|
|
3309
|
-
args: [{ selector: 'lib-sidebar-item', imports: [
|
|
3308
|
+
args: [{ selector: 'lib-sidebar-item', imports: [NgStyle, TranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, host: {
|
|
3310
3309
|
'[class.active]': 'isActive',
|
|
3311
3310
|
'[class.expanded]': '!isCollapsed',
|
|
3312
3311
|
'[class.first-level]': 'level === 0',
|
|
3313
3312
|
'[class.last-child]': 'isLast',
|
|
3314
3313
|
'[class.selected]': 'isSelected',
|
|
3315
|
-
}, template: "<li>\n <div\n #menuContainer\n [class.external]=\"opensInNewBrowserTab\"\n [class.failed]=\"hasFailed\"\n [class.loading]=\"isLoading\"\n [class.parent]=\"isParent\"\n [class.selected]=\"isSelected\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-current]=\"isSelected\"\n (click)=\"onSelectItem()\"\n (keydown.enter)=\"onSelectItem()\"\n (keydown.space)=\"onSelectItem(); $event.preventDefault()\"\n >\n <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n
|
|
3314
|
+
}, template: "<li>\n <div\n #menuContainer\n [class.external]=\"opensInNewBrowserTab\"\n [class.failed]=\"hasFailed\"\n [class.loading]=\"isLoading\"\n [class.parent]=\"isParent\"\n [class.selected]=\"isSelected\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-current]=\"isSelected\"\n (click)=\"onSelectItem()\"\n (keydown.enter)=\"onSelectItem()\"\n (keydown.space)=\"onSelectItem(); $event.preventDefault()\"\n >\n <a [attr.title]=\"opensInNewBrowserTab ? externalLinkText : null\">\n @if (hasIcon && level === 0) {\n <i class=\"fa-solid fa-fw {{ menu.icon }}\"></i>\n }\n <span>{{ menu.label | translate }}</span>\n </a>\n\n @if (isParent) {\n <div class=\"loading\">\n <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n </div>\n }\n </div>\n\n @if (isParent) {\n <ul\n [class.open]=\"isSelected\"\n [ngStyle]=\"{\n 'height.px': childHeight,\n 'max-height.px': childHeight,\n }\"\n >\n @for (child of menu.children; track trackByFn($index, child); let last = $last) {\n <lib-sidebar-item [menu]=\"child\" [level]=\"level + 1\" [isLast]=\"last\"> </lib-sidebar-item>\n }\n </ul>\n }\n</li>\n", styles: [":host{position:relative;display:block}@media(max-width:767px){:host:not(.active) li>ul{height:0px!important}}@media(min-width:768px){:host:not(.expanded):not(.active) li>ul{height:0px!important}:host.expanded li>div{margin-inline:.5rem}:host.expanded li>div.external:after{opacity:1}:host.expanded li>div.external a{padding-right:2rem}:host.expanded li>div.parent:not(.loading):after{opacity:1}:host.expanded li>div.parent a{padding-right:2rem}:host.expanded li>div.parent.loading .loading{opacity:1!important}:host.expanded li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded li>div a span{opacity:1}}:host.active li>div{margin-inline:.5rem}:host.active li>div.external:after{opacity:1}:host.active li>div.external a{padding-right:2rem}:host.active li>div.parent:not(.loading):after{opacity:1}:host.active li>div.parent a{padding-right:2rem}:host.active li>div.parent.loading .loading{opacity:1!important}:host.active li>div a i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active li>div a span{opacity:1}:host.expanded li .selected:not(.loading).parent:after,:host.active li .selected:not(.loading).parent:after{--tw-rotate: -90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}li{position:relative;height:100%}li>div{position:relative;overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height);border-radius:var(--sidebar-item-radius);transition-property:margin,background-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}li>div:hover{background-color:var(--sidebar-item-hover-bg)}li>div.selected{background-color:var(--sidebar-item-selected-bg);color:var(--sidebar-item-selected-text)}li>div.external:after{position:absolute;top:0;right:.75rem;width:10px;font-size:.75rem;line-height:1rem;font-weight:800;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;--tw-content: \"\\f08e\";content:var(--tw-content);font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div.parent:after{position:absolute;top:0;right:.75rem;width:10px;font-weight:800;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;font-family:\"Font Awesome 6 Free\";transition-duration:var(--sidebar-animation-duration);will-change:opacity,transform}li>div.parent:not(.failed):after{--tw-content: \"\\f104\";content:var(--tw-content)}li>div.parent.failed:after{right:1rem;--tw-content: \"\\f071\";content:var(--tw-content)}li>div a{display:block;height:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}li>div a i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}li>div a span{text-overflow:ellipsis;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading{position:absolute;top:0;right:.55rem;height:100%;width:1rem;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:opacity}li>div .loading svg{height:100%;width:100%}li>ul{overflow:hidden;transition-property:height,max-height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,max-height}li>ul a{padding-left:1.25rem}:host(:not(.first-level)) li>div>a{position:relative;padding-left:1.5rem}:host(:not(.first-level)) li>div>a:before{content:\"\";position:absolute;left:.6rem;top:0;bottom:0;width:0;border-left:1px solid var(--sidebar-tree-line)}:host(:not(.first-level)) li>div>a:after{content:\"\";position:absolute;left:.6rem;top:calc(50% - .55rem);width:.6rem;height:.55rem;border-left:1px solid var(--sidebar-tree-line);border-bottom:1px solid var(--sidebar-tree-line);border-bottom-left-radius:.4rem}:host(.last-child:not(.first-level)) li>div>a:before{bottom:calc(50% + .4rem)}\n"] }]
|
|
3316
3315
|
}], ctorParameters: () => [], propDecorators: { menuContainer: [{
|
|
3317
3316
|
type: ViewChild,
|
|
3318
3317
|
args: ['menuContainer']
|
|
@@ -3342,13 +3341,8 @@ class SidebarComponent extends BaseComponent {
|
|
|
3342
3341
|
}
|
|
3343
3342
|
onDocumentKeyDown(event) {
|
|
3344
3343
|
event = event || window.event;
|
|
3345
|
-
|
|
3346
|
-
|
|
3347
|
-
isEscapeKey = event.key === 'Escape' || event.key === 'Esc';
|
|
3348
|
-
}
|
|
3349
|
-
else {
|
|
3350
|
-
isEscapeKey = event.keyCode === 27;
|
|
3351
|
-
}
|
|
3344
|
+
// keyCode is the fallback for engines predating KeyboardEvent.key.
|
|
3345
|
+
const isEscapeKey = 'key' in event ? event.key === 'Escape' || event.key === 'Esc' : event.keyCode === 27;
|
|
3352
3346
|
if (isEscapeKey) {
|
|
3353
3347
|
this.deactivate();
|
|
3354
3348
|
}
|
|
@@ -3490,15 +3484,15 @@ class SidebarComponent extends BaseComponent {
|
|
|
3490
3484
|
this.sidebarService.shouldActivate =
|
|
3491
3485
|
(window.innerWidth <= 767 && !this.sidebarService.isCollapsed) || this.sidebarService.isCollapsed;
|
|
3492
3486
|
}
|
|
3493
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3494
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3487
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3488
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", host: { listeners: { "body:mousedown": "onBodyMouseDown($event)", "body:mouseup": "onBodyMouseUp($event)", "document:keydown.escape": "onDocumentKeyDown($event)", "window:resize": "onResize($event)" }, properties: { "class.active": "isActive", "class.expanded": "!isCollapsed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sidebar-toolbar\">\n <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\n </button>\n</div>\n\n<nav>\n @if (!isLoading) {\n <ul>\n @for (region of regions; track trackByRegion($index, region)) {\n @if (region.name) {\n <li class=\"sidebar-region-header\">\n <span>{{ region.name | translate }}</span>\n </li>\n }\n @for (menu of region.items; track trackByFn($index, menu)) {\n <lib-sidebar-item [menu]=\"menu\"> </lib-sidebar-item>\n }\n }\n @if (hasFailed) {\n <div class=\"error\">\n <div>\n <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n <span>{{ configErrorText }}</span>\n </div>\n </div>\n }\n </ul>\n } @else {\n <div class=\"loading\">\n <div>\n <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>{{ configLoadingText }}</span>\n </div>\n </div>\n }\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media(min-width:768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width:480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["isLast", "level", "menu"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
3495
3489
|
}
|
|
3496
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
3497
3491
|
type: Component,
|
|
3498
|
-
args: [{ selector: 'lib-sidebar', imports: [
|
|
3492
|
+
args: [{ selector: 'lib-sidebar', imports: [SidebarItemComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, host: {
|
|
3499
3493
|
'[class.active]': 'isActive',
|
|
3500
3494
|
'[class.expanded]': '!isCollapsed',
|
|
3501
|
-
}, template: "<div class=\"sidebar-toolbar\">\n <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\n </button>\n</div>\n\n<nav>\n
|
|
3495
|
+
}, template: "<div class=\"sidebar-toolbar\">\n <button type=\"button\" class=\"sidebar-toggle\" (click)=\"collapse()\" aria-label=\"Toggle navigation\">\n <i class=\"fa-solid fa-angle-left\" [class.is-collapsed]=\"isCollapsed\"></i>\n </button>\n</div>\n\n<nav>\n @if (!isLoading) {\n <ul>\n @for (region of regions; track trackByRegion($index, region)) {\n @if (region.name) {\n <li class=\"sidebar-region-header\">\n <span>{{ region.name | translate }}</span>\n </li>\n }\n @for (menu of region.items; track trackByFn($index, menu)) {\n <lib-sidebar-item [menu]=\"menu\"> </lib-sidebar-item>\n }\n }\n @if (hasFailed) {\n <div class=\"error\">\n <div>\n <i class=\"fa-solid fa-fw fa-triangle-exclamation\"></i>\n <span>{{ configErrorText }}</span>\n </div>\n </div>\n }\n </ul>\n } @else {\n <div class=\"loading\">\n <div>\n <svg class=\"animate-spin text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n <span>{{ configLoadingText }}</span>\n </div>\n </div>\n }\n</nav>\n\n<div class=\"sidebar-footer\"><ng-content></ng-content></div>\n", styles: [":host{position:relative;z-index:20;display:grid;height:100%;-webkit-user-select:none;user-select:none;background-color:var(--sidebar-bg);border-radius:var(--sidebar-radius, 1.25rem);backdrop-filter:blur(var(--sidebar-blur, 16px));-webkit-backdrop-filter:blur(var(--sidebar-blur, 16px));box-shadow:var(--sidebar-shadow, 0 10px 40px -12px rgba(0, 0, 0, .45));transition-property:margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:calc(var(--sidebar-collapsed-width) * -1);transition-duration:var(--sidebar-animation-duration);width:var(--sidebar-collapsed-width);will-change:margin-left,width;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:\"toolbar\" \"nav\" \"footer\"}@media(min-width:768px){:host{margin-left:0}:host.expanded{width:var(--sidebar-expanded-width)}:host.expanded .loading i,:host.expanded .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.expanded .loading svg,:host.expanded .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.expanded .loading span,:host.expanded .error span{opacity:1}}:host.active{width:var(--sidebar-expanded-width)}:host.active .loading i,:host.active .error i{margin-left:0;font-size:1.125rem;line-height:1.75rem}:host.active .loading svg,:host.active .error svg{margin-top:-4px;margin-left:1px;height:1.25rem;width:1.25rem}:host.active .loading span,:host.active .error span{opacity:1}:host.expanded,:host.active{margin-left:0}.sidebar-toolbar{display:flex;justify-content:flex-end;padding-top:.5rem;padding-bottom:.5rem;grid-area:toolbar}.sidebar-toolbar .sidebar-toggle{z-index:20;display:flex;height:1.75rem;width:1.75rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 67 114 / var(--tw-text-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: rgb(0 0 0 / .05);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.sidebar-toolbar .sidebar-toggle:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(0 47 80 / var(--tw-text-opacity, 1))}.sidebar-toolbar .sidebar-toggle{transform:translate(40%)}.sidebar-toolbar .sidebar-toggle i{font-size:.875rem;line-height:1.25rem;rotate:0deg;transition:rotate var(--sidebar-animation-duration) ease-in-out}.sidebar-toolbar .sidebar-toggle i.is-collapsed{rotate:-180deg}.sidebar-footer{overflow:hidden;white-space:nowrap;padding:.5rem 1rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--sidebar-text-muted);opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);grid-area:footer}.sidebar-footer:empty{display:none}:host(.expanded) .sidebar-footer,:host(.active) .sidebar-footer{opacity:1}nav{overflow-y:auto;overflow-x:hidden;grid-area:nav;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}nav::-webkit-scrollbar{height:0px;width:7px}nav::-webkit-scrollbar-track{background-color:transparent}nav::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px;transition:background .2s ease}nav::-webkit-scrollbar-thumb:hover{background-color:#0000008c}nav:hover::-webkit-scrollbar-thumb{background-color:#00000073}@media screen and (max-width:480px){nav{scrollbar-width:thin}nav::-webkit-scrollbar{width:5px}}ul,.loading{position:relative;background-color:var(--sidebar-nav-bg)}ul lib-sidebar-item,.loading,.error{font-weight:500;color:var(--sidebar-text)}.sidebar-region-header{position:relative;display:flex;align-items:center;overflow:hidden;white-space:nowrap;padding-left:1rem;padding-right:1rem;height:2rem;color:var(--sidebar-text-muted);transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header span{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}.sidebar-region-header:after{content:\"\";position:absolute;left:50%;top:50%;opacity:0;width:1.75rem;height:1px;transform:translate(-50%,-50%);background:var(--sidebar-text-muted);transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration)}:host(:not(.expanded):not(.active)) .sidebar-region-header{height:1.25rem}:host(:not(.expanded):not(.active)) .sidebar-region-header span{opacity:0}:host(:not(.expanded):not(.active)) .sidebar-region-header:after{opacity:1}.loading,.error{overflow:hidden;height:var(--sidebar-item-height);line-height:var(--sidebar-item-height)}.loading>div,.error>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.75rem;padding-right:.75rem;text-align:left;width:var(--sidebar-expanded-width)}.loading i,.error i{margin-right:.5rem;font-size:1.25rem;line-height:1.75rem;transition-property:font-size,line-height,margin-left;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-left:var(--sidebar-icon-collapsed-margin);transition-duration:var(--sidebar-animation-duration);will-change:font-size,line-height,margin-left}.loading svg,.error svg{margin-top:-4px;margin-left:.5rem;display:inline;height:1.5rem;width:1.5rem;transition-property:height,margin-left,width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--sidebar-animation-duration);will-change:height,margin-left,width}.loading svg+span,.error svg+span{margin-left:.6rem}.loading span,.error span{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:0;transition-duration:var(--sidebar-animation-duration)}\n"] }]
|
|
3502
3496
|
}], ctorParameters: () => [], propDecorators: { onBodyMouseDown: [{
|
|
3503
3497
|
type: HostListener,
|
|
3504
3498
|
args: ['body:mousedown', ['$event']]
|
|
@@ -3544,13 +3538,8 @@ class RibbonButtonComponent {
|
|
|
3544
3538
|
}
|
|
3545
3539
|
documentKeyDown(event) {
|
|
3546
3540
|
event = event || window.event;
|
|
3547
|
-
|
|
3548
|
-
|
|
3549
|
-
isEscape = event.key === 'Escape' || event.key === 'Esc';
|
|
3550
|
-
}
|
|
3551
|
-
else {
|
|
3552
|
-
isEscape = event.keyCode === 27;
|
|
3553
|
-
}
|
|
3541
|
+
// keyCode is the fallback for engines predating KeyboardEvent.key.
|
|
3542
|
+
const isEscape = 'key' in event ? event.key === 'Escape' || event.key === 'Esc' : event.keyCode === 27;
|
|
3554
3543
|
if (this.showDropdown && isEscape) {
|
|
3555
3544
|
this.showDropdown = false;
|
|
3556
3545
|
}
|
|
@@ -3626,15 +3615,15 @@ class RibbonButtonComponent {
|
|
|
3626
3615
|
option.isAccessAllowed === true ||
|
|
3627
3616
|
(option.isAccessAllowed == undefined && option.allowedActions?.length > 0)));
|
|
3628
3617
|
}
|
|
3629
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3630
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3618
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3619
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: RibbonButtonComponent, isStandalone: true, selector: "lib-ribbon-button", inputs: { color: "color", defaultOption: "defaultOption", disabled: "disabled", icon: "icon", iconSize: "iconSize", label: "label", loading: "loading", options: "options", tooltip: "tooltip" }, outputs: { action: "action" }, host: { listeners: { "body:mousedown": "bodyMouseDown($event)", "body:mouseup": "bodyMouseUp($event)", "document:keydown.escape": "documentKeyDown($event)" }, properties: { "class.dropdown": "options.length > 0", "class.show": "showDropdown" } }, ngImport: i0, template: "<div class=\"button-container\" [attr.title]=\"tooltip || null\">\n <a\n class=\"button\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onButtonClicked()\"\n (keydown.enter)=\"onButtonClicked()\"\n (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n >\n <span class=\"icon\" [class.loading]=\"loading\">\n <i class=\"fas fa-fw\" [ngClass]=\"[buttonIcon, color]\"></i>\n\n <svg [ngClass]=\"[color]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n </span>\n\n <span class=\"label\" [class.text-white]=\"status !== null\">\n {{ label | translate }}\n </span>\n </a>\n\n @if (options.length > 0) {\n <a\n class=\"button-dropdown\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"showDropdown\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onShowHideDropdown()\"\n (keydown.enter)=\"onShowHideDropdown()\"\n (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down\" [ngClass]=\"[color]\"></i>\n </a>\n }\n</div>\n\n@if (options.length > 0) {\n <ul class=\"options-dropdown\" role=\"menu\">\n @for (option of options; track option; let i = $index) {\n <li\n role=\"menuitem\"\n [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.default-option]=\"i === defaultOption\"\n [class.disabled]=\"isOptionDisabled(option)\"\n [class.hidden]=\"!isOptionVisible(option)\"\n (click)=\"onOptionClicked(option)\"\n (keydown.enter)=\"onOptionClicked(option)\"\n (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n >\n @if (!!option.icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"[option.icon, color]\"></i>\n }\n {{ option.label | translate }}\n </li>\n }\n </ul>\n}\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media(min-width:768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media(min-width:768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media(min-width:768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
3631
3620
|
}
|
|
3632
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonButtonComponent, decorators: [{
|
|
3633
3622
|
type: Component,
|
|
3634
3623
|
args: [{ selector: 'lib-ribbon-button', host: {
|
|
3635
3624
|
'[class.dropdown]': 'options.length > 0',
|
|
3636
3625
|
'[class.show]': 'showDropdown',
|
|
3637
|
-
}, imports: [NgClass,
|
|
3626
|
+
}, changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, TranslatePipe], template: "<div class=\"button-container\" [attr.title]=\"tooltip || null\">\n <a\n class=\"button\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onButtonClicked()\"\n (keydown.enter)=\"onButtonClicked()\"\n (keydown.space)=\"onButtonClicked(); $event.preventDefault()\"\n >\n <span class=\"icon\" [class.loading]=\"loading\">\n <i class=\"fas fa-fw\" [ngClass]=\"[buttonIcon, color]\"></i>\n\n <svg [ngClass]=\"[color]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path\n class=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n ></path>\n </svg>\n </span>\n\n <span class=\"label\" [class.text-white]=\"status !== null\">\n {{ label | translate }}\n </span>\n </a>\n\n @if (options.length > 0) {\n <a\n class=\"button-dropdown\"\n role=\"button\"\n [attr.tabindex]=\"isButtonDisabled ? -1 : 0\"\n [attr.aria-disabled]=\"isButtonDisabled\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"showDropdown\"\n [class.disabled]=\"isButtonDisabled\"\n [class.success]=\"status === 'success'\"\n [class.warning]=\"status === 'warning'\"\n [class.failure]=\"status === 'failure'\"\n [class.small]=\"iconSize === 'small'\"\n (click)=\"onShowHideDropdown()\"\n (keydown.enter)=\"onShowHideDropdown()\"\n (keydown.space)=\"onShowHideDropdown(); $event.preventDefault()\"\n >\n <i class=\"fas fa-chevron-down\" [ngClass]=\"[color]\"></i>\n </a>\n }\n</div>\n\n@if (options.length > 0) {\n <ul class=\"options-dropdown\" role=\"menu\">\n @for (option of options; track option; let i = $index) {\n <li\n role=\"menuitem\"\n [attr.tabindex]=\"isOptionDisabled(option) || !isOptionVisible(option) ? -1 : 0\"\n [attr.aria-disabled]=\"isOptionDisabled(option)\"\n [class.default-option]=\"i === defaultOption\"\n [class.disabled]=\"isOptionDisabled(option)\"\n [class.hidden]=\"!isOptionVisible(option)\"\n (click)=\"onOptionClicked(option)\"\n (keydown.enter)=\"onOptionClicked(option)\"\n (keydown.space)=\"onOptionClicked(option); $event.preventDefault()\"\n >\n @if (!!option.icon) {\n <i class=\"fas fa-fw\" [ngClass]=\"[option.icon, color]\"></i>\n }\n {{ option.label | translate }}\n </li>\n }\n </ul>\n}\n", styles: [":host-context.dropdown .button{border-top-right-radius:0;border-bottom-right-radius:0}.button-container{display:flex}.button{border-radius:.5rem;padding-left:.75rem;padding-right:.75rem}.button.success .icon i,.button.success .label,.button.warning .icon i,.button.warning .label,.button.failure .icon i,.button.failure .label{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button.small{padding-left:.5rem;padding-right:.5rem}.button.small .icon i{height:1.75rem;font-size:1.5rem;line-height:2rem}@media(min-width:768px){.button.small .icon i{font-size:1.25rem;line-height:1.75rem}}.button.small .icon svg{height:1.5rem}.button.small .label{font-size:.875rem;line-height:1.25rem}.button .icon{position:relative;display:flex;height:2rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:2.25rem;line-height:2.5rem}@media(min-width:768px){.button .icon{font-size:1.875rem;line-height:2.25rem}}.button .icon i{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon svg{position:absolute;height:2rem;width:2rem}@keyframes spin{to{transform:rotate(360deg)}}.button .icon svg{animation:spin 1s linear infinite;opacity:0;transition-property:opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button .icon.loading i{opacity:0}.button .icon.loading svg{opacity:1}.button .label{margin-top:.5rem;text-align:center;--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button-dropdown{justify-content:center;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;padding-left:.25rem;padding-right:.25rem}.button-dropdown.success i,.button-dropdown.warning i,.button-dropdown.failure i{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.button-dropdown.small{font-size:.875rem;line-height:1.25rem}@media(min-width:768px){.button-dropdown.small{font-size:1rem;line-height:1.5rem}}.button,.button-dropdown{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button:hover,.button-dropdown:hover{background-color:#d1d5dbcc}.button:focus,.button-dropdown:focus{background-color:#d1d5dbcc}.button:active,.button-dropdown:active{background-color:#9ca3af99}.button:disabled,.button.disabled,.button-dropdown:disabled,.button-dropdown.disabled{pointer-events:none;opacity:.6}.button.success,.button-dropdown.success{background-color:#16a34abf}.button.warning,.button-dropdown.warning{background-color:#ca8a04bf}.button.failure,.button-dropdown.failure{background-color:#dc2626bf}.button.small,.button-dropdown.small{padding-top:.25rem;padding-bottom:.25rem}ul{z-index:1;min-width:fit-content;-webkit-user-select:none;user-select:none}ul li{cursor:pointer;white-space:nowrap;padding:.5rem 1rem}ul li.default-option{display:none}ul li.disabled{pointer-events:none;opacity:.6}ul li:hover{--tw-bg-opacity: 1;background-color:rgb(230 244 255 / var(--tw-bg-opacity, 1))}ul li i{margin-right:.25rem}\n"] }]
|
|
3638
3627
|
}], propDecorators: { color: [{
|
|
3639
3628
|
type: Input
|
|
3640
3629
|
}], defaultOption: [{
|
|
@@ -3667,10 +3656,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
3667
3656
|
}] } });
|
|
3668
3657
|
|
|
3669
3658
|
class RibbonComponent {
|
|
3670
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3671
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3659
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3660
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: RibbonComponent, isStandalone: true, selector: "lib-ribbon", ngImport: i0, template: "<div>\n <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>\n", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3672
3661
|
}
|
|
3673
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3662
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonComponent, decorators: [{
|
|
3674
3663
|
type: Component,
|
|
3675
3664
|
args: [{ selector: 'lib-ribbon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[right]\"></ng-content>\n", styles: ["@charset \"UTF-8\";::ng-deep lib-ribbon:not(:has(lib-ribbon-group:not(.hidden))):not(:has(>div>*:not(lib-ribbon-group))){display:none}:host-context{position:relative;display:flex;flex-direction:row;border-radius:.5rem;border-width:1px;padding:.25rem;border-color:#d1d5dbe6;background-color:#e5e7ebcc;justify-content:space-between}:host-context div{display:inline-flex;gap:.5rem}:host-context ::ng-deep *[right]{display:flex}:host-context ::ng-deep *[right] lib-ribbon-group{margin-right:.5rem;margin-left:0}:host-context ::ng-deep *[right] lib-ribbon-group:first-child{margin-right:0;padding-right:0;padding-left:.5rem}:host-context ::ng-deep *[right] lib-ribbon-group:after{left:-.25rem}:host-context ::ng-deep *[right] lib-ribbon-group lib-ribbon-button .options-dropdown{right:0}\n"] }]
|
|
3676
3665
|
}] });
|
|
@@ -3688,12 +3677,12 @@ class RibbonGroupComponent {
|
|
|
3688
3677
|
get hasChildren() {
|
|
3689
3678
|
return this.children?.some((x) => x.visible) ?? false;
|
|
3690
3679
|
}
|
|
3691
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3692
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3680
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3681
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: RibbonGroupComponent, isStandalone: true, selector: "lib-ribbon-group", inputs: { label: "label" }, host: { properties: { "class.hidden": "!hasChildren" } }, queries: [{ propertyName: "children", predicate: RibbonGroupChild, descendants: true }], ngImport: i0, template: "<div class=\"content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"label\">\n <span>{{ label }}</span>\n</div>\n", styles: [":host-context{position:relative;padding-right:.5rem}:host-context:after{position:absolute;right:-.25rem;top:.25rem;bottom:.25rem;width:1px;--tw-content: \"\";content:var(--tw-content);background-color:#9ca3af99}:host-context .content{display:flex;flex-direction:row;flex-wrap:nowrap}:host-context .label{-webkit-user-select:none;user-select:none;padding-top:.05rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
3693
3682
|
}
|
|
3694
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3683
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RibbonGroupComponent, decorators: [{
|
|
3695
3684
|
type: Component,
|
|
3696
|
-
args: [{ selector: 'lib-ribbon-group', host: { '[class.hidden]': '!hasChildren' }, template: "<div class=\"content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"label\">\n <span>{{ label }}</span>\n</div>\n", styles: [":host-context{position:relative;padding-right:.5rem}:host-context:after{position:absolute;right:-.25rem;top:.25rem;bottom:.25rem;width:1px;--tw-content: \"\";content:var(--tw-content);background-color:#9ca3af99}:host-context .content{display:flex;flex-direction:row;flex-wrap:nowrap}:host-context .label{-webkit-user-select:none;user-select:none;padding-top:.05rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"] }]
|
|
3685
|
+
args: [{ selector: 'lib-ribbon-group', changeDetection: ChangeDetectionStrategy.Eager, host: { '[class.hidden]': '!hasChildren' }, template: "<div class=\"content\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"label\">\n <span>{{ label }}</span>\n</div>\n", styles: [":host-context{position:relative;padding-right:.5rem}:host-context:after{position:absolute;right:-.25rem;top:.25rem;bottom:.25rem;width:1px;--tw-content: \"\";content:var(--tw-content);background-color:#9ca3af99}:host-context .content{display:flex;flex-direction:row;flex-wrap:nowrap}:host-context .label{-webkit-user-select:none;user-select:none;padding-top:.05rem;text-align:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}\n"] }]
|
|
3697
3686
|
}], propDecorators: { children: [{
|
|
3698
3687
|
type: ContentChildren,
|
|
3699
3688
|
args: [RibbonGroupChild, { descendants: true }]
|
|
@@ -3722,10 +3711,10 @@ class EnumTranslatePipe {
|
|
|
3722
3711
|
display: this.translate.get(key),
|
|
3723
3712
|
}));
|
|
3724
3713
|
}
|
|
3725
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3726
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
3714
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: EnumTranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
3715
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: EnumTranslatePipe, isStandalone: true, name: "enumTranslate" });
|
|
3727
3716
|
}
|
|
3728
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3717
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: EnumTranslatePipe, decorators: [{
|
|
3729
3718
|
type: Pipe,
|
|
3730
3719
|
args: [{
|
|
3731
3720
|
name: 'enumTranslate',
|
|
@@ -3752,10 +3741,10 @@ class ReplaceManyPipe {
|
|
|
3752
3741
|
}
|
|
3753
3742
|
return message;
|
|
3754
3743
|
}
|
|
3755
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3756
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
3744
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ReplaceManyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
3745
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: ReplaceManyPipe, isStandalone: true, name: "replaceMany" });
|
|
3757
3746
|
}
|
|
3758
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3747
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ReplaceManyPipe, decorators: [{
|
|
3759
3748
|
type: Pipe,
|
|
3760
3749
|
args: [{
|
|
3761
3750
|
name: 'replaceMany',
|
|
@@ -3777,10 +3766,10 @@ class ReplacePipe {
|
|
|
3777
3766
|
transform(message, searchValue, replaceValue) {
|
|
3778
3767
|
return message.replace(searchValue, replaceValue ?? '');
|
|
3779
3768
|
}
|
|
3780
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3781
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
3769
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ReplacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
3770
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: ReplacePipe, isStandalone: true, name: "replace" });
|
|
3782
3771
|
}
|
|
3783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3772
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ReplacePipe, decorators: [{
|
|
3784
3773
|
type: Pipe,
|
|
3785
3774
|
args: [{
|
|
3786
3775
|
name: 'replace',
|
|
@@ -3792,19 +3781,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
|
|
|
3792
3781
|
* Import individual components directly in your component's `imports` array.
|
|
3793
3782
|
*/
|
|
3794
3783
|
class LibraryModule {
|
|
3795
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3796
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
3797
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
3784
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3785
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: LibraryModule, imports: [CatalogSelectComponent, DataGridComponent, DataGridRowComponent, FormInputComponent, FormInputGroupComponent, FormGroupComponent, GroupAccordionComponent, GroupContainerComponent, GroupScrollSpyComponent, SidebarComponent, ModalComponent, MultiEditorComponent, MultiSelectComponent, MultiSelectResultGridComponent, RibbonComponent, RibbonButtonComponent, RibbonGroupComponent, ScrollSpyDirective, EnumTranslatePipe, ReplacePipe, ReplaceManyPipe], exports: [CatalogSelectComponent, DataGridComponent, DataGridRowComponent, FormInputComponent, FormInputGroupComponent, FormGroupComponent, GroupAccordionComponent, GroupContainerComponent, GroupScrollSpyComponent, SidebarComponent, ModalComponent, MultiEditorComponent, MultiSelectComponent, MultiSelectResultGridComponent, RibbonComponent, RibbonButtonComponent, RibbonGroupComponent, ScrollSpyDirective, EnumTranslatePipe, ReplacePipe, ReplaceManyPipe] });
|
|
3786
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LibraryModule, imports: [CatalogSelectComponent,
|
|
3798
3787
|
DataGridComponent,
|
|
3799
3788
|
DataGridRowComponent,
|
|
3800
3789
|
FormInputComponent,
|
|
3801
3790
|
FormInputGroupComponent,
|
|
3802
|
-
SidebarComponent,
|
|
3803
3791
|
MultiEditorComponent,
|
|
3804
3792
|
MultiSelectComponent,
|
|
3805
3793
|
MultiSelectResultGridComponent] });
|
|
3806
3794
|
}
|
|
3807
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LibraryModule, decorators: [{
|
|
3808
3796
|
type: NgModule,
|
|
3809
3797
|
args: [{
|
|
3810
3798
|
declarations: [],
|
|
@@ -3873,10 +3861,10 @@ class DataGridConfigsProvider extends GridConfigsProvider {
|
|
|
3873
3861
|
multiSelectSize: 'minmax(1.5rem, min-content)',
|
|
3874
3862
|
};
|
|
3875
3863
|
}
|
|
3876
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3877
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3864
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridConfigsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3865
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridConfigsProvider });
|
|
3878
3866
|
}
|
|
3879
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataGridConfigsProvider, decorators: [{
|
|
3880
3868
|
type: Injectable
|
|
3881
3869
|
}], ctorParameters: () => [] });
|
|
3882
3870
|
|