this.ghostElement = el}\r\n />}\r\n );\r\n }\r\n}\r\n","%truncate-text {\r\n ::slotted(span) {\r\n max-width: calc(100% - 18px);\r\n @include ellipsis();\r\n }\r\n}\r\n\r\n:host {\r\n @include ellipsis();\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n height: 100%;\r\n padding: em(8px);\r\n user-select: none;\r\n color: $tab-text;\r\n background: $tab-background;\r\n border: {\r\n style: solid;\r\n color: $tab-border-color;\r\n top-width: 1px;\r\n left-width: 1px;\r\n bottom-width: 0;\r\n right-width: 1px;\r\n };\r\n font-size: em(12px);\r\n line-height: 2;\r\n outline-style: none;\r\n\r\n igc-icon-component svg {\r\n width: 17px;\r\n height: 17px;\r\n }\r\n\r\n * + igc-button-component {\r\n margin-left: em(8px);\r\n }\r\n}\r\n\r\n:host([part~='selected']) {\r\n color: $tab-text-active;\r\n background: $tab-background-active;\r\n border-color: $tab-border-color-active;\r\n}\r\n\r\n:host([part~='bottom']) {\r\n border: {\r\n top-width: 0;\r\n bottom-width: 1px;\r\n }\r\n\r\n &:first-of-type {\r\n border-left: none;\r\n }\r\n}\r\n\r\n:host([part~='active']) {\r\n box-shadow: inset 0 -2px 0 0 $active-color;\r\n color: $active-color;\r\n\r\n igc-icon-component {\r\n color: var(--igc-icon-active-color, $active-color);\r\n }\r\n}\r\n\r\n:host([part~='hover-preview-close']:hover) {\r\n @extend %truncate-text;\r\n}\r\n\r\n:host([part~='hover-preview-close'][part~='selected']) {\r\n @extend %truncate-text;\r\n}\r\n\r\n:host([part~='disabled']) {\r\n pointer-events: none;\r\n color: $disabled-color;\r\n}\r\n\r\n:host(:hover) {\r\n [part*='floating'] {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n[part*='floating'] {\r\n position: absolute;\r\n inset-inline-end: 0;\r\n background: inherit;\r\n opacity: 0;\r\n transition: opacity .1s ease-out;\r\n}\r\n\r\n[part*='selected'] {\r\n opacity: 1;\r\n}\r\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, Watch, h } from '@stencil/core';\r\n\r\nimport { Utils } from '../../utils/utils';\r\nimport { IgcTabHeadersPosition } from '../dockmanager/dockmanager.interfaces';\r\nimport { IgcDockManagerResourceStrings } from '../dockmanager/dockmanager.public-interfaces';\r\nimport { IGNORE_DRAG, IgcDragEventArguments, IgcDragMoveEventArguments, IgcDragService, IgcDragStartEventArguments } from '../drag-drop/drag.service';\r\n\r\n/**\r\n * @hidden\r\n */\r\n@Component({\r\n tag: 'igc-tab-header-component',\r\n styleUrl: 'tab-header-component.scss',\r\n shadow: true,\r\n scoped: false\r\n})\r\nexport class IgcTabHeaderComponent {\r\n @Prop({ mutable: true }) dragService: IgcDragService;\r\n\r\n @Element() element: HTMLIgcTabHeaderComponentElement;\r\n\r\n @Prop() selected = false;\r\n @Prop() hovered = false;\r\n @Prop() position = IgcTabHeadersPosition.top;\r\n @Prop() iconName: string;\r\n @Prop() header: string;\r\n @Prop() isActive: boolean;\r\n @Prop() resourceStrings: IgcDockManagerResourceStrings;\r\n @Prop() forcedDrag: boolean;\r\n @Prop() disabled = false;\r\n @Prop() showHeaderIconOnHover: 'closeOnly' | 'moreOptionsOnly' | 'all';\r\n\r\n @Event() dragStarted: EventEmitter
;\r\n @Event() dragMoved: EventEmitter;\r\n @Event() dragEnded: EventEmitter;\r\n @Event() tabMouseDown: EventEmitter;\r\n @Event() iconClicked: EventEmitter;\r\n @Event() iconKeyDown: EventEmitter;\r\n @Event() elementConnected: EventEmitter;\r\n @Event() elementDisconnected: EventEmitter;\r\n\r\n connectedCallback() {\r\n this.dragService = new IgcDragService(this.element);\r\n\r\n this.dragService.dragStart = args => {\r\n this.dragStarted.emit(args);\r\n };\r\n this.dragService.dragMove = args => {\r\n this.dragMoved.emit(args);\r\n };\r\n this.dragService.dragEnd = args => {\r\n this.dragEnded.emit(args);\r\n };\r\n\r\n this.forceDragging();\r\n this.elementConnected.emit(this.element);\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.dragService) {\r\n this.dragService.destroy();\r\n }\r\n this.elementDisconnected.emit(this.element);\r\n }\r\n\r\n @Listen('mousedown')\r\n handleMouseDown(ev: MouseEvent) {\r\n const iconSlot = this.element.shadowRoot.querySelector('div[part*=\"tab-header-more-options\"]');\r\n const isIconClicked = ev.composedPath().filter(p => p === iconSlot).length > 0;\r\n this.tabMouseDown.emit({ showHeaderIconOnHover: this.showHeaderIconOnHover, isIconClicked });\r\n }\r\n\r\n @Listen('mouseenter')\r\n handleMouseEnter() {\r\n this.hovered = true;\r\n }\r\n\r\n @Listen('mouseleave')\r\n handleMouseLeave() {\r\n this.hovered = false;\r\n }\r\n\r\n @Watch('forcedDrag')\r\n forcedDragChanged() {\r\n this.forceDragging();\r\n }\r\n\r\n private forceDragging() {\r\n if (this.forcedDrag) {\r\n this.dragService.forceDragging();\r\n }\r\n }\r\n\r\n @Watch('isActive')\r\n @Watch('selected')\r\n @Watch('hovered')\r\n activeChanged() {\r\n const queryButton = 'tab-header-close-button';\r\n const button = this.element.querySelector(`[part^=${queryButton}]`);\r\n const parts = Utils.partNameMap({\r\n [queryButton]: true,\r\n active: this.isActive,\r\n selected: this.selected,\r\n hovered: this.hovered\r\n });\r\n\r\n button?.setAttribute('part', parts);\r\n }\r\n\r\n private iconClick = (ev: MouseEvent) => {\r\n this.iconClicked.emit(ev);\r\n }\r\n\r\n private keyDown = (ev: KeyboardEvent) => {\r\n this.iconKeyDown.emit(ev);\r\n }\r\n\r\n private renderCloseButton() {\r\n const showHeaderIconOnHover = this.showHeaderIconOnHover && (this.showHeaderIconOnHover === 'closeOnly' || this.showHeaderIconOnHover === 'all');\r\n const shouldShowButton = this.selected || showHeaderIconOnHover;\r\n const pointerEvents = (this.selected && !this.disabled) || this.showHeaderIconOnHover ? 'all' : 'none';\r\n\r\n return (\r\n shouldShowButton && \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n private renderMoreOptionsButton() {\r\n const showHeaderIconOnHover = this.showHeaderIconOnHover && (this.showHeaderIconOnHover === 'moreOptionsOnly' || this.showHeaderIconOnHover === 'all');\r\n const shouldShowButton = this.selected || showHeaderIconOnHover;\r\n const pointerEvents = (this.selected && !this.disabled) || this.showHeaderIconOnHover ? 'all' : 'none';\r\n\r\n return (\r\n shouldShowButton && \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n render() {\r\n const showCloseOnHover = this.iconName === 'close' && this.showHeaderIconOnHover && (this.showHeaderIconOnHover === 'closeOnly' || this.showHeaderIconOnHover === 'all');\r\n const showMoreOptionsOnHover = this.iconName !== 'close' && this.showHeaderIconOnHover && (this.showHeaderIconOnHover === 'moreOptionsOnly' || this.showHeaderIconOnHover === 'all');\r\n\r\n const parts = Utils.partNameMap({\r\n 'tab-header': true,\r\n top: this.position === IgcTabHeadersPosition.top,\r\n active: this.isActive,\r\n selected: this.selected,\r\n disabled: this.disabled,\r\n 'hover-preview-close': showCloseOnHover,\r\n 'hover-preview-options': showMoreOptionsOnHover,\r\n bottom: this.position === IgcTabHeadersPosition.bottom,\r\n });\r\n\r\n const tabParts = Utils.partNameMap({\r\n 'tab-header-more-options': true,\r\n 'floating': !this.selected && (showCloseOnHover || showMoreOptionsOnHover),\r\n 'selected': this.selected\r\n });\r\n\r\n const exportparts = Utils.partNameMap({\r\n 'tab-header-close-button': true,\r\n 'tab-header-more-options': true,\r\n 'tab-header-more-options-button': true,\r\n 'floating': true,\r\n 'selected': true,\r\n 'active': true\r\n }, ',');\r\n\r\n return (\r\n \r\n \r\n {\r\n this.iconName &&\r\n \r\n {this.iconName === 'close' ? this.renderCloseButton() : this.renderMoreOptionsButton()}\r\n
\r\n }\r\n );\r\n }\r\n}\r\n",":host {\r\n display: block;\r\n box-sizing: border-box;\r\n overflow: auto;\r\n flex-grow: 1;\r\n height: 100%;\r\n color: $pane-content-text;\r\n background-color: $pane-content-background;\r\n}\r\n\r\n:host([part~='disabled']) {\r\n pointer-events: none;\r\n color: $disabled-color;\r\n}\r\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\n\r\nimport { Utils } from '../../utils/utils';\r\n\r\n/**\r\n * @hidden\r\n */\r\n@Component({\r\n tag: 'igc-tab-panel-component',\r\n styleUrl: 'tab-panel-component.scss',\r\n shadow: true,\r\n scoped: false\r\n})\r\nexport class IgcTabPanelComponent {\r\n private emitSelectedChanged = false;\r\n\r\n @Element() element: HTMLElement;\r\n\r\n @Prop() selected = false;\r\n @Prop() disabled = false;\r\n\r\n @Watch('selected')\r\n selectedPropChange() {\r\n this.emitSelectedChanged = true;\r\n }\r\n\r\n @Event()\r\n selectedChanged: EventEmitter;\r\n\r\n componentDidUpdate() {\r\n if (this.emitSelectedChanged) {\r\n this.emitSelectedChanged = false;\r\n this.selectedChanged.emit(this.selected);\r\n }\r\n }\r\n\r\n render() {\r\n const parts = Utils.partNameMap({\r\n 'tab-panel': true,\r\n selected: this.selected,\r\n disabled: this.disabled\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n}\r\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';\r\n\r\nimport { Utils } from '../../utils/utils';\r\nimport { IGC_DEFAULT_PANE_SIZE, IgcContextMenuMetadata, IgcContextMenuOrientation, IgcTabHeadersPosition } from '../dockmanager/dockmanager.interfaces';\r\nimport { IgcDockManagerResourceStrings } from '../dockmanager/dockmanager.public-interfaces';\r\n\r\n/**\r\n * @hidden\r\n */\r\nlet NEXT_TAB_ID = 0;\r\n\r\n/**\r\n * @hidden\r\n */\r\n@Component({\r\n tag: 'igc-tabs-component',\r\n styleUrl: 'tabs-component.scss',\r\n shadow: true,\r\n scoped: false\r\n})\r\nexport class IgcTabsComponent {\r\n private forcedUpdate = false;\r\n private selectionOrder: string[] = [];\r\n\r\n @Element() el!: HTMLIgcTabsComponentElement;\r\n\r\n @State() hiddenTabsMenuMeta: IgcContextMenuMetadata;\r\n @State() hasHiddenTabs = false;\r\n\r\n @Prop() size: number;\r\n @Prop() maximized: boolean;\r\n @Prop() allowMaximize = true;\r\n @Prop() tabHeadersPosition: IgcTabHeadersPosition = IgcTabHeadersPosition.top;\r\n @Prop({ mutable: true }) selectedIndex: number;\r\n @Prop() hasHeaders = true;\r\n @Prop() showHiddenTabsMenu = true;\r\n @Prop() resourceStrings: IgcDockManagerResourceStrings;\r\n @Prop() contentIds: string[] = [];\r\n\r\n @Event() maximize: EventEmitter;\r\n @Event() maximizeMinimizeFocus: EventEmitter;\r\n\r\n @Watch('selectedIndex')\r\n selectedIndexPropertyChanged(newValue: number) {\r\n this.handleSelectedIndexChanged(newValue);\r\n this.selectedIndexChanged.emit(newValue);\r\n }\r\n\r\n @Event({ bubbles: false }) selectedIndexChanged: EventEmitter;\r\n @Event({ bubbles: false }) hiddenTabSelected: EventEmitter;\r\n @Event({ bubbles: false }) selectedTabOutOfView: EventEmitter;\r\n @Event() rendered: EventEmitter;\r\n\r\n componentWillLoad() {\r\n this.hiddenTabsMenuMeta = null;\r\n this.handleSelectedIndexChanged(this.selectedIndex);\r\n this.checkForActivePane();\r\n }\r\n\r\n componentWillUpdate() {\r\n this.updateSelection();\r\n }\r\n\r\n updateSelection() {\r\n const headers = this.tabHeaders;\r\n\r\n // if any header is removed - delete its id from selection order & update selected index\r\n const missingMatchIndex = this.selectionOrder.findIndex(s => headers.findIndex(h => h.id === s) < 0);\r\n if (missingMatchIndex > -1) {\r\n this.selectionOrder.splice(missingMatchIndex, 1);\r\n const newSelectedIndex = headers.findIndex(h => h.id === this.selectionOrder[this.selectionOrder.length - 1]);\r\n this.selectedIndex = newSelectedIndex > -1 ? newSelectedIndex : 0;\r\n }\r\n\r\n const currentSelectionId = headers[this.selectedIndex]?.id;\r\n const existingMatchIndex = this.selectionOrder.indexOf(currentSelectionId);\r\n if (existingMatchIndex > -1) {\r\n this.selectionOrder.splice(existingMatchIndex, 1);\r\n }\r\n\r\n if (currentSelectionId) {\r\n this.selectionOrder.push(currentSelectionId);\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n this.rendered.emit();\r\n }\r\n\r\n componentDidLoad() {\r\n this.setTabsAttributes();\r\n\r\n this.tabHeadersDiv = this.el.shadowRoot.querySelector('div.tabs');\r\n\r\n if (this.tabHeadersDiv) {\r\n this.resizeObserver.observe(this.tabHeadersDiv);\r\n }\r\n }\r\n\r\n componentDidUpdate() {\r\n if (this.forcedUpdate) {\r\n this.forcedUpdate = false;\r\n this.checkForActivePane();\r\n }\r\n\r\n this.setHasHiddenTabs();\r\n }\r\n\r\n private setTabsAttributes() {\r\n const tabHeaders = this.tabHeaders;\r\n const tabPanels = this.tabPanels;\r\n\r\n for (let i = 0; i < tabHeaders.length; i++) {\r\n if (!tabHeaders[i].getAttribute('id')) {\r\n const tabHeaderId = `tab-item-${NEXT_TAB_ID}`;\r\n const tabPanelId = `tab-panel-${NEXT_TAB_ID++}`;\r\n\r\n tabPanels[i].setAttribute('id', tabPanelId);\r\n tabHeaders[i].setAttribute('id', tabHeaderId);\r\n\r\n tabPanels[i].setAttribute('aria-labelledby', tabHeaderId);\r\n tabHeaders[i].setAttribute('aria-controls', tabPanelId);\r\n }\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver.disconnect();\r\n }\r\n\r\n private tabHeadersDiv: HTMLElement;\r\n private resizeObserver = new ResizeObserver(this.tabHeadersDivResized.bind(this));\r\n\r\n private slotChanged = () => {\r\n this.setTabsAttributes();\r\n this.updateSelection();\r\n this.handleSelectedIndexChanged(this.selectedIndex);\r\n this.forceUpdate();\r\n }\r\n\r\n private forceUpdate() {\r\n this.forcedUpdate = true;\r\n forceUpdate(this);\r\n }\r\n\r\n\r\n private get tabPanels() {\r\n return Array.from(this.el.querySelectorAll('igc-tab-panel-component'));\r\n }\r\n\r\n private get tabHeaders() {\r\n return Array.from(this.el.querySelectorAll('igc-tab-header-component'));\r\n }\r\n\r\n private get hiddenTabHeaders() {\r\n const containerTop = this.tabHeaders[0]?.offsetTop;\r\n return this.tabHeaders.filter(t => t.offsetTop !== containerTop);\r\n }\r\n\r\n private handleSelectedIndexChanged(newValue: number) {\r\n const tabHeaders = this.tabHeaders;\r\n const tabPanels = this.tabPanels;\r\n\r\n tabHeaders.forEach((t, i) => {\r\n t.selected = i === newValue;\r\n });\r\n\r\n tabPanels.forEach((t, i) => {\r\n t.selected = i === newValue;\r\n });\r\n }\r\n\r\n @Listen('tabMouseDown')\r\n handleTabMouseDown(ev: CustomEvent) {\r\n const tabHeader = ev.target as HTMLIgcTabHeaderComponentElement;\r\n const tabHeaders = this.tabHeaders;\r\n const headerIndex = tabHeaders.indexOf(tabHeader);\r\n if (headerIndex >= 0 && (!ev.detail.showHeaderIconOnHover || !ev.detail.isIconClicked)) {\r\n this.selectedIndex = headerIndex;\r\n }\r\n }\r\n\r\n private onTabKeyDown = (ev: KeyboardEvent) => {\r\n const tabHeaders = this.tabHeaders;\r\n if (Utils.isAltPressed(ev) || Utils.isControlOrMetaPressed(ev) || ev.shiftKey) {\r\n return;\r\n }\r\n\r\n if (ev.key === 'ArrowRight') {\r\n for (let i = this.selectedIndex; i < tabHeaders.length - this.hiddenTabHeaders.length - 1; i++) {\r\n if (!tabHeaders[i + 1].disabled) {\r\n this.selectedIndex = i + 1;\r\n tabHeaders[i + 1].focus();\r\n return;\r\n }\r\n }\r\n } else if (ev.key === 'ArrowLeft') {\r\n for (let i = this.selectedIndex; i > 0; i--) {\r\n if (!tabHeaders[i - 1].disabled) {\r\n this.selectedIndex = i - 1;\r\n tabHeaders[i - 1].focus();\r\n return;\r\n }\r\n }\r\n }\r\n }\r\n\r\n private tabHeadersDivResized() {\r\n const containerTop = this.tabHeaders[0]?.offsetTop;\r\n const selectedTabHeader = this.tabHeaders.filter(t => t.selected)[0];\r\n if (selectedTabHeader?.offsetTop !== containerTop) {\r\n const index = this.selectedIndex;\r\n this.selectedTabOutOfView.emit(index);\r\n }\r\n\r\n this.setHasHiddenTabs();\r\n }\r\n\r\n private setHasHiddenTabs() {\r\n this.hasHiddenTabs = this.hiddenTabHeaders.length > 0;\r\n }\r\n\r\n private checkForActivePane() {\r\n const activeTabHeader = this.tabHeaders.filter(t => t.isActive);\r\n if (activeTabHeader.length > 0) {\r\n const hiddenActiveTabIndex = this.hiddenTabHeaders.indexOf(activeTabHeader[0]);\r\n const activeTabIndex = this.tabHeaders.indexOf(activeTabHeader[0]);\r\n if (hiddenActiveTabIndex >= 0) {\r\n this.selectedTabOutOfView.emit(activeTabIndex);\r\n } else if (activeTabIndex >= 0) {\r\n this.selectedIndex = activeTabIndex;\r\n }\r\n }\r\n }\r\n\r\n private handleHiddenTabsMenuClick(ev: CustomEvent) {\r\n const button = ev.currentTarget as HTMLElement;\r\n\r\n const items = this.hiddenTabHeaders.map(header => ({\r\n displayText: header.header,\r\n disabled: header.disabled,\r\n iconName: null,\r\n clickHandler: () => {\r\n const index = this.tabHeaders.indexOf(header);\r\n this.hiddenTabSelected.emit(index);\r\n }\r\n }));\r\n\r\n this.hiddenTabsMenuMeta = { target: button, menuItems: items, position: 'end' };\r\n }\r\n\r\n private handleContextMenuClosed() {\r\n this.hiddenTabsMenuMeta = null;\r\n }\r\n\r\n private maximizeButtonClick = () => {\r\n this.maximize.emit();\r\n }\r\n\r\n private handleMaximizeMinimizeFocus = () => {\r\n this.maximizeMinimizeFocus.emit();\r\n }\r\n\r\n private renderHiddenTabsMenu() {\r\n return this.hiddenTabsMenuMeta && (\r\n \r\n );\r\n }\r\n\r\n private renderTabHeaders(top: boolean) {\r\n const classes = {\r\n 'tabs': true,\r\n 'tabs--top': top,\r\n 'tabs--bottom': !top\r\n };\r\n\r\n const commontParts = { top, bottom: !top };\r\n\r\n const tabStripParts = Utils.partNameMap({ 'tab-strip-area': true, ...commontParts });\r\n const tabStripActionsParts = Utils.partNameMap({\r\n 'tab-strip-actions': true,\r\n ...commontParts\r\n });\r\n\r\n return (\r\n \r\n );\r\n }\r\n\r\n private renderMoreTabsButton() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n private renderMaximizeButton() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n private renderMinimizeButton() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n render() {\r\n const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;\r\n const top = this.tabHeadersPosition === IgcTabHeadersPosition.top;\r\n const bottom = this.tabHeadersPosition === IgcTabHeadersPosition.bottom;\r\n const contentIds = this.contentIds.join(' ');\r\n const parts = \"tabs-container \" + contentIds;\r\n\r\n const tabsContentParts = Utils.partNameMap({ 'tabs-content': true, document: top });\r\n const exportParts = Utils.partNameMap({\r\n 'tab-strip-area': true,\r\n 'tab-strip-actions': true,\r\n 'tabs-content': true,\r\n 'tabs-more-button': true,\r\n 'tabs-maximize-button': true,\r\n 'tabs-minimize-button': true,\r\n 'context-menu-content: tabs-more-menu-content': true,\r\n 'context-menu-item: tabs-more-menu-item': true,\r\n document: top,\r\n top,\r\n bottom\r\n }, ',');\r\n\r\n return (\r\n \r\n {top && this.renderTabHeaders(top)}\r\n \r\n \r\n
\r\n {bottom && this.renderTabHeaders(top)}\r\n {this.renderHiddenTabsMenu()}\r\n \r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n min-width: 0px;\r\n min-height: 0px;\r\n}\r\n\r\n.tabs {\r\n display: flex;\r\n overflow: hidden;\r\n min-height: $tab-header-height;\r\n max-height: $tab-header-height;\r\n background: $dock-background;\r\n\r\n &--top {\r\n padding-top: $tab-header-padding;\r\n\r\n .tab-headers-container--wrapped {\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n &--bottom {\r\n padding-bottom: $tab-header-padding;\r\n\r\n .tab-headers-container--wrapped {\r\n flex-wrap: wrap-reverse;\r\n }\r\n }\r\n}\r\n\r\n.content {\r\n flex-grow: 1;\r\n height: 100%;\r\n overflow: auto;\r\n}\r\n\r\n.tab-headers-container {\r\n width: 100%;\r\n display: flex;\r\n overflow: hidden;\r\n}\r\n\r\n\r\n.tab-header-icon-container {\r\n display: flex;\r\n flex-grow: 1;\r\n justify-content: flex-end;\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n}\r\n",":host {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n user-select: none;\r\n font-size: 12px;\r\n padding: 4px;\r\n margin-right: 4px;\r\n color: $pinned-header-text;\r\n background: $pinned-header-background;\r\n cursor: pointer;\r\n outline-style: none;\r\n}\r\n\r\n:host([part~='vertical']) {\r\n writing-mode: tb-rl;\r\n margin-right: unset;\r\n margin-bottom: 4px;\r\n}\r\n\r\n:host([part~='active']) {\r\n color: $active-color;\r\n box-shadow: inset 0 -2px 0 0 $active-color;\r\n}\r\n\r\n:host([part~='vertical'][part~='active']) {\r\n box-shadow: inset 2px 0 0 0 $active-color;\r\n}\r\n\r\n:host([part~='disabled']) {\r\n pointer-events: none;\r\n color: $disabled-color;\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\nimport { Utils } from '../../../utils/utils';\r\nimport { IgcUnpinnedLocation } from '../dockmanager.public-interfaces';\r\n\r\n/**\r\n * @hidden\r\n */\r\n@Component({\r\n tag: 'igc-unpinned-pane-header-component',\r\n styleUrl: 'unpinned-pane-header-component.scss',\r\n shadow: true,\r\n scoped: false\r\n})\r\nexport class IgcUnpinnedPaneHeaderComponent {\r\n @Prop() location: IgcUnpinnedLocation;\r\n @Prop() isActive: boolean;\r\n @Prop() disabled = false;\r\n\r\n render() {\r\n const isHorizontal = this.location === IgcUnpinnedLocation.top || this.location === IgcUnpinnedLocation.bottom;\r\n const isLeft = this.location === IgcUnpinnedLocation.left;\r\n const isRight = this.location === IgcUnpinnedLocation.right;\r\n const isTop = this.location === IgcUnpinnedLocation.top;\r\n const isBottom = this.location === IgcUnpinnedLocation.bottom;\r\n\r\n const parts = Utils.partNameMap({\r\n 'unpinned-pane-header': true,\r\n horizontal: isHorizontal,\r\n vertical: !isHorizontal,\r\n start: isLeft || isTop,\r\n end: isRight || isBottom,\r\n active: this.isActive,\r\n disabled: this.disabled,\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\nimport { addResourceStrings } from '../..';\r\nimport {\r\n IgcActivePaneEventArgs, IgcContentPane, IgcDockManagerComponent, IgcDockManagerLayout, IgcDockManagerPane, IgcDockManagerPaneType, IgcDockManagerResourceStrings, IgcDockingIndicatorPosition, IgcFloatingPaneResizeEventArgs, IgcFloatingPaneResizeMoveEventArgs, IgcPaneCloseEventArgs, IgcPaneDragActionType,\r\n IgcPaneDragOverEventArgs, IgcPanePinnedEventArgs, IgcPaneScrollEventArgs, IgcSplitPaneOrientation, IgcTabGroupPane, IgcUnpinnedLocation\r\n} from '../dockmanager/dockmanager.public-interfaces';\r\n\r\n/**\r\n * @hidden\r\n */\r\nconst customResourceStrings: IgcDockManagerResourceStrings = {\r\n close: '[Custom]Close',\r\n pin: '[Custom]Pin',\r\n unpin: '[Custom]Unpin',\r\n maximize: '[Custom]Maximize',\r\n minimize: '[Custom]Minimize',\r\n moreOptions: '[Custom]More options'\r\n};\r\naddResourceStrings('custom', customResourceStrings);\r\n\r\n/**\r\n * @hidden\r\n */\r\n@Component({\r\n tag: 'sample-component',\r\n styleUrl: 'sample-component.css',\r\n shadow: false,\r\n scoped: true\r\n})\r\nexport class SampleComponent {\r\n @Prop({ mutable: true })\r\n hiddenPanes: IgcContentPane[] = [];\r\n\r\n dockManager: IgcDockManagerComponent;\r\n\r\n private teamExplorerPane: IgcContentPane = {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Team Explorer',\r\n contentId: 'content7',\r\n allowMaximize: true\r\n };\r\n\r\n private unpinnedToolboxPane: IgcContentPane = {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Toolbox',\r\n contentId: 'content1',\r\n isPinned: false,\r\n unpinnedHeaderId: \"toolboxHeader\"\r\n };\r\n\r\n private unpinnedTeamExplorerPane: IgcContentPane = {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Team Explorer',\r\n contentId: 'content14',\r\n isPinned: false,\r\n unpinnedHeaderId: \"teamExplorerHeader\"\r\n };\r\n\r\n layout1: IgcDockManagerLayout = {\r\n rootPane: {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.horizontal,\r\n panes: [\r\n this.unpinnedToolboxPane,\r\n this.unpinnedTeamExplorerPane,\r\n {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.vertical,\r\n size: 300,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.documentHost,\r\n size: 300,\r\n rootPane: {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.horizontal,\r\n allowEmpty: true,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.tabGroupPane,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'MainWindow.xaml',\r\n contentId: 'content2',\r\n documentOnly: true,\r\n // allowMaximize: false,\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'MainWindow.xaml.cs',\r\n contentId: 'content6',\r\n documentOnly: true,\r\n allowFloating: false\r\n }\r\n ]\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'App.xaml',\r\n contentId: 'content8',\r\n allowMaximize: true,\r\n acceptsInnerDock: false\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.horizontal,\r\n allowEmpty: true,\r\n panes: []\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Error List',\r\n contentId: 'content3',\r\n allowDocking: false,\r\n allowFloating: false,\r\n allowMaximize: false\r\n }]\r\n },\r\n {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.vertical,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.tabGroupPane,\r\n size: 200,\r\n allowEmpty: true,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Solution Explorer',\r\n headerId: 'header1',\r\n tabHeaderId: 'tabHeader1',\r\n unpinnedHeaderId: 'unpinnedHeader1',\r\n contentId: 'content4',\r\n allowMaximize: false\r\n },\r\n this.teamExplorerPane\r\n ]\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Properties',\r\n contentId: 'content5',\r\n unpinnedLocation: IgcUnpinnedLocation.top,\r\n allowFloating: false,\r\n allowMaximize: false\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n floatingPanes: [\r\n {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.horizontal,\r\n floatingLocation: { x: 50, y: 100 },\r\n floatingWidth: 200,\r\n floatingHeight: 100,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Notifications',\r\n contentId: 'content9',\r\n allowDocking: false\r\n }\r\n ],\r\n // floatingResizable: true\r\n },\r\n {\r\n type: IgcDockManagerPaneType.splitPane,\r\n allowEmpty: true,\r\n orientation: IgcSplitPaneOrientation.horizontal,\r\n floatingLocation: { x: 250, y: 350 },\r\n floatingWidth: 300,\r\n floatingHeight: 200,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Floating 1',\r\n contentId: 'content10',\r\n acceptsInnerDock: false\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Floating 2',\r\n contentId: 'content11',\r\n allowMaximize: false\r\n }\r\n ]\r\n },\r\n {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.horizontal,\r\n floatingLocation: { x: 750, y: 200 },\r\n floatingWidth: 300,\r\n floatingHeight: 200,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.tabGroupPane,\r\n allowEmpty: true,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Floating Tab 1',\r\n contentId: 'content12'\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Floating Tab 2',\r\n contentId: 'content13'\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n layout2: IgcDockManagerLayout = {\r\n rootPane: {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.horizontal,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.vertical,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n contentId: 'content1',\r\n header: 'Content Pane 1'\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n contentId: 'content2',\r\n header: 'Unpinned Pane 1',\r\n isPinned: false\r\n }\r\n ]\r\n },\r\n {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.vertical,\r\n size: 200,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.documentHost,\r\n size: 200,\r\n rootPane: {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.horizontal,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.tabGroupPane,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Document 1',\r\n contentId: 'content3'\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'Document 2',\r\n contentId: 'content4'\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n contentId: 'content5',\r\n header: 'Unpinned Pane 2',\r\n isPinned: false\r\n }\r\n ]\r\n },\r\n {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.vertical,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.tabGroupPane,\r\n size: 200,\r\n // selectedIndex: 1,\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n contentId: 'content6',\r\n header: 'Tab 1'\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n contentId: 'content7',\r\n header: 'Tab 2'\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n contentId: 'content8',\r\n header: 'Tab 3'\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n contentId: 'content9',\r\n header: 'Tab 4'\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n contentId: 'content10',\r\n header: 'Tab 5'\r\n }\r\n\r\n ]\r\n },\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n contentId: 'content11',\r\n header: 'Content Pane 2'\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n floatingPanes: [\r\n {\r\n type: IgcDockManagerPaneType.splitPane,\r\n orientation: IgcSplitPaneOrientation.horizontal,\r\n floatingHeight: 150,\r\n floatingWidth: 250,\r\n floatingLocation: { x: 300, y: 200 },\r\n panes: [\r\n {\r\n type: IgcDockManagerPaneType.contentPane,\r\n contentId: 'content12',\r\n header: 'Floating Pane'\r\n }\r\n ]\r\n }\r\n ]\r\n };\r\n\r\n layout: IgcDockManagerLayout = this.layout1;\r\n\r\n private hiddenPanesSelect: HTMLSelectElement;\r\n private hideOnCloseCheckbox: HTMLInputElement;\r\n private savedLayout: string;\r\n private logEnabled = false;\r\n\r\n private saveLayout() {\r\n this.savedLayout = JSON.stringify(this.dockManager.layout);\r\n }\r\n\r\n private loadLayout() {\r\n this.dockManager.layout = JSON.parse(this.savedLayout);\r\n }\r\n\r\n private setActivePane() {\r\n // this.dockManager.activePane = this.teamExplorerPane;\r\n this.dockManager.activePane = this.unpinnedToolboxPane;\r\n }\r\n\r\n private id = 100;\r\n private newId: string;\r\n\r\n private addPane() {\r\n this.newId = `content${this.id++}`;\r\n const newDiv = this.createElement(this.newId, 'input');\r\n this.dockManager.appendChild(newDiv);\r\n\r\n this.layout.floatingPanes[1].panes.push({\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'NewPane',\r\n contentId: this.newId\r\n });\r\n\r\n this.dockManager.layout = { ...this.layout };\r\n }\r\n\r\n private addTab() {\r\n this.findElement(this.layout.rootPane, IgcDockManagerPaneType.tabGroupPane);\r\n\r\n this.newId = `content${this.id++}`;\r\n const newDiv = this.createElement(this.newId, 'button');\r\n this.dockManager.appendChild(newDiv);\r\n\r\n const tabGroupPane = this.foundElem[0] as IgcTabGroupPane;\r\n tabGroupPane.panes.push({\r\n type: IgcDockManagerPaneType.contentPane,\r\n header: 'NewTab',\r\n contentId: this.newId\r\n });\r\n\r\n this.dockManager.layout = { ...this.layout };\r\n }\r\n\r\n private disableContentPane() {\r\n this.findElement(this.layout.rootPane, IgcDockManagerPaneType.tabGroupPane);\r\n\r\n const tabGroupPane = this.foundElem[0] as IgcTabGroupPane;\r\n tabGroupPane.panes[0].disabled = true;\r\n this.dockManager.layout = { ...this.layout };\r\n }\r\n\r\n private toggleProximityDock() {\r\n this.dockManager.proximityDock = !this.dockManager.proximityDock;\r\n }\r\n\r\n private focusPane() {\r\n this.dockManager.focusPane('content12');\r\n }\r\n\r\n private foundElem: IgcDockManagerPane[] = [];\r\n private findElement(pane: IgcDockManagerPane, type: IgcDockManagerPaneType) {\r\n if (!pane) { return; }\r\n\r\n if (pane.type === type) {\r\n this.foundElem.push(pane);\r\n }\r\n\r\n if (pane.type === IgcDockManagerPaneType.tabGroupPane || pane.type === IgcDockManagerPaneType.splitPane) {\r\n for (const c of pane.panes) {\r\n this.findElement(c, type);\r\n }\r\n }\r\n\r\n if (pane.type === IgcDockManagerPaneType.documentHost) {\r\n this.findElement(pane.rootPane, type);\r\n }\r\n }\r\n\r\n private showPane() {\r\n const index = this.hiddenPanesSelect.selectedIndex;\r\n\r\n if (index >= 0) {\r\n this.hiddenPanes[index].hidden = false;\r\n this.hiddenPanes.splice(index, 1);\r\n this.hiddenPanes = [...this.hiddenPanes];\r\n this.dockManager.layout = { ...this.dockManager.layout };\r\n }\r\n }\r\n\r\n private showAllPanes() {\r\n if (this.hiddenPanes.length > 0) {\r\n for (const pane of this.hiddenPanes) {\r\n pane.hidden = false;\r\n }\r\n this.hiddenPanes = [];\r\n this.dockManager.layout = { ...this.dockManager.layout };\r\n }\r\n }\r\n\r\n private toggleInBoundaries() {\r\n this.dockManager.containedInBoundaries = !this.dockManager.containedInBoundaries;\r\n }\r\n\r\n private createElement(content: string, typeOfElement: string): HTMLElement {\r\n const someContent = document.createTextNode(content);\r\n let elem: HTMLElement;\r\n switch (typeOfElement) {\r\n case ('button'):\r\n elem = document.createElement('button');\r\n elem.appendChild(someContent);\r\n break;\r\n case ('input'):\r\n elem = document.createElement('input');\r\n break;\r\n }\r\n\r\n const divContent = document.createElement('div');\r\n divContent.appendChild(elem ? elem : someContent);\r\n divContent.setAttribute('slot', content);\r\n divContent.setAttribute('style', 'width: 100%; height: 100%;');\r\n\r\n return divContent;\r\n }\r\n\r\n private handlePaneClose(event: CustomEvent) {\r\n this.log(event);\r\n\r\n if (this.hideOnCloseCheckbox.checked) {\r\n for (const pane of event.detail.panes) {\r\n pane.hidden = true;\r\n this.hiddenPanes.splice(0, 0, pane);\r\n this.hiddenPanes = [...this.hiddenPanes];\r\n }\r\n event.preventDefault();\r\n }\r\n\r\n // const panes = event.detail.panes;\r\n // const confirmed = confirm(`Are you sure you want to close panes '${panes.map(p => p.header).join(', ')}'?`);\r\n // // event.detail.panes = [panes[0]];\r\n // if (confirmed) {\r\n // for (const pane of panes) {\r\n // const contentChild = this.dockManager.querySelector(`[slot=${pane.contentId}]`);\r\n // this.dockManager.removeChild(contentChild);\r\n // }\r\n // } else {\r\n // event.preventDefault();\r\n // }\r\n }\r\n\r\n private handlePaneScroll(event: CustomEvent) {\r\n this.log(event);\r\n\r\n // // check if the pane content is scrolled to bottom\r\n // let scrolledToBottom = false;\r\n // const contentEl = event.detail.contentElement;\r\n // if (contentEl.scrollHeight - contentEl.scrollTop - contentEl.clientHeight < 1)\r\n // {\r\n // scrolledToBottom = true;\r\n // }\r\n // this.log(\"Scrolled to bottom: \" + scrolledToBottom);\r\n }\r\n\r\n private handlePinnedToggle(event: CustomEvent) {\r\n this.log(event);\r\n // if (event.detail.sourcePane.type === IgcDockManagerPaneType.contentPane) {\r\n // event.detail.panes = [event.detail.sourcePane];\r\n // }\r\n // event.preventDefault();\r\n }\r\n\r\n private handleActivePaneChanged(event: CustomEvent) {\r\n this.log(event);\r\n }\r\n\r\n private handleDragStart(event: CustomEvent) {\r\n this.log(event);\r\n\r\n // event.preventDefault();\r\n }\r\n\r\n private handleDragOver(event: CustomEvent) {\r\n const args = event.detail;\r\n this.log(args.action);\r\n\r\n if (args.action.type === IgcPaneDragActionType.dockPane) {\r\n if (args.action.dockingIndicator.position === IgcDockingIndicatorPosition.left) {\r\n // args.isValid = false;\r\n }\r\n } else if (args.action.type === IgcPaneDragActionType.floatPane) {\r\n // args.action.height = Math.min(args.action.height, 500);\r\n // args.isValid = false;\r\n } else if (args.action.type === IgcPaneDragActionType.moveFloatingPane) {\r\n // if (args.action.newLocation.y < 0) {\r\n // args.isValid = false;\r\n // }\r\n }\r\n }\r\n\r\n private handleDragEnd(event: CustomEvent) {\r\n this.log(event);\r\n }\r\n\r\n private handleSplitterResizeStart(event: CustomEvent) {\r\n this.log(event, { ...event.detail });\r\n // event.preventDefault();\r\n }\r\n\r\n private handleSplitterResizeEnd(event: CustomEvent) {\r\n this.log(event, { ...event.detail });\r\n }\r\n\r\n private handleFloatingPaneResizeStart(event: CustomEvent) {\r\n this.log(event, { ...event.detail });\r\n // event.preventDefault();\r\n }\r\n\r\n private handleFloatingPaneResizeMove(event: CustomEvent) {\r\n this.log(event, { ...event.detail });\r\n }\r\n\r\n private handleFloatingPaneResizeEnd(event: CustomEvent) {\r\n this.log(event, { ...event.detail });\r\n }\r\n\r\n private handleLayoutChange(event: CustomEvent) {\r\n this.log(event);\r\n }\r\n\r\n // private getCustomResourceStrings(): IgcDockManagerResourceStrings {\r\n // const customResourceStrings: IgcDockManagerResourceStrings = {\r\n // close: '[Custom]Close',\r\n // pin: '[Custom]Pin',\r\n // unpin: '[Custom]Unpin',\r\n // maximize: '[Custom]Maximize',\r\n // minimize: '[Custom]Minimize',\r\n // moreOptions: '[Custom]More options'\r\n // };\r\n\r\n // return customResourceStrings;\r\n // }\r\n\r\n private log(message?: any, ...optionalParams: any[]) {\r\n if (this.logEnabled) {\r\n console.log(message, optionalParams);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n this.saveLayout()}>Save Layout \r\n this.loadLayout()}>Load Layout \r\n this.setActivePane()}>Set Active Pane \r\n this.addPane()}>Add Floating Pane \r\n this.addTab()}>Add Tab Pane \r\n this.disableContentPane()}>Disable Tab Pane \r\n this.focusPane()}>Focus Pane \r\n this.toggleProximityDock()}>Toggle Proximity Dock \r\n this.hideOnCloseCheckbox = el}\r\n />\r\n Hide on close \r\n Hidden Panes: \r\n this.hiddenPanesSelect = el}\r\n >\r\n {this.hiddenPanes.map(p => {\r\n return (\r\n {p.header} \r\n );\r\n })}\r\n \r\n this.showPane()}>Show Pane \r\n this.showAllPanes()}>Show All Panes \r\n this.toggleInBoundaries()}>Toggle In Boundaries \r\n
\r\n this.dockManager = el}\r\n // allowFloatingPanesResize={false}\r\n showHeaderIconOnHover={'closeOnly'}\r\n // contextMenuPosition='start'\r\n // allowInnerDock={false}\r\n // proximityDock={true}\r\n // showPaneHeaders='onHoverOnly'\r\n >\r\n \r\n Solution Explorer \r\n H \r\n
\r\n \r\n Solution Explorer \r\n T \r\n
\r\n \r\n Solution Explorer \r\n U \r\n
\r\n\r\n Y \r\n {/* X \r\n Y \r\n ... \r\n ︿ \r\n ﹀ \r\n P \r\n U \r\n ≣
\r\n S */}\r\n\r\n Content 1
\r\n \r\n Tests \r\n
\r\n Content 3
\r\n Content 4
\r\n Content 5
\r\n Content 6
\r\n Content 7
\r\n Content 8
\r\n Content 9
\r\n \r\n Test \r\n
\r\n \r\n \r\n
\r\n \r\n
Content 12
\r\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\r\n
\r\n Content 13
\r\n Content 14
\r\n\r\n \r\n [U] Toolbox \r\n
\r\n \r\n [U] Team Explorer \r\n
\r\n\r\n \r\n );\r\n }\r\n}\r\n",":host {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n}\r\n\r\n/* igc-dockmanager {\r\n background-color: gray;\r\n}\r\n\r\nigc-dockmanager::part(pane-header) {\r\n background-color: white;\r\n}\r\n\r\nigc-dockmanager::part(splitter) {\r\n flex: 0 0 15px;\r\n pointer-events: none;\r\n visibility: hidden;\r\n}\r\n\r\nigc-dockmanager::part(splitter-base) {\r\n background: transparent;\r\n pointer-events: none;\r\n}\r\n\r\nigc-dockmanager::part(splitter-base)::after {\r\n content: none;\r\n}\r\n\r\nigc-dockmanager::part(content-pane) {\r\n border-radius: 10px;\r\n}\r\n\r\nigc-dockmanager::part(context-menu) {\r\n background-color: wheat;\r\n}\r\n\r\nigc-dockmanager::part(floating-window) {\r\n border-color: red;\r\n}\r\n\r\nigc-dockmanager::part(pane-header) {\r\n display: none;\r\n}\r\n\r\nigc-dockmanager::part(document-tab-header) {\r\n display: none;\r\n}\r\n\r\nigc-dockmanager::part(tab-strip-area) {\r\n display: none;\r\n}\r\n\r\nigc-dockmanager::part(document-panel) {\r\n padding: 10px;\r\n}\r\n\r\nigc-dockmanager::part(root-docking-indicator) {\r\n background-color: red;\r\n}\r\n\r\nigc-dockmanager::part(docking-indicator) {\r\n background-color: chocolate;\r\n}\r\n\r\nigc-dockmanager::part(docking-preview) {\r\n background-color: chocolate;\r\n}\r\n\r\nigc-dockmanager::part(unpinned-pane-header) {\r\n background-color: lightgreen;\r\n}\r\n\r\nigc-dockmanager::part(pane-header-actions) {\r\n background-color: lightgreen;\r\n}\r\n\r\nigc-dockmanager::part(floating-pane-header-actions) {\r\n background-color: lightpink;\r\n}\r\n\r\nigc-dockmanager::part(floating-window-header-actions) {\r\n visibility: collapse;\r\n pointer-events: none;\r\n}\r\n\r\nigc-dockmanager::part(tab-strip-actions) {\r\n visibility: collapse;\r\n pointer-events: none;\r\n} \r\n\r\nigc-dockmanager::part(tabs-more-button) {\r\n color: red;\r\n}\r\n\r\nigc-dockmanager::part(context-menu-item) {\r\n background-color: greenyellow;\r\n}\r\n\r\nigc-dockmanager::part(context-menu-content) {\r\n background-color: coral;\r\n padding: 5px;\r\n}\r\n\r\nigc-dockmanager::part(tabs-more-menu-content) {\r\n background-color: plum;\r\n padding: 5px;\r\n}\r\n\r\nigc-dockmanager::part(tabs-more-menu-item) {\r\n background-color: cyan;\r\n} \r\n\r\nigc-dockmanager::part(content2) {\r\n min-width: 350px;\r\n max-height: 550px;\r\n} \r\n\r\nigc-dockmanager::part(content10) {\r\n min-width: 350px;\r\n max-width: 500px;\r\n min-height: 350px;\r\n}\r\n\r\nigc-dockmanager::part(content11) {\r\n min-width: 350px;\r\n max-width: 500px;\r\n min-height: 350px;\r\n}\r\n*/"],"sourceRoot":""}