power-select.hbs

<div
  class="upf-power-select fx-1 fx-col {{if @borderless 'upf-power-select--borderless'}}"
  data-toggle="oss-dropdown"
  {{did-insert this.registerContainer}}
  {{did-insert (fn this.ensureBlockPresence (has-block "selected-item") (has-block "option-item"))}}
  {{will-destroy this.disconnectObserver}}
  ...attributes
>
  <div class="upf-power-select__array-container" role="button" {{on "click" this.toggleDropdown}}>
    <div class="array-input-container fx-row padding-px-6 {{if this.isOpen 'active'}}">
      <div class="fx-row fx-xalign-center fx-1 padding-left-px-6 padding-right-px-24 fx-gap-px-6 fx-wrap">
        {{#each @selectedItems as |selectedItem|}}
          {{yield selectedItem to="selected-item"}}
        {{else}}
          <span class="text-size-5 text-color-default-light">
            {{this.placeholder}}
          </span>
        {{/each}}
      </div>
      <OSS::Icon @icon={{if this.isOpen "fa-chevron-up" "fa-chevron-down"}} class="dropdown-icon" />
    </div>
  </div>

  {{#if this.isOpen}}
    {{#in-element this.portalTarget insertBefore=null}}
      {{#if (has-block "empty-state")}}
        <OSS::InfiniteSelect
          @items={{@items}}
          @onSearch={{@onSearch}}
          @inline={{false}}
          @onSelect={{this.onSelect}}
          @searchPlaceholder={{@searchPlaceholder}}
          @loading={{@loading}}
          @loadingMore={{@loadingMore}}
          @onBottomReached={{@onBottomReached}}
          @enableKeyboard={{true}}
          class={{concat "margin-top-px-0 upf-power-select__dropdown " this.dropdownAddressableClass}}
          id={{this.portalId}}
          {{on "click" this.noop}}
          {{on-click-outside this.onClickOutside useCapture=@captureClickOutside}}
        >
          <:option as |item|>
            {{yield item to="option-item"}}
          </:option>

          <:empty-state>
            {{yield to="empty-state"}}
          </:empty-state>
        </OSS::InfiniteSelect>
      {{else}}
        <OSS::InfiniteSelect
          @items={{@items}}
          @onSearch={{@onSearch}}
          @inline={{false}}
          @onSelect={{this.onSelect}}
          @searchPlaceholder={{@searchPlaceholder}}
          @loading={{@loading}}
          @loadingMore={{@loadingMore}}
          @onBottomReached={{@onBottomReached}}
          @enableKeyboard={{true}}
          class={{concat "margin-top-px-0 upf-power-select__dropdown " this.dropdownAddressableClass}}
          id={{this.portalId}}
          {{on "click" this.noop}}
          {{on-click-outside this.onClickOutside useCapture=@captureClickOutside}}
        >
          <:option as |item|>
            {{yield item to="option-item"}}
          </:option>
        </OSS::InfiniteSelect>
      {{/if}}
    {{/in-element}}
  {{/if}}
</div>