@skyux/split-view 9.0.0-alpha.0 → 9.0.0-alpha.10
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/documentation.json +1837 -1172
- package/esm2022/index.mjs +3 -6
- package/esm2022/lib/modules/shared/sky-split-view-resources.module.mjs +8 -6
- package/esm2022/lib/modules/split-view/split-view-adapter.service.mjs +3 -3
- package/esm2022/lib/modules/split-view/split-view-drawer.component.mjs +5 -5
- package/esm2022/lib/modules/split-view/split-view-media-query.service.mjs +3 -3
- package/esm2022/lib/modules/split-view/split-view-workspace-content.component.mjs +3 -3
- package/esm2022/lib/modules/split-view/split-view-workspace-footer.component.mjs +5 -5
- package/esm2022/lib/modules/split-view/split-view-workspace-header.component.mjs +6 -6
- package/esm2022/lib/modules/split-view/split-view-workspace.component.mjs +5 -5
- package/esm2022/lib/modules/split-view/split-view.component.mjs +6 -6
- package/esm2022/lib/modules/split-view/split-view.module.mjs +4 -4
- package/esm2022/lib/modules/split-view/split-view.service.mjs +3 -3
- package/esm2022/testing/public-api.mjs +3 -5
- package/esm2022/testing/split-view/split-view-testing.module.mjs +4 -4
- package/fesm2022/skyux-split-view-testing.mjs +4 -4
- package/fesm2022/skyux-split-view.mjs +47 -45
- package/fesm2022/skyux-split-view.mjs.map +1 -1
- package/index.d.ts +4 -4
- package/lib/modules/split-view/split-view-workspace-footer.component.d.ts +1 -1
- package/lib/modules/split-view/split-view-workspace-header.component.d.ts +1 -0
- package/package.json +11 -11
- package/testing/public-api.d.ts +4 -4
|
@@ -9,11 +9,11 @@ import { SkyAppTestUtility } from '@skyux-sdk/testing';
|
|
|
9
9
|
* @internal
|
|
10
10
|
*/
|
|
11
11
|
class SkySplitViewTestingModule {
|
|
12
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
13
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
14
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
12
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
13
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewTestingModule, exports: [SkySplitViewModule] }); }
|
|
14
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewTestingModule, providers: [SkyThemeService], imports: [SkySplitViewModule] }); }
|
|
15
15
|
}
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewTestingModule, decorators: [{
|
|
17
17
|
type: NgModule,
|
|
18
18
|
args: [{
|
|
19
19
|
exports: [SkySplitViewModule],
|
|
@@ -4,16 +4,16 @@ import * as i0 from '@angular/core';
|
|
|
4
4
|
import { NgModule, Injectable, Component, ChangeDetectionStrategy, Input, HostListener, HostBinding, EventEmitter, ContentChild } from '@angular/core';
|
|
5
5
|
import * as i2$1 from '@skyux/indicators';
|
|
6
6
|
import { SkyIconModule } from '@skyux/indicators';
|
|
7
|
-
import * as i3 from '@skyux/theme';
|
|
8
7
|
import { SkyThemeModule } from '@skyux/theme';
|
|
9
8
|
import * as i2 from '@skyux/i18n';
|
|
10
|
-
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
9
|
+
import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
11
10
|
import * as i1 from '@skyux/core';
|
|
12
11
|
import { SkyMediaBreakpoints, SkyMediaQueryService } from '@skyux/core';
|
|
13
12
|
import { BehaviorSubject, Subject, fromEvent } from 'rxjs';
|
|
14
13
|
import { take, takeUntil, takeWhile } from 'rxjs/operators';
|
|
15
14
|
import { trigger, transition, state, style, animate } from '@angular/animations';
|
|
16
15
|
|
|
16
|
+
/* istanbul ignore file */
|
|
17
17
|
/**
|
|
18
18
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
19
19
|
* The contents of this file were automatically generated by
|
|
@@ -28,6 +28,7 @@ const RESOURCES = {
|
|
|
28
28
|
skyux_split_view_back_to_list: { message: 'Back to list' },
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
|
+
SkyLibResourcesService.addResources(RESOURCES);
|
|
31
32
|
class SkySplitViewResourcesProvider {
|
|
32
33
|
getString(localeInfo, name) {
|
|
33
34
|
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
@@ -37,9 +38,9 @@ class SkySplitViewResourcesProvider {
|
|
|
37
38
|
* Import into any component library module that needs to use resource strings.
|
|
38
39
|
*/
|
|
39
40
|
class SkySplitViewResourcesModule {
|
|
40
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
41
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
42
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
42
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewResourcesModule, exports: [SkyI18nModule] }); }
|
|
43
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewResourcesModule, providers: [
|
|
43
44
|
{
|
|
44
45
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
45
46
|
useClass: SkySplitViewResourcesProvider,
|
|
@@ -47,7 +48,7 @@ class SkySplitViewResourcesModule {
|
|
|
47
48
|
},
|
|
48
49
|
], imports: [SkyI18nModule] }); }
|
|
49
50
|
}
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewResourcesModule, decorators: [{
|
|
51
52
|
type: NgModule,
|
|
52
53
|
args: [{
|
|
53
54
|
exports: [SkyI18nModule],
|
|
@@ -126,10 +127,10 @@ class SkySplitViewMediaQueryService {
|
|
|
126
127
|
destroy() {
|
|
127
128
|
this.#currentSubject.complete();
|
|
128
129
|
}
|
|
129
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
130
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1
|
|
130
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
131
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewMediaQueryService }); }
|
|
131
132
|
}
|
|
132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewMediaQueryService, decorators: [{
|
|
133
134
|
type: Injectable
|
|
134
135
|
}], ctorParameters: function () { return []; } });
|
|
135
136
|
|
|
@@ -199,10 +200,10 @@ class SkySplitViewService {
|
|
|
199
200
|
updateDrawerWidth(drawerWidth) {
|
|
200
201
|
this.#_drawerWidthStream.next(drawerWidth);
|
|
201
202
|
}
|
|
202
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
203
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1
|
|
203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewService, deps: [{ token: i1.SkyMediaQueryService }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
204
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewService }); }
|
|
204
205
|
}
|
|
205
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewService, decorators: [{
|
|
206
207
|
type: Injectable
|
|
207
208
|
}], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }, { type: i2.SkyLibResourcesService }]; } });
|
|
208
209
|
|
|
@@ -352,22 +353,22 @@ class SkySplitViewDrawerComponent {
|
|
|
352
353
|
const splitView = this.#splitViewSvc.splitViewElementRef?.nativeElement.querySelector('.sky-split-view');
|
|
353
354
|
this.widthMax = splitView.clientWidth - this.widthTolerance;
|
|
354
355
|
}
|
|
355
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
356
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
356
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewDrawerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: SkySplitViewMediaQueryService }, { token: SkySplitViewService }, { token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
357
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkySplitViewDrawerComponent, selector: "sky-split-view-drawer", inputs: { ariaLabel: "ariaLabel", width: "width" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
|
|
357
358
|
{
|
|
358
359
|
provide: SkyMediaQueryService,
|
|
359
360
|
useExisting: SkySplitViewMediaQueryService,
|
|
360
361
|
},
|
|
361
|
-
], ngImport: i0, template: "<div\n class=\"sky-split-view-drawer\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel\"\n [id]=\"splitViewDrawerId\"\n [style.width.px]=\"width\"\n tabindex=\"0\"\n>\n <ng-content></ng-content>\n <input\n *ngIf=\"!isMobile && width !== undefined\"\n aria-orientation=\"vertical\"\n class=\"sky-split-view-resize-handle\"\n step=\"10\"\n type=\"range\"\n [attr.aria-controls]=\"splitViewDrawerId\"\n [attr.aria-label]=\"'skyux_split_view_resize_handle' | skyLibResources\"\n [attr.aria-valuemax]=\"widthMax\"\n [attr.aria-valuemin]=\"widthMin\"\n [attr.aria-valuenow]=\"width\"\n [attr.aria-valuetext]=\"width + ' pixels wide'\"\n [max]=\"widthMax\"\n [min]=\"widthMin\"\n [style.left.px]=\"width - 7\"\n [value]=\"width\"\n (change)=\"onResizeHandleChange($event)\"\n (mousedown)=\"onResizeHandleMouseDown($event)\"\n />\n</div>\n", styles: [".sky-split-view-drawer{background:#ffffff;
|
|
362
|
+
], ngImport: i0, template: "<div\n class=\"sky-split-view-drawer\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel\"\n [id]=\"splitViewDrawerId\"\n [style.width.px]=\"width\"\n tabindex=\"0\"\n>\n <ng-content></ng-content>\n <input\n *ngIf=\"!isMobile && width !== undefined\"\n aria-orientation=\"vertical\"\n class=\"sky-split-view-resize-handle\"\n step=\"10\"\n type=\"range\"\n [attr.aria-controls]=\"splitViewDrawerId\"\n [attr.aria-label]=\"'skyux_split_view_resize_handle' | skyLibResources\"\n [attr.aria-valuemax]=\"widthMax\"\n [attr.aria-valuemin]=\"widthMin\"\n [attr.aria-valuenow]=\"width\"\n [attr.aria-valuetext]=\"width + ' pixels wide'\"\n [max]=\"widthMax\"\n [min]=\"widthMin\"\n [style.left.px]=\"width - 7\"\n [value]=\"width\"\n (change)=\"onResizeHandleChange($event)\"\n (mousedown)=\"onResizeHandleMouseDown($event)\"\n />\n</div>\n", styles: [".sky-split-view-drawer{background:#ffffff;overflow:auto;height:100%;width:100%}@media (min-width: 768px){:host .sky-split-view-drawer{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer,:host-context(.sky-responsive-container-md) .sky-split-view-drawer,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer{border-right:1px solid #cdcfd2}.sky-split-view-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;z-index:999;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0}.sky-split-view-resize-handle::-moz-range-thumb,.sky-split-view-resize-handle::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-split-view-resize-handle::-ms-thumb,.sky-split-view-resize-handle::-ms-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-split-view-resize-handle::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}:host-context(.sky-theme-modern) .sky-split-view-drawer{background:transparent}:host-context(.sky-theme-modern) .sky-split-view-resize-handle{transition:box-shadow .15s}:host-context(.sky-theme-modern) .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}.sky-theme-modern .sky-split-view-drawer{background:transparent}.sky-theme-modern .sky-split-view-resize-handle{transition:box-shadow .15s}.sky-theme-modern .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
362
363
|
}
|
|
363
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewDrawerComponent, decorators: [{
|
|
364
365
|
type: Component,
|
|
365
366
|
args: [{ selector: 'sky-split-view-drawer', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
366
367
|
{
|
|
367
368
|
provide: SkyMediaQueryService,
|
|
368
369
|
useExisting: SkySplitViewMediaQueryService,
|
|
369
370
|
},
|
|
370
|
-
], template: "<div\n class=\"sky-split-view-drawer\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel\"\n [id]=\"splitViewDrawerId\"\n [style.width.px]=\"width\"\n tabindex=\"0\"\n>\n <ng-content></ng-content>\n <input\n *ngIf=\"!isMobile && width !== undefined\"\n aria-orientation=\"vertical\"\n class=\"sky-split-view-resize-handle\"\n step=\"10\"\n type=\"range\"\n [attr.aria-controls]=\"splitViewDrawerId\"\n [attr.aria-label]=\"'skyux_split_view_resize_handle' | skyLibResources\"\n [attr.aria-valuemax]=\"widthMax\"\n [attr.aria-valuemin]=\"widthMin\"\n [attr.aria-valuenow]=\"width\"\n [attr.aria-valuetext]=\"width + ' pixels wide'\"\n [max]=\"widthMax\"\n [min]=\"widthMin\"\n [style.left.px]=\"width - 7\"\n [value]=\"width\"\n (change)=\"onResizeHandleChange($event)\"\n (mousedown)=\"onResizeHandleMouseDown($event)\"\n />\n</div>\n", styles: [".sky-split-view-drawer{background:#ffffff;
|
|
371
|
+
], template: "<div\n class=\"sky-split-view-drawer\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel\"\n [id]=\"splitViewDrawerId\"\n [style.width.px]=\"width\"\n tabindex=\"0\"\n>\n <ng-content></ng-content>\n <input\n *ngIf=\"!isMobile && width !== undefined\"\n aria-orientation=\"vertical\"\n class=\"sky-split-view-resize-handle\"\n step=\"10\"\n type=\"range\"\n [attr.aria-controls]=\"splitViewDrawerId\"\n [attr.aria-label]=\"'skyux_split_view_resize_handle' | skyLibResources\"\n [attr.aria-valuemax]=\"widthMax\"\n [attr.aria-valuemin]=\"widthMin\"\n [attr.aria-valuenow]=\"width\"\n [attr.aria-valuetext]=\"width + ' pixels wide'\"\n [max]=\"widthMax\"\n [min]=\"widthMin\"\n [style.left.px]=\"width - 7\"\n [value]=\"width\"\n (change)=\"onResizeHandleChange($event)\"\n (mousedown)=\"onResizeHandleMouseDown($event)\"\n />\n</div>\n", styles: [".sky-split-view-drawer{background:#ffffff;overflow:auto;height:100%;width:100%}@media (min-width: 768px){:host .sky-split-view-drawer{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer,:host-context(.sky-responsive-container-md) .sky-split-view-drawer,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer{border-right:1px solid #cdcfd2}.sky-split-view-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;z-index:999;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0}.sky-split-view-resize-handle::-moz-range-thumb,.sky-split-view-resize-handle::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-split-view-resize-handle::-ms-thumb,.sky-split-view-resize-handle::-ms-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-split-view-resize-handle::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}:host-context(.sky-theme-modern) .sky-split-view-drawer{background:transparent}:host-context(.sky-theme-modern) .sky-split-view-resize-handle{transition:box-shadow .15s}:host-context(.sky-theme-modern) .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}.sky-theme-modern .sky-split-view-drawer{background:transparent}.sky-theme-modern .sky-split-view-resize-handle{transition:box-shadow .15s}.sky-theme-modern .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}\n"] }]
|
|
371
372
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i0.ElementRef }, { type: SkySplitViewMediaQueryService }, { type: SkySplitViewService }, { type: i1.SkyAppWindowRef }]; }, propDecorators: { ariaLabel: [{
|
|
372
373
|
type: Input
|
|
373
374
|
}], width: [{
|
|
@@ -384,10 +385,10 @@ class SkySplitViewWorkspaceContentComponent {
|
|
|
384
385
|
constructor() {
|
|
385
386
|
this.tabIndex = '0';
|
|
386
387
|
}
|
|
387
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
388
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
388
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewWorkspaceContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
389
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkySplitViewWorkspaceContentComponent, selector: "sky-split-view-workspace-content", host: { properties: { "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "<div class=\"sky-split-view-workspace-content\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:auto;flex-grow:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
389
390
|
}
|
|
390
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewWorkspaceContentComponent, decorators: [{
|
|
391
392
|
type: Component,
|
|
392
393
|
args: [{ selector: 'sky-split-view-workspace-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-split-view-workspace-content\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:auto;flex-grow:1}\n"] }]
|
|
393
394
|
}], propDecorators: { tabIndex: [{
|
|
@@ -396,19 +397,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
396
397
|
}] } });
|
|
397
398
|
|
|
398
399
|
/**
|
|
399
|
-
* Specifies the footer to display in the split view's workspace panel.
|
|
400
|
+
* Specifies the footer to display in the split view's workspace panel. This component is often used with a summary action bar.
|
|
400
401
|
*/
|
|
401
402
|
class SkySplitViewWorkspaceFooterComponent {
|
|
402
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
403
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
403
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewWorkspaceFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
404
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkySplitViewWorkspaceFooterComponent, selector: "sky-split-view-workspace-footer", ngImport: i0, template: "<div class=\"sky-split-view-workspace-footer\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{flex-shrink:0}.sky-split-view-workspace-footer{padding:10px;box-shadow:0 -3px 3px #cdcfd2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
404
405
|
}
|
|
405
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewWorkspaceFooterComponent, decorators: [{
|
|
406
407
|
type: Component,
|
|
407
408
|
args: [{ selector: 'sky-split-view-workspace-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-split-view-workspace-footer\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{flex-shrink:0}.sky-split-view-workspace-footer{padding:10px;box-shadow:0 -3px 3px #cdcfd2}\n"] }]
|
|
408
409
|
}] });
|
|
409
410
|
|
|
410
411
|
/**
|
|
411
412
|
* Specifies the header to display in the split view's workspace panel.
|
|
413
|
+
* @internal
|
|
412
414
|
*/
|
|
413
415
|
class SkySplitViewWorkspaceHeaderComponent {
|
|
414
416
|
#ngUnsubscribe = new Subject();
|
|
@@ -430,12 +432,12 @@ class SkySplitViewWorkspaceHeaderComponent {
|
|
|
430
432
|
this.#ngUnsubscribe.next();
|
|
431
433
|
this.#ngUnsubscribe.complete();
|
|
432
434
|
}
|
|
433
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
434
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
435
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewWorkspaceHeaderComponent, deps: [{ token: SkySplitViewService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
436
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkySplitViewWorkspaceHeaderComponent, selector: "sky-split-view-workspace-header", ngImport: i0, template: "<div class=\"sky-split-view-workspace-header\">\n <div class=\"sky-split-view-workspace-header-content\">\n <button class=\"sky-btn sky-btn-link\" (click)=\"onShowDrawerButtonClick()\">\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ backButtonText }}\n </button>\n </div>\n</div>\n", styles: [".sky-split-view-workspace-header{display:flex;align-items:flex-start;justify-content:flex-end;border-bottom:1px solid #cdcfd2;padding:5px 0}.sky-split-view-workspace-header .sky-split-view-workspace-header-content{flex-grow:1}\n"], dependencies: [{ kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
435
437
|
}
|
|
436
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewWorkspaceHeaderComponent, decorators: [{
|
|
437
439
|
type: Component,
|
|
438
|
-
args: [{ selector: 'sky-split-view-workspace-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-split-view-workspace-header\">\n <div class=\"sky-split-view-workspace-header-content\">\n <button class=\"sky-btn sky-btn-link\" (click)=\"onShowDrawerButtonClick()\">\n <sky-icon
|
|
440
|
+
args: [{ selector: 'sky-split-view-workspace-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-split-view-workspace-header\">\n <div class=\"sky-split-view-workspace-header-content\">\n <button class=\"sky-btn sky-btn-link\" (click)=\"onShowDrawerButtonClick()\">\n <sky-icon icon=\"chevron-left\"></sky-icon>\n {{ backButtonText }}\n </button>\n </div>\n</div>\n", styles: [".sky-split-view-workspace-header{display:flex;align-items:flex-start;justify-content:flex-end;border-bottom:1px solid #cdcfd2;padding:5px 0}.sky-split-view-workspace-header .sky-split-view-workspace-header-content{flex-grow:1}\n"] }]
|
|
439
441
|
}], ctorParameters: function () { return [{ type: SkySplitViewService }]; } });
|
|
440
442
|
|
|
441
443
|
/**
|
|
@@ -496,22 +498,22 @@ class SkySplitViewWorkspaceComponent {
|
|
|
496
498
|
this.#coreAdapterSvc.setResponsiveContainerClass(this.#elementRef, newDrawerBreakpoint);
|
|
497
499
|
this.#changeDetectorRef.markForCheck();
|
|
498
500
|
}
|
|
499
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
500
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
501
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewWorkspaceComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: SkySplitViewMediaQueryService }, { token: SkySplitViewService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
502
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkySplitViewWorkspaceComponent, selector: "sky-split-view-workspace", inputs: { ariaLabel: "ariaLabel" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
|
|
501
503
|
{
|
|
502
504
|
provide: SkyMediaQueryService,
|
|
503
505
|
useExisting: SkySplitViewMediaQueryService,
|
|
504
506
|
},
|
|
505
|
-
], ngImport: i0, template: "<div\n class=\"sky-split-view-workspace\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel\"\n tabindex=\"0\"\n>\n <sky-split-view-workspace-header\n *ngIf=\"isMobile\"\n ></sky-split-view-workspace-header>\n <ng-content select=\"sky-split-view-workspace-content\"></ng-content>\n <ng-content select=\"sky-split-view-workspace-footer\"></ng-content>\n</div>\n", styles: [".sky-split-view-workspace{background:#ffffff;height:100%;display:flex;flex-direction:column}:host-context(.sky-theme-modern
|
|
507
|
+
], ngImport: i0, template: "<div\n class=\"sky-split-view-workspace\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel\"\n tabindex=\"0\"\n>\n <sky-split-view-workspace-header\n *ngIf=\"isMobile\"\n ></sky-split-view-workspace-header>\n <ng-content select=\"sky-split-view-workspace-content\"></ng-content>\n <ng-content select=\"sky-split-view-workspace-footer\"></ng-content>\n</div>\n", styles: [".sky-split-view-workspace{background:#ffffff;height:100%;display:flex;flex-direction:column}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-split-view-workspace{background-color:#121212;border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-split-view-workspace{background-color:#121212;border-color:#686c73}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkySplitViewWorkspaceHeaderComponent, selector: "sky-split-view-workspace-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
506
508
|
}
|
|
507
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewWorkspaceComponent, decorators: [{
|
|
508
510
|
type: Component,
|
|
509
511
|
args: [{ selector: 'sky-split-view-workspace', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
510
512
|
{
|
|
511
513
|
provide: SkyMediaQueryService,
|
|
512
514
|
useExisting: SkySplitViewMediaQueryService,
|
|
513
515
|
},
|
|
514
|
-
], template: "<div\n class=\"sky-split-view-workspace\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel\"\n tabindex=\"0\"\n>\n <sky-split-view-workspace-header\n *ngIf=\"isMobile\"\n ></sky-split-view-workspace-header>\n <ng-content select=\"sky-split-view-workspace-content\"></ng-content>\n <ng-content select=\"sky-split-view-workspace-footer\"></ng-content>\n</div>\n", styles: [".sky-split-view-workspace{background:#ffffff;height:100%;display:flex;flex-direction:column}:host-context(.sky-theme-modern
|
|
516
|
+
], template: "<div\n class=\"sky-split-view-workspace\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel\"\n tabindex=\"0\"\n>\n <sky-split-view-workspace-header\n *ngIf=\"isMobile\"\n ></sky-split-view-workspace-header>\n <ng-content select=\"sky-split-view-workspace-content\"></ng-content>\n <ng-content select=\"sky-split-view-workspace-footer\"></ng-content>\n</div>\n", styles: [".sky-split-view-workspace{background:#ffffff;height:100%;display:flex;flex-direction:column}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-split-view-workspace{background-color:#121212;border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-split-view-workspace{background-color:#121212;border-color:#686c73}\n"] }]
|
|
515
517
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i0.ElementRef }, { type: SkySplitViewMediaQueryService }, { type: SkySplitViewService }]; }, propDecorators: { ariaLabel: [{
|
|
516
518
|
type: Input
|
|
517
519
|
}], onWindowResize: [{
|
|
@@ -573,10 +575,10 @@ class SkySplitViewAdapterService {
|
|
|
573
575
|
this.#renderer.setStyle(splitViewElement, 'max-height', 'calc(100vh - ' + offsetTop + 'px - ' + marginBottom + ')');
|
|
574
576
|
this.#renderer.setStyle(splitViewElement, 'min-height', '300px');
|
|
575
577
|
}
|
|
576
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
577
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1
|
|
578
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewAdapterService, deps: [{ token: i1.SkyMutationObserverService }, { token: i0.RendererFactory2 }, { token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
579
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewAdapterService }); }
|
|
578
580
|
}
|
|
579
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
581
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewAdapterService, decorators: [{
|
|
580
582
|
type: Injectable
|
|
581
583
|
}], ctorParameters: function () { return [{ type: i1.SkyMutationObserverService }, { type: i0.RendererFactory2 }, { type: i1.SkyAppWindowRef }]; } });
|
|
582
584
|
|
|
@@ -732,12 +734,12 @@ class SkySplitViewComponent {
|
|
|
732
734
|
break;
|
|
733
735
|
}
|
|
734
736
|
}
|
|
735
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
736
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
737
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewComponent, deps: [{ token: SkySplitViewAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: SkySplitViewService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
738
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkySplitViewComponent, selector: "sky-split-view", inputs: { backButtonText: "backButtonText", bindHeightToWindow: "bindHeightToWindow", dock: "dock", messageStream: "messageStream" }, providers: [
|
|
737
739
|
SkySplitViewAdapterService,
|
|
738
740
|
SkySplitViewMediaQueryService,
|
|
739
741
|
SkySplitViewService,
|
|
740
|
-
], queries: [{ propertyName: "drawerComponent", first: true, predicate: SkySplitViewDrawerComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"sky-split-view\"\n [ngClass]=\"'sky-split-view-dock-' + dock\"\n [@blockAnimationOnLoad]\n>\n <div\n class=\"sky-split-view-drawer-flex-container\"\n [hidden]=\"!drawerVisible\"\n [@drawerEnter]=\"drawerVisible\"\n >\n <ng-content select=\"sky-split-view-drawer\"></ng-content>\n </div>\n\n <div\n class=\"sky-split-view-workspace-flex-container\"\n [hidden]=\"!workspaceVisible\"\n [@workspaceEnter]=\"workspaceVisible\"\n (@workspaceEnter.done)=\"onWorkspaceEnterComplete()\"\n >\n <ng-content select=\"sky-split-view-workspace\"></ng-content>\n </div>\n</div>\n", styles: [".sky-split-view{position:relative;display:flex;border:1px solid #cdcfd2;background:transparent;margin:var(--sky-layout-host-content-spacing, 0);max-height:100%}.sky-split-view .sky-split-view-workspace-flex-container{flex-grow:1;flex-shrink:99;overflow:auto}.sky-split-view-dock-fill{position:absolute;inset:0}:host .sky-split-view-drawer-flex-container{width:100%}:host-context(.sky-responsive-container-xs) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:100%}@media (min-width: 768px){:host .sky-split-view-drawer-flex-container{width:auto}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:auto}:host-context(.sky-theme-modern) .sky-split-view{border:none}.sky-theme-modern .sky-split-view{border:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
742
|
+
], queries: [{ propertyName: "drawerComponent", first: true, predicate: SkySplitViewDrawerComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"sky-split-view\"\n [ngClass]=\"'sky-split-view-dock-' + dock\"\n [@blockAnimationOnLoad]\n>\n <div\n class=\"sky-split-view-drawer-flex-container\"\n [hidden]=\"!drawerVisible\"\n [@drawerEnter]=\"drawerVisible\"\n >\n <ng-content select=\"sky-split-view-drawer\"></ng-content>\n </div>\n\n <div\n class=\"sky-split-view-workspace-flex-container\"\n [hidden]=\"!workspaceVisible\"\n [@workspaceEnter]=\"workspaceVisible\"\n (@workspaceEnter.done)=\"onWorkspaceEnterComplete()\"\n >\n <ng-content select=\"sky-split-view-workspace\"></ng-content>\n </div>\n</div>\n", styles: [".sky-split-view{position:relative;display:flex;border:1px solid #cdcfd2;background:transparent;margin:var(--sky-layout-host-content-spacing, 0);max-height:100%}.sky-split-view .sky-split-view-workspace-flex-container{flex-grow:1;flex-shrink:99;overflow:auto}.sky-split-view-dock-fill{position:absolute;inset:0}:host .sky-split-view-drawer-flex-container{width:100%}:host-context(.sky-responsive-container-xs) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:100%}@media (min-width: 768px){:host .sky-split-view-drawer-flex-container{width:auto}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:auto}@media (min-width: 768px){:host :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host .sky-theme-modern .sky-split-view{border-left:none}}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-md) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host-context(.sky-responsive-container-sm) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-md) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-lg) .sky-theme-modern .sky-split-view{border-left:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
741
743
|
trigger('blockAnimationOnLoad', [transition(':enter', [])]),
|
|
742
744
|
trigger('drawerEnter', [
|
|
743
745
|
state('false', style({ transform: 'translate(-100%)' })),
|
|
@@ -749,7 +751,7 @@ class SkySplitViewComponent {
|
|
|
749
751
|
]),
|
|
750
752
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
751
753
|
}
|
|
752
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewComponent, decorators: [{
|
|
753
755
|
type: Component,
|
|
754
756
|
args: [{ selector: 'sky-split-view', providers: [
|
|
755
757
|
SkySplitViewAdapterService,
|
|
@@ -765,7 +767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
765
767
|
state('false', style({ transform: 'translate(100%)' })),
|
|
766
768
|
transition('* => true', animate('150ms ease-in')),
|
|
767
769
|
]),
|
|
768
|
-
], template: "<div\n class=\"sky-split-view\"\n [ngClass]=\"'sky-split-view-dock-' + dock\"\n [@blockAnimationOnLoad]\n>\n <div\n class=\"sky-split-view-drawer-flex-container\"\n [hidden]=\"!drawerVisible\"\n [@drawerEnter]=\"drawerVisible\"\n >\n <ng-content select=\"sky-split-view-drawer\"></ng-content>\n </div>\n\n <div\n class=\"sky-split-view-workspace-flex-container\"\n [hidden]=\"!workspaceVisible\"\n [@workspaceEnter]=\"workspaceVisible\"\n (@workspaceEnter.done)=\"onWorkspaceEnterComplete()\"\n >\n <ng-content select=\"sky-split-view-workspace\"></ng-content>\n </div>\n</div>\n", styles: [".sky-split-view{position:relative;display:flex;border:1px solid #cdcfd2;background:transparent;margin:var(--sky-layout-host-content-spacing, 0);max-height:100%}.sky-split-view .sky-split-view-workspace-flex-container{flex-grow:1;flex-shrink:99;overflow:auto}.sky-split-view-dock-fill{position:absolute;inset:0}:host .sky-split-view-drawer-flex-container{width:100%}:host-context(.sky-responsive-container-xs) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:100%}@media (min-width: 768px){:host .sky-split-view-drawer-flex-container{width:auto}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:auto}:host-context(.sky-theme-modern) .sky-split-view{border:none}.sky-theme-modern .sky-split-view{border:none}\n"] }]
|
|
770
|
+
], template: "<div\n class=\"sky-split-view\"\n [ngClass]=\"'sky-split-view-dock-' + dock\"\n [@blockAnimationOnLoad]\n>\n <div\n class=\"sky-split-view-drawer-flex-container\"\n [hidden]=\"!drawerVisible\"\n [@drawerEnter]=\"drawerVisible\"\n >\n <ng-content select=\"sky-split-view-drawer\"></ng-content>\n </div>\n\n <div\n class=\"sky-split-view-workspace-flex-container\"\n [hidden]=\"!workspaceVisible\"\n [@workspaceEnter]=\"workspaceVisible\"\n (@workspaceEnter.done)=\"onWorkspaceEnterComplete()\"\n >\n <ng-content select=\"sky-split-view-workspace\"></ng-content>\n </div>\n</div>\n", styles: [".sky-split-view{position:relative;display:flex;border:1px solid #cdcfd2;background:transparent;margin:var(--sky-layout-host-content-spacing, 0);max-height:100%}.sky-split-view .sky-split-view-workspace-flex-container{flex-grow:1;flex-shrink:99;overflow:auto}.sky-split-view-dock-fill{position:absolute;inset:0}:host .sky-split-view-drawer-flex-container{width:100%}:host-context(.sky-responsive-container-xs) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:100%}@media (min-width: 768px){:host .sky-split-view-drawer-flex-container{width:auto}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:auto}@media (min-width: 768px){:host :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host .sky-theme-modern .sky-split-view{border-left:none}}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-md) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host-context(.sky-responsive-container-sm) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-md) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-lg) .sky-theme-modern .sky-split-view{border-left:none}\n"] }]
|
|
769
771
|
}], ctorParameters: function () { return [{ type: SkySplitViewAdapterService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i0.ElementRef }, { type: SkySplitViewService }]; }, propDecorators: { backButtonText: [{
|
|
770
772
|
type: Input
|
|
771
773
|
}], bindHeightToWindow: [{
|
|
@@ -780,8 +782,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
780
782
|
}] } });
|
|
781
783
|
|
|
782
784
|
class SkySplitViewModule {
|
|
783
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
784
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
785
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
786
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewModule, declarations: [SkySplitViewComponent,
|
|
785
787
|
SkySplitViewDrawerComponent,
|
|
786
788
|
SkySplitViewWorkspaceComponent,
|
|
787
789
|
SkySplitViewWorkspaceContentComponent,
|
|
@@ -795,12 +797,12 @@ class SkySplitViewModule {
|
|
|
795
797
|
SkySplitViewWorkspaceContentComponent,
|
|
796
798
|
SkySplitViewWorkspaceFooterComponent,
|
|
797
799
|
SkySplitViewWorkspaceHeaderComponent] }); }
|
|
798
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
800
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewModule, imports: [CommonModule,
|
|
799
801
|
SkyIconModule,
|
|
800
802
|
SkySplitViewResourcesModule,
|
|
801
803
|
SkyThemeModule] }); }
|
|
802
804
|
}
|
|
803
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
805
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkySplitViewModule, decorators: [{
|
|
804
806
|
type: NgModule,
|
|
805
807
|
args: [{
|
|
806
808
|
declarations: [
|