<!-- start graph filtering tooltip template -->
<ng-template #tooltip let-tooltipMessage>
  <span class="sz-sdk-tooltip tooltip-left">{{tooltipMessage}}</span>
</ng-template>
<!-- end   graph filtering tooltip template -->
<div class="drawer-wrapper">
  <h3>{{ sectionTitles[0] }}</h3>

  <form [formGroup]="slidersForm">
  <ul class="sliders-list">
    <li class="block-level-src no-text-selection" (mouseenter)="onShowTooltip(ttt1.innerHTML, $event)" (mouseleave)="hideTooltip(ttt1.innerHTML)">
      <label class="checkbox-row">
        <div class="checkbox-row">
          <span>
            Show Match Keys
            <span #ttt1 class="tooltip-text">display match keys on relationship lines</span>
          </span>
          <span class="left-adjusted no-text"><mat-checkbox class="unpadded" [checked]="showLinkLabels" (change)="onCheckboxPrefToggle('showLinkLabels',$event.checked)"></mat-checkbox></span>
        </div>
      </label>
    </li>
    <!--<li class="block-level-src no-text-selection">
      <span class="tooltip">do not show inter-related first level links</span>
      <label>
        <input type="checkbox"
          id="sz-graph-toggle-l1-link" name="sz-graph-toggle-l1-links"
          [checked]="suppressL1InterLinks"
          (change)="onCheckboxPrefToggle('suppressL1InterLinks',$event)">
        Suppress Indirect Links
      </label>
    </li>-->
    <li class="block-level-src no-text-selection" (mouseenter)="onShowTooltip(ttt2.innerHTML, $event)" (mouseleave)="hideTooltip(ttt2.innerHTML)">
      <label class="checkbox-row">
        <div class="checkbox-row">
          <span cclass="has-tooltip">
            Hide Indirect Links
            <span #ttt2 class="tooltip-text">do not show inter-related first level links</span>
          </span>
          <span class="left-adjusted no-text">
            <mat-checkbox class="unpadded" [checked]="suppressL1InterLinks" 
            (change)="onCheckboxPrefToggle('suppressL1InterLinks',$event.checked); onMatchKeyCoreModeToggle($event.checked)"></mat-checkbox></span>
        </div>
      </label>
    </li>
    <li class="block-level-src no-text-selection" (mouseenter)="onShowTooltip(ttt3.innerHTML, $event)" (mouseleave)="hideTooltip(ttt3.innerHTML)">
      <label class="checkbox-row">
        <div class="checkbox-row">
          <span>
            Scope
            <span #ttt3 class="tooltip-text">number of relationship hops away from focused entity</span>
          </span>
          <span class="left-adjusted"><mat-checkbox class="unpadded" [checked]="unlimitedMaxScope" (change)="onMaxUnlimitedChange('unlimitedMaxScope',$event.checked)">unlimited</mat-checkbox></span>
        </div>
      </label>
      <label class="slider-row" *ngIf="!unlimitedMaxScope">
        <mat-slider style="width: 100%" min="1" [max]="buildOutMax" 
        [disabled]="unlimitedMaxScope"
         #ngSlider><input matSliderThumb [value]="buildOut" (change)="onIntParameterChange('buildOut', {source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" /></mat-slider>
        <!--<input type="range" [min]="buildOutMin" [max]="buildOutMax" formControlName="buildOut" [value]="buildOut" 
          (change)="onIntParameterChange('buildOut', getValueFromEventTarget($event))" required>-->
        <span class="intVal">({{ buildOut }})</span>
      </label>
    </li>
    <li class="block-level-src no-text-selection" *ngIf="showMaxEntities" (mouseenter)="onShowTooltip(ttt4.innerHTML, $event)" (mouseleave)="hideTooltip(ttt4.innerHTML)">
      <label class="checkbox-row">
        <div class="checkbox-row">
          <span>
            Max
            <span #ttt4 class="tooltip-text">hard limit on how many entities will be displayed</span>
          </span>
          <span class="left-adjusted"><mat-checkbox class="unpadded" [checked]="unlimitedMaxEntities" (change)="onMaxUnlimitedChange('unlimitedMaxEntities',$event.checked)">unlimited</mat-checkbox></span>
        </div>
      </label>
      <label class="slider-row" *ngIf="!unlimitedMaxEntities" style="display: flex; flex-direction: row; justify-content: space-between; align-content: center; flex-wrap: nowrap; align-items: center;">
        <mat-slider style="width: 100%" min="1" [max]="maxEntitiesLimit + 3" step="3" 
        [disabled]="unlimitedMaxEntities"
         #ngSlider><input matSliderThumb [value]="maxEntities" (change)="onIntParameterChange('maxEntities', {source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" /></mat-slider>
        <!--<input type="range" 
          min="1" [max]="maxEntitiesLimit + 3" 
          [disabled]="true"
          [value]="maxEntities" formControlName="maxEntities" 
          (change)="onIntParameterChange('maxEntities', getValueFromEventTarget($event))" required>-->        
        <span style="white-space: nowrap;">({{ maxEntitiesValueLabel }}) of {{ maxEntitiesLimit }}</span>
      </label>
    </li>
    <li *ngIf="showMaxDegreesOfSeparation" (mouseenter)="onShowTooltip(ttt5.innerHTML, $event)" (mouseleave)="hideTooltip(ttt5.innerHTML)">
      <label>
        <div>
          <span>
            Degrees
            <span #ttt5 class="tooltip-text">maximum degrees of separation between nodes and focus</span>
          </span>
        </div>
        <input type="range" min="1" max="5" [value]="maxDegreesOfSeparation" formControlName="maxDegreesOfSeparation" 
          (change)="onIntParameterChange('maxDegreesOfSeparation', getValueFromEventTarget($event))" required>
        <span class="intVal">({{ maxDegreesOfSeparation }})</span>
      </label>
    </li>
  </ul>
  </form>

  <hr>
  <h3 (mouseenter)="onShowTooltip('Only display entities that are in the selected datasource(s)', $event)" (mouseleave)="hideTooltip()">{{ sectionTitles[1] }}</h3>
  <form [formGroup]="filterByDataSourcesForm">
  <ul class="filters-list">
    <ng-container *ngFor="let ds of filterByDataSourcesData.controls; let i = index">
        <ng-container *ngIf="shouldDataSourceBeDisplayed(dataSources[i].name)">
            <li formArrayName="datasources">
              <label>
                <input type="checkbox" [formControlName]="i" 
                  (change)="onDsFilterChange(dataSources[i].name, $event)">{{dataSources[i].name}}
              </label>
            </li>
        </ng-container>
    </ng-container>
  </ul>
  </form>
  <hr>
  <h3>{{ sectionTitles[2] }}</h3>
  <ul class="colors-list">
    <li class="color-box" (mouseenter)="onShowTooltip('select color(s) for relationship lines that are directly related to the focal entity', $event)" (mouseleave)="hideTooltip()">
      <div class="color-box-placeholder"></div>
      <label>
        <input type="color" [(ngModel)]="linkColor" [style.background-color]="linkColor" (change)="onColorParameterChange('linkColor', getValueFromEventTarget($event))">
        Directly Related
      </label>
    </li>
    <li class="color-box" (mouseenter)="onShowTooltip('select color(s) for relationship lines that are not directly related to the focal entity', $event)" (mouseleave)="hideTooltip()">
      <div class="color-box-placeholder"></div>
      <label>
        <input type="color" [(ngModel)]="indirectLinkColor" [style.background-color]="indirectLinkColor" (change)="onColorParameterChange('indirectLinkColor', getValueFromEventTarget($event))">
        Indirectly Related
      </label>
    </li>
  </ul>

  <hr>
  <h3 class="no-text-selection" (mouseover)="onShowTooltip('select color(s) for entities that are present in selected datasource(s)', $event)" (mouseout)="hideTooltip('select color(s) for entities that are present in selected datasource(s)')">{{ sectionTitles[3] }}</h3>
  <ul cdkDropList class="colors-list" (cdkDropListDropped)="onColorOrderDrop($event)">
    <ng-container *ngFor="let ds of dataSourceColors; let i = index">
      <li class="color-box" *ngIf="shouldDataSourceBeDisplayed(ds.name)" cdkDrag [cdkDragData]="ds.name">
        <div class="color-box-placeholder" *cdkDragPlaceholder></div>
        <label>
          <input type="color" [(ngModel)]="ds.color" [style.background-color]="getDataSourceColor(ds.name)" (change)="onDsColorChange(ds.name, $event.target, $event)">
          {{ds.name}}
        </label>
        <div class="color-box-handle" cdkDragHandle>
          <mat-icon aria-hidden="false" aria-label="drag option">drag_handle</mat-icon>
        </div>
      </li>
    </ng-container>
  </ul>

  <hr>
  <h3>{{ sectionTitles[4] }}</h3>
  <form [formGroup]="colorsMiscForm">
  <ul class="other-colors-list">
    <li class="no-text-selection" (mouseover)="onShowTooltip(ttt6.innerHTML, $event)" (mouseout)="hideTooltip(ttt6.innerHTML)">
      <label>
        <input #queriedNodesColorInput formControlName="queriedEntitiesColor" type="color" [style.background-color]="queriedNodesColorInput.value" 
          (change)="onColorParameterChange('queriedEntitiesColor', getValueFromEventTarget($event))">
        <span class="block-level-src">
          Active/Focused Enitity
          <span #ttt6 class="tooltip-text">The color of the current entity or entities</span>
        </span>
      </label>
    </li>
  </ul>
  </form>
  <div *ngIf="showMatchKeys && showMatchKeyFilters">
    <hr>
    <h3>
      {{ sectionTitles[5] }}
    </h3>
    <form [formGroup]="filterByMatchKeysForm">
    <ul class="filters-list">
      <ng-container *ngFor="let ds of filterByMatchKeysData.controls; let i = index">
          <ng-container *ngIf="shouldMatchKeyBeDisplayed(matchKeys[i].name)">
              <li formArrayName="matchkeys">
                <label>
                  <input type="checkbox" [formControlName]="i" (change)="onMkFilterChange(matchKeys[i].name, $event)">{{matchKeys[i].name}}
                </label>
              </li>
          </ng-container>
      </ng-container>
    </ul>
    </form>
  </div>
  <!--
  showMatchKeyTokens: {{showMatchKeyTokens}}<br/>
  showMatchKeyTokenFilters: {{showMatchKeyTokenFilters}}<br/>
  showMatchKeyTokenSelectAll: {{showMatchKeyTokenSelectAll}}<br/>
  showCoreMatchKeyTokenChips: {{showCoreMatchKeyTokenChips}}<br/>
  showExtraneousMatchKeyTokenChips: {{showExtraneousMatchKeyTokenChips}}<br/>
  isMatchKeyTokenSelectionScopeCore: {{isMatchKeyTokenSelectionScopeCore}}
  -->
  <div *ngIf="showMatchKeyTokens && showMatchKeyTokenFilters">
    <hr>
    <div class="filter-header match-key-token-filter-header">
      <h3>
        {{ sectionTitles[6] }}
      </h3>
      <div *ngIf="showMatchKeyTokenSelectAll" class="bulk-select-options">
        [<span (click)="onSelectAllMatchKeyTokens(true)">All On</span> | <span (click)="onSelectAllMatchKeyTokens(false)">All Off</span>]
      </div>
    </div>
    <!--<mat-slide-toggle 
      class="match-key-token-mode-select" 
      [checked]="isMatchKeyTokenSelectionScopeCore"
      (change)="onMatchKeyCoreModeToggle($event.checked)">Directly Related Only</mat-slide-toggle>-->
    <mat-chip-listbox 
      #matchKeyChipList
      multiple
      class="match-keys mat-chip-list-stacked" 
      aria-orientation="vertical" 
      aria-label="Match Key Filters">
      
      <div *ngIf="suppressL1InterLinks" class="chip-group core">
        <!--matchKeyCoreTokensIncluded: {{matchKeyCoreTokensIncluded}}<br/>-->
        <mat-chip-option *ngFor="let mk of matchKeyCoreTokens; let i = index"
          class="core-key"
          [class.selected]="isMatchKeyCoreTokenSelected(mk.name)"
          (click)="onCoreMkTagFilterToggle(mk.name)"
          disableRipple="true"
          leadingIcon="false"
          [matBadge]="getMKBadgeCount(mk.coreCount)" 
          matBadgePosition="after" 
          matBadgeColor="accent">
          {{mk.name}}
        </mat-chip-option>
      </div>
      <div *ngIf="!suppressL1InterLinks" class="chip-group extraneous">
        <!--matchKeyTokensIncluded: {{matchKeyTokensIncluded}}<br/>-->
        <mat-chip-option *ngFor="let mk of matchKeyTokens; let i = index"
          class="extra-key"
          [class.selected]="isMatchKeyTokenSelected(mk.name)"
          (click)="onMkTagFilterToggle(mk.name)"
          disableRipple="true"
          leadingIcon="false"
          [matBadge]="getMKBadgeCount(mk.count)" matBadgePosition="after" matBadgeColor="accent">
          {{mk.name}}
        </mat-chip-option>
      </div>
    </mat-chip-listbox>
    <!--<form [formGroup]="filterByMatchKeyTokensForm">
    <ul class="filters-list">
      <ng-container *ngFor="let ds of filterByMatchKeyTokenData.controls; let i = index">
          <ng-container *ngIf="shouldMatchKeyTokenBeDisplayed(matchKeyTokens[i].name)">
              <li formArrayName="matchkeytokens">
                <label>
                  <input type="checkbox" [formControlName]="i" (change)="onMkTagFilterChange(matchKeyTokens[i].name, $event)">{{matchKeyTokens[i].name}}
                </label>
              </li>
          </ng-container>
      </ng-container>
    </ul>
    </form>-->
  </div>
</div>

./sz-graph-filter.component.scss

@use "../scss/theme.scss";

:host {
  background-color: var(--sz-graph-filter-control-background-color);

  .drawer-wrapper {
    margin: 1em 0;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      margin: var(--sz-entity-graph-control-item-margin);
      display: block;
      background-color: var(--sz-entity-graph-control-item-background-color);
      padding: 4px 1em 4px 1em;
      cursor: var(--sz-entity-graph-control-cursor);
  
      /*
      &:hover {
        cursor: var(--sz-entity-graph-control-item-cursor);
      }*/
  
      label {
        cursor: var(--sz-entity-graph-control-item-cursor);
      }
      a {
        display: block;
        cursor: var(--sz-entity-graph-control-item-cursor);
      }
    }
    &.sliders-list {
      label.slider-row {
        display: flex; 
        flex-direction: row; 
        justify-content: space-between; 
        align-content: center; 
        flex-wrap: nowrap; 
        align-items: center;
      }

      label.checkbox-row {
        display: block;
        .checkbox-row {
          display: flex; 
          flex-direction: row; 
          justify-content: space-between;

          .left-adjusted {
            &.no-text {
              min-width: 77px;
              min-width: var(--sz-graph-filter-control-cb-no-text-min-width);
            }
          }
        }
      }
    }

  }

  h3:first-child {
    margin-top: 0;
  }

  .filter-header {
    display: flex;
    flex-direction: row;
    align-content: space-between;
    justify-content: space-between;

    h3 {
      display: inline-block;
    }
    .bulk-select-options {
      span {
        color: var(--sz-graph-filter-multi-select-link-color);
        cursor: pointer;
      }
    }

    &.match-key-token-filter-header h3 {
      margin-bottom: 0;
    }
  }

  hr {
    margin-top: 1em;
    border-top: 0;
    border-bottom: 1px solid #dadada;
  }

  ul.sliders-list {
    /* position the current val to the right of slider */
    .intVal {
      position: relative;
      top: -7px;
      margin-left: 7px;
    }
  }
  ul.filters-list {
    li {
      margin: 0;
      padding: 0 0 0 14px;
    }
    input[type=checkbox] {
      width: 1.2em;
      height: 1.2em;
      padding: 0;
      margin: 0 7px 0 0;
    }
  }
  ul.colors-list, ul.other-colors-list  {
    max-width: 100%;
    display: block;
    overflow: hidden;

    .color-box {
      /* padding: 20px 10px; */
      /* border-bottom: solid 1px #ccc; */
      display: flex;
      position: relative;
      flex-direction: row;
      align-items: center;
      /*justify-content: space-between;*/
      box-sizing: border-box;
    }
    .color-box-handle {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #ccc;
      cursor: move;
      width: 24px;
      height: 24px;
    }
    .color-box-placeholder {
      /*background: rgb(250, 250, 250);*/
      min-height: 26px;
      border-top: solid 1px #dadada;
      border-bottom: solid 1px #dadada;
      height: 2px;
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }

    li {
      margin-bottom: 2px;
      padding-bottom: 0;
    }
    input[type=color] {
      border-color: #676767;
      border-image: none;
      border-radius: 3px;
      border-width: 2px;
      cursor: pointer;
      display: inline-block;
      gap: revert;
      height: 14px;
      margin: 0 7px 0 0;
      padding: 0 7px ;
      text-decoration: none;
      width: 0px;
    }
  }
  /*
  .chip-group {
    &.core {
      border: 1px solid salmon;
    }
    &.extraneous {
      border: 1px solid lightblue;
    }
  }*/

  .match-key-token-mode-select {
    display: block;
    margin-bottom: 20px;
    
    /*
    .mdc-switch__handle-track {
      border: 1px solid green;
      &::after {
        color: rgb(28, 122, 151) !important;
        background-color: rgb(28, 122, 151) !important;
      }
    }
    .mdc-switch__track
    .mdc-switch__track::after,
    .mdc-switch__handle-track {
      color: rgb(28, 122, 151);
    }
    */
  }

  mat-chip-listbox.match-keys {
    --mdc-chip-elevated-container-color: var(--sz-graph-filter-match-key-tags-selected-color);
    --mdc-chip-elevated-disabled-container-color: #eee;
    --mdc-chip-label-text-color: #fff;

    mat-chip-option {
      font-size: var(--sz-graph-filter-match-key-tags-font-size);
      line-height: var(--sz-graph-filter-match-key-tags-line-height);
      padding: var(--sz-graph-filter-match-key-tags-padding);
      margin-right: var(--sz-graph-filter-match-key-tags-margin-right);
      display: inline-block;
      width: var(--sz-graph-filter-match-key-tags-width);
      height: var(--sz-graph-filter-match-key-tags-height);
      min-height: var(--sz-graph-filter-match-key-tags-min-height);
      color: var(--sz-graph-filter-match-key-tags-color);
      background-color: var(--sz-graph-filter-match-key-tags-background-color);
      cursor: var(--sz-graph-filter-match-key-tags-cursor);
      user-select: none;

      button.mat-mdc-chip-action {
        padding-right: 9px;
      }

      &.selected {
        background-color: var(--sz-graph-filter-match-key-tags-selected-background-color); //rgb(208, 224, 228);
        color: var(--sz-graph-filter-match-key-tags-selected-color); // inheirit
        cursor: var(--sz-graph-filter-match-key-tags-selected-cursor);

        &.core-key {
          background-color: var(--sz-graph-filter-match-key-core-tags-selected-background-color);
        }
      }      
    }
  }
}

@-moz-document url-prefix() { 
  ul.colors-list, ul.other-colors-list {
    input[type=color] {
      border-width: 1px !important;
      padding: 0 !important;
      width: 14px !important;
    }
  }
}

.note-sub {
  display: block;
  font-style: italic;
}

.no-text-selection {
  @include theme.sz-mixins-no-text-selection;
}

.tooltip-text {
  display: none;
}

.cdk-drag-preview {
  background-color: #ccc;
  opacity: .4;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  /*border: 2px solid blueviolet;*/
  box-sizing: border-box;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
  input[type=color] {
    border-color: #676767;
    border-image: none;
    border-radius: 3px;
    border-width: 2px;
    cursor: pointer;
    display: inline-block;
    gap: revert;
    height: 14px;
    margin: 0 7px 0 0;
    padding: 0 7px ;
    text-decoration: none;
    width: 0px;
  }
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.color-list.cdk-drop-list-dragging .color-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}