@muziehdesign/components 19.2.8-beta.2627 → 19.2.8-beta.2639
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/muziehdesign-components.mjs +83 -34
- package/fesm2022/muziehdesign-components.mjs.map +1 -1
- package/lib/async/async-error.directive.d.ts +6 -0
- package/lib/async/async-loading.directive.d.ts +6 -0
- package/lib/async/async.component.d.ts +7 -0
- package/lib/components.module.d.ts +1 -1
- package/lib/pagination/pagination-config.d.ts +6 -0
- package/lib/pagination/pagination.component.d.ts +13 -9
- package/lib/result-table/result-table.component.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +4 -1
- package/lib/pagination/pagination-default-options.d.ts +0 -4
- package/lib/pagination/pagination-default-options.token.d.ts +0 -3
|
@@ -142,35 +142,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
142
142
|
args: ['class']
|
|
143
143
|
}] } });
|
|
144
144
|
|
|
145
|
-
const
|
|
145
|
+
const MZ_PAGINATION_DEFAULT_OPTIONS = new InjectionToken('MZ_PAGINATION_DEFAULT_OPTIONS');
|
|
146
|
+
class MzPaginationConfig {
|
|
147
|
+
constructor() {
|
|
148
|
+
this.pageSize = 20;
|
|
149
|
+
this.pageSizeOptions = [20, 50, 100];
|
|
150
|
+
}
|
|
151
|
+
}
|
|
146
152
|
|
|
147
|
-
class
|
|
153
|
+
class MzPagination {
|
|
148
154
|
constructor(paginationOptions) {
|
|
149
|
-
this.
|
|
150
|
-
this.
|
|
155
|
+
this.totalItems = 0;
|
|
156
|
+
this.pageNumber = 1;
|
|
151
157
|
this.changePage = new EventEmitter();
|
|
152
158
|
this.pages = [];
|
|
153
159
|
this.pageCount = 1;
|
|
154
|
-
this.
|
|
155
|
-
this.
|
|
156
|
-
this.updatePages(this.page, this.length, this.pageSize);
|
|
160
|
+
this.options = paginationOptions || new MzPaginationConfig();
|
|
161
|
+
this.updatePages(this.pageNumber, this.totalItems, this.getPageSize());
|
|
157
162
|
}
|
|
158
163
|
ngOnChanges() {
|
|
159
|
-
this.updatePages(this.
|
|
164
|
+
this.updatePages(this.pageNumber, this.totalItems, this.getPageSize());
|
|
160
165
|
}
|
|
161
166
|
isEllipsis(v) {
|
|
162
167
|
return v === -1;
|
|
163
168
|
}
|
|
169
|
+
getPageSize() {
|
|
170
|
+
return this.pageSize || this.options.pageSize;
|
|
171
|
+
}
|
|
172
|
+
getPageSizeOptions() {
|
|
173
|
+
return this.pageSizeOptions || this.options.pageSizeOptions;
|
|
174
|
+
}
|
|
164
175
|
changePageNumber(newValue) {
|
|
165
|
-
if (newValue == this.
|
|
176
|
+
if (newValue == this.pageNumber || newValue < 1 || newValue > this.pageCount) {
|
|
166
177
|
return;
|
|
167
178
|
}
|
|
179
|
+
this.scrollTo?.scrollIntoView({ behavior: 'instant', block: 'start' });
|
|
168
180
|
this.changePage.emit({ pageNumber: newValue, pageSize: this.pageSize });
|
|
169
181
|
}
|
|
170
182
|
changePageSize(newValue) {
|
|
171
183
|
if (Number(newValue) == this.pageSize) {
|
|
172
184
|
return;
|
|
173
185
|
}
|
|
186
|
+
this.scrollTo?.scrollIntoView({ behavior: 'instant', block: 'start' });
|
|
174
187
|
this.changePage.emit({ pageNumber: 1, pageSize: Number(newValue) });
|
|
175
188
|
}
|
|
176
189
|
updatePages(currentPage, lengthOfItems, currentPageSize) {
|
|
@@ -179,7 +192,7 @@ class PaginationComponent {
|
|
|
179
192
|
let pageNumbers = [];
|
|
180
193
|
const max = 7; // 3 items before and after current page
|
|
181
194
|
if (pageCount <= max) {
|
|
182
|
-
this.pages = [...Array(pageCount).keys()].map(i => i + 1);
|
|
195
|
+
this.pages = [...Array(pageCount).keys()].map((i) => i + 1);
|
|
183
196
|
return;
|
|
184
197
|
}
|
|
185
198
|
let start = Math.max(1, currentPage - 3);
|
|
@@ -205,27 +218,31 @@ class PaginationComponent {
|
|
|
205
218
|
}
|
|
206
219
|
this.pages = pageNumbers;
|
|
207
220
|
}
|
|
208
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type:
|
|
209
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type:
|
|
221
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzPagination, deps: [{ token: MZ_PAGINATION_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
222
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: MzPagination, isStandalone: true, selector: "mz-pagination", inputs: { totalItems: "totalItems", pageNumber: "pageNumber", pageSize: "pageSize", scrollTo: "scrollTo", pageSizeOptions: "pageSizeOptions" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-wrapper\">\n <nav class=\"pagination-nav\" aria-label=\"pagination\">\n <button class=\"page-link page-icon-link\" [class.disabled]=\"pageNumber === 1\" (click)=\"changePageNumber(pageNumber - 1)\" aria-label=\"Previous page\">\n <mz-svg-icon key=\"chevron-left-solid\"></mz-svg-icon>\n </button>\n @for(p of pages; track $index) {\n @if(isEllipsis(p)) {\n <span class=\"page-ellipsis page-link disabled\">...</span>\n } @else {\n <button class=\"page-link\" [class.active]=\"p === pageNumber\" (click)=\"changePageNumber(p)\">{{ p }}</button>\n }\n }\n\n <button class=\"page-link page-icon-link\" [class.disabled]=\"pageNumber === pageCount\" (click)=\"changePageNumber(pageNumber + 1)\" aria-label=\"Next page\">\n <mz-svg-icon key=\"chevron-right-solid\"></mz-svg-icon>\n </button>\n </nav>\n <div class=\"pagination-size\">\n Show\n <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\n @for(size of getPageSizeOptions(); track size) {\n <option [attr.selected]=\"getPageSize() == size ? true : null\" [value]=\"size\">{{ size }}</option>\n }\n </select>\n per page\n </div>\n</div>\n", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #facc15;--color-yellow-500: #eab308;--color-yellow-600: #ca8a04;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--border-radius: 0px;--surface-bg: #fff;--surface-border-radius: 0rem;--button-border-radius: 0rem}.pagination-wrapper{display:flex;justify-content:center;color:var(--text-subtlest);gap:1.25rem}.pagination-nav{display:flex;justify-content:center;flex-grow:1;padding-left:1rem;padding-right:1rem}.page-link{display:flex;cursor:pointer;padding:1rem;font-weight:500;color:var(--color-neutral-600)}.page-link:hover{color:var(--color-primary)}.page-link.active{color:var(--color-primary);font-weight:bolder;cursor:default}.page-link.disabled{color:var(--color-neutral-400);cursor:default;text-decoration:none}.pagination-size{color:var(--color-neutral-500);padding:1rem;font-size:.875rem;line-height:1.4285714286;margin-left:auto;display:none;flex-grow:0}@media (min-width: 1024px){.pagination-size{display:inline-block}}.page-size-control{padding:0rem 1.75rem 0rem .125rem;margin-left:.25rem;margin-right:.25rem}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
|
|
210
223
|
}
|
|
211
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type:
|
|
224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzPagination, decorators: [{
|
|
212
225
|
type: Component,
|
|
213
|
-
args: [{ selector: 'mz-pagination', imports: [SvgIconComponent], template: "<div class=\"pagination-wrapper\">\n <nav class=\"pagination-nav\" aria-label=\"pagination\">\n <button class=\"page-link page-icon-link\" [class.disabled]=\"
|
|
214
|
-
}], ctorParameters: () => [{ type:
|
|
226
|
+
args: [{ selector: 'mz-pagination', imports: [SvgIconComponent], template: "<div class=\"pagination-wrapper\">\n <nav class=\"pagination-nav\" aria-label=\"pagination\">\n <button class=\"page-link page-icon-link\" [class.disabled]=\"pageNumber === 1\" (click)=\"changePageNumber(pageNumber - 1)\" aria-label=\"Previous page\">\n <mz-svg-icon key=\"chevron-left-solid\"></mz-svg-icon>\n </button>\n @for(p of pages; track $index) {\n @if(isEllipsis(p)) {\n <span class=\"page-ellipsis page-link disabled\">...</span>\n } @else {\n <button class=\"page-link\" [class.active]=\"p === pageNumber\" (click)=\"changePageNumber(p)\">{{ p }}</button>\n }\n }\n\n <button class=\"page-link page-icon-link\" [class.disabled]=\"pageNumber === pageCount\" (click)=\"changePageNumber(pageNumber + 1)\" aria-label=\"Next page\">\n <mz-svg-icon key=\"chevron-right-solid\"></mz-svg-icon>\n </button>\n </nav>\n <div class=\"pagination-size\">\n Show\n <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\n @for(size of getPageSizeOptions(); track size) {\n <option [attr.selected]=\"getPageSize() == size ? true : null\" [value]=\"size\">{{ size }}</option>\n }\n </select>\n per page\n </div>\n</div>\n", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #facc15;--color-yellow-500: #eab308;--color-yellow-600: #ca8a04;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--border-radius: 0px;--surface-bg: #fff;--surface-border-radius: 0rem;--button-border-radius: 0rem}.pagination-wrapper{display:flex;justify-content:center;color:var(--text-subtlest);gap:1.25rem}.pagination-nav{display:flex;justify-content:center;flex-grow:1;padding-left:1rem;padding-right:1rem}.page-link{display:flex;cursor:pointer;padding:1rem;font-weight:500;color:var(--color-neutral-600)}.page-link:hover{color:var(--color-primary)}.page-link.active{color:var(--color-primary);font-weight:bolder;cursor:default}.page-link.disabled{color:var(--color-neutral-400);cursor:default;text-decoration:none}.pagination-size{color:var(--color-neutral-500);padding:1rem;font-size:.875rem;line-height:1.4285714286;margin-left:auto;display:none;flex-grow:0}@media (min-width: 1024px){.pagination-size{display:inline-block}}.page-size-control{padding:0rem 1.75rem 0rem .125rem;margin-left:.25rem;margin-right:.25rem}\n"] }]
|
|
227
|
+
}], ctorParameters: () => [{ type: MzPaginationConfig, decorators: [{
|
|
215
228
|
type: Optional
|
|
216
229
|
}, {
|
|
217
230
|
type: Inject,
|
|
218
|
-
args: [
|
|
219
|
-
}] }], propDecorators: {
|
|
231
|
+
args: [MZ_PAGINATION_DEFAULT_OPTIONS]
|
|
232
|
+
}] }], propDecorators: { totalItems: [{
|
|
233
|
+
type: Input,
|
|
234
|
+
args: [{ required: true }]
|
|
235
|
+
}], pageNumber: [{
|
|
236
|
+
type: Input,
|
|
237
|
+
args: [{ required: true }]
|
|
238
|
+
}], pageSize: [{
|
|
220
239
|
type: Input
|
|
221
|
-
}],
|
|
240
|
+
}], scrollTo: [{
|
|
222
241
|
type: Input
|
|
223
|
-
}],
|
|
242
|
+
}], pageSizeOptions: [{
|
|
224
243
|
type: Input
|
|
225
244
|
}], changePage: [{
|
|
226
245
|
type: Output
|
|
227
|
-
}], pageSizeOptions: [{
|
|
228
|
-
type: Input
|
|
229
246
|
}] } });
|
|
230
247
|
|
|
231
248
|
class ResultTableComponent {
|
|
@@ -237,13 +254,8 @@ class ResultTableComponent {
|
|
|
237
254
|
}
|
|
238
255
|
ngAfterViewInit() {
|
|
239
256
|
}
|
|
240
|
-
changePage(page
|
|
257
|
+
changePage(page) {
|
|
241
258
|
this.pageChange.emit(page);
|
|
242
|
-
if (!this.options.skipScrolling) {
|
|
243
|
-
setTimeout(() => {
|
|
244
|
-
table.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
245
|
-
});
|
|
246
|
-
}
|
|
247
259
|
}
|
|
248
260
|
searchAgain() {
|
|
249
261
|
this.pageChange.emit({ pageNumber: this.model?.pageNumber || 1, pageSize: this.model?.pageSize || 20 }); // TODO
|
|
@@ -261,11 +273,11 @@ class ResultTableComponent {
|
|
|
261
273
|
return !this.model || this.model.items.length === 0;
|
|
262
274
|
}
|
|
263
275
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ResultTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
264
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ResultTableComponent, isStandalone: true, selector: "mz-result-table", inputs: { loading: "loading", error: "error", model: "model", pageSizeOptions: "pageSizeOptions", options: "options" }, outputs: { pageChange: "pageChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"result-table\" [ngClass]=\"{'loading': state === 'loading', 'failed': state === 'failed'}\" #tableRef>\n <div class=\"loading-overlay-spinner\" *ngIf=\"state === 'loading'\">\n <mz-spinner size=\"large\"></mz-spinner>\n </div>\n <table class=\"table\" [ngClass]=\"{'has-overlay' : state === 'loading'}\">\n <caption *ngIf=\"state === 'succeeded' && model && model.items.length > 0\">\n {{(model.pageNumber-1) * model.pageSize + 1}} - {{(model.pageNumber-1) * model.pageSize + model.items.length}} of {{ model.totalItems }} results\n </caption>\n <thead>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </thead>\n <tbody>\n @if(state === 'succeeded' && !isEmpty) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n }\n </tbody>\n </table>\n <div class=\"table-pagination\" *ngIf=\"state === 'succeeded' && !options?.hidePagination && !isEmpty\">\n <mz-pagination [
|
|
276
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ResultTableComponent, isStandalone: true, selector: "mz-result-table", inputs: { loading: "loading", error: "error", model: "model", pageSizeOptions: "pageSizeOptions", options: "options" }, outputs: { pageChange: "pageChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"result-table\" [ngClass]=\"{'loading': state === 'loading', 'failed': state === 'failed'}\" #tableRef>\n <div class=\"loading-overlay-spinner\" *ngIf=\"state === 'loading'\">\n <mz-spinner size=\"large\"></mz-spinner>\n </div>\n <table class=\"table\" [ngClass]=\"{'has-overlay' : state === 'loading'}\">\n <caption *ngIf=\"state === 'succeeded' && model && model.items.length > 0\">\n {{(model.pageNumber-1) * model.pageSize + 1}} - {{(model.pageNumber-1) * model.pageSize + model.items.length}} of {{ model.totalItems }} results\n </caption>\n <thead>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </thead>\n <tbody>\n @if(state === 'succeeded' && !isEmpty) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n }\n </tbody>\n </table>\n <div class=\"table-pagination\" *ngIf=\"state === 'succeeded' && !options?.hidePagination && !isEmpty\">\n <mz-pagination [totalItems]=\"model!.totalItems\" [pageNumber]=\"model!.pageNumber\" [pageSize]=\"model!.pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [scrollTo]=\"tableRef\"\n (changePage)=\"changePage($event)\"></mz-pagination>\n </div>\n <div class=\"state-message\" *ngIf=\"state == 'succeeded' && isEmpty\">\n <div class=\"title\">No results found</div>\n </div>\n <div class=\"state-message\" *ngIf=\"state == 'failed'\">\n <div class=\"title\">\n <mz-svg-icon key=\"x-circle-solid\" class=\"text-danger\"></mz-svg-icon>\n Something went wrong\n </div>\n <div>Unexpected error, <a (click)=\"searchAgain()\" class=\"link-action\">try searching again</a>.</div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MzPagination, selector: "mz-pagination", inputs: ["totalItems", "pageNumber", "pageSize", "scrollTo", "pageSizeOptions"], outputs: ["changePage"] }, { kind: "component", type: MzSpinner, selector: "mz-spinner", inputs: ["size", "appearance"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
|
|
265
277
|
}
|
|
266
278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ResultTableComponent, decorators: [{
|
|
267
279
|
type: Component,
|
|
268
|
-
args: [{ selector: 'mz-result-table', imports: [CommonModule,
|
|
280
|
+
args: [{ selector: 'mz-result-table', imports: [CommonModule, MzPagination, MzSpinner, SvgIconComponent], template: "<div class=\"result-table\" [ngClass]=\"{'loading': state === 'loading', 'failed': state === 'failed'}\" #tableRef>\n <div class=\"loading-overlay-spinner\" *ngIf=\"state === 'loading'\">\n <mz-spinner size=\"large\"></mz-spinner>\n </div>\n <table class=\"table\" [ngClass]=\"{'has-overlay' : state === 'loading'}\">\n <caption *ngIf=\"state === 'succeeded' && model && model.items.length > 0\">\n {{(model.pageNumber-1) * model.pageSize + 1}} - {{(model.pageNumber-1) * model.pageSize + model.items.length}} of {{ model.totalItems }} results\n </caption>\n <thead>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </thead>\n <tbody>\n @if(state === 'succeeded' && !isEmpty) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n }\n </tbody>\n </table>\n <div class=\"table-pagination\" *ngIf=\"state === 'succeeded' && !options?.hidePagination && !isEmpty\">\n <mz-pagination [totalItems]=\"model!.totalItems\" [pageNumber]=\"model!.pageNumber\" [pageSize]=\"model!.pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [scrollTo]=\"tableRef\"\n (changePage)=\"changePage($event)\"></mz-pagination>\n </div>\n <div class=\"state-message\" *ngIf=\"state == 'succeeded' && isEmpty\">\n <div class=\"title\">No results found</div>\n </div>\n <div class=\"state-message\" *ngIf=\"state == 'failed'\">\n <div class=\"title\">\n <mz-svg-icon key=\"x-circle-solid\" class=\"text-danger\"></mz-svg-icon>\n Something went wrong\n </div>\n <div>Unexpected error, <a (click)=\"searchAgain()\" class=\"link-action\">try searching again</a>.</div>\n </div>\n</div>\n" }]
|
|
269
281
|
}], ctorParameters: () => [], propDecorators: { loading: [{
|
|
270
282
|
type: Input
|
|
271
283
|
}], error: [{
|
|
@@ -730,7 +742,7 @@ class MuziehComponentsModule {
|
|
|
730
742
|
EnumDisplayPipe,
|
|
731
743
|
ResultTableComponent,
|
|
732
744
|
InfiniteScrollComponent,
|
|
733
|
-
|
|
745
|
+
MzPagination,
|
|
734
746
|
PageLoadingIndicatorComponent,
|
|
735
747
|
PageHeaderComponent,
|
|
736
748
|
DateDisplayPipe,
|
|
@@ -742,7 +754,7 @@ class MuziehComponentsModule {
|
|
|
742
754
|
SvgIconComponent,
|
|
743
755
|
ResultTableComponent,
|
|
744
756
|
InfiniteScrollComponent,
|
|
745
|
-
|
|
757
|
+
MzPagination,
|
|
746
758
|
PageLoadingIndicatorComponent,
|
|
747
759
|
PageHeaderComponent,
|
|
748
760
|
DateDisplayPipe,
|
|
@@ -776,7 +788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
776
788
|
EnumDisplayPipe,
|
|
777
789
|
ResultTableComponent,
|
|
778
790
|
InfiniteScrollComponent,
|
|
779
|
-
|
|
791
|
+
MzPagination,
|
|
780
792
|
PageLoadingIndicatorComponent,
|
|
781
793
|
PageHeaderComponent,
|
|
782
794
|
DateDisplayPipe,
|
|
@@ -791,7 +803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
791
803
|
SvgIconComponent,
|
|
792
804
|
ResultTableComponent,
|
|
793
805
|
InfiniteScrollComponent,
|
|
794
|
-
|
|
806
|
+
MzPagination,
|
|
795
807
|
PageLoadingIndicatorComponent,
|
|
796
808
|
PageHeaderComponent,
|
|
797
809
|
DateDisplayPipe,
|
|
@@ -943,6 +955,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
943
955
|
args: [NgModel, { read: ElementRef }]
|
|
944
956
|
}] } });
|
|
945
957
|
|
|
958
|
+
class MzAsync {
|
|
959
|
+
constructor() {
|
|
960
|
+
this.isLoading = input(false);
|
|
961
|
+
this.error = input(undefined);
|
|
962
|
+
}
|
|
963
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzAsync, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
964
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: MzAsync, isStandalone: true, selector: "mz-async", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(isLoading()) {\n<div class=\"loading-content\">\n <ng-content select=\"[mzAsyncLoading]\"></ng-content>\n</div>\n<div class=\"loading-content\">Default loading look...</div>\n} @else if(error()) {\n<div class=\"error-content\">\n <ng-content select=\"[mzAsyncError]\"></ng-content>\n</div>\n<div class=\"error-content\">Default error look...</div>\n} @else {\n<ng-content select=\"[mzAsyncSuccess]\"></ng-content>\n}\n", styles: [".loading-content{display:none}\n"] }); }
|
|
965
|
+
}
|
|
966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzAsync, decorators: [{
|
|
967
|
+
type: Component,
|
|
968
|
+
args: [{ selector: 'mz-async', imports: [], template: "@if(isLoading()) {\n<div class=\"loading-content\">\n <ng-content select=\"[mzAsyncLoading]\"></ng-content>\n</div>\n<div class=\"loading-content\">Default loading look...</div>\n} @else if(error()) {\n<div class=\"error-content\">\n <ng-content select=\"[mzAsyncError]\"></ng-content>\n</div>\n<div class=\"error-content\">Default error look...</div>\n} @else {\n<ng-content select=\"[mzAsyncSuccess]\"></ng-content>\n}\n", styles: [".loading-content{display:none}\n"] }]
|
|
969
|
+
}] });
|
|
970
|
+
|
|
971
|
+
class MzAsyncError {
|
|
972
|
+
constructor() { }
|
|
973
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzAsyncError, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
974
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: MzAsyncError, isStandalone: true, selector: "[mzAsyncError]", ngImport: i0 }); }
|
|
975
|
+
}
|
|
976
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzAsyncError, decorators: [{
|
|
977
|
+
type: Directive,
|
|
978
|
+
args: [{
|
|
979
|
+
selector: '[mzAsyncError]'
|
|
980
|
+
}]
|
|
981
|
+
}], ctorParameters: () => [] });
|
|
982
|
+
|
|
983
|
+
class MzAsyncLoading {
|
|
984
|
+
constructor() { }
|
|
985
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzAsyncLoading, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
986
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: MzAsyncLoading, isStandalone: true, selector: "[mzAsyncLoading]", ngImport: i0 }); }
|
|
987
|
+
}
|
|
988
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzAsyncLoading, decorators: [{
|
|
989
|
+
type: Directive,
|
|
990
|
+
args: [{
|
|
991
|
+
selector: '[mzAsyncLoading]'
|
|
992
|
+
}]
|
|
993
|
+
}], ctorParameters: () => [] });
|
|
994
|
+
|
|
946
995
|
class MuziehComponentHarness {
|
|
947
996
|
}
|
|
948
997
|
|
|
@@ -1721,5 +1770,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
1721
1770
|
* Generated bundle index. Do not edit.
|
|
1722
1771
|
*/
|
|
1723
1772
|
|
|
1724
|
-
export { AlertComponent, ButtonDirective, DateDisplayPipe, EnumDisplayPipe, FilterComponent, FilterMenuComponent, InfiniteScrollComponent, MZ_DATE_PIPE_DEFAULT_OPTIONS, MuziehComponentHarness, MuziehComponentsModule, MzButton, MzDatePipe, MzDialog, MzDialogContainer, MzDialogContent, MzDialogFooter, MzDialogHeader, MzDialogModule, MzDrawer, MzDrawerConfig, MzDrawerContainer, MzDrawerContent, MzDrawerFooter, MzDrawerHeader, MzDrawerModule, MzDrawerRef, MzInlineEditComponent, MzMessageDialog as MzMessageModal, MzSpinner, OptionsFilterComponent, PageHeaderComponent, PageLoadingIndicatorComponent,
|
|
1773
|
+
export { AlertComponent, ButtonDirective, DateDisplayPipe, EnumDisplayPipe, FilterComponent, FilterMenuComponent, InfiniteScrollComponent, MZ_DATE_PIPE_DEFAULT_OPTIONS, MuziehComponentHarness, MuziehComponentsModule, MzAsync, MzAsyncError, MzAsyncLoading, MzButton, MzDatePipe, MzDialog, MzDialogContainer, MzDialogContent, MzDialogFooter, MzDialogHeader, MzDialogModule, MzDrawer, MzDrawerConfig, MzDrawerContainer, MzDrawerContent, MzDrawerFooter, MzDrawerHeader, MzDrawerModule, MzDrawerRef, MzInlineEditComponent, MzMessageDialog as MzMessageModal, MzPagination, MzSpinner, OptionsFilterComponent, PageHeaderComponent, PageLoadingIndicatorComponent, PhoneNumberPipe, ResultTableComponent, ResultTableHarness, SVG_ICON_DEFAULT_OPTIONS, SortDirective, SortKeyDirective, SubjectDisplayPipe, SvgIconComponent, WizardProgressTrackerComponent, hasImplementation };
|
|
1725
1774
|
//# sourceMappingURL=muziehdesign-components.mjs.map
|