@corp-products/ui-components 2.0.9 → 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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i1$2 from '@angular/common';
|
|
2
|
-
import { CommonModule, NgClass, NgTemplateOutlet,
|
|
2
|
+
import { CommonModule, NgClass, NgTemplateOutlet, NgIf, JsonPipe, NgStyle, SlicePipe, Location, NgComponentOutlet } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { EventEmitter, Output, Input, ViewEncapsulation, Component, ChangeDetectionStrategy, Pipe, inject, Injectable, InjectionToken, Injector, createComponent } from '@angular/core';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
@@ -12,27 +12,27 @@ import * as i1$3 from '@ngx-translate/core';
|
|
|
12
12
|
import { TranslateModule, TranslateService, TranslatePipe } from '@ngx-translate/core';
|
|
13
13
|
import { filter, Subject, takeUntil, Subscription, BehaviorSubject } from 'rxjs';
|
|
14
14
|
import { Popover } from 'primeng/popover';
|
|
15
|
-
import * as i2
|
|
15
|
+
import * as i2 from 'primeng/api';
|
|
16
16
|
import { PrimeTemplate } from 'primeng/api';
|
|
17
17
|
import { Drawer } from 'primeng/drawer';
|
|
18
18
|
import { AvatarModule } from 'primeng/avatar';
|
|
19
19
|
import { DialogService, DynamicDialogConfig, DynamicDialogRef, DynamicDialogModule } from 'primeng/dynamicdialog';
|
|
20
20
|
import * as i1$4 from '@angular/forms';
|
|
21
21
|
import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
22
|
-
import
|
|
22
|
+
import { AutoComplete } from 'primeng/autocomplete';
|
|
23
|
+
import { DatePicker, DatePickerModule } from 'primeng/datepicker';
|
|
24
|
+
import * as i3$1 from 'primeng/floatlabel';
|
|
23
25
|
import { FloatLabelModule } from 'primeng/floatlabel';
|
|
24
26
|
import { InputText } from 'primeng/inputtext';
|
|
25
27
|
import { Textarea } from 'primeng/textarea';
|
|
26
|
-
import
|
|
27
|
-
import * as i2$1 from 'primeng/multiselect';
|
|
28
|
-
import { MultiSelectModule } from 'primeng/multiselect';
|
|
29
|
-
import { DatePicker, DatePickerModule } from 'primeng/datepicker';
|
|
30
|
-
import { AutoComplete } from 'primeng/autocomplete';
|
|
31
|
-
import * as i2$3 from 'primeng/selectbutton';
|
|
28
|
+
import * as i2$1 from 'primeng/selectbutton';
|
|
32
29
|
import { SelectButtonModule } from 'primeng/selectbutton';
|
|
30
|
+
import * as i2$2 from 'primeng/multiselect';
|
|
31
|
+
import { MultiSelectModule } from 'primeng/multiselect';
|
|
32
|
+
import { Select } from 'primeng/select';
|
|
33
33
|
import * as i1$5 from 'primeng/toggleswitch';
|
|
34
34
|
import { ToggleSwitchModule } from 'primeng/toggleswitch';
|
|
35
|
-
import * as i2$
|
|
35
|
+
import * as i2$3 from 'primeng/accordion';
|
|
36
36
|
import { AccordionModule } from 'primeng/accordion';
|
|
37
37
|
import { DividerModule } from 'primeng/divider';
|
|
38
38
|
import { Breadcrumb } from 'primeng/breadcrumb';
|
|
@@ -302,6 +302,17 @@ var FormFieldTypeEnum;
|
|
|
302
302
|
FormFieldTypeEnum["SELECT_BUTTON"] = "select-button";
|
|
303
303
|
})(FormFieldTypeEnum || (FormFieldTypeEnum = {}));
|
|
304
304
|
|
|
305
|
+
class FormUtils {
|
|
306
|
+
static getFormControl(controlName, form) {
|
|
307
|
+
if (!form)
|
|
308
|
+
throw new Error(`Form is not initialized.`);
|
|
309
|
+
const formControl = form.get(controlName);
|
|
310
|
+
if (!formControl)
|
|
311
|
+
throw new Error(`There's no form control with given name. '${controlName}'`);
|
|
312
|
+
return formControl;
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
|
|
305
316
|
var BasicErrorKeysEnum;
|
|
306
317
|
(function (BasicErrorKeysEnum) {
|
|
307
318
|
BasicErrorKeysEnum["required"] = "REQUIRED";
|
|
@@ -459,123 +470,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
459
470
|
type: Input
|
|
460
471
|
}] } });
|
|
461
472
|
|
|
462
|
-
class
|
|
463
|
-
type = 'text';
|
|
464
|
-
contentType = 'text';
|
|
465
|
-
prefix;
|
|
466
|
-
rows = 2;
|
|
467
|
-
cols = 20;
|
|
468
|
-
autoResize = true;
|
|
469
|
-
basicInput;
|
|
470
|
-
noStyle;
|
|
471
|
-
hideOptionalLabel;
|
|
472
|
-
inputDirection = 'inherit';
|
|
473
|
-
variant = 'over';
|
|
474
|
-
constructor() {
|
|
475
|
-
super();
|
|
476
|
-
}
|
|
477
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
478
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required && !hideOptionalLabel) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\"></textarea>\r\n }\r\n @case ('text-floating') {\r\n <p-floatlabel [variant]=\"variant\">\r\n <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">{{ label }}</label>\r\n </p-floatlabel>\r\n }\r\n @default {\r\n <input [id]=\"inputId\" [type]=\"contentType\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n [ngStyle]=\"{'direction': inputDirection || 'inherit', 'text-align': 'right'}\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n }\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
479
|
-
}
|
|
480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputComponent, decorators: [{
|
|
481
|
-
type: Component,
|
|
482
|
-
args: [{ selector: 'stc-input', standalone: true, imports: [
|
|
483
|
-
ReactiveFormsModule,
|
|
484
|
-
InputText,
|
|
485
|
-
Textarea,
|
|
486
|
-
ValidationErrorsPipe,
|
|
487
|
-
NgClass,
|
|
488
|
-
NgStyle,
|
|
489
|
-
TranslatePipe,
|
|
490
|
-
FloatLabelModule,
|
|
491
|
-
], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required && !hideOptionalLabel) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\"></textarea>\r\n }\r\n @case ('text-floating') {\r\n <p-floatlabel [variant]=\"variant\">\r\n <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">{{ label }}</label>\r\n </p-floatlabel>\r\n }\r\n @default {\r\n <input [id]=\"inputId\" [type]=\"contentType\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n [ngStyle]=\"{'direction': inputDirection || 'inherit', 'text-align': 'right'}\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n }\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}\n"] }]
|
|
492
|
-
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
493
|
-
type: Input
|
|
494
|
-
}], contentType: [{
|
|
495
|
-
type: Input
|
|
496
|
-
}], prefix: [{
|
|
497
|
-
type: Input
|
|
498
|
-
}], rows: [{
|
|
499
|
-
type: Input
|
|
500
|
-
}], cols: [{
|
|
501
|
-
type: Input
|
|
502
|
-
}], autoResize: [{
|
|
503
|
-
type: Input
|
|
504
|
-
}], basicInput: [{
|
|
505
|
-
type: Input
|
|
506
|
-
}], noStyle: [{
|
|
507
|
-
type: Input
|
|
508
|
-
}], hideOptionalLabel: [{
|
|
509
|
-
type: Input
|
|
510
|
-
}], inputDirection: [{
|
|
511
|
-
type: Input
|
|
512
|
-
}], variant: [{
|
|
513
|
-
type: Input
|
|
514
|
-
}] } });
|
|
515
|
-
|
|
516
|
-
class SelectComponent extends BaseInputComponent {
|
|
473
|
+
class AutoCompleteComponent extends BaseInputComponent {
|
|
517
474
|
selectedItemTemplate = null;
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
filter = false;
|
|
525
|
-
multiple = false;
|
|
526
|
-
filterBy;
|
|
527
|
-
selectedItemsLabel;
|
|
475
|
+
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
476
|
+
onSearch = new EventEmitter();
|
|
477
|
+
selectOption = new EventEmitter();
|
|
478
|
+
items = [];
|
|
479
|
+
minLengthToSearch = 3;
|
|
480
|
+
delay = 300; // default value
|
|
528
481
|
basicInput;
|
|
529
|
-
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
530
|
-
change = new EventEmitter();
|
|
531
482
|
constructor() {
|
|
532
483
|
super();
|
|
533
484
|
}
|
|
534
|
-
|
|
535
|
-
this.
|
|
485
|
+
search(event) {
|
|
486
|
+
this.onSearch.emit(event.query);
|
|
536
487
|
}
|
|
537
|
-
|
|
538
|
-
|
|
488
|
+
onSelect(event) {
|
|
489
|
+
this.selectOption.emit(event);
|
|
490
|
+
}
|
|
491
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
492
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AutoCompleteComponent, isStandalone: true, selector: "stc-auto-complete", inputs: { selectedItemTemplate: "selectedItemTemplate", items: "items", minLengthToSearch: "minLengthToSearch", delay: "delay", basicInput: "basicInput" }, outputs: { onSearch: "onSearch", selectOption: "selectOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n <p-auto-complete\r\n (completeMethod)=\"search($event)\"\r\n (onSelect)=\"onSelect($event)\"\r\n [delay]=\"delay\"\r\n [disabled]=\"disabled\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n [minLength]=\"minLengthToSearch\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n [placeholder]=\"placeholder\"\r\n [styleClass]=\"'w-full'\"\r\n [suggestions]=\"items\">\r\n <ng-template let-item pTemplate=\"item\">\r\n @if (selectedItemTemplate) {\r\n <ng-container\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n />\r\n }\r\n </ng-template>\r\n </p-auto-complete>\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
539
493
|
}
|
|
540
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type:
|
|
494
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutoCompleteComponent, decorators: [{
|
|
541
495
|
type: Component,
|
|
542
|
-
args: [{ selector: "stc-
|
|
543
|
-
FormsModule,
|
|
544
|
-
Select,
|
|
496
|
+
args: [{ selector: "stc-auto-complete", standalone: true, imports: [
|
|
545
497
|
ReactiveFormsModule,
|
|
546
|
-
|
|
547
|
-
NgTemplateOutlet,
|
|
498
|
+
AutoComplete,
|
|
548
499
|
PrimeTemplate,
|
|
500
|
+
NgIf,
|
|
501
|
+
NgTemplateOutlet,
|
|
502
|
+
NgClass,
|
|
503
|
+
JsonPipe,
|
|
549
504
|
ValidationErrorsPipe,
|
|
550
|
-
MultiSelectModule,
|
|
551
505
|
TranslatePipe
|
|
552
|
-
], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n
|
|
506
|
+
], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n <p-auto-complete\r\n (completeMethod)=\"search($event)\"\r\n (onSelect)=\"onSelect($event)\"\r\n [delay]=\"delay\"\r\n [disabled]=\"disabled\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n [minLength]=\"minLengthToSearch\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n [placeholder]=\"placeholder\"\r\n [styleClass]=\"'w-full'\"\r\n [suggestions]=\"items\">\r\n <ng-template let-item pTemplate=\"item\">\r\n @if (selectedItemTemplate) {\r\n <ng-container\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n />\r\n }\r\n </ng-template>\r\n </p-auto-complete>\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n\r\n</div>\r\n" }]
|
|
553
507
|
}], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
|
|
554
508
|
type: Input
|
|
555
|
-
}],
|
|
556
|
-
type:
|
|
557
|
-
}],
|
|
558
|
-
type:
|
|
559
|
-
}],
|
|
560
|
-
type: Input
|
|
561
|
-
}], checkmark: [{
|
|
562
|
-
type: Input
|
|
563
|
-
}], showClear: [{
|
|
564
|
-
type: Input
|
|
565
|
-
}], editable: [{
|
|
566
|
-
type: Input
|
|
567
|
-
}], filter: [{
|
|
568
|
-
type: Input
|
|
569
|
-
}], multiple: [{
|
|
509
|
+
}], onSearch: [{
|
|
510
|
+
type: Output
|
|
511
|
+
}], selectOption: [{
|
|
512
|
+
type: Output
|
|
513
|
+
}], items: [{
|
|
570
514
|
type: Input
|
|
571
|
-
}],
|
|
515
|
+
}], minLengthToSearch: [{
|
|
572
516
|
type: Input
|
|
573
|
-
}],
|
|
517
|
+
}], delay: [{
|
|
574
518
|
type: Input
|
|
575
519
|
}], basicInput: [{
|
|
576
520
|
type: Input
|
|
577
|
-
}], change: [{
|
|
578
|
-
type: Output
|
|
579
521
|
}] } });
|
|
580
522
|
|
|
581
523
|
class DatePickerComponent extends BaseInputComponent {
|
|
@@ -589,6 +531,7 @@ class DatePickerComponent extends BaseInputComponent {
|
|
|
589
531
|
nowTime = new Date();
|
|
590
532
|
selectionMode = 'single';
|
|
591
533
|
onAfterClearDate = new EventEmitter();
|
|
534
|
+
variant = 'over';
|
|
592
535
|
constructor() {
|
|
593
536
|
super();
|
|
594
537
|
}
|
|
@@ -603,7 +546,7 @@ class DatePickerComponent extends BaseInputComponent {
|
|
|
603
546
|
this.onAfterClearDate.emit();
|
|
604
547
|
}
|
|
605
548
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
606
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", selectionMode: "selectionMode" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\"
|
|
549
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", selectionMode: "selectionMode", variant: "variant" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"control\" [iconDisplay]=\"'input'\"\r\n [showClear]=\"showClear\" (onClear)=\"afterClearDate()\" [inputId]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n [styleClass]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
|
|
607
550
|
}
|
|
608
551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
609
552
|
type: Component,
|
|
@@ -615,7 +558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
615
558
|
DatePickerModule,
|
|
616
559
|
ValidationErrorsPipe,
|
|
617
560
|
TranslatePipe,
|
|
618
|
-
|
|
561
|
+
FloatLabelModule,
|
|
562
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"control\" [iconDisplay]=\"'input'\"\r\n [showClear]=\"showClear\" (onClear)=\"afterClearDate()\" [inputId]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n [styleClass]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: [".p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}\n"] }]
|
|
619
563
|
}], ctorParameters: () => [], propDecorators: { showIcon: [{
|
|
620
564
|
type: Input
|
|
621
565
|
}], showClear: [{
|
|
@@ -634,56 +578,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
634
578
|
type: Input
|
|
635
579
|
}], onAfterClearDate: [{
|
|
636
580
|
type: Output
|
|
581
|
+
}], variant: [{
|
|
582
|
+
type: Input
|
|
637
583
|
}] } });
|
|
638
584
|
|
|
639
|
-
class
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
delay = 300; // default value
|
|
585
|
+
class InputComponent extends BaseInputComponent {
|
|
586
|
+
type = 'text';
|
|
587
|
+
contentType = 'text';
|
|
588
|
+
prefix;
|
|
589
|
+
rows = 2;
|
|
590
|
+
cols = 20;
|
|
591
|
+
autoResize = true;
|
|
647
592
|
basicInput;
|
|
593
|
+
noStyle;
|
|
594
|
+
hideOptionalLabel;
|
|
595
|
+
inputDirection = 'inherit';
|
|
596
|
+
variant = 'over';
|
|
648
597
|
constructor() {
|
|
649
598
|
super();
|
|
650
599
|
}
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
}
|
|
654
|
-
onSelect(event) {
|
|
655
|
-
this.selectOption.emit(event);
|
|
656
|
-
}
|
|
657
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
658
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AutoCompleteComponent, isStandalone: true, selector: "stc-auto-complete", inputs: { selectedItemTemplate: "selectedItemTemplate", items: "items", minLengthToSearch: "minLengthToSearch", delay: "delay", basicInput: "basicInput" }, outputs: { onSearch: "onSearch", selectOption: "selectOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n <p-auto-complete\r\n (completeMethod)=\"search($event)\"\r\n (onSelect)=\"onSelect($event)\"\r\n [delay]=\"delay\"\r\n [disabled]=\"disabled\"\r\n [formControl]=\"control\"\r\n [id]=\"inputId\"\r\n [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n [minLength]=\"minLengthToSearch\"\r\n [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n [placeholder]=\"placeholder\"\r\n [styleClass]=\"'w-full'\"\r\n [suggestions]=\"items\">\r\n <ng-template let-item pTemplate=\"item\">\r\n @if (selectedItemTemplate) {\r\n <ng-container\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n [ngTemplateOutlet]=\"selectedItemTemplate\"\r\n />\r\n }\r\n </ng-template>\r\n </p-auto-complete>\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
600
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
601
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if (!required && !hideOptionalLabel) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\"></textarea>\r\n }\r\n @default {\r\n <p-floatlabel [variant]=\"variant\">\r\n <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n\r\n\r\n }\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
659
602
|
}
|
|
660
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type:
|
|
603
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputComponent, decorators: [{
|
|
661
604
|
type: Component,
|
|
662
|
-
args: [{ selector:
|
|
605
|
+
args: [{ selector: 'stc-input', standalone: true, imports: [
|
|
663
606
|
ReactiveFormsModule,
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
NgIf,
|
|
667
|
-
NgTemplateOutlet,
|
|
668
|
-
NgClass,
|
|
669
|
-
JsonPipe,
|
|
607
|
+
InputText,
|
|
608
|
+
Textarea,
|
|
670
609
|
ValidationErrorsPipe,
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
610
|
+
NgClass,
|
|
611
|
+
NgStyle,
|
|
612
|
+
TranslatePipe,
|
|
613
|
+
FloatLabelModule,
|
|
614
|
+
], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n @if (!required && !hideOptionalLabel) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n }\r\n <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\"></textarea>\r\n }\r\n @default {\r\n <p-floatlabel [variant]=\"variant\">\r\n <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n\r\n\r\n }\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}\n"] }]
|
|
615
|
+
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
674
616
|
type: Input
|
|
675
|
-
}],
|
|
676
|
-
type: Output
|
|
677
|
-
}], selectOption: [{
|
|
678
|
-
type: Output
|
|
679
|
-
}], items: [{
|
|
617
|
+
}], contentType: [{
|
|
680
618
|
type: Input
|
|
681
|
-
}],
|
|
619
|
+
}], prefix: [{
|
|
682
620
|
type: Input
|
|
683
|
-
}],
|
|
621
|
+
}], rows: [{
|
|
622
|
+
type: Input
|
|
623
|
+
}], cols: [{
|
|
624
|
+
type: Input
|
|
625
|
+
}], autoResize: [{
|
|
684
626
|
type: Input
|
|
685
627
|
}], basicInput: [{
|
|
686
628
|
type: Input
|
|
629
|
+
}], noStyle: [{
|
|
630
|
+
type: Input
|
|
631
|
+
}], hideOptionalLabel: [{
|
|
632
|
+
type: Input
|
|
633
|
+
}], inputDirection: [{
|
|
634
|
+
type: Input
|
|
635
|
+
}], variant: [{
|
|
636
|
+
type: Input
|
|
687
637
|
}] } });
|
|
688
638
|
|
|
689
639
|
class SelectButtonComponent extends BaseInputComponent {
|
|
@@ -694,7 +644,7 @@ class SelectButtonComponent extends BaseInputComponent {
|
|
|
694
644
|
this.onChange.emit(e.value);
|
|
695
645
|
}
|
|
696
646
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
697
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SelectButtonComponent, isStandalone: true, selector: "stc-select-button", inputs: { options: "options", title: "title" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n <div class=\"col-span-12\">\r\n <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n <p-selectButton [disabled]=\"disabled\"\r\n [options]=\"options\"\r\n [formControl]=\"control\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n class=\"rounded\"\r\n [styleClass]=\"'full-width'\"\r\n (onChange)=\"changeValue($event)\">\r\n <ng-template let-item class=\"flex w-100\">\r\n <div class=\"col-span-4\">\r\n <span>{{ item.value }}</span>\r\n </div>\r\n </ng-template>\r\n </p-selectButton>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$
|
|
647
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: SelectButtonComponent, isStandalone: true, selector: "stc-select-button", inputs: { options: "options", title: "title" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n <div class=\"col-span-12\">\r\n <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n <p-selectButton [disabled]=\"disabled\"\r\n [options]=\"options\"\r\n [formControl]=\"control\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n class=\"rounded\"\r\n [styleClass]=\"'full-width'\"\r\n (onChange)=\"changeValue($event)\">\r\n <ng-template let-item class=\"flex w-100\">\r\n <div class=\"col-span-4\">\r\n <span>{{ item.value }}</span>\r\n </div>\r\n </ng-template>\r\n </p-selectButton>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
698
648
|
}
|
|
699
649
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectButtonComponent, decorators: [{
|
|
700
650
|
type: Component,
|
|
@@ -707,6 +657,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
707
657
|
type: Input
|
|
708
658
|
}] } });
|
|
709
659
|
|
|
660
|
+
class SelectComponent extends BaseInputComponent {
|
|
661
|
+
selectedItemTemplate = null;
|
|
662
|
+
optionTemplate = null;
|
|
663
|
+
options;
|
|
664
|
+
optionLabel;
|
|
665
|
+
checkmark = true;
|
|
666
|
+
showClear = false;
|
|
667
|
+
editable = false;
|
|
668
|
+
filter = false;
|
|
669
|
+
multiple = false;
|
|
670
|
+
filterBy;
|
|
671
|
+
selectedItemsLabel;
|
|
672
|
+
basicInput;
|
|
673
|
+
variant = 'over';
|
|
674
|
+
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
675
|
+
change = new EventEmitter();
|
|
676
|
+
constructor() {
|
|
677
|
+
super();
|
|
678
|
+
}
|
|
679
|
+
onChange(e) {
|
|
680
|
+
this.change.emit(e);
|
|
681
|
+
}
|
|
682
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
683
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: SelectComponent, isStandalone: true, selector: "stc-select", inputs: { selectedItemTemplate: "selectedItemTemplate", optionTemplate: "optionTemplate", options: "options", optionLabel: "optionLabel", checkmark: "checkmark", showClear: "showClear", editable: "editable", filter: "filter", multiple: "multiple", filterBy: "filterBy", selectedItemsLabel: "selectedItemsLabel", basicInput: "basicInput", variant: "variant" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n } @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n\r\n @if(multiple) {\r\n\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n\r\n <p-multiselect [disabled]=\"disabled\" [filterBy]=\"filterBy\" [filter]=\"filter\" [formControl]=\"control\" [id]=\"inputId\"\r\n [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [optionLabel]=\"optionLabel\"\r\n [options]=\"options\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [showClear]=\"showClear\" class=\"w-full\"\r\n [selectedItemsLabel]=\"selectedItemsLabel\" (onChange)=\"onChange($event)\" [ngClass]=\"{ 'basic-style': basicInput }\">\r\n\r\n\r\n @if(optionTemplate){\r\n <ng-template let-item #item>\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n\r\n\r\n <ng-template #dropdownicon>\r\n <i class=\"pi pi-map\"></i>\r\n </ng-template>\r\n\r\n\r\n </p-multiselect>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n </p-floatLabel>\r\n\r\n } @else {\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n <p-select [checkmark]=\"checkmark\" [disabled]=\"disabled\" [editable]=\"editable\" [filterBy]=\"filterBy\"\r\n [filter]=\"filter\" [formControl]=\"control\" [id]=\"inputId\" [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [optionLabel]=\"optionLabel\" [options]=\"options\"\r\n [placeholder]=\"placeholder\" [readonly]=\"readonly\" [showClear]=\"showClear\" class=\"w-full\"\r\n (onChange)=\"onChange($event)\" [ngClass]=\"{ 'basic-style': basicInput }\">\r\n\r\n\r\n @if (selectedItemTemplate) {\r\n <ng-template let-item pTemplate=\"item\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n </ng-template>\r\n }\r\n </p-select>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatLabel>\r\n }\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n } @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br />\r\n }\r\n </small>\r\n }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
684
|
+
}
|
|
685
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectComponent, decorators: [{
|
|
686
|
+
type: Component,
|
|
687
|
+
args: [{ selector: 'stc-select', standalone: true, imports: [
|
|
688
|
+
FormsModule,
|
|
689
|
+
Select,
|
|
690
|
+
ReactiveFormsModule,
|
|
691
|
+
NgClass,
|
|
692
|
+
NgTemplateOutlet,
|
|
693
|
+
PrimeTemplate,
|
|
694
|
+
ValidationErrorsPipe,
|
|
695
|
+
MultiSelectModule,
|
|
696
|
+
TranslatePipe,
|
|
697
|
+
FloatLabelModule,
|
|
698
|
+
], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n @if (label) {\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"isInvalid\">*</span>\r\n }\r\n </label>\r\n } @if (!required) {\r\n <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n }\r\n\r\n\r\n @if(multiple) {\r\n\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n\r\n <p-multiselect [disabled]=\"disabled\" [filterBy]=\"filterBy\" [filter]=\"filter\" [formControl]=\"control\" [id]=\"inputId\"\r\n [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [optionLabel]=\"optionLabel\"\r\n [options]=\"options\" [placeholder]=\"placeholder\" [readonly]=\"readonly\" [showClear]=\"showClear\" class=\"w-full\"\r\n [selectedItemsLabel]=\"selectedItemsLabel\" (onChange)=\"onChange($event)\" [ngClass]=\"{ 'basic-style': basicInput }\">\r\n\r\n\r\n @if(optionTemplate){\r\n <ng-template let-item #item>\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n </ng-template>\r\n }\r\n\r\n\r\n <ng-template #dropdownicon>\r\n <i class=\"pi pi-map\"></i>\r\n </ng-template>\r\n\r\n\r\n </p-multiselect>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"required\">*</span>\r\n }\r\n </label>\r\n\r\n </p-floatLabel>\r\n\r\n } @else {\r\n <p-floatLabel [variant]=\"variant\">\r\n\r\n <p-select [checkmark]=\"checkmark\" [disabled]=\"disabled\" [editable]=\"editable\" [filterBy]=\"filterBy\"\r\n [filter]=\"filter\" [formControl]=\"control\" [id]=\"inputId\" [name]=\"name\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [optionLabel]=\"optionLabel\" [options]=\"options\"\r\n [placeholder]=\"placeholder\" [readonly]=\"readonly\" [showClear]=\"showClear\" class=\"w-full\"\r\n (onChange)=\"onChange($event)\" [ngClass]=\"{ 'basic-style': basicInput }\">\r\n\r\n\r\n @if (selectedItemTemplate) {\r\n <ng-template let-item pTemplate=\"item\">\r\n <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n </ng-template>\r\n }\r\n </p-select>\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-red-700]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatLabel>\r\n }\r\n\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n } @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error text-red-700\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br />\r\n }\r\n </small>\r\n }\r\n</div>" }]
|
|
699
|
+
}], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
|
|
700
|
+
type: Input
|
|
701
|
+
}], optionTemplate: [{
|
|
702
|
+
type: Input
|
|
703
|
+
}], options: [{
|
|
704
|
+
type: Input
|
|
705
|
+
}], optionLabel: [{
|
|
706
|
+
type: Input
|
|
707
|
+
}], checkmark: [{
|
|
708
|
+
type: Input
|
|
709
|
+
}], showClear: [{
|
|
710
|
+
type: Input
|
|
711
|
+
}], editable: [{
|
|
712
|
+
type: Input
|
|
713
|
+
}], filter: [{
|
|
714
|
+
type: Input
|
|
715
|
+
}], multiple: [{
|
|
716
|
+
type: Input
|
|
717
|
+
}], filterBy: [{
|
|
718
|
+
type: Input
|
|
719
|
+
}], selectedItemsLabel: [{
|
|
720
|
+
type: Input
|
|
721
|
+
}], basicInput: [{
|
|
722
|
+
type: Input
|
|
723
|
+
}], variant: [{
|
|
724
|
+
type: Input
|
|
725
|
+
}], change: [{
|
|
726
|
+
type: Output
|
|
727
|
+
}] } });
|
|
728
|
+
|
|
710
729
|
class SwitchComponent {
|
|
711
730
|
label;
|
|
712
731
|
key;
|
|
@@ -734,17 +753,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
734
753
|
type: Output
|
|
735
754
|
}] } });
|
|
736
755
|
|
|
737
|
-
class FormUtils {
|
|
738
|
-
static getFormControl(controlName, form) {
|
|
739
|
-
if (!form)
|
|
740
|
-
throw new Error(`Form is not initialized.`);
|
|
741
|
-
const formControl = form.get(controlName);
|
|
742
|
-
if (!formControl)
|
|
743
|
-
throw new Error(`There's no form control with given name. '${controlName}'`);
|
|
744
|
-
return formControl;
|
|
745
|
-
}
|
|
746
|
-
}
|
|
747
|
-
|
|
748
756
|
class DynamicFormComponent {
|
|
749
757
|
dynamicFormData;
|
|
750
758
|
inputsNames = [];
|
|
@@ -758,7 +766,7 @@ class DynamicFormComponent {
|
|
|
758
766
|
this.inputsNames = Object.keys(this.inputsMap || {});
|
|
759
767
|
}
|
|
760
768
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
761
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, ngImport: i0, template: "<div class=\"border-t mx-4 py-2\">\r\n <form [formGroup]=\"formGroup\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div\r\n [ngClass]=\"inputsMap[inputName].rowSize === 'half' ? 'col-span-6 md:col-span-6': 'col-span-12 md:col-span-12'\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker\r\n [minDate]=\"inputsMap[inputName]?.dateRange?.min\"\r\n [id]=\"inputsMap[inputName].inputId\"\r\n [control]=\"getFormControl(inputName, formGroup)\"\r\n [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\"\r\n [showIcon]=\"inputsMap[inputName].showIcon || true\"\r\n [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\"/>\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button\r\n [control]=\"getFormControl(inputName, formGroup)\"\r\n [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"/>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n </form>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
|
|
769
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, ngImport: i0, template: "<div class=\"border-t mx-4 py-2\">\r\n <form [formGroup]=\"formGroup\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div\r\n [ngClass]=\"inputsMap[inputName].rowSize === 'half' ? 'col-span-6 md:col-span-6': 'col-span-12 md:col-span-12'\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker\r\n [minDate]=\"inputsMap[inputName]?.dateRange?.min\"\r\n [id]=\"inputsMap[inputName].inputId\"\r\n [control]=\"getFormControl(inputName, formGroup)\"\r\n [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\"\r\n [showIcon]=\"inputsMap[inputName].showIcon || true\"\r\n [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\"/>\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button\r\n [control]=\"getFormControl(inputName, formGroup)\"\r\n [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"/>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n </form>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
|
|
762
770
|
}
|
|
763
771
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
764
772
|
type: Component,
|
|
@@ -839,7 +847,7 @@ class AppAccordionComponent {
|
|
|
839
847
|
contentBorderTop = true;
|
|
840
848
|
accordionPanelBorder = true;
|
|
841
849
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
842
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: AppAccordionComponent, isStandalone: true, selector: "app-accordion", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount", title: "title", contentBorderTop: "contentBorderTop", accordionPanelBorder: "accordionPanelBorder" }, ngImport: i0, template: "<p-accordion value=\"0\">\r\n <p-accordion-panel value=\"0\" [class.!border-0]=\"!accordionPanelBorder\">\r\n <p-accordion-header>\r\n <span class=\"flex items-center gap-2 w-full\">\r\n <app-ico-moon-card [iconClass]=\"'text-[24px] text-secondary'\" [iconName]=\"'font-icon-'+iconName\" />\r\n <span class=\"font-bold whitespace-nowrap\">{{title}}</span>\r\n </span>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <div [ngClass]=\"{'border-t-2 border-gray-light pt-2': contentBorderTop, }\">\r\n <ng-content></ng-content>\r\n </div>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$
|
|
850
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: AppAccordionComponent, isStandalone: true, selector: "app-accordion", inputs: { iconName: "iconName", iconClass: "iconClass", iconPathCount: "iconPathCount", title: "title", contentBorderTop: "contentBorderTop", accordionPanelBorder: "accordionPanelBorder" }, ngImport: i0, template: "<p-accordion value=\"0\">\r\n <p-accordion-panel value=\"0\" [class.!border-0]=\"!accordionPanelBorder\">\r\n <p-accordion-header>\r\n <span class=\"flex items-center gap-2 w-full\">\r\n <app-ico-moon-card [iconClass]=\"'text-[24px] text-secondary'\" [iconName]=\"'font-icon-'+iconName\" />\r\n <span class=\"font-bold whitespace-nowrap\">{{title}}</span>\r\n </span>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <div [ngClass]=\"{'border-t-2 border-gray-light pt-2': contentBorderTop, }\">\r\n <ng-content></ng-content>\r\n </div>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$3.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i2$3.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$3.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$3.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: IcoMoonIconComponent, selector: "app-ico-moon-card", inputs: ["iconName", "iconClass", "iconPathCount"] }] });
|
|
843
851
|
}
|
|
844
852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppAccordionComponent, decorators: [{
|
|
845
853
|
type: Component,
|
|
@@ -1073,9 +1081,9 @@ const SidebarConfigDefaults = {
|
|
|
1073
1081
|
dismissible: false,
|
|
1074
1082
|
closeOnEscape: false,
|
|
1075
1083
|
sidebarSize: "md",
|
|
1076
|
-
showCancelBtn:
|
|
1077
|
-
showSaveBtn:
|
|
1078
|
-
showSaveAndMoreBtn:
|
|
1084
|
+
showCancelBtn: false,
|
|
1085
|
+
showSaveBtn: false,
|
|
1086
|
+
showSaveAndMoreBtn: false,
|
|
1079
1087
|
actions: {
|
|
1080
1088
|
save: {},
|
|
1081
1089
|
saveAndMore: {
|