ngx-sp-infra 6.7.0 → 6.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-sp-infra.mjs +45 -19
- package/fesm2022/ngx-sp-infra.mjs.map +1 -1
- package/lib/message/confirm/confirm.component.d.ts +2 -2
- package/lib/widgets/combobox-multiple-choice/combobox-multiple-choice.component.d.ts +2 -3
- package/lib/widgets/lib-combobox-rework/lib-combobox-rework.component.d.ts +3 -3
- package/lib/widgets/table/table.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -658,8 +658,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
658
658
|
}] } });
|
|
659
659
|
|
|
660
660
|
class ConfirmComponent {
|
|
661
|
-
constructor(
|
|
662
|
-
this.
|
|
661
|
+
constructor(_bsModalRef) {
|
|
662
|
+
this._bsModalRef = _bsModalRef;
|
|
663
663
|
this.cancelText = 'Cancelar';
|
|
664
664
|
this.okText = 'Sim';
|
|
665
665
|
this.clickButton = new EventEmitter();
|
|
@@ -679,16 +679,44 @@ class ConfirmComponent {
|
|
|
679
679
|
this.confirmAndClose('cancelado');
|
|
680
680
|
}
|
|
681
681
|
confirmAndClose(value) {
|
|
682
|
-
this.
|
|
682
|
+
this._bsModalRef.hide();
|
|
683
683
|
this.confirmResult.next(value);
|
|
684
684
|
this.clickButton.emit(value);
|
|
685
685
|
}
|
|
686
686
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmComponent, deps: [{ token: i1$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
687
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ConfirmComponent, isStandalone: true, selector: "app-confirm", inputs: { title: "title", message: "message", cancelText: "cancelText", okText: "okText", okButton: "okButton", parametroOkButton: "parametroOkButton" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template:
|
|
687
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ConfirmComponent, isStandalone: true, selector: "app-confirm", inputs: { title: "title", message: "message", cancelText: "cancelText", okText: "okText", okButton: "okButton", parametroOkButton: "parametroOkButton" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: `
|
|
688
|
+
<div class="modal-content ">
|
|
689
|
+
<div class="modal-header">
|
|
690
|
+
<h5 class="modal-title">{{ title }}</h5>
|
|
691
|
+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
692
|
+
</div>
|
|
693
|
+
<div class="modal-body">
|
|
694
|
+
<div id="divMessage"></div>
|
|
695
|
+
</div>
|
|
696
|
+
<div class="modal-footer">
|
|
697
|
+
<button type="button" class="btn btn-primary" (click)="confirm()">{{ okText }}</button>
|
|
698
|
+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" (click)="closeConfirm()">{{ cancelText }}</button>
|
|
699
|
+
</div>
|
|
700
|
+
</div>
|
|
701
|
+
`, isInline: true, styles: [""] }); }
|
|
688
702
|
}
|
|
689
703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmComponent, decorators: [{
|
|
690
704
|
type: Component,
|
|
691
|
-
args: [{ selector: 'app-confirm', template:
|
|
705
|
+
args: [{ selector: 'app-confirm', template: `
|
|
706
|
+
<div class="modal-content ">
|
|
707
|
+
<div class="modal-header">
|
|
708
|
+
<h5 class="modal-title">{{ title }}</h5>
|
|
709
|
+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
710
|
+
</div>
|
|
711
|
+
<div class="modal-body">
|
|
712
|
+
<div id="divMessage"></div>
|
|
713
|
+
</div>
|
|
714
|
+
<div class="modal-footer">
|
|
715
|
+
<button type="button" class="btn btn-primary" (click)="confirm()">{{ okText }}</button>
|
|
716
|
+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" (click)="closeConfirm()">{{ cancelText }}</button>
|
|
717
|
+
</div>
|
|
718
|
+
</div>
|
|
719
|
+
` }]
|
|
692
720
|
}], ctorParameters: () => [{ type: i1$1.BsModalRef }], propDecorators: { title: [{
|
|
693
721
|
type: Input
|
|
694
722
|
}], message: [{
|
|
@@ -4696,7 +4724,6 @@ class ComboboxMultipleChoiceComponent {
|
|
|
4696
4724
|
this._isMobile = true;
|
|
4697
4725
|
}
|
|
4698
4726
|
});
|
|
4699
|
-
console.log("isMobile: " + this.isMobile);
|
|
4700
4727
|
}
|
|
4701
4728
|
LimitarTexto(texto, limite) {
|
|
4702
4729
|
if (texto == null || texto == "") {
|
|
@@ -6540,7 +6567,7 @@ class LibComboboxReworkComponent {
|
|
|
6540
6567
|
this._list$.next(value);
|
|
6541
6568
|
// Re-resolve the current value when the list changes
|
|
6542
6569
|
if (this._value)
|
|
6543
|
-
this.writeValue(this._value);
|
|
6570
|
+
this.writeValue(this._value, false);
|
|
6544
6571
|
}
|
|
6545
6572
|
// Getter/Setter para o valor
|
|
6546
6573
|
get value() { return this._value; }
|
|
@@ -6633,7 +6660,7 @@ class LibComboboxReworkComponent {
|
|
|
6633
6660
|
if (this.innerFilter)
|
|
6634
6661
|
this._search$.next(v ?? "");
|
|
6635
6662
|
else
|
|
6636
|
-
this.filterChange.emit(v);
|
|
6663
|
+
this.filterChange.emit(v ?? "");
|
|
6637
6664
|
});
|
|
6638
6665
|
this.searchControl.setValue('', { emitEvent: true });
|
|
6639
6666
|
this.registerObserver();
|
|
@@ -6669,7 +6696,7 @@ class LibComboboxReworkComponent {
|
|
|
6669
6696
|
return filtered;
|
|
6670
6697
|
}
|
|
6671
6698
|
// #region Seleção
|
|
6672
|
-
select(item) {
|
|
6699
|
+
select(item, emitEvent = false) {
|
|
6673
6700
|
if (this.multiple) {
|
|
6674
6701
|
this.selectedValues = Array.isArray(this.value) ? [...this.value] : [];
|
|
6675
6702
|
const index = this.selectedValues.findIndex(v => this.compare(v, item));
|
|
@@ -6680,13 +6707,13 @@ class LibComboboxReworkComponent {
|
|
|
6680
6707
|
if (this.selectedValues.length === 0)
|
|
6681
6708
|
this.selectedValues = null;
|
|
6682
6709
|
this.value = this.selectedValues;
|
|
6683
|
-
this.selectionChange.emit(this.selectedValues);
|
|
6684
6710
|
}
|
|
6685
6711
|
else {
|
|
6686
6712
|
this.value = item;
|
|
6687
|
-
this.selectionChange.emit(item);
|
|
6688
6713
|
this.closeDropdown();
|
|
6689
6714
|
}
|
|
6715
|
+
if (emitEvent)
|
|
6716
|
+
this.selectionChange.emit(this.value);
|
|
6690
6717
|
this._onTouched();
|
|
6691
6718
|
}
|
|
6692
6719
|
isSelected(item) {
|
|
@@ -6731,7 +6758,7 @@ class LibComboboxReworkComponent {
|
|
|
6731
6758
|
}
|
|
6732
6759
|
// #endregion Seleção
|
|
6733
6760
|
// #region VALUE_ACCESSOR do Angular
|
|
6734
|
-
writeValue(obj) {
|
|
6761
|
+
writeValue(obj, emitEvent = false) {
|
|
6735
6762
|
if (!obj)
|
|
6736
6763
|
this.selectedValues = null;
|
|
6737
6764
|
this._onTouched();
|
|
@@ -6742,13 +6769,13 @@ class LibComboboxReworkComponent {
|
|
|
6742
6769
|
if (this.selectedValues.length === 0)
|
|
6743
6770
|
this.selectedValues = null;
|
|
6744
6771
|
this.value = this.selectedValues;
|
|
6745
|
-
this.selectionChange.emit(this.selectedValues);
|
|
6746
6772
|
}
|
|
6747
6773
|
else {
|
|
6748
6774
|
const resolved = this.resolveValue(obj);
|
|
6749
6775
|
this.value = resolved;
|
|
6750
|
-
this.selectionChange.emit(resolved);
|
|
6751
6776
|
}
|
|
6777
|
+
if (emitEvent)
|
|
6778
|
+
this.selectionChange.emit(this.value);
|
|
6752
6779
|
this._cdr.markForCheck();
|
|
6753
6780
|
}
|
|
6754
6781
|
registerOnChange(fn) { this._onChange = fn; }
|
|
@@ -6835,7 +6862,7 @@ class LibComboboxReworkComponent {
|
|
|
6835
6862
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
6836
6863
|
multi: true
|
|
6837
6864
|
}
|
|
6838
|
-
], 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>", 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 }); }
|
|
6865
|
+
], 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, true)\" />\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, true)\" [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>", 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 }); }
|
|
6839
6866
|
}
|
|
6840
6867
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComboboxReworkComponent, decorators: [{
|
|
6841
6868
|
type: Component,
|
|
@@ -6850,7 +6877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
6850
6877
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
6851
6878
|
multi: true
|
|
6852
6879
|
}
|
|
6853
|
-
], 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>", 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"] }]
|
|
6880
|
+
], 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, true)\" />\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, true)\" [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>", 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"] }]
|
|
6854
6881
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { list: [{
|
|
6855
6882
|
type: Input,
|
|
6856
6883
|
args: [{ required: true }]
|
|
@@ -7162,7 +7189,7 @@ class LibComboboxComponent {
|
|
|
7162
7189
|
}
|
|
7163
7190
|
reloadList() { this.reloadListChange.emit(this.textoPesquisa); }
|
|
7164
7191
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7165
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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" }, queries: [{ propertyName: "btnLeft", first: true, predicate: BtnLeftDirective, descendants: true }, { propertyName: "btnRight", first: true, predicate: BtnRightDirective, descendants: true }], 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\n<div class=\"input-group\">\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 <div class=\"dropdown flex-fill glb-max-height-350px\">\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 [class.rounded-start-0]=\"btnLeft\" [class.rounded-end-0]=\"btnLeft\" >\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=\"
|
|
7192
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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" }, queries: [{ propertyName: "btnLeft", first: true, predicate: BtnLeftDirective, descendants: true }, { propertyName: "btnRight", first: true, predicate: BtnRightDirective, descendants: true }], 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\n<div class=\"input-group\">\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 <div class=\"dropdown flex-fill glb-max-height-350px\">\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 [class.rounded-start-0]=\"btnLeft\" [class.rounded-end-0]=\"btnLeft\" >\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=\"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 </div>\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</div>\n\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.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" }] }); }
|
|
7166
7193
|
}
|
|
7167
7194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComboboxComponent, decorators: [{
|
|
7168
7195
|
type: Component,
|
|
@@ -7174,7 +7201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
7174
7201
|
LibIconsComponent,
|
|
7175
7202
|
FieldErrorMessageComponent,
|
|
7176
7203
|
TextFilterPipe,
|
|
7177
|
-
], 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\n<div class=\"input-group\">\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 <div class=\"dropdown flex-fill glb-max-height-350px\">\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 [class.rounded-start-0]=\"btnLeft\" [class.rounded-end-0]=\"btnLeft\" >\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=\"
|
|
7204
|
+
], 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\n<div class=\"input-group\">\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 <div class=\"dropdown flex-fill glb-max-height-350px\">\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 [class.rounded-start-0]=\"btnLeft\" [class.rounded-end-0]=\"btnLeft\" >\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=\"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 </div>\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</div>\n\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"] }]
|
|
7178
7205
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
7179
7206
|
type: Input,
|
|
7180
7207
|
args: [{ required: true }]
|
|
@@ -8748,7 +8775,6 @@ class TableComponent {
|
|
|
8748
8775
|
this._isMobile = true;
|
|
8749
8776
|
}
|
|
8750
8777
|
});
|
|
8751
|
-
console.log("isMobile: " + this.isMobile);
|
|
8752
8778
|
}
|
|
8753
8779
|
/** Modifica a quantidade de itens a ser mostrada na lista.
|
|
8754
8780
|
* @param event parâmetro de evento que irá selecionar a nova quantidade. */
|