dockview-core 1.16.0 → 1.16.1

package/dist/cjs/api/component.api.d.ts

@@ -2,11 +2,11 @@ import { FloatingGroupOptions, IDockviewComponent, MovePanelEvent, SerializedDoc
 import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, MovementOptions } from '../dockview/options';
 import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
-import { AddComponentOptions, GridviewComponentUpdateOptions, IGridviewComponent, SerializedGridviewComponent } from '../gridview/gridviewComponent';
+import { AddComponentOptions, IGridviewComponent, SerializedGridviewComponent } from '../gridview/gridviewComponent';
 import { IGridviewPanel } from '../gridview/gridviewPanel';
 import { AddPaneviewComponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
 import { IPaneviewPanel } from '../paneview/paneviewPanel';
-import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview, SplitviewComponentUpdateOptions } from '../splitview/splitviewComponent';
+import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview } from '../splitview/splitviewComponent';
 import { IView, Orientation, Sizing } from '../splitview/splitview';
 import { ISplitviewPanel } from '../splitview/splitviewPanel';
 import { DockviewGroupPanel, IDockviewGroupPanel } from '../dockview/dockviewGroupPanel';
@@ -17,6 +17,8 @@ import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/ta
 import { Box } from '../types';
 import { DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent } from '../dockview/dockviewGroupPanelModel';
 import { PaneviewComponentOptions } from '../paneview/options';
+import { SplitviewComponentOptions } from '../splitview/options';
+import { GridviewComponentOptions } from '../gridview/options';
 export interface CommonApi<T = any> {
     readonly height: number;
     readonly width: number;
@@ -115,7 +117,7 @@ export declare class SplitviewApi implements CommonApi<SerializedSplitview> {
     /**
      * Update configuratable options.
      */
-    updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
+    updateOptions(options: Partial<SplitviewComponentOptions>): void;
     /**
      * Release resources and teardown component. Do not call when using framework versions of dockview.
      */
@@ -305,7 +307,7 @@ export declare class GridviewApi implements CommonApi<SerializedGridviewComponen
      * Reset the component back to an empty and default state.
      */
     clear(): void;
-    updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
+    updateOptions(options: Partial<GridviewComponentOptions>): void;
     /**
      * Release resources and teardown component. Do not call when using framework versions of dockview.
      */

package/dist/cjs/dockview/dockviewComponent.js

@@ -732,6 +732,7 @@ var DockviewComponent = /** @class */ (function (_super) {
     DockviewComponent.prototype.updateOptions = function (options) {
         var e_3, _a;
         var _b, _c;
+        _super.prototype.updateOptions.call(this, options);
         var changed_floatingGroupBounds = 'floatingGroupBounds' in options &&
             options.floatingGroupBounds !== this.options.floatingGroupBounds;
         var changed_rootOverlayOptions = 'rootOverlayModel' in options &&

package/dist/cjs/gridview/baseComponentGridview.d.ts

@@ -63,6 +63,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
     readonly onDidLayoutChange: Event<void>;
     private readonly _onDidViewVisibilityChangeMicroTaskQueue;
     readonly onDidViewVisibilityChangeMicroTaskQueue: Event<void>;
+    private classNames;
     get id(): string;
     get size(): number;
     get groups(): T[];
@@ -81,6 +82,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
     abstract clear(): void;
     setVisible(panel: T, visible: boolean): void;
     isVisible(panel: T): boolean;
+    updateOptions(options: Partial<BaseGridOptions>): void;
     maximizeGroup(panel: T): void;
     isMaximizedGroup(panel: T): boolean;
     exitMaximizedGroup(): void;

package/dist/cjs/gridview/baseComponentGridview.js

@@ -33,6 +33,7 @@ var lifecycle_1 = require("../lifecycle");
 var math_1 = require("../math");
 var splitview_1 = require("../splitview/splitview");
 var resizable_1 = require("../resizable");
+var dom_1 = require("../dom");
 var nextLayoutId = (0, math_1.sequentialNumberGenerator)();
 function toTarget(direction) {
     switch (direction) {
@@ -53,6 +54,8 @@ exports.toTarget = toTarget;
 var BaseGrid = /** @class */ (function (_super) {
     __extends(BaseGrid, _super);
     function BaseGrid(options) {
+        var e_1, _a;
+        var _b, _c;
         var _this = _super.call(this, document.createElement('div'), options.disableAutoResizing) || this;
         _this._id = nextLayoutId.next();
         _this._groups = new Map();
@@ -66,10 +69,22 @@ var BaseGrid = /** @class */ (function (_super) {
         _this.onDidLayoutChange = _this._bufferOnDidLayoutChange.onEvent;
         _this._onDidViewVisibilityChangeMicroTaskQueue = new events_1.AsapEvent();
         _this.onDidViewVisibilityChangeMicroTaskQueue = _this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
+        _this.classNames = [];
         _this.element.style.height = '100%';
         _this.element.style.width = '100%';
-        if (typeof options.className === 'string') {
-            _this.element.classList.add(options.className);
+        _this.classNames = (_c = (_b = options.className) === null || _b === void 0 ? void 0 : _b.split(' ')) !== null && _c !== void 0 ? _c : [];
+        try {
+            for (var _d = __values(_this.classNames), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var className = _e.value;
+                (0, dom_1.toggleClass)(_this.element, className, true);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+            }
+            finally { if (e_1) throw e_1.error; }
         }
         options.parentElement.appendChild(_this.element);
         _this.gridview = new gridview_1.Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
@@ -177,6 +192,39 @@ var BaseGrid = /** @class */ (function (_super) {
     BaseGrid.prototype.isVisible = function (panel) {
         return this.gridview.isViewVisible((0, gridview_1.getGridLocation)(panel.element));
     };
+    BaseGrid.prototype.updateOptions = function (options) {
+        var e_2, _a, e_3, _b;
+        var _c, _d;
+        if ('className' in options) {
+            try {
+                for (var _e = __values(this.classNames), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var className = _f.value;
+                    (0, dom_1.toggleClass)(this.element, className, false);
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            this.classNames = (_d = (_c = options.className) === null || _c === void 0 ? void 0 : _c.split(' ')) !== null && _d !== void 0 ? _d : [];
+            try {
+                for (var _g = __values(this.classNames), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var className = _h.value;
+                    (0, dom_1.toggleClass)(this.element, className, true);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        }
+    };
     BaseGrid.prototype.maximizeGroup = function (panel) {
         this.gridview.maximizeView(panel);
         this.doSetGroupActive(panel);
@@ -280,7 +328,7 @@ var BaseGrid = /** @class */ (function (_super) {
         this.gridview.layout(width, height);
     };
     BaseGrid.prototype.dispose = function () {
-        var e_1, _a;
+        var e_4, _a;
         this._onDidActiveChange.dispose();
         this._onDidAdd.dispose();
         this._onDidRemove.dispose();
@@ -290,12 +338,12 @@ var BaseGrid = /** @class */ (function (_super) {
                 group.dispose();
             }
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_4) throw e_4.error; }
         }
         this.gridview.dispose();
         _super.prototype.dispose.call(this);

package/dist/cjs/gridview/gridviewComponent.d.ts

@@ -25,11 +25,10 @@ export interface AddComponentOptions<T extends object = Parameters> extends Base
 export interface IGridPanelComponentView extends IGridPanelView {
     init: (params: GridviewInitParameters) => void;
 }
-export type GridviewComponentUpdateOptions = Pick<GridviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
 export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
     readonly orientation: Orientation;
     readonly onDidLayoutFromJSON: Event<void>;
-    updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
+    updateOptions(options: Partial<GridviewComponentOptions>): void;
     addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
     focus(): void;
@@ -63,7 +62,7 @@ export declare class GridviewComponent extends BaseGrid<GridviewPanel> implement
     get deserializer(): IPanelDeserializer | undefined;
     set deserializer(value: IPanelDeserializer | undefined);
     constructor(parentElement: HTMLElement, options: GridviewComponentOptions);
-    updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
+    updateOptions(options: Partial<GridviewComponentOptions>): void;
     removePanel(panel: GridviewPanel): void;
     /**
      * Serialize the current state of the layout

package/dist/cjs/gridview/gridviewComponent.js

@@ -123,6 +123,7 @@ var GridviewComponent = /** @class */ (function (_super) {
         configurable: true
     });
     GridviewComponent.prototype.updateOptions = function (options) {
+        _super.prototype.updateOptions.call(this, options);
         var hasOrientationChanged = typeof options.orientation === 'string' &&
             this.gridview.orientation !== options.orientation;
         this._options = __assign(__assign({}, this.options), options);

package/dist/cjs/paneview/paneviewComponent.d.ts

@@ -103,6 +103,7 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     readonly onDidAddView: Event<PaneviewPanel>;
     private readonly _onDidRemoveView;
     readonly onDidRemoveView: Event<PaneviewPanel>;
+    private classNames;
     get id(): string;
     get panels(): PaneviewPanel[];
     set paneview(value: Paneview);

package/dist/cjs/paneview/paneviewComponent.js

@@ -25,6 +25,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -41,17 +52,6 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaneviewComponent = exports.PaneFramework = void 0;
 var component_api_1 = require("../api/component.api");
@@ -64,6 +64,7 @@ var draggablePaneviewPanel_1 = require("./draggablePaneviewPanel");
 var defaultPaneviewHeader_1 = require("./defaultPaneviewHeader");
 var math_1 = require("../math");
 var resizable_1 = require("../resizable");
+var dom_1 = require("../dom");
 var nextLayoutId = (0, math_1.sequentialNumberGenerator)();
 var PaneFramework = /** @class */ (function (_super) {
     __extends(PaneFramework, _super);
@@ -84,6 +85,8 @@ exports.PaneFramework = PaneFramework;
 var PaneviewComponent = /** @class */ (function (_super) {
     __extends(PaneviewComponent, _super);
     function PaneviewComponent(parentElement, options) {
+        var e_1, _a;
+        var _b, _c;
         var _this = _super.call(this, parentElement, options.disableAutoResizing) || this;
         _this._id = nextLayoutId.next();
         _this._disposable = new lifecycle_1.MutableDisposable();
@@ -98,10 +101,22 @@ var PaneviewComponent = /** @class */ (function (_super) {
         _this.onDidAddView = _this._onDidAddView.event;
         _this._onDidRemoveView = new events_1.Emitter();
         _this.onDidRemoveView = _this._onDidRemoveView.event;
-        if (typeof options.className === 'string') {
-            _this.element.classList.add(options.className);
-        }
+        _this.classNames = [];
         _this.addDisposables(_this._onDidLayoutChange, _this._onDidLayoutfromJSON, _this._onDidDrop, _this._onDidAddView, _this._onDidRemoveView);
+        _this.classNames = (_c = (_b = options.className) === null || _b === void 0 ? void 0 : _b.split(' ')) !== null && _c !== void 0 ? _c : [];
+        try {
+            for (var _d = __values(_this.classNames), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var className = _e.value;
+                (0, dom_1.toggleClass)(_this.element, className, true);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
         _this._options = options;
         if (!options.components) {
             options.components = {};
@@ -191,6 +206,37 @@ var PaneviewComponent = /** @class */ (function (_super) {
         //noop
     };
     PaneviewComponent.prototype.updateOptions = function (options) {
+        var e_2, _a, e_3, _b;
+        var _c, _d;
+        if ('className' in options) {
+            try {
+                for (var _e = __values(this.classNames), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var className = _f.value;
+                    (0, dom_1.toggleClass)(this.element, className, false);
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            this.classNames = (_d = (_c = options.className) === null || _c === void 0 ? void 0 : _c.split(' ')) !== null && _d !== void 0 ? _d : [];
+            try {
+                for (var _g = __values(this.classNames), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var className = _h.value;
+                    (0, dom_1.toggleClass)(this.element, className, true);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        }
         this._options = __assign(__assign({}, this.options), options);
     };
     PaneviewComponent.prototype.addPanel = function (options) {
@@ -354,19 +400,19 @@ var PaneviewComponent = /** @class */ (function (_super) {
         this._onDidLayoutfromJSON.fire();
     };
     PaneviewComponent.prototype.clear = function () {
-        var e_1, _a;
+        var e_4, _a;
         try {
             for (var _b = __values(this._viewDisposables.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var _d = __read(_c.value, 2), _ = _d[0], value = _d[1];
                 value.dispose();
             }
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_4) throw e_4.error; }
         }
         this._viewDisposables.clear();
         this.paneview.dispose();
@@ -386,7 +432,7 @@ var PaneviewComponent = /** @class */ (function (_super) {
         }
     };
     PaneviewComponent.prototype.dispose = function () {
-        var e_2, _a;
+        var e_5, _a;
         _super.prototype.dispose.call(this);
         try {
             for (var _b = __values(this._viewDisposables.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -394,12 +440,12 @@ var PaneviewComponent = /** @class */ (function (_super) {
                 value.dispose();
             }
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_2) throw e_2.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         this._viewDisposables.clear();
         this.paneview.dispose();

package/dist/cjs/splitview/splitviewComponent.d.ts

@@ -1,5 +1,5 @@
 import { IDisposable } from '../lifecycle';
-import { IView, LayoutPriority, Orientation, Sizing, Splitview } from './splitview';
+import { IView, LayoutPriority, Orientation, Sizing, Splitview, SplitViewOptions } from './splitview';
 import { SplitviewComponentOptions } from './options';
 import { BaseComponentOptions, Parameters } from '../panel/types';
 import { Event } from '../events';
@@ -31,7 +31,6 @@ export interface AddSplitviewComponentOptions<T extends Parameters = Parameters>
     minimumSize?: number;
     maximumSize?: number;
 }
-export type SplitviewComponentUpdateOptions = Pick<SplitviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
 export interface ISplitviewComponent extends IDisposable {
     readonly minimumSize: number;
     readonly maximumSize: number;
@@ -43,7 +42,7 @@ export interface ISplitviewComponent extends IDisposable {
     readonly onDidRemoveView: Event<IView>;
     readonly onDidLayoutFromJSON: Event<void>;
     readonly panels: SplitviewPanel[];
-    updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
+    updateOptions(options: Partial<SplitViewOptions>): void;
     addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): ISplitviewPanel;
     layout(width: number, height: number): void;
     onDidLayoutChange: Event<void>;
@@ -73,6 +72,7 @@ export declare class SplitviewComponent extends Resizable implements ISplitviewC
     readonly onDidRemoveView: Event<IView>;
     private readonly _onDidLayoutChange;
     readonly onDidLayoutChange: Event<void>;
+    private classNames;
     get panels(): SplitviewPanel[];
     get options(): SplitviewComponentOptions;
     get length(): number;
@@ -84,7 +84,7 @@ export declare class SplitviewComponent extends Resizable implements ISplitviewC
     get height(): number;
     get width(): number;
     constructor(parentElement: HTMLElement, options: SplitviewComponentOptions);
-    updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
+    updateOptions(options: Partial<SplitviewComponentOptions>): void;
     focus(): void;
     movePanel(from: number, to: number): void;
     setVisible(panel: SplitviewPanel, visible: boolean): void;

package/dist/cjs/splitview/splitviewComponent.js

@@ -25,6 +25,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -41,17 +52,6 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitviewComponent = void 0;
 var lifecycle_1 = require("../lifecycle");
@@ -59,12 +59,15 @@ var splitview_1 = require("./splitview");
 var events_1 = require("../events");
 var componentFactory_1 = require("../panel/componentFactory");
 var resizable_1 = require("../resizable");
+var dom_1 = require("../dom");
 /**
  * A high-level implementation of splitview that works using 'panels'
  */
 var SplitviewComponent = /** @class */ (function (_super) {
     __extends(SplitviewComponent, _super);
     function SplitviewComponent(parentElement, options) {
+        var e_1, _a;
+        var _b, _c;
         var _this = _super.call(this, parentElement, options.disableAutoResizing) || this;
         _this._splitviewChangeDisposable = new lifecycle_1.MutableDisposable();
         _this._panels = new Map();
@@ -76,8 +79,20 @@ var SplitviewComponent = /** @class */ (function (_super) {
         _this.onDidRemoveView = _this._onDidRemoveView.event;
         _this._onDidLayoutChange = new events_1.Emitter();
         _this.onDidLayoutChange = _this._onDidLayoutChange.event;
-        if (typeof options.className === 'string') {
-            _this.element.classList.add(options.className);
+        _this.classNames = [];
+        _this.classNames = (_c = (_b = options.className) === null || _b === void 0 ? void 0 : _b.split(' ')) !== null && _c !== void 0 ? _c : [];
+        try {
+            for (var _d = __values(_this.classNames), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var className = _e.value;
+                (0, dom_1.toggleClass)(_this.element, className, true);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+            }
+            finally { if (e_1) throw e_1.error; }
         }
         _this._options = options;
         if (!options.components) {
@@ -167,6 +182,37 @@ var SplitviewComponent = /** @class */ (function (_super) {
         configurable: true
     });
     SplitviewComponent.prototype.updateOptions = function (options) {
+        var e_2, _a, e_3, _b;
+        var _c, _d;
+        if ('className' in options) {
+            try {
+                for (var _e = __values(this.classNames), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var className = _f.value;
+                    (0, dom_1.toggleClass)(this.element, className, false);
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            this.classNames = (_d = (_c = options.className) === null || _c === void 0 ? void 0 : _c.split(' ')) !== null && _d !== void 0 ? _d : [];
+            try {
+                for (var _g = __values(this.classNames), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var className = _h.value;
+                    (0, dom_1.toggleClass)(this.element, className, true);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        }
         var hasOrientationChanged = typeof options.orientation === 'string' &&
             this.options.orientation !== options.orientation;
         this._options = __assign(__assign({}, this.options), options);
@@ -339,19 +385,19 @@ var SplitviewComponent = /** @class */ (function (_super) {
         this._onDidLayoutfromJSON.fire();
     };
     SplitviewComponent.prototype.clear = function () {
-        var e_1, _a;
+        var e_4, _a;
         try {
             for (var _b = __values(this._panels.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var disposable = _c.value;
                 disposable.dispose();
             }
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_4) throw e_4.error; }
         }
         this._panels.clear();
         while (this.splitview.length > 0) {
@@ -360,19 +406,19 @@ var SplitviewComponent = /** @class */ (function (_super) {
         }
     };
     SplitviewComponent.prototype.dispose = function () {
-        var e_2, _a, e_3, _b;
+        var e_5, _a, e_6, _b;
         try {
             for (var _c = __values(this._panels.values()), _d = _c.next(); !_d.done; _d = _c.next()) {
                 var disposable = _d.value;
                 disposable.dispose();
             }
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_2) throw e_2.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         this._panels.clear();
         var views = this.splitview.getViews();
@@ -384,12 +430,12 @@ var SplitviewComponent = /** @class */ (function (_super) {
                 view.dispose();
             }
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
         finally {
             try {
                 if (views_1_1 && !views_1_1.done && (_b = views_1.return)) _b.call(views_1);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_6) throw e_6.error; }
         }
         _super.prototype.dispose.call(this);
     };