igniteui-dockmanager 2.1.0 → 2.1.2

package/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/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/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/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/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/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);