igniteui-dockmanager 2.1.0 → 2.2.0-alpha.0

package/{components → dist/components}/dockmanager/panes/content-pane-component.js

@@ -11,7 +11,7 @@ import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { partNameMap } from '../../../utils/utils.js';
 import { IGC_DEFAULT_PANE_SIZE, IGC_DEFAULT_UNPIN_PANE_SIZE, IGC_RESIZING_MIN_SIZE, } from '../dockmanager.interfaces.js';
 import { styles } from './content-pane-component.base.css.js';
-class IgcContentPaneComponent extends EventEmitterMixin(LitElement) {
+export default class IgcContentPaneComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._contentId = '';
@@ -25,6 +25,8 @@ class IgcContentPaneComponent extends EventEmitterMixin(LitElement) {
         this._minResizeWidth = IGC_RESIZING_MIN_SIZE;
         this._minResizeHeight = IGC_RESIZING_MIN_SIZE;
     }
+    static { this.tagName = 'igc-content-pane'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcContentPaneComponent);
     }
@@ -131,9 +133,6 @@ class IgcContentPaneComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcContentPaneComponent.tagName = 'igc-content-pane';
-IgcContentPaneComponent.styles = [styles];
-export default IgcContentPaneComponent;
 __decorate([
     property({ type: String, attribute: 'content-id' })
 ], IgcContentPaneComponent.prototype, "contentId", null);

package/{components → dist/components}/dockmanager/panes/document-host-component.js

@@ -9,12 +9,14 @@ import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import { IGC_DEFAULT_PANE_SIZE } from '../dockmanager.interfaces.js';
 import { styles } from './document-host-component.base.css.js';
-class IgcDocumentHostComponent extends LitElement {
+export default class IgcDocumentHostComponent extends LitElement {
     constructor() {
         super(...arguments);
         this._size = IGC_DEFAULT_PANE_SIZE;
         this._parentUseFixedSize = false;
     }
+    static { this.tagName = 'igc-document-host'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcDocumentHostComponent);
     }
@@ -48,9 +50,6 @@ class IgcDocumentHostComponent extends LitElement {
         return html ` <slot></slot> `;
     }
 }
-IgcDocumentHostComponent.tagName = 'igc-document-host';
-IgcDocumentHostComponent.styles = [styles];
-export default IgcDocumentHostComponent;
 __decorate([
     property({ type: Boolean })
 ], IgcDocumentHostComponent.prototype, "parentUseFixedSize", null);

package/{components → dist/components}/dockmanager/panes/floating-pane-component.js

@@ -11,7 +11,7 @@ import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { IGC_DEFAULT_PANE_SIZE, } from '../dockmanager.interfaces.js';
 import { styles } from './floating-pane-component.css.js';
 import IgcResizerComponent from './resizer-component.js';
-class IgcFloatingPaneComponent extends EventEmitterMixin(LitElement) {
+export default class IgcFloatingPaneComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._floatingHeight = IGC_DEFAULT_PANE_SIZE;
@@ -52,6 +52,8 @@ class IgcFloatingPaneComponent extends EventEmitterMixin(LitElement) {
             });
         };
     }
+    static { this.tagName = 'igc-floating-pane'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcFloatingPaneComponent, IgcResizerComponent);
     }
@@ -149,9 +151,6 @@ class IgcFloatingPaneComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcFloatingPaneComponent.tagName = 'igc-floating-pane';
-IgcFloatingPaneComponent.styles = [styles];
-export default IgcFloatingPaneComponent;
 __decorate([
     property({ type: Boolean })
 ], IgcFloatingPaneComponent.prototype, "allowResize", void 0);

package/{components → dist/components}/dockmanager/panes/pane-header-component.js

@@ -17,7 +17,9 @@ import IgcButtonDMComponent from '../../button/button-component.js';
 import { IgcDragService } from '../../drag-drop/drag.service.js';
 import IgcIconDMComponent from '../../icon/icon-component.js';
 import { styles } from './pane-header-component.base.css.js';
-class IgcPaneHeaderComponent extends EventEmitterMixin(LitElement) {
+export default class IgcPaneHeaderComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-pane-header'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcPaneHeaderComponent, IgcIconDMComponent, IgcButtonDMComponent);
     }
@@ -239,9 +241,6 @@ class IgcPaneHeaderComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcPaneHeaderComponent.tagName = 'igc-pane-header';
-IgcPaneHeaderComponent.styles = [styles];
-export default IgcPaneHeaderComponent;
 __decorate([
     property({ type: Boolean })
 ], IgcPaneHeaderComponent.prototype, "pinned", void 0);

package/{components → dist/components}/dockmanager/panes/resizer-component.js

@@ -10,7 +10,8 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { IgcDragService } from '../../drag-drop/drag.service.js';
-class IgcResizerComponent extends EventEmitterMixin(LitElement) {
+export default class IgcResizerComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-resizer'; }
     static register() {
         registerComponent(IgcResizerComponent);
     }
@@ -84,8 +85,6 @@ class IgcResizerComponent extends EventEmitterMixin(LitElement) {
         return html `<div class="resize-container" style=${styleMap(style)}></div>`;
     }
 }
-IgcResizerComponent.tagName = 'igc-resizer';
-export default IgcResizerComponent;
 __decorate([
     property({ type: String })
 ], IgcResizerComponent.prototype, "orientation", void 0);

package/{components → dist/components}/dockmanager/panes/split-pane-component.js

@@ -10,7 +10,7 @@ import { registerComponent } from '../../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { IGC_DEFAULT_PANE_SIZE, IGC_RESIZING_MIN_SIZE, } from '../dockmanager.interfaces.js';
 import { styles } from './split-pane-component.base.css.js';
-class IgcSplitPaneComponent extends EventEmitterMixin(LitElement) {
+export default class IgcSplitPaneComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._parentUseFixedSize = false;
@@ -18,6 +18,8 @@ class IgcSplitPaneComponent extends EventEmitterMixin(LitElement) {
         this._minResizeWidth = IGC_RESIZING_MIN_SIZE;
         this._minResizeHeight = IGC_RESIZING_MIN_SIZE;
     }
+    static { this.tagName = 'igc-split-pane'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcSplitPaneComponent);
     }
@@ -82,9 +84,6 @@ class IgcSplitPaneComponent extends EventEmitterMixin(LitElement) {
         return html `<slot></slot>`;
     }
 }
-IgcSplitPaneComponent.tagName = 'igc-split-pane';
-IgcSplitPaneComponent.styles = [styles];
-export default IgcSplitPaneComponent;
 __decorate([
     property({ type: String })
 ], IgcSplitPaneComponent.prototype, "orientation", null);

package/{components → dist/components}/dockmanager/panes/splitter-component.js

@@ -15,7 +15,9 @@ import { IgcDragService } from '../../drag-drop/drag.service.js';
 import { IGC_DEFAULT_RESIZE, IGC_DEFAULT_SPLITTER_SIZE, IGC_RESIZING_MIN_SIZE, } from '../dockmanager.interfaces.js';
 import { styles } from './splitter-component.css.js';
 const SCROLL_SPEED = 15;
-class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
+export default class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-splitter'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcSplitterComponent);
     }
@@ -375,9 +377,6 @@ class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcSplitterComponent.tagName = 'igc-splitter';
-IgcSplitterComponent.styles = [styles];
-export default IgcSplitterComponent;
 __decorate([
     state()
 ], IgcSplitterComponent.prototype, "_dragOffset", void 0);

package/{components → dist/components}/dockmanager/panes/unpinned-pane-header-component.js

@@ -9,12 +9,14 @@ import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import { partNameMap } from '../../../common/util.js';
 import { styles } from './unpinned-pane-header-component.base.css.js';
-class IgcUnpinnedPaneHeaderComponent extends LitElement {
+export default class IgcUnpinnedPaneHeaderComponent extends LitElement {
     constructor() {
         super(...arguments);
         this._isActive = false;
         this._disabled = false;
     }
+    static { this.tagName = 'igc-unpinned-pane-header'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcUnpinnedPaneHeaderComponent);
     }
@@ -71,9 +73,6 @@ class IgcUnpinnedPaneHeaderComponent extends LitElement {
         return html ` <slot></slot> `;
     }
 }
-IgcUnpinnedPaneHeaderComponent.tagName = 'igc-unpinned-pane-header';
-IgcUnpinnedPaneHeaderComponent.styles = [styles];
-export default IgcUnpinnedPaneHeaderComponent;
 __decorate([
     property({ type: String })
 ], IgcUnpinnedPaneHeaderComponent.prototype, "location", null);

package/{components → dist/components}/icon/icon-component.js

@@ -9,11 +9,13 @@ import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../common/definitions/register.js';
 import { styles } from './icon-component.css.js';
 import { icons } from './icons.js';
-class IgcIconDMComponent extends LitElement {
+export default class IgcIconDMComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.name = '';
     }
+    static { this.tagName = 'igc-icon-component'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcIconDMComponent);
     }
@@ -24,9 +26,6 @@ class IgcIconDMComponent extends LitElement {
     `;
     }
 }
-IgcIconDMComponent.tagName = 'igc-icon-component';
-IgcIconDMComponent.styles = [styles];
-export default IgcIconDMComponent;
 __decorate([
     property({ type: String })
 ], IgcIconDMComponent.prototype, "name", void 0);

package/{components → dist/components}/sample-component/sample-component.js

@@ -857,6 +857,115 @@ let SampleComponent = class SampleComponent extends LitElement {
         this._newId = '';
         this.foundElem = [];
     }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    igc-dockmanager {
+      margin: 10px;
+      border: 1px solid black;
+      --igc-resize-target-border-width: 2px;
+      /* --igc-splitter-thickness: 10px; */
+      /* --igc-resize-handle-thickness: 10px;
+      --igc-resize-handle-size: 150px; */
+    }
+
+    /*
+   igc-dockmanager {
+    background-color: rgb(227,230,233);
+    padding: 20px;
+  } */
+
+    /* igc-dockmanager::part(pane-header) {
+      background-color: #fff;
+      border-bottom: 2px solid rgb(227, 230, 233);
+      max-height: 15px;
+      min-height: 15px;
+    }
+
+    igc-dockmanager::part(pane-header active) {
+      font-weight: 700;
+      color: rgb(113, 115, 116);
+      box-shadow: none;
+      border-bottom: 2px solid rgb(113, 115, 116);
+    }
+
+    igc-dockmanager::part(pane-header-content) {
+      color: rgba(104, 97, 97, 0.938);
+    }
+
+    igc-dockmanager::part(splitter) {
+      flex: 0 0 15px;
+    }
+
+    igc-dockmanager::part(splitter-base) {
+      background: transparent;
+    }
+
+    igc-dockmanager::part(splitter-base)::after {
+      content: none;
+    }
+
+    igc-dockmanager::part(content-pane) {
+      border-radius: 10px;
+    }
+
+    igc-dockmanager::part(tab-header bottom) {
+      border-bottom-right-radius: 10px;
+      border-bottom-left-radius: 10px;
+      background-color: rgb(227, 230, 233);
+    }
+
+    igc-dockmanager::part(tab-header active selected bottom) {
+      font-weight: 700;
+      color: rgb(113, 115, 116);
+      box-shadow: inset 0 2px 0 0 rgb(113, 115, 116);
+    }
+
+    igc-dockmanager::part(tab-strip-area bottom) {
+      border-radius: 0 0 10px 10px;
+      border-bottom: 2px solid rgb(227, 230, 233);
+      background-color: #fff;
+    }
+
+    igc-dockmanager::part(tab-strip-actions bottom) {
+      display: none;
+    }
+
+    igc-dockmanager::part(tabs-content) {
+      border-radius: 10px 10px 0 0;
+      background-color: #fff;
+    }
+
+    igc-dockmanager::part(root-docking-indicator),
+    igc-dockmanager::part(splitter-docking-indicator),
+    igc-dockmanager::part(docking-indicator) {
+      background-color: rgba(49, 45, 49, 0.733);
+      color: #fff;
+      border: none;
+      border-radius: 5px;
+      margin: 2px;
+    }
+
+    igc-dockmanager::part(docking-preview) {
+      background-color: rgb(227, 230, 233);
+      opacity: 0.7;
+    }
+
+    igc-dockmanager::part(unpinned-pane-header) {
+      border-radius: 5px;
+      margin-bottom: 5px;
+      box-shadow: inset 0 2px 0 0 rgb(113, 115, 116);
+      background-color: #fff;
+    }
+
+    igc-dockmanager::part(floating-window) {
+      border-radius: 10px;
+    } */
+  `; }
     log(message, ...optionalParams) {
         if (this.logEnabled) {
             console.log(message, optionalParams);
@@ -1139,115 +1248,6 @@ let SampleComponent = class SampleComponent extends LitElement {
     `;
     }
 };
-SampleComponent.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-
-    igc-dockmanager {
-      margin: 10px;
-      border: 1px solid black;
-      --igc-resize-target-border-width: 2px;
-      /* --igc-splitter-thickness: 10px; */
-      /* --igc-resize-handle-thickness: 10px;
-      --igc-resize-handle-size: 150px; */
-    }
-
-    /*
-   igc-dockmanager {
-    background-color: rgb(227,230,233);
-    padding: 20px;
-  } */
-
-    /* igc-dockmanager::part(pane-header) {
-      background-color: #fff;
-      border-bottom: 2px solid rgb(227, 230, 233);
-      max-height: 15px;
-      min-height: 15px;
-    }
-
-    igc-dockmanager::part(pane-header active) {
-      font-weight: 700;
-      color: rgb(113, 115, 116);
-      box-shadow: none;
-      border-bottom: 2px solid rgb(113, 115, 116);
-    }
-
-    igc-dockmanager::part(pane-header-content) {
-      color: rgba(104, 97, 97, 0.938);
-    }
-
-    igc-dockmanager::part(splitter) {
-      flex: 0 0 15px;
-    }
-
-    igc-dockmanager::part(splitter-base) {
-      background: transparent;
-    }
-
-    igc-dockmanager::part(splitter-base)::after {
-      content: none;
-    }
-
-    igc-dockmanager::part(content-pane) {
-      border-radius: 10px;
-    }
-
-    igc-dockmanager::part(tab-header bottom) {
-      border-bottom-right-radius: 10px;
-      border-bottom-left-radius: 10px;
-      background-color: rgb(227, 230, 233);
-    }
-
-    igc-dockmanager::part(tab-header active selected bottom) {
-      font-weight: 700;
-      color: rgb(113, 115, 116);
-      box-shadow: inset 0 2px 0 0 rgb(113, 115, 116);
-    }
-
-    igc-dockmanager::part(tab-strip-area bottom) {
-      border-radius: 0 0 10px 10px;
-      border-bottom: 2px solid rgb(227, 230, 233);
-      background-color: #fff;
-    }
-
-    igc-dockmanager::part(tab-strip-actions bottom) {
-      display: none;
-    }
-
-    igc-dockmanager::part(tabs-content) {
-      border-radius: 10px 10px 0 0;
-      background-color: #fff;
-    }
-
-    igc-dockmanager::part(root-docking-indicator),
-    igc-dockmanager::part(splitter-docking-indicator),
-    igc-dockmanager::part(docking-indicator) {
-      background-color: rgba(49, 45, 49, 0.733);
-      color: #fff;
-      border: none;
-      border-radius: 5px;
-      margin: 2px;
-    }
-
-    igc-dockmanager::part(docking-preview) {
-      background-color: rgb(227, 230, 233);
-      opacity: 0.7;
-    }
-
-    igc-dockmanager::part(unpinned-pane-header) {
-      border-radius: 5px;
-      margin-bottom: 5px;
-      box-shadow: inset 0 2px 0 0 rgb(113, 115, 116);
-      background-color: #fff;
-    }
-
-    igc-dockmanager::part(floating-window) {
-      border-radius: 10px;
-    } */
-  `;
 __decorate([
     property({ attribute: false })
 ], SampleComponent.prototype, "hiddenPanes", void 0);

package/{components → dist/components}/tabs/tab-header-component.js

@@ -15,7 +15,7 @@ import IgcButtonDMComponent from '../button/button-component.js';
 import { IgcDragService, } from '../drag-drop/drag.service.js';
 import IgcIconDMComponent from '../icon/icon-component.js';
 import { styles } from './tab-header-component.css.js';
-class IgcTabHeaderComponent extends EventEmitterMixin(LitElement) {
+export default class IgcTabHeaderComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._selected = false;
@@ -34,6 +34,8 @@ class IgcTabHeaderComponent extends EventEmitterMixin(LitElement) {
             this.emitEvent('igcIconKeyDown', { detail: event });
         };
     }
+    static { this.tagName = 'igc-tab-header'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcTabHeaderComponent, IgcIconDMComponent, IgcButtonDMComponent);
     }
@@ -240,9 +242,6 @@ class IgcTabHeaderComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcTabHeaderComponent.tagName = 'igc-tab-header';
-IgcTabHeaderComponent.styles = [styles];
-export default IgcTabHeaderComponent;
 __decorate([
     query('[part^=tab-header-close-button]')
 ], IgcTabHeaderComponent.prototype, "closeButton", void 0);

package/{components → dist/components}/tabs/tab-panel-component.js

@@ -11,12 +11,14 @@ import { registerComponent } from '../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
 import { partNameMap } from '../../common/util.js';
 import { styles } from './tab-panel-component.css.js';
-class IgcTabPanelComponent extends EventEmitterMixin(LitElement) {
+export default class IgcTabPanelComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._selected = false;
         this._disabled = false;
     }
+    static { this.tagName = 'igc-tab-panel'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcTabPanelComponent);
     }
@@ -56,9 +58,6 @@ class IgcTabPanelComponent extends EventEmitterMixin(LitElement) {
         return html ` <slot></slot> `;
     }
 }
-IgcTabPanelComponent.tagName = 'igc-tab-panel';
-IgcTabPanelComponent.styles = [styles];
-export default IgcTabPanelComponent;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcTabPanelComponent.prototype, "selected", null);

package/{components → dist/components}/tabs/tabs-component.js

@@ -20,7 +20,7 @@ import IgcTabHeaderComponent from './tab-header-component.js';
 import IgcTabPanelComponent from './tab-panel-component.js';
 import { styles } from './tabs-component.css.js';
 let NEXT_TAB_ID = 0;
-class IgcTabsComponent extends EventEmitterMixin(LitElement) {
+export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._parentUseFixedSize = false;
@@ -71,6 +71,8 @@ class IgcTabsComponent extends EventEmitterMixin(LitElement) {
             this.emitEvent('igcMaximizeMinimizeFocus');
         };
     }
+    static { this.tagName = 'igc-tabs-component'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcTabsComponent, IgcTabHeaderComponent, IgcTabPanelComponent, IgcContextMenuComponent, IgcButtonDMComponent, IgcIconDMComponent);
     }
@@ -409,9 +411,6 @@ class IgcTabsComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcTabsComponent.tagName = 'igc-tabs-component';
-IgcTabsComponent.styles = [styles];
-export default IgcTabsComponent;
 __decorate([
     state()
 ], IgcTabsComponent.prototype, "_hasHiddenTabs", void 0);