ngx-sp-infra 6.22.7 → 6.22.8
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.
|
@@ -8268,24 +8268,13 @@ class LibComboboxReworkComponent {
|
|
|
8268
8268
|
if (this.isOpen) {
|
|
8269
8269
|
this.searchControl.setValue("", { emitEvent: true });
|
|
8270
8270
|
setTimeout(() => {
|
|
8271
|
+
this.dropdownMenu?.nativeElement.scrollTo({ top: 0, behavior: 'auto' });
|
|
8271
8272
|
const inputEl = document.querySelector('.reusable-combobox .dropdown-search input');
|
|
8272
8273
|
inputEl?.focus();
|
|
8273
8274
|
}, 0);
|
|
8274
8275
|
}
|
|
8275
8276
|
this._cdr.markForCheck();
|
|
8276
8277
|
}
|
|
8277
|
-
// public openDropdown() {
|
|
8278
|
-
// if (this.disabled) return;
|
|
8279
|
-
// this.isOpen = true;
|
|
8280
|
-
// if (this.isOpen) {
|
|
8281
|
-
// this.searchControl.setValue("", { emitEvent: true });
|
|
8282
|
-
// setTimeout(() => {
|
|
8283
|
-
// const inputEl: HTMLInputElement | null = document.querySelector('.reusable-combobox .dropdown-search input');
|
|
8284
|
-
// inputEl?.focus();
|
|
8285
|
-
// }, 0);
|
|
8286
|
-
// }
|
|
8287
|
-
// this._cdr.markForCheck();
|
|
8288
|
-
// }
|
|
8289
8278
|
closeDropdown() {
|
|
8290
8279
|
this.isOpen = false;
|
|
8291
8280
|
this._cdr.markForCheck();
|
|
@@ -8337,7 +8326,7 @@ class LibComboboxReworkComponent {
|
|
|
8337
8326
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
8338
8327
|
multi: true
|
|
8339
8328
|
}
|
|
8340
|
-
], 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 glb-cursor-pointer\" 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
|
|
8329
|
+
], 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: "dropdownMenu", first: true, predicate: ["dropdownMenu"], 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 glb-cursor-pointer\" 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 #dropdownMenu class=\"dropdown-menu p-2 w-100\" [class.show]=\"isOpen\" style=\"max-height: 320px; overflow-y: auto;\" >\n <div class=\"sticky-header rounded p-3\">\n <div class=\"dropdown-search input-group\">\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 </div>\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 .sticky-header{position:sticky;top:0;z-index:10;background:#f1f5f9;box-shadow:0 2px 4px #00000014}.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$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$6.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 }); }
|
|
8341
8330
|
}
|
|
8342
8331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LibComboboxReworkComponent, decorators: [{
|
|
8343
8332
|
type: Component,
|
|
@@ -8352,7 +8341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
8352
8341
|
useExisting: forwardRef(() => LibComboboxReworkComponent),
|
|
8353
8342
|
multi: true
|
|
8354
8343
|
}
|
|
8355
|
-
], 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 glb-cursor-pointer\" 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
|
|
8344
|
+
], 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 glb-cursor-pointer\" 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 #dropdownMenu class=\"dropdown-menu p-2 w-100\" [class.show]=\"isOpen\" style=\"max-height: 320px; overflow-y: auto;\" >\n <div class=\"sticky-header rounded p-3\">\n <div class=\"dropdown-search input-group\">\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 </div>\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 .sticky-header{position:sticky;top:0;z-index:10;background:#f1f5f9;box-shadow:0 2px 4px #00000014}.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"] }]
|
|
8356
8345
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { list: [{
|
|
8357
8346
|
type: Input,
|
|
8358
8347
|
args: [{ required: true }]
|
|
@@ -8384,6 +8373,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
8384
8373
|
}], toggleButton: [{
|
|
8385
8374
|
type: ViewChild,
|
|
8386
8375
|
args: ["toggleButton", { static: true }]
|
|
8376
|
+
}], dropdownMenu: [{
|
|
8377
|
+
type: ViewChild,
|
|
8378
|
+
args: ["dropdownMenu", { static: true }]
|
|
8387
8379
|
}], selectionChange: [{
|
|
8388
8380
|
type: Output
|
|
8389
8381
|
}], filterChange: [{
|