ngx-sp-infra 6.5.15 → 6.5.16
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.
|
@@ -6428,9 +6428,9 @@ class LibComboboxReworkComponent {
|
|
|
6428
6428
|
set list(value) {
|
|
6429
6429
|
this._list = value;
|
|
6430
6430
|
// Re-resolve the current value when the list changes
|
|
6431
|
-
console.log('set list => _value', this._value);
|
|
6432
6431
|
if (this._value)
|
|
6433
6432
|
this.writeValue(this._value);
|
|
6433
|
+
this._cdr.detectChanges();
|
|
6434
6434
|
}
|
|
6435
6435
|
// Getter/Setter para o valor
|
|
6436
6436
|
get value() { return this._value; }
|
|
@@ -6619,8 +6619,6 @@ class LibComboboxReworkComponent {
|
|
|
6619
6619
|
if (!obj)
|
|
6620
6620
|
this.selectedValues = null;
|
|
6621
6621
|
this._onTouched();
|
|
6622
|
-
console.log('multiple', this.multiple);
|
|
6623
|
-
console.log('obj', obj);
|
|
6624
6622
|
if (this.multiple && obj) {
|
|
6625
6623
|
this.selectedValues = Array.isArray(obj)
|
|
6626
6624
|
? obj.map(val => this.resolveValue(val)).filter((v) => v !== null)
|
|
@@ -6633,7 +6631,6 @@ class LibComboboxReworkComponent {
|
|
|
6633
6631
|
else {
|
|
6634
6632
|
const resolved = this.resolveValue(obj);
|
|
6635
6633
|
this.value = resolved;
|
|
6636
|
-
console.log('writeValue() => resolved', resolved);
|
|
6637
6634
|
this.selectionChange.emit(resolved);
|
|
6638
6635
|
}
|
|
6639
6636
|
this._cdr.markForCheck();
|
|
@@ -6723,7 +6720,7 @@ class LibComboboxReworkComponent {
|
|
|
6723
6720
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
6724
6721
|
multi: true
|
|
6725
6722
|
}
|
|
6726
|
-
], 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\n <input #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start w-100 overflow-hidden text-truncate\" 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()\" [value]=\"displayValue()\" [placeholder]=\"placeholder\" readonly\n [ngClass]=\"{\n 'rounded-start-0': leftButtonTemplate,\n 'rounded-end-0': rightButtonTemplate,\n }\" />\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
|
|
6723
|
+
], 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\n <input #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start w-100 overflow-hidden text-truncate\" 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()\" [value]=\"displayValue()\" [placeholder]=\"placeholder\" readonly\n [ngClass]=\"{\n 'rounded-start-0': leftButtonTemplate,\n 'rounded-end-0': rightButtonTemplate,\n }\" />\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 [ngClass]=\"{ 'text-primary fw-bold': isSelected(item) }\">\n <!-- Se o valor do ID e do LABEL for vazio exibe apenas um risquinho para identificar que h\u00E1 uma op\u00E7\u00E3o ali -->\n @if ((item[customLabel] ?? item[customValue]) === '') {\n <span class=\"fst-italic text-muted\">Nenhum t\u00EDtulo informado para esta op\u00E7\u00E3o</span>\n }\n @else {\n {{ (item[customLabel] ?? item[customValue]) }}\n }\n </div>\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}.disabled{background-color:#e9ecef!important}.dropdown-item{min-height:32px!important}\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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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 }); }
|
|
6727
6724
|
}
|
|
6728
6725
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibComboboxReworkComponent, decorators: [{
|
|
6729
6726
|
type: Component,
|
|
@@ -6738,7 +6735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6738
6735
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
6739
6736
|
multi: true
|
|
6740
6737
|
}
|
|
6741
|
-
], 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\n <input #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start w-100 overflow-hidden text-truncate\" 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()\" [value]=\"displayValue()\" [placeholder]=\"placeholder\" readonly\n [ngClass]=\"{\n 'rounded-start-0': leftButtonTemplate,\n 'rounded-end-0': rightButtonTemplate,\n }\" />\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
|
|
6738
|
+
], 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\n <input #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start w-100 overflow-hidden text-truncate\" 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()\" [value]=\"displayValue()\" [placeholder]=\"placeholder\" readonly\n [ngClass]=\"{\n 'rounded-start-0': leftButtonTemplate,\n 'rounded-end-0': rightButtonTemplate,\n }\" />\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 [ngClass]=\"{ 'text-primary fw-bold': isSelected(item) }\">\n <!-- Se o valor do ID e do LABEL for vazio exibe apenas um risquinho para identificar que h\u00E1 uma op\u00E7\u00E3o ali -->\n @if ((item[customLabel] ?? item[customValue]) === '') {\n <span class=\"fst-italic text-muted\">Nenhum t\u00EDtulo informado para esta op\u00E7\u00E3o</span>\n }\n @else {\n {{ (item[customLabel] ?? item[customValue]) }}\n }\n </div>\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}.disabled{background-color:#e9ecef!important}.dropdown-item{min-height:32px!important}\n"] }]
|
|
6742
6739
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { list: [{
|
|
6743
6740
|
type: Input,
|
|
6744
6741
|
args: [{ required: true }]
|
|
@@ -6815,6 +6812,7 @@ class LibComboboxComponent {
|
|
|
6815
6812
|
set ariaExpanded(value) {
|
|
6816
6813
|
this._ariaExpanded = value;
|
|
6817
6814
|
this.adjustDropdownWidth();
|
|
6815
|
+
this._cdr.detectChanges();
|
|
6818
6816
|
if (value === false) {
|
|
6819
6817
|
this.textoPesquisa = "";
|
|
6820
6818
|
// Validação para caso o input de pesquisa esteja escondido
|
|
@@ -6862,7 +6860,8 @@ class LibComboboxComponent {
|
|
|
6862
6860
|
}
|
|
6863
6861
|
// #endregion PUBLIC
|
|
6864
6862
|
// #endregion ==========> PROPERTIES <==========
|
|
6865
|
-
constructor() {
|
|
6863
|
+
constructor(_cdr) {
|
|
6864
|
+
this._cdr = _cdr;
|
|
6866
6865
|
// #region ==========> PROPERTIES <==========
|
|
6867
6866
|
// #region PROTECTED
|
|
6868
6867
|
this.textoPesquisa = "";
|
|
@@ -6929,6 +6928,7 @@ class LibComboboxComponent {
|
|
|
6929
6928
|
* @type {EventEmitter<string>} */
|
|
6930
6929
|
this.changePesquisa = new EventEmitter();
|
|
6931
6930
|
this.showSearchInput = false;
|
|
6931
|
+
this._cdr.markForCheck();
|
|
6932
6932
|
}
|
|
6933
6933
|
ngOnInit() {
|
|
6934
6934
|
this.comboboxID = `lib-combobox-${Math.random() * 100}`;
|
|
@@ -7046,8 +7046,8 @@ class LibComboboxComponent {
|
|
|
7046
7046
|
}
|
|
7047
7047
|
}
|
|
7048
7048
|
reloadList() { this.reloadListChange.emit(this.textoPesquisa); }
|
|
7049
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7050
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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\" [class.text-muted]=\"innerControl.value == null\" [formControl]=\"innerControl\" [class.is-invalid]=\"invalidControl\" [id]=\"comboboxID\"\n (click)=\"ariaExpanded = !ariaExpanded; focusSearchInput()\" (focus)=\"focusSearchInput()\">\n\n <ul #dropdownMenu class=\"dropdown-menu p-2 glb-max-height-350px overflow-y-scroll z-index-1020\" [class.show]=\"ariaExpanded\">\n @if(showSearchInput){\n
|
|
7049
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibComboboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7050
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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\" [class.text-muted]=\"innerControl.value == null\" [formControl]=\"innerControl\" [class.is-invalid]=\"invalidControl\" [id]=\"comboboxID\"\n (click)=\"ariaExpanded = !ariaExpanded; focusSearchInput()\" (focus)=\"focusSearchInput()\">\n\n <ul #dropdownMenu class=\"dropdown-menu p-2 glb-max-height-350px overflow-y-scroll z-index-1020\" [class.show]=\"ariaExpanded\">\n @if(showSearchInput){\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\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}.dropdown-menu{position:relative}\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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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" }] }); }
|
|
7051
7051
|
}
|
|
7052
7052
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibComboboxComponent, decorators: [{
|
|
7053
7053
|
type: Component,
|
|
@@ -7059,8 +7059,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7059
7059
|
LibIconsComponent,
|
|
7060
7060
|
FieldErrorMessageComponent,
|
|
7061
7061
|
TextFilterPipe,
|
|
7062
|
-
], 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\" [class.text-muted]=\"innerControl.value == null\" [formControl]=\"innerControl\" [class.is-invalid]=\"invalidControl\" [id]=\"comboboxID\"\n (click)=\"ariaExpanded = !ariaExpanded; focusSearchInput()\" (focus)=\"focusSearchInput()\">\n\n <ul #dropdownMenu class=\"dropdown-menu p-2 glb-max-height-350px overflow-y-scroll z-index-1020\" [class.show]=\"ariaExpanded\">\n @if(showSearchInput){\n
|
|
7063
|
-
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
7062
|
+
], 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\" [class.text-muted]=\"innerControl.value == null\" [formControl]=\"innerControl\" [class.is-invalid]=\"invalidControl\" [id]=\"comboboxID\"\n (click)=\"ariaExpanded = !ariaExpanded; focusSearchInput()\" (focus)=\"focusSearchInput()\">\n\n <ul #dropdownMenu class=\"dropdown-menu p-2 glb-max-height-350px overflow-y-scroll z-index-1020\" [class.show]=\"ariaExpanded\">\n @if(showSearchInput){\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\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}.dropdown-menu{position:relative}\n"] }]
|
|
7063
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { control: [{
|
|
7064
7064
|
type: Input,
|
|
7065
7065
|
args: [{ required: true }]
|
|
7066
7066
|
}], list: [{
|