@fxlt/common-ui 0.0.2 → 0.0.3

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/components.css CHANGED
@@ -122,7 +122,7 @@
122
122
  box-shadow: 0 2px 4px rgb(var(--shadow-color) / 0.1) !important;
123
123
  }
124
124
 
125
- .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow {
125
+ .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow {
126
126
  color: rgb(var(--text-primary)) !important;
127
127
  }
128
128
 
@@ -336,7 +336,7 @@ input[type='password'] {
336
336
  @apply rounded px-semi py-small;
337
337
  }
338
338
  .tag-round {
339
- @apply rounded-2xl
339
+ @apply rounded-2xl;
340
340
  }
341
341
  /* progress bar */
342
342
  .progress-bar-container {
@@ -387,6 +387,15 @@ input[type='password'] {
387
387
  padding-top: 16px !important;
388
388
  padding-bottom: 16px !important;
389
389
  }
390
+ .table-action-col {
391
+ width: 40px;
392
+ }
393
+ .table-status-col {
394
+ width: 200px;
395
+ }
390
396
  .dialog-container {
391
397
  @apply rounded-lg border border-border-default;
392
398
  }
399
+ .table-empty {
400
+ @apply w-full h-[100px] flex items-center justify-center;
401
+ }
@@ -1,8 +1,8 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Directive, Input, Component, createComponent, Injectable, ViewChild, Inject, EventEmitter, NgModule, HostListener, PLATFORM_ID, Output, Optional, Self, ChangeDetectionStrategy, TemplateRef, ContentChildren, importProvidersFrom } from '@angular/core';
3
- import * as i28 from '@angular/material/paginator';
3
+ import * as i31 from '@angular/material/paginator';
4
4
  import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
5
- import * as i29 from '@angular/material/table';
5
+ import * as i32 from '@angular/material/table';
6
6
  import { MatTableDataSource, MatTable, MatTableModule } from '@angular/material/table';
7
7
  import * as i2 from '@angular/common';
8
8
  import { isPlatformBrowser, CommonModule } from '@angular/common';
@@ -10,10 +10,10 @@ import * as i1 from '@dimaslz/ng-heroicons';
10
10
  import { NgHeroiconsModule } from '@dimaslz/ng-heroicons';
11
11
  import _, { clamp } from 'lodash';
12
12
  import { Observable, firstValueFrom, Subject, debounceTime, BehaviorSubject, throwError, distinctUntilChanged } from 'rxjs';
13
+ import * as i2$1 from '@angular/common/http';
14
+ import { HttpRequest, HttpClient } from '@angular/common/http';
13
15
  import * as i1$1 from '@angular/material/dialog';
14
16
  import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
15
- import * as i2$1 from '@angular/common/http';
16
- import { HttpClient } from '@angular/common/http';
17
17
  import * as i1$2 from '@ngx-translate/core';
18
18
  import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
19
19
  import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@@ -23,33 +23,38 @@ import * as i2$2 from '@angular/router';
23
23
  import { catchError } from 'rxjs/operators';
24
24
  import * as i3$1 from '@angular/material/select';
25
25
  import { MatSelectModule } from '@angular/material/select';
26
- import * as i25 from '@angular/material/radio';
26
+ import * as i28 from '@angular/material/radio';
27
27
  import { MatRadioModule } from '@angular/material/radio';
28
- import * as i26 from '@angular/material/button';
28
+ import * as i29 from '@angular/material/button';
29
29
  import { MatButtonModule } from '@angular/material/button';
30
- import * as i27 from '@angular/material/icon';
30
+ import * as i30 from '@angular/material/icon';
31
31
  import { MatIconModule } from '@angular/material/icon';
32
- import * as i30 from '@angular/material/snack-bar';
32
+ import * as i33 from '@angular/material/snack-bar';
33
33
  import { MatSnackBarModule } from '@angular/material/snack-bar';
34
- import * as i32 from '@angular/material/checkbox';
34
+ import * as i35 from '@angular/material/checkbox';
35
35
  import { MatCheckboxModule } from '@angular/material/checkbox';
36
- import * as i33 from '@angular/material/card';
36
+ import * as i36 from '@angular/material/card';
37
37
  import { MatCardModule } from '@angular/material/card';
38
- import * as i34 from '@angular/material/datepicker';
38
+ import * as i37 from '@angular/material/datepicker';
39
39
  import { MatDatepickerModule } from '@angular/material/datepicker';
40
- import * as i35 from '@angular/material/timepicker';
40
+ import * as i38 from '@angular/material/timepicker';
41
41
  import { MatTimepickerModule } from '@angular/material/timepicker';
42
- import * as i36 from '@angular/material/badge';
42
+ import * as i39 from '@angular/material/badge';
43
43
  import { MatBadgeModule } from '@angular/material/badge';
44
- import * as i37 from '@angular/material/expansion';
44
+ import * as i40 from '@angular/material/expansion';
45
45
  import { MatExpansionModule } from '@angular/material/expansion';
46
- import * as i38 from '@angular/material/form-field';
46
+ import * as i41 from '@angular/material/form-field';
47
47
  import { MatFormFieldModule } from '@angular/material/form-field';
48
+ import * as i42 from '@angular/material/menu';
49
+ import { MatMenuModule } from '@angular/material/menu';
48
50
  import * as i3 from '@danielmoncada/angular-datetime-picker';
49
- import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
51
+ import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS } from '@danielmoncada/angular-datetime-picker';
50
52
  import * as i2$3 from 'ngx-echarts';
51
53
  import { NgxEchartsModule } from 'ngx-echarts';
52
54
  import { __decorate, __param } from 'tslib';
55
+ import * as i25 from 'ngx-vflow';
56
+ import { Vflow } from 'ngx-vflow';
57
+ import { OwlMomentDateTimeModule } from '@danielmoncada/angular-datetime-picker-moment-adapter';
53
58
 
54
59
  class BaseComponent {
55
60
  injector;
@@ -319,6 +324,7 @@ class FxUtils {
319
324
  }
320
325
  return 'critical';
321
326
  case 'inprogress':
327
+ case 'processing':
322
328
  case 'paused':
323
329
  case 'medium':
324
330
  return 'warning';
@@ -342,6 +348,10 @@ class FxUtils {
342
348
  const isEmail = emailRegex.test(value);
343
349
  return isEmail;
344
350
  }
351
+ static isStrongPassword(password) {
352
+ const regex = /^(?=.{6,}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9]).*$/;
353
+ return regex.test(password);
354
+ }
345
355
  }
346
356
 
347
357
  class HttpWrapper {
@@ -375,6 +385,13 @@ class HttpWrapper {
375
385
  async delete(url, options = {}) {
376
386
  return firstValueFrom(this.http.delete(this.baseURL + url, this.addCredentials(options)));
377
387
  }
388
+ upload(url, body, options = {}) {
389
+ const req = new HttpRequest('POST', this.baseURL + url, body, {
390
+ reportProgress: true,
391
+ ...this.addCredentials(options)
392
+ });
393
+ return this.http.request(req);
394
+ }
378
395
  async search(params = {}) {
379
396
  return await this.get('/search', params);
380
397
  }
@@ -426,7 +443,7 @@ class BaseTableComponent extends BaseComponent {
426
443
  dataSource = new MatTableDataSource();
427
444
  cols = [];
428
445
  total = 0;
429
- page = 1;
446
+ page = 0;
430
447
  pageSize = 10;
431
448
  filters = {};
432
449
  loading = false;
@@ -452,11 +469,10 @@ class BaseTableComponent extends BaseComponent {
452
469
  }
453
470
  init() { }
454
471
  ngAfterViewInit() {
455
- this.dataSource.paginator = this.paginator;
456
472
  this.ref.detectChanges();
457
473
  }
458
474
  async refresh() {
459
- this.page = 1;
475
+ this.page = 0;
460
476
  await this.fetch();
461
477
  }
462
478
  setDataSource(result) {
@@ -466,7 +482,7 @@ class BaseTableComponent extends BaseComponent {
466
482
  async fetch() {
467
483
  this.loading = true;
468
484
  try {
469
- const params = { page: this.page, pageSize: this.pageSize, ...this.filters };
485
+ const params = { page: this.page + 1, pageSize: this.pageSize, ...this.filters };
470
486
  const result = await this.api.search(params);
471
487
  this.setDataSource(result);
472
488
  }
@@ -703,12 +719,13 @@ class BaseDialogComponent extends BaseComponent {
703
719
  ngOnInit() { }
704
720
  accept(form, params = null) {
705
721
  if (form.invalid) {
722
+ FxUtils.checkInvalidField(form);
706
723
  return;
707
724
  }
708
725
  if (!this.disabled) {
709
726
  if (!this.validate())
710
727
  return;
711
- if (_.isEmpty(this.model.id)) {
728
+ if (this.method === 'create') {
712
729
  this.create(params);
713
730
  return;
714
731
  }
@@ -747,7 +764,7 @@ class BaseDialogComponent extends BaseComponent {
747
764
  this.toastr.success(this.message);
748
765
  this.ref.close(true);
749
766
  }, (error) => {
750
- this.toastr.error(error);
767
+ this.toastr.error(FxUtils.parseError(error));
751
768
  })
752
769
  .then(() => {
753
770
  this.loading = false;
@@ -1190,7 +1207,8 @@ const MATERIAL_MODULE = [
1190
1207
  MatTimepickerModule,
1191
1208
  MatBadgeModule,
1192
1209
  MatExpansionModule,
1193
- MatFormFieldModule
1210
+ MatFormFieldModule,
1211
+ MatMenuModule
1194
1212
  ];
1195
1213
 
1196
1214
  class ButtonComponent {
@@ -1624,20 +1642,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
1624
1642
  type: Output
1625
1643
  }] } });
1626
1644
 
1645
+ class CircleProgressBar {
1646
+ percent = 0;
1647
+ showPercent = false;
1648
+ radius = 35;
1649
+ stroke = 10;
1650
+ normalizedRadius = this.radius - this.stroke / 2;
1651
+ circumference = 2 * Math.PI * this.normalizedRadius;
1652
+ get dashOffset() {
1653
+ const clamped = Math.max(0, Math.min(100, this.percent));
1654
+ return this.circumference - (clamped / 100) * this.circumference;
1655
+ }
1656
+ get ariaLabel() {
1657
+ return `${Math.round(this.percent)}%`;
1658
+ }
1659
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CircleProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
1660
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CircleProgressBar, isStandalone: false, selector: "fx-ui-circle-progress-bar", inputs: { percent: "percent", showPercent: "showPercent" }, ngImport: i0, template: "<div class=\"flex items-center justify-center w-full h-full\">\n <svg\n class=\"transform -rotate-90 block\"\n [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\n width=\"100%\"\n height=\"100%\"\n >\n <circle\n class=\"opacity-20\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n [attr.r]=\"normalizedRadius\"\n [attr.stroke-width]=\"stroke\"\n fill=\"transparent\"\n stroke=\"currentColor\"\n ></circle>\n\n <circle\n class=\"stroke-current\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n [attr.r]=\"normalizedRadius\"\n [attr.stroke-width]=\"stroke\"\n fill=\"transparent\"\n stroke-linecap=\"round\"\n [attr.stroke-dasharray]=\"circumference\"\n [attr.stroke-dashoffset]=\"dashOffset\"\n style=\"transition: stroke-dashoffset 300ms linear\"\n ></circle>\n\n @if(showPercent){\n <text\n [attr.x]=\"radius\"\n [attr.y]=\"radius\"\n dominant-baseline=\"central\"\n text-anchor=\"middle\"\n class=\"text-xs font-medium\"\n fill=\"currentColor\"\n >\n {{ percent }}%\n </text>\n }\n </svg>\n</div>\n", styles: [""] });
1661
+ }
1662
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CircleProgressBar, decorators: [{
1663
+ type: Component,
1664
+ args: [{ selector: 'fx-ui-circle-progress-bar', standalone: false, template: "<div class=\"flex items-center justify-center w-full h-full\">\n <svg\n class=\"transform -rotate-90 block\"\n [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\n width=\"100%\"\n height=\"100%\"\n >\n <circle\n class=\"opacity-20\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n [attr.r]=\"normalizedRadius\"\n [attr.stroke-width]=\"stroke\"\n fill=\"transparent\"\n stroke=\"currentColor\"\n ></circle>\n\n <circle\n class=\"stroke-current\"\n [attr.cx]=\"radius\"\n [attr.cy]=\"radius\"\n [attr.r]=\"normalizedRadius\"\n [attr.stroke-width]=\"stroke\"\n fill=\"transparent\"\n stroke-linecap=\"round\"\n [attr.stroke-dasharray]=\"circumference\"\n [attr.stroke-dashoffset]=\"dashOffset\"\n style=\"transition: stroke-dashoffset 300ms linear\"\n ></circle>\n\n @if(showPercent){\n <text\n [attr.x]=\"radius\"\n [attr.y]=\"radius\"\n dominant-baseline=\"central\"\n text-anchor=\"middle\"\n class=\"text-xs font-medium\"\n fill=\"currentColor\"\n >\n {{ percent }}%\n </text>\n }\n </svg>\n</div>\n" }]
1665
+ }], propDecorators: { percent: [{
1666
+ type: Input
1667
+ }], showPercent: [{
1668
+ type: Input
1669
+ }] } });
1670
+
1627
1671
  class DatetimePicker extends FxComponent {
1628
1672
  ref;
1629
1673
  label;
1630
1674
  placeholder = 'Select date and time';
1631
1675
  required = false;
1632
- showTime = true;
1633
- format = 'YYYY-MM-DD HH:mm:ss';
1676
+ type = 'both';
1634
1677
  disabled = false;
1635
1678
  errorMessages = {};
1636
1679
  validateFn;
1680
+ startAt;
1637
1681
  constructor(ngControl, ref) {
1638
1682
  super(ngControl);
1639
1683
  this.ref = ref;
1640
1684
  }
1685
+ ngOnInit() {
1686
+ }
1641
1687
  ngAfterViewInit() {
1642
1688
  setTimeout(() => {
1643
1689
  this.ref.detectChanges();
@@ -1652,6 +1698,8 @@ class DatetimePicker extends FxComponent {
1652
1698
  }
1653
1699
  writeValue(value) {
1654
1700
  this.value = value ?? '';
1701
+ this.startAt = value ?? '';
1702
+ console.log('startAt: ', this.startAt);
1655
1703
  this.ref.markForCheck();
1656
1704
  }
1657
1705
  onValueChange(date) {
@@ -1659,23 +1707,22 @@ class DatetimePicker extends FxComponent {
1659
1707
  return;
1660
1708
  this.value = date;
1661
1709
  this.onChange(date);
1710
+ console.log('date: ', date);
1662
1711
  this.onTouched();
1663
1712
  }
1664
1713
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatetimePicker, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1665
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: DatetimePicker, isStandalone: false, selector: "fx-ui-datetime-picker", inputs: { label: "label", placeholder: "placeholder", required: "required", showTime: "showTime", format: "format", disabled: "disabled", errorMessages: "errorMessages", validateFn: "validateFn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n <label *ngIf=\"label\" class=\"txt-field-label\">\n {{ label }}\n <span *ngIf=\"required\" class=\"txt-required\">*</span>\n </label>\n\n <div class=\"relative\">\n <input\n [owlDateTimeTrigger]=\"picker\"\n [owlDateTime]=\"picker\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n [value]=\"value\"\n readonly\n class=\"input-default\"\n />\n </div>\n <owl-date-time\n #picker\n [pickerType]=\"showTime ? 'both' : 'calendar'\"\n (afterPickerClosed)=\"onValueChange($event)\"\n ></owl-date-time>\n <div *ngIf=\"invalid\" class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n</div>\n", styles: ["::ng-deep .owl-dt-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1));--tw-shadow: 0 20px 25px -5px rgb(var(--shadow-color) / .1), 0 10px 10px -5px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);width:320px!important}::ng-deep .owl-dt-calendar-table{width:100%;border-collapse:collapse}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell{border-radius:.375rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell:hover{background-color:#ef444433}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected{--tw-bg-opacity: 1;background-color:rgb(var(--border-selected) / var(--tw-bg-opacity, 1));font-weight:400;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-selected) / var(--tw-border-opacity, 1))}::ng-deep .owl-dt-timer-content .owl-dt-timer-input{border-radius:.5rem;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow{display:none}:ng-deep .owl-dt-container-buttons button{height:2.25rem;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));padding-top:1rem;padding-bottom:1rem}::ng-deep .owl-dt-container-control-button .owl-dt-control-button-content{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(var(--primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-header{margin-bottom:.5rem;text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table th{font-size:.75rem;line-height:1rem;font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-inline-container,::ng-deep .owl-dt-popup-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i3.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i3.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1714
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DatetimePicker, isStandalone: false, selector: "fx-ui-datetime-picker", inputs: { label: "label", placeholder: "placeholder", required: "required", type: "type", disabled: "disabled", errorMessages: "errorMessages", validateFn: "validateFn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n @if (label){\n <label class=\"txt-field-label\">\n {{ label }}\n <span *ngIf=\"required\" class=\"txt-required\">*</span>\n </label>\n }\n\n <div class=\"relative\">\n <input\n [owlDateTimeTrigger]=\"picker\"\n [owlDateTime]=\"picker\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n [value]=\"value\"\n readonly\n class=\"input-default\"\n />\n </div>\n <owl-date-time\n #picker\n [startAt]=\"startAt\"\n [pickerType]=\"type\"\n (afterPickerClosed)=\"onValueChange($event)\"\n ></owl-date-time>\n <div *ngIf=\"invalid\" class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n</div>\n", styles: ["::ng-deep .owl-dt-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1));--tw-shadow: 0 20px 25px -5px rgb(var(--shadow-color) / .1), 0 10px 10px -5px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);width:320px!important}::ng-deep .owl-dt-calendar-table{width:100%;border-collapse:collapse}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell{border-radius:.375rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell:hover{background-color:#ef444433}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected{--tw-bg-opacity: 1;background-color:rgb(var(--border-selected) / var(--tw-bg-opacity, 1));font-weight:400;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-selected) / var(--tw-border-opacity, 1))}::ng-deep .owl-dt-timer-content .owl-dt-timer-input{border-radius:.5rem;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow{display:none}:ng-deep .owl-dt-container-buttons button{height:2.25rem;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));padding-top:1rem;padding-bottom:1rem}::ng-deep .owl-dt-container-control-button .owl-dt-control-button-content{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(var(--primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-header{margin-bottom:.5rem;text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table th{font-size:.75rem;line-height:1rem;font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-inline-container,::ng-deep .owl-dt-popup-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i3.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i3.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1666
1715
  }
1667
1716
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatetimePicker, decorators: [{
1668
1717
  type: Component,
1669
- args: [{ selector: 'fx-ui-datetime-picker', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n <label *ngIf=\"label\" class=\"txt-field-label\">\n {{ label }}\n <span *ngIf=\"required\" class=\"txt-required\">*</span>\n </label>\n\n <div class=\"relative\">\n <input\n [owlDateTimeTrigger]=\"picker\"\n [owlDateTime]=\"picker\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n [value]=\"value\"\n readonly\n class=\"input-default\"\n />\n </div>\n <owl-date-time\n #picker\n [pickerType]=\"showTime ? 'both' : 'calendar'\"\n (afterPickerClosed)=\"onValueChange($event)\"\n ></owl-date-time>\n <div *ngIf=\"invalid\" class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n</div>\n", styles: ["::ng-deep .owl-dt-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1));--tw-shadow: 0 20px 25px -5px rgb(var(--shadow-color) / .1), 0 10px 10px -5px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);width:320px!important}::ng-deep .owl-dt-calendar-table{width:100%;border-collapse:collapse}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell{border-radius:.375rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell:hover{background-color:#ef444433}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected{--tw-bg-opacity: 1;background-color:rgb(var(--border-selected) / var(--tw-bg-opacity, 1));font-weight:400;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-selected) / var(--tw-border-opacity, 1))}::ng-deep .owl-dt-timer-content .owl-dt-timer-input{border-radius:.5rem;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow{display:none}:ng-deep .owl-dt-container-buttons button{height:2.25rem;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));padding-top:1rem;padding-bottom:1rem}::ng-deep .owl-dt-container-control-button .owl-dt-control-button-content{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(var(--primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-header{margin-bottom:.5rem;text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table th{font-size:.75rem;line-height:1rem;font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-inline-container,::ng-deep .owl-dt-popup-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"] }]
1718
+ args: [{ selector: 'fx-ui-datetime-picker', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n @if (label){\n <label class=\"txt-field-label\">\n {{ label }}\n <span *ngIf=\"required\" class=\"txt-required\">*</span>\n </label>\n }\n\n <div class=\"relative\">\n <input\n [owlDateTimeTrigger]=\"picker\"\n [owlDateTime]=\"picker\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n [value]=\"value\"\n readonly\n class=\"input-default\"\n />\n </div>\n <owl-date-time\n #picker\n [startAt]=\"startAt\"\n [pickerType]=\"type\"\n (afterPickerClosed)=\"onValueChange($event)\"\n ></owl-date-time>\n <div *ngIf=\"invalid\" class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n</div>\n", styles: ["::ng-deep .owl-dt-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1));--tw-shadow: 0 20px 25px -5px rgb(var(--shadow-color) / .1), 0 10px 10px -5px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);width:320px!important}::ng-deep .owl-dt-calendar-table{width:100%;border-collapse:collapse}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell{border-radius:.375rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell:hover{background-color:#ef444433}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected{--tw-bg-opacity: 1;background-color:rgb(var(--border-selected) / var(--tw-bg-opacity, 1));font-weight:400;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-selected) / var(--tw-border-opacity, 1))}::ng-deep .owl-dt-timer-content .owl-dt-timer-input{border-radius:.5rem;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow{display:none}:ng-deep .owl-dt-container-buttons button{height:2.25rem;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));padding-top:1rem;padding-bottom:1rem}::ng-deep .owl-dt-container-control-button .owl-dt-control-button-content{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(var(--primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-header{margin-bottom:.5rem;text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table th{font-size:.75rem;line-height:1rem;font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-inline-container,::ng-deep .owl-dt-popup-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"] }]
1670
1719
  }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
1671
1720
  type: Input
1672
1721
  }], placeholder: [{
1673
1722
  type: Input
1674
1723
  }], required: [{
1675
1724
  type: Input
1676
- }], showTime: [{
1677
- type: Input
1678
- }], format: [{
1725
+ }], type: [{
1679
1726
  type: Input
1680
1727
  }], disabled: [{
1681
1728
  type: Input
@@ -1729,16 +1776,27 @@ class DndUploadComponent {
1729
1776
  return;
1730
1777
  const files = Array.from(input.files);
1731
1778
  this.processFiles(files);
1732
- input.value = ''; // allow reselect same file
1779
+ input.value = '';
1733
1780
  }
1734
1781
  processFiles(files) {
1735
1782
  const valid = [];
1783
+ const acceptedTypes = this.accept
1784
+ .split(',')
1785
+ .map(t => t.trim().toLowerCase())
1786
+ .filter(t => t);
1736
1787
  for (const file of files) {
1737
1788
  const sizeMB = file.size / 1024 / 1024;
1738
1789
  if (this.strictSize && sizeMB > this.maxSizeMB) {
1739
1790
  this.uploadError.emit({
1740
1791
  file,
1741
- reason: `File too large: ${(sizeMB).toFixed(2)} MB > ${this.maxSizeMB} MB`,
1792
+ reason: `File too large: ${sizeMB.toFixed(2)} MB > ${this.maxSizeMB} MB`
1793
+ });
1794
+ continue;
1795
+ }
1796
+ if (acceptedTypes.length && !this.isAccepted(file, acceptedTypes)) {
1797
+ this.uploadError.emit({
1798
+ file,
1799
+ reason: `File type not allowed: "${file.name}"`
1742
1800
  });
1743
1801
  continue;
1744
1802
  }
@@ -1753,6 +1811,19 @@ class DndUploadComponent {
1753
1811
  console.log('Uploading files:', files);
1754
1812
  this.uploadComplete.emit(files);
1755
1813
  }
1814
+ isAccepted(file, accepted) {
1815
+ const fileType = file.type.toLowerCase();
1816
+ const fileExt = '.' + file.name.split('.').pop().toLowerCase();
1817
+ return accepted.some(a => {
1818
+ if (a.startsWith('.')) {
1819
+ return a === fileExt;
1820
+ }
1821
+ if (a.endsWith('/*')) {
1822
+ return fileType.startsWith(a.replace('/*', ''));
1823
+ }
1824
+ return a === fileType;
1825
+ });
1826
+ }
1756
1827
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DndUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1757
1828
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: DndUploadComponent, isStandalone: false, selector: "fx-ui-dnd-upload", inputs: { multiple: "multiple", accept: "accept", maxSizeMB: "maxSizeMB", strictSize: "strictSize" }, outputs: { fileDrop: "fileDrop", fileClick: "fileClick", uploadComplete: "uploadComplete", uploadError: "uploadError" }, ngImport: i0, template: "<div\n class=\"block w-full\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n>\n <div\n role=\"button\"\n tabindex=\"0\"\n class=\"flex flex-col items-center justify-center gap-1 border-2 border-dashed rounded-md p-4 cursor-pointer select-none outline-none focus:ring-2 focus:ring-primary\"\n [ngClass]=\"{\n 'border-border-default bg-bg-hover': !isDragOver,\n 'border-border-interactive bg-secondary': isDragOver\n }\"\n (click)=\"onAreaClick(fileInput, $event)\"\n (keydown.enter)=\"onAreaClick(fileInput, $event)\"\n >\n <div class=\"text-sm text-text-link font-medium\">\n Click to upload <span class=\"text-text-secondary opacity-50\">or drag and drop</span>\n </div>\n <div class=\"text-xs text-text-secondary\">\n Allowed: {{ accept || 'any file type' }} (max {{ maxSizeMB }} MB)\n </div>\n\n <input\n #fileInput\n type=\"file\"\n class=\"hidden\"\n [attr.multiple]=\"multiple ? '' : null\"\n [attr.accept]=\"accept\"\n (change)=\"onFileSelected($event)\"\n />\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
1758
1829
  }
@@ -1777,6 +1848,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
1777
1848
  type: Output
1778
1849
  }] } });
1779
1850
 
1851
+ class FlowConnection {
1852
+ nodes = [];
1853
+ edges = [];
1854
+ backgroundColor = '--bg-hover-primary';
1855
+ view = ['100%', '400px'];
1856
+ handleConnection(connection) {
1857
+ this.edges = [
1858
+ ...this.edges,
1859
+ {
1860
+ id: `${connection.source} -> ${connection.target}`,
1861
+ ...connection,
1862
+ },
1863
+ ];
1864
+ }
1865
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FlowConnection, deps: [], target: i0.ɵɵFactoryTarget.Component });
1866
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: FlowConnection, isStandalone: false, selector: "fx-ui-flow-connection", inputs: { nodes: "nodes", edges: "edges", backgroundColor: "backgroundColor", view: "view" }, ngImport: i0, template: "<vflow\n [background]=\"{\n type: 'solid',\n color: `rgba(var(${backgroundColor})`\n}\"\n [nodes]=\"nodes\"\n [edges]=\"edges\"\n (onConnect)=\"handleConnection($event)\"\n [view]=\"view\"\n/>\n", styles: [""], dependencies: [{ kind: "component", type: i25.VflowComponent, selector: "vflow", inputs: ["view", "minZoom", "maxZoom", "background", "optimization", "entitiesSelectable", "keyboardShortcuts", "connection", "snapGrid", "elevateNodesOnSelect", "elevateEdgesOnSelect", "nodes", "alignmentHelper", "edges"], outputs: ["onComponentNodeEvent"] }, { kind: "directive", type: i25.ConnectionControllerDirective, selector: "[onConnect], [onReconnect]", outputs: ["onConnect", "onReconnect"] }] });
1867
+ }
1868
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FlowConnection, decorators: [{
1869
+ type: Component,
1870
+ args: [{ selector: 'fx-ui-flow-connection', standalone: false, template: "<vflow\n [background]=\"{\n type: 'solid',\n color: `rgba(var(${backgroundColor})`\n}\"\n [nodes]=\"nodes\"\n [edges]=\"edges\"\n (onConnect)=\"handleConnection($event)\"\n [view]=\"view\"\n/>\n" }]
1871
+ }], propDecorators: { nodes: [{
1872
+ type: Input
1873
+ }], edges: [{
1874
+ type: Input
1875
+ }], backgroundColor: [{
1876
+ type: Input
1877
+ }], view: [{
1878
+ type: Input
1879
+ }] } });
1880
+
1780
1881
  class InputComponent extends FxComponent {
1781
1882
  ref;
1782
1883
  label = '';
@@ -2582,7 +2683,9 @@ const FX_COMPONENTS = [
2582
2683
  SliderComponent,
2583
2684
  SwitchComponent,
2584
2685
  RichTextAreaComponent,
2585
- SkeletonTableLoadingComponent
2686
+ SkeletonTableLoadingComponent,
2687
+ FlowConnection,
2688
+ CircleProgressBar,
2586
2689
  ];
2587
2690
 
2588
2691
  class ConfirmationDialogComponent {
@@ -2627,48 +2730,49 @@ const DIALOGS_COMPONENT = [
2627
2730
  ConfirmationDialogComponent
2628
2731
  ];
2629
2732
 
2630
- const MY_FORMATS = {
2631
- parseInput: 'YYYY-MM-DD HH:mm:ss',
2632
- fullPickerInput: 'YYYY-MM-DD HH:mm:ss',
2633
- datePickerInput: 'YYYY-MM-DD HH:mm:ss',
2634
- timePickerInput: 'HH:mm:ss',
2733
+ const MY_MOMENT_FORMATS = {
2734
+ parseInput: 'YYYY-MM-DD',
2735
+ fullPickerInput: 'YYYY-MM-DD HH:mm',
2736
+ datePickerInput: 'YYYY-MM-DD',
2737
+ timePickerInput: 'HH:mm',
2635
2738
  monthYearLabel: 'MMM YYYY',
2636
- dateA11yLabel: 'YYYY-MM-DD HH:mm:ss',
2739
+ dateA11yLabel: 'LL',
2637
2740
  monthYearA11yLabel: 'MMMM YYYY',
2638
2741
  };
2639
2742
  class UiModule {
2640
2743
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2641
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: UiModule, declarations: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, ConfirmationDialogComponent], imports: [CommonModule,
2744
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: UiModule, declarations: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, ConfirmationDialogComponent], imports: [CommonModule,
2642
2745
  FormsModule,
2643
2746
  ReactiveFormsModule,
2644
2747
  OwlDateTimeModule,
2645
2748
  OwlNativeDateTimeModule,
2749
+ OwlMomentDateTimeModule,
2646
2750
  HasPermissionDirective,
2647
2751
  TrimOnBlurDirective,
2648
- NgHeroiconsModule, i2$3.NgxEchartsModule, i3$1.MatSelectModule, i25.MatRadioModule, i26.MatButtonModule, i27.MatIconModule, i28.MatPaginatorModule, i29.MatTableModule, i30.MatSnackBarModule, i1$1.MatDialogModule, i32.MatCheckboxModule, i33.MatCardModule, i34.MatDatepickerModule, i35.MatTimepickerModule, i36.MatBadgeModule, i37.MatExpansionModule, i38.MatFormFieldModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, ConfirmationDialogComponent,
2752
+ NgHeroiconsModule, i25.VflowComponent, i25.HandleComponent, i25.ResizableComponent, i25.SelectableDirective, i25.MiniMapComponent, i25.NodeToolbarComponent, i25.CustomTemplateEdgeComponent, i25.DragHandleDirective, i25.ConnectionControllerDirective, i25.NodeHtmlTemplateDirective, i25.NodeSvgTemplateDirective, i25.GroupNodeTemplateDirective, i25.EdgeLabelHtmlTemplateDirective, i25.EdgeTemplateDirective, i25.ConnectionTemplateDirective, i25.HandleTemplateDirective, i2$3.NgxEchartsModule, i3$1.MatSelectModule, i28.MatRadioModule, i29.MatButtonModule, i30.MatIconModule, i31.MatPaginatorModule, i32.MatTableModule, i33.MatSnackBarModule, i1$1.MatDialogModule, i35.MatCheckboxModule, i36.MatCardModule, i37.MatDatepickerModule, i38.MatTimepickerModule, i39.MatBadgeModule, i40.MatExpansionModule, i41.MatFormFieldModule, i42.MatMenuModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, ConfirmationDialogComponent,
2649
2753
  // Module
2650
2754
  FormsModule,
2651
2755
  ReactiveFormsModule,
2652
2756
  OwlDateTimeModule,
2653
2757
  OwlNativeDateTimeModule,
2654
2758
  HasPermissionDirective,
2655
- NgHeroiconsModule, i3$1.MatSelectModule, i25.MatRadioModule, i26.MatButtonModule, i27.MatIconModule, i28.MatPaginatorModule, i29.MatTableModule, i30.MatSnackBarModule, i1$1.MatDialogModule, i32.MatCheckboxModule, i33.MatCardModule, i34.MatDatepickerModule, i35.MatTimepickerModule, i36.MatBadgeModule, i37.MatExpansionModule, i38.MatFormFieldModule] });
2759
+ NgHeroiconsModule, i3$1.MatSelectModule, i28.MatRadioModule, i29.MatButtonModule, i30.MatIconModule, i31.MatPaginatorModule, i32.MatTableModule, i33.MatSnackBarModule, i1$1.MatDialogModule, i35.MatCheckboxModule, i36.MatCardModule, i37.MatDatepickerModule, i38.MatTimepickerModule, i39.MatBadgeModule, i40.MatExpansionModule, i41.MatFormFieldModule, i42.MatMenuModule] });
2656
2760
  static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, providers: [
2657
2761
  importProvidersFrom(NgHeroiconsModule.forRoot()),
2658
- // { provide: OWL_DATE_TIME_FORMATS, useValue: MY_FORMATS },
2762
+ { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS },
2659
2763
  ], imports: [CommonModule,
2660
2764
  FormsModule,
2661
2765
  ReactiveFormsModule,
2662
2766
  OwlDateTimeModule,
2663
2767
  OwlNativeDateTimeModule,
2664
- NgHeroiconsModule,
2665
- NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), MATERIAL_MODULE,
2768
+ OwlMomentDateTimeModule,
2769
+ NgHeroiconsModule, i25.VflowComponent, i25.HandleComponent, i25.ResizableComponent, i25.MiniMapComponent, i25.NodeToolbarComponent, i25.CustomTemplateEdgeComponent, NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), MATERIAL_MODULE,
2666
2770
  // Module
2667
2771
  FormsModule,
2668
2772
  ReactiveFormsModule,
2669
2773
  OwlDateTimeModule,
2670
2774
  OwlNativeDateTimeModule,
2671
- NgHeroiconsModule, i3$1.MatSelectModule, i25.MatRadioModule, i26.MatButtonModule, i27.MatIconModule, i28.MatPaginatorModule, i29.MatTableModule, i30.MatSnackBarModule, i1$1.MatDialogModule, i32.MatCheckboxModule, i33.MatCardModule, i34.MatDatepickerModule, i35.MatTimepickerModule, i36.MatBadgeModule, i37.MatExpansionModule, i38.MatFormFieldModule] });
2775
+ NgHeroiconsModule, i3$1.MatSelectModule, i28.MatRadioModule, i29.MatButtonModule, i30.MatIconModule, i31.MatPaginatorModule, i32.MatTableModule, i33.MatSnackBarModule, i1$1.MatDialogModule, i35.MatCheckboxModule, i36.MatCardModule, i37.MatDatepickerModule, i38.MatTimepickerModule, i39.MatBadgeModule, i40.MatExpansionModule, i41.MatFormFieldModule, i42.MatMenuModule] });
2672
2776
  }
2673
2777
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, decorators: [{
2674
2778
  type: NgModule,
@@ -2680,9 +2784,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
2680
2784
  ReactiveFormsModule,
2681
2785
  OwlDateTimeModule,
2682
2786
  OwlNativeDateTimeModule,
2787
+ OwlMomentDateTimeModule,
2683
2788
  HasPermissionDirective,
2684
2789
  TrimOnBlurDirective,
2685
2790
  NgHeroiconsModule,
2791
+ ...Vflow,
2686
2792
  NgxEchartsModule.forRoot({ echarts: () => import('echarts') }),
2687
2793
  ...MATERIAL_MODULE,
2688
2794
  ],
@@ -2701,7 +2807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
2701
2807
  ],
2702
2808
  providers: [
2703
2809
  importProvidersFrom(NgHeroiconsModule.forRoot()),
2704
- // { provide: OWL_DATE_TIME_FORMATS, useValue: MY_FORMATS },
2810
+ { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS },
2705
2811
  ],
2706
2812
  }]
2707
2813
  }] });
@@ -2714,5 +2820,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
2714
2820
  * Generated bundle index. Do not edit.
2715
2821
  */
2716
2822
 
2717
- export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, FxLoadingService, FxStorageService, FxToastrService, FxUtils, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, LoadingPanel, MY_FORMATS, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RichTextAreaComponent, SearchBarComponent, SelectComponent, SkeletonTableLoadingComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TrimOnBlurDirective, UiModule };
2823
+ export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, LoadingPanel, MY_MOMENT_FORMATS, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RichTextAreaComponent, SearchBarComponent, SelectComponent, SkeletonTableLoadingComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TrimOnBlurDirective, UiModule };
2718
2824
  //# sourceMappingURL=fxlt-common-ui.mjs.map