@n-isi-platform/design-system 1.0.40 → 1.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/n-isi-platform-design-system.mjs +70 -34
- package/fesm2022/n-isi-platform-design-system.mjs.map +1 -1
- package/lib/camera-upload/camera-upload.component.d.ts +7 -1
- package/lib/file-upload/file-upload.component.d.ts +0 -4
- package/lib/tree-select/tree-select.component.d.ts +2 -3
- package/package.json +1 -1
|
@@ -447,9 +447,6 @@ class FileUploadComponent {
|
|
|
447
447
|
onDelete = new EventEmitter();
|
|
448
448
|
onDownload = new EventEmitter();
|
|
449
449
|
valid = new EventEmitter();
|
|
450
|
-
isCameraVisible = false;
|
|
451
|
-
openCamera() { this.isCameraVisible = true; }
|
|
452
|
-
closeCamera() { this.isCameraVisible = false; }
|
|
453
450
|
// File upload
|
|
454
451
|
fileList = [];
|
|
455
452
|
totalSize = 0;
|
|
@@ -537,20 +534,6 @@ class FileUploadComponent {
|
|
|
537
534
|
}
|
|
538
535
|
this.totalSizePercent = this.totalSize / 10;
|
|
539
536
|
}
|
|
540
|
-
onPhotoCaptured(base64) {
|
|
541
|
-
// Pretvorba PICK
|
|
542
|
-
const arr = base64.split(',');
|
|
543
|
-
const mime = arr[0].match(/:(.*?);/)[1];
|
|
544
|
-
const bstr = atob(arr[1]);
|
|
545
|
-
let n = bstr.length;
|
|
546
|
-
const u8arr = new Uint8Array(n);
|
|
547
|
-
while (n--)
|
|
548
|
-
u8arr[n] = bstr.charCodeAt(n);
|
|
549
|
-
const file = new File([u8arr], `photo_${Date.now()}.jpg`, { type: mime });
|
|
550
|
-
this.fileList = [...this.fileList, file];
|
|
551
|
-
this.onSaveFile.emit(this.fileList);
|
|
552
|
-
this.closeCamera();
|
|
553
|
-
}
|
|
554
537
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileUploadComponent, deps: [{ token: i1$3.PrimeNG }, { token: SharedMessageService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
555
538
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { postavkaPregledaId: "postavkaPregledaId", uploadedFiles: "uploadedFiles", maxFileSize: "maxFileSize", totalMaxFileSize: "totalMaxFileSize", disabled: "disabled", acceptFiles: "acceptFiles", multiple: "multiple", extraInfo: "extraInfo" }, outputs: { onSaveFile: "onSaveFile", onDelete: "onDelete", onDownload: "onDownload", valid: "valid" }, ngImport: i0, template: " <p-fileupload\r\n class=\"pt-3\"\r\n name=\"priloge[]\"\r\n invalidFileSizeMessageSummary=\"{{\r\n 'components.fileUpload.invalidFileSizeMessageSummary' | translate\r\n }}\"\r\n invalidFileSizeMessageDetail=\"{{\r\n 'components.fileUpload.invalidFileSizeMessageDetail' | translate\r\n }}\"\r\n invalidFileTypeMessageDetail=\"{{'components.fileUpload.invalidFileTypeMessageDetail' | translate}}\"\r\n invalidFileTypeMessageSummary=\"{{ 'components.fileUpload.invalidFileTypeMessageSummary' | translate}}\"\r\n [multiple]=\"multiple\"\r\n (onRemove)=\"remove($event)\"\r\n [accept]=\"acceptFiles\"\r\n [maxFileSize]=\"maxFileSize\"\r\n (onSelect)=\"onSelectedFiles($event)\">\r\n <ng-template\r\n #header\r\n let-priloge\r\n let-chooseCallback=\"chooseCallback\"\r\n let-clearCallback=\"clearCallback\">\r\n <div class=\"flex gap-2\">\r\n <lib-button\r\n [disabled]=\"disabled\"\r\n (click)=\"choose($event, chooseCallback)\"\r\n label=\"{{ 'components.fileUpload.izberi' | translate }}\"\r\n [hasIcon]=\"true\"\r\n [icon]=\"'pi pi-file'\"\r\n [color]=\"ButtonColor.primary\" />\r\n </div>\r\n </ng-template>\r\n <ng-template #content let-priloge let-removeFileCallback=\"removeFileCallback\">\r\n <div class=\"flex flex-col gap-8 pt-4\">\r\n <div class=\"w-full\" *ngIf=\"uploadedFiles.length > 0\">\r\n <div class=\"flex flex-column gap-4\">\r\n <div\r\n *ngFor=\"let priloga of uploadedFiles; let i = index\"\r\n class=\"flex flex-col justify-content-between items-center gap-2 px-3\">\r\n <div class=\"flex flex-col\">\r\n <div>\r\n <i class=\"pi pi-file\"></i>\r\n </div>\r\n <span class=\"pl-3 text-ellipsis max-w-60 whitespace-nowrap overflow-hidden\">\r\n {{ getDisplayName(priloga) }}\r\n </span>\r\n </div>\r\n <div class=\"flex align-items-center\">\r\n <div *ngIf=\"!isTempFile(priloga)\">\r\n <p-badge value=\"Zaklju\u010Den\" badgeSize=\"small\" severity=\"success\" />\r\n <p-button\r\n (click)=\"downloadFile(priloga)\"\r\n severity=\"primary\"\r\n icon=\"pi pi-download\"\r\n aria-label=\"Prenesi\"\r\n [rounded]=\"true\"\r\n [text]=\"true\" />\r\n </div>\r\n <p-button\r\n [disabled]=\"disabled\"\r\n (click)=\"isTempFile(priloga) ? removeFileCallback() : delete(priloga)\"\r\n severity=\"danger\"\r\n icon=\"pi pi-times\"\r\n [rounded]=\"true\"\r\n [text]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #priloga></ng-template>\r\n <ng-template #empty>\r\n <div\r\n *ngIf=\"uploadedFiles.length === 0\"\r\n class=\"flex align-center justify-around\"\r\n [style.width]=\"'100%'\">\r\n <span class=\"pi pi-cloud-upload mr-3\"></span>\r\n <p>{{ 'components.fileUpload.povlecitveInSpustiteDatotekeZaNalaganje' | translate }}</p>\r\n <p *ngIf=\"extraInfo\">{{ extraInfo | translate }}</p>\r\n </div>\r\n <div *ngIf=\"acceptFiles\" class=\"flex align-center justify-around\">\r\n <div class=\"placeholder\"></div>\r\n <p>{{ ('components.fileUpload.dovoljeneDatoteke' | translate) + acceptFiles }}</p>\r\n </div>\r\n </ng-template>\r\n </p-fileupload>\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i5.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["hasIcon", "label", "color", "icon", "iconPos", "disabled", "isLoading", "styleClass", "size", "accessibilityText", "buttonType", "isAccessible", "isSelected", "ariaControlsId", "isExpanded", "link", "isTextareaClear"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MenubarModule }, { kind: "ngmodule", type: ChipModule }] });
|
|
556
539
|
}
|
|
@@ -598,9 +581,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
598
581
|
|
|
599
582
|
class CameraUploadComponent {
|
|
600
583
|
video;
|
|
601
|
-
filesCaptured = new EventEmitter();
|
|
602
|
-
captureSuccess = new EventEmitter();
|
|
584
|
+
filesCaptured = new EventEmitter();
|
|
585
|
+
captureSuccess = new EventEmitter();
|
|
603
586
|
pendingFiles = [];
|
|
587
|
+
stream;
|
|
588
|
+
videoReady = false;
|
|
589
|
+
uiMessage = null;
|
|
590
|
+
uiMessageTimer;
|
|
604
591
|
async ngAfterViewInit() {
|
|
605
592
|
try {
|
|
606
593
|
const devices = await navigator.mediaDevices.enumerateDevices();
|
|
@@ -613,23 +600,40 @@ class CameraUploadComponent {
|
|
|
613
600
|
else {
|
|
614
601
|
constraints = { video: true };
|
|
615
602
|
}
|
|
616
|
-
|
|
617
|
-
this.video.nativeElement.srcObject = stream;
|
|
603
|
+
this.stream = await navigator.mediaDevices.getUserMedia(constraints);
|
|
604
|
+
this.video.nativeElement.srcObject = this.stream;
|
|
605
|
+
await this.ensureVideoReady();
|
|
618
606
|
}
|
|
619
607
|
catch (err) {
|
|
620
608
|
console.warn('Zunanja kamera ni na voljo. Uporabljam privzeto.', err);
|
|
621
|
-
|
|
622
|
-
|
|
609
|
+
try {
|
|
610
|
+
this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
611
|
+
this.video.nativeElement.srcObject = this.stream;
|
|
612
|
+
await this.ensureVideoReady();
|
|
613
|
+
}
|
|
614
|
+
catch (fallbackErr) {
|
|
615
|
+
console.warn('Kamera ni na voljo.', fallbackErr);
|
|
616
|
+
this.showUiMessage('Kamera ni na voljo. Preveri dovoljenja in poskusi ponovno.');
|
|
617
|
+
}
|
|
623
618
|
}
|
|
624
619
|
}
|
|
625
620
|
ngOnDestroy() {
|
|
626
|
-
|
|
627
|
-
|
|
621
|
+
this.stream?.getTracks().forEach(t => t.stop());
|
|
622
|
+
if (this.uiMessageTimer)
|
|
623
|
+
clearTimeout(this.uiMessageTimer);
|
|
628
624
|
}
|
|
629
|
-
capture() {
|
|
625
|
+
async capture() {
|
|
630
626
|
const videoEl = this.video.nativeElement;
|
|
627
|
+
if (!this.videoReady || !videoEl.videoWidth || !videoEl.videoHeight) {
|
|
628
|
+
await this.ensureVideoReady(2000);
|
|
629
|
+
}
|
|
631
630
|
if (!videoEl.videoWidth || !videoEl.videoHeight) {
|
|
632
|
-
console.warn('Video še ni inicializiran, ni mogoče zajeti slike.'
|
|
631
|
+
console.warn('Video še ni inicializiran, ni mogoče zajeti slike.', {
|
|
632
|
+
readyState: videoEl.readyState,
|
|
633
|
+
videoWidth: videoEl.videoWidth,
|
|
634
|
+
videoHeight: videoEl.videoHeight,
|
|
635
|
+
});
|
|
636
|
+
this.showUiMessage('Video še ni pripravljen. Počakaj 1-2 sekundi in znova klikni Naredi posnetek.');
|
|
633
637
|
return;
|
|
634
638
|
}
|
|
635
639
|
const canvas = document.createElement('canvas');
|
|
@@ -638,6 +642,7 @@ class CameraUploadComponent {
|
|
|
638
642
|
const ctx = canvas.getContext('2d');
|
|
639
643
|
if (!ctx) {
|
|
640
644
|
console.warn('Canvas context je null.');
|
|
645
|
+
this.showUiMessage('Napaka pri zajemu slike. Poskusi ponovno.');
|
|
641
646
|
return;
|
|
642
647
|
}
|
|
643
648
|
ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height);
|
|
@@ -660,12 +665,46 @@ class CameraUploadComponent {
|
|
|
660
665
|
this.filesCaptured.emit(this.pendingFiles);
|
|
661
666
|
this.pendingFiles = [];
|
|
662
667
|
}
|
|
668
|
+
async ensureVideoReady(timeoutMs = 3000) {
|
|
669
|
+
const videoEl = this.video?.nativeElement;
|
|
670
|
+
if (!videoEl)
|
|
671
|
+
return;
|
|
672
|
+
if (videoEl.readyState >= 2 && videoEl.videoWidth > 0 && videoEl.videoHeight > 0) {
|
|
673
|
+
this.videoReady = true;
|
|
674
|
+
return;
|
|
675
|
+
}
|
|
676
|
+
await videoEl.play().catch(() => undefined);
|
|
677
|
+
await new Promise(resolve => {
|
|
678
|
+
let resolved = false;
|
|
679
|
+
const finish = () => {
|
|
680
|
+
if (resolved)
|
|
681
|
+
return;
|
|
682
|
+
resolved = true;
|
|
683
|
+
videoEl.removeEventListener('loadedmetadata', onReady);
|
|
684
|
+
videoEl.removeEventListener('canplay', onReady);
|
|
685
|
+
resolve();
|
|
686
|
+
};
|
|
687
|
+
const onReady = () => finish();
|
|
688
|
+
videoEl.addEventListener('loadedmetadata', onReady, { once: true });
|
|
689
|
+
videoEl.addEventListener('canplay', onReady, { once: true });
|
|
690
|
+
setTimeout(finish, timeoutMs);
|
|
691
|
+
});
|
|
692
|
+
this.videoReady = videoEl.readyState >= 2 && videoEl.videoWidth > 0 && videoEl.videoHeight > 0;
|
|
693
|
+
}
|
|
694
|
+
showUiMessage(message) {
|
|
695
|
+
this.uiMessage = message;
|
|
696
|
+
if (this.uiMessageTimer)
|
|
697
|
+
clearTimeout(this.uiMessageTimer);
|
|
698
|
+
this.uiMessageTimer = setTimeout(() => {
|
|
699
|
+
this.uiMessage = null;
|
|
700
|
+
}, 3500);
|
|
701
|
+
}
|
|
663
702
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CameraUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
664
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CameraUploadComponent, isStandalone: true, selector: "app-camera-upload", outputs: { filesCaptured: "filesCaptured", captureSuccess: "captureSuccess" }, viewQueries: [{ propertyName: "video", first: true, predicate: ["video"], descendants: true }], ngImport: i0, template: "<div class=\"camera-upload\">\r\n <video #video autoplay playsinline></video>\r\n\r\n <div class=\"actions\">\r\n <button\r\n pButton\r\n type=\"button\"\r\n (click)=\"capture()\"\r\n label=\"{{ 'Naredi posnetek' }}\">\r\n </button>\r\n\r\n </div>\r\n</div>\r\n
|
|
703
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CameraUploadComponent, isStandalone: true, selector: "app-camera-upload", outputs: { filesCaptured: "filesCaptured", captureSuccess: "captureSuccess" }, viewQueries: [{ propertyName: "video", first: true, predicate: ["video"], descendants: true }], ngImport: i0, template: "<div class=\"camera-upload\">\r\n <div *ngIf=\"uiMessage\" class=\"capture-toast\" role=\"status\" aria-live=\"polite\">\r\n {{ uiMessage }}\r\n </div>\r\n\r\n <video #video autoplay playsinline></video>\r\n\r\n <div class=\"actions\">\r\n <button\r\n pButton\r\n type=\"button\"\r\n (click)=\"capture()\"\r\n label=\"{{ 'Naredi posnetek' }}\">\r\n </button>\r\n\r\n </div>\r\n</div>\r\n", styles: [".camera-upload{display:flex;flex-direction:column;gap:1rem}.capture-toast{width:100%;padding:.75rem 1rem;border-radius:6px;background:#fff3cd;border:1px solid #ffe69c;color:#664d03;font-size:.95rem}.camera-upload video{width:100%;max-height:70vh;object-fit:cover;border-radius:4px}.camera-upload .actions{width:100%}.camera-upload .actions button{width:100%;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] });
|
|
665
704
|
}
|
|
666
705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CameraUploadComponent, decorators: [{
|
|
667
706
|
type: Component,
|
|
668
|
-
args: [{ selector: 'app-camera-upload', standalone: true, imports: [TranslatePipe, ButtonModule], template: "<div class=\"camera-upload\">\r\n <video #video autoplay playsinline></video>\r\n\r\n <div class=\"actions\">\r\n <button\r\n pButton\r\n type=\"button\"\r\n (click)=\"capture()\"\r\n label=\"{{ 'Naredi posnetek' }}\">\r\n </button>\r\n\r\n </div>\r\n</div>\r\n
|
|
707
|
+
args: [{ selector: 'app-camera-upload', standalone: true, imports: [TranslatePipe, ButtonModule], template: "<div class=\"camera-upload\">\r\n <div *ngIf=\"uiMessage\" class=\"capture-toast\" role=\"status\" aria-live=\"polite\">\r\n {{ uiMessage }}\r\n </div>\r\n\r\n <video #video autoplay playsinline></video>\r\n\r\n <div class=\"actions\">\r\n <button\r\n pButton\r\n type=\"button\"\r\n (click)=\"capture()\"\r\n label=\"{{ 'Naredi posnetek' }}\">\r\n </button>\r\n\r\n </div>\r\n</div>\r\n", styles: [".camera-upload{display:flex;flex-direction:column;gap:1rem}.capture-toast{width:100%;padding:.75rem 1rem;border-radius:6px;background:#fff3cd;border:1px solid #ffe69c;color:#664d03;font-size:.95rem}.camera-upload video{width:100%;max-height:70vh;object-fit:cover;border-radius:4px}.camera-upload .actions{width:100%}.camera-upload .actions button{width:100%;justify-content:center}\n"] }]
|
|
669
708
|
}], propDecorators: { video: [{
|
|
670
709
|
type: ViewChild,
|
|
671
710
|
args: ['video']
|
|
@@ -3672,9 +3711,6 @@ class TreeSelectComponent {
|
|
|
3672
3711
|
constructor(translateService) {
|
|
3673
3712
|
this.translateService = translateService;
|
|
3674
3713
|
}
|
|
3675
|
-
ngOnChanges(changes) {
|
|
3676
|
-
console.log("option list:: ", this.optionList);
|
|
3677
|
-
}
|
|
3678
3714
|
getSelectedValue(event) {
|
|
3679
3715
|
this.getValueEvent.emit(event);
|
|
3680
3716
|
}
|
|
@@ -3696,7 +3732,7 @@ class TreeSelectComponent {
|
|
|
3696
3732
|
}
|
|
3697
3733
|
}
|
|
3698
3734
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeSelectComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3699
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TreeSelectComponent, isStandalone: true, selector: "lib-tree-select[group][controlName][name]", inputs: { name: "name", group: "group", controlName: "controlName", label: "label", optionList: "optionList", placeholder: "placeholder", accessibilityText: "accessibilityText", filter: "filter", isMultiselect: "isMultiselect", showClear: "showClear", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", isLoading: "isLoading", appendTo: "appendTo", isLabelVisible: "isLabelVisible", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll" }, outputs: { getValueEvent: "getValueEvent", getUnselectedValueEvent: "getUnselectedValueEvent" },
|
|
3735
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TreeSelectComponent, isStandalone: true, selector: "lib-tree-select[group][controlName][name]", inputs: { name: "name", group: "group", controlName: "controlName", label: "label", optionList: "optionList", placeholder: "placeholder", accessibilityText: "accessibilityText", filter: "filter", isMultiselect: "isMultiselect", showClear: "showClear", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", isLoading: "isLoading", appendTo: "appendTo", isLabelVisible: "isLabelVisible", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll" }, outputs: { getValueEvent: "getValueEvent", getUnselectedValueEvent: "getUnselectedValueEvent" }, ngImport: i0, template: "<div class=\"flex flex-column gap-1\" [formGroup]=\"group\">\r\n <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n <label [for]=\"name\" class=\"mr-2\">\r\n {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"></lib-tooltip>\r\n </div>\r\n <p-treeselect\r\n [ngClass]=\"{\r\n 'ng-dirty':\r\n (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n formStatus!.isSubmitTriggered ||\r\n formStatus!.isNestedFormSubmit!\r\n }\"\r\n [inputId]=\"name\"\r\n [appendTo]=\"appendTo\"\r\n (onNodeSelect)=\"getSelectedValue($event.node)\"\r\n (onNodeUnselect)=\"getUnselectedValue($event.node)\"\r\n [options]=\"optionList\"\r\n [selectionMode]=\"isMultiselect ? 'multiple' : 'single'\"\r\n [placeholder]=\"placeholder\"\r\n [formControlName]=\"controlName\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"38\"\r\n [filter]=\"filter\"\r\n [virtualScrollOptions]=\"{ scrollHeight: '250px' }\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"\r\n group.get(controlName)!.errors &&\r\n (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)\r\n \"\r\n [attr.aria-required]=\"isRequired\"\r\n [showClear]=\"group.get(controlName)?.value && showClear\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (onClear)=\"onClear()\"\r\n [emptyMessage]=\"emptyDropdownMessage\"\r\n containerStyleClass=\"w-full\"\r\n>\r\n </p-treeselect>\r\n\r\n <lib-error\r\n *ngIf=\"\r\n (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n formStatus!.isSubmitTriggered ||\r\n formStatus!.isNestedFormSubmit!\r\n \"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isDirty]=\"group.get(controlName)!.pristine\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n [errorId]=\"name + 'Error'\"></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-select-filter{border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select-filter::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select-filter:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select-filter:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select{width:100%;height:39px;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select .p-select-item.p-ripple{white-space:normal}:host ::ng-deep .p-select:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-select:not(.p-disabled).p-focus span{outline:none}:host ::ng-deep .p-select .p-select-header{background-color:#3e7c94}:host ::ng-deep .p-select .p-select-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item-group:hover{cursor:default}:host ::ng-deep .p-select .p-select-panel .p-select-header .p-select-filter-icon{top:.75rem}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}::ng-deep li.node-disabled .p-tree-node-label{opacity:.4;color:#999}::ng-deep li.node-disabled .p-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TooltipComponent, selector: " lib-tooltip", inputs: ["icon", "htmlParser", "text", "position", "tooltipEvent", "autoHide", "htmlParse"] }, { kind: "ngmodule", type: TreeSelectModule }, { kind: "component", type: i3$2.TreeSelect, selector: "p-treeSelect, p-treeselect, p-tree-select", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "fluid", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "size", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ErrorComponent, selector: "lib-error", inputs: ["hasError", "isTouched", "isSubmitTriggered", "isNestedFormSubmit", "isDirty", "isRequired", "hasGroupError", "errorId"] }] });
|
|
3700
3736
|
}
|
|
3701
3737
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeSelectComponent, decorators: [{
|
|
3702
3738
|
type: Component,
|
|
@@ -3708,7 +3744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
3708
3744
|
TreeSelectModule,
|
|
3709
3745
|
NgClass,
|
|
3710
3746
|
ErrorComponent,
|
|
3711
|
-
], template: "<div class=\"flex flex-column gap-1\" [formGroup]=\"group\">\r\n <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n <label [for]=\"name\" class=\"mr-2\">\r\n {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"></lib-tooltip>\r\n </div>\r\n <p-treeselect\r\n [ngClass]=\"{\r\n 'ng-dirty':\r\n (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n formStatus!.isSubmitTriggered ||\r\n formStatus!.isNestedFormSubmit!\r\n }\"\r\n [inputId]=\"name\"\r\n [appendTo]=\"appendTo\"\r\n (onNodeSelect)=\"getSelectedValue($event.node)\"\r\n (onNodeUnselect)=\"getUnselectedValue($event.node)\"\r\n [options]=\"optionList\"\r\n [selectionMode]=\"isMultiselect ? 'multiple' : 'single'\"\r\n [placeholder]=\"placeholder\"\r\n [formControlName]=\"controlName\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"38\"\r\n [filter]=\"filter\"\r\n [virtualScrollOptions]=\"{ scrollHeight: '250px' }\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"\r\n group.get(controlName)!.errors &&\r\n (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)\r\n \"\r\n [attr.aria-required]=\"isRequired\"\r\n [showClear]=\"group.get(controlName)?.value && showClear\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (onClear)=\"onClear()\"\r\n [emptyMessage]=\"emptyDropdownMessage\"\r\n containerStyleClass=\"w-full\"\r\n
|
|
3747
|
+
], template: "<div class=\"flex flex-column gap-1\" [formGroup]=\"group\">\r\n <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n <label [for]=\"name\" class=\"mr-2\">\r\n {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"></lib-tooltip>\r\n </div>\r\n <p-treeselect\r\n [ngClass]=\"{\r\n 'ng-dirty':\r\n (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n formStatus!.isSubmitTriggered ||\r\n formStatus!.isNestedFormSubmit!\r\n }\"\r\n [inputId]=\"name\"\r\n [appendTo]=\"appendTo\"\r\n (onNodeSelect)=\"getSelectedValue($event.node)\"\r\n (onNodeUnselect)=\"getUnselectedValue($event.node)\"\r\n [options]=\"optionList\"\r\n [selectionMode]=\"isMultiselect ? 'multiple' : 'single'\"\r\n [placeholder]=\"placeholder\"\r\n [formControlName]=\"controlName\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"38\"\r\n [filter]=\"filter\"\r\n [virtualScrollOptions]=\"{ scrollHeight: '250px' }\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"\r\n group.get(controlName)!.errors &&\r\n (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)\r\n \"\r\n [attr.aria-required]=\"isRequired\"\r\n [showClear]=\"group.get(controlName)?.value && showClear\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (onClear)=\"onClear()\"\r\n [emptyMessage]=\"emptyDropdownMessage\"\r\n containerStyleClass=\"w-full\"\r\n>\r\n </p-treeselect>\r\n\r\n <lib-error\r\n *ngIf=\"\r\n (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n formStatus!.isSubmitTriggered ||\r\n formStatus!.isNestedFormSubmit!\r\n \"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isDirty]=\"group.get(controlName)!.pristine\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n [errorId]=\"name + 'Error'\"></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-select-filter{border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select-filter::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select-filter:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select-filter:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select{width:100%;height:39px;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select .p-select-item.p-ripple{white-space:normal}:host ::ng-deep .p-select:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-select:not(.p-disabled).p-focus span{outline:none}:host ::ng-deep .p-select .p-select-header{background-color:#3e7c94}:host ::ng-deep .p-select .p-select-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item-group:hover{cursor:default}:host ::ng-deep .p-select .p-select-panel .p-select-header .p-select-filter-icon{top:.75rem}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}::ng-deep li.node-disabled .p-tree-node-label{opacity:.4;color:#999}::ng-deep li.node-disabled .p-checkbox{pointer-events:none}\n"] }]
|
|
3712
3748
|
}], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { name: [{
|
|
3713
3749
|
type: Input
|
|
3714
3750
|
}], group: [{
|