Control flow schematics: doesn't remove the <ng-template #somevar> after replacing it with @else about angular HOT 8 OPEN

<!-- Hidden File Input For Image upload in RTE -->
<input
  [attr.id]="fileInputId"
  type="file"
  name="trq-rte-file-input"
  style="display: none;"
  aria-label="file picker"
  (change)="selectImageFile($event)" />
<ng-container *ngIf="trqTinyMCE; else loader">
  <ng-container *ngIf="isInline; then inline else classic"></ng-container>

  <!-- Inline Template -->
  <ng-template #inline>
    <!-- Inline Editor Container (Toolbar + Body) -->
    <div
      [id]="inlineContainerId"
      [ngStyle]="{'width': editorWidth }"
      [ngClass]="{'trq-rte': true, 'trq-rte--inline trq-d-flex trq-flex-column': isInline, 'trq-p-0': isInline && !config?.toolbar?.length}">
      <!-- Inline Editor Toolbar -->
      <div
        #toolbarElementRef
        [id]="toolbarId"
        [ngClass]="{ 'trq-rte__toolbar': true, 'trq-d-none': preview, 'trq-d-inline-block': !preview }"></div>

      <!-- Inline Editor Body -->
      <perfect-scrollbar
        fxFlex
        [config]="perfectScrollbarConfig"
        [disabled]="perfectScrollbarDisabled"
        [usePSClass]="!perfectScrollbarDisabled">
        <div
          class="trq-rte__editable"
          [id]="rteId"
          [ngStyle]="{'height': editorHeight }"
          [ngClass]="{'trq-overflow-auto' : perfectScrollbarDisabled, 'trq-p-1': isInline && !config?.toolbar?.length}"
          [attr.tabindex]="config?.readonly || preview ? -1 : 0"
          [attr.role]="!(config?.readonly || preview) ? 'textbox' : null"
          [attr.aria-label]="getAriaLabel | trqMemoize : !(config?.readonly || preview) : ariaLabel : helpLabel : config.toolbar?.length"
          [attr.aria-labelledby]="ariaLabelledBy || null"
          [attr.aria-describedby]="ariaDescribedBy || null"
          [attr.required]="required || null"
          [attr.aria-invalid]="!isValid || null">
        </div>
      </perfect-scrollbar>
    </div>
  </ng-template>

  <!-- Classic Template -->
  <ng-template #classic>
    <textarea [id]="rteId"></textarea>
  </ng-template>
</ng-container>

<ng-template #loader>
  <div class="loader">
    <trq-loading-mask [show]="!trqTinyMCE"></trq-loading-mask>
  </div>
</ng-template>

<!-- Hidden File Input For Image upload in RTE -->
<input
  [attr.id]="fileInputId"
  type="file"
  name="trq-rte-file-input"
  style="display: none;"
  aria-label="file picker"
  (change)="selectImageFile($event)" />
  @if (trqTinyMCE) {
    @if (isInline) {
      <!-- Inline Editor Container (Toolbar + Body) -->
      <div
        [id]="inlineContainerId"
        [ngStyle]="{'width': editorWidth }"
        [ngClass]="{'trq-rte': true, 'trq-rte--inline trq-d-flex trq-flex-column': isInline, 'trq-p-0': isInline && !config?.toolbar?.length}">
        <!-- Inline Editor Toolbar -->
        <div
          #toolbarElementRef
          [id]="toolbarId"
        [ngClass]="{ 'trq-rte__toolbar': true, 'trq-d-none': preview, 'trq-d-inline-block': !preview }"></div>
        <!-- Inline Editor Body -->
        <perfect-scrollbar
          fxFlex
          [config]="perfectScrollbarConfig"
          [disabled]="perfectScrollbarDisabled"
          [usePSClass]="!perfectScrollbarDisabled">
          <div
            class="trq-rte__editable"
            [id]="rteId"
            [ngStyle]="{'height': editorHeight }"
            [ngClass]="{'trq-overflow-auto' : perfectScrollbarDisabled, 'trq-p-1': isInline && !config?.toolbar?.length}"
            [attr.tabindex]="config?.readonly || preview ? -1 : 0"
            [attr.role]="!(config?.readonly || preview) ? 'textbox' : null"
            [attr.aria-label]="getAriaLabel | trqMemoize : !(config?.readonly || preview) : ariaLabel : helpLabel : config.toolbar?.length"
            [attr.aria-labelledby]="ariaLabelledBy || null"
            [attr.aria-describedby]="ariaDescribedBy || null"
            [attr.required]="required || null"
            [attr.aria-invalid]="!isValid || null">
          </div>
        </perfect-scrollbar>
      </div>
    } @else {
      <textarea [id]="rteId"></textarea>
    }
    <!-- Inline Template -->
    <!-- Classic Template -->
  } @else {
    <div class="loader">
      <trq-loading-mask [show]="!trqTinyMCE"></trq-loading-mask>
    </div>
  }

  <ng-template #loader>
    <div class="loader">
      <trq-loading-mask [show]="!trqTinyMCE"></trq-loading-mask>
    </div>
  </ng-template>

<div role="application">
  <div
    #target
    trqId
    [trqIdUseParent]="true"
    class="trq-multiselect__target trq-p-0 trq-aria-disabled"
    popperTrigger="click"
    popperAriaRole="tooltip"
    [popper]="popperContent"
    [popperPlacement]="dropdownPosition | trqForceTypeCasting"
    [popperDisabled]="disabled"
    [popperDisableStyle]="true"
    [popperPositionFixed]="popperPositionFixed"
    [popperBoundaries]="popperBoundaries"
    [popperHideOnScroll]="popperHideOnScroll"
    [popperModifiers]="popperModifiers"
    [popperHideOnClickOutside]="false"
    [ngClass]="{'trq-multiselect__target--focused': !disabled && (isOpened || isFocused), 'trq-multiselect__target--disabled': disabled, 'trq-multiselect__target--readonly': readonly}"
    exclude="popper-content"
    [excludeBeforeClick]="true"
    [clickOutsideEnabled]="popperHideOnClickOutside && isOpened"
    (trqClickOutside)="popperTarget?.hide()"
    (popperOnShown)="!readonly && popperShown()"
    (popperOnHidden)="popperHidden()">
    <ng-container *ngTemplateOutlet="popoverLabel"></ng-container>
  </div>

  <ng-template #popoverLabel>
    <div
      class="trq-multiselect__target-label trq-mb-0 trq-align-items-center trq-d-inline-flex trq-flex-fill trq-multiselect__target-searchable">
      <ng-container *ngIf="!skipSelectedValuesLabel">
        <ng-container *ngIf="inlineLabel && !filterQuery; else defaultLabel">
          <ng-container *ngTemplateOutlet="inlineLabelTemplate"></ng-container>
        </ng-container>
      </ng-container>

      <div
        class="trq-multiselect__target-label--search trq-flex-grow-1"
        [trqAriaListTrigger]="isOpened && !readonly"
        [items]="ariaListItems"
        [selectOnly]="!isSearchable"
        [ariaDisabled]="readonly"
        [activeDescEle]="selectOnlyComboboxElmRef || searchBox?.elementRef"
        (onKeyDown)="onAriaTriggerKeydown($event)"
        (openList)="openPopper()"
        (closeList)="closeMenuOnItemClick && hidePopper()">
        <input
          *ngIf="isSearchable"
          trqInput
          type="text"
          autocomplete="off"
          role="combobox"
          aria-autocomplete="list"
          aria-haspopup="listbox"
          trqId="search"
          [trqIdUseParent]="true"
          [disabled]="disabled"
          [attr.placeholder]="values?.length || inlineLabel ? '' : defaultLabels.search"
          [attr.aria-label]="ariaLabel || defaultLabels.search"
          [attr.aria-labelledby]="ariaLabelledBy || null"
          [attr.aria-describedby]="inlineLabel | trqSelectGetLabelOrDescByIdPipe: filterQuery: values: selectedValueId: ariaDescribedBy : 'describedby'"
          [attr.aria-controls]="!isOpened ? null : clrDropdownMenuId"
          [attr.aria-owns]="!isOpened ? null : clrDropdownMenuId"
          [attr.aria-expanded]="isOpened"
          [attr.required]="required || null"
          [attr.readonly]="readonly || null"
          [attr.aria-invalid]="required ? !values.length : null"
          [(ngModel)]="filterQuery"
          (blur)="onBlur()"
          (focus)="isFocused = true"
          (ngModelChange)="onFilterQueryChange($event);" />

        <div
          *ngIf="!isSearchable"
          #selectOnlyComboboxElmRef
          class="trq-select-none trq-input-element trq-multiselect__combobox--select-only trq-outline-none trq-overflow-hidden"
          [ngClass]="{'trq-text-dark-gray': readonly }"
          role="combobox"
          aria-haspopup="listbox"
          trqId="search"
          [trqIdUseParent]="true"
          [attr.tabindex]="!disabled && '0' || null"
          [attr.aria-label]="ariaLabel || defaultLabels.placeholder"
          [attr.aria-labelledby]="ariaLabelledBy || null"
          [attr.aria-describedby]="inlineLabel | trqSelectGetLabelOrDescByIdPipe : filterQuery: values: selectedValueId: ariaDescribedBy: 'describedby'"
          [attr.aria-controls]="!isOpened ? null : clrDropdownMenuId"
          [attr.aria-expanded]="isOpened"
          [attr.required]="required || null"
          [attr.readonly]="readonly || null"
          [attr.aria-invalid]="required ? !values.length : null"
          (blur)="onBlur()"
          (focus)="isFocused = true">
          {{!values?.length && !inlineLabel && defaultLabels.placeholder || ' '}}</div
        >
      </div>
    </div>

    <trq-loading-icon
      *ngIf="isFilterLoading || isLazyLoading"
      class="trq-mr-1 trq-multiselect__loading"></trq-loading-icon>

    <span
      *ngIf="!skipSelectedValuesLabel && !filterQuery && !readonly && !disabled && values && values.length"
      class="trq-px-1 trq-multiselect__clear trq-d-inline-flex trq-align-items-center"
      trqId="clear"
      [trqIdUseParent]="true"
      [attr.aria-label]="ariaLabel"
      [attr.aria-labelledby]="ariaLabelledBy"
      [attr.title]="clearText ? clearText : defaultLabels.clear"
      (click)="clearAll()">
      <trq-icon
        *ngIf="!clearText; else clear"
        class="trq-aria-attr-skip-hidden"
        aria-hidden="true"
        [name]="iconShape.CLOSE"
        [size]="iconSize.SM">
      </trq-icon>
      <ng-template #clear>
        <span class="trq-multiselect__clear-text">{{clearText}}</span>
      </ng-template>
    </span>

    <trq-icon
      class="trq-multiselect__target-icon trq-flex-shrink-0 trq-aria-attr-skip-hidden"
      aria-hidden="true"
      [name]="isOpened ? iconShape.KEYBOARD_ARROW_UP : iconShape.KEYBOARD_ARROW_DOWN"
      [size]="iconSize.MD"
      [disabled]="disabled">
    </trq-icon>
  </ng-template>

  <ng-template #inlineLabelTemplate>
    <div
      class="trq-multiselect__target-label--text trq-text-ellipsis"
      trqId="inline-label"
      [trqIdUseParent]="true"
      [attr.title]="inlineLabel + (values?.length ? ' (' +  values.length +')' : '')"
      (assignId)="selectedValueId=$event">
      {{inlineLabel}}
      <span *ngIf="values?.length">({{ values.length }})</span>
    </div>
  </ng-template>

  <ng-template #defaultLabel>
    <ng-container *ngIf="values?.length && !filterQuery">
      <div
        *ngIf="!templates?.selected; else overridedLabel"
        class="trq-multiselect__target-label--text trq-text-ellipsis"
        trqId="selected-value"
        [trqIdUseParent]="true"
        [attr.title]="labelTitle"
        (assignId)="selectedValueId=$event">
        <!-- eslint-disable-next-line @angular-eslint/template/no-call-expression -->
        {{compactView ? selectedOptionsLabel[0] : selectedOptionsLabel?.join(', ')}}
        <span class="trq-multiselect__count" *ngIf="compactView && values.length > 1"
          >(+{{ values.length - 1 }} {{ labelOther }})</span
        >
      </div>
    </ng-container>
  </ng-template>

  <ng-template #overridedLabel>
    <div
      class="trq-multiselect__target-label--text"
      trqId="selected-value"
      [trqIdUseParent]="true"
      (assignId)="selectedValueId=$event">
      <ng-container
        *ngTemplateOutlet="templates.selected | trqForceTypeCasting;  context: {$implicit : {selected : selectedOptionsLabel, defaultLabel : defaultLabels.placeholder}}"></ng-container>
    </div>
  </ng-template>

  <popper-content #popperContent>
    <div
      *ngIf="isOpened"
      class="trq-multiselect__popover"
      trqId="popover-wrapper"
      [trqIdUseParent]="true"
      role="listbox"
      aria-multiselectable="true"
      [attr.aria-label]="ariaLabel || dropdownMenuLabel"
      [attr.aria-labelledby]="ariaLabelledBy"
      [style.width]="popperWidth ? popperWidth + 'px' : 'auto'"
      (assignId)="onIdAssigned($event)">
      <ng-container *ngIf="showSelectAllOption && visibleOptions && visibleOptions.length && !isFilterLoading">
        <div
          trqAriaListItem
          class="trq-multiselect__item trq-multiselect__select-all"
          trqId="select-all"
          [trqIdUseParent]="true"
          role="option"
          [attr.aria-selected]="allSelected"
          [item]="{selectAll: true}"
          (click)="onSelectAllClick($event)">
          <trq-icon
            class="trq-multiselect__item-icon trq-ml-0 trq-d-inline-flex trq-aria-attr-skip-hidden"
            [ngClass]="{ 'trq-multiselect__item-icon--selected' : (allSelected || partialSelected) }"
            aria-hidden="true"
            [size]="checkboxIconSize"
            [name]="getState | trqMemoize : allSelected : partialSelected">
          </trq-icon>
          <div
            class="trq-multiselect__item-label trq-d-block trq-text-capitalize trq-text-ellipsis"
            [attr.title]="defaultLabels.selectAll || null">
            {{defaultLabels.selectAll}}
          </div>
        </div>
      </ng-container>

      <perfect-scrollbar
        class="scrollbar-wrapper ps-skip-focus"
        [ngStyle]="{ 'max-height': popupMaxHeight }"
        (psYReachEnd)="yReachEnd()">
        <div *ngIf="isFilterLoading" class="trq-multiselect__info trq-multiselect__info--loading trq-text-ellipsis">
          {{ defaultLabels.loading }}
        </div>
        <div
          *ngIf=" (!visibleOptions || !visibleOptions.length) && !isFilterLoading "
          class="trq-multiselect__info trq-multiselect__info--empty trq-text-ellipsis">
          {{ defaultLabels.empty }}
        </div>

        <!-- INFO: list item -->
        <ng-container *ngIf="!isFilterLoading">
          <div
            *ngFor="let item of visibleOptions| trqSelectGroupOptions: values: optionValueKey: simpleValue: true : optionsGrouping | trqSelectLimitOptions: !filterQuery && optionsLimit ? optionsLimit : undefined ; trackBy:trackItem; let i = index;"
            trqAriaListItem
            role="option"
            class="trq-multiselect__item"
            [trqIdUseParent]="true"
            [trqId]="item[optionValueKey]"
            [item]="item"
            [labelKey]="optionLabelKey"
            [attr.title]="item[optionLabelKey] || null"
            [attr.aria-selected]="item | trqSelectIsSelectedOption: values: optionValueKey: simpleValue"
            (click)="onOptionClick($event, item)">
            <trq-icon
              class="trq-multiselect__item-icon trq-ml-0 trq-d-inline-flex trq-aria-attr-skip-hidden"
              [ngClass]="{ 'trq-multiselect__item-icon--selected' : item | trqSelectIsSelectedOption: values: optionValueKey: simpleValue }"
              aria-hidden="true"
              [size]="checkboxIconSize"
              [name]="(item | trqSelectIsSelectedOption: values: optionValueKey: simpleValue) ? iconShape.CHECKBOX_CHECKED : iconShape.CHECKBOX_UNCHECKED">
            </trq-icon>
            <div
              class="trq-multiselect__item-label trq-d-block trq-aria-attr-skip-hidden"
              aria-hidden="true"
              [ngClass]="{'trq-text-ellipsis': !templates?.option}">
              <ng-container *ngIf="!templates?.option; else overrideOption">
                {{item[optionLabelKey]}}
              </ng-container>
            </div>
            <ng-template #overrideOption>
              <ng-container
                *ngTemplateOutlet="templates.option | trqForceTypeCasting; context:{option: item}"></ng-container>
            </ng-template>
          </div>
          <ng-container
            *ngIf="(inlineLabel && !filterQuery && visibleOptions.length) || (!inlineLabel && visibleOptions.length)">
            <div
              *ngFor="let item of staticOptions; trackBy:trackItem; let i = index;"
              trqAriaListItem
              role="option"
              class="trq-multiselect__item"
              [trqIdUseParent]="true"
              [trqId]="item[optionValueKey]"
              [item]="item"
              [labelKey]="optionLabelKey"
              [attr.title]="item[optionLabelKey] || null"
              [attr.aria-selected]="item | trqSelectIsSelectedOption: values: optionValueKey: simpleValue"
              (click)="onOptionClick($event, item)">
              <div
                aria-hidden="true"
                *ngIf="!templates?.staticOption; else overrideStaticOption"
                class="trq-d-block trq-text-ellipsis"
                >{{ item[optionLabelKey]}}</div
              >
              <ng-template #overrideStaticOption>
                <ng-container
                  *ngTemplateOutlet="templates.staticOption | trqForceTypeCasting; context:{option: item}"></ng-container>
              </ng-template>
            </div>
          </ng-container>
        </ng-container>
      </perfect-scrollbar>

      <div
        class="trq-mt-0 trq-multiselect__info trq-multiselect__count"
        *ngIf="isSearchable && filterQuery && values && values.length">
        {{values.length + ' ' + labelSelected}}
      </div>
    </div>
  </popper-content>
</div>

<div role="application">
  <div
    #target
    trqId
    [trqIdUseParent]="true"
    class="trq-multiselect__target trq-p-0 trq-aria-disabled"
    popperTrigger="click"
    popperAriaRole="tooltip"
    [popper]="popperContent"
    [popperPlacement]="dropdownPosition | trqForceTypeCasting"
    [popperDisabled]="disabled"
    [popperDisableStyle]="true"
    [popperPositionFixed]="popperPositionFixed"
    [popperBoundaries]="popperBoundaries"
    [popperHideOnScroll]="popperHideOnScroll"
    [popperModifiers]="popperModifiers"
    [popperHideOnClickOutside]="false"
    [ngClass]="{'trq-multiselect__target--focused': !disabled && (isOpened || isFocused), 'trq-multiselect__target--disabled': disabled, 'trq-multiselect__target--readonly': readonly}"
    exclude="popper-content"
    [excludeBeforeClick]="true"
    [clickOutsideEnabled]="popperHideOnClickOutside && isOpened"
    (trqClickOutside)="popperTarget?.hide()"
    (popperOnShown)="!readonly && popperShown()"
    (popperOnHidden)="popperHidden()">
    <ng-container *ngTemplateOutlet="popoverLabel"></ng-container>
  </div>

  <ng-template #popoverLabel>
    <div
      class="trq-multiselect__target-label trq-mb-0 trq-align-items-center trq-d-inline-flex trq-flex-fill trq-multiselect__target-searchable">
      @if (!skipSelectedValuesLabel) {
        @if (inlineLabel && !filterQuery) {
          <ng-container *ngTemplateOutlet="inlineLabelTemplate"></ng-container>
        } @else {
          @if (values?.length && !filterQuery) {
            @if (!templates?.selected) {
              <div
                class="trq-multiselect__target-label--text trq-text-ellipsis"
                trqId="selected-value"
                [trqIdUseParent]="true"
                [attr.title]="labelTitle"
                (assignId)="selectedValueId=$event">
                <!-- eslint-disable-next-line @angular-eslint/template/no-call-expression -->
                {{compactView ? selectedOptionsLabel[0] : selectedOptionsLabel?.join(', ')}}
                @if (compactView && values.length > 1) {
                  <span class="trq-multiselect__count"
                    >(+{{ values.length - 1 }} {{ labelOther }})</span
                    >
                  }
                </div>
              } @else {
                <div
                  class="trq-multiselect__target-label--text"
                  trqId="selected-value"
                  [trqIdUseParent]="true"
                  (assignId)="selectedValueId=$event">
                  <ng-container
                  *ngTemplateOutlet="templates.selected | trqForceTypeCasting;  context: {$implicit : {selected : selectedOptionsLabel, defaultLabel : defaultLabels.placeholder}}"></ng-container>
                </div>
              }
            }
          }
        }

        <div
          class="trq-multiselect__target-label--search trq-flex-grow-1"
          [trqAriaListTrigger]="isOpened && !readonly"
          [items]="ariaListItems"
          [selectOnly]="!isSearchable"
          [ariaDisabled]="readonly"
          [activeDescEle]="selectOnlyComboboxElmRef || searchBox?.elementRef"
          (onKeyDown)="onAriaTriggerKeydown($event)"
          (openList)="openPopper()"
          (closeList)="closeMenuOnItemClick && hidePopper()">
          @if (isSearchable) {
            <input
              trqInput
              type="text"
              autocomplete="off"
              role="combobox"
              aria-autocomplete="list"
              aria-haspopup="listbox"
              trqId="search"
              [trqIdUseParent]="true"
              [disabled]="disabled"
              [attr.placeholder]="values?.length || inlineLabel ? '' : defaultLabels.search"
              [attr.aria-label]="ariaLabel || defaultLabels.search"
              [attr.aria-labelledby]="ariaLabelledBy || null"
              [attr.aria-describedby]="inlineLabel | trqSelectGetLabelOrDescByIdPipe: filterQuery: values: selectedValueId: ariaDescribedBy : 'describedby'"
              [attr.aria-controls]="!isOpened ? null : clrDropdownMenuId"
              [attr.aria-owns]="!isOpened ? null : clrDropdownMenuId"
              [attr.aria-expanded]="isOpened"
              [attr.required]="required || null"
              [attr.readonly]="readonly || null"
              [attr.aria-invalid]="required ? !values.length : null"
              [(ngModel)]="filterQuery"
              (blur)="onBlur()"
              (focus)="isFocused = true"
              (ngModelChange)="onFilterQueryChange($event);" />
          }

          @if (!isSearchable) {
            <div
              #selectOnlyComboboxElmRef
              class="trq-select-none trq-input-element trq-multiselect__combobox--select-only trq-outline-none trq-overflow-hidden"
              [ngClass]="{'trq-text-dark-gray': readonly }"
              role="combobox"
              aria-haspopup="listbox"
              trqId="search"
              [trqIdUseParent]="true"
              [attr.tabindex]="!disabled && '0' || null"
              [attr.aria-label]="ariaLabel || defaultLabels.placeholder"
              [attr.aria-labelledby]="ariaLabelledBy || null"
              [attr.aria-describedby]="inlineLabel | trqSelectGetLabelOrDescByIdPipe : filterQuery: values: selectedValueId: ariaDescribedBy: 'describedby'"
              [attr.aria-controls]="!isOpened ? null : clrDropdownMenuId"
              [attr.aria-expanded]="isOpened"
              [attr.required]="required || null"
              [attr.readonly]="readonly || null"
              [attr.aria-invalid]="required ? !values.length : null"
              (blur)="onBlur()"
              (focus)="isFocused = true">
              {{!values?.length && !inlineLabel && defaultLabels.placeholder || ' '}}</div
              >
            }
          </div>
        </div>

        @if (isFilterLoading || isLazyLoading) {
          <trq-loading-icon
          class="trq-mr-1 trq-multiselect__loading"></trq-loading-icon>
        }

        @if (!skipSelectedValuesLabel && !filterQuery && !readonly && !disabled && values && values.length) {
          <span
            class="trq-px-1 trq-multiselect__clear trq-d-inline-flex trq-align-items-center"
            trqId="clear"
            [trqIdUseParent]="true"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledBy"
            [attr.title]="clearText ? clearText : defaultLabels.clear"
            (click)="clearAll()">
            @if (!clearText) {
              <trq-icon
                class="trq-aria-attr-skip-hidden"
                aria-hidden="true"
                [name]="iconShape.CLOSE"
                [size]="iconSize.SM">
              </trq-icon>
            } @else {
              <span class="trq-multiselect__clear-text">{{clearText}}</span>
            }
            <ng-template #clear>
              <span class="trq-multiselect__clear-text">{{clearText}}</span>
            </ng-template>
          </span>
        }

        <trq-icon
          class="trq-multiselect__target-icon trq-flex-shrink-0 trq-aria-attr-skip-hidden"
          aria-hidden="true"
          [name]="isOpened ? iconShape.KEYBOARD_ARROW_UP : iconShape.KEYBOARD_ARROW_DOWN"
          [size]="iconSize.MD"
          [disabled]="disabled">
        </trq-icon>
      </ng-template>

      <ng-template #inlineLabelTemplate>
        <div
          class="trq-multiselect__target-label--text trq-text-ellipsis"
          trqId="inline-label"
          [trqIdUseParent]="true"
          [attr.title]="inlineLabel + (values?.length ? ' (' +  values.length +')' : '')"
          (assignId)="selectedValueId=$event">
          {{inlineLabel}}
          @if (values?.length) {
            <span>({{ values.length }})</span>
          }
        </div>
      </ng-template>

      <ng-template #defaultLabel>
        @if (values?.length && !filterQuery) {
          @if (!templates?.selected) {
            <div
              class="trq-multiselect__target-label--text trq-text-ellipsis"
              trqId="selected-value"
              [trqIdUseParent]="true"
              [attr.title]="labelTitle"
              (assignId)="selectedValueId=$event">
              <!-- eslint-disable-next-line @angular-eslint/template/no-call-expression -->
              {{compactView ? selectedOptionsLabel[0] : selectedOptionsLabel?.join(', ')}}
              @if (compactView && values.length > 1) {
                <span class="trq-multiselect__count"
                  >(+{{ values.length - 1 }} {{ labelOther }})</span
                  >
                }
              </div>
            } @else {
              <div
                class="trq-multiselect__target-label--text"
                trqId="selected-value"
                [trqIdUseParent]="true"
                (assignId)="selectedValueId=$event">
                <ng-container
                *ngTemplateOutlet="templates.selected | trqForceTypeCasting;  context: {$implicit : {selected : selectedOptionsLabel, defaultLabel : defaultLabels.placeholder}}"></ng-container>
              </div>
            }
          }
        </ng-template>


        <popper-content #popperContent>
          @if (isOpened) {
            <div
              class="trq-multiselect__popover"
              trqId="popover-wrapper"
              [trqIdUseParent]="true"
              role="listbox"
              aria-multiselectable="true"
              [attr.aria-label]="ariaLabel || dropdownMenuLabel"
              [attr.aria-labelledby]="ariaLabelledBy"
              [style.width]="popperWidth ? popperWidth + 'px' : 'auto'"
              (assignId)="onIdAssigned($event)">
              @if (showSelectAllOption && visibleOptions && visibleOptions.length && !isFilterLoading) {
                <div
                  trqAriaListItem
                  class="trq-multiselect__item trq-multiselect__select-all"
                  trqId="select-all"
                  [trqIdUseParent]="true"
                  role="option"
                  [attr.aria-selected]="allSelected"
                  [item]="{selectAll: true}"
                  (click)="onSelectAllClick($event)">
                  <trq-icon
                    class="trq-multiselect__item-icon trq-ml-0 trq-d-inline-flex trq-aria-attr-skip-hidden"
                    [ngClass]="{ 'trq-multiselect__item-icon--selected' : (allSelected || partialSelected) }"
                    aria-hidden="true"
                    [size]="checkboxIconSize"
                    [name]="getState | trqMemoize : allSelected : partialSelected">
                  </trq-icon>
                  <div
                    class="trq-multiselect__item-label trq-d-block trq-text-capitalize trq-text-ellipsis"
                    [attr.title]="defaultLabels.selectAll || null">
                    {{defaultLabels.selectAll}}
                  </div>
                </div>
              }
              <perfect-scrollbar
                class="scrollbar-wrapper ps-skip-focus"
                [ngStyle]="{ 'max-height': popupMaxHeight }"
                (psYReachEnd)="yReachEnd()">
                @if (isFilterLoading) {
                  <div class="trq-multiselect__info trq-multiselect__info--loading trq-text-ellipsis">
                    {{ defaultLabels.loading }}
                  </div>
                }
                @if ( (!visibleOptions || !visibleOptions.length) && !isFilterLoading ) {
                  <div
                    class="trq-multiselect__info trq-multiselect__info--empty trq-text-ellipsis">
                    {{ defaultLabels.empty }}
                  </div>
                }
                <!-- INFO: list item -->
                @if (!isFilterLoading) {
                  @for (item of visibleOptions| trqSelectGroupOptions: values: optionValueKey: simpleValue: true : optionsGrouping | trqSelectLimitOptions: !filterQuery && optionsLimit ? optionsLimit : undefined ; track trackItem(i, item); let i = $index) {
                    <div
                      trqAriaListItem
                      role="option"
                      class="trq-multiselect__item"
                      [trqIdUseParent]="true"
                      [trqId]="item[optionValueKey]"
                      [item]="item"
                      [labelKey]="optionLabelKey"
                      [attr.title]="item[optionLabelKey] || null"
                      [attr.aria-selected]="item | trqSelectIsSelectedOption: values: optionValueKey: simpleValue"
                      (click)="onOptionClick($event, item)">
                      <trq-icon
                        class="trq-multiselect__item-icon trq-ml-0 trq-d-inline-flex trq-aria-attr-skip-hidden"
                        [ngClass]="{ 'trq-multiselect__item-icon--selected' : item | trqSelectIsSelectedOption: values: optionValueKey: simpleValue }"
                        aria-hidden="true"
                        [size]="checkboxIconSize"
                        [name]="(item | trqSelectIsSelectedOption: values: optionValueKey: simpleValue) ? iconShape.CHECKBOX_CHECKED : iconShape.CHECKBOX_UNCHECKED">
                      </trq-icon>
                      <div
                        class="trq-multiselect__item-label trq-d-block trq-aria-attr-skip-hidden"
                        aria-hidden="true"
                        [ngClass]="{'trq-text-ellipsis': !templates?.option}">
                        @if (!templates?.option) {
                          {{item[optionLabelKey]}}
                        } @else {
                          <ng-container
                          *ngTemplateOutlet="templates.option | trqForceTypeCasting; context:{option: item}"></ng-container>
                        }
                      </div>
                    </div>
                  }
                  @if ((inlineLabel && !filterQuery && visibleOptions.length) || (!inlineLabel && visibleOptions.length)) {
                    @for (item of staticOptions; track trackItem(i, item); let i = $index) {
                      <div
                        trqAriaListItem
                        role="option"
                        class="trq-multiselect__item"
                        [trqIdUseParent]="true"
                        [trqId]="item[optionValueKey]"
                        [item]="item"
                        [labelKey]="optionLabelKey"
                        [attr.title]="item[optionLabelKey] || null"
                        [attr.aria-selected]="item | trqSelectIsSelectedOption: values: optionValueKey: simpleValue"
                        (click)="onOptionClick($event, item)">
                        @if (!templates?.staticOption) {
                          <div
                            aria-hidden="true"
                            class="trq-d-block trq-text-ellipsis"
                            >{{ item[optionLabelKey]}}</div
                            >
                          } @else {
                            <ng-container
                            *ngTemplateOutlet="templates.staticOption | trqForceTypeCasting; context:{option: item}"></ng-container>
                          }
                        </div>
                      }
                    }
                  }
                </perfect-scrollbar>
                @if (isSearchable && filterQuery && values && values.length) {
                  <div
                    class="trq-mt-0 trq-multiselect__info trq-multiselect__count"
                    >
                    {{values.length + ' ' + labelSelected}}
                  </div>
                }
              </div>
            }
          </popper-content>
 </div>