ngx-eiffage-material 0.0.36 → 0.0.37
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-eiffage-material.mjs +22 -17
- package/fesm2022/ngx-eiffage-material.mjs.map +1 -1
- package/index.d.ts +20 -19
- package/package.json +1 -1
|
@@ -2972,7 +2972,7 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
2972
2972
|
data = inject(MAT_BOTTOM_SHEET_DATA);
|
|
2973
2973
|
// ─── State ─────────────────────────────────────────────────────────────────
|
|
2974
2974
|
/** Raw input value — updates on every keystroke, does NOT trigger the resource */
|
|
2975
|
-
query = signal(
|
|
2975
|
+
query = signal(this.data.filters().query, ...(ngDevMode ? [{ debugName: "query" }] : []));
|
|
2976
2976
|
/** Holds Partial<T> initially; items get upgraded to full T when toggled from the list */
|
|
2977
2977
|
selectedItems = signal([...this.data.selectedItems], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
|
|
2978
2978
|
/**
|
|
@@ -2999,20 +2999,25 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
2999
2999
|
total = computed(() => this.resource.value().total, ...(ngDevMode ? [{ debugName: "total" }] : []));
|
|
3000
3000
|
selectedCount = computed(() => this.selectedItems().length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
|
|
3001
3001
|
// ─── Accumulate pages ──────────────────────────────────────────────────────
|
|
3002
|
+
/**
|
|
3003
|
+
* Only reads `resource.value()` — never `data.filters()`.
|
|
3004
|
+
*
|
|
3005
|
+
* When a query change or a new open resets to page 1 we call
|
|
3006
|
+
* `accumulatedItems.set([])` synchronously *before* updating the filter,
|
|
3007
|
+
* so by the time this effect fires with new data it always appends onto an
|
|
3008
|
+
* already-clean array. Reading `data.filters()` here would cause the effect
|
|
3009
|
+
* to run a second time (with stale resource data) the moment the page number
|
|
3010
|
+
* is incremented on scroll, duplicating items and making
|
|
3011
|
+
* `options().length >= total()` so `onScroll` would never fire again.
|
|
3012
|
+
*/
|
|
3002
3013
|
_accumEffect = effect(() => {
|
|
3003
3014
|
const value = this.resource.value();
|
|
3004
|
-
|
|
3005
|
-
if (currentPage === 1) {
|
|
3006
|
-
this.accumulatedItems.set(value.items);
|
|
3007
|
-
}
|
|
3008
|
-
else {
|
|
3009
|
-
this.accumulatedItems.update(acc => [...acc, ...value.items]);
|
|
3010
|
-
}
|
|
3015
|
+
this.accumulatedItems.update(acc => [...acc, ...value.items]);
|
|
3011
3016
|
}, ...(ngDevMode ? [{ debugName: "_accumEffect" }] : []));
|
|
3012
3017
|
constructor() {
|
|
3013
3018
|
// Reset to page 1 when the sheet opens
|
|
3014
|
-
this.data.filters.update(f => ({ ...f, pageNumber: 1 }));
|
|
3015
3019
|
this.accumulatedItems.set([]);
|
|
3020
|
+
this.data.filters.update(f => ({ ...f, pageNumber: 1 }));
|
|
3016
3021
|
/**
|
|
3017
3022
|
* Debounce pipeline:
|
|
3018
3023
|
* typed input → wait 400 ms → push into data.filters
|
|
@@ -3129,7 +3134,7 @@ class NgxPaginatedSelectBottomSheetComponent {
|
|
|
3129
3134
|
this._ref.dismiss(undefined);
|
|
3130
3135
|
}
|
|
3131
3136
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelectBottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3132
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelectBottomSheetComponent, isStandalone: true, selector: "ngx-paginated-select-bottom-sheet", ngImport: i0, template: "<div class=\"v2-bs\">\r\n\r\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"v2-bs__header\">\r\n <div class=\"v2-bs__header-top\">\r\n <span class=\"v2-bs__title\">{{ data.title }}</span>\r\n <button mat-icon-button class=\"v2-bs__close-btn\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Search -->\r\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"v2-bs__search\">\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input\r\n matInput\r\n #searchInput\r\n [placeholder]=\"data.searchPlaceholder\"\r\n (input)=\"onQueryInput($event, optionsContainer)\"\r\n />\r\n @if (searchInput.value.length > 0) {\r\n <button matSuffix mat-icon-button (click)=\"clearQuery(searchInput, optionsContainer); $event.stopPropagation()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n\r\n <!-- Extra filters projection -->\r\n @if (data.extraFiltersTemplate) {\r\n <div class=\"v2-bs__extra-filters\">\r\n <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\r\n </div>\r\n }\r\n\r\n <!-- Selected chips (multiple mode) -->\r\n @if (data.multiple && selectedItems().length > 0) {\r\n <div class=\"v2-bs__selected-chips\">\r\n <mat-chip-set>\r\n @for (item of selectedItems(); track item[data.config.valueKey]) {\r\n <mat-chip (removed)=\"removeSelectedChip(item)\">\r\n {{ getLabel(item) }}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n </mat-chip-set>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- \u2500\u2500 Progress bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"v2-bs__progress\">\r\n @if (isLoading()) {\r\n <mat-progress-bar mode=\"indeterminate\" />\r\n }\r\n </div>\r\n\r\n <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"v2-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\r\n\r\n @if (options().length === 0 && !isLoading()) {\r\n <div class=\"v2-bs__empty\">\r\n <mat-icon>search_off</mat-icon>\r\n <p>{{ data.noResultsMessage }}</p>\r\n </div>\r\n }\r\n\r\n @for (item of options(); track item[data.config.valueKey]; let last = $last) {\r\n @let disabled = data.config.disabled ? data.config.disabled(item) : false;\r\n @let selected = isSelected(item);\r\n\r\n <div\r\n class=\"v2-bs__option\"\r\n [class.v2-bs__option--selected]=\"selected\"\r\n [class.v2-bs__option--disabled]=\"disabled\"\r\n matRipple\r\n [matRippleDisabled]=\"disabled\"\r\n (click)=\"toggleItem(item)\"\r\n [attr.aria-disabled]=\"disabled\"\r\n [attr.aria-selected]=\"selected\"\r\n role=\"option\"\r\n >\r\n <!-- Avatar -->\r\n <div class=\"v2-bs__option-avatar\" [class.v2-bs__option-avatar--selected]=\"selected\">\r\n @if (data.config.avatarText) {\r\n {{ getAvatarText(item) }}\r\n } @else if (data.config.avatarIcon) {\r\n <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\r\n } @else {\r\n {{ getAvatarText(item) }}\r\n }\r\n </div>\r\n\r\n <!-- Content -->\r\n <div class=\"v2-bs__option-content\">\r\n @if (data.optionTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\r\n } @else {\r\n <span class=\"v2-bs__option-label\">{{ getLabel(item) }}</span>\r\n @if (data.config.subtitle) {\r\n <span class=\"v2-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Check indicator -->\r\n @if (data.multiple) {\r\n <div class=\"v2-bs__option-check\">\r\n <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\r\n </div>\r\n } @else {\r\n @if (selected) {\r\n <mat-icon class=\"v2-bs__option-check-icon\">check</mat-icon>\r\n }\r\n }\r\n </div>\r\n\r\n @if (!last) {\r\n <mat-divider />\r\n }\r\n }\r\n\r\n <!-- Load more indicator -->\r\n @if (isLoading() && options().length > 0) {\r\n <div class=\"v2-bs__load-more\">\r\n <mat-icon class=\"v2-bs__spin\">autorenew</mat-icon>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"v2-bs__footer\">\r\n <span class=\"v2-bs__footer-count\">\r\n @if (data.multiple) {\r\n {{ selectedCount() }} / {{ total() }}\r\n } @else {\r\n {{ total() }} resultados\r\n }\r\n </span>\r\n\r\n @if (data.multiple) {\r\n <div class=\"v2-bs__footer-actions\">\r\n @if (selectedCount() > 0) {\r\n <button matButton=\"outlined\" (click)=\"reset()\">{{ data.resetLabel }}</button>\r\n }\r\n <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;min-width:min(720px,100vw);max-height:85vh;overflow:hidden}.ngx-paginated-select-panel{max-height:85vh!important;overflow:hidden!important}.v2-bs{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.v2-bs__header{flex:0 0 auto;padding:16px 20px 12px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:10px}.v2-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.v2-bs__title{font-size:20px;font-weight:500;color:#000000de;flex:1}.v2-bs__close-btn{flex:0 0 auto}.v2-bs__search{width:100%;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.v2-bs__extra-filters{width:100%}.v2-bs__selected-chips{padding-bottom:4px}.v2-bs__selected-chips mat-chip-set{flex-wrap:wrap;max-height:70px;height:auto;overflow-y:auto;display:block}.v2-bs__progress{flex:0 0 auto;height:4px}.v2-bs__progress mat-progress-bar{display:block}.v2-bs__options{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.v2-bs__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px;color:#00000073;text-align:center;gap:12px}.v2-bs__empty mat-icon{font-size:48px;width:48px;height:48px;opacity:.4}.v2-bs__empty p{margin:0;font-size:15px}.v2-bs__option{display:flex;align-items:center;gap:14px;padding:12px 20px;cursor:pointer;transition:background .15s ease;min-height:56px}.v2-bs__option:hover:not(.v2-bs__option--disabled){background:#0000000a}.v2-bs__option--selected{background:rgba(var(--mat-sys-primary-rgb, 0, 0, 0),.06)}.v2-bs__option--selected .v2-bs__option-label{font-weight:600}.v2-bs__option--disabled{opacity:.45;cursor:not-allowed}.v2-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;background:#00000014;color:#0009;transition:background .15s ease,color .15s ease}.v2-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.v2-bs__option-avatar--selected{background:var(--mat-sys-primary, #1976d2);color:#fff}.v2-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.v2-bs__option-label{font-size:14px;color:#000000de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v2-bs__option-subtitle{font-size:12px;color:#0000008a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v2-bs__option-check{flex:0 0 auto;display:flex;align-items:center}.v2-bs__option-check-icon{color:var(--mat-sys-primary, #1976d2);font-size:20px;width:20px;height:20px}.v2-bs__load-more{display:flex;justify-content:center;padding:16px}.v2-bs__spin{animation:v2-spin 1s linear infinite}.v2-bs__footer{position:sticky;bottom:0;left:0;right:0;background:var(--mat-sys-surface);box-shadow:0 -2px 4px #00000014;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;border-top:1px solid rgba(0,0,0,.08);gap:12px}.v2-bs__footer-count{font-size:13px;color:#0000008a}.v2-bs__footer-actions{display:flex;gap:8px;align-items:center}@media (max-width: 960px){:host{min-width:auto}}@keyframes v2-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatBadgeModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
3137
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelectBottomSheetComponent, isStandalone: true, selector: "ngx-paginated-select-bottom-sheet", ngImport: i0, template: "<div class=\"ps-bs\">\n\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__header\">\n <div class=\"ps-bs__header-top\">\n <span class=\"ps-bs__title\">{{ data.title }}</span>\n <button mat-icon-button class=\"ps-bs__close-btn\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Search -->\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"ps-bs__search\">\n <mat-icon matPrefix>search</mat-icon>\n <input\n matInput\n #searchInput\n [value]=\"query() ?? ''\"\n [placeholder]=\"data.searchPlaceholder\"\n (input)=\"onQueryInput($event, optionsContainer)\"\n />\n @if (searchInput.value.length > 0) {\n <button matSuffix mat-icon-button (click)=\"clearQuery(searchInput, optionsContainer); $event.stopPropagation()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n\n <!-- Extra filters projection -->\n @if (data.extraFiltersTemplate) {\n <div class=\"ps-bs__extra-filters\">\n <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n </div>\n }\n\n <!-- Selected chips (multiple mode) -->\n @if (data.multiple && selectedItems().length > 0) {\n <div class=\"ps-bs__selected-chips\">\n <mat-chip-set>\n @for (item of selectedItems(); track item[data.config.valueKey]) {\n <mat-chip (removed)=\"removeSelectedChip(item)\">\n {{ getLabel(item) }}\n <button matChipRemove>\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip>\n }\n </mat-chip-set>\n </div>\n }\n </div>\n\n <!-- \u2500\u2500 Progress bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__progress\">\n @if (isLoading()) {\n <mat-progress-bar mode=\"indeterminate\" />\n }\n </div>\n\n <div class=\"ps-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\n @if (options().length === 0 && !isLoading()) {\n <div class=\"ps-bs__empty\">\n <mat-icon>search_off</mat-icon>\n <p>{{ data.noResultsMessage }}</p>\n </div>\n }\n\n @for (item of options(); track item[data.config.valueKey]; let last = $last) {\n @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n @let selected = isSelected(item);\n\n <div\n class=\"ps-bs__option\"\n [class.ps-bs__option--selected]=\"selected\"\n [class.ps-bs__option--disabled]=\"disabled\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n (click)=\"toggleItem(item)\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"selected\"\n role=\"option\"\n >\n <!-- Avatar -->\n <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n @if (data.config.avatarText) {\n {{ getAvatarText(item) }}\n } @else if (data.config.avatarIcon) {\n <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n } @else {\n {{ getAvatarText(item) }}\n }\n </div>\n\n <!-- Content -->\n <div class=\"ps-bs__option-content\">\n @if (data.optionTemplate) {\n <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n } @else {\n <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n @if (data.config.subtitle) {\n <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n }\n }\n </div>\n\n <!-- Check indicator -->\n @if (data.multiple) {\n <div class=\"ps-bs__option-check\">\n <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n </div>\n } @else {\n @if (selected) {\n <mat-icon class=\"ps-bs__option-check-icon\">check</mat-icon>\n }\n }\n </div>\n\n @if (!last) {\n <mat-divider />\n }\n }\n </div>\n\n <!-- \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__footer\">\n <span class=\"ps-bs__footer-count\">\n @if (data.multiple) {\n {{ selectedCount() }} / {{ total() }}\n } @else {\n {{ total() }} resultados\n }\n </span>\n\n @if (data.multiple) {\n <div class=\"ps-bs__footer-actions\">\n @if (selectedCount() > 0) {\n <button matButton=\"outlined\" (click)=\"reset()\">{{ data.resetLabel }}</button>\n }\n <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n </div>\n }\n </div>\n</div>", styles: [":host{display:flex;flex-direction:column;min-width:min(720px,100vw)}.ps-bs{display:flex;flex-direction:column;flex:1 1 auto}.ps-bs__header{flex:0 0 auto;padding:16px 20px 12px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:10px}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title{font-size:20px;font-weight:500;color:#000000de;flex:1}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{width:100%;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.ps-bs__extra-filters{width:100%}.ps-bs__selected-chips{padding-bottom:4px}.ps-bs__selected-chips mat-chip-set{flex-wrap:wrap;max-height:70px;height:auto;overflow-y:auto;display:block}.ps-bs__progress{flex:0 0 auto;height:4px}.ps-bs__progress mat-progress-bar{display:block}.ps-bs__options{overflow-y:auto;height:290px}.ps-bs__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px;color:#00000073;text-align:center;gap:12px}.ps-bs__empty mat-icon{font-size:48px;width:48px;height:48px;opacity:.4}.ps-bs__empty p{margin:0;font-size:15px}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:12px 20px;cursor:pointer;transition:background .15s ease;min-height:56px}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:#0000000a}.ps-bs__option--selected{background:rgba(var(--mat-sys-primary-rgb, 0, 0, 0),.06)}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option--disabled{opacity:.45;cursor:not-allowed}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;background:#00000014;color:#0009;transition:background .15s ease,color .15s ease}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary, #1976d2);color:#fff}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font-size:14px;color:#000000de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-subtitle{font-size:12px;color:#0000008a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{flex:0 0 auto;display:flex;align-items:center}.ps-bs__option-check-icon{color:var(--mat-sys-primary, #1976d2);font-size:20px;width:20px;height:20px}.ps-bs__load-more{display:flex;justify-content:center;padding:16px}.ps-bs__spin{animation:ps-spin 1s linear infinite}.ps-bs__footer{position:sticky;bottom:0;right:0;left:0;flex:0 0 auto;background:var(--mat-sys-surface);box-shadow:0 -2px 4px #00000014;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;border-top:1px solid rgba(0,0,0,.08);gap:12px}.ps-bs__footer-count{font-size:13px;color:#0000008a}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}@media (max-width: 960px){:host{min-width:auto}}@keyframes ps-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatBadgeModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
3133
3138
|
}
|
|
3134
3139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelectBottomSheetComponent, decorators: [{
|
|
3135
3140
|
type: Component,
|
|
@@ -3147,10 +3152,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3147
3152
|
MatCheckboxModule,
|
|
3148
3153
|
MatTooltipModule,
|
|
3149
3154
|
MatBadgeModule,
|
|
3150
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"v2-bs\">\r\n\r\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"v2-bs__header\">\r\n <div class=\"v2-bs__header-top\">\r\n <span class=\"v2-bs__title\">{{ data.title }}</span>\r\n <button mat-icon-button class=\"v2-bs__close-btn\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Search -->\r\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"v2-bs__search\">\r\n <mat-icon matPrefix>search</mat-icon>\r\n <input\r\n matInput\r\n #searchInput\r\n [placeholder]=\"data.searchPlaceholder\"\r\n (input)=\"onQueryInput($event, optionsContainer)\"\r\n />\r\n @if (searchInput.value.length > 0) {\r\n <button matSuffix mat-icon-button (click)=\"clearQuery(searchInput, optionsContainer); $event.stopPropagation()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n\r\n <!-- Extra filters projection -->\r\n @if (data.extraFiltersTemplate) {\r\n <div class=\"v2-bs__extra-filters\">\r\n <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\r\n </div>\r\n }\r\n\r\n <!-- Selected chips (multiple mode) -->\r\n @if (data.multiple && selectedItems().length > 0) {\r\n <div class=\"v2-bs__selected-chips\">\r\n <mat-chip-set>\r\n @for (item of selectedItems(); track item[data.config.valueKey]) {\r\n <mat-chip (removed)=\"removeSelectedChip(item)\">\r\n {{ getLabel(item) }}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n </mat-chip-set>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- \u2500\u2500 Progress bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"v2-bs__progress\">\r\n @if (isLoading()) {\r\n <mat-progress-bar mode=\"indeterminate\" />\r\n }\r\n </div>\r\n\r\n <!-- \u2500\u2500 Options list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <div class=\"v2-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\r\n\r\n @if (options().length === 0 && !isLoading()) {\r\n <div class=\"v2-bs__empty\">\r\n <mat-icon>search_off</mat-icon>\r\n <p>{{ data.noResultsMessage }}</p>\r\n </div>\r\n }\r\n\r\n @for (item of options(); track item[data.config.valueKey]; let last = $last) {\r\n @let disabled = data.config.disabled ? data.config.disabled(item) : false;\r\n @let selected = isSelected(item);\r\n\r\n <div\r\n class=\"v2-bs__option\"\r\n [class.v2-bs__option--selected]=\"selected\"\r\n [class.v2-bs__option--disabled]=\"disabled\"\r\n matRipple\r\n [matRippleDisabled]=\"disabled\"\r\n (click)=\"toggleItem(item)\"\r\n [attr.aria-disabled]=\"disabled\"\r\n [attr.aria-selected]=\"selected\"\r\n role=\"option\"\r\n >\r\n <!-- Avatar -->\r\n <div class=\"v2-bs__option-avatar\" [class.v2-bs__option-avatar--selected]=\"selected\">\r\n @if (data.config.avatarText) {\r\n {{ getAvatarText(item) }}\r\n } @else if (data.config.avatarIcon) {\r\n <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\r\n } @else {\r\n {{ getAvatarText(item) }}\r\n }\r\n </div>\r\n\r\n <!-- Content -->\r\n <div class=\"v2-bs__option-content\">\r\n @if (data.optionTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\r\n } @else {\r\n <span class=\"v2-bs__option-label\">{{ getLabel(item) }}</span>\r\n @if (data.config.subtitle) {\r\n <span class=\"v2-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Check indicator -->\r\n @if (data.multiple) {\r\n <div class=\"v2-bs__option-check\">\r\n <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\r\n </div>\r\n } @else {\r\n @if (selected) {\r\n <mat-icon class=\"v2-bs__option-check-icon\">check</mat-icon>\r\n }\r\n }\r\n </div>\r\n\r\n @if (!last) {\r\n <mat-divider />\r\n }\r\n }\r\n\r\n <!-- Load more indicator -->\r\n @if (isLoading() && options().length > 0) {\r\n <div class=\"v2-bs__load-more\">\r\n <mat-icon class=\"v2-bs__spin\">autorenew</mat-icon>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n</div>\r\n\r\n<!-- \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"v2-bs__footer\">\r\n <span class=\"v2-bs__footer-count\">\r\n @if (data.multiple) {\r\n {{ selectedCount() }} / {{ total() }}\r\n } @else {\r\n {{ total() }} resultados\r\n }\r\n </span>\r\n\r\n @if (data.multiple) {\r\n <div class=\"v2-bs__footer-actions\">\r\n @if (selectedCount() > 0) {\r\n <button matButton=\"outlined\" (click)=\"reset()\">{{ data.resetLabel }}</button>\r\n }\r\n <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;min-width:min(720px,100vw);max-height:85vh;overflow:hidden}.ngx-paginated-select-panel{max-height:85vh!important;overflow:hidden!important}.v2-bs{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.v2-bs__header{flex:0 0 auto;padding:16px 20px 12px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:10px}.v2-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.v2-bs__title{font-size:20px;font-weight:500;color:#000000de;flex:1}.v2-bs__close-btn{flex:0 0 auto}.v2-bs__search{width:100%;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.v2-bs__extra-filters{width:100%}.v2-bs__selected-chips{padding-bottom:4px}.v2-bs__selected-chips mat-chip-set{flex-wrap:wrap;max-height:70px;height:auto;overflow-y:auto;display:block}.v2-bs__progress{flex:0 0 auto;height:4px}.v2-bs__progress mat-progress-bar{display:block}.v2-bs__options{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.v2-bs__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px;color:#00000073;text-align:center;gap:12px}.v2-bs__empty mat-icon{font-size:48px;width:48px;height:48px;opacity:.4}.v2-bs__empty p{margin:0;font-size:15px}.v2-bs__option{display:flex;align-items:center;gap:14px;padding:12px 20px;cursor:pointer;transition:background .15s ease;min-height:56px}.v2-bs__option:hover:not(.v2-bs__option--disabled){background:#0000000a}.v2-bs__option--selected{background:rgba(var(--mat-sys-primary-rgb, 0, 0, 0),.06)}.v2-bs__option--selected .v2-bs__option-label{font-weight:600}.v2-bs__option--disabled{opacity:.45;cursor:not-allowed}.v2-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;background:#00000014;color:#0009;transition:background .15s ease,color .15s ease}.v2-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.v2-bs__option-avatar--selected{background:var(--mat-sys-primary, #1976d2);color:#fff}.v2-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.v2-bs__option-label{font-size:14px;color:#000000de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v2-bs__option-subtitle{font-size:12px;color:#0000008a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v2-bs__option-check{flex:0 0 auto;display:flex;align-items:center}.v2-bs__option-check-icon{color:var(--mat-sys-primary, #1976d2);font-size:20px;width:20px;height:20px}.v2-bs__load-more{display:flex;justify-content:center;padding:16px}.v2-bs__spin{animation:v2-spin 1s linear infinite}.v2-bs__footer{position:sticky;bottom:0;left:0;right:0;background:var(--mat-sys-surface);box-shadow:0 -2px 4px #00000014;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;border-top:1px solid rgba(0,0,0,.08);gap:12px}.v2-bs__footer-count{font-size:13px;color:#0000008a}.v2-bs__footer-actions{display:flex;gap:8px;align-items:center}@media (max-width: 960px){:host{min-width:auto}}@keyframes v2-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3155
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"ps-bs\">\n\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__header\">\n <div class=\"ps-bs__header-top\">\n <span class=\"ps-bs__title\">{{ data.title }}</span>\n <button mat-icon-button class=\"ps-bs__close-btn\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Search -->\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" class=\"ps-bs__search\">\n <mat-icon matPrefix>search</mat-icon>\n <input\n matInput\n #searchInput\n [value]=\"query() ?? ''\"\n [placeholder]=\"data.searchPlaceholder\"\n (input)=\"onQueryInput($event, optionsContainer)\"\n />\n @if (searchInput.value.length > 0) {\n <button matSuffix mat-icon-button (click)=\"clearQuery(searchInput, optionsContainer); $event.stopPropagation()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n\n <!-- Extra filters projection -->\n @if (data.extraFiltersTemplate) {\n <div class=\"ps-bs__extra-filters\">\n <ng-container *ngTemplateOutlet=\"data.extraFiltersTemplate\" />\n </div>\n }\n\n <!-- Selected chips (multiple mode) -->\n @if (data.multiple && selectedItems().length > 0) {\n <div class=\"ps-bs__selected-chips\">\n <mat-chip-set>\n @for (item of selectedItems(); track item[data.config.valueKey]) {\n <mat-chip (removed)=\"removeSelectedChip(item)\">\n {{ getLabel(item) }}\n <button matChipRemove>\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip>\n }\n </mat-chip-set>\n </div>\n }\n </div>\n\n <!-- \u2500\u2500 Progress bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__progress\">\n @if (isLoading()) {\n <mat-progress-bar mode=\"indeterminate\" />\n }\n </div>\n\n <div class=\"ps-bs__options\" #optionsContainer (scroll)=\"onScroll(optionsContainer)\">\n @if (options().length === 0 && !isLoading()) {\n <div class=\"ps-bs__empty\">\n <mat-icon>search_off</mat-icon>\n <p>{{ data.noResultsMessage }}</p>\n </div>\n }\n\n @for (item of options(); track item[data.config.valueKey]; let last = $last) {\n @let disabled = data.config.disabled ? data.config.disabled(item) : false;\n @let selected = isSelected(item);\n\n <div\n class=\"ps-bs__option\"\n [class.ps-bs__option--selected]=\"selected\"\n [class.ps-bs__option--disabled]=\"disabled\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n (click)=\"toggleItem(item)\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"selected\"\n role=\"option\"\n >\n <!-- Avatar -->\n <div class=\"ps-bs__option-avatar\" [class.ps-bs__option-avatar--selected]=\"selected\">\n @if (data.config.avatarText) {\n {{ getAvatarText(item) }}\n } @else if (data.config.avatarIcon) {\n <mat-icon>{{ data.config.avatarIcon }}</mat-icon>\n } @else {\n {{ getAvatarText(item) }}\n }\n </div>\n\n <!-- Content -->\n <div class=\"ps-bs__option-content\">\n @if (data.optionTemplate) {\n <ng-container *ngTemplateOutlet=\"data.optionTemplate; context: { $implicit: item }\" />\n } @else {\n <span class=\"ps-bs__option-label\">{{ getLabel(item) }}</span>\n @if (data.config.subtitle) {\n <span class=\"ps-bs__option-subtitle\">{{ data.config.subtitle(item) }}</span>\n }\n }\n </div>\n\n <!-- Check indicator -->\n @if (data.multiple) {\n <div class=\"ps-bs__option-check\">\n <mat-checkbox [checked]=\"selected\" [disabled]=\"disabled\" (click)=\"$event.preventDefault()\" />\n </div>\n } @else {\n @if (selected) {\n <mat-icon class=\"ps-bs__option-check-icon\">check</mat-icon>\n }\n }\n </div>\n\n @if (!last) {\n <mat-divider />\n }\n }\n </div>\n\n <!-- \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"ps-bs__footer\">\n <span class=\"ps-bs__footer-count\">\n @if (data.multiple) {\n {{ selectedCount() }} / {{ total() }}\n } @else {\n {{ total() }} resultados\n }\n </span>\n\n @if (data.multiple) {\n <div class=\"ps-bs__footer-actions\">\n @if (selectedCount() > 0) {\n <button matButton=\"outlined\" (click)=\"reset()\">{{ data.resetLabel }}</button>\n }\n <button matButton=\"filled\" color=\"primary\" (click)=\"confirm()\">{{ data.confirmLabel }}</button>\n </div>\n }\n </div>\n</div>", styles: [":host{display:flex;flex-direction:column;min-width:min(720px,100vw)}.ps-bs{display:flex;flex-direction:column;flex:1 1 auto}.ps-bs__header{flex:0 0 auto;padding:16px 20px 12px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:10px}.ps-bs__header-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ps-bs__title{font-size:20px;font-weight:500;color:#000000de;flex:1}.ps-bs__close-btn{flex:0 0 auto}.ps-bs__search{width:100%;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.ps-bs__extra-filters{width:100%}.ps-bs__selected-chips{padding-bottom:4px}.ps-bs__selected-chips mat-chip-set{flex-wrap:wrap;max-height:70px;height:auto;overflow-y:auto;display:block}.ps-bs__progress{flex:0 0 auto;height:4px}.ps-bs__progress mat-progress-bar{display:block}.ps-bs__options{overflow-y:auto;height:290px}.ps-bs__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px;color:#00000073;text-align:center;gap:12px}.ps-bs__empty mat-icon{font-size:48px;width:48px;height:48px;opacity:.4}.ps-bs__empty p{margin:0;font-size:15px}.ps-bs__option{display:flex;align-items:center;gap:14px;padding:12px 20px;cursor:pointer;transition:background .15s ease;min-height:56px}.ps-bs__option:hover:not(.ps-bs__option--disabled){background:#0000000a}.ps-bs__option--selected{background:rgba(var(--mat-sys-primary-rgb, 0, 0, 0),.06)}.ps-bs__option--selected .ps-bs__option-label{font-weight:600}.ps-bs__option--disabled{opacity:.45;cursor:not-allowed}.ps-bs__option-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;background:#00000014;color:#0009;transition:background .15s ease,color .15s ease}.ps-bs__option-avatar mat-icon{font-size:20px;width:20px;height:20px}.ps-bs__option-avatar--selected{background:var(--mat-sys-primary, #1976d2);color:#fff}.ps-bs__option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ps-bs__option-label{font-size:14px;color:#000000de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-subtitle{font-size:12px;color:#0000008a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-bs__option-check{flex:0 0 auto;display:flex;align-items:center}.ps-bs__option-check-icon{color:var(--mat-sys-primary, #1976d2);font-size:20px;width:20px;height:20px}.ps-bs__load-more{display:flex;justify-content:center;padding:16px}.ps-bs__spin{animation:ps-spin 1s linear infinite}.ps-bs__footer{position:sticky;bottom:0;right:0;left:0;flex:0 0 auto;background:var(--mat-sys-surface);box-shadow:0 -2px 4px #00000014;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;border-top:1px solid rgba(0,0,0,.08);gap:12px}.ps-bs__footer-count{font-size:13px;color:#0000008a}.ps-bs__footer-actions{display:flex;gap:8px;align-items:center}@media (max-width: 960px){:host{min-width:auto}}@keyframes ps-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3151
3156
|
}], ctorParameters: () => [] });
|
|
3152
3157
|
|
|
3153
|
-
class
|
|
3158
|
+
class NgxPaginatedSelect {
|
|
3154
3159
|
// ─── Dependencies ──────────────────────────────────────────────────────────
|
|
3155
3160
|
_bottomSheet = inject(MatBottomSheet);
|
|
3156
3161
|
_cdr = inject(ChangeDetectorRef);
|
|
@@ -3339,10 +3344,10 @@ class NgxPaginatedSelectComponent {
|
|
|
3339
3344
|
this.control()?.updateValueAndValidity();
|
|
3340
3345
|
this._cdr.markForCheck();
|
|
3341
3346
|
}
|
|
3342
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type:
|
|
3343
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelectComponent, isStandalone: true, selector: "ngx-paginated-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraFiltersTemplate: { classPropertyName: "extraFiltersTemplate", publicName: "extraFiltersTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "_matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n@if (showChips()) {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"v2-trigger\"\r\n [class.v2-trigger--disabled]=\"_isDisabled()\"\r\n [class.v2-trigger--open]=\"_isOpen()\"\r\n (click)=\"openBottomSheet($event)\"\r\n >\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <mat-chip-grid #chipGrid class=\"v2-trigger__chip-grid\" [formControl]=\"control()\">\r\n @for (item of _selectedItems(); track item[config().valueKey]) {\r\n <mat-chip-row\r\n class=\"v2-trigger__chip\"\r\n [disabled]=\"_isDisabled()\"\r\n (removed)=\"removeChip(item, $event)\"\r\n >\r\n {{ getLabel(item) }}\r\n <button matChipRemove [disabled]=\"_isDisabled()\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n <!-- Hidden input required for mat-chip-grid -->\r\n <input matInput [matChipInputFor]=\"chipGrid\" style=\"display: none\" readonly />\r\n\r\n <div matSuffix class=\"v2-trigger__suffix\">\r\n @if (clearable() && hasSelection() && !_isDisabled()) {\r\n <button matIconButton matSuffix (click)=\"clearSelection($event)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n <mat-icon [class.v2-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n </div>\r\n\r\n @if (error()) {\r\n <mat-error>{{ error() }}</mat-error>\r\n }\r\n @if (hint()) {\r\n <mat-hint>{{ hint() }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n}\r\n\r\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n@if (!showChips()) {\r\n <mat-form-field\r\n appearance=\"outline\"\r\n floatLabel=\"always\"\r\n class=\"v2-trigger\"\r\n [class.v2-trigger--disabled]=\"_isDisabled()\"\r\n [class.v2-trigger--open]=\"_isOpen()\"\r\n (click)=\"openBottomSheet($event)\"\r\n >\r\n <mat-label>{{ label() }}</mat-label>\r\n\r\n <mat-select\r\n #matSelect\r\n class=\"v2-trigger__input\"\r\n [formControl]=\"control()\"\r\n [multiple]=\"multiple()\"\r\n style=\"pointer-events: none\"\r\n (openedChange)=\"preventOpen($event)\"\r\n >\r\n @for (item of _selectedItems(); track item[config().valueKey]) {\r\n <mat-option [value]=\"item[config().valueKey]\">{{ getLabel(item) }}</mat-option>\r\n }\r\n </mat-select>\r\n\r\n <div matSuffix class=\"v2-trigger__suffix\">\r\n @if (clearable() && hasSelection() && !_isDisabled()) {\r\n <button matIconButton matSuffix (click)=\"clearSelection($event)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n <mat-icon [class.v2-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\r\n </div>\r\n\r\n @if (error()) {\r\n <mat-error>{{ error() }}</mat-error>\r\n }\r\n @if (hint()) {\r\n <mat-hint>{{ hint() }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n}\r\n\r\n\r\n", styles: [":host{display:block}.v2-trigger{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.v2-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.v2-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.v2-trigger__chip-grid{cursor:pointer;min-height:36px}.v2-trigger .mat-mdc-chip-set mdc-evolution-chip-set{overflow-y:auto;height:10px}.v2-trigger__chip{font-size:13px}.v2-trigger__suffix{display:flex;align-items:center;gap:0}.v2-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.v2-trigger__clear:hover{opacity:1}.v2-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.v2-trigger .v2-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.v2-trigger mat-icon:not(.v2-trigger__clear mat-icon){transition:transform .2s ease}.v2-trigger--disabled{cursor:not-allowed}.v2-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }] });
|
|
3347
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3348
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NgxPaginatedSelect, isStandalone: true, selector: "ngx-paginated-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, endpoint: { classPropertyName: "endpoint", publicName: "endpoint", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraFiltersTemplate: { classPropertyName: "extraFiltersTemplate", publicName: "extraFiltersTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "_matSelect", first: true, predicate: ["matSelect"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showChips()) {\n <mat-form-field\n appearance=\"outline\"\n floatLabel=\"always\"\n class=\"ps-trigger\"\n [class.ps-trigger--disabled]=\"_isDisabled()\"\n [class.ps-trigger--open]=\"_isOpen()\"\n (click)=\"openBottomSheet($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n\n <mat-chip-grid #chipGrid class=\"ps-trigger__chip-grid\" [formControl]=\"control()\">\n @for (item of _selectedItems(); track item[config().valueKey]) {\n <mat-chip-row\n class=\"ps-trigger__chip\"\n [disabled]=\"_isDisabled()\"\n (removed)=\"removeChip(item, $event)\"\n >\n {{ getLabel(item) }}\n <button matChipRemove [disabled]=\"_isDisabled()\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n <!-- Hidden input required for mat-chip-grid -->\n <input matInput [matChipInputFor]=\"chipGrid\" style=\"display: none\" readonly />\n\n <div matSuffix class=\"ps-trigger__suffix\">\n @if (clearable() && hasSelection() && !_isDisabled()) {\n <button matIconButton matSuffix (click)=\"clearSelection($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n </div>\n\n @if (error()) {\n <mat-error>{{ error() }}</mat-error>\n }\n @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n }\n </mat-form-field>\n}\n\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (!showChips()) {\n <mat-form-field\n appearance=\"outline\"\n floatLabel=\"always\"\n class=\"ps-trigger\"\n [class.ps-trigger--disabled]=\"_isDisabled()\"\n [class.ps-trigger--open]=\"_isOpen()\"\n (click)=\"openBottomSheet($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n\n <mat-select\n #matSelect\n class=\"ps-trigger__input\"\n [formControl]=\"control()\"\n [multiple]=\"multiple()\"\n style=\"pointer-events: none\"\n (openedChange)=\"preventOpen($event)\"\n >\n @for (item of _selectedItems(); track item[config().valueKey]) {\n <mat-option [value]=\"item[config().valueKey]\">{{ getLabel(item) }}</mat-option>\n }\n </mat-select>\n\n <div matSuffix class=\"ps-trigger__suffix\">\n @if (clearable() && hasSelection() && !_isDisabled()) {\n <button matIconButton matSuffix (click)=\"clearSelection($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n </div>\n\n @if (error()) {\n <mat-error>{{ error() }}</mat-error>\n }\n @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n }\n </mat-form-field>\n}\n\n\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger .mat-mdc-chip-set mdc-evolution-chip-set{overflow-y:auto;height:10px}.ps-trigger__chip{font-size:13px}.ps-trigger__suffix{display:flex;align-items:center;gap:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }] });
|
|
3344
3349
|
}
|
|
3345
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type:
|
|
3350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NgxPaginatedSelect, decorators: [{
|
|
3346
3351
|
type: Component,
|
|
3347
3352
|
args: [{ selector: 'ngx-paginated-select', imports: [
|
|
3348
3353
|
CommonModule,
|
|
@@ -3356,7 +3361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3356
3361
|
MatSelectModule,
|
|
3357
3362
|
MatTooltipModule,
|
|
3358
3363
|
MatProgressSpinnerModule,
|
|
3359
|
-
], template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\
|
|
3364
|
+
], template: "<!-- \u2500\u2500 Chips mode (multiple + displayMode = 'chips') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showChips()) {\n <mat-form-field\n appearance=\"outline\"\n floatLabel=\"always\"\n class=\"ps-trigger\"\n [class.ps-trigger--disabled]=\"_isDisabled()\"\n [class.ps-trigger--open]=\"_isOpen()\"\n (click)=\"openBottomSheet($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n\n <mat-chip-grid #chipGrid class=\"ps-trigger__chip-grid\" [formControl]=\"control()\">\n @for (item of _selectedItems(); track item[config().valueKey]) {\n <mat-chip-row\n class=\"ps-trigger__chip\"\n [disabled]=\"_isDisabled()\"\n (removed)=\"removeChip(item, $event)\"\n >\n {{ getLabel(item) }}\n <button matChipRemove [disabled]=\"_isDisabled()\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n\n <!-- Hidden input required for mat-chip-grid -->\n <input matInput [matChipInputFor]=\"chipGrid\" style=\"display: none\" readonly />\n\n <div matSuffix class=\"ps-trigger__suffix\">\n @if (clearable() && hasSelection() && !_isDisabled()) {\n <button matIconButton matSuffix (click)=\"clearSelection($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n </div>\n\n @if (error()) {\n <mat-error>{{ error() }}</mat-error>\n }\n @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n }\n </mat-form-field>\n}\n\n<!-- \u2500\u2500 Text mode (single or multiple + displayMode = 'text') \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (!showChips()) {\n <mat-form-field\n appearance=\"outline\"\n floatLabel=\"always\"\n class=\"ps-trigger\"\n [class.ps-trigger--disabled]=\"_isDisabled()\"\n [class.ps-trigger--open]=\"_isOpen()\"\n (click)=\"openBottomSheet($event)\"\n >\n <mat-label>{{ label() }}</mat-label>\n\n <mat-select\n #matSelect\n class=\"ps-trigger__input\"\n [formControl]=\"control()\"\n [multiple]=\"multiple()\"\n style=\"pointer-events: none\"\n (openedChange)=\"preventOpen($event)\"\n >\n @for (item of _selectedItems(); track item[config().valueKey]) {\n <mat-option [value]=\"item[config().valueKey]\">{{ getLabel(item) }}</mat-option>\n }\n </mat-select>\n\n <div matSuffix class=\"ps-trigger__suffix\">\n @if (clearable() && hasSelection() && !_isDisabled()) {\n <button matIconButton matSuffix (click)=\"clearSelection($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon [class.ps-trigger__arrow--open]=\"_isOpen()\">arrow_drop_down</mat-icon>\n </div>\n\n @if (error()) {\n <mat-error>{{ error() }}</mat-error>\n }\n @if (hint()) {\n <mat-hint>{{ hint() }}</mat-hint>\n }\n </mat-form-field>\n}\n\n\n", styles: [":host{display:block}.ps-trigger{width:100%;cursor:pointer;--mat-form-field-outlined-focus-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-outline-color: var(--mat-sys-outline);--mat-form-field-outlined-hover-outline-color: var(--mat-sys-outline)}.ps-trigger ::ng-deep .mat-mdc-form-field-flex{cursor:pointer}.ps-trigger__input{cursor:pointer!important;caret-color:transparent;pointer-events:none}.ps-trigger__chip-grid{cursor:pointer;min-height:36px}.ps-trigger .mat-mdc-chip-set mdc-evolution-chip-set{overflow-y:auto;height:10px}.ps-trigger__chip{font-size:13px}.ps-trigger__suffix{display:flex;align-items:center;gap:0}.ps-trigger__clear{width:28px;height:28px;line-height:28px;opacity:.6}.ps-trigger__clear:hover{opacity:1}.ps-trigger__clear mat-icon{font-size:18px;width:18px;height:18px}.ps-trigger .ps-trigger__arrow--open{transform:rotate(180deg);transition:transform .2s ease}.ps-trigger mat-icon:not(.ps-trigger__clear mat-icon){transition:transform .2s ease}.ps-trigger--disabled{cursor:not-allowed}.ps-trigger--disabled ::ng-deep .mat-mdc-form-field-flex{cursor:not-allowed}\n"] }]
|
|
3360
3365
|
}], ctorParameters: () => [], propDecorators: { _matSelect: [{ type: i0.ViewChild, args: ['matSelect', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], endpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endpoint", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsMessage", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], extraFiltersTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraFiltersTemplate", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
3361
3366
|
|
|
3362
3367
|
class NgxDialogService {
|
|
@@ -3515,5 +3520,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3515
3520
|
* Generated bundle index. Do not edit.
|
|
3516
3521
|
*/
|
|
3517
3522
|
|
|
3518
|
-
export { DynamicHostDirective, NgxAlert, NgxBasicSelect, NgxBasicTable, NgxConfirmDialogComponent, NgxDialog, NgxDialogService, NgxInputFile, NgxLoadingButton,
|
|
3523
|
+
export { DynamicHostDirective, NgxAlert, NgxBasicSelect, NgxBasicTable, NgxConfirmDialogComponent, NgxDialog, NgxDialogService, NgxInputFile, NgxLoadingButton, NgxPaginatedSelect, NgxPaginatedSelectBottomSheetComponent, NgxPaginatedTable, NgxTablesIntl, OPERATOR_BY_FILTER_TYPE, PaginatedSearchableSelectComponent, SearchableSelectComponent, USER_ID_FACTORY, base64ToUtf8, includeNoSensible, isFilterOption };
|
|
3519
3524
|
//# sourceMappingURL=ngx-eiffage-material.mjs.map
|