@n-isi-platform/design-system 1.0.41 → 1.0.42
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.
|
@@ -1136,6 +1136,7 @@ class AutocompleteComponent {
|
|
|
1136
1136
|
nestedGroup = false;
|
|
1137
1137
|
isLoading = false;
|
|
1138
1138
|
emptyMessage;
|
|
1139
|
+
virtualScroll = false;
|
|
1139
1140
|
ariaFilterLabel;
|
|
1140
1141
|
getValueEvent = new EventEmitter();
|
|
1141
1142
|
filteredOptions;
|
|
@@ -1228,7 +1229,7 @@ class AutocompleteComponent {
|
|
|
1228
1229
|
});
|
|
1229
1230
|
}
|
|
1230
1231
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1231
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AutocompleteComponent, isStandalone: true, selector: "lib-autocomplete[group][controlName][name]", inputs: { name: "name", isMultiselect: "isMultiselect", selectedItemLabel: "selectedItemLabel", group: "group", controlName: "controlName", label: "label", optionList: "optionList", optionLabel: "optionLabel", optionalValue: "optionalValue", placeholder: "placeholder", accessibilityText: "accessibilityText", filter: "filter", appendTo: "appendTo", filterBy: "filterBy", showClear: "showClear", forceSelection: "forceSelection", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", nestedGroup: "nestedGroup", isLoading: "isLoading", emptyMessage: "emptyMessage", ariaFilterLabel: "ariaFilterLabel" }, outputs: { getValueEvent: "getValueEvent" }, ngImport: i0, template: "<div class='flex flex-column gap-1' [formGroup]=\"group\">\r\n <div class=\"flex\">\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-autoComplete *ngIf=\"!isMultiselect\"\r\n [inputId]=\"name\"\r\n [dropdown]=\"true\"\r\n [forceSelection]=\"forceSelection\"\r\n [suggestions]=\"filteredOptions\"\r\n (completeMethod)=\"completeMethod($event)\"\r\n [appendTo]=\"appendTo\"\r\n [optionLabel]=\"filterBy\"\r\n [formControlName]=\"controlName\"\r\n [placeholder]='placeholder'\r\n >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- custom template for button - dropdownicon | aria support -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <span class=\"p-button-icon pi pi-chevron-down\"\r\n id=\"dropdownLabel\"\r\n [attr.aria-label]=\"ariaFilterLabel\"></span>\r\n </ng-template>\r\n </p-autoComplete>\r\n\r\n <p-multiSelect\r\n *ngIf=\"isMultiselect\"\r\n [inputId]=\"name\"\r\n (onChange)='getSelectedValue($event)'\r\n [options]=\"optionList\"\r\n [optionLabel]=\"!nestedGroup ? optionLabel : ''\"\r\n [formControlName]=\"controlName\"\r\n [group]=\"nestedGroup\"\r\n [filter]='filter'\r\n [filterBy]='filterBy'\r\n [selectedItemsLabel]=\"dynamicItemsLabel\"\r\n [placeholder]=\"placeholder\"\r\n [showClear]=\"group.get(controlName)!.value && showClear\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (onClear)=\"onClear()\"\r\n [emptyMessage]=\"emptyAutocompleteMessage\"\r\n [emptyFilterMessage]=\"emptyFilterAutocompleteMessage\"\r\n [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\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 >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\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-autocomplete{width:100%;border:1.75px solid #3E7C94!important;border:0;border-radius:10px}:host ::ng-deep .p-autocomplete::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-autocomplete:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-autocomplete:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-autocomplete button{background-color:#3e7c94}:host ::ng-deep .p-autocomplete button:hover{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-autocomplete .p-autocomplete-item.p-ripple{white-space:normal}:host ::ng-deep .p-autocomplete:hover{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete:not(.p-disabled).p-focus{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete .p-autocomplete-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group:hover{cursor:default}:host ::ng-deep .p-autocomplete .p-button{width:3.5rem;border-radius:0 8px 8px 0}:host ::ng-deep .p-autocomplete .p-inputtext{border-radius:8px 0 0 8px}: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$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: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { 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"] }] });
|
|
1232
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AutocompleteComponent, isStandalone: true, selector: "lib-autocomplete[group][controlName][name]", inputs: { name: "name", isMultiselect: "isMultiselect", selectedItemLabel: "selectedItemLabel", group: "group", controlName: "controlName", label: "label", optionList: "optionList", optionLabel: "optionLabel", optionalValue: "optionalValue", placeholder: "placeholder", accessibilityText: "accessibilityText", filter: "filter", appendTo: "appendTo", filterBy: "filterBy", showClear: "showClear", forceSelection: "forceSelection", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", nestedGroup: "nestedGroup", isLoading: "isLoading", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll", ariaFilterLabel: "ariaFilterLabel" }, outputs: { getValueEvent: "getValueEvent" }, ngImport: i0, template: "<div class='flex flex-column gap-1' [formGroup]=\"group\">\r\n <div class=\"flex\">\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-autoComplete *ngIf=\"!isMultiselect\"\r\n [inputId]=\"name\"\r\n [dropdown]=\"true\"\r\n [forceSelection]=\"forceSelection\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"38\"\r\n [suggestions]=\"filteredOptions\"\r\n (completeMethod)=\"completeMethod($event)\"\r\n [appendTo]=\"appendTo\"\r\n [optionLabel]=\"filterBy\"\r\n [formControlName]=\"controlName\"\r\n [placeholder]='placeholder'\r\n >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- custom template for button - dropdownicon | aria support -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <span class=\"p-button-icon pi pi-chevron-down\"\r\n id=\"dropdownLabel\"\r\n [attr.aria-label]=\"ariaFilterLabel\"></span>\r\n </ng-template>\r\n </p-autoComplete>\r\n\r\n <p-multiSelect\r\n *ngIf=\"isMultiselect\"\r\n [inputId]=\"name\"\r\n (onChange)='getSelectedValue($event)'\r\n [options]=\"optionList\"\r\n [optionLabel]=\"!nestedGroup ? optionLabel : ''\"\r\n [formControlName]=\"controlName\"\r\n [group]=\"nestedGroup\"\r\n [filter]='filter'\r\n [filterBy]='filterBy'\r\n [selectedItemsLabel]=\"dynamicItemsLabel\"\r\n [placeholder]=\"placeholder\"\r\n [showClear]=\"group.get(controlName)!.value && showClear\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (onClear)=\"onClear()\"\r\n [emptyMessage]=\"emptyAutocompleteMessage\"\r\n [emptyFilterMessage]=\"emptyFilterAutocompleteMessage\"\r\n [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\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 >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\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-autocomplete{width:100%;border:1.75px solid #3E7C94!important;border:0;border-radius:10px}:host ::ng-deep .p-autocomplete::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-autocomplete:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-autocomplete:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-autocomplete button{background-color:#3e7c94}:host ::ng-deep .p-autocomplete button:hover{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-autocomplete .p-autocomplete-item.p-ripple{white-space:normal}:host ::ng-deep .p-autocomplete:hover{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete:not(.p-disabled).p-focus{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete .p-autocomplete-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group:hover{cursor:default}:host ::ng-deep .p-autocomplete .p-button{width:3.5rem;border-radius:0 8px 8px 0}:host ::ng-deep .p-autocomplete .p-inputtext{border-radius:8px 0 0 8px}: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$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: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { 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"] }] });
|
|
1232
1233
|
}
|
|
1233
1234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
1234
1235
|
type: Component,
|
|
@@ -1242,7 +1243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
1242
1243
|
MultiSelect,
|
|
1243
1244
|
NgClass,
|
|
1244
1245
|
ErrorComponent,
|
|
1245
|
-
], template: "<div class='flex flex-column gap-1' [formGroup]=\"group\">\r\n <div class=\"flex\">\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-autoComplete *ngIf=\"!isMultiselect\"\r\n [inputId]=\"name\"\r\n [dropdown]=\"true\"\r\n [forceSelection]=\"forceSelection\"\r\n [suggestions]=\"filteredOptions\"\r\n (completeMethod)=\"completeMethod($event)\"\r\n [appendTo]=\"appendTo\"\r\n [optionLabel]=\"filterBy\"\r\n [formControlName]=\"controlName\"\r\n [placeholder]='placeholder'\r\n >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- custom template for button - dropdownicon | aria support -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <span class=\"p-button-icon pi pi-chevron-down\"\r\n id=\"dropdownLabel\"\r\n [attr.aria-label]=\"ariaFilterLabel\"></span>\r\n </ng-template>\r\n </p-autoComplete>\r\n\r\n <p-multiSelect\r\n *ngIf=\"isMultiselect\"\r\n [inputId]=\"name\"\r\n (onChange)='getSelectedValue($event)'\r\n [options]=\"optionList\"\r\n [optionLabel]=\"!nestedGroup ? optionLabel : ''\"\r\n [formControlName]=\"controlName\"\r\n [group]=\"nestedGroup\"\r\n [filter]='filter'\r\n [filterBy]='filterBy'\r\n [selectedItemsLabel]=\"dynamicItemsLabel\"\r\n [placeholder]=\"placeholder\"\r\n [showClear]=\"group.get(controlName)!.value && showClear\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (onClear)=\"onClear()\"\r\n [emptyMessage]=\"emptyAutocompleteMessage\"\r\n [emptyFilterMessage]=\"emptyFilterAutocompleteMessage\"\r\n [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\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 >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\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-autocomplete{width:100%;border:1.75px solid #3E7C94!important;border:0;border-radius:10px}:host ::ng-deep .p-autocomplete::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-autocomplete:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-autocomplete:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-autocomplete button{background-color:#3e7c94}:host ::ng-deep .p-autocomplete button:hover{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-autocomplete .p-autocomplete-item.p-ripple{white-space:normal}:host ::ng-deep .p-autocomplete:hover{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete:not(.p-disabled).p-focus{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete .p-autocomplete-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group:hover{cursor:default}:host ::ng-deep .p-autocomplete .p-button{width:3.5rem;border-radius:0 8px 8px 0}:host ::ng-deep .p-autocomplete .p-inputtext{border-radius:8px 0 0 8px}: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"] }]
|
|
1246
|
+
], template: "<div class='flex flex-column gap-1' [formGroup]=\"group\">\r\n <div class=\"flex\">\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-autoComplete *ngIf=\"!isMultiselect\"\r\n [inputId]=\"name\"\r\n [dropdown]=\"true\"\r\n [forceSelection]=\"forceSelection\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"38\"\r\n [suggestions]=\"filteredOptions\"\r\n (completeMethod)=\"completeMethod($event)\"\r\n [appendTo]=\"appendTo\"\r\n [optionLabel]=\"filterBy\"\r\n [formControlName]=\"controlName\"\r\n [placeholder]='placeholder'\r\n >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- custom template for button - dropdownicon | aria support -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <span class=\"p-button-icon pi pi-chevron-down\"\r\n id=\"dropdownLabel\"\r\n [attr.aria-label]=\"ariaFilterLabel\"></span>\r\n </ng-template>\r\n </p-autoComplete>\r\n\r\n <p-multiSelect\r\n *ngIf=\"isMultiselect\"\r\n [inputId]=\"name\"\r\n (onChange)='getSelectedValue($event)'\r\n [options]=\"optionList\"\r\n [optionLabel]=\"!nestedGroup ? optionLabel : ''\"\r\n [formControlName]=\"controlName\"\r\n [group]=\"nestedGroup\"\r\n [filter]='filter'\r\n [filterBy]='filterBy'\r\n [selectedItemsLabel]=\"dynamicItemsLabel\"\r\n [placeholder]=\"placeholder\"\r\n [showClear]=\"group.get(controlName)!.value && showClear\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (onClear)=\"onClear()\"\r\n [emptyMessage]=\"emptyAutocompleteMessage\"\r\n [emptyFilterMessage]=\"emptyFilterAutocompleteMessage\"\r\n [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\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 >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\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-autocomplete{width:100%;border:1.75px solid #3E7C94!important;border:0;border-radius:10px}:host ::ng-deep .p-autocomplete::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-autocomplete:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-autocomplete:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-autocomplete button{background-color:#3e7c94}:host ::ng-deep .p-autocomplete button:hover{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-autocomplete .p-autocomplete-item.p-ripple{white-space:normal}:host ::ng-deep .p-autocomplete:hover{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete:not(.p-disabled).p-focus{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete .p-autocomplete-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group:hover{cursor:default}:host ::ng-deep .p-autocomplete .p-button{width:3.5rem;border-radius:0 8px 8px 0}:host ::ng-deep .p-autocomplete .p-inputtext{border-radius:8px 0 0 8px}: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"] }]
|
|
1246
1247
|
}], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { name: [{
|
|
1247
1248
|
type: Input
|
|
1248
1249
|
}], isMultiselect: [{
|
|
@@ -1289,6 +1290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
1289
1290
|
type: Input
|
|
1290
1291
|
}], emptyMessage: [{
|
|
1291
1292
|
type: Input
|
|
1293
|
+
}], virtualScroll: [{
|
|
1294
|
+
type: Input
|
|
1292
1295
|
}], ariaFilterLabel: [{
|
|
1293
1296
|
type: Input
|
|
1294
1297
|
}], getValueEvent: [{
|