@corp-products/ui-components 2.0.8 → 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,22 +12,24 @@ 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 { AutoComplete } from 'primeng/autocomplete';
|
|
23
|
+
import { DatePicker, DatePickerModule } from 'primeng/datepicker';
|
|
24
|
+
import * as i3$1 from 'primeng/floatlabel';
|
|
25
|
+
import { FloatLabelModule } from 'primeng/floatlabel';
|
|
22
26
|
import { InputText } from 'primeng/inputtext';
|
|
23
27
|
import { Textarea } from 'primeng/textarea';
|
|
24
|
-
import
|
|
25
|
-
import * as i2 from 'primeng/multiselect';
|
|
26
|
-
import { MultiSelectModule } from 'primeng/multiselect';
|
|
27
|
-
import { DatePicker, DatePickerModule } from 'primeng/datepicker';
|
|
28
|
-
import { AutoComplete } from 'primeng/autocomplete';
|
|
29
|
-
import * as i2$2 from 'primeng/selectbutton';
|
|
28
|
+
import * as i2$1 from 'primeng/selectbutton';
|
|
30
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';
|
|
31
33
|
import * as i1$5 from 'primeng/toggleswitch';
|
|
32
34
|
import { ToggleSwitchModule } from 'primeng/toggleswitch';
|
|
33
35
|
import * as i2$3 from 'primeng/accordion';
|
|
@@ -300,6 +302,17 @@ var FormFieldTypeEnum;
|
|
|
300
302
|
FormFieldTypeEnum["SELECT_BUTTON"] = "select-button";
|
|
301
303
|
})(FormFieldTypeEnum || (FormFieldTypeEnum = {}));
|
|
302
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
|
+
|
|
303
316
|
var BasicErrorKeysEnum;
|
|
304
317
|
(function (BasicErrorKeysEnum) {
|
|
305
318
|
BasicErrorKeysEnum["required"] = "REQUIRED";
|
|
@@ -404,9 +417,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
404
417
|
|
|
405
418
|
class BaseInputComponent {
|
|
406
419
|
control;
|
|
407
|
-
name =
|
|
420
|
+
name = '';
|
|
408
421
|
label;
|
|
409
|
-
placeholder =
|
|
422
|
+
placeholder = '';
|
|
410
423
|
inputId;
|
|
411
424
|
readonly = false;
|
|
412
425
|
disabled = false;
|
|
@@ -419,7 +432,7 @@ class BaseInputComponent {
|
|
|
419
432
|
return this.control.invalid && this.control.touched;
|
|
420
433
|
}
|
|
421
434
|
ngOnInit() {
|
|
422
|
-
this.inputId = `input-${this.name +
|
|
435
|
+
this.inputId = `input-${this.name + '-' + Math.random().toString(36).substring(7)}`;
|
|
423
436
|
this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((v) => {
|
|
424
437
|
if (v) {
|
|
425
438
|
this.control.markAsTouched();
|
|
@@ -431,12 +444,12 @@ class BaseInputComponent {
|
|
|
431
444
|
this.destroy$.complete();
|
|
432
445
|
}
|
|
433
446
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BaseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
434
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { control: "control", name: "name", label: "label", placeholder: "placeholder", inputId: "inputId", readonly: "readonly", disabled: "disabled", hint: "hint" }, ngImport: i0, template:
|
|
447
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { control: "control", name: "name", label: "label", placeholder: "placeholder", inputId: "inputId", readonly: "readonly", disabled: "disabled", hint: "hint" }, ngImport: i0, template: '', isInline: true });
|
|
435
448
|
}
|
|
436
449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BaseInputComponent, decorators: [{
|
|
437
450
|
type: Component,
|
|
438
451
|
args: [{
|
|
439
|
-
template:
|
|
452
|
+
template: '',
|
|
440
453
|
}]
|
|
441
454
|
}], propDecorators: { control: [{
|
|
442
455
|
type: Input,
|
|
@@ -457,111 +470,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
457
470
|
type: Input
|
|
458
471
|
}] } });
|
|
459
472
|
|
|
460
|
-
class
|
|
461
|
-
type = "text";
|
|
462
|
-
contentType = "text";
|
|
463
|
-
prefix;
|
|
464
|
-
rows = 2;
|
|
465
|
-
cols = 20;
|
|
466
|
-
autoResize = true;
|
|
467
|
-
basicInput;
|
|
468
|
-
noStyle;
|
|
469
|
-
hideOptionalLabel;
|
|
470
|
-
inputDirection = "inherit";
|
|
471
|
-
constructor() {
|
|
472
|
-
super();
|
|
473
|
-
}
|
|
474
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
475
|
-
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" }, 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 @if (type !== 'textarea') {\r\n <input\r\n [id]=\"inputId\"\r\n [type]=\"contentType\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n [name]=\"name\"\r\n 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 />\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 } @else {\r\n <textarea\r\n [name]=\"name\"\r\n [id]=\"inputId\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n pTextarea\r\n [rows]=\"rows\"\r\n [cols]=\"cols\"\r\n [autoResize]=\"autoResize\"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\"\r\n ></textarea>\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>\r\n", 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: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
476
|
-
}
|
|
477
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputComponent, decorators: [{
|
|
478
|
-
type: Component,
|
|
479
|
-
args: [{ selector: "stc-input", standalone: true, imports: [ReactiveFormsModule, InputText, Textarea, ValidationErrorsPipe, NgClass, NgStyle, TranslatePipe], 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 @if (type !== 'textarea') {\r\n <input\r\n [id]=\"inputId\"\r\n [type]=\"contentType\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n [name]=\"name\"\r\n 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 />\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 } @else {\r\n <textarea\r\n [name]=\"name\"\r\n [id]=\"inputId\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n pTextarea\r\n [rows]=\"rows\"\r\n [cols]=\"cols\"\r\n [autoResize]=\"autoResize\"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\"\r\n ></textarea>\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>\r\n", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}\n"] }]
|
|
480
|
-
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
481
|
-
type: Input
|
|
482
|
-
}], contentType: [{
|
|
483
|
-
type: Input
|
|
484
|
-
}], prefix: [{
|
|
485
|
-
type: Input
|
|
486
|
-
}], rows: [{
|
|
487
|
-
type: Input
|
|
488
|
-
}], cols: [{
|
|
489
|
-
type: Input
|
|
490
|
-
}], autoResize: [{
|
|
491
|
-
type: Input
|
|
492
|
-
}], basicInput: [{
|
|
493
|
-
type: Input
|
|
494
|
-
}], noStyle: [{
|
|
495
|
-
type: Input
|
|
496
|
-
}], hideOptionalLabel: [{
|
|
497
|
-
type: Input
|
|
498
|
-
}], inputDirection: [{
|
|
499
|
-
type: Input
|
|
500
|
-
}] } });
|
|
501
|
-
|
|
502
|
-
class SelectComponent extends BaseInputComponent {
|
|
473
|
+
class AutoCompleteComponent extends BaseInputComponent {
|
|
503
474
|
selectedItemTemplate = null;
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
filter = false;
|
|
511
|
-
multiple = false;
|
|
512
|
-
filterBy;
|
|
513
|
-
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
|
|
514
481
|
basicInput;
|
|
515
|
-
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
516
|
-
change = new EventEmitter();
|
|
517
482
|
constructor() {
|
|
518
483
|
super();
|
|
519
484
|
}
|
|
520
|
-
|
|
521
|
-
this.
|
|
485
|
+
search(event) {
|
|
486
|
+
this.onSearch.emit(event.query);
|
|
522
487
|
}
|
|
523
|
-
|
|
524
|
-
|
|
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" }] });
|
|
525
493
|
}
|
|
526
|
-
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: [{
|
|
527
495
|
type: Component,
|
|
528
|
-
args: [{ selector: "stc-
|
|
529
|
-
FormsModule,
|
|
530
|
-
Select,
|
|
496
|
+
args: [{ selector: "stc-auto-complete", standalone: true, imports: [
|
|
531
497
|
ReactiveFormsModule,
|
|
532
|
-
|
|
533
|
-
NgTemplateOutlet,
|
|
498
|
+
AutoComplete,
|
|
534
499
|
PrimeTemplate,
|
|
500
|
+
NgIf,
|
|
501
|
+
NgTemplateOutlet,
|
|
502
|
+
NgClass,
|
|
503
|
+
JsonPipe,
|
|
535
504
|
ValidationErrorsPipe,
|
|
536
|
-
MultiSelectModule,
|
|
537
505
|
TranslatePipe
|
|
538
|
-
], 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" }]
|
|
539
507
|
}], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
|
|
540
508
|
type: Input
|
|
541
|
-
}],
|
|
542
|
-
type:
|
|
543
|
-
}],
|
|
544
|
-
type:
|
|
545
|
-
}],
|
|
546
|
-
type: Input
|
|
547
|
-
}], checkmark: [{
|
|
548
|
-
type: Input
|
|
549
|
-
}], showClear: [{
|
|
550
|
-
type: Input
|
|
551
|
-
}], editable: [{
|
|
552
|
-
type: Input
|
|
553
|
-
}], filter: [{
|
|
554
|
-
type: Input
|
|
555
|
-
}], multiple: [{
|
|
509
|
+
}], onSearch: [{
|
|
510
|
+
type: Output
|
|
511
|
+
}], selectOption: [{
|
|
512
|
+
type: Output
|
|
513
|
+
}], items: [{
|
|
556
514
|
type: Input
|
|
557
|
-
}],
|
|
515
|
+
}], minLengthToSearch: [{
|
|
558
516
|
type: Input
|
|
559
|
-
}],
|
|
517
|
+
}], delay: [{
|
|
560
518
|
type: Input
|
|
561
519
|
}], basicInput: [{
|
|
562
520
|
type: Input
|
|
563
|
-
}], change: [{
|
|
564
|
-
type: Output
|
|
565
521
|
}] } });
|
|
566
522
|
|
|
567
523
|
class DatePickerComponent extends BaseInputComponent {
|
|
@@ -575,6 +531,7 @@ class DatePickerComponent extends BaseInputComponent {
|
|
|
575
531
|
nowTime = new Date();
|
|
576
532
|
selectionMode = 'single';
|
|
577
533
|
onAfterClearDate = new EventEmitter();
|
|
534
|
+
variant = 'over';
|
|
578
535
|
constructor() {
|
|
579
536
|
super();
|
|
580
537
|
}
|
|
@@ -589,7 +546,7 @@ class DatePickerComponent extends BaseInputComponent {
|
|
|
589
546
|
this.onAfterClearDate.emit();
|
|
590
547
|
}
|
|
591
548
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
592
|
-
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 });
|
|
593
550
|
}
|
|
594
551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
595
552
|
type: Component,
|
|
@@ -601,7 +558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
601
558
|
DatePickerModule,
|
|
602
559
|
ValidationErrorsPipe,
|
|
603
560
|
TranslatePipe,
|
|
604
|
-
|
|
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"] }]
|
|
605
563
|
}], ctorParameters: () => [], propDecorators: { showIcon: [{
|
|
606
564
|
type: Input
|
|
607
565
|
}], showClear: [{
|
|
@@ -620,56 +578,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
620
578
|
type: Input
|
|
621
579
|
}], onAfterClearDate: [{
|
|
622
580
|
type: Output
|
|
581
|
+
}], variant: [{
|
|
582
|
+
type: Input
|
|
623
583
|
}] } });
|
|
624
584
|
|
|
625
|
-
class
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
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;
|
|
633
592
|
basicInput;
|
|
593
|
+
noStyle;
|
|
594
|
+
hideOptionalLabel;
|
|
595
|
+
inputDirection = 'inherit';
|
|
596
|
+
variant = 'over';
|
|
634
597
|
constructor() {
|
|
635
598
|
super();
|
|
636
599
|
}
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
}
|
|
640
|
-
onSelect(event) {
|
|
641
|
-
this.selectOption.emit(event);
|
|
642
|
-
}
|
|
643
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
644
|
-
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" }] });
|
|
645
602
|
}
|
|
646
|
-
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: [{
|
|
647
604
|
type: Component,
|
|
648
|
-
args: [{ selector:
|
|
605
|
+
args: [{ selector: 'stc-input', standalone: true, imports: [
|
|
649
606
|
ReactiveFormsModule,
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
NgIf,
|
|
653
|
-
NgTemplateOutlet,
|
|
654
|
-
NgClass,
|
|
655
|
-
JsonPipe,
|
|
607
|
+
InputText,
|
|
608
|
+
Textarea,
|
|
656
609
|
ValidationErrorsPipe,
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
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: [{
|
|
660
616
|
type: Input
|
|
661
|
-
}],
|
|
662
|
-
type: Output
|
|
663
|
-
}], selectOption: [{
|
|
664
|
-
type: Output
|
|
665
|
-
}], items: [{
|
|
617
|
+
}], contentType: [{
|
|
666
618
|
type: Input
|
|
667
|
-
}],
|
|
619
|
+
}], prefix: [{
|
|
668
620
|
type: Input
|
|
669
|
-
}],
|
|
621
|
+
}], rows: [{
|
|
622
|
+
type: Input
|
|
623
|
+
}], cols: [{
|
|
624
|
+
type: Input
|
|
625
|
+
}], autoResize: [{
|
|
670
626
|
type: Input
|
|
671
627
|
}], basicInput: [{
|
|
672
628
|
type: Input
|
|
629
|
+
}], noStyle: [{
|
|
630
|
+
type: Input
|
|
631
|
+
}], hideOptionalLabel: [{
|
|
632
|
+
type: Input
|
|
633
|
+
}], inputDirection: [{
|
|
634
|
+
type: Input
|
|
635
|
+
}], variant: [{
|
|
636
|
+
type: Input
|
|
673
637
|
}] } });
|
|
674
638
|
|
|
675
639
|
class SelectButtonComponent extends BaseInputComponent {
|
|
@@ -680,7 +644,7 @@ class SelectButtonComponent extends BaseInputComponent {
|
|
|
680
644
|
this.onChange.emit(e.value);
|
|
681
645
|
}
|
|
682
646
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
683
|
-
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 }] });
|
|
684
648
|
}
|
|
685
649
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SelectButtonComponent, decorators: [{
|
|
686
650
|
type: Component,
|
|
@@ -693,6 +657,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
693
657
|
type: Input
|
|
694
658
|
}] } });
|
|
695
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
|
+
|
|
696
729
|
class SwitchComponent {
|
|
697
730
|
label;
|
|
698
731
|
key;
|
|
@@ -720,17 +753,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
|
|
|
720
753
|
type: Output
|
|
721
754
|
}] } });
|
|
722
755
|
|
|
723
|
-
class FormUtils {
|
|
724
|
-
static getFormControl(controlName, form) {
|
|
725
|
-
if (!form)
|
|
726
|
-
throw new Error(`Form is not initialized.`);
|
|
727
|
-
const formControl = form.get(controlName);
|
|
728
|
-
if (!formControl)
|
|
729
|
-
throw new Error(`There's no form control with given name. '${controlName}'`);
|
|
730
|
-
return formControl;
|
|
731
|
-
}
|
|
732
|
-
}
|
|
733
|
-
|
|
734
756
|
class DynamicFormComponent {
|
|
735
757
|
dynamicFormData;
|
|
736
758
|
inputsNames = [];
|
|
@@ -744,7 +766,7 @@ class DynamicFormComponent {
|
|
|
744
766
|
this.inputsNames = Object.keys(this.inputsMap || {});
|
|
745
767
|
}
|
|
746
768
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
747
|
-
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" }] });
|
|
748
770
|
}
|
|
749
771
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
750
772
|
type: Component,
|
|
@@ -877,21 +899,20 @@ class AppBreadcrumbComponent {
|
|
|
877
899
|
activatedRoute;
|
|
878
900
|
router;
|
|
879
901
|
items;
|
|
880
|
-
|
|
902
|
+
isShown;
|
|
881
903
|
constructor(activatedRoute, router) {
|
|
882
904
|
this.activatedRoute = activatedRoute;
|
|
883
905
|
this.router = router;
|
|
884
906
|
}
|
|
885
907
|
ngOnInit() {
|
|
886
908
|
if (this.items) {
|
|
887
|
-
this.
|
|
909
|
+
this.isShown = true;
|
|
888
910
|
return;
|
|
889
911
|
}
|
|
890
|
-
this.router.events
|
|
891
|
-
.pipe(filter(event => event instanceof NavigationEnd))
|
|
892
|
-
.subscribe((e) => {
|
|
912
|
+
this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((e) => {
|
|
893
913
|
// remove duplicates
|
|
894
|
-
this.items = this._createBreadcrumbs(this.activatedRoute.root).filter((item, index, self) => index ===
|
|
914
|
+
this.items = this._createBreadcrumbs(this.activatedRoute.root).filter((item, index, self) => index ===
|
|
915
|
+
self.findIndex((t) => t.label === item.label && t.routerLink === item.routerLink));
|
|
895
916
|
this._checkHiddenBreadcrumb();
|
|
896
917
|
this._checkEmpty();
|
|
897
918
|
});
|
|
@@ -900,7 +921,7 @@ class AppBreadcrumbComponent {
|
|
|
900
921
|
const activeBreadcrumb = this.items?.find((item) => {
|
|
901
922
|
return item.routerLink === this.router.url;
|
|
902
923
|
});
|
|
903
|
-
this.
|
|
924
|
+
this.isShown = !!activeBreadcrumb?.isShown;
|
|
904
925
|
}
|
|
905
926
|
_createBreadcrumbs(activatedRoute, routerLink = '', breadcrumbs = []) {
|
|
906
927
|
const children = activatedRoute.children;
|
|
@@ -908,36 +929,42 @@ class AppBreadcrumbComponent {
|
|
|
908
929
|
return breadcrumbs;
|
|
909
930
|
}
|
|
910
931
|
for (const child of children) {
|
|
911
|
-
const routeURL = child.snapshot.url.map(segment => segment.path).join('/');
|
|
932
|
+
const routeURL = child.snapshot.url.map((segment) => segment.path).join('/');
|
|
912
933
|
if (routeURL !== '') {
|
|
913
934
|
routerLink += `/${routeURL}`;
|
|
914
935
|
}
|
|
915
|
-
let label = child.snapshot.data[
|
|
916
|
-
const notClickableBreadcrumb = !!child.snapshot.data[
|
|
917
|
-
const
|
|
918
|
-
const extraBreadcrumbs = child.snapshot.data[
|
|
936
|
+
let label = child.snapshot.data['breadcrumb'];
|
|
937
|
+
const notClickableBreadcrumb = !!child.snapshot.data['notClickableBreadcrumb'];
|
|
938
|
+
const isShown = !!child.snapshot.data['isShown'];
|
|
939
|
+
const extraBreadcrumbs = child.snapshot.data['extraBreadcrumbs'] || [];
|
|
919
940
|
if (!(typeof label === 'undefined' || label === null)) {
|
|
920
941
|
const data = activatedRoute.snapshot.firstChild?.data || {};
|
|
921
942
|
// Resolve dynamic breadcrumb label
|
|
922
|
-
if (label && label.startsWith(
|
|
923
|
-
label = this._getRecursiveKey(data, label.slice(1, -1).split(
|
|
943
|
+
if (label && label.startsWith('[') && label.endsWith(']')) {
|
|
944
|
+
label = this._getRecursiveKey(data, label.slice(1, -1).split('.'));
|
|
924
945
|
}
|
|
925
946
|
// Resolve dynamic URL parts
|
|
926
947
|
const resolveDynamicUrl = (route) => {
|
|
927
|
-
return route.replace(/\[([^\]]+)]/g, (_, key) => this._getRecursiveKey(data, key.split(
|
|
948
|
+
return route.replace(/\[([^\]]+)]/g, (_, key) => this._getRecursiveKey(data, key.split('.')) || '');
|
|
949
|
+
};
|
|
950
|
+
const mainBreadcrumb = {
|
|
951
|
+
label,
|
|
952
|
+
routerLink,
|
|
953
|
+
data,
|
|
954
|
+
notClickableBreadcrumb,
|
|
955
|
+
isShown,
|
|
928
956
|
};
|
|
929
|
-
const mainBreadcrumb = { label, routerLink, data, notClickableBreadcrumb, isShownBreadcrumb };
|
|
930
957
|
// Process extra breadcrumbs
|
|
931
958
|
const beforeBreadcrumbs = [];
|
|
932
959
|
const afterBreadcrumbs = [];
|
|
933
|
-
extraBreadcrumbs.forEach(extra => {
|
|
960
|
+
extraBreadcrumbs.forEach((extra) => {
|
|
934
961
|
let extraLabel = extra.label || '';
|
|
935
|
-
if (extraLabel.startsWith(
|
|
936
|
-
extraLabel = this._getRecursiveKey(data, extraLabel.slice(1, -1).split(
|
|
962
|
+
if (extraLabel.startsWith('[') && extraLabel.endsWith(']')) {
|
|
963
|
+
extraLabel = this._getRecursiveKey(data, extraLabel.slice(1, -1).split('.'));
|
|
937
964
|
}
|
|
938
965
|
const extraUrl = resolveDynamicUrl(extra.routerLink || '');
|
|
939
966
|
const extraBreadcrumb = { ...extra, label: extraLabel, routerLink: extraUrl };
|
|
940
|
-
if (extra.position ===
|
|
967
|
+
if (extra.position === 'before') {
|
|
941
968
|
beforeBreadcrumbs.push(extraBreadcrumb);
|
|
942
969
|
}
|
|
943
970
|
else {
|
|
@@ -953,9 +980,9 @@ class AppBreadcrumbComponent {
|
|
|
953
980
|
_checkEmpty() {
|
|
954
981
|
if (!this.items)
|
|
955
982
|
return;
|
|
956
|
-
const lastBreadcrumbVisibility = this.items[this.items.length - 1].
|
|
957
|
-
this.items = this.items.filter(b => b.label !== '');
|
|
958
|
-
this.items[this.items.length - 1].
|
|
983
|
+
const lastBreadcrumbVisibility = this.items[this.items.length - 1].isShown;
|
|
984
|
+
this.items = this.items.filter((b) => b.label !== '');
|
|
985
|
+
this.items[this.items.length - 1].isShown = lastBreadcrumbVisibility;
|
|
959
986
|
}
|
|
960
987
|
_getRecursiveKey(obj, keys) {
|
|
961
988
|
if (keys.length === 0) {
|
|
@@ -970,13 +997,12 @@ class AppBreadcrumbComponent {
|
|
|
970
997
|
}
|
|
971
998
|
return undefined;
|
|
972
999
|
}
|
|
973
|
-
;
|
|
974
1000
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppBreadcrumbComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
975
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AppBreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", inputs: { items: "items" }, ngImport: i0, template: "@if(
|
|
1001
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AppBreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", inputs: { items: "items" }, ngImport: i0, template: "@if(isShown) {\r\n<nav class=\"flex gap-x-3 text-[12px] w-full items-center mb-5\">\r\n <div class=\"card flex justify-center\">\r\n <p-breadcrumb [model]=\"items\"></p-breadcrumb>\r\n </div>\r\n</nav>\r\n}\r\n", styles: [".p-breadcrumb-list li:first-child a{@apply text-secondary;}.p-breadcrumb-list .p-breadcrumb-separator{transform:scale(.7)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: RouterModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
976
1002
|
}
|
|
977
1003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AppBreadcrumbComponent, decorators: [{
|
|
978
1004
|
type: Component,
|
|
979
|
-
args: [{ selector: 'app-breadcrumb', standalone: true, imports: [CommonModule, Breadcrumb, RouterModule], encapsulation: ViewEncapsulation.None, template: "@if(
|
|
1005
|
+
args: [{ selector: 'app-breadcrumb', standalone: true, imports: [CommonModule, Breadcrumb, RouterModule], encapsulation: ViewEncapsulation.None, template: "@if(isShown) {\r\n<nav class=\"flex gap-x-3 text-[12px] w-full items-center mb-5\">\r\n <div class=\"card flex justify-center\">\r\n <p-breadcrumb [model]=\"items\"></p-breadcrumb>\r\n </div>\r\n</nav>\r\n}\r\n", styles: [".p-breadcrumb-list li:first-child a{@apply text-secondary;}.p-breadcrumb-list .p-breadcrumb-separator{transform:scale(.7)}\n"] }]
|
|
980
1006
|
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }], propDecorators: { items: [{
|
|
981
1007
|
type: Input
|
|
982
1008
|
}] } });
|
|
@@ -1055,9 +1081,9 @@ const SidebarConfigDefaults = {
|
|
|
1055
1081
|
dismissible: false,
|
|
1056
1082
|
closeOnEscape: false,
|
|
1057
1083
|
sidebarSize: "md",
|
|
1058
|
-
showCancelBtn:
|
|
1059
|
-
showSaveBtn:
|
|
1060
|
-
showSaveAndMoreBtn:
|
|
1084
|
+
showCancelBtn: false,
|
|
1085
|
+
showSaveBtn: false,
|
|
1086
|
+
showSaveAndMoreBtn: false,
|
|
1061
1087
|
actions: {
|
|
1062
1088
|
save: {},
|
|
1063
1089
|
saveAndMore: {
|