invensys-ng 22.1.0 → 22.1.1
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/invensys-ng.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
-
import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, EnvironmentInjector, EventEmitter, HostBinding, HostListener, Inject, Injectable, InjectionToken, Input, Optional, Output, Self, ViewChild, ViewChildren, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, createComponent, effect, forwardRef, inject, input, output, signal } from "@angular/core";
|
|
2
|
+
import { ApplicationRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, EnvironmentInjector, EventEmitter, HostBinding, HostListener, Inject, Injectable, InjectionToken, Input, Optional, Output, Self, ViewChild, ViewChildren, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, createComponent, effect, forwardRef, inject, input, output, signal, viewChild } from "@angular/core";
|
|
3
3
|
import * as i2$2 from "@angular/common";
|
|
4
4
|
import { CommonModule, DOCUMENT, NgClass, NgStyle, NgTemplateOutlet } from "@angular/common";
|
|
5
5
|
import * as i1$1 from "@angular/forms";
|
|
@@ -4116,6 +4116,40 @@ var PageLayoutComponent = class PageLayoutComponent {
|
|
|
4116
4116
|
showHeader = input(true, ...ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []);
|
|
4117
4117
|
sidebar = contentChild(PageSidebarDirective, ...ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []);
|
|
4118
4118
|
headerActions = contentChild(PageHeaderActionsDirective, ...ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []);
|
|
4119
|
+
header = viewChild("header", ...ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []);
|
|
4120
|
+
body = viewChild.required("body", ...ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []);
|
|
4121
|
+
constructor() {
|
|
4122
|
+
afterRenderEffect((onCleanup) => {
|
|
4123
|
+
this.sidebar();
|
|
4124
|
+
const header = this.header()?.nativeElement;
|
|
4125
|
+
const body = this.body().nativeElement;
|
|
4126
|
+
const scrollport = body.closest(".layout-wrapper");
|
|
4127
|
+
const topbar = scrollport?.querySelector(":scope > i-topbar");
|
|
4128
|
+
if (!header || !scrollport || !topbar) return;
|
|
4129
|
+
const mobile = window.matchMedia("(max-width: 991px)");
|
|
4130
|
+
const update = () => {
|
|
4131
|
+
let offset = 0;
|
|
4132
|
+
if (mobile.matches) {
|
|
4133
|
+
const top = scrollport.getBoundingClientRect().top + scrollport.clientTop;
|
|
4134
|
+
const bodyTop = body.getBoundingClientRect().top;
|
|
4135
|
+
if (bodyTop < topbar.getBoundingClientRect().bottom) offset = Math.max(0, bodyTop - top);
|
|
4136
|
+
}
|
|
4137
|
+
header.style.setProperty("--page-header-snap-offset", `${-offset}px`);
|
|
4138
|
+
};
|
|
4139
|
+
const observer = new ResizeObserver(update);
|
|
4140
|
+
observer.observe(body);
|
|
4141
|
+
observer.observe(topbar);
|
|
4142
|
+
scrollport.addEventListener("scroll", update, { passive: true });
|
|
4143
|
+
window.addEventListener("resize", update);
|
|
4144
|
+
update();
|
|
4145
|
+
onCleanup(() => {
|
|
4146
|
+
observer.disconnect();
|
|
4147
|
+
scrollport.removeEventListener("scroll", update);
|
|
4148
|
+
window.removeEventListener("resize", update);
|
|
4149
|
+
header.style.removeProperty("--page-header-snap-offset");
|
|
4150
|
+
});
|
|
4151
|
+
});
|
|
4152
|
+
}
|
|
4119
4153
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
4120
4154
|
minVersion: "12.0.0",
|
|
4121
4155
|
version: "22.2.3",
|
|
@@ -4166,9 +4200,22 @@ var PageLayoutComponent = class PageLayoutComponent {
|
|
|
4166
4200
|
descendants: true,
|
|
4167
4201
|
isSignal: true
|
|
4168
4202
|
}],
|
|
4203
|
+
viewQueries: [{
|
|
4204
|
+
propertyName: "header",
|
|
4205
|
+
first: true,
|
|
4206
|
+
predicate: ["header"],
|
|
4207
|
+
descendants: true,
|
|
4208
|
+
isSignal: true
|
|
4209
|
+
}, {
|
|
4210
|
+
propertyName: "body",
|
|
4211
|
+
first: true,
|
|
4212
|
+
predicate: ["body"],
|
|
4213
|
+
descendants: true,
|
|
4214
|
+
isSignal: true
|
|
4215
|
+
}],
|
|
4169
4216
|
ngImport: i0,
|
|
4170
|
-
template: "<div class=\"page-layout\" [class.with-sidebar]=\"sidebar()\">\n @if (sidebar()) {\n <aside class=\"sidebar\">\n <ng-content select=\"[iPageSidebar]\" />\n </aside>\n }\n <div class=\"page-body\">\n @if (showHeader()) {\n <header class=\"page-header\">\n <div class=\"page-heading\">\n @if (eyebrowText()) {\n <p class=\"eyebrow\">{{ eyebrowText() }}</p>\n }\n <h1>{{ headerText() }}</h1>\n <ng-content select=\"[iPageHeaderContent]\" />\n </div>\n @if (headerActions()) {\n <div class=\"header-actions\">\n <ng-content select=\"[iPageHeaderActions]\" />\n </div>\n }\n </header>\n }\n <div class=\"page-content\">\n <ng-content />\n </div>\n </div>\n</div>\n",
|
|
4171
|
-
styles: [":host{display:block;min-width:0;color:var(--color-text-primary)}:host .page-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}:host .page-layout.with-sidebar{grid-template-columns:minmax(0,var(--page-layout-sidebar-width, 18rem)) minmax(0,1fr)}@media(max-width:991px){:host .page-layout.with-sidebar{grid-template-columns:minmax(0,1fr)}}:host .page-layout .sidebar{position:sticky;top:0;min-width:0;max-height:var(--layout-content-height, 100dvh);overflow:auto;padding:var(--page-layout-padding, 1.5rem);box-sizing:border-box}@media(max-width:991px){:host .page-layout .sidebar{position:static;max-height:none;overflow:visible;padding:var(--page-layout-padding, .75rem)}}:host .page-layout .page-body{min-width:0}:host .page-layout .page-body .page-header{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:var(--page-layout-padding, 1.5rem);background:var(--surface-ground);box-sizing:border-box}@media(max-width:991px){:host .page-layout .page-body .page-header{min-height:var(--layout-topbar-height, 0px);gap:.5rem;padding:var(--page-layout-padding, .75rem)}}:host .page-layout .page-body .page-header .page-heading{flex:1 1 15rem;min-width:0;overflow-wrap:anywhere}:host .page-layout .page-body .page-header .page-heading .eyebrow{margin:0 0 .4rem;color:var(--color-primary);text-transform:uppercase;font-size:.75rem;font-weight:700}:host .page-layout .page-body .page-header .page-heading h1{margin:0;font-size:clamp(1.4rem,2vw,1.9rem)}:host .page-layout .page-body .page-header .header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0;max-width:100%}:host .page-layout .page-body .page-content{min-width:0;padding:var(--page-layout-padding, 1.5rem);padding-bottom:max(var(--page-layout-padding, 1.5rem),env(safe-area-inset-bottom))}@media(max-width:991px){:host .page-layout .page-body .page-content{padding:var(--page-layout-padding, .75rem);padding-bottom:max(var(--page-layout-padding, .75rem),env(safe-area-inset-bottom))}}\n"],
|
|
4217
|
+
template: "<div class=\"page-layout\" [class.with-sidebar]=\"sidebar()\">\n @if (sidebar()) {\n <aside class=\"sidebar\">\n <ng-content select=\"[iPageSidebar]\" />\n </aside>\n }\n <div class=\"page-body\" #body>\n @if (showHeader()) {\n <header class=\"page-header\" #header>\n <div class=\"page-heading\">\n @if (eyebrowText()) {\n <p class=\"eyebrow\">{{ eyebrowText() }}</p>\n }\n <h1>{{ headerText() }}</h1>\n <ng-content select=\"[iPageHeaderContent]\" />\n </div>\n @if (headerActions()) {\n <div class=\"header-actions\">\n <ng-content select=\"[iPageHeaderActions]\" />\n </div>\n }\n </header>\n }\n <div class=\"page-content\">\n <ng-content />\n </div>\n </div>\n</div>\n",
|
|
4218
|
+
styles: [":host{display:block;min-width:0;color:var(--color-text-primary)}:host .page-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}:host .page-layout.with-sidebar{grid-template-columns:minmax(0,var(--page-layout-sidebar-width, 18rem)) minmax(0,1fr)}@media(max-width:991px){:host .page-layout.with-sidebar{grid-template-columns:minmax(0,1fr)}}:host .page-layout .sidebar{position:sticky;top:0;min-width:0;max-height:var(--layout-content-height, 100dvh);overflow:auto;padding:var(--page-layout-padding, 1.5rem);box-sizing:border-box}@media(max-width:991px){:host .page-layout .sidebar{position:static;max-height:none;overflow:visible;padding:var(--page-layout-padding, .75rem)}}:host .page-layout .page-body{min-width:0}:host .page-layout .page-body .page-header{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:var(--page-layout-padding, 1.5rem);background:var(--surface-ground);box-sizing:border-box}@media(max-width:991px){:host .page-layout .page-body .page-header{transform:translateY(var(--page-header-snap-offset, 0px));min-height:var(--layout-topbar-height, 0px);gap:.5rem;padding:var(--page-layout-padding, .75rem)}}:host .page-layout .page-body .page-header .page-heading{flex:1 1 15rem;min-width:0;overflow-wrap:anywhere}:host .page-layout .page-body .page-header .page-heading .eyebrow{margin:0 0 .4rem;color:var(--color-primary);text-transform:uppercase;font-size:.75rem;font-weight:700}:host .page-layout .page-body .page-header .page-heading h1{margin:0;font-size:clamp(1.4rem,2vw,1.9rem)}:host .page-layout .page-body .page-header .header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0;max-width:100%}:host .page-layout .page-body .page-content{min-width:0;padding:var(--page-layout-padding, 1.5rem);padding-bottom:max(var(--page-layout-padding, 1.5rem),env(safe-area-inset-bottom))}@media(max-width:991px){:host .page-layout .page-body .page-content{padding:var(--page-layout-padding, .75rem);padding-bottom:max(var(--page-layout-padding, .75rem),env(safe-area-inset-bottom))}}\n"],
|
|
4172
4219
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
4173
4220
|
});
|
|
4174
4221
|
};
|
|
@@ -4182,10 +4229,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4182
4229
|
args: [{
|
|
4183
4230
|
selector: "i-page-layout",
|
|
4184
4231
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4185
|
-
template: "<div class=\"page-layout\" [class.with-sidebar]=\"sidebar()\">\n @if (sidebar()) {\n <aside class=\"sidebar\">\n <ng-content select=\"[iPageSidebar]\" />\n </aside>\n }\n <div class=\"page-body\">\n @if (showHeader()) {\n <header class=\"page-header\">\n <div class=\"page-heading\">\n @if (eyebrowText()) {\n <p class=\"eyebrow\">{{ eyebrowText() }}</p>\n }\n <h1>{{ headerText() }}</h1>\n <ng-content select=\"[iPageHeaderContent]\" />\n </div>\n @if (headerActions()) {\n <div class=\"header-actions\">\n <ng-content select=\"[iPageHeaderActions]\" />\n </div>\n }\n </header>\n }\n <div class=\"page-content\">\n <ng-content />\n </div>\n </div>\n</div>\n",
|
|
4186
|
-
styles: [":host{display:block;min-width:0;color:var(--color-text-primary)}:host .page-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}:host .page-layout.with-sidebar{grid-template-columns:minmax(0,var(--page-layout-sidebar-width, 18rem)) minmax(0,1fr)}@media(max-width:991px){:host .page-layout.with-sidebar{grid-template-columns:minmax(0,1fr)}}:host .page-layout .sidebar{position:sticky;top:0;min-width:0;max-height:var(--layout-content-height, 100dvh);overflow:auto;padding:var(--page-layout-padding, 1.5rem);box-sizing:border-box}@media(max-width:991px){:host .page-layout .sidebar{position:static;max-height:none;overflow:visible;padding:var(--page-layout-padding, .75rem)}}:host .page-layout .page-body{min-width:0}:host .page-layout .page-body .page-header{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:var(--page-layout-padding, 1.5rem);background:var(--surface-ground);box-sizing:border-box}@media(max-width:991px){:host .page-layout .page-body .page-header{min-height:var(--layout-topbar-height, 0px);gap:.5rem;padding:var(--page-layout-padding, .75rem)}}:host .page-layout .page-body .page-header .page-heading{flex:1 1 15rem;min-width:0;overflow-wrap:anywhere}:host .page-layout .page-body .page-header .page-heading .eyebrow{margin:0 0 .4rem;color:var(--color-primary);text-transform:uppercase;font-size:.75rem;font-weight:700}:host .page-layout .page-body .page-header .page-heading h1{margin:0;font-size:clamp(1.4rem,2vw,1.9rem)}:host .page-layout .page-body .page-header .header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0;max-width:100%}:host .page-layout .page-body .page-content{min-width:0;padding:var(--page-layout-padding, 1.5rem);padding-bottom:max(var(--page-layout-padding, 1.5rem),env(safe-area-inset-bottom))}@media(max-width:991px){:host .page-layout .page-body .page-content{padding:var(--page-layout-padding, .75rem);padding-bottom:max(var(--page-layout-padding, .75rem),env(safe-area-inset-bottom))}}\n"]
|
|
4232
|
+
template: "<div class=\"page-layout\" [class.with-sidebar]=\"sidebar()\">\n @if (sidebar()) {\n <aside class=\"sidebar\">\n <ng-content select=\"[iPageSidebar]\" />\n </aside>\n }\n <div class=\"page-body\" #body>\n @if (showHeader()) {\n <header class=\"page-header\" #header>\n <div class=\"page-heading\">\n @if (eyebrowText()) {\n <p class=\"eyebrow\">{{ eyebrowText() }}</p>\n }\n <h1>{{ headerText() }}</h1>\n <ng-content select=\"[iPageHeaderContent]\" />\n </div>\n @if (headerActions()) {\n <div class=\"header-actions\">\n <ng-content select=\"[iPageHeaderActions]\" />\n </div>\n }\n </header>\n }\n <div class=\"page-content\">\n <ng-content />\n </div>\n </div>\n</div>\n",
|
|
4233
|
+
styles: [":host{display:block;min-width:0;color:var(--color-text-primary)}:host .page-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}:host .page-layout.with-sidebar{grid-template-columns:minmax(0,var(--page-layout-sidebar-width, 18rem)) minmax(0,1fr)}@media(max-width:991px){:host .page-layout.with-sidebar{grid-template-columns:minmax(0,1fr)}}:host .page-layout .sidebar{position:sticky;top:0;min-width:0;max-height:var(--layout-content-height, 100dvh);overflow:auto;padding:var(--page-layout-padding, 1.5rem);box-sizing:border-box}@media(max-width:991px){:host .page-layout .sidebar{position:static;max-height:none;overflow:visible;padding:var(--page-layout-padding, .75rem)}}:host .page-layout .page-body{min-width:0}:host .page-layout .page-body .page-header{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:var(--page-layout-padding, 1.5rem);background:var(--surface-ground);box-sizing:border-box}@media(max-width:991px){:host .page-layout .page-body .page-header{transform:translateY(var(--page-header-snap-offset, 0px));min-height:var(--layout-topbar-height, 0px);gap:.5rem;padding:var(--page-layout-padding, .75rem)}}:host .page-layout .page-body .page-header .page-heading{flex:1 1 15rem;min-width:0;overflow-wrap:anywhere}:host .page-layout .page-body .page-header .page-heading .eyebrow{margin:0 0 .4rem;color:var(--color-primary);text-transform:uppercase;font-size:.75rem;font-weight:700}:host .page-layout .page-body .page-header .page-heading h1{margin:0;font-size:clamp(1.4rem,2vw,1.9rem)}:host .page-layout .page-body .page-header .header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0;max-width:100%}:host .page-layout .page-body .page-content{min-width:0;padding:var(--page-layout-padding, 1.5rem);padding-bottom:max(var(--page-layout-padding, 1.5rem),env(safe-area-inset-bottom))}@media(max-width:991px){:host .page-layout .page-body .page-content{padding:var(--page-layout-padding, .75rem);padding-bottom:max(var(--page-layout-padding, .75rem),env(safe-area-inset-bottom))}}\n"]
|
|
4187
4234
|
}]
|
|
4188
4235
|
}],
|
|
4236
|
+
ctorParameters: () => [],
|
|
4189
4237
|
propDecorators: {
|
|
4190
4238
|
headerText: [{
|
|
4191
4239
|
type: i0.Input,
|
|
@@ -4218,6 +4266,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4218
4266
|
headerActions: [{
|
|
4219
4267
|
type: i0.ContentChild,
|
|
4220
4268
|
args: [i0.forwardRef(() => PageHeaderActionsDirective), { isSignal: true }]
|
|
4269
|
+
}],
|
|
4270
|
+
header: [{
|
|
4271
|
+
type: i0.ViewChild,
|
|
4272
|
+
args: ["header", { isSignal: true }]
|
|
4273
|
+
}],
|
|
4274
|
+
body: [{
|
|
4275
|
+
type: i0.ViewChild,
|
|
4276
|
+
args: ["body", { isSignal: true }]
|
|
4221
4277
|
}]
|
|
4222
4278
|
}
|
|
4223
4279
|
});
|