<div [ngSwitch]="type" >
    <!-- Smart Grid Item -->
    <smart-grid
        *ngSwitchCase="'grid'"
        [smart-instance-name]="config.instanceName"
        [smart-object-name]="config.objectName"
        [smart-virtual-scrolling]="config.virtualScrolling"
        [smart-data-source]="config.dataSource"
        [smart-grid-layout]="config.gridLayout"
        [smart-tableio-source]="config.tableIoSource"
        [disable-text-selection]="config.disableTextSelection"
        [filterable]="config.filterable"
        [ngStyle]="config.settings.style"
        [ngClass]="config.settings.classList">
    </smart-grid>

    <!-- Smart Viewer Item -->
    <smart-viewer
        *ngSwitchCase="'viewer'"
        [smart-instance-name]="config.instanceName"
        [smart-object-name]="config.objectName"
        [smart-data-source]="config.dataSource"
        [smart-tableio-source]="config.tableIoSource"
        [smart-viewer-layout]="config.viewerLayout"
        [smart-viewer-settings]="config.settings || {}"
        [ngStyle]="config.settings?.style || {}"
        [ngClass]="config.settings?.classList || {}"
        [focusOnAdd]="config.focusOnAdd"
        [focusOnCopy]="config.focusOnCopy">
    </smart-viewer>

    <!-- Smart Toolbar Item -->
    <smart-toolbar
        *ngSwitchCase="'toolbar'"
        [smart-instance-name]="config.instanceName"
        [smart-object-name]="config.objectName"
        [toolbarStyle]="config.settings.style"
        [ngClass]="config.settings.classList">
            <ng-container *ngFor="let button of config.buttons">
                
                <smart-toolbar-button 
                    *ngIf="button.length !== undefined" 
                    [itemId]="button"
                    [label]="button">
                </smart-toolbar-button>
            
                <smart-toolbar-button
                    *ngIf="button.buttonType === 'button' || button.buttonType === 'command'"
                    [role]="button.buttonType === 'command' ? 'command' : null"
                    [action]="button.buttonAction"
                    [form]="button.buttonForm"
                    [itemId]="button.buttonName"
                    [tooltip]="button.buttonTooltip"
                    [image]="button.buttonImage"
                    [icon]="button.buttonIcon"
                    [label]="button.buttonLabel">
                </smart-toolbar-button>
                <smart-toolbar-combo-button
                    *ngIf="button.buttonType === 'combo'"
                    [itemId]="button.buttonName"
                    [listItems]="button.listItems">
                </smart-toolbar-combo-button>
                <smart-toolbar-separator
                    *ngIf="button.buttonType === 'separator'">
                </smart-toolbar-separator>
                <smart-toolbar-item-renderer 
                    *ngIf="button.buttonType === 'custom'" 
                    [componentId]="button.placeholderId" 
                    [componentContext]="button.context">
                </smart-toolbar-item-renderer>
            </ng-container>
    </smart-toolbar>

    <!-- Smart TreeView Item -->
    <smart-tree-view
        *ngSwitchCase="'treeview'"
        [smart-instance-name]="config.instanceName"
        [root-node-type]="config.rootNode"
        [smart-pane-visibility]="config.paneVisibility"
        [root-node-expanded]="config.rootNodeExpanded"
        [max-height]="config.maxHeight"
        [height]="config.height"
        [smart-column-widths]="config.columnWidths"
        [smart-main-column-header]="config.mainColumnHeader"
        [ngStyle]="config.settings.style"
        [ngClass]="config.settings.classList"
        [hide-detail-view]="config.hideDetailView">
    </smart-tree-view>

    <!-- Split Pane Item -->
    <smart-split-pane
        *ngSwitchCase="'splitview'"
        [smart-instance-name]="config.instanceName"
        [smart-object-name]="config.objectName"
        [orientation]="config.orientation"
        [responsiveOrientation]="config.responsiveOrientation"
        [style]="config.settings.style"
        [visibility]="config.visibility"
        [ngClass]="config.settings.classList">
            <div left-pane class="col-12">
                <ng-container *ngIf="!!config.left.rows && !config.left.columns">
                    <div class="row smart-form-row pane-row" *ngFor="let row of config.left.rows">
                        <FormColumn
                            *ngFor="let column of row.items"
                            [class]="column.widthClass"
                            [formItems]="[column]">
                        </FormColumn>
                    </div>
                </ng-container>
                <ng-container *ngIf="!!config.left.columns && !config.left.rows">
                    <div class="row smart-form-row pane-row">
                        <FormColumn 
                            *ngFor="let column of config.left.columns" 
                            [class]="leftColumnsWidthClass" 
                            [formItems]="column.items">
                        </FormColumn>
                    </div>
                </ng-container>
            </div>
            <div right-pane class="col-12">
                <ng-container *ngIf="!!config.right.rows && !config.right.columns">
                    <div class="row smart-form-row pane-row" *ngFor="let row of config.right.rows">
                        <FormColumn
                            *ngFor="let column of row.items"
                            [class]="column.widthClass"
                            [formItems]="[column]">
                        </FormColumn>
                    </div>
                </ng-container>
                <ng-container *ngIf="!!config.right.columns && !config.right.rows">
                    <div class="row smart-form-row pane-row">
                        <FormColumn 
                            *ngFor="let column of config.right.columns" 
                            [class]="rightColumnsWidthClass" 
                            [formItems]="column.items">
                        </FormColumn>
                    </div>
                </ng-container>
            </div>
    </smart-split-pane>

    <smart-filter
        *ngSwitchCase="'filter'"
        [smart-instance-name]="config.instanceName"
        [smart-object-name]="config.objectName"
        [filter-fields-initial]="config.filterFieldsInitial"
        [filter-fields-optional]="config.filterFieldsOptional"
        [smart-filter-style]="config.settings.style"
        [orientation]="config.orientation">
    </smart-filter>
    
    <smart-tab-folder
        *ngSwitchCase="'tabfolder'"
        [smart-instance-name]="config.instanceName"
        [smart-object-name]="config.objectName"
        [smart-tab-folder-pages]="config.pages">
    </smart-tab-folder>
    
    <!-- Template Placeholder -->
    <smart-form-template-renderer
        *ngSwitchCase="'custom'"
        [config]="config">
    </smart-form-template-renderer>

    <smart-frame
        *ngSwitchCase="'frame'"
            [smart-instance-name]="config.instanceName"
            [smart-object-name]="config.objectName"
            [smart-frame-settings]="config.settings || {}"
            [ngClass]="config.settings?.classList || {}"
            [ngStyle]="config.settings?.style || {}"
            [smart-frame-layout]="config.viewerLayout">
    </smart-frame>

    <ng-container *ngSwitchCase="'menu'">

        <smart-accordion-menu 
            *ngIf="config.menuType === 'accordion'" 
            [smart-instance-name]="config.instanceName"
            [menu-structure-code]="config.menuStructureCode">
        </smart-accordion-menu>

        <smart-toolbar-menu 
            *ngIf="config.menuType === 'toolbar'" 
            [smart-instance-name]="config.instanceName"
            [menu-structure-code]="config.menuStructureCode">
        </smart-toolbar-menu>

        <smart-hamburger-menu 
            *ngIf="config.menuType === 'hamburger'"
            [smart-instance-name]="config.instanceName"
            [menu-structure-code]="config.menuStructureCode">
        </smart-hamburger-menu>
        
    </ng-container>

    <CustomComponentTypeRenderer
        *ngSwitchDefault
        [layoutDefinition]="{ componentType: type, componentOptions: config }">
    </CustomComponentTypeRenderer>
</div>

			.smart-form-row.pane-row {
				margin-left: 0;
				margin-right: 0;
			}
			::ng-deep smart-filter {
				display: block !important;
				overflow: auto !important;
			}
			::ng-deep smart-filter div {
				height: 100% !important;
			}
			::ng-deep smart-split-pane {
				height: 100% !important;
			}