@maro-tech/form 0.0.9 → 0.0.11
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/fesm2022/maro-tech-form.mjs +396 -97
- package/fesm2022/maro-tech-form.mjs.map +1 -1
- package/package.json +1 -1
- package/types/maro-tech-form.d.ts +116 -12
package/package.json
CHANGED
|
@@ -44,10 +44,11 @@ declare class UiSelectComponent implements ControlValueAccessor, OnChanges {
|
|
|
44
44
|
readonly closeIcon: lucide_angular.LucideIconData;
|
|
45
45
|
readonly chevronDownIcon: lucide_angular.LucideIconData;
|
|
46
46
|
readonly checkIcon: lucide_angular.LucideIconData;
|
|
47
|
-
private static openInstance;
|
|
48
47
|
private readonly cdr;
|
|
49
48
|
private readonly destroyRef;
|
|
50
49
|
private readonly http;
|
|
50
|
+
private readonly popupService;
|
|
51
|
+
private readonly closeActivePopup;
|
|
51
52
|
label?: string;
|
|
52
53
|
placeholder?: string;
|
|
53
54
|
name?: string;
|
|
@@ -71,10 +72,13 @@ declare class UiSelectComponent implements ControlValueAccessor, OnChanges {
|
|
|
71
72
|
panelClass: string;
|
|
72
73
|
valueChange: EventEmitter<UiSelectValue>;
|
|
73
74
|
searchChange: EventEmitter<string>;
|
|
75
|
+
readonly popupMinWidth = 300;
|
|
76
|
+
readonly popupViewportMargin = 16;
|
|
77
|
+
readonly popupOffset = 8;
|
|
74
78
|
dropdownTrigger?: ElementRef<HTMLButtonElement>;
|
|
75
79
|
readonly dropdownPositions: ConnectedPosition[];
|
|
76
80
|
isOpen: boolean;
|
|
77
|
-
|
|
81
|
+
popupWidth: number;
|
|
78
82
|
value: string | null;
|
|
79
83
|
multiValue: string[];
|
|
80
84
|
selectedOptions: UiSelectOption[];
|
|
@@ -95,6 +99,8 @@ declare class UiSelectComponent implements ControlValueAccessor, OnChanges {
|
|
|
95
99
|
selectOption(option: UiSelectOption, event: Event): void;
|
|
96
100
|
markTouched(): void;
|
|
97
101
|
closeDropdown(): void;
|
|
102
|
+
onDocumentClick(): void;
|
|
103
|
+
onEscape(): void;
|
|
98
104
|
get displayLabel(): string;
|
|
99
105
|
isSelected(option: UiSelectOption): boolean;
|
|
100
106
|
getOptionValue(option: UiSelectOption): string;
|
|
@@ -304,6 +310,9 @@ interface MaroFormViewAction extends UiDynamicFormFieldAction {
|
|
|
304
310
|
redirectTo?: string;
|
|
305
311
|
}
|
|
306
312
|
interface MaroFormViewResponse {
|
|
313
|
+
meta?: {
|
|
314
|
+
title?: string;
|
|
315
|
+
};
|
|
307
316
|
title?: string;
|
|
308
317
|
api?: string;
|
|
309
318
|
defaults?: Record<string, unknown>;
|
|
@@ -353,6 +362,8 @@ declare class UiActionFormModalComponent implements OnChanges {
|
|
|
353
362
|
confirm(): void;
|
|
354
363
|
private loadForm;
|
|
355
364
|
private resolveEndpoint;
|
|
365
|
+
private normalizeActionType;
|
|
366
|
+
private isSubmitAction;
|
|
356
367
|
private resolveMethod;
|
|
357
368
|
private extractData;
|
|
358
369
|
private navigateAfterSubmit;
|
|
@@ -472,20 +483,31 @@ declare class UiColorInputComponent implements ControlValueAccessor {
|
|
|
472
483
|
static ɵcmp: i0.ɵɵComponentDeclaration<UiColorInputComponent, "forms-color-input", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, never, true, never>;
|
|
473
484
|
}
|
|
474
485
|
|
|
475
|
-
type UiInputElement$
|
|
486
|
+
type UiInputElement$6 = 'input' | 'textarea';
|
|
487
|
+
interface CalendarDay$1 {
|
|
488
|
+
date: string;
|
|
489
|
+
day: number;
|
|
490
|
+
currentMonth: boolean;
|
|
491
|
+
}
|
|
492
|
+
type CalendarView$1 = 'days' | 'months' | 'years';
|
|
476
493
|
declare class UiDateInputComponent implements ControlValueAccessor {
|
|
477
494
|
private readonly cdr;
|
|
495
|
+
private readonly popupService;
|
|
496
|
+
private readonly closeActivePopup;
|
|
478
497
|
label?: string;
|
|
479
498
|
hint?: string;
|
|
480
499
|
placeholder?: string;
|
|
481
500
|
name?: string;
|
|
482
501
|
id?: string;
|
|
483
502
|
readonly type = "date";
|
|
484
|
-
readonly element: UiInputElement$
|
|
503
|
+
readonly element: UiInputElement$6;
|
|
504
|
+
readonly calendarIcon: lucide_angular.LucideIconData;
|
|
505
|
+
readonly previousMonthIcon: lucide_angular.LucideIconData;
|
|
506
|
+
readonly nextMonthIcon: lucide_angular.LucideIconData;
|
|
485
507
|
rows: number;
|
|
486
508
|
required: boolean;
|
|
487
509
|
fullWidth: boolean;
|
|
488
|
-
autocomplete
|
|
510
|
+
autocomplete: string;
|
|
489
511
|
readonly: boolean;
|
|
490
512
|
pattern?: string;
|
|
491
513
|
error?: string;
|
|
@@ -494,52 +516,129 @@ declare class UiDateInputComponent implements ControlValueAccessor {
|
|
|
494
516
|
value: string | number | null;
|
|
495
517
|
private static nextId;
|
|
496
518
|
private readonly generatedId;
|
|
519
|
+
visibleMonth: Date;
|
|
520
|
+
calendarView: CalendarView$1;
|
|
521
|
+
isCalendarOpen: boolean;
|
|
497
522
|
actionTriggered: EventEmitter<UiDynamicFormFieldAction>;
|
|
498
523
|
get controlId(): string;
|
|
499
524
|
private onChange;
|
|
500
525
|
onTouched: () => void;
|
|
501
526
|
writeValue(value: string | number | null): void;
|
|
527
|
+
get monthLabel(): string;
|
|
528
|
+
get monthName(): string;
|
|
529
|
+
get yearLabel(): number;
|
|
530
|
+
get monthOptions(): Array<{
|
|
531
|
+
value: number;
|
|
532
|
+
label: string;
|
|
533
|
+
}>;
|
|
534
|
+
get yearOptions(): number[];
|
|
535
|
+
get calendarDays(): CalendarDay$1[];
|
|
536
|
+
get displayValue(): string;
|
|
537
|
+
get selectedDate(): Date | null;
|
|
538
|
+
openCalendar(event: Event): void;
|
|
539
|
+
closeCalendar(): void;
|
|
540
|
+
showMonthPicker(event: Event): void;
|
|
541
|
+
showYearPicker(event: Event): void;
|
|
542
|
+
selectMonth(month: number, event: Event): void;
|
|
543
|
+
selectYear(year: number, event: Event): void;
|
|
544
|
+
changeMonth(offset: number, event: Event): void;
|
|
545
|
+
selectDate(dateValue: string, event: Event): void;
|
|
546
|
+
isSelected(dateValue: string): boolean;
|
|
547
|
+
isSelectedMonth(month: number): boolean;
|
|
548
|
+
isSelectedYear(year: number): boolean;
|
|
549
|
+
onDocumentClick(): void;
|
|
550
|
+
onEscape(): void;
|
|
502
551
|
registerOnChange(fn: (value: string | number | null) => void): void;
|
|
503
552
|
registerOnTouched(fn: () => void): void;
|
|
504
553
|
setDisabledState(isDisabled: boolean): void;
|
|
505
554
|
onValueChange(value: string): void;
|
|
555
|
+
allowDateKey(event: KeyboardEvent): void;
|
|
556
|
+
private applyDateMask;
|
|
506
557
|
triggerAction(action: UiDynamicFormFieldAction): void;
|
|
558
|
+
private startOfMonth;
|
|
559
|
+
private parseDate;
|
|
560
|
+
private parseInputDate;
|
|
561
|
+
private toDateValue;
|
|
507
562
|
static ɵfac: i0.ɵɵFactoryDeclaration<UiDateInputComponent, never>;
|
|
508
563
|
static ɵcmp: i0.ɵɵComponentDeclaration<UiDateInputComponent, "forms-date-input", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "required": { "alias": "required"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "error": { "alias": "error"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, { "actionTriggered": "actionTriggered"; }, never, never, true, never>;
|
|
509
564
|
}
|
|
510
565
|
|
|
511
|
-
|
|
566
|
+
interface CalendarDay {
|
|
567
|
+
date: string;
|
|
568
|
+
day: number;
|
|
569
|
+
currentMonth: boolean;
|
|
570
|
+
}
|
|
571
|
+
type CalendarView = 'days' | 'months' | 'years';
|
|
512
572
|
declare class UiDatetimeInputComponent implements ControlValueAccessor {
|
|
513
573
|
private readonly cdr;
|
|
574
|
+
private readonly popupService;
|
|
575
|
+
private readonly closeActivePopup;
|
|
514
576
|
label?: string;
|
|
515
577
|
hint?: string;
|
|
516
578
|
placeholder?: string;
|
|
517
579
|
name?: string;
|
|
518
580
|
id?: string;
|
|
519
|
-
readonly type = "datetime-local";
|
|
520
|
-
readonly element: UiInputElement$6;
|
|
521
581
|
rows: number;
|
|
522
582
|
required: boolean;
|
|
523
583
|
fullWidth: boolean;
|
|
524
|
-
autocomplete
|
|
584
|
+
autocomplete: string;
|
|
525
585
|
readonly: boolean;
|
|
526
586
|
pattern?: string;
|
|
527
587
|
error?: string;
|
|
528
588
|
actions: UiDynamicFormFieldAction[];
|
|
589
|
+
readonly type = "datetime-local";
|
|
590
|
+
readonly calendarIcon: lucide_angular.LucideIconData;
|
|
591
|
+
readonly previousMonthIcon: lucide_angular.LucideIconData;
|
|
592
|
+
readonly nextMonthIcon: lucide_angular.LucideIconData;
|
|
529
593
|
disabled: boolean;
|
|
530
594
|
value: string | number | null;
|
|
595
|
+
isCalendarOpen: boolean;
|
|
596
|
+
calendarView: CalendarView;
|
|
597
|
+
visibleMonth: Date;
|
|
598
|
+
selectedHour: number;
|
|
599
|
+
selectedMinute: number;
|
|
531
600
|
private static nextId;
|
|
532
601
|
private readonly generatedId;
|
|
533
602
|
actionTriggered: EventEmitter<UiDynamicFormFieldAction>;
|
|
534
|
-
get controlId(): string;
|
|
535
603
|
private onChange;
|
|
536
604
|
onTouched: () => void;
|
|
605
|
+
get controlId(): string;
|
|
606
|
+
get selectedDate(): Date | null;
|
|
607
|
+
get displayValue(): string;
|
|
608
|
+
get monthName(): string;
|
|
609
|
+
get yearLabel(): number;
|
|
610
|
+
get monthOptions(): Array<{
|
|
611
|
+
value: number;
|
|
612
|
+
label: string;
|
|
613
|
+
}>;
|
|
614
|
+
get yearOptions(): number[];
|
|
615
|
+
get calendarDays(): CalendarDay[];
|
|
537
616
|
writeValue(value: string | number | null): void;
|
|
538
617
|
registerOnChange(fn: (value: string | number | null) => void): void;
|
|
539
618
|
registerOnTouched(fn: () => void): void;
|
|
540
|
-
setDisabledState(
|
|
541
|
-
|
|
619
|
+
setDisabledState(disabled: boolean): void;
|
|
620
|
+
openCalendar(event: Event): void;
|
|
621
|
+
closeCalendar(): void;
|
|
622
|
+
changeMonth(offset: number, event: Event): void;
|
|
623
|
+
showMonthPicker(event: Event): void;
|
|
624
|
+
showYearPicker(event: Event): void;
|
|
625
|
+
selectMonth(month: number, event: Event): void;
|
|
626
|
+
selectYear(year: number, event: Event): void;
|
|
627
|
+
selectDate(dateValue: string, event: Event): void;
|
|
628
|
+
setDateTime(dateValue: string, close?: boolean): void;
|
|
629
|
+
onTimeChange(): void;
|
|
630
|
+
onValueChange(input: string): void;
|
|
631
|
+
allowDateKey(event: KeyboardEvent): void;
|
|
632
|
+
private applyMask;
|
|
633
|
+
isSelected(date: string): boolean;
|
|
634
|
+
isSelectedMonth(month: number): boolean;
|
|
635
|
+
isSelectedYear(year: number): boolean;
|
|
636
|
+
onDocumentClick(): void;
|
|
637
|
+
onEscape(): void;
|
|
542
638
|
triggerAction(action: UiDynamicFormFieldAction): void;
|
|
639
|
+
private startOfMonth;
|
|
640
|
+
private parseDate;
|
|
641
|
+
private toDateValue;
|
|
543
642
|
static ɵfac: i0.ɵɵFactoryDeclaration<UiDatetimeInputComponent, never>;
|
|
544
643
|
static ɵcmp: i0.ɵɵComponentDeclaration<UiDatetimeInputComponent, "forms-datetime-input", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "required": { "alias": "required"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "error": { "alias": "error"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, { "actionTriggered": "actionTriggered"; }, never, never, true, never>;
|
|
545
644
|
}
|
|
@@ -663,6 +762,7 @@ declare class UiNumberInputComponent implements ControlValueAccessor {
|
|
|
663
762
|
registerOnTouched(fn: () => void): void;
|
|
664
763
|
setDisabledState(isDisabled: boolean): void;
|
|
665
764
|
onValueChange(value: string): void;
|
|
765
|
+
preventWheelChange(event: WheelEvent): void;
|
|
666
766
|
triggerAction(action: UiDynamicFormFieldAction): void;
|
|
667
767
|
static ɵfac: i0.ɵɵFactoryDeclaration<UiNumberInputComponent, never>;
|
|
668
768
|
static ɵcmp: i0.ɵɵComponentDeclaration<UiNumberInputComponent, "forms-number-input", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "required": { "alias": "required"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "error": { "alias": "error"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, { "actionTriggered": "actionTriggered"; }, never, never, true, never>;
|
|
@@ -677,6 +777,8 @@ declare class UiPasswordInputComponent implements ControlValueAccessor {
|
|
|
677
777
|
name?: string;
|
|
678
778
|
id?: string;
|
|
679
779
|
readonly type = "password";
|
|
780
|
+
readonly showPasswordIcon: lucide_angular.LucideIconData;
|
|
781
|
+
readonly hidePasswordIcon: lucide_angular.LucideIconData;
|
|
680
782
|
readonly element: UiInputElement$2;
|
|
681
783
|
rows: number;
|
|
682
784
|
required: boolean;
|
|
@@ -687,6 +789,7 @@ declare class UiPasswordInputComponent implements ControlValueAccessor {
|
|
|
687
789
|
error?: string;
|
|
688
790
|
actions: UiDynamicFormFieldAction[];
|
|
689
791
|
disabled: boolean;
|
|
792
|
+
isPasswordVisible: boolean;
|
|
690
793
|
value: string | number | null;
|
|
691
794
|
private static nextId;
|
|
692
795
|
private readonly generatedId;
|
|
@@ -699,6 +802,7 @@ declare class UiPasswordInputComponent implements ControlValueAccessor {
|
|
|
699
802
|
registerOnTouched(fn: () => void): void;
|
|
700
803
|
setDisabledState(isDisabled: boolean): void;
|
|
701
804
|
onValueChange(value: string): void;
|
|
805
|
+
togglePassword(event: Event): void;
|
|
702
806
|
triggerAction(action: UiDynamicFormFieldAction): void;
|
|
703
807
|
static ɵfac: i0.ɵɵFactoryDeclaration<UiPasswordInputComponent, never>;
|
|
704
808
|
static ɵcmp: i0.ɵɵComponentDeclaration<UiPasswordInputComponent, "forms-password-input", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "required": { "alias": "required"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "error": { "alias": "error"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, { "actionTriggered": "actionTriggered"; }, never, never, true, never>;
|