@bcgov/nr-ngx-component-lib 0.0.43 → 0.0.45
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/components/loading-status/loading-status.component.d.ts +8 -0
- package/components/page-header/page-header.component.d.ts +1 -1
- package/directives/row-list.base.d.ts +1 -0
- package/esm2022/components/loading-status/loading-status.component.mjs +22 -0
- package/esm2022/components/page-header/page-header.component.mjs +3 -3
- package/esm2022/directives/row-list.base.mjs +20 -20
- package/esm2022/nr-ngx-component-lib.module.mjs +8 -3
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/bcgov-nr-ngx-component-lib.mjs +46 -24
- package/fesm2022/bcgov-nr-ngx-component-lib.mjs.map +1 -1
- package/nr-ngx-component-lib.module.d.ts +25 -24
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -1300,21 +1300,6 @@ class ObservableAborter {
|
|
|
1300
1300
|
}
|
|
1301
1301
|
|
|
1302
1302
|
class RowListBase extends NrclBase {
|
|
1303
|
-
constructor() {
|
|
1304
|
-
super(...arguments);
|
|
1305
|
-
this.pageStateService = inject(PageStateService);
|
|
1306
|
-
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
1307
|
-
this.isLoadingChange = new EventEmitter();
|
|
1308
|
-
this._isLoading = false;
|
|
1309
|
-
this._rows = [];
|
|
1310
|
-
this._totalRowCount = 0;
|
|
1311
|
-
this._pageConfig = {
|
|
1312
|
-
pageSize: 0,
|
|
1313
|
-
pageNumber: 1,
|
|
1314
|
-
sortActive: '',
|
|
1315
|
-
sortDirection: 'asc'
|
|
1316
|
-
};
|
|
1317
|
-
}
|
|
1318
1303
|
get isLoading() { return this._isLoading; }
|
|
1319
1304
|
set isLoading(v) {
|
|
1320
1305
|
if (v == this._isLoading)
|
|
@@ -1329,10 +1314,25 @@ class RowListBase extends NrclBase {
|
|
|
1329
1314
|
get sortActive() { return this._pageConfig.sortActive; }
|
|
1330
1315
|
get sortDirection() { return this._pageConfig.sortDirection; }
|
|
1331
1316
|
get filter() {
|
|
1332
|
-
return this._filter
|
|
1317
|
+
return this._filter;
|
|
1333
1318
|
}
|
|
1334
|
-
|
|
1319
|
+
constructor() {
|
|
1320
|
+
super();
|
|
1321
|
+
this.pageStateService = inject(PageStateService);
|
|
1322
|
+
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
1323
|
+
this.isLoadingChange = new EventEmitter();
|
|
1324
|
+
this._isLoading = false;
|
|
1325
|
+
this._rows = [];
|
|
1326
|
+
this._totalRowCount = 0;
|
|
1327
|
+
this._pageConfig = {
|
|
1328
|
+
pageSize: 0,
|
|
1329
|
+
pageNumber: 1,
|
|
1330
|
+
sortActive: '',
|
|
1331
|
+
sortDirection: 'asc'
|
|
1332
|
+
};
|
|
1335
1333
|
this.loadPageState();
|
|
1334
|
+
}
|
|
1335
|
+
ngAfterViewInit() {
|
|
1336
1336
|
this.refreshRowList();
|
|
1337
1337
|
}
|
|
1338
1338
|
refreshRowList() {
|
|
@@ -1418,12 +1418,12 @@ class RowListBase extends NrclBase {
|
|
|
1418
1418
|
totalItems: this._totalRowCount
|
|
1419
1419
|
};
|
|
1420
1420
|
}
|
|
1421
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListBase, deps:
|
|
1421
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1422
1422
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: RowListBase, outputs: { isLoadingChange: "isLoadingChange" }, usesInheritance: true, ngImport: i0 }); }
|
|
1423
1423
|
}
|
|
1424
1424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RowListBase, decorators: [{
|
|
1425
1425
|
type: Directive
|
|
1426
|
-
}], propDecorators: { isLoadingChange: [{
|
|
1426
|
+
}], ctorParameters: () => [], propDecorators: { isLoadingChange: [{
|
|
1427
1427
|
type: Output
|
|
1428
1428
|
}] } });
|
|
1429
1429
|
|
|
@@ -1911,13 +1911,13 @@ class PageHeaderComponent extends ConfigurationSubscriberBase {
|
|
|
1911
1911
|
this.isLoading = false;
|
|
1912
1912
|
}
|
|
1913
1913
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1914
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PageHeaderComponent, selector: "nrcl-page-header", inputs: { isLoading: "isLoading" }, host: { properties: { "class.isLoading": "isLoading" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #headers>\n <ng-content select=\"h1\"></ng-content>\n <ng-content select=\"h2\"></ng-content>\n</ng-template>\n\n<ng-template #indicator>\n <ng-content select=\"nrcl-indicator,[indicator]\"></ng-content>\n</ng-template>\n\n<ng-template #leftSide>\n <ng-content select=\"[left-side]\"></ng-content>\n</ng-template>\n\n<ng-template #actions>\n <ng-content select=\"[action]\"></ng-content>\n</ng-template>\n\n<ng-template #rightSide>\n <ng-content select=\"[right-side]\"></ng-content>\n <ng-content></ng-content>\n</ng-template>\n\n@if ( desktopVisible ) {\n <div class=\"left-side\">\n <div class=\"headers\">\n <ng-container [ngTemplateOutlet]=\"headers\"></ng-container>\n </div>\n\n <div class=\"below-title\">\n <ng-container [ngTemplateOutlet]=\"leftSide\"></ng-container>\n </div>\n </div>\n\n <div class=\"middle\">\n <div class=\"indicator\">\n <ng-container [ngTemplateOutlet]=\"indicator\"></ng-container>\n </div>\n </div>\n\n <div class=\"right-side\">\n <div class=\"actions\">\n <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n <div class=\"below-actions\">\n <ng-container [ngTemplateOutlet]=\"rightSide\"></ng-container>\n </div>\n </div>\n}\n\n@if ( mobileVisible ) {\n <div class=\"top\">\n <div class=\"indicator\">\n <ng-container [ngTemplateOutlet]=\"indicator\"></ng-container>\n <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n </div>\n <div class=\"headers\">\n <ng-container [ngTemplateOutlet]=\"headers\"></ng-container>\n </div>\n </div>\n\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n\n <div class=\"bottom\">\n <ng-container [ngTemplateOutlet]=\"leftSide\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"rightSide\"></ng-container>\n </div>\n}\n\n", styles: [":host{display:flex;position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host .headers{display:flex;flex-direction:column}:host .headers ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .headers ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .actions{align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--nrcl-gutter-space);position:relative}:host .actions:empty{display:none}:host .loading{position:absolute;top:0;right:0;display:none}:host.isLoading .loading{display:block}:host-context(.nrcl-device-desktop) :host .left-side{display:flex;flex-direction:column}:host-context(.nrcl-device-desktop) :host .middle{flex-grow:1}:host-context(.nrcl-device-desktop) :host .middle .indicator{display:flex;align-items:center;height:var(--nrcl-button-normal-height);margin-left:var(--nrcl-gutter-space)}:host-context(.nrcl-device-desktop) :host .right-side{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}:host-context(.nrcl-device-desktop) :host.isLoading .actions>::ng-deep *:not(.loading){visibility:hidden}:host-context(.nrcl-device-mobile) :host{flex-direction:column;gap:var(--nrcl-gutter-space)}:host-context(.nrcl-device-mobile) :host .top{display:block}:host-context(.nrcl-device-mobile) :host .top .headers{display:contents}:host-context(.nrcl-device-mobile) :host .top .headers ::ng-deep h1,:host-context(.nrcl-device-mobile) :host .top .headers ::ng-deep h2{display:block}:host-context(.nrcl-device-mobile) :host .top .indicator{float:right}:host-context(.nrcl-device-mobile) :host .top .indicator:empty{display:none}:host-context(.nrcl-device-mobile) :host .actions{align-self:stretch;justify-content:flex-start}:host-context(.nrcl-device-mobile) :host .bottom{display:flex;flex-direction:column}:host-context(.nrcl-device-mobile) :host .bottom:empty{display:none}:host-context(.nrcl-device-mobile) :host.isLoading .indicator>::ng-deep *:not(.loading){visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1914
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PageHeaderComponent, selector: "nrcl-page-header", inputs: { isLoading: "isLoading" }, host: { properties: { "class.isLoading": "isLoading" } }, usesInheritance: true, ngImport: i0, template: "<ng-template #headers>\n <ng-content select=\"h1:not([right-side]):not([action])\"></ng-content>\n <ng-content select=\"h2:not([right-side]):not([action])\"></ng-content>\n</ng-template>\n\n<ng-template #indicator>\n <ng-content select=\"nrcl-indicator,[indicator]\"></ng-content>\n</ng-template>\n\n<ng-template #leftSide>\n <ng-content select=\"[left-side]\"></ng-content>\n</ng-template>\n\n<ng-template #actions>\n <ng-content select=\"[action]\"></ng-content>\n</ng-template>\n\n<ng-template #rightSide>\n <ng-content select=\"[right-side]\"></ng-content>\n <ng-content></ng-content>\n</ng-template>\n\n@if ( desktopVisible ) {\n <div class=\"left-side\">\n <div class=\"headers\">\n <ng-container [ngTemplateOutlet]=\"headers\"></ng-container>\n </div>\n\n <div class=\"below-title\">\n <ng-container [ngTemplateOutlet]=\"leftSide\"></ng-container>\n </div>\n </div>\n\n <div class=\"middle\">\n <div class=\"indicator\">\n <ng-container [ngTemplateOutlet]=\"indicator\"></ng-container>\n </div>\n </div>\n\n <div class=\"right-side\">\n <div class=\"actions\">\n <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n <div class=\"below-actions\">\n <ng-container [ngTemplateOutlet]=\"rightSide\"></ng-container>\n </div>\n </div>\n}\n\n@if ( mobileVisible ) {\n <div class=\"top\">\n <div class=\"indicator\">\n <ng-container [ngTemplateOutlet]=\"indicator\"></ng-container>\n <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n </div>\n <div class=\"headers\">\n <ng-container [ngTemplateOutlet]=\"headers\"></ng-container>\n </div>\n </div>\n\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n\n <div class=\"bottom\">\n <ng-container [ngTemplateOutlet]=\"leftSide\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"rightSide\"></ng-container>\n </div>\n}\n\n", styles: [":host{display:flex;position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host .headers{display:flex;flex-direction:column}:host .headers ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .headers ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .actions{align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--nrcl-gutter-space);position:relative}:host .actions:empty{display:none}:host .loading{position:absolute;top:0;right:0;display:none}:host.isLoading .loading{display:block}:host-context(.nrcl-device-desktop) :host .left-side{display:flex;flex-direction:column}:host-context(.nrcl-device-desktop) :host .middle{flex-grow:1}:host-context(.nrcl-device-desktop) :host .middle .indicator{display:flex;align-items:center;height:var(--nrcl-button-normal-height);margin-left:var(--nrcl-gutter-space)}:host-context(.nrcl-device-desktop) :host .right-side{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}:host-context(.nrcl-device-desktop) :host.isLoading .actions>::ng-deep *:not(.loading){visibility:hidden}:host-context(.nrcl-device-mobile) :host{flex-direction:column;gap:var(--nrcl-gutter-space)}:host-context(.nrcl-device-mobile) :host .top{display:block}:host-context(.nrcl-device-mobile) :host .top .headers{display:contents}:host-context(.nrcl-device-mobile) :host .top .headers ::ng-deep h1,:host-context(.nrcl-device-mobile) :host .top .headers ::ng-deep h2{display:block}:host-context(.nrcl-device-mobile) :host .top .indicator{float:right}:host-context(.nrcl-device-mobile) :host .top .indicator:empty{display:none}:host-context(.nrcl-device-mobile) :host .actions{align-self:stretch;justify-content:flex-start}:host-context(.nrcl-device-mobile) :host .bottom{display:flex;flex-direction:column}:host-context(.nrcl-device-mobile) :host .bottom:empty{display:none}:host-context(.nrcl-device-mobile) :host.isLoading .indicator>::ng-deep *:not(.loading){visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1915
1915
|
}
|
|
1916
1916
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
1917
1917
|
type: Component,
|
|
1918
1918
|
args: [{ selector: "nrcl-page-header", changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1919
1919
|
'[class.isLoading]': 'isLoading',
|
|
1920
|
-
}, template: "<ng-template #headers>\n <ng-content select=\"h1\"></ng-content>\n <ng-content select=\"h2\"></ng-content>\n</ng-template>\n\n<ng-template #indicator>\n <ng-content select=\"nrcl-indicator,[indicator]\"></ng-content>\n</ng-template>\n\n<ng-template #leftSide>\n <ng-content select=\"[left-side]\"></ng-content>\n</ng-template>\n\n<ng-template #actions>\n <ng-content select=\"[action]\"></ng-content>\n</ng-template>\n\n<ng-template #rightSide>\n <ng-content select=\"[right-side]\"></ng-content>\n <ng-content></ng-content>\n</ng-template>\n\n@if ( desktopVisible ) {\n <div class=\"left-side\">\n <div class=\"headers\">\n <ng-container [ngTemplateOutlet]=\"headers\"></ng-container>\n </div>\n\n <div class=\"below-title\">\n <ng-container [ngTemplateOutlet]=\"leftSide\"></ng-container>\n </div>\n </div>\n\n <div class=\"middle\">\n <div class=\"indicator\">\n <ng-container [ngTemplateOutlet]=\"indicator\"></ng-container>\n </div>\n </div>\n\n <div class=\"right-side\">\n <div class=\"actions\">\n <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n <div class=\"below-actions\">\n <ng-container [ngTemplateOutlet]=\"rightSide\"></ng-container>\n </div>\n </div>\n}\n\n@if ( mobileVisible ) {\n <div class=\"top\">\n <div class=\"indicator\">\n <ng-container [ngTemplateOutlet]=\"indicator\"></ng-container>\n <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n </div>\n <div class=\"headers\">\n <ng-container [ngTemplateOutlet]=\"headers\"></ng-container>\n </div>\n </div>\n\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n\n <div class=\"bottom\">\n <ng-container [ngTemplateOutlet]=\"leftSide\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"rightSide\"></ng-container>\n </div>\n}\n\n", styles: [":host{display:flex;position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host .headers{display:flex;flex-direction:column}:host .headers ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .headers ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .actions{align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--nrcl-gutter-space);position:relative}:host .actions:empty{display:none}:host .loading{position:absolute;top:0;right:0;display:none}:host.isLoading .loading{display:block}:host-context(.nrcl-device-desktop) :host .left-side{display:flex;flex-direction:column}:host-context(.nrcl-device-desktop) :host .middle{flex-grow:1}:host-context(.nrcl-device-desktop) :host .middle .indicator{display:flex;align-items:center;height:var(--nrcl-button-normal-height);margin-left:var(--nrcl-gutter-space)}:host-context(.nrcl-device-desktop) :host .right-side{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}:host-context(.nrcl-device-desktop) :host.isLoading .actions>::ng-deep *:not(.loading){visibility:hidden}:host-context(.nrcl-device-mobile) :host{flex-direction:column;gap:var(--nrcl-gutter-space)}:host-context(.nrcl-device-mobile) :host .top{display:block}:host-context(.nrcl-device-mobile) :host .top .headers{display:contents}:host-context(.nrcl-device-mobile) :host .top .headers ::ng-deep h1,:host-context(.nrcl-device-mobile) :host .top .headers ::ng-deep h2{display:block}:host-context(.nrcl-device-mobile) :host .top .indicator{float:right}:host-context(.nrcl-device-mobile) :host .top .indicator:empty{display:none}:host-context(.nrcl-device-mobile) :host .actions{align-self:stretch;justify-content:flex-start}:host-context(.nrcl-device-mobile) :host .bottom{display:flex;flex-direction:column}:host-context(.nrcl-device-mobile) :host .bottom:empty{display:none}:host-context(.nrcl-device-mobile) :host.isLoading .indicator>::ng-deep *:not(.loading){visibility:hidden}\n"] }]
|
|
1920
|
+
}, template: "<ng-template #headers>\n <ng-content select=\"h1:not([right-side]):not([action])\"></ng-content>\n <ng-content select=\"h2:not([right-side]):not([action])\"></ng-content>\n</ng-template>\n\n<ng-template #indicator>\n <ng-content select=\"nrcl-indicator,[indicator]\"></ng-content>\n</ng-template>\n\n<ng-template #leftSide>\n <ng-content select=\"[left-side]\"></ng-content>\n</ng-template>\n\n<ng-template #actions>\n <ng-content select=\"[action]\"></ng-content>\n</ng-template>\n\n<ng-template #rightSide>\n <ng-content select=\"[right-side]\"></ng-content>\n <ng-content></ng-content>\n</ng-template>\n\n@if ( desktopVisible ) {\n <div class=\"left-side\">\n <div class=\"headers\">\n <ng-container [ngTemplateOutlet]=\"headers\"></ng-container>\n </div>\n\n <div class=\"below-title\">\n <ng-container [ngTemplateOutlet]=\"leftSide\"></ng-container>\n </div>\n </div>\n\n <div class=\"middle\">\n <div class=\"indicator\">\n <ng-container [ngTemplateOutlet]=\"indicator\"></ng-container>\n </div>\n </div>\n\n <div class=\"right-side\">\n <div class=\"actions\">\n <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n <div class=\"below-actions\">\n <ng-container [ngTemplateOutlet]=\"rightSide\"></ng-container>\n </div>\n </div>\n}\n\n@if ( mobileVisible ) {\n <div class=\"top\">\n <div class=\"indicator\">\n <ng-container [ngTemplateOutlet]=\"indicator\"></ng-container>\n <mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n </div>\n <div class=\"headers\">\n <ng-container [ngTemplateOutlet]=\"headers\"></ng-container>\n </div>\n </div>\n\n <div class=\"actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n\n <div class=\"bottom\">\n <ng-container [ngTemplateOutlet]=\"leftSide\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"rightSide\"></ng-container>\n </div>\n}\n\n", styles: [":host{display:flex;position:relative;padding-top:var(--nrcl-gutter-space);font-family:var(--nrcl-font-family)}:host .headers{display:flex;flex-direction:column}:host .headers ::ng-deep h1{font-size:var(--nrcl-font-size-h1);font-weight:200;padding:0;margin:0}:host .headers ::ng-deep h2{font-size:var(--nrcl-font-size-h2);font-weight:200;padding:0;margin:0}:host .actions{align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--nrcl-gutter-space);position:relative}:host .actions:empty{display:none}:host .loading{position:absolute;top:0;right:0;display:none}:host.isLoading .loading{display:block}:host-context(.nrcl-device-desktop) :host .left-side{display:flex;flex-direction:column}:host-context(.nrcl-device-desktop) :host .middle{flex-grow:1}:host-context(.nrcl-device-desktop) :host .middle .indicator{display:flex;align-items:center;height:var(--nrcl-button-normal-height);margin-left:var(--nrcl-gutter-space)}:host-context(.nrcl-device-desktop) :host .right-side{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}:host-context(.nrcl-device-desktop) :host.isLoading .actions>::ng-deep *:not(.loading){visibility:hidden}:host-context(.nrcl-device-mobile) :host{flex-direction:column;gap:var(--nrcl-gutter-space)}:host-context(.nrcl-device-mobile) :host .top{display:block}:host-context(.nrcl-device-mobile) :host .top .headers{display:contents}:host-context(.nrcl-device-mobile) :host .top .headers ::ng-deep h1,:host-context(.nrcl-device-mobile) :host .top .headers ::ng-deep h2{display:block}:host-context(.nrcl-device-mobile) :host .top .indicator{float:right}:host-context(.nrcl-device-mobile) :host .top .indicator:empty{display:none}:host-context(.nrcl-device-mobile) :host .actions{align-self:stretch;justify-content:flex-start}:host-context(.nrcl-device-mobile) :host .bottom{display:flex;flex-direction:column}:host-context(.nrcl-device-mobile) :host .bottom:empty{display:none}:host-context(.nrcl-device-mobile) :host.isLoading .indicator>::ng-deep *:not(.loading){visibility:hidden}\n"] }]
|
|
1921
1921
|
}], propDecorators: { isLoading: [{
|
|
1922
1922
|
type: Input
|
|
1923
1923
|
}] } });
|
|
@@ -2073,6 +2073,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2073
2073
|
args: [{ selector: 'nrcl-dialog-confirm', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nrcl-dialog\n [title]=\"title\"\n [isLoading]=\"false\"\n [showClose]=\"true\"\n [saveLabel]=\"saveLabel\"\n [saveEnabled]=\"true\"\n [cancelLabel]=\"cancelLabel\"\n [cancelEnabled]=\"true\"\n [showWarning]=\"false\"\n [showActions]=\"true\"\n (saveClick)=\"onSaveClick()\"\n (cancelClick)=\"onCancelClick()\"\n>\n <ng-container \n [ngTemplateOutlet]=\"config.template\" \n [ngTemplateOutletContext]=\"{ $implicit: config.context }\">\n </ng-container>\n</nrcl-dialog>\n" }]
|
|
2074
2074
|
}] });
|
|
2075
2075
|
|
|
2076
|
+
class LoadingStatusComponent extends NrclBase {
|
|
2077
|
+
constructor() {
|
|
2078
|
+
super(...arguments);
|
|
2079
|
+
this.loading = false;
|
|
2080
|
+
}
|
|
2081
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingStatusComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2082
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: LoadingStatusComponent, selector: "nrcl-loading-status", inputs: { loading: ["loading", "loading", booleanAttribute] }, host: { properties: { "class.is-loading": "loading" } }, usesInheritance: true, ngImport: i0, template: "<mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block;position:relative}:host .loading{display:none;position:absolute;top:0;right:0}:host.is-loading .content{visibility:hidden}:host.is-loading .loading{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
2083
|
+
}
|
|
2084
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingStatusComponent, decorators: [{
|
|
2085
|
+
type: Component,
|
|
2086
|
+
args: [{ selector: 'nrcl-loading-status', host: {
|
|
2087
|
+
'[class.is-loading]': "loading",
|
|
2088
|
+
}, template: "<mat-spinner class=\"loading\" [diameter]=\"30\"></mat-spinner>\n\n<div class=\"content\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block;position:relative}:host .loading{display:none;position:absolute;top:0;right:0}:host.is-loading .content{visibility:hidden}:host.is-loading .loading{display:block}\n"] }]
|
|
2089
|
+
}], propDecorators: { loading: [{
|
|
2090
|
+
type: Input,
|
|
2091
|
+
args: [{ transform: booleanAttribute }]
|
|
2092
|
+
}] } });
|
|
2093
|
+
|
|
2076
2094
|
class SnackbarUtilService {
|
|
2077
2095
|
constructor() {
|
|
2078
2096
|
this.snackbar = inject(MatSnackBar);
|
|
@@ -2228,7 +2246,8 @@ class NrNgxComponentLibModule {
|
|
|
2228
2246
|
DialogComponent,
|
|
2229
2247
|
DialogConfirmComponent,
|
|
2230
2248
|
IndicatorSelectComponent,
|
|
2231
|
-
ListSelectComponent
|
|
2249
|
+
ListSelectComponent,
|
|
2250
|
+
LoadingStatusComponent], imports: [BrowserAnimationsModule,
|
|
2232
2251
|
CommonModule,
|
|
2233
2252
|
FormsModule,
|
|
2234
2253
|
MatButtonModule,
|
|
@@ -2284,7 +2303,8 @@ class NrNgxComponentLibModule {
|
|
|
2284
2303
|
DialogComponent,
|
|
2285
2304
|
DialogConfirmComponent,
|
|
2286
2305
|
IndicatorSelectComponent,
|
|
2287
|
-
ListSelectComponent
|
|
2306
|
+
ListSelectComponent,
|
|
2307
|
+
LoadingStatusComponent] }); }
|
|
2288
2308
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, providers: [
|
|
2289
2309
|
SnackbarUtilService,
|
|
2290
2310
|
ConfigurationService,
|
|
@@ -2381,6 +2401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2381
2401
|
DialogConfirmComponent,
|
|
2382
2402
|
IndicatorSelectComponent,
|
|
2383
2403
|
ListSelectComponent,
|
|
2404
|
+
LoadingStatusComponent,
|
|
2384
2405
|
],
|
|
2385
2406
|
exports: [
|
|
2386
2407
|
ButtonComponent,
|
|
@@ -2416,6 +2437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2416
2437
|
DialogConfirmComponent,
|
|
2417
2438
|
IndicatorSelectComponent,
|
|
2418
2439
|
ListSelectComponent,
|
|
2440
|
+
LoadingStatusComponent,
|
|
2419
2441
|
],
|
|
2420
2442
|
providers: [
|
|
2421
2443
|
SnackbarUtilService,
|
|
@@ -2435,5 +2457,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2435
2457
|
* Generated bundle index. Do not edit.
|
|
2436
2458
|
*/
|
|
2437
2459
|
|
|
2438
|
-
export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewDirective, DeviceViewComponent, DialogBase, DialogComponent, DialogConfirmComponent, DialogService, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, ExpansionPanelSectionComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, IconComponent, IndicatorComponent, IndicatorSelectComponent, ListAttachmentsComponent, ListEventHistoryComponent, ListSelectComponent, MobileViewDirective, NrNgxComponentLibModule, NrclBase, ObservableAborter, PageContainerComponent, PageHeaderComponent, PageStateService, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, SnackbarComponent, SnackbarUtilService, TagListComponent, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
|
|
2460
|
+
export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewDirective, DeviceViewComponent, DialogBase, DialogComponent, DialogConfirmComponent, DialogService, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, ExpansionPanelSectionComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, IconComponent, IndicatorComponent, IndicatorSelectComponent, ListAttachmentsComponent, ListEventHistoryComponent, ListSelectComponent, LoadingStatusComponent, MobileViewDirective, NrNgxComponentLibModule, NrclBase, ObservableAborter, PageContainerComponent, PageHeaderComponent, PageStateService, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, SnackbarComponent, SnackbarUtilService, TagListComponent, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
|
|
2439
2461
|
//# sourceMappingURL=bcgov-nr-ngx-component-lib.mjs.map
|