@skyux/split-view 15.0.0-alpha.4 → 15.0.0-alpha.6
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 +7 -12
|
@@ -36,11 +36,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
36
36
|
* Import into any component library module that needs to use resource strings.
|
|
37
37
|
*/
|
|
38
38
|
class SkySplitViewResourcesModule {
|
|
39
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
40
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
41
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
39
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
40
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewResourcesModule, exports: [SkyI18nModule] }); }
|
|
41
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewResourcesModule, imports: [SkyI18nModule] }); }
|
|
42
42
|
}
|
|
43
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
43
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewResourcesModule, decorators: [{
|
|
44
44
|
type: NgModule,
|
|
45
45
|
args: [{
|
|
46
46
|
exports: [SkyI18nModule],
|
|
@@ -103,10 +103,10 @@ class SkySplitViewService {
|
|
|
103
103
|
updateBackButtonText(text) {
|
|
104
104
|
this.#_backButtonTextStream.next(text);
|
|
105
105
|
}
|
|
106
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
107
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
106
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
107
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewService }); }
|
|
108
108
|
}
|
|
109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewService, decorators: [{
|
|
110
110
|
type: Injectable
|
|
111
111
|
}], ctorParameters: () => [] });
|
|
112
112
|
|
|
@@ -239,10 +239,10 @@ class SkySplitViewDrawerComponent {
|
|
|
239
239
|
const splitView = this.#splitViewSvc.splitViewElementRef?.nativeElement.querySelector('.sky-split-view');
|
|
240
240
|
this.widthMax = splitView.clientWidth - this.widthTolerance;
|
|
241
241
|
}
|
|
242
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
243
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
242
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
243
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 var(--sky-global-duration-short)}.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 }); }
|
|
244
244
|
}
|
|
245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewDrawerComponent, decorators: [{
|
|
246
246
|
type: Component,
|
|
247
247
|
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 var(--sky-global-duration-short)}.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"] }]
|
|
248
248
|
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{
|
|
@@ -258,10 +258,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
258
258
|
* Specifies the content to display in the split view's workspace panel.
|
|
259
259
|
*/
|
|
260
260
|
class SkySplitViewWorkspaceContentComponent {
|
|
261
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
262
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
261
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewWorkspaceContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
262
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", 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 }); }
|
|
263
263
|
}
|
|
264
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewWorkspaceContentComponent, decorators: [{
|
|
265
265
|
type: Component,
|
|
266
266
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
267
267
|
tabindex: '0',
|
|
@@ -272,10 +272,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
272
272
|
* Specifies the footer to display in the split view's workspace panel. This component is often used with a summary action bar.
|
|
273
273
|
*/
|
|
274
274
|
class SkySplitViewWorkspaceFooterComponent {
|
|
275
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
276
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
275
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewWorkspaceFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
276
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", 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 }); }
|
|
277
277
|
}
|
|
278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewWorkspaceFooterComponent, decorators: [{
|
|
279
279
|
type: Component,
|
|
280
280
|
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"] }]
|
|
281
281
|
}] });
|
|
@@ -301,10 +301,10 @@ class SkySplitViewWorkspaceHeaderComponent {
|
|
|
301
301
|
this.#ngUnsubscribe.next();
|
|
302
302
|
this.#ngUnsubscribe.complete();
|
|
303
303
|
}
|
|
304
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
305
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
304
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewWorkspaceHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
305
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", 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: i1$2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
306
306
|
}
|
|
307
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewWorkspaceHeaderComponent, decorators: [{
|
|
308
308
|
type: Component,
|
|
309
309
|
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"] }]
|
|
310
310
|
}] });
|
|
@@ -319,10 +319,10 @@ class SkySplitViewWorkspaceComponent {
|
|
|
319
319
|
// the workspace area.
|
|
320
320
|
this.breakpoint = toSignal(inject(SkyMediaQueryService, { skipSelf: true }).breakpointChange);
|
|
321
321
|
}
|
|
322
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
323
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
322
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewWorkspaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
323
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 }); }
|
|
324
324
|
}
|
|
325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewWorkspaceComponent, decorators: [{
|
|
326
326
|
type: Component,
|
|
327
327
|
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"] }]
|
|
328
328
|
}], propDecorators: { ariaLabel: [{
|
|
@@ -379,10 +379,10 @@ class SkySplitViewAdapterService {
|
|
|
379
379
|
this.#renderer.setStyle(splitViewElement, 'max-height', 'calc(100vh - ' + offsetTop + 'px - ' + marginBottom + ')');
|
|
380
380
|
this.#renderer.setStyle(splitViewElement, 'min-height', '300px');
|
|
381
381
|
}
|
|
382
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
383
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
382
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
383
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewAdapterService }); }
|
|
384
384
|
}
|
|
385
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewAdapterService, decorators: [{
|
|
386
386
|
type: Injectable
|
|
387
387
|
}], ctorParameters: () => [] });
|
|
388
388
|
|
|
@@ -542,10 +542,10 @@ class SkySplitViewComponent {
|
|
|
542
542
|
break;
|
|
543
543
|
}
|
|
544
544
|
}
|
|
545
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
546
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
545
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
546
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", 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 [class.sky-split-view-dock-fill]=\"dock === 'fill'\"\n [class.sky-split-view-dock-none]=\"dock === 'none'\"\n>\n <div\n class=\"sky-split-view-drawer-flex-container\"\n [class.sky-animation-slide-enter-left]=\"animationEnabled()\"\n [hidden]=\"!drawerVisible\"\n >\n <ng-content select=\"sky-split-view-drawer\" />\n </div>\n\n <div\n class=\"sky-split-view-workspace-flex-container\"\n skyTransitionEndHandler\n transitionPropertyToTrack=\"transform\"\n [class.sky-animation-slide-enter-right]=\"animationEnabled()\"\n [hidden]=\"!workspaceVisible\"\n [transitionTrigger]=\"workspaceVisible\"\n (transitionEnd)=\"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: "directive", type: _SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
547
547
|
}
|
|
548
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
548
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewComponent, decorators: [{
|
|
549
549
|
type: Component,
|
|
550
550
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [SkyResponsiveHostDirective], imports: [_SkyTransitionEndHandlerDirective], providers: [SkySplitViewAdapterService, SkySplitViewService], selector: 'sky-split-view', template: "<div\n class=\"sky-split-view\"\n [class.sky-split-view-dock-fill]=\"dock === 'fill'\"\n [class.sky-split-view-dock-none]=\"dock === 'none'\"\n>\n <div\n class=\"sky-split-view-drawer-flex-container\"\n [class.sky-animation-slide-enter-left]=\"animationEnabled()\"\n [hidden]=\"!drawerVisible\"\n >\n <ng-content select=\"sky-split-view-drawer\" />\n </div>\n\n <div\n class=\"sky-split-view-workspace-flex-container\"\n skyTransitionEndHandler\n transitionPropertyToTrack=\"transform\"\n [class.sky-animation-slide-enter-right]=\"animationEnabled()\"\n [hidden]=\"!workspaceVisible\"\n [transitionTrigger]=\"workspaceVisible\"\n (transitionEnd)=\"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"] }]
|
|
551
551
|
}], ctorParameters: () => [], propDecorators: { backButtonText: [{
|
|
@@ -562,8 +562,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
562
562
|
}] } });
|
|
563
563
|
|
|
564
564
|
class SkySplitViewModule {
|
|
565
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
566
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
565
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
566
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewModule, imports: [SkySplitViewComponent,
|
|
567
567
|
SkySplitViewDrawerComponent,
|
|
568
568
|
SkySplitViewWorkspaceComponent,
|
|
569
569
|
SkySplitViewWorkspaceContentComponent,
|
|
@@ -574,10 +574,10 @@ class SkySplitViewModule {
|
|
|
574
574
|
SkySplitViewWorkspaceContentComponent,
|
|
575
575
|
SkySplitViewWorkspaceFooterComponent,
|
|
576
576
|
SkySplitViewWorkspaceHeaderComponent] }); }
|
|
577
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
577
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewModule, imports: [SkySplitViewWorkspaceComponent,
|
|
578
578
|
SkySplitViewWorkspaceHeaderComponent] }); }
|
|
579
579
|
}
|
|
580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySplitViewModule, decorators: [{
|
|
581
581
|
type: NgModule,
|
|
582
582
|
args: [{
|
|
583
583
|
imports: [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/split-view",
|
|
3
|
-
"version": "15.0.0-alpha.
|
|
3
|
+
"version": "15.0.0-alpha.6",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -16,21 +16,16 @@
|
|
|
16
16
|
},
|
|
17
17
|
"homepage": "https://github.com/blackbaud/skyux#readme",
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@angular/cdk": "^22.
|
|
20
|
-
"@angular/common": "^22.
|
|
21
|
-
"@angular/core": "^22.
|
|
22
|
-
"@skyux/core": "15.0.0-alpha.
|
|
23
|
-
"@skyux/i18n": "15.0.0-alpha.
|
|
24
|
-
"@skyux/icon": "15.0.0-alpha.
|
|
19
|
+
"@angular/cdk": "^22.1.2",
|
|
20
|
+
"@angular/common": "^22.1.2",
|
|
21
|
+
"@angular/core": "^22.1.2",
|
|
22
|
+
"@skyux/core": "15.0.0-alpha.6",
|
|
23
|
+
"@skyux/i18n": "15.0.0-alpha.6",
|
|
24
|
+
"@skyux/icon": "15.0.0-alpha.6"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"tslib": "^2.8.1"
|
|
28
28
|
},
|
|
29
|
-
"peerDependenciesMeta": {
|
|
30
|
-
"@skyux-sdk/testing": {
|
|
31
|
-
"optional": true
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
29
|
"sideEffects": false,
|
|
35
30
|
"module": "fesm2022/skyux-split-view.mjs",
|
|
36
31
|
"typings": "types/skyux-split-view.d.ts",
|