generator.component.html

<div class="pageContainer">
  <nb-card [ngClass]="{webLayout: !global.getGlobalVar('electronAvailable')}" [nbSpinner]="generatorBusy" nbSpinnerStatus="info" nbSpinnerSize="large" nbSpinnerMessage="Please wait...">
    <nb-card-body *ngIf="global.getGlobalVar('appReady')">
      <nb-tabset *ngIf="global.getGlobalVar('generatorSettingsArray') && global.getGlobalVar('generatorSettingsArray').length > 0" #refTabSet class="settingsTabset" fullWidth>
        <nb-tab *ngFor="let tab of getTabList(false); index as tabIndex" [disabled]="!global.generator_tabsVisibilityMap[tab.name]" [tabTitle]="tab.text" [active]="tabIndex === 0" [nbSpinner]="settingsBusy" nbSpinnerStatus="primary" nbSpinnerSize="medium" nbSpinnerMessage="">
          <mat-grid-list #refList [responsiveCols]="{xs: 1, sm: 2, md: 12, lg: 12, xl: 12}" gutterSize="0.5%" [rowHeight]="calculateRowHeight(refList, tab)">
            <mat-grid-tile #refEl *ngFor="let section of tab.sections; index as sectionIndex" [colspan]="getColumnWidth(refEl, tab.sections, sectionIndex, tab.sections.length, section['col_span'] ? section['col_span'] : 0)" [rowspan]="getColumnHeight(refEl, section)">
              <mat-grid-tile-header *ngIf="section.text && section.text.length > 0">
                <h3>{{section.text}}</h3>
              </mat-grid-tile-header>
              <div class="tileContainer" [ngClass]="section.text && section.text.length > 0 ? 'tileContainerWithHeader' : null">
                <div class="tileContent">
                  <p *ngIf="section.subheader && section.subheader.length > 0" class="subheaderLabel" [innerHTML]="section.subheader"></p>
                  <!--Auto Parsed Tabs based on JSON-->
                  <ng-template ngFor let-setting [ngForOf]="section.settings" let-itemIndex="index">
                    <ng-container *ngIf="!settingIsFullyHidden(setting)">
                      <ng-container [ngSwitch]="setting.type">
                        <!--Toggle-->
                        <ng-container *ngSwitchCase="'Checkbutton'">
                          <mat-slide-toggle [disabled]="!settingIsEnabled(setting.name)" labelPosition="after" [(ngModel)]="global.generator_settingsMap[setting.name]" (ngModelChange)="checkVisibility($event, setting, findOption(setting.options, $event))"
                                            [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'hint' : 'noop'" nbPopoverPlacement="right" nbPopoverAdjustment="clockwise">{{setting.text}}</mat-slide-toggle>
                        </ng-container>
                        <!--Radio-->
                        <ng-container *ngSwitchCase="'Radiobutton'">
                          <p class="radioGroupLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name)}">{{setting.text}}</p>
                          <mat-radio-group [disabled]="!settingIsEnabled(setting.name)" labelPosition="after" [(ngModel)]="global.generator_settingsMap[setting.name]" (ngModelChange)="checkVisibility($event, setting, findOption(setting.options, $event))"
                                           [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'hint' : 'noop'" nbPopoverPlacement="top" nbPopoverAdjustment="clockwise">
                            <mat-radio-button *ngFor="let option of setting.options; index as optionIndex" class="radioButton" [value]="option.name">
                              {{option.text}}
                            </mat-radio-button>
                          </mat-radio-group>
                        </ng-container>
                        <!--Combo-->
                        <ng-container *ngSwitchCase="'Combobox'">
                          <span *ngIf="section.is_colors && global.generator_settingsMap[setting.name] === 'Custom Color' && global.generator_customColorMap[setting.name].length > 0" class="comboBoxLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name), 'oneLineComboBox': getColumnCount(refEl) > 2 && (setting.no_line_break || (itemIndex > 0 && section.settings[itemIndex-1].no_line_break)), 'oLCBLabelFirst': getColumnCount(refEl) > 2 && setting.no_line_break, 'oLCBLabelSecond': getColumnCount(refEl) > 2 && itemIndex > 0 && section.settings[itemIndex-1].no_line_break}">{{setting.text}} ({{global.generator_customColorMap[setting.name]}})</span>
                          <span *ngIf="!section.is_colors || global.generator_settingsMap[setting.name] !== 'Custom Color' || global.generator_customColorMap[setting.name].length === 0" class="comboBoxLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name), 'oneLineComboBox': getColumnCount(refEl) > 2 && (setting.no_line_break || (itemIndex > 0 && section.settings[itemIndex-1].no_line_break)), 'oLCBLabelFirst': getColumnCount(refEl) > 2 && setting.no_line_break, 'oLCBLabelSecond': getColumnCount(refEl) > 2 && itemIndex > 0 && section.settings[itemIndex-1].no_line_break}">{{setting.text}}</span>
                          <!--Combobox with Custom Color Picker for Cosmetics-->
                          <ng-container *ngIf="section.is_colors">
                            <div class="colorPickerContainer"
                                 [ngClass]="{'oneLineComboBox oLCBPicker': getColumnCount(refEl) > 2 && (setting.no_line_break || (itemIndex > 0 && section.settings[itemIndex-1].no_line_break))}">
                              <input #refColorPicker [(colorPicker)]="global.generator_customColorMap[setting.name]"
                                     [cpAlphaChannel]="disabled" [cpOutputFormat]="hex" [cpUseRootViewContainer]="true"
                                     [cpAddColorButton]="true" [cpPresetColors]="['#fff', '#000']"
                                     [cpMaxPresetColorsLength]="5"
                                     (colorPickerClose)="afterSettingChange(true)" />
                            </div>
                              <nb-select class="selectXSmall"
                                         [ngClass]="{'oneLineComboBox oLCBSelect': getColumnCount(refEl) > 2 && (setting.no_line_break || (itemIndex > 0 && section.settings[itemIndex-1].no_line_break)), 'select-colors' : getColumnCount(refEl) === 1}"
                                         [disabled]="!settingIsEnabled(setting.name)"
                                         [(selected)]="global.generator_settingsMap[setting.name]"
                                         (selectedChange)="checkVisibility($event, setting, findOption(setting.options, $event), refColorPicker)"
                                         [nbPopover]="tooltipComponent"
                                         [nbPopoverContext]="{tooltip: setting.tooltip}"
                                         [nbPopoverTrigger]="setting.tooltip?.length > 0 && getColumnCount(refEl) > 1 ? 'click' : 'noop'"
                                         [nbPopoverPlacement]="'right'"
                                         [nbPopoverAdjustment]="'horizontal'"
                                         size="xsmall">
                                <nb-option *ngFor="let option of setting.options; index as optionIndex"
                                           [value]="option.name">{{option.text}}</nb-option>
                              </nb-select>
                              <img class="select-info info-icon-colors"
                                   [ngClass]="{disabled: !setting.tooltip}"
                                   *ngIf="getColumnCount(refEl) === 1"
                                   [nbPopover]="tooltipComponent"
                                   [nbPopoverContext]="{tooltip: setting.tooltip}"
                                   [nbPopoverTrigger]="setting.tooltip?.length > 0 ? 'hover' : 'noop'"
                                   [nbPopoverPlacement]="'top'"
                                   [nbPopoverAdjustment]="'vertical'" />
                          </ng-container>
                          <!--Normal Combobox-->
                          <ng-container *ngIf="!section.is_colors">
                              <nb-select class="selectXSmall"
                                         [ngClass]="{'oneLineComboBox oLCBSelect': getColumnCount(refEl) > 2 && (setting.no_line_break || (itemIndex > 0 && section.settings[itemIndex-1].no_line_break))}"
                                         [disabled]="!settingIsEnabled(setting.name)"
                                         [(selected)]="global.generator_settingsMap[setting.name]"
                                         (selectedChange)="checkVisibility($event, setting, findOption(setting.options, $event))"
                                         [nbPopover]="tooltipComponent"
                                         [nbPopoverContext]="{tooltip: setting.tooltip}"
                                         [nbPopoverTrigger]="setting.tooltip?.length > 0 && getColumnCount(refEl) > 1 ? 'click' : 'noop'"
                                         [nbPopoverPlacement]="'right'"
                                         [nbPopoverAdjustment]="'horizontal'"
                                         size="xsmall">
                                <nb-option *ngFor="let option of setting.options; index as optionIndex"
                                           [value]="option.name">{{option.text}}</nb-option>
                              </nb-select>
                              <img class="select-info"
                                   [ngClass]="{disabled: !setting.tooltip}"
                                   *ngIf="getColumnCount(refEl) === 1"
                                   [nbPopover]="tooltipComponent"
                                   [nbPopoverContext]="{tooltip: setting.tooltip}"
                                   [nbPopoverTrigger]="setting.tooltip?.length > 0 ? 'hover' : 'noop'"
                                   [nbPopoverPlacement]="'top'"
                                   [nbPopoverAdjustment]="'vertical'" />
                          </ng-container>
                        </ng-container>
                        <!--Multiple Select-->
                        <ng-container *ngSwitchCase="'MultipleSelect'">
                          <span class="comboBoxLabel" [ngClass]="{
                                'disabled': !settingIsEnabled(setting.name),
                                'oneLineComboBox': getColumnCount(refEl) > 2 && (setting.no_line_break || (itemIndex > 0 && section.settings[itemIndex-1].no_line_break)),
                                'oLCBLabelFirst': getColumnCount(refEl) > 2 && setting.no_line_break,
                                'oLCBLabelSecond': getColumnCount(refEl) > 2 && itemIndex > 0 && section.settings[itemIndex-1].no_line_break
                                }">
                            {{setting.text}}
                          </span>
                          <div class="select-wrapper">
                            <nb-select multiple placeholder="None" class="selectXSmall"
                                       [ngClass]="{'oneLineComboBox oLCBSelect': getColumnCount(refEl) > 2 && setting.no_line_break}"
                                       [disabled]="!settingIsEnabled(setting.name)"
                                       [(selected)]="global.generator_settingsMap[setting.name]"
                                       (selectedChange)="checkVisibility($event, setting, findOption(setting.options, $event))"
                                       [nbPopover]="tooltipComponent"
                                       [nbPopoverContext]="{tooltip: setting.tooltip}"
                                       [nbPopoverTrigger]="setting.tooltip?.length > 0 && getColumnCount(refEl) > 1 ? 'click' : 'noop'"
                                       [nbPopoverPlacement]="'right'"
                                       [nbPopoverAdjustment]="'horizontal'">
                              <nb-select-label *ngIf="global.generator_settingsMap[setting.name].length !== setting.options.length && global.generator_settingsMap[setting.name].length > 2">Selected: {{global.generator_settingsMap[setting.name].length}}</nb-select-label>
                              <nb-select-label *ngIf="global.generator_settingsMap[setting.name].length === setting.options.length">All</nb-select-label>
                              <nb-option *ngFor="let option of setting.options; index as optionIndex" [value]="option.name">{{option.text}}</nb-option>
                            </nb-select>
                            <img class="select-info"
                                 [ngClass]="{disabled: !setting.tooltip}"
                                 *ngIf="getColumnCount(refEl) === 1"
                                 [nbPopover]="tooltipComponent"
                                 [nbPopoverContext]="{tooltip: setting.tooltip}"
                                 [nbPopoverTrigger]="setting.tooltip?.length > 0 ? 'hover' : 'noop'"
                                 [nbPopoverPlacement]="'top'"
                                 [nbPopoverAdjustment]="'vertical'" />
                          </div>
                        </ng-container>
                        <!--Scale-->
                        <ng-container *ngSwitchCase="'Scale'">
                          <span *ngIf="!setting.size || setting.size === 'small' || setting.size === 'medium'" class="numberTextInputLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name)}">{{setting.text}}:</span>
                          <p *ngIf="setting.size === 'full'" class="numberTextInputLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name)}">{{setting.text}}</p>
                          <input class="numberTextInput" [ngClass]="{numberTextInputSmall: setting.size === 'small', numberTextInputMedium: setting.size === 'medium', numberTextInputFull: setting.size === 'full'}" nbInput [disabled]="!settingIsEnabled(setting.name)" type="text" [maxlength]="setting.max.length" fieldSize="small"
                                 (focus)="inputFocusIn(setting.name)" (focusout)="numberInputFocusOut(setting, true)" [(ngModel)]="global.generator_settingsMap[setting.name]" [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'hint' : 'noop'" nbPopoverPlacement="right" nbPopoverAdjustment="counterclockwise">
                          <mat-slider class="scale" [disabled]="!settingIsEnabled(setting.name)" [min]="setting.min" [max]="setting.max" step="1" [(ngModel)]="global.generator_settingsMap[setting.name]"
                                      (ngModelChange)="afterSettingChange()" tickInterval="1" thumbLabel [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'hint' : 'noop'" nbPopoverPlacement="right" nbPopoverAdjustment="counterclockwise"></mat-slider>
                        </ng-container>
                        <!--Text Input-->
                        <ng-container *ngSwitchCase="'Textinput'">
                          <span *ngIf="!setting.size || setting.size === 'small' || setting.size === 'medium'" class="numberTextInputLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name)}">{{setting.text}}:</span>
                          <p *ngIf="setting.size === 'full'" class="numberTextInputLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name)}">{{setting.text}}</p>
                          <input class="numberTextInput" [ngClass]="{numberTextInputSmall: setting.size === 'small', numberTextInputMedium: setting.size === 'medium', numberTextInputFull: setting.size === 'full'}" nbInput [disabled]="!settingIsEnabled(setting.name)" type="text" [maxlength]="setting.max_length ? setting.max_length : 260" fieldSize="small"
                                 (focus)="inputFocusIn(setting.name)" (focusout)="inputFocusOut(setting.name, false)" [(ngModel)]="global.generator_settingsMap[setting.name]" [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'hint' : 'noop'" nbPopoverPlacement="right" nbPopoverAdjustment="counterclockwise">
                        </ng-container>
                        <!--Text Box-->
                        <ng-container *ngSwitchCase="'Textbox'">
                          <span *ngIf="!setting.size || setting.size === 'small' || setting.size === 'medium'" class="numberTextInputLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name)}">{{setting.text}}</span>
                          <p *ngIf="setting.size === 'full'" class="numberTextInputLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name)}">{{setting.text}}</p>
                        </ng-container>
                        <!--Number-->
                        <ng-container *ngSwitchCase="'Numberinput'">
                          <span *ngIf="!setting.size || setting.size === 'small' || setting.size === 'medium'" class="numberTextInputLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name)}">{{setting.text}}:</span>
                          <p *ngIf="setting.size === 'full'" class="numberTextInputLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name)}">{{setting.text}}</p>
                          <input class="numberTextInput" [ngClass]="{numberTextInputSmall: setting.size === 'small', numberTextInputMedium: setting.size === 'medium', numberTextInputFull: setting.size === 'full'}" nbInput [disabled]="!settingIsEnabled(setting.name)" type="text" [maxlength]="setting.max ? setting.max.length : 6" fieldSize="small"
                                 (focus)="inputFocusIn(setting.name)" (focusout)="numberInputFocusOut(setting, true)" [(ngModel)]="global.generator_settingsMap[setting.name]" [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'hint' : 'noop'" nbPopoverPlacement="right" nbPopoverAdjustment="counterclockwise">
                        </ng-container>
                        <!--Button-->
                        <ng-container *ngSwitchCase="'Button'">
                          <button class="settingButton" [disabled]="!settingIsEnabled(setting.name)" nbButton status="info" size="small" (click)="this[setting.function]()">{{setting.text}}</button>
                        </ng-container>
                        <!--File Select-->
                        <ng-container *ngSwitchCase="'Fileinput'">
                          <p class="ioInputLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name)}">{{setting.text}}</p>
                          <!--Electron-->
                          <ng-container *ngIf="global.getGlobalVar('electronAvailable')">
                            <input class="ioInput" nbInput [disabled]="!settingIsEnabled(setting.name)" type="text" maxlength="260" fieldSize="small"
                                   (focus)="inputFocusIn(setting.name)" (focusout)="inputFocusOut(setting.name, false)" [(ngModel)]="global.generator_settingsMap[setting.name]"
                                   [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'hint' : 'noop'" nbPopoverPlacement="top" nbPopoverAdjustment="clockwise">
                            <button class="ioInputBrowseButton" [disabled]="!settingIsEnabled(setting.name)" nbButton status="info" size="small" (click)="browseForFile(setting)">Browse</button>
                          </ng-container>
                          <!--Web-->
                          <ng-container *ngIf="!global.getGlobalVar('electronAvailable')">
                            <!--Visible: Drag Enabled-->
                            <ng-container *ngIf="settingIsEnabled(setting.name)">
                              <input class="ioInputWeb" nbInput [disabled]="!settingIsEnabled(setting.name)" readonly type="text" maxlength="260" fieldSize="small" [(ngModel)]="getVariableType(global.generator_settingsMap[setting.name]) === 'string' ? global.generator_settingsMap[setting.name] : global.generator_settingsMap[setting.name].name"
                                     (ngModelChange)="afterSettingChange()" [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'hint' : 'noop'" nbPopoverPlacement="top" nbPopoverAdjustment="clockwise" ngfDrop [(file)]="global.generator_settingsMap[setting.name]">
                            </ng-container>
                            <!--Not Visible: Drag Disabled-->
                            <ng-container *ngIf="!settingIsEnabled(setting.name)">
                              <input class="ioInputWeb" nbInput [disabled]="!settingIsEnabled(setting.name)" readonly type="text" maxlength="260" fieldSize="small" [(ngModel)]="getVariableType(global.generator_settingsMap[setting.name]) === 'string' ? global.generator_settingsMap[setting.name] : global.generator_settingsMap[setting.name].name"
                                     (ngModelChange)="afterSettingChange()" [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'hint' : 'noop'" nbPopoverPlacement="top" nbPopoverAdjustment="clockwise">
                            </ng-container>
                            <button class="ioInputBrowseButton" [disabled]="!settingIsEnabled(setting.name)" nbButton status="info" size="small" ngfSelect [(file)]="global.generator_settingsMap[setting.name]">Browse</button>
                            <button class="ioInputBrowseButton" [disabled]="!settingIsEnabled(setting.name)" nbButton status="info" size="small" (click)="global.generator_settingsMap[setting.name] = ''">Clear</button>
                          </ng-container>
                        </ng-container>
                        <!--Directory Select-->
                        <ng-container *ngSwitchCase="'Directoryinput'">
                          <p class="ioInputLabel" [ngClass]="{'disabled': !settingIsEnabled(setting.name)}">{{setting.text}}</p>
                          <!--Electron-->
                          <ng-container *ngIf="global.getGlobalVar('electronAvailable')">
                            <input class="ioInput" nbInput [disabled]="!settingIsEnabled(setting.name)" type="text" maxlength="260" fieldSize="small"
                                   (focus)="inputFocusIn(setting.name)" (focusout)="inputFocusOut(setting.name, false)" [(ngModel)]="global.generator_settingsMap[setting.name]"
                                   [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'hint' : 'noop'" nbPopoverPlacement="top" nbPopoverAdjustment="clockwise">
                            <button class="ioInputBrowseButton" [disabled]="!settingIsEnabled(setting.name)" nbButton status="info" size="small" (click)="browseForDirectory(setting)">Browse</button>
                          </ng-container>
                          <!--Web-->
                          <ng-container *ngIf="!global.getGlobalVar('electronAvailable')">
                            <input class="ioInputWeb" nbInput [disabled]="!settingIsEnabled(setting.name)" readonly type="text" maxlength="260" fieldSize="small" [(ngModel)]="getVariableType(global.generator_settingsMap[setting.name]) === 'string' ? global.generator_settingsMap[setting.name] : global.generator_settingsMap[setting.name].name"
                                   (ngModelChange)="afterSettingChange()" [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'hint' : 'noop'" nbPopoverPlacement="top" nbPopoverAdjustment="clockwise" (dragover)="onDirectoryDragOverWeb($event, setting)" (drop)="onDirectoryDropWeb($event, setting)">

                            <!--Desktop supports directory picker, mobile only a file picker-->
                            <ng-container *ngIf="global.getGlobalVar('webSupportDirectoryPicker')">
                              <input #refHiddenDirectoryInput class="ioHiddenInputWeb" type="file" webkitdirectory multiple (change)="onDirectorySelectedWeb($event, setting)">
                              <button class="ioInputBrowseButton" [disabled]="!settingIsEnabled(setting.name)" nbButton status="info" size="small" (click)="refHiddenDirectoryInput.click()">Browse</button>
                            </ng-container>
                            <ng-container *ngIf="!global.getGlobalVar('webSupportDirectoryPicker')">
                              <input #refHiddenDirectoryInput class="ioHiddenInputWeb" type="file" multiple (change)="onDirectorySelectedWeb($event, setting)">
                              <button class="ioInputBrowseButton" [disabled]="!settingIsEnabled(setting.name)" nbButton status="info" size="small" (click)="refHiddenDirectoryInput.click()">Browse</button>
                            </ng-container>

                            <button class="ioInputBrowseButton" [disabled]="!settingIsEnabled(setting.name)" nbButton status="info" size="small" (click)="global.generator_settingsMap[setting.name] = ''">Clear</button>
                          </ng-container>
                          </ng-container>
                        <ng-container *ngSwitchCase="'Presetinput'">
                          <div class="select-wrapper">
                            <nb-select #refPresetSelect
                                       class="selectXSmall"
                                       [disabled]="!settingIsEnabled(setting.name)"
                                       [(selected)]="global.generator_settingsMap[setting.name]"
                                       [nbPopover]="tooltipComponent"
                                       [nbPopoverContext]="{tooltip: setting.tooltip}"
                                       [nbPopoverTrigger]="setting.tooltip?.length > 0 && getColumnCount(refEl) > 1 ? 'click' : 'noop'"
                                       [nbPopoverPlacement]="'start-top'"
                                       [nbPopoverAdjustment]="'horizontal'"
                                       size="xsmall">
                              <nb-option *ngFor="let presetKey of getPresetArray(); index as presetIndex"
                                         [value]="presetKey">{{presetKey}}</nb-option>
                            </nb-select>
                            <img class="select-info"
                                 [ngClass]="{disabled: !setting.tooltip}"
                                 *ngIf="getColumnCount(refEl) === 1"
                                 [nbPopover]="tooltipComponent"
                                 [nbPopoverContext]="{tooltip: setting.tooltip}"
                                 [nbPopoverTrigger]="setting.tooltip?.length > 0 ? 'hover' : 'noop'"
                                 [nbPopoverPlacement]="'top'"
                                 [nbPopoverAdjustment]="'vertical'" />
                          </div>
                          <button class="presetButton" [disabled]="!settingIsEnabled(setting.name)" nbButton status="info" size="small" (click)="loadPreset()">Load</button>
                          <button class="presetButton" [disabled]="!settingIsEnabled(setting.name)" nbButton status="info" size="small" (click)="savePreset(refPresetSelect)">Save</button>
                          <button class="presetButton" [disabled]="!settingIsEnabled(setting.name)" nbButton status="info" size="small" (click)="deletePreset()">Remove</button>
                        </ng-container>
                        <!--SearchBox-->
                        <ng-container *ngSwitchCase="'SearchBox'">
                          <ootr-gui-listbox [disabled]="!settingIsEnabled(setting.name)" [source]="setting.options" [(destination)]="global.generator_settingsMap[setting.name]" (destinationChange)="checkVisibility($event, setting)"
                                       height="100%" key="name" display="text" filter="true" [tagFilter]="setting.tags && setting.tags.length > 0 ? setting.tags : null" [tooltipComponent]="tooltipComponent" tooltip="tooltip" [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: setting.tooltip}" [nbPopoverTrigger]="setting.tooltip && setting.tooltip.length > 0 ? 'click' : 'noop'" nbPopoverPlacement="right" nbPopoverAdjustment="counterclockwise">
                          </ootr-gui-listbox>
                        </ng-container>
                      </ng-container>
                      <!--Padding-->
                      <div *ngIf="getNextVisibleSetting(section.settings, itemIndex + 1) && !setting.no_line_break" class="settingPadding" [ngClass]="{'settingCBPadding': setting.type !== 'Checkbutton' && getNextVisibleSetting(section.settings, itemIndex + 1).type === 'Checkbutton'}"></div>
                    </ng-container>
                  </ng-template>
                </div>
              </div>
            </mat-grid-tile>
          </mat-grid-list>
        </nb-tab>
      </nb-tabset>
      <div class="tabsetPadding"></div>
      <!--Static Footer Tabset-->
      <nb-tabset #refTabFooter class="footerTabset" (changeTab)="changeFooterTabSelection($event)" [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: '\'' + generateFromSeedTabTitle + '\': Generate a fresh seed with your provided settings.<br><br>\'' + generateFromFileTabTitle + '\': Use your pre-existing patch file to generate your ROM.'}" [nbPopoverTrigger]="global.getGlobalVar('electronAvailable') || global.getGlobalVar('appType') === 'patcher' || global.getGlobalVar('appType') === 'patcher_only' ? 'noop' : 'hint'" nbPopoverPlacement="top" nbPopoverAdjustment="clockwise">
        <nb-tab *ngIf="global.getGlobalVar('appType') === 'generator'" [tabTitle]="generateFromSeedTabTitle" active>
          <p class="footerInputLabel">Settings String</p>
          <!--Electron-->
          <ng-container *ngIf="global.getGlobalVar('electronAvailable')">
            <input class="footerInput" nbInput type="text" maxlength="2000" fieldSize="small" (focus)="inputFocusIn('settings_string')" (focusout)="inputFocusOut('settings_string', true)" [(ngModel)]="global.generator_settingsMap['settings_string']">
            <button class="footerButton" nbButton status="info" size="small" (click)="copySettingsString()">Copy</button>
            <button class="footerButton" nbButton status="info" size="small" (click)="importSettingsString()">Import</button>
            <!--Padding-->
            <div class="settingPadding"></div>
            <p class="footerInputLabel">Seed</p>
            <input class="footerInput" nbInput type="text" maxlength="260" fieldSize="small" [(ngModel)]="seedString">
            <!--Padding-->
            <div class="tabsetPadding"></div>
            <button class="footerGenerateButton" nbButton fullWidth status="success" [disabled]="!generateSeedButtonEnabled" (click)="generateSeed()">Generate!</button>
          </ng-container>
          <!--Web-->
          <ng-container *ngIf="!global.getGlobalVar('electronAvailable')">
            <input class="footerInputShort" nbInput type="text" maxlength="2000" fieldSize="small" (focus)="inputFocusIn('settings_string')" (focusout)="inputFocusOut('settings_string', true)" [(ngModel)]="global.generator_settingsMap['settings_string']">
            <button class="footerButton" nbButton status="info" size="small" (click)="copySettingsString()">Copy</button>
            <button class="footerButton" nbButton status="info" size="small" (click)="settingsBusy = true; getSettingsString()">Get</button>
            <button class="footerButton" nbButton status="info" size="small" (click)="importSettingsString()">Import</button>
            <!--Padding-->
            <div class="settingPadding"></div>
            <p class="footerInputLabel">Seed</p>
            <input class="footerInputShort" nbInput type="text" maxlength="260" fieldSize="small" [(ngModel)]="seedString">
            <!--Padding-->
            <div class="tabsetPadding"></div>
            <ng-container>
              <button class="footerGenerateButtonNormalSmall" nbButton status="success" [disabled]="!generateSeedButtonEnabled" (click)="generateSeed()">Generate Seed!</button>
              <button class="footerGenerateButtonRaceSmall" nbButton status="info" [disabled]="!generateSeedButtonEnabled" (click)="generateSeed(false, true)">Generate Race Seed!</button>
            </ng-container>
          </ng-container>
        </nb-tab>
        <nb-tab [tabTitle]="generateFromFileTabTitle" [active]="global.getGlobalVar('appType') !== 'generator'">
          <!--Electron-->
          <ng-container *ngIf="global.getGlobalVar('electronAvailable')">
            <p class="footerInputLabel">Patch File</p>
            <input class="footerInput" nbInput type="text" maxlength="260" fieldSize="small" (focus)="inputFocusIn('patch_file')" (focusout)="inputFocusOut('patch_file', true)" [(ngModel)]="global.generator_settingsMap['patch_file']">
            <button class="footerButtonPatchFileBrowse" nbButton status="info" size="small" (click)="browseForPatchFile()">Select File</button>
            <!--Padding-->
            <div class="settingPadding"></div>
            <mat-slide-toggle labelPosition="after" [(ngModel)]="global.generator_settingsMap['repatch_cosmetics']" (ngModelChange)="updateCosmeticsCheckboxChange($event)" [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: repatchCosmeticsCheckboxTooltipPatch}" [nbPopoverTrigger]="'hint'" nbPopoverPlacement="right" nbPopoverAdjustment="clockwise">{{repatchCosmeticsCheckboxText}}</mat-slide-toggle>
            <!--Padding-->
            <div class="tabsetPadding"></div>
            <button class="footerGenerateButton" nbButton fullWidth status="success" [disabled]="!generateSeedButtonEnabled" (click)="generateSeed(true)">Generate!</button>
          </ng-container>
          <!--Web-->
          <ng-container *ngIf="!global.getGlobalVar('electronAvailable')">
            <!--Generator-->
            <ng-container *ngIf="global.getGlobalVar('appType') === 'generator'">
              <p class="footerInputLabel">Patch File</p>
              <input class="footerInputWeb" nbInput readonly type="text" maxlength="260" fieldSize="small" [(ngModel)]="getVariableType(global.generator_settingsMap['patch_file']) === 'string' ? global.generator_settingsMap['patch_file'] : global.generator_settingsMap['patch_file'].name" (ngModelChange)="afterSettingChange(true)" ngfDrop [(file)]="global.generator_settingsMap['patch_file']">
              <button class="footerButtonPatchFileBrowse" nbButton status="info" size="small" ngfSelect [(file)]="global.generator_settingsMap['patch_file']">Select File</button>
              <button class="footerButtonPatchFileBrowse" nbButton status="info" size="small" (click)="global.generator_settingsMap['patch_file'] = ''">Clear</button>
              <!--Padding-->
              <div class="settingPadding"></div>
              <mat-slide-toggle labelPosition="after" [(ngModel)]="global.generator_settingsMap['repatch_cosmetics']" (ngModelChange)="updateCosmeticsCheckboxChange($event)" [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: repatchCosmeticsCheckboxTooltipPatch}" [nbPopoverTrigger]="'hint'" nbPopoverPlacement="right" nbPopoverAdjustment="clockwise">{{repatchCosmeticsCheckboxText}}</mat-slide-toggle>
              <mat-slide-toggle labelPosition="after" [(ngModel)]="global.generator_settingsMap['web_persist_in_cache']" (ngModelChange)="afterSettingChange(true)">Persist Files in Cache</mat-slide-toggle>
              <!--Padding-->
              <div class="tabsetPadding"></div>
              <button class="footerGenerateButton" nbButton fullWidth status="success" [disabled]="!generateSeedButtonEnabled" (click)="patchROM()">Patch ROM!</button>
            </ng-container>
            <!--Patcher-->
            <ng-container *ngIf="global.getGlobalVar('appType') === 'patcher' || global.getGlobalVar('appType') === 'patcher_only'">
              <mat-slide-toggle *ngIf="global.getGlobalVar('appType') === 'patcher'" labelPosition="after" [(ngModel)]="global.generator_settingsMap['repatch_cosmetics']" (ngModelChange)="updateCosmeticsCheckboxChange($event)" [nbPopover]="tooltipComponent" [nbPopoverContext]="{tooltip: repatchCosmeticsCheckboxTooltipSeedPageWeb}" [nbPopoverTrigger]="'hint'" nbPopoverPlacement="right" nbPopoverAdjustment="clockwise">{{repatchCosmeticsCheckboxText}}</mat-slide-toggle>
              <mat-slide-toggle labelPosition="after" [(ngModel)]="global.generator_settingsMap['web_persist_in_cache']" (ngModelChange)="afterSettingChange(true)">Persist Files in Cache</mat-slide-toggle>
              <!--Padding-->
              <div class="tabsetPadding"></div>
              <button class="footerGenerateButton" nbButton fullWidth status="success" [disabled]="!generateSeedButtonEnabled" (click)="patchROM()">Patch ROM!</button>
            </ng-container>
          </ng-container>
        </nb-tab>
      </nb-tabset>
    </nb-card-body>
  </nb-card>
</div>