@bcgov/nr-ngx-component-lib 0.0.35 → 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.
|
@@ -17,7 +17,7 @@ export class IconComponent extends NrclBase {
|
|
|
17
17
|
this.svg = this.domSanitizer.bypassSecurityTrustHtml(ICON[this.name]);
|
|
18
18
|
}
|
|
19
19
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: IconComponent, selector: "nrcl-icon", inputs: { small: ["small", "small", booleanAttribute], large: ["large", "large", booleanAttribute] }, host: { properties: { "class.show-icon": "!svg", "class.show-svg": "!!svg", "class.small": "small", "class.normal": "( !small && !large ) || ( small && large )", "class.large": "large" } }, usesInheritance: true, ngImport: i0, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: ["::ng-deep :root{--nrcl-icon-small-size: 18px;--nrcl-icon-normal-size: 24px;--nrcl-icon-large-size: 30px}:host{display:block}:host .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host.small.show-icon .mat-icon{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.small.show-svg .svg{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.normal.show-icon .mat-icon{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.normal.show-svg .svg{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.large.show-icon .mat-icon{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.large.show-svg .svg{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.show-svg .mat-icon{display:none}:host.show-svg ::ng-deep .svg{fill:currentcolor}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: IconComponent, selector: "nrcl-icon", inputs: { small: ["small", "small", booleanAttribute], large: ["large", "large", booleanAttribute] }, host: { properties: { "class.show-icon": "!svg", "class.show-svg": "!!svg", "class.small": "small", "class.normal": "( !small && !large ) || ( small && large )", "class.large": "large" } }, usesInheritance: true, ngImport: i0, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: ["::ng-deep :root{--nrcl-icon-small-size: 18px;--nrcl-icon-normal-size: 24px;--nrcl-icon-large-size: 30px}:host{display:block}:host .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-weight:400}:host.small.show-icon .mat-icon{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.small.show-svg .svg{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.normal.show-icon .mat-icon{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.normal.show-svg .svg{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.large.show-icon .mat-icon{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.large.show-svg .svg{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.show-svg .mat-icon{display:none}:host.show-svg ::ng-deep .svg{fill:currentcolor}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
21
21
|
}
|
|
22
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
@@ -27,7 +27,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
27
27
|
'[class.small]': 'small',
|
|
28
28
|
'[class.normal]': '( !small && !large ) || ( small && large )',
|
|
29
29
|
'[class.large]': 'large',
|
|
30
|
-
}, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: ["::ng-deep :root{--nrcl-icon-small-size: 18px;--nrcl-icon-normal-size: 24px;--nrcl-icon-large-size: 30px}:host{display:block}:host .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host.small.show-icon .mat-icon{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.small.show-svg .svg{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.normal.show-icon .mat-icon{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.normal.show-svg .svg{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.large.show-icon .mat-icon{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.large.show-svg .svg{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.show-svg .mat-icon{display:none}:host.show-svg ::ng-deep .svg{fill:currentcolor}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"] }]
|
|
30
|
+
}, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: ["::ng-deep :root{--nrcl-icon-small-size: 18px;--nrcl-icon-normal-size: 24px;--nrcl-icon-large-size: 30px}:host{display:block}:host .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-weight:400}:host.small.show-icon .mat-icon{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.small.show-svg .svg{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.normal.show-icon .mat-icon{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.normal.show-svg .svg{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.large.show-icon .mat-icon{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.large.show-svg .svg{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.show-svg .mat-icon{display:none}:host.show-svg ::ng-deep .svg{fill:currentcolor}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"] }]
|
|
31
31
|
}], propDecorators: { small: [{
|
|
32
32
|
type: Input,
|
|
33
33
|
args: [{ transform: booleanAttribute }]
|
|
@@ -9,14 +9,14 @@ export class PageHeaderComponent extends ConfigurationSubscriberBase {
|
|
|
9
9
|
this.isLoading = false;
|
|
10
10
|
}
|
|
11
11
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
-
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 </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
|
|
12
|
+
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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13
13
|
}
|
|
14
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
16
|
args: [{ selector: "nrcl-page-header", changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
17
17
|
'[class.isLoading]': 'isLoading',
|
|
18
|
-
}, 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 </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
|
|
18
|
+
}, 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"] }]
|
|
19
19
|
}], propDecorators: { isLoading: [{
|
|
20
20
|
type: Input
|
|
21
21
|
}] } });
|
|
22
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnItbmd4LWNvbXBvbmVudC1saWIvc3JjL2NvbXBvbmVudHMvcGFnZS1oZWFkZXIvcGFnZS1oZWFkZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnItbmd4LWNvbXBvbmVudC1saWIvc3JjL2NvbXBvbmVudHMvcGFnZS1oZWFkZXIvcGFnZS1oZWFkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxFQUNSLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLGdEQUFnRCxDQUFDOzs7O0FBVzdGLE1BQU0sT0FBTyxtQkFBb0IsU0FBUSwyQkFBMkI7SUFUcEU7O1FBVWEsY0FBUyxHQUFHLEtBQUssQ0FBQTtLQUM3QjsrR0FGWSxtQkFBbUI7bUdBQW5CLG1CQUFtQiw2S0NqQmhDLG9sRUF1RUE7OzRGRHREYSxtQkFBbUI7a0JBVC9CLFNBQVM7K0JBQ0ksa0JBQWtCLG1CQUdYLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsbUJBQW1CLEVBQUUsV0FBVztxQkFDbkM7OEJBR1EsU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIElucHV0XG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBOcmNsQmFzZSB9IGZyb20gXCIuLi8uLi9kaXJlY3RpdmVzL25yY2wuYmFzZVwiO1xuaW1wb3J0IHsgQ29uZmlndXJhdGlvblN1YnNjcmliZXJCYXNlIH0gZnJvbSBcIi4uLy4uL2RpcmVjdGl2ZXMvY29uZmlndXJhdGlvbi1zdWJzY3JpYmVyLmJhc2VcIjtcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6IFwibnJjbC1wYWdlLWhlYWRlclwiLFxuICAgIHRlbXBsYXRlVXJsOiBcIi4vcGFnZS1oZWFkZXIuY29tcG9uZW50Lmh0bWxcIixcbiAgICBzdHlsZVVybDogXCIuL3BhZ2UtaGVhZGVyLmNvbXBvbmVudC5zY3NzXCIsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdDoge1xuICAgICAgICAnW2NsYXNzLmlzTG9hZGluZ10nOiAnaXNMb2FkaW5nJyxcbiAgICB9XG59KVxuZXhwb3J0IGNsYXNzIFBhZ2VIZWFkZXJDb21wb25lbnQgZXh0ZW5kcyBDb25maWd1cmF0aW9uU3Vic2NyaWJlckJhc2Uge1xuICAgIEBJbnB1dCgpIGlzTG9hZGluZyA9IGZhbHNlXG59XG4iLCI8bmctdGVtcGxhdGUgI2hlYWRlcnM+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiaDFcIj48L25nLWNvbnRlbnQ+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiaDJcIj48L25nLWNvbnRlbnQ+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2luZGljYXRvcj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJucmNsLWluZGljYXRvcixbaW5kaWNhdG9yXVwiPjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjbGVmdFNpZGU+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2xlZnQtc2lkZV1cIj48L25nLWNvbnRlbnQ+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2FjdGlvbnM+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2FjdGlvbl1cIj48L25nLWNvbnRlbnQ+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI3JpZ2h0U2lkZT5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbcmlnaHQtc2lkZV1cIj48L25nLWNvbnRlbnQ+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9uZy10ZW1wbGF0ZT5cblxuQGlmICggZGVza3RvcFZpc2libGUgKSB7XG4gICAgPGRpdiBjbGFzcz1cImxlZnQtc2lkZVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiaGVhZGVyc1wiPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJoZWFkZXJzXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJiZWxvdy10aXRsZVwiPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJsZWZ0U2lkZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJtaWRkbGVcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImluZGljYXRvclwiPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJpbmRpY2F0b3JcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IGNsYXNzPVwicmlnaHQtc2lkZVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYWN0aW9uc1wiPlxuICAgICAgICAgICAgPG1hdC1zcGlubmVyIGNsYXNzPVwibG9hZGluZ1wiIFtkaWFtZXRlcl09XCIzMFwiPjwvbWF0LXNwaW5uZXI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImFjdGlvbnNcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJiZWxvdy1hY3Rpb25zXCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInJpZ2h0U2lkZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbn1cblxuQGlmICggbW9iaWxlVmlzaWJsZSApIHtcbiAgICA8ZGl2IGNsYXNzPVwidG9wXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpbmRpY2F0b3JcIj5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwiaW5kaWNhdG9yXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8bWF0LXNwaW5uZXIgY2xhc3M9XCJsb2FkaW5nXCIgW2RpYW1ldGVyXT1cIjMwXCI+PC9tYXQtc3Bpbm5lcj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJoZWFkZXJzXCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImhlYWRlcnNcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IGNsYXNzPVwiYWN0aW9uc1wiPlxuICAgICAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImFjdGlvbnNcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJib3R0b21cIj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJsZWZ0U2lkZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInJpZ2h0U2lkZVwiPjwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxufVxuXG4iXX0=
|
|
@@ -145,7 +145,7 @@ class IconComponent extends NrclBase {
|
|
|
145
145
|
this.svg = this.domSanitizer.bypassSecurityTrustHtml(ICON[this.name]);
|
|
146
146
|
}
|
|
147
147
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
148
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: IconComponent, selector: "nrcl-icon", inputs: { small: ["small", "small", booleanAttribute], large: ["large", "large", booleanAttribute] }, host: { properties: { "class.show-icon": "!svg", "class.show-svg": "!!svg", "class.small": "small", "class.normal": "( !small && !large ) || ( small && large )", "class.large": "large" } }, usesInheritance: true, ngImport: i0, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: ["::ng-deep :root{--nrcl-icon-small-size: 18px;--nrcl-icon-normal-size: 24px;--nrcl-icon-large-size: 30px}:host{display:block}:host .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host.small.show-icon .mat-icon{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.small.show-svg .svg{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.normal.show-icon .mat-icon{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.normal.show-svg .svg{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.large.show-icon .mat-icon{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.large.show-svg .svg{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.show-svg .mat-icon{display:none}:host.show-svg ::ng-deep .svg{fill:currentcolor}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
148
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: IconComponent, selector: "nrcl-icon", inputs: { small: ["small", "small", booleanAttribute], large: ["large", "large", booleanAttribute] }, host: { properties: { "class.show-icon": "!svg", "class.show-svg": "!!svg", "class.small": "small", "class.normal": "( !small && !large ) || ( small && large )", "class.large": "large" } }, usesInheritance: true, ngImport: i0, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: ["::ng-deep :root{--nrcl-icon-small-size: 18px;--nrcl-icon-normal-size: 24px;--nrcl-icon-large-size: 30px}:host{display:block}:host .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-weight:400}:host.small.show-icon .mat-icon{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.small.show-svg .svg{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.normal.show-icon .mat-icon{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.normal.show-svg .svg{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.large.show-icon .mat-icon{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.large.show-svg .svg{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.show-svg .mat-icon{display:none}:host.show-svg ::ng-deep .svg{fill:currentcolor}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
149
149
|
}
|
|
150
150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, decorators: [{
|
|
151
151
|
type: Component,
|
|
@@ -155,7 +155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
155
155
|
'[class.small]': 'small',
|
|
156
156
|
'[class.normal]': '( !small && !large ) || ( small && large )',
|
|
157
157
|
'[class.large]': 'large',
|
|
158
|
-
}, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: ["::ng-deep :root{--nrcl-icon-small-size: 18px;--nrcl-icon-normal-size: 24px;--nrcl-icon-large-size: 30px}:host{display:block}:host .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\"}:host.small.show-icon .mat-icon{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.small.show-svg .svg{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.normal.show-icon .mat-icon{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.normal.show-svg .svg{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.large.show-icon .mat-icon{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.large.show-svg .svg{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.show-svg .mat-icon{display:none}:host.show-svg ::ng-deep .svg{fill:currentcolor}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"] }]
|
|
158
|
+
}, template: "<mat-icon><ng-content></ng-content></mat-icon>\n<div class=\"svg\" [innerHTML]=\"svg\"></div>\n", styles: ["::ng-deep :root{--nrcl-icon-small-size: 18px;--nrcl-icon-normal-size: 24px;--nrcl-icon-large-size: 30px}:host{display:block}:host .material-icons{font-family:Material Symbols Outlined;font-feature-settings:\"liga\";font-weight:400}:host.small.show-icon .mat-icon{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.small.show-svg .svg{width:var(--nrcl-icon-small-size);height:var(--nrcl-icon-small-size);font-size:var(--nrcl-icon-small-size);line-height:var(--nrcl-icon-small-size)}:host.normal.show-icon .mat-icon{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.normal.show-svg .svg{width:var(--nrcl-icon-normal-size);height:var(--nrcl-icon-normal-size);font-size:var(--nrcl-icon-normal-size);line-height:var(--nrcl-icon-normal-size)}:host.large.show-icon .mat-icon{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.large.show-svg .svg{width:var(--nrcl-icon-large-size);height:var(--nrcl-icon-large-size);font-size:var(--nrcl-icon-large-size);line-height:var(--nrcl-icon-large-size)}:host.show-svg .mat-icon{display:none}:host.show-svg ::ng-deep .svg{fill:currentcolor}:host.show-icon .mat-icon{display:block}:host.show-icon .svg{display:none}\n"] }]
|
|
159
159
|
}], propDecorators: { small: [{
|
|
160
160
|
type: Input,
|
|
161
161
|
args: [{ transform: booleanAttribute }]
|
|
@@ -1919,13 +1919,13 @@ class PageHeaderComponent extends ConfigurationSubscriberBase {
|
|
|
1919
1919
|
this.isLoading = false;
|
|
1920
1920
|
}
|
|
1921
1921
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1922
|
-
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 </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
|
|
1922
|
+
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 }); }
|
|
1923
1923
|
}
|
|
1924
1924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
1925
1925
|
type: Component,
|
|
1926
1926
|
args: [{ selector: "nrcl-page-header", changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1927
1927
|
'[class.isLoading]': 'isLoading',
|
|
1928
|
-
}, 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 </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
|
|
1928
|
+
}, 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"] }]
|
|
1929
1929
|
}], propDecorators: { isLoading: [{
|
|
1930
1930
|
type: Input
|
|
1931
1931
|
}] } });
|