ngx-sp-infra 5.19.2 → 5.19.6
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/ngx-sp-infra.mjs +57 -26
- package/fesm2022/ngx-sp-infra.mjs.map +1 -1
- package/lib/message/message.service.d.ts +4 -4
- package/lib/widgets/lib-combobox/lib-combobox.component.d.ts +0 -1
- package/lib/widgets/lib-combobox-rework/lib-combobox-rework.component.d.ts +5 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1$5 from '@angular/common';
|
|
2
2
|
import { NgIf, NgFor, DatePipe, NgClass, DOCUMENT, NgSwitch, NgSwitchCase, CommonModule, NgTemplateOutlet, TitleCasePipe as TitleCasePipe$1 } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Input, Component, EventEmitter, Output, Directive, Pipe,
|
|
4
|
+
import { Input, Component, EventEmitter, Output, Directive, Pipe, ViewChild, Injectable, input, Inject, HostListener, forwardRef, ViewChildren, output, TemplateRef, ContentChild, ChangeDetectionStrategy, HostBinding, NgModule, signal, inject } from '@angular/core';
|
|
5
5
|
import * as i1$2 from '@angular/forms';
|
|
6
6
|
import { UntypedFormGroup, UntypedFormArray, FormControl, Validators, FormsModule, ReactiveFormsModule, FormGroup, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
7
7
|
import * as i4 from '@angular/router';
|
|
@@ -3930,7 +3930,6 @@ class LibComboboxComponent {
|
|
|
3930
3930
|
}
|
|
3931
3931
|
// #endregion PUBLIC
|
|
3932
3932
|
// #endregion ==========> PROPERTIES <==========
|
|
3933
|
-
// #region ==========> INITIALIZATION <==========
|
|
3934
3933
|
constructor() {
|
|
3935
3934
|
// #region ==========> PROPERTIES <==========
|
|
3936
3935
|
// #region PROTECTED
|
|
@@ -4021,9 +4020,6 @@ class LibComboboxComponent {
|
|
|
4021
4020
|
ngOnDestroy() {
|
|
4022
4021
|
this._subscription.unsubscribe();
|
|
4023
4022
|
}
|
|
4024
|
-
// O que fazer quando o evento de redimensionamento ocorrer
|
|
4025
|
-
onResize() { this.adjustDropdownWidth(); }
|
|
4026
|
-
// #endregion ==========> INITIALIZATION <==========
|
|
4027
4023
|
// #region ==========> UTILS <==========
|
|
4028
4024
|
setValue(item) {
|
|
4029
4025
|
this.textoPesquisa = "";
|
|
@@ -4115,7 +4111,7 @@ class LibComboboxComponent {
|
|
|
4115
4111
|
}
|
|
4116
4112
|
reloadList() { this.reloadListChange.emit(this.textoPesquisa); }
|
|
4117
4113
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LibComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4118
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: LibComboboxComponent, isStandalone: true, selector: "lib-combobox", inputs: { control: "control", list: "list", labelText: "labelText", separator: "separator", libRequired: "libRequired", disabled: "disabled", mainPlaceholder: "mainPlaceholder", searchPlaceholder: "searchPlaceholder", theme: "theme", returnRecord: "returnRecord", additionalStringBold: "additionalStringBold", showErrorMessage: "showErrorMessage" }, outputs: { reloadListChange: "reloadListChange", changeValue: "changeValue", changePesquisa: "changePesquisa" },
|
|
4114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: LibComboboxComponent, isStandalone: true, selector: "lib-combobox", inputs: { control: "control", list: "list", labelText: "labelText", separator: "separator", libRequired: "libRequired", disabled: "disabled", mainPlaceholder: "mainPlaceholder", searchPlaceholder: "searchPlaceholder", theme: "theme", returnRecord: "returnRecord", additionalStringBold: "additionalStringBold", showErrorMessage: "showErrorMessage" }, outputs: { reloadListChange: "reloadListChange", changeValue: "changeValue", changePesquisa: "changePesquisa" }, viewQueries: [{ propertyName: "_mainInput", first: true, predicate: ["mainInput"], descendants: true }, { propertyName: "_searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "_dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n\n<label *ngIf=\"labelText && labelText !== ''\" class=\"form-label fw-bold d-flex align-items-center gap-1\" [id]=\"labelID\" [for]=\"comboboxID\" [libRequired]=\"isRequired\">\n <ng-content select=\"lib-icon[iconLeft]\"></ng-content>\n {{ labelText }}\n <ng-content select=\"lib-icon[iconRight]\"></ng-content>\n</label>\n\n<div class=\"input-group dropdown flex-fill glb-max-height-350px\">\n\n <!-- Este elemento ng-content com o atributo [btnLeft] permite que o usu\u00E1rio final forne\u00E7a conte\u00FAdo personalizado para ser exibido no lado esquerdo do combobox de pesquisa.\n Ao usar o atributo [btnLeft], o usu\u00E1rio pode facilmente adicionar bot\u00F5es ou outros elementos para melhorar a funcionalidade ou apar\u00EAncia do combobox de pesquisa. -->\n <ng-content select=\"[btnLeft]\"></ng-content>\n\n <input #mainInput class=\"form-select text-start rounded-end cursor-pointer\" type=\"text\"\n data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\" aria-expanded=\"false\" readonly\n [placeholder]=\"mainPlaceholder\" [formControl]=\"innerControl\" [class.is-invalid]=\"invalidControl\" [id]=\"comboboxID\"\n (click)=\"ariaExpanded = !ariaExpanded; searchInput.focus()\" (focus)=\"searchInput.focus()\">\n\n <ul #dropdownMenu class=\"dropdown-menu p-2 glb-max-height-350px overflow-y-scroll z-index-1020\" [class.show]=\"ariaExpanded\">\n <div class=\"input-group mb-2\">\n <input #searchInput type=\"text\" id=\"searchInput-{{comboboxID}}\" class=\"searchInput form-control glb-input-no-glow\" [placeholder]=\"searchPlaceholder\" (keyup.enter)=\"reloadList()\"\n [(ngModel)]=\"textoPesquisa\" (ngModelChange)=\"changePesquisa.emit(textoPesquisa)\" >\n <button class=\"btn btn-{{theme}}\" (click)=\"reloadList()\"> <lib-icon iconName=\"lupa\" iconSize=\"medium-small\" /> </button>\n </div>\n\n @if (list) {\n <li *ngIf=\"innerControl.value !== '' && innerControl.value !== null\" class=\"dropdown-item glb-cursor-pointer\" (click)=\"clearValue()\"> <span class=\"fw-bold\">Limpar op\u00E7\u00E3o selecionada</span> </li>\n @for (item of list | textFilter:textoPesquisa; track $index) {\n <li class=\"dropdown-item glb-cursor-pointer\" (click)=\"setValue(item)\">\n <span *ngIf=\"item.AdditionalStringProperty1 && item.AdditionalStringProperty1 !== ''\" class=\"glb-fs-12 d-inline-block w-125\" [class.fw-bold]=\"additionalStringBold\">\n {{ item.AdditionalStringProperty1 + (separator === undefined ? \"\" : \" \"+separator) }}\n </span> {{ item.LABEL }}\n </li>\n }\n @empty { <li class=\"dropdown-item fst-italic\">Nenhum registro encontrado com esta pesquisa...</li> }\n }\n @else { <li class=\"dropdown-item text-center\"> <div class=\"spinner-border\" role=\"status\"><span class=\"visually-hidden\">Carregando dados...</span></div> </li> }\n </ul>\n\n <!-- Este elemento ng-content com o atributo [btnRight] permite que o usu\u00E1rio final forne\u00E7a conte\u00FAdo personalizado para ser exibido no lado direito do combobox de pesquisa.\n Ao usar o atributo [btnRight], o usu\u00E1rio pode facilmente adicionar bot\u00F5es ou outros elementos para melhorar a funcionalidade ou apar\u00EAncia do combobox de pesquisa. -->\n <ng-content select=\"[btnRight]\"></ng-content>\n\n</div>\n\n<!-- #region MENSAGEM DE ERRO DE VALIDA\u00C7\u00C3O -->\n<lib-error-message *ngIf=\"showErrorMessage && invalidControl\" customMessage=\"Este campo \u00E9 obrigat\u00F3rio.\" />\n<!-- #endregion MENSAGEM DE ERRO DE VALIDA\u00C7\u00C3O -->", styles: [".glb-max-height-350px{max-height:350px!important}.form-label{font-size:16px!important}.z-index-1020{z-index:1020!important}.cursor-pointer{cursor:pointer!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RequiredDirective, selector: "label[libRequired], span[libRequired], p[libRequired]", inputs: ["libRequired", "requiredID"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LibIconsComponent, selector: "lib-icon", inputs: ["iconName", "iconColor", "iconSize", "iconFill"] }, { kind: "component", type: FieldErrorMessageComponent, selector: "app-field-error-message, lib-error-message", inputs: ["customMessage", "control", "label"] }, { kind: "pipe", type: TextFilterPipe, name: "textFilter" }] }); }
|
|
4119
4115
|
}
|
|
4120
4116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LibComboboxComponent, decorators: [{
|
|
4121
4117
|
type: Component,
|
|
@@ -4169,9 +4165,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4169
4165
|
}], _dropdownMenu: [{
|
|
4170
4166
|
type: ViewChild,
|
|
4171
4167
|
args: ['dropdownMenu']
|
|
4172
|
-
}], onResize: [{
|
|
4173
|
-
type: HostListener,
|
|
4174
|
-
args: ['window:resize', ['$event']]
|
|
4175
4168
|
}] } });
|
|
4176
4169
|
|
|
4177
4170
|
class InfraAuthentication {
|
|
@@ -4420,17 +4413,19 @@ class MessageService {
|
|
|
4420
4413
|
this.bsModalService = bsModalService;
|
|
4421
4414
|
}
|
|
4422
4415
|
// Exibe uma mesagem conforme o tipo (privado)
|
|
4423
|
-
showAlert(message, type, dismissTimeout, id) {
|
|
4416
|
+
showAlert(message, type, dismissTimeout, id, keepAlive) {
|
|
4424
4417
|
const initialState = {
|
|
4425
4418
|
message: message,
|
|
4426
4419
|
type: type,
|
|
4427
|
-
id: id
|
|
4420
|
+
id: id,
|
|
4428
4421
|
};
|
|
4429
4422
|
const bsModalRef = this.bsModalService.show(AlertComponent, {
|
|
4430
4423
|
initialState, class: 'modal-md', id: id
|
|
4431
4424
|
});
|
|
4432
|
-
if (
|
|
4433
|
-
|
|
4425
|
+
if (!keepAlive) {
|
|
4426
|
+
if (dismissTimeout) {
|
|
4427
|
+
setTimeout(() => bsModalRef.hide(), dismissTimeout);
|
|
4428
|
+
}
|
|
4434
4429
|
}
|
|
4435
4430
|
}
|
|
4436
4431
|
/** Exibe uma mensagem do tipo danger */
|
|
@@ -4438,20 +4433,20 @@ class MessageService {
|
|
|
4438
4433
|
this.showAlert(message, alertTypes.DANGER, 0, alertIds.DANGER);
|
|
4439
4434
|
}
|
|
4440
4435
|
/** Exibe uma mesagem do tipo success */
|
|
4441
|
-
showAlertSuccess(message) {
|
|
4442
|
-
this.showAlert(message, alertTypes.SUCCESS, 3000, alertIds.SUCCESS);
|
|
4436
|
+
showAlertSuccess(message, keepAlive) {
|
|
4437
|
+
this.showAlert(message, alertTypes.SUCCESS, 3000, alertIds.SUCCESS, keepAlive ? keepAlive : false);
|
|
4443
4438
|
}
|
|
4444
4439
|
/** Exibe uma mesagem do tipo info */
|
|
4445
|
-
showAlertInfo(message) {
|
|
4446
|
-
this.showAlert(message, alertTypes.INFO, 3000, alertIds.INFO);
|
|
4440
|
+
showAlertInfo(message, keepAlive) {
|
|
4441
|
+
this.showAlert(message, alertTypes.INFO, 3000, alertIds.INFO, keepAlive ? keepAlive : false);
|
|
4447
4442
|
}
|
|
4448
4443
|
/** Exibe uma mesagem do tipo primary */
|
|
4449
|
-
showAlertPrimary(message) {
|
|
4450
|
-
this.showAlert(message, alertTypes.PRIMARY, 3000, alertIds.PRIMARY);
|
|
4444
|
+
showAlertPrimary(message, keepAlive) {
|
|
4445
|
+
this.showAlert(message, alertTypes.PRIMARY, 3000, alertIds.PRIMARY, keepAlive ? keepAlive : false);
|
|
4451
4446
|
}
|
|
4452
4447
|
/** Exibe uma mesagem do tipo secondary */
|
|
4453
|
-
showAlertSecondary(message) {
|
|
4454
|
-
this.showAlert(message, alertTypes.SECONDARY, 3000, alertIds.SECONDARY);
|
|
4448
|
+
showAlertSecondary(message, keepAlive) {
|
|
4449
|
+
this.showAlert(message, alertTypes.SECONDARY, 3000, alertIds.SECONDARY, keepAlive ? keepAlive : false);
|
|
4455
4450
|
}
|
|
4456
4451
|
/** Exibe uma mesagem do tipo warning */
|
|
4457
4452
|
showAlertWarning(message) {
|
|
@@ -7980,7 +7975,19 @@ class LibComboboxReworkComponent {
|
|
|
7980
7975
|
if (Array.isArray(this.value)) {
|
|
7981
7976
|
if (this.value.length === 0)
|
|
7982
7977
|
return this.placeholder;
|
|
7983
|
-
|
|
7978
|
+
let extraSelected = 0;
|
|
7979
|
+
let formattedValue = "";
|
|
7980
|
+
this.value.forEach((e, index) => {
|
|
7981
|
+
if (index >= 2)
|
|
7982
|
+
extraSelected++;
|
|
7983
|
+
});
|
|
7984
|
+
return this.value.map((e, index) => {
|
|
7985
|
+
if (index < 2)
|
|
7986
|
+
return this.displayWith(e);
|
|
7987
|
+
return null;
|
|
7988
|
+
})
|
|
7989
|
+
.filter(e => e !== null)
|
|
7990
|
+
.join(', ') + (extraSelected > 0 ? ` e +${extraSelected} selecionados` : '');
|
|
7984
7991
|
}
|
|
7985
7992
|
return this.displayWith(this.value);
|
|
7986
7993
|
}
|
|
@@ -8035,7 +8042,10 @@ class LibComboboxReworkComponent {
|
|
|
8035
8042
|
});
|
|
8036
8043
|
}
|
|
8037
8044
|
ngAfterViewInit() {
|
|
8038
|
-
//
|
|
8045
|
+
// this.setMaxWidth();
|
|
8046
|
+
}
|
|
8047
|
+
ngAfterContentInit() {
|
|
8048
|
+
this.setMaxWidth();
|
|
8039
8049
|
}
|
|
8040
8050
|
ngOnChanges(changes) {
|
|
8041
8051
|
}
|
|
@@ -8043,6 +8053,8 @@ class LibComboboxReworkComponent {
|
|
|
8043
8053
|
this._destroy$.next();
|
|
8044
8054
|
this._destroy$.complete();
|
|
8045
8055
|
}
|
|
8056
|
+
// O que fazer quando o evento de redimensionamento ocorrer
|
|
8057
|
+
onResize() { this.setMaxWidth(); }
|
|
8046
8058
|
// #region ==========> UTILS <==========
|
|
8047
8059
|
filterItems(term) {
|
|
8048
8060
|
if (!term)
|
|
@@ -8131,19 +8143,32 @@ class LibComboboxReworkComponent {
|
|
|
8131
8143
|
this.closeDropdown();
|
|
8132
8144
|
}
|
|
8133
8145
|
}
|
|
8146
|
+
// #endregion UI
|
|
8147
|
+
setMaxWidth() {
|
|
8148
|
+
if (this.toggleButton) {
|
|
8149
|
+
const container = this.toggleButton?.nativeElement;
|
|
8150
|
+
const parent = this.toggleButton?.nativeElement.parentElement; // Pega dois níveis acima pois o primeiro nível é a div de dropdown
|
|
8151
|
+
console.log("parent?.scrollWidth", parent?.scrollWidth);
|
|
8152
|
+
console.log("parent?.clientWidth", parent?.clientWidth);
|
|
8153
|
+
container.style.minWidth = '100%';
|
|
8154
|
+
container.style.width = `${parent.scrollWidth}px`;
|
|
8155
|
+
console.log("parent?.scrollWidth", parent?.scrollWidth);
|
|
8156
|
+
}
|
|
8157
|
+
}
|
|
8134
8158
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LibComboboxReworkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8135
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: LibComboboxReworkComponent, isStandalone: true, selector: "lib-combobox-rework", inputs: { list: "list", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", noResultsText: "noResultsText", disabled: "disabled", multiple: "multiple", innerFilter: "innerFilter", customLabel: "customLabel", customValue: "customValue" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", filterButtonClick: "filterButtonClick" }, providers: [
|
|
8159
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: LibComboboxReworkComponent, isStandalone: true, selector: "lib-combobox-rework", inputs: { list: "list", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", noResultsText: "noResultsText", disabled: "disabled", multiple: "multiple", innerFilter: "innerFilter", customLabel: "customLabel", customValue: "customValue" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", filterButtonClick: "filterButtonClick" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [
|
|
8136
8160
|
{
|
|
8137
8161
|
provide: NG_VALUE_ACCESSOR,
|
|
8138
8162
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
8139
8163
|
multi: true
|
|
8140
8164
|
}
|
|
8141
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "leftButtonTemplate", first: true, predicate: ["leftButtonTemplate"], descendants: true, read: TemplateRef }, { propertyName: "rightButtonTemplate", first: true, predicate: ["rightButtonTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"reusable-combobox input-group
|
|
8165
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "leftButtonTemplate", first: true, predicate: ["leftButtonTemplate"], descendants: true, read: TemplateRef }, { propertyName: "rightButtonTemplate", first: true, predicate: ["rightButtonTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true, static: true }, { propertyName: "reusableComboboxContainer", first: true, predicate: ["reusableComboboxContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"reusable-combobox input-group\" [class.show]=\"isOpen\" (focusout)=\"onBlurOutside($event)\" #reusableComboboxContainer >\n @if (leftButtonTemplate) { <ng-container *ngTemplateOutlet=\"leftButtonTemplate\"></ng-container> }\n\n <div class=\"dropdown w-100\">\n <div #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start\" type=\"button\" data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\"\n [attr.aria-expanded]=\"isOpen\" [attr.aria-haspopup]=\"true\" [attr.aria-label]=\"placeholder\" [class.disabled]=\"disabled\"\n (click)=\"toggleDropdown()\" readonly \n [ngClass]=\"{\n 'rounded-start-0': leftButtonTemplate,\n 'rounded-end-0': rightButtonTemplate,\n }\" >\n <span class=\"w-100 overflow-hidden text-truncate\"> {{ displayValue() }} </span> \n </div>\n\n <div class=\"dropdown-menu p-2 w-100\" [class.show]=\"isOpen\" style=\"max-height: 320px; overflow-y: auto;\">\n <div class=\"dropdown-search input-group mb-2\">\n <input class=\"form-control form-control-sm\" type=\"search\" [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" aria-label=\"Pesquisar op\u00E7\u00F5es\" (keyup.enter)=\"filterButtonClick.emit(searchControl.value)\" />\n <button class=\"btn btn-sm btn-primary\" type=\"button\" (click)=\"filterButtonClick.emit(searchControl.value)\"> <lib-icon iconName=\"lupa\" iconSize=\"medium-small\" /> </button>\n </div>\n\n @if (multiple && selectedValues?.length) {\n <div class=\"d-flex flex-row gap-2 flex-wrap my-2\">\n <span *ngFor=\"let value of selectedValues; trackBy: trackByFn\" class=\"px-3 badge rounded-pill text-primary bg-primary-subtle\">\n {{ value[customLabel] }} <lib-icon class=\"glb-cursor-pointer\" iconName=\"fechar\" iconSize=\"small\" (click)=\"select(value)\" />\n </span>\n </div>\n }\n\n <!-- Se utilizar o filtro interno utiliza a propriedade de lista filteredItems$, caso contr\u00E1rio usa a pr\u00F3pria list pois ela ser\u00E1 filtrada pelo componente pai -->\n <ng-container *ngIf=\"(innerFilter ? (filteredItems$ | async) : list) as items\">\n @if (items.length === 0) { <div class=\"py-2 px-3 text-muted small\">{{ noResultsText }}</div> }\n\n @if (value !== '' && value !== null) {\n <button type=\"button\" class=\"dropdown-item d-flex align-items-center\" (click)=\"writeValue(null)\">\n <span class=\"fw-bold\">Limpar {{ multiple ? 'op\u00E7\u00F5es selecionadas' : 'op\u00E7\u00E3o selecionada' }}</span>\n </button>\n }\n\n <button *ngFor=\"let item of items; trackBy: trackByFn\" class=\"dropdown-item d-flex align-items-center\" type=\"button\"\n (click)=\"select(item)\" [attr.aria-selected]=\"isSelected(item)\" >\n\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item, selected: isSelected(item) }\"></ng-container>\n }\n @else {\n <div class=\"w-100 original\">\n <div class=\"d-flex justify-content-between\">\n <div>{{ (item[customLabel] ?? item[customValue]) }}</div>\n <small class=\"text-muted\" *ngIf=\"isSelected(item)\">\u2713</small>\n </div>\n </div>\n }\n </button>\n </ng-container>\n </div>\n </div>\n\n @if (rightButtonTemplate) { <ng-container *ngTemplateOutlet=\"rightButtonTemplate\"></ng-container> }\n</div>", styles: [".reusable-combobox{position:relative;display:flex;flex-wrap:nowrap;width:100%;max-width:100%}.reusable-combobox #toggle-button{box-sizing:border-box}.reusable-combobox .dropdown-menu{width:100%;box-shadow:0 6px 18px #00000014;border-radius:.5rem}.reusable-combobox .dropdown-item{cursor:pointer;border-radius:6px;transition:all .3s ease}.reusable-combobox .dropdown-item:hover:not(:focus){background-color:#f1f5f9}.reusable-combobox.compact .dropdown-menu{max-height:200px}.bg-primary-subtle{background-color:#d1dfe7!important}::-webkit-scrollbar{width:4px;background:transparent}::-webkit-scrollbar-thumb{background:#bbb;border-radius:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LibIconsComponent, selector: "lib-icon", inputs: ["iconName", "iconColor", "iconSize", "iconFill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8142
8166
|
}
|
|
8143
8167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LibComboboxReworkComponent, decorators: [{
|
|
8144
8168
|
type: Component,
|
|
8145
8169
|
args: [{ selector: 'lib-combobox-rework', imports: [
|
|
8146
8170
|
CommonModule,
|
|
8171
|
+
FormsModule,
|
|
8147
8172
|
ReactiveFormsModule,
|
|
8148
8173
|
LibIconsComponent,
|
|
8149
8174
|
TextTruncateDirective
|
|
@@ -8153,7 +8178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8153
8178
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
8154
8179
|
multi: true
|
|
8155
8180
|
}
|
|
8156
|
-
], template: "<div class=\"reusable-combobox input-group
|
|
8181
|
+
], template: "<div class=\"reusable-combobox input-group\" [class.show]=\"isOpen\" (focusout)=\"onBlurOutside($event)\" #reusableComboboxContainer >\n @if (leftButtonTemplate) { <ng-container *ngTemplateOutlet=\"leftButtonTemplate\"></ng-container> }\n\n <div class=\"dropdown w-100\">\n <div #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start\" type=\"button\" data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\"\n [attr.aria-expanded]=\"isOpen\" [attr.aria-haspopup]=\"true\" [attr.aria-label]=\"placeholder\" [class.disabled]=\"disabled\"\n (click)=\"toggleDropdown()\" readonly \n [ngClass]=\"{\n 'rounded-start-0': leftButtonTemplate,\n 'rounded-end-0': rightButtonTemplate,\n }\" >\n <span class=\"w-100 overflow-hidden text-truncate\"> {{ displayValue() }} </span> \n </div>\n\n <div class=\"dropdown-menu p-2 w-100\" [class.show]=\"isOpen\" style=\"max-height: 320px; overflow-y: auto;\">\n <div class=\"dropdown-search input-group mb-2\">\n <input class=\"form-control form-control-sm\" type=\"search\" [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" aria-label=\"Pesquisar op\u00E7\u00F5es\" (keyup.enter)=\"filterButtonClick.emit(searchControl.value)\" />\n <button class=\"btn btn-sm btn-primary\" type=\"button\" (click)=\"filterButtonClick.emit(searchControl.value)\"> <lib-icon iconName=\"lupa\" iconSize=\"medium-small\" /> </button>\n </div>\n\n @if (multiple && selectedValues?.length) {\n <div class=\"d-flex flex-row gap-2 flex-wrap my-2\">\n <span *ngFor=\"let value of selectedValues; trackBy: trackByFn\" class=\"px-3 badge rounded-pill text-primary bg-primary-subtle\">\n {{ value[customLabel] }} <lib-icon class=\"glb-cursor-pointer\" iconName=\"fechar\" iconSize=\"small\" (click)=\"select(value)\" />\n </span>\n </div>\n }\n\n <!-- Se utilizar o filtro interno utiliza a propriedade de lista filteredItems$, caso contr\u00E1rio usa a pr\u00F3pria list pois ela ser\u00E1 filtrada pelo componente pai -->\n <ng-container *ngIf=\"(innerFilter ? (filteredItems$ | async) : list) as items\">\n @if (items.length === 0) { <div class=\"py-2 px-3 text-muted small\">{{ noResultsText }}</div> }\n\n @if (value !== '' && value !== null) {\n <button type=\"button\" class=\"dropdown-item d-flex align-items-center\" (click)=\"writeValue(null)\">\n <span class=\"fw-bold\">Limpar {{ multiple ? 'op\u00E7\u00F5es selecionadas' : 'op\u00E7\u00E3o selecionada' }}</span>\n </button>\n }\n\n <button *ngFor=\"let item of items; trackBy: trackByFn\" class=\"dropdown-item d-flex align-items-center\" type=\"button\"\n (click)=\"select(item)\" [attr.aria-selected]=\"isSelected(item)\" >\n\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item, selected: isSelected(item) }\"></ng-container>\n }\n @else {\n <div class=\"w-100 original\">\n <div class=\"d-flex justify-content-between\">\n <div>{{ (item[customLabel] ?? item[customValue]) }}</div>\n <small class=\"text-muted\" *ngIf=\"isSelected(item)\">\u2713</small>\n </div>\n </div>\n }\n </button>\n </ng-container>\n </div>\n </div>\n\n @if (rightButtonTemplate) { <ng-container *ngTemplateOutlet=\"rightButtonTemplate\"></ng-container> }\n</div>", styles: [".reusable-combobox{position:relative;display:flex;flex-wrap:nowrap;width:100%;max-width:100%}.reusable-combobox #toggle-button{box-sizing:border-box}.reusable-combobox .dropdown-menu{width:100%;box-shadow:0 6px 18px #00000014;border-radius:.5rem}.reusable-combobox .dropdown-item{cursor:pointer;border-radius:6px;transition:all .3s ease}.reusable-combobox .dropdown-item:hover:not(:focus){background-color:#f1f5f9}.reusable-combobox.compact .dropdown-menu{max-height:200px}.bg-primary-subtle{background-color:#d1dfe7!important}::-webkit-scrollbar{width:4px;background:transparent}::-webkit-scrollbar-thumb{background:#bbb;border-radius:16px}\n"] }]
|
|
8157
8182
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
|
|
8158
8183
|
type: Input
|
|
8159
8184
|
}], placeholder: [{
|
|
@@ -8184,12 +8209,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8184
8209
|
}], toggleButton: [{
|
|
8185
8210
|
type: ViewChild,
|
|
8186
8211
|
args: ["toggleButton", { static: true }]
|
|
8212
|
+
}], reusableComboboxContainer: [{
|
|
8213
|
+
type: ViewChild,
|
|
8214
|
+
args: ["reusableComboboxContainer", { static: true }]
|
|
8187
8215
|
}], selectionChange: [{
|
|
8188
8216
|
type: Output
|
|
8189
8217
|
}], filterChange: [{
|
|
8190
8218
|
type: Output
|
|
8191
8219
|
}], filterButtonClick: [{
|
|
8192
8220
|
type: Output
|
|
8221
|
+
}], onResize: [{
|
|
8222
|
+
type: HostListener,
|
|
8223
|
+
args: ['window:resize', ['$event']]
|
|
8193
8224
|
}] } });
|
|
8194
8225
|
|
|
8195
8226
|
class OrderingComponent {
|