ngx-sp-infra 5.19.5 → 5.19.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,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 {
|
|
@@ -7976,22 +7969,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7976
7969
|
}] } });
|
|
7977
7970
|
|
|
7978
7971
|
class LibComboboxReworkComponent {
|
|
7972
|
+
// Getter/Setter para o valor
|
|
7973
|
+
get value() { return this._value; }
|
|
7974
|
+
set value(val) {
|
|
7975
|
+
if (val !== this._value) {
|
|
7976
|
+
this._value = val;
|
|
7977
|
+
this._onChange(val); // Notifica o FormControl sobre a mudança
|
|
7978
|
+
}
|
|
7979
|
+
}
|
|
7979
7980
|
displayValue() {
|
|
7980
7981
|
if (!this.value)
|
|
7981
7982
|
return this.placeholder;
|
|
7982
7983
|
if (Array.isArray(this.value)) {
|
|
7983
7984
|
if (this.value.length === 0)
|
|
7984
7985
|
return this.placeholder;
|
|
7985
|
-
|
|
7986
|
+
let extraSelected = 0;
|
|
7987
|
+
this.value.forEach((e, index) => {
|
|
7988
|
+
if (index >= 2)
|
|
7989
|
+
extraSelected++;
|
|
7990
|
+
});
|
|
7991
|
+
// Filtra o valor para exibir até dois valores selecionados, se passar disso mostra "e +{n} selecionado(s)"
|
|
7992
|
+
return this.value.map((e, index) => {
|
|
7993
|
+
if (index < 2)
|
|
7994
|
+
return this.displayWith(e);
|
|
7995
|
+
return null;
|
|
7996
|
+
})
|
|
7997
|
+
.filter(e => e !== null)
|
|
7998
|
+
.join(', ') + (extraSelected > 0 ? ` e +${extraSelected} selecionado(s)` : '');
|
|
7986
7999
|
}
|
|
7987
8000
|
return this.displayWith(this.value);
|
|
7988
8001
|
}
|
|
7989
8002
|
// #endregion PUBLIC
|
|
7990
8003
|
// #endregion ==========> PROPERTIES <==========
|
|
7991
|
-
constructor(_cdr) {
|
|
8004
|
+
constructor(_cdr, _elementRef) {
|
|
7992
8005
|
this._cdr = _cdr;
|
|
7993
|
-
|
|
7994
|
-
|
|
8006
|
+
this._elementRef = _elementRef;
|
|
8007
|
+
/** Valor interno do componente */
|
|
8008
|
+
this._value = null;
|
|
7995
8009
|
this._search$ = new BehaviorSubject("");
|
|
7996
8010
|
this._onTouched = () => { };
|
|
7997
8011
|
this._onChange = (_) => { };
|
|
@@ -8010,12 +8024,23 @@ class LibComboboxReworkComponent {
|
|
|
8010
8024
|
this.selectionChange = new EventEmitter();
|
|
8011
8025
|
this.filterChange = new EventEmitter();
|
|
8012
8026
|
this.filterButtonClick = new EventEmitter();
|
|
8013
|
-
this.value = null;
|
|
8014
8027
|
this.selectedValues = null;
|
|
8028
|
+
this.invalid = false;
|
|
8015
8029
|
this.isOpen = false;
|
|
8016
8030
|
this.searchControl = new FormControl("");
|
|
8017
8031
|
this.filteredItems$ = this._search$.pipe(debounceTime(150), distinctUntilChanged(), map((term) => this.filterItems(term)));
|
|
8018
|
-
this.
|
|
8032
|
+
this.compare = (a, b) => {
|
|
8033
|
+
if (!a || !b)
|
|
8034
|
+
return false;
|
|
8035
|
+
const recA = a;
|
|
8036
|
+
const recB = b;
|
|
8037
|
+
if (a === b)
|
|
8038
|
+
return true;
|
|
8039
|
+
else if ((recA[this.customValue] === recB[this.customValue]) || (recA[this.customLabel] === recB[this.customLabel]))
|
|
8040
|
+
return true;
|
|
8041
|
+
return false;
|
|
8042
|
+
};
|
|
8043
|
+
// public compareWith: (a: T, b: T) => boolean = (a, b) => a === b;
|
|
8019
8044
|
this.displayWith = (item) => {
|
|
8020
8045
|
if (!item)
|
|
8021
8046
|
return '';
|
|
@@ -8035,16 +8060,24 @@ class LibComboboxReworkComponent {
|
|
|
8035
8060
|
else
|
|
8036
8061
|
this.filterChange.emit(v);
|
|
8037
8062
|
});
|
|
8063
|
+
this.registerObserver();
|
|
8038
8064
|
}
|
|
8039
8065
|
ngAfterViewInit() {
|
|
8040
|
-
//
|
|
8066
|
+
// [...]
|
|
8067
|
+
}
|
|
8068
|
+
ngAfterContentInit() {
|
|
8069
|
+
this.setMaxWidth();
|
|
8041
8070
|
}
|
|
8042
8071
|
ngOnChanges(changes) {
|
|
8072
|
+
// [...]
|
|
8043
8073
|
}
|
|
8044
8074
|
ngOnDestroy() {
|
|
8045
8075
|
this._destroy$.next();
|
|
8046
8076
|
this._destroy$.complete();
|
|
8077
|
+
this.mutationObserver.disconnect();
|
|
8047
8078
|
}
|
|
8079
|
+
// O que fazer quando o evento de redimensionamento da tela ocorrer
|
|
8080
|
+
onResize() { this.setMaxWidth(); }
|
|
8048
8081
|
// #region ==========> UTILS <==========
|
|
8049
8082
|
filterItems(term) {
|
|
8050
8083
|
if (!term)
|
|
@@ -8061,7 +8094,7 @@ class LibComboboxReworkComponent {
|
|
|
8061
8094
|
select(item) {
|
|
8062
8095
|
if (this.multiple) {
|
|
8063
8096
|
this.selectedValues = Array.isArray(this.value) ? [...this.value] : [];
|
|
8064
|
-
const index = this.selectedValues.findIndex(v => this.
|
|
8097
|
+
const index = this.selectedValues.findIndex(v => this.compare(v, item));
|
|
8065
8098
|
if (index > -1)
|
|
8066
8099
|
this.selectedValues.splice(index, 1);
|
|
8067
8100
|
else
|
|
@@ -8084,32 +8117,39 @@ class LibComboboxReworkComponent {
|
|
|
8084
8117
|
if (!item || !this.value)
|
|
8085
8118
|
return false;
|
|
8086
8119
|
if (this.multiple && Array.isArray(this.value)) {
|
|
8087
|
-
return this.value.some(v => this.
|
|
8120
|
+
return this.value.some(v => this.compare(v, item));
|
|
8088
8121
|
}
|
|
8089
|
-
return this.
|
|
8122
|
+
return this.compare(item, this.value);
|
|
8090
8123
|
}
|
|
8091
8124
|
// #endregion Seleção
|
|
8092
8125
|
// #region VALUE_ACCESSOR do Angular
|
|
8093
8126
|
writeValue(obj) {
|
|
8094
8127
|
if (!obj)
|
|
8095
8128
|
this.selectedValues = null;
|
|
8096
|
-
this.value = obj;
|
|
8097
8129
|
this._onTouched();
|
|
8098
|
-
this.
|
|
8130
|
+
if (this.multiple && obj) {
|
|
8131
|
+
this.selectedValues = Array.isArray(obj) ? [...obj] : [];
|
|
8132
|
+
if (this.selectedValues.length === 0)
|
|
8133
|
+
this.selectedValues = null;
|
|
8134
|
+
this.value = this.selectedValues;
|
|
8135
|
+
this._onChange(this.selectedValues);
|
|
8136
|
+
this.selectionChange.emit(this.selectedValues);
|
|
8137
|
+
}
|
|
8138
|
+
else {
|
|
8139
|
+
this.value = obj;
|
|
8140
|
+
this._onChange(obj);
|
|
8141
|
+
this.selectionChange.emit(obj);
|
|
8142
|
+
}
|
|
8099
8143
|
this._cdr.markForCheck();
|
|
8100
8144
|
}
|
|
8101
|
-
registerOnChange(fn) {
|
|
8102
|
-
|
|
8103
|
-
}
|
|
8104
|
-
registerOnTouched(fn) {
|
|
8105
|
-
this._onTouched = fn;
|
|
8106
|
-
}
|
|
8107
|
-
// #endregion VALUE_ACCESSOR do Angular
|
|
8108
|
-
// #region UI
|
|
8145
|
+
registerOnChange(fn) { this._onChange = fn; }
|
|
8146
|
+
registerOnTouched(fn) { this._onTouched = fn; }
|
|
8109
8147
|
setDisabledState(isDisabled) {
|
|
8110
8148
|
this.disabled = isDisabled;
|
|
8111
8149
|
this._cdr.markForCheck();
|
|
8112
8150
|
}
|
|
8151
|
+
// #endregion VALUE_ACCESSOR do Angular
|
|
8152
|
+
// #region UI
|
|
8113
8153
|
toggleDropdown() {
|
|
8114
8154
|
if (this.disabled)
|
|
8115
8155
|
return;
|
|
@@ -8123,6 +8163,19 @@ class LibComboboxReworkComponent {
|
|
|
8123
8163
|
}
|
|
8124
8164
|
this._cdr.markForCheck();
|
|
8125
8165
|
}
|
|
8166
|
+
openDropdown() {
|
|
8167
|
+
if (this.disabled)
|
|
8168
|
+
return;
|
|
8169
|
+
this.isOpen = true;
|
|
8170
|
+
if (this.isOpen) {
|
|
8171
|
+
this.searchControl.setValue("", { emitEvent: true });
|
|
8172
|
+
setTimeout(() => {
|
|
8173
|
+
const inputEl = document.querySelector('.reusable-combobox .dropdown-search input');
|
|
8174
|
+
inputEl?.focus();
|
|
8175
|
+
}, 0);
|
|
8176
|
+
}
|
|
8177
|
+
this._cdr.markForCheck();
|
|
8178
|
+
}
|
|
8126
8179
|
closeDropdown() {
|
|
8127
8180
|
this.isOpen = false;
|
|
8128
8181
|
this._cdr.markForCheck();
|
|
@@ -8133,30 +8186,64 @@ class LibComboboxReworkComponent {
|
|
|
8133
8186
|
this.closeDropdown();
|
|
8134
8187
|
}
|
|
8135
8188
|
}
|
|
8136
|
-
|
|
8137
|
-
|
|
8189
|
+
/** Define a largura máxima em pixels com base na largura do container pai
|
|
8190
|
+
*
|
|
8191
|
+
* Esta abordagem foi necessária pois o elemento em questão constantemente aumentava sua largura para acomodar o seu valor interno, independente das regras CSS impostas.
|
|
8192
|
+
*
|
|
8193
|
+
* A solução mais rápida era definir uma largura em pixels fixa na inicialização, o que não é o ideal por questões de responsividade, portanto este método é chamado em caso de resize da tela também
|
|
8194
|
+
*/
|
|
8195
|
+
setMaxWidth() {
|
|
8196
|
+
if (this.toggleButton) {
|
|
8197
|
+
const container = this.toggleButton?.nativeElement;
|
|
8198
|
+
const parent = this.toggleButton?.nativeElement.parentElement;
|
|
8199
|
+
container.style.minWidth = '100%';
|
|
8200
|
+
container.style.width = `${parent.scrollWidth}px`;
|
|
8201
|
+
}
|
|
8202
|
+
}
|
|
8203
|
+
// #endregion UI
|
|
8204
|
+
// #region Mutation Observer
|
|
8205
|
+
registerObserver() {
|
|
8206
|
+
this.mutationObserver = new MutationObserver(mutations => {
|
|
8207
|
+
mutations.forEach(mut => {
|
|
8208
|
+
if (mut.type === 'attributes' && mut.attributeName === 'class')
|
|
8209
|
+
this.checkInvalidClass();
|
|
8210
|
+
});
|
|
8211
|
+
});
|
|
8212
|
+
this.mutationObserver.observe(this._elementRef.nativeElement, {
|
|
8213
|
+
attributes: true,
|
|
8214
|
+
attributeFilter: ['class', 'disabled']
|
|
8215
|
+
});
|
|
8216
|
+
setTimeout(() => this.checkInvalidClass());
|
|
8217
|
+
}
|
|
8218
|
+
checkInvalidClass() {
|
|
8219
|
+
const hasInvalid = this._elementRef.nativeElement.classList.contains('is-invalid');
|
|
8220
|
+
this.invalid = hasInvalid;
|
|
8221
|
+
this._cdr.markForCheck();
|
|
8222
|
+
}
|
|
8223
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LibComboboxReworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8224
|
+
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: [
|
|
8138
8225
|
{
|
|
8139
8226
|
provide: NG_VALUE_ACCESSOR,
|
|
8140
8227
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
8141
8228
|
multi: true
|
|
8142
8229
|
}
|
|
8143
|
-
], 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
|
|
8230
|
+
], 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\" [class.show]=\"isOpen\" (focusout)=\"onBlurOutside($event)\" >\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\"\n data-bs-auto-close=\"outside\" [attr.aria-expanded]=\"isOpen\" [attr.aria-haspopup]=\"true\" [attr.aria-label]=\"placeholder\" [class.disabled]=\"disabled\"\n [class.is-invalid]=\"invalid\" (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>\n", 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 }); }
|
|
8144
8231
|
}
|
|
8145
8232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LibComboboxReworkComponent, decorators: [{
|
|
8146
8233
|
type: Component,
|
|
8147
8234
|
args: [{ selector: 'lib-combobox-rework', imports: [
|
|
8148
8235
|
CommonModule,
|
|
8236
|
+
FormsModule,
|
|
8149
8237
|
ReactiveFormsModule,
|
|
8150
|
-
LibIconsComponent
|
|
8151
|
-
TextTruncateDirective
|
|
8238
|
+
LibIconsComponent
|
|
8152
8239
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
8153
8240
|
{
|
|
8154
8241
|
provide: NG_VALUE_ACCESSOR,
|
|
8155
8242
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
8156
8243
|
multi: true
|
|
8157
8244
|
}
|
|
8158
|
-
], template: "<div class=\"reusable-combobox input-group
|
|
8159
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
|
|
8245
|
+
], template: "<div class=\"reusable-combobox input-group\" [class.show]=\"isOpen\" (focusout)=\"onBlurOutside($event)\" >\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\"\n data-bs-auto-close=\"outside\" [attr.aria-expanded]=\"isOpen\" [attr.aria-haspopup]=\"true\" [attr.aria-label]=\"placeholder\" [class.disabled]=\"disabled\"\n [class.is-invalid]=\"invalid\" (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>\n", 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"] }]
|
|
8246
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { list: [{
|
|
8160
8247
|
type: Input
|
|
8161
8248
|
}], placeholder: [{
|
|
8162
8249
|
type: Input
|
|
@@ -8192,6 +8279,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8192
8279
|
type: Output
|
|
8193
8280
|
}], filterButtonClick: [{
|
|
8194
8281
|
type: Output
|
|
8282
|
+
}], onResize: [{
|
|
8283
|
+
type: HostListener,
|
|
8284
|
+
args: ['window:resize', ['$event']]
|
|
8195
8285
|
}] } });
|
|
8196
8286
|
|
|
8197
8287
|
class OrderingComponent {
|