ngx-sp-infra 5.19.5 → 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.
|
@@ -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 {
|
|
@@ -7982,7 +7975,19 @@ class LibComboboxReworkComponent {
|
|
|
7982
7975
|
if (Array.isArray(this.value)) {
|
|
7983
7976
|
if (this.value.length === 0)
|
|
7984
7977
|
return this.placeholder;
|
|
7985
|
-
|
|
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` : '');
|
|
7986
7991
|
}
|
|
7987
7992
|
return this.displayWith(this.value);
|
|
7988
7993
|
}
|
|
@@ -8037,7 +8042,10 @@ class LibComboboxReworkComponent {
|
|
|
8037
8042
|
});
|
|
8038
8043
|
}
|
|
8039
8044
|
ngAfterViewInit() {
|
|
8040
|
-
//
|
|
8045
|
+
// this.setMaxWidth();
|
|
8046
|
+
}
|
|
8047
|
+
ngAfterContentInit() {
|
|
8048
|
+
this.setMaxWidth();
|
|
8041
8049
|
}
|
|
8042
8050
|
ngOnChanges(changes) {
|
|
8043
8051
|
}
|
|
@@ -8045,6 +8053,8 @@ class LibComboboxReworkComponent {
|
|
|
8045
8053
|
this._destroy$.next();
|
|
8046
8054
|
this._destroy$.complete();
|
|
8047
8055
|
}
|
|
8056
|
+
// O que fazer quando o evento de redimensionamento ocorrer
|
|
8057
|
+
onResize() { this.setMaxWidth(); }
|
|
8048
8058
|
// #region ==========> UTILS <==========
|
|
8049
8059
|
filterItems(term) {
|
|
8050
8060
|
if (!term)
|
|
@@ -8133,19 +8143,32 @@ class LibComboboxReworkComponent {
|
|
|
8133
8143
|
this.closeDropdown();
|
|
8134
8144
|
}
|
|
8135
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
|
+
}
|
|
8136
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 }); }
|
|
8137
|
-
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: [
|
|
8138
8160
|
{
|
|
8139
8161
|
provide: NG_VALUE_ACCESSOR,
|
|
8140
8162
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
8141
8163
|
multi: true
|
|
8142
8164
|
}
|
|
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
|
|
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 }); }
|
|
8144
8166
|
}
|
|
8145
8167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LibComboboxReworkComponent, decorators: [{
|
|
8146
8168
|
type: Component,
|
|
8147
8169
|
args: [{ selector: 'lib-combobox-rework', imports: [
|
|
8148
8170
|
CommonModule,
|
|
8171
|
+
FormsModule,
|
|
8149
8172
|
ReactiveFormsModule,
|
|
8150
8173
|
LibIconsComponent,
|
|
8151
8174
|
TextTruncateDirective
|
|
@@ -8155,7 +8178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8155
8178
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
8156
8179
|
multi: true
|
|
8157
8180
|
}
|
|
8158
|
-
], 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"] }]
|
|
8159
8182
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { list: [{
|
|
8160
8183
|
type: Input
|
|
8161
8184
|
}], placeholder: [{
|
|
@@ -8186,12 +8209,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8186
8209
|
}], toggleButton: [{
|
|
8187
8210
|
type: ViewChild,
|
|
8188
8211
|
args: ["toggleButton", { static: true }]
|
|
8212
|
+
}], reusableComboboxContainer: [{
|
|
8213
|
+
type: ViewChild,
|
|
8214
|
+
args: ["reusableComboboxContainer", { static: true }]
|
|
8189
8215
|
}], selectionChange: [{
|
|
8190
8216
|
type: Output
|
|
8191
8217
|
}], filterChange: [{
|
|
8192
8218
|
type: Output
|
|
8193
8219
|
}], filterButtonClick: [{
|
|
8194
8220
|
type: Output
|
|
8221
|
+
}], onResize: [{
|
|
8222
|
+
type: HostListener,
|
|
8223
|
+
args: ['window:resize', ['$event']]
|
|
8195
8224
|
}] } });
|
|
8196
8225
|
|
|
8197
8226
|
class OrderingComponent {
|