@skyux/split-view 14.0.0-alpha.3 → 14.0.0-alpha.5
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/skyux-split-view.mjs +32 -32
- package/package.json +8 -8
|
@@ -39,11 +39,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
39
39
|
* Import into any component library module that needs to use resource strings.
|
|
40
40
|
*/
|
|
41
41
|
class SkySplitViewResourcesModule {
|
|
42
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
43
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
44
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
42
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
43
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewResourcesModule, exports: [SkyI18nModule] }); }
|
|
44
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewResourcesModule, imports: [SkyI18nModule] }); }
|
|
45
45
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewResourcesModule, decorators: [{
|
|
47
47
|
type: NgModule,
|
|
48
48
|
args: [{
|
|
49
49
|
exports: [SkyI18nModule],
|
|
@@ -106,10 +106,10 @@ class SkySplitViewService {
|
|
|
106
106
|
updateBackButtonText(text) {
|
|
107
107
|
this.#_backButtonTextStream.next(text);
|
|
108
108
|
}
|
|
109
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
110
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
109
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
110
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewService }); }
|
|
111
111
|
}
|
|
112
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewService, decorators: [{
|
|
113
113
|
type: Injectable
|
|
114
114
|
}], ctorParameters: () => [{ type: i1.SkyLibResourcesService }] });
|
|
115
115
|
|
|
@@ -242,10 +242,10 @@ class SkySplitViewDrawerComponent {
|
|
|
242
242
|
const splitView = this.#splitViewSvc.splitViewElementRef?.nativeElement.querySelector('.sky-split-view');
|
|
243
243
|
this.widthMax = splitView.clientWidth - this.widthTolerance;
|
|
244
244
|
}
|
|
245
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
246
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
245
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
246
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkySplitViewDrawerComponent, isStandalone: true, selector: "sky-split-view-drawer", inputs: { ariaLabel: "ariaLabel", width: "width" }, host: { listeners: { "window:resize": "onWindowResize()" } }, ngImport: i0, template: "<div\n class=\"sky-split-view-drawer\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\"\n [id]=\"splitViewDrawerId\"\n [style.width.px]=\"width\"\n>\n <ng-content />\n @if (!isMobile && width !== undefined) {\n <input\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 }\n</div>\n", styles: [".sky-split-view-drawer:not(.sky-theme-modern *){--sky-override-split-view-drawer-background-color: #ffffff;--sky-override-split-view-drawer-border-right: 1px solid #cdcfd2;--sky-override-split-view-resize-handle-border-focus: none;--sky-override-split-view-resize-handle-outline-focus: auto;--sky-override-split-view-resize-handle-width: 14px}.sky-split-view-drawer{background:var(--sky-override-split-view-drawer-background-color, var(--sky-color-background-container-dimmed));overflow:auto;height:100%;width:100%}:host .sky-split-view-drawer:has(sky-repeater){padding-top:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-top);padding-right:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-right);padding-bottom:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-bottom);padding-left:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-left)}:host-context(.sky-responsive-container-xs) .sky-split-view-drawer:has(sky-repeater),:host-context(.sky-responsive-container-sm) .sky-split-view-drawer:has(sky-repeater),:host-context(.sky-responsive-container-md) .sky-split-view-drawer:has(sky-repeater),:host-context(.sky-responsive-container-lg) .sky-split-view-drawer:has(sky-repeater){padding-top:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-top);padding-right:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-right);padding-bottom:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-bottom);padding-left:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-left)}@media(min-width:768px){:host .sky-split-view-drawer{border-right:var(--sky-override-split-view-drawer-border-right, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host .sky-split-view-drawer:has(sky-repeater){padding-top:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-top);padding-right:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-right);padding-bottom:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-bottom);padding-left:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-left)}}: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:var(--sky-override-split-view-drawer-border-right, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer:has(sky-repeater),:host-context(.sky-responsive-container-md) .sky-split-view-drawer:has(sky-repeater),:host-context(.sky-responsive-container-lg) .sky-split-view-drawer:has(sky-repeater){padding-top:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-top);padding-right:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-right);padding-bottom:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-bottom);padding-left:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-left)}.sky-split-view-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:var(--sky-override-split-view-resize-handle-width, var(--sky-size-width-resize_handle));position:absolute;z-index:999;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0;transition:box-shadow .15s}.sky-split-view-resize-handle:focus{border:var(--sky-override-split-view-resize-handle-border-focus, solid var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus));box-shadow:none;outline:var(--sky-override-split-view-resize-handle-outline-focus, none)}.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}\n"], dependencies: [{ kind: "ngmodule", type: SkySplitViewResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
247
247
|
}
|
|
248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
248
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewDrawerComponent, decorators: [{
|
|
249
249
|
type: Component,
|
|
250
250
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkySplitViewResourcesModule], selector: 'sky-split-view-drawer', template: "<div\n class=\"sky-split-view-drawer\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\"\n [id]=\"splitViewDrawerId\"\n [style.width.px]=\"width\"\n>\n <ng-content />\n @if (!isMobile && width !== undefined) {\n <input\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 }\n</div>\n", styles: [".sky-split-view-drawer:not(.sky-theme-modern *){--sky-override-split-view-drawer-background-color: #ffffff;--sky-override-split-view-drawer-border-right: 1px solid #cdcfd2;--sky-override-split-view-resize-handle-border-focus: none;--sky-override-split-view-resize-handle-outline-focus: auto;--sky-override-split-view-resize-handle-width: 14px}.sky-split-view-drawer{background:var(--sky-override-split-view-drawer-background-color, var(--sky-color-background-container-dimmed));overflow:auto;height:100%;width:100%}:host .sky-split-view-drawer:has(sky-repeater){padding-top:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-top);padding-right:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-right);padding-bottom:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-bottom);padding-left:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-left)}:host-context(.sky-responsive-container-xs) .sky-split-view-drawer:has(sky-repeater),:host-context(.sky-responsive-container-sm) .sky-split-view-drawer:has(sky-repeater),:host-context(.sky-responsive-container-md) .sky-split-view-drawer:has(sky-repeater),:host-context(.sky-responsive-container-lg) .sky-split-view-drawer:has(sky-repeater){padding-top:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-top);padding-right:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-right);padding-bottom:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-bottom);padding-left:var(--sky-comp-split_view-drawer-repeater-space-offset-xs-left)}@media(min-width:768px){:host .sky-split-view-drawer{border-right:var(--sky-override-split-view-drawer-border-right, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host .sky-split-view-drawer:has(sky-repeater){padding-top:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-top);padding-right:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-right);padding-bottom:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-bottom);padding-left:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-left)}}: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:var(--sky-override-split-view-drawer-border-right, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer:has(sky-repeater),:host-context(.sky-responsive-container-md) .sky-split-view-drawer:has(sky-repeater),:host-context(.sky-responsive-container-lg) .sky-split-view-drawer:has(sky-repeater){padding-top:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-top);padding-right:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-right);padding-bottom:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-bottom);padding-left:var(--sky-comp-split_view-drawer-repeater-space-offset-sm-left)}.sky-split-view-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:var(--sky-override-split-view-resize-handle-width, var(--sky-size-width-resize_handle));position:absolute;z-index:999;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0;transition:box-shadow .15s}.sky-split-view-resize-handle:focus{border:var(--sky-override-split-view-resize-handle-border-focus, solid var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus));box-shadow:none;outline:var(--sky-override-split-view-resize-handle-outline-focus, none)}.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}\n"] }]
|
|
251
251
|
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{
|
|
@@ -261,10 +261,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
261
261
|
* Specifies the content to display in the split view's workspace panel.
|
|
262
262
|
*/
|
|
263
263
|
class SkySplitViewWorkspaceContentComponent {
|
|
264
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
265
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
264
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewWorkspaceContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
265
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkySplitViewWorkspaceContentComponent, isStandalone: true, selector: "sky-split-view-workspace-content", host: { attributes: { "tabindex": "0" } }, hostDirectives: [{ directive: i1$1.SkyResponsiveHostDirective }], ngImport: i0, template: "<div class=\"sky-split-view-workspace-content\">\n <ng-content />\n</div>\n", styles: [":host{display:block;overflow:auto;flex-grow:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
266
266
|
}
|
|
267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewWorkspaceContentComponent, decorators: [{
|
|
268
268
|
type: Component,
|
|
269
269
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
270
270
|
tabindex: '0',
|
|
@@ -275,10 +275,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
275
275
|
* Specifies the footer to display in the split view's workspace panel. This component is often used with a summary action bar.
|
|
276
276
|
*/
|
|
277
277
|
class SkySplitViewWorkspaceFooterComponent {
|
|
278
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
279
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
278
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewWorkspaceFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
279
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkySplitViewWorkspaceFooterComponent, isStandalone: true, selector: "sky-split-view-workspace-footer", hostDirectives: [{ directive: i1$1.SkyResponsiveHostDirective }], ngImport: i0, template: "<div class=\"sky-split-view-workspace-footer sky-elevation-3\">\n <ng-content />\n</div>\n", styles: [".sky-split-view-workspace-footer:not(.sky-theme-modern *){--sky-override-split-view-workspace-footer-padding: 10px;--sky-override-split-view-workspace-footer-box-shadow: 0 -3px 3px 0 #cdcfd2}:host{display:block;flex-shrink:0}.sky-split-view-workspace-footer{padding:var(--sky-override-split-view-workspace-footer-padding, var(--sky-comp-split_view-footer-space-inset-top) var(--sky-comp-split_view-footer-space-inset-right) var(--sky-comp-split_view-footer-space-inset-bottom) var(--sky-comp-split_view-footer-space-inset-left));box-shadow:var(--sky-override-split-view-workspace-footer-box-shadow, var(--sky-elevation-overflow))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
280
280
|
}
|
|
281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
281
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewWorkspaceFooterComponent, decorators: [{
|
|
282
282
|
type: Component,
|
|
283
283
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-split-view-workspace-footer', template: "<div class=\"sky-split-view-workspace-footer sky-elevation-3\">\n <ng-content />\n</div>\n", styles: [".sky-split-view-workspace-footer:not(.sky-theme-modern *){--sky-override-split-view-workspace-footer-padding: 10px;--sky-override-split-view-workspace-footer-box-shadow: 0 -3px 3px 0 #cdcfd2}:host{display:block;flex-shrink:0}.sky-split-view-workspace-footer{padding:var(--sky-override-split-view-workspace-footer-padding, var(--sky-comp-split_view-footer-space-inset-top) var(--sky-comp-split_view-footer-space-inset-right) var(--sky-comp-split_view-footer-space-inset-bottom) var(--sky-comp-split_view-footer-space-inset-left));box-shadow:var(--sky-override-split-view-workspace-footer-box-shadow, var(--sky-elevation-overflow))}\n"] }]
|
|
284
284
|
}] });
|
|
@@ -307,10 +307,10 @@ class SkySplitViewWorkspaceHeaderComponent {
|
|
|
307
307
|
this.#ngUnsubscribe.next();
|
|
308
308
|
this.#ngUnsubscribe.complete();
|
|
309
309
|
}
|
|
310
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
311
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
310
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewWorkspaceHeaderComponent, deps: [{ token: SkySplitViewService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
311
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkySplitViewWorkspaceHeaderComponent, isStandalone: true, 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\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"onShowDrawerButtonClick()\"\n >\n <sky-icon iconName=\"chevron-left\" />\n {{ backButtonText }}\n </button>\n </div>\n</div>\n", styles: [".sky-split-view-workspace-header:not(.sky-theme-modern *){--sky-override-split-view-header-border-bottom: 1px solid #cdcfd2;--sky-override-split-view-header-padding: 5px 0}.sky-split-view-workspace-header{display:flex;align-items:flex-start;justify-content:flex-end;border-bottom:var(--sky-override-split-view-header-border-bottom, var(--sky-border-width-divider) solid var(--sky-color-border-divider));padding:var(--sky-override-split-view-header-padding, var(--sky-space-inset-balanced-none))}.sky-split-view-workspace-header .sky-split-view-workspace-header-content{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
312
312
|
}
|
|
313
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
313
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewWorkspaceHeaderComponent, decorators: [{
|
|
314
314
|
type: Component,
|
|
315
315
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyIconModule], selector: 'sky-split-view-workspace-header', template: "<div class=\"sky-split-view-workspace-header\">\n <div class=\"sky-split-view-workspace-header-content\">\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"onShowDrawerButtonClick()\"\n >\n <sky-icon iconName=\"chevron-left\" />\n {{ backButtonText }}\n </button>\n </div>\n</div>\n", styles: [".sky-split-view-workspace-header:not(.sky-theme-modern *){--sky-override-split-view-header-border-bottom: 1px solid #cdcfd2;--sky-override-split-view-header-padding: 5px 0}.sky-split-view-workspace-header{display:flex;align-items:flex-start;justify-content:flex-end;border-bottom:var(--sky-override-split-view-header-border-bottom, var(--sky-border-width-divider) solid var(--sky-color-border-divider));padding:var(--sky-override-split-view-header-padding, var(--sky-space-inset-balanced-none))}.sky-split-view-workspace-header .sky-split-view-workspace-header-content{flex-grow:1}\n"] }]
|
|
316
316
|
}], ctorParameters: () => [{ type: SkySplitViewService }] });
|
|
@@ -325,10 +325,10 @@ class SkySplitViewWorkspaceComponent {
|
|
|
325
325
|
// the workspace area.
|
|
326
326
|
this.breakpoint = toSignal(inject(SkyMediaQueryService, { skipSelf: true }).breakpointChange);
|
|
327
327
|
}
|
|
328
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
329
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
328
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewWorkspaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkySplitViewWorkspaceComponent, isStandalone: true, selector: "sky-split-view-workspace", inputs: { ariaLabel: "ariaLabel" }, ngImport: i0, template: "<div\n class=\"sky-split-view-workspace\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\"\n>\n @if (breakpoint() === 'xs') {\n <sky-split-view-workspace-header />\n }\n <ng-content select=\"sky-split-view-workspace-content\" />\n <ng-content select=\"sky-split-view-workspace-footer\" />\n</div>\n", styles: [".sky-split-view-workspace:not(.sky-theme-modern *){--sky-override-split-view-workspace-background-color: #ffffff}.sky-split-view-workspace{background:var(--sky-override-split-view-workspace-background-color, var(--sky-color-background-container-base));height:100%;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: SkySplitViewWorkspaceHeaderComponent, selector: "sky-split-view-workspace-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
330
330
|
}
|
|
331
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewWorkspaceComponent, decorators: [{
|
|
332
332
|
type: Component,
|
|
333
333
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkySplitViewWorkspaceHeaderComponent], selector: 'sky-split-view-workspace', template: "<div\n class=\"sky-split-view-workspace\"\n role=\"region\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\"\n>\n @if (breakpoint() === 'xs') {\n <sky-split-view-workspace-header />\n }\n <ng-content select=\"sky-split-view-workspace-content\" />\n <ng-content select=\"sky-split-view-workspace-footer\" />\n</div>\n", styles: [".sky-split-view-workspace:not(.sky-theme-modern *){--sky-override-split-view-workspace-background-color: #ffffff}.sky-split-view-workspace{background:var(--sky-override-split-view-workspace-background-color, var(--sky-color-background-container-base));height:100%;display:flex;flex-direction:column}\n"] }]
|
|
334
334
|
}], propDecorators: { ariaLabel: [{
|
|
@@ -389,10 +389,10 @@ class SkySplitViewAdapterService {
|
|
|
389
389
|
this.#renderer.setStyle(splitViewElement, 'max-height', 'calc(100vh - ' + offsetTop + 'px - ' + marginBottom + ')');
|
|
390
390
|
this.#renderer.setStyle(splitViewElement, 'min-height', '300px');
|
|
391
391
|
}
|
|
392
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
393
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
392
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewAdapterService, deps: [{ token: i1$1.SkyMutationObserverService }, { token: i0.RendererFactory2 }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
393
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewAdapterService }); }
|
|
394
394
|
}
|
|
395
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewAdapterService, decorators: [{
|
|
396
396
|
type: Injectable
|
|
397
397
|
}], ctorParameters: () => [{ type: i1$1.SkyMutationObserverService }, { type: i0.RendererFactory2 }, { type: i1$1.SkyAppWindowRef }] });
|
|
398
398
|
|
|
@@ -548,8 +548,8 @@ class SkySplitViewComponent {
|
|
|
548
548
|
break;
|
|
549
549
|
}
|
|
550
550
|
}
|
|
551
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
552
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
551
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewComponent, deps: [{ token: SkySplitViewAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: SkySplitViewService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
552
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkySplitViewComponent, isStandalone: true, selector: "sky-split-view", inputs: { backButtonText: "backButtonText", bindHeightToWindow: "bindHeightToWindow", dock: "dock", messageStream: "messageStream" }, providers: [SkySplitViewAdapterService, SkySplitViewService], queries: [{ propertyName: "drawerComponent", first: true, predicate: SkySplitViewDrawerComponent, descendants: true }], hostDirectives: [{ directive: i1$1.SkyResponsiveHostDirective }], 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\" />\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\" />\n </div>\n</div>\n", styles: [".sky-split-view:not(.sky-theme-modern *){--sky-override-split-view-border: 1px solid #cdcfd2;--sky-override-split-view-border-left: 1px solid #cdcfd2;--sky-override-split-view-border-right: 1px solid #cdcfd2}:host{display:block}.sky-split-view{--sky-comp-override-list-header-background-color: initial;position:relative;display:flex;border:var(--sky-override-split-view-border, var(--sky-border-width-divider) solid var(--sky-color-border-divider));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 .sky-split-view{border-left:var(--sky-override-split-view-border-left, none);border-right:var(--sky-override-split-view-border-right, none)}}:host-context(.sky-responsive-container-sm) .sky-split-view,:host-context(.sky-responsive-container-md) .sky-split-view,:host-context(.sky-responsive-container-lg) .sky-split-view{border-left:var(--sky-override-split-view-border-left, none);border-right:var(--sky-override-split-view-border-right, none)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
553
553
|
trigger('blockAnimationOnLoad', [transition(':enter', [])]),
|
|
554
554
|
trigger('drawerEnter', [
|
|
555
555
|
state('false', style({ transform: 'translate(-100%)' })),
|
|
@@ -561,7 +561,7 @@ class SkySplitViewComponent {
|
|
|
561
561
|
]),
|
|
562
562
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
563
563
|
}
|
|
564
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewComponent, decorators: [{
|
|
565
565
|
type: Component,
|
|
566
566
|
args: [{ animations: [
|
|
567
567
|
trigger('blockAnimationOnLoad', [transition(':enter', [])]),
|
|
@@ -588,8 +588,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
588
588
|
}] } });
|
|
589
589
|
|
|
590
590
|
class SkySplitViewModule {
|
|
591
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
592
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.
|
|
591
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
592
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewModule, imports: [SkySplitViewComponent,
|
|
593
593
|
SkySplitViewDrawerComponent,
|
|
594
594
|
SkySplitViewWorkspaceComponent,
|
|
595
595
|
SkySplitViewWorkspaceContentComponent,
|
|
@@ -600,11 +600,11 @@ class SkySplitViewModule {
|
|
|
600
600
|
SkySplitViewWorkspaceContentComponent,
|
|
601
601
|
SkySplitViewWorkspaceFooterComponent,
|
|
602
602
|
SkySplitViewWorkspaceHeaderComponent] }); }
|
|
603
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.
|
|
603
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewModule, imports: [SkySplitViewComponent,
|
|
604
604
|
SkySplitViewWorkspaceComponent,
|
|
605
605
|
SkySplitViewWorkspaceHeaderComponent] }); }
|
|
606
606
|
}
|
|
607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
607
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySplitViewModule, decorators: [{
|
|
608
608
|
type: NgModule,
|
|
609
609
|
args: [{
|
|
610
610
|
imports: [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/split-view",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.5",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
},
|
|
17
17
|
"homepage": "https://github.com/blackbaud/skyux#readme",
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@angular/animations": "^21.
|
|
20
|
-
"@angular/cdk": "^21.
|
|
21
|
-
"@angular/common": "^21.
|
|
22
|
-
"@angular/core": "^21.
|
|
23
|
-
"@skyux/core": "14.0.0-alpha.
|
|
24
|
-
"@skyux/i18n": "14.0.0-alpha.
|
|
25
|
-
"@skyux/icon": "14.0.0-alpha.
|
|
19
|
+
"@angular/animations": "^21.2.0",
|
|
20
|
+
"@angular/cdk": "^21.2.0",
|
|
21
|
+
"@angular/common": "^21.2.0",
|
|
22
|
+
"@angular/core": "^21.2.0",
|
|
23
|
+
"@skyux/core": "14.0.0-alpha.5",
|
|
24
|
+
"@skyux/i18n": "14.0.0-alpha.5",
|
|
25
|
+
"@skyux/icon": "14.0.0-alpha.5"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"tslib": "^2.8.1"
|