@n-isi-platform/design-system 1.0.10 → 1.0.11

package/fesm2022/n-isi-platform-design-system.mjs

@@ -62,6 +62,8 @@ import { ProgressBar } from 'primeng/progressbar';
 import { Droppable, Draggable } from 'primeng/dragdrop';
 import { ListboxModule } from 'primeng/listbox';
 import { OrderListModule } from 'primeng/orderlist';
+import * as i3$2 from 'primeng/treeselect';
+import { TreeSelectModule } from 'primeng/treeselect';
 import * as i1$9 from '@angular/common/http';
 import * as XLSX from 'xlsx';
 
@@ -3526,6 +3528,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }] } });
 
+class TreeSelectComponent {
+    translateService;
+    TooltipHoverEventEnum = TooltipHoverEventEnum;
+    _isTooltipVisible;
+    name;
+    group;
+    controlName;
+    label = '';
+    optionList = [];
+    placeholder = '';
+    accessibilityText = '';
+    filter = true;
+    showClear = true;
+    isRequired = true;
+    tooltipPosition = TooltipPosition.right;
+    tooltipText = '';
+    formStatus;
+    isLoading = false;
+    appendTo;
+    isLabelVisible = true;
+    emptyMessage;
+    virtualScroll = false;
+    getValueEvent = new EventEmitter();
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    getSelectedValue(event) {
+        this.getValueEvent.emit(event);
+    }
+    ngOnInit() {
+        this._isTooltipVisible = !!this.tooltipText;
+    }
+    onClear() {
+        this.group.get(this.controlName)?.setValue(null);
+    }
+    get emptyDropdownMessage() {
+        if (this.emptyMessage) {
+            return this.emptyMessage;
+        }
+        else {
+            return this.translateService.instant('components.dropdown.emptyList');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeSelectComponent, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    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", showClear: "showClear", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", isLoading: "isLoading", appendTo: "appendTo", isLabelVisible: "isLabelVisible", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll" }, outputs: { getValueEvent: "getValueEvent" }, 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!\"\r\n    ></lib-tooltip>\r\n  </div>\r\n  <p-treeselect \r\n    [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n    [inputId]=\"name\"\r\n    [appendTo]=\"appendTo\"    \r\n    (onChange)='getSelectedValue($event)'\r\n    [options]=\"optionList\"\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]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\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    [showClear]=\"false\" \r\n    formControlName=\"klasifikacijskiRazredId\" \r\n  />\r\n  <lib-error\r\n    *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!)\"\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'\"\r\n  ></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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tree-select[group][controlName][name]', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgIf,
+                        TooltipComponent,
+                        TreeSelectModule,
+                        NgClass,
+                        ErrorComponent,
+                    ], 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!\"\r\n    ></lib-tooltip>\r\n  </div>\r\n  <p-treeselect \r\n    [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n    [inputId]=\"name\"\r\n    [appendTo]=\"appendTo\"    \r\n    (onChange)='getSelectedValue($event)'\r\n    [options]=\"optionList\"\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]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\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    [showClear]=\"false\" \r\n    formControlName=\"klasifikacijskiRazredId\" \r\n  />\r\n  <lib-error\r\n    *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!)\"\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'\"\r\n  ></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}\n"] }]
+        }], ctorParameters: () => [{ type: i2.TranslateService }], propDecorators: { name: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], optionList: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], accessibilityText: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], isRequired: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
+            }], tooltipText: [{
+                type: Input
+            }], formStatus: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], isLabelVisible: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], getValueEvent: [{
+                type: Output
+            }] } });
+
 /**
  * Auth API
  *
@@ -3964,5 +4063,5 @@ function emailListValidator() {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AppConfigService, AutocompleteComponent, BreadcrumbsComponent, ButtonColor, ButtonComponent, ButtonIconPosition, ButtonLinkComponent, ButtonSize, CacheService, CaptionColor, CardComponent, CheckboxComponent, ConfirmModalComponent, ConfirmModalService, CustomTableComponent, DateInputComponent, DialogColor, DividerComponent, DropdownComponent, DynamicRouteService, ErrorComponent, ErrorInterceptor, ExpandedTable, ExpandedTableComponent, ExportService, FileUploadComponent, FilterHeaderComponent, FooterComponent, GenericTableComponent, GlobalErrorHandler, IconButtonComponent, InputComponent, InputMaskComponent, InputType, IsNotBlank, IsNotDecimal, JwtInterceptor, LoaderComponent, LocalStorageService, MainMenuComponent, ModalComponent, NavbarComponent, NoDataFoundComponent, NoInternetService, PicklistComponent, PositionKey, ProgressBarComponent, SelectionMode, SharedAuthService, SharedMessageService, TableColumnSelectComponent, TagColor, TagComponent, TextareaComponent, TinymceEditorComponent, ToastSeverity, ToggleSwitchComponent, TooltipComponent, TooltipHoverEventEnum, TooltipPosition, TranslateSanitizerService, TranslationService, atLeastOneFieldPresentValidator, cleanMobilePhoneNumber, coordinateValidator, dateAndTimeMismatchValidator, dateMismatchValidator, emailListValidator, findUnavailableDates, formatDate, formatDateTime, formatDateToLocalISOString, getTomorrowDate, isEmpty, isFormInvalid, isMultipleOfFiveValidator, isOnePhoneNumberValidator, localFormatDate, mobilePhoneAreaCodeValidator, transformDateTime };
+export { AccordionComponent, AppConfigService, AutocompleteComponent, BreadcrumbsComponent, ButtonColor, ButtonComponent, ButtonIconPosition, ButtonLinkComponent, ButtonSize, CacheService, CaptionColor, CardComponent, CheckboxComponent, ConfirmModalComponent, ConfirmModalService, CustomTableComponent, DateInputComponent, DialogColor, DividerComponent, DropdownComponent, DynamicRouteService, ErrorComponent, ErrorInterceptor, ExpandedTable, ExpandedTableComponent, ExportService, FileUploadComponent, FilterHeaderComponent, FooterComponent, GenericTableComponent, GlobalErrorHandler, IconButtonComponent, InputComponent, InputMaskComponent, InputType, IsNotBlank, IsNotDecimal, JwtInterceptor, LoaderComponent, LocalStorageService, MainMenuComponent, ModalComponent, NavbarComponent, NoDataFoundComponent, NoInternetService, PicklistComponent, PositionKey, ProgressBarComponent, SelectionMode, SharedAuthService, SharedMessageService, TableColumnSelectComponent, TagColor, TagComponent, TextareaComponent, TinymceEditorComponent, ToastSeverity, ToggleSwitchComponent, TooltipComponent, TooltipHoverEventEnum, TooltipPosition, TranslateSanitizerService, TranslationService, TreeSelectComponent, atLeastOneFieldPresentValidator, cleanMobilePhoneNumber, coordinateValidator, dateAndTimeMismatchValidator, dateMismatchValidator, emailListValidator, findUnavailableDates, formatDate, formatDateTime, formatDateToLocalISOString, getTomorrowDate, isEmpty, isFormInvalid, isMultipleOfFiveValidator, isOnePhoneNumberValidator, localFormatDate, mobilePhoneAreaCodeValidator, transformDateTime };
 //# sourceMappingURL=n-isi-platform-design-system.mjs.map