<templates>
  <t t-name="o-spreadsheet-NumberEditor">
    <div class="o-dropdown" t-ref="this.rootEditorRef">
      <div
        class="o-number-editor d-flex align-items-center"
        t-att-class="this.props.class"
        t-att-title="this.props.title"
        t-on-click.stop="this.toggleList">
        <input
          type="number"
          t-att-min="this.props.min"
          t-att-max="this.props.max"
          class="o-font-size o-number-input bg-transparent border-0"
          t-on-keydown="this.onInputKeydown"
          t-on-wheel.prevent.stop=""
          t-on-click.stop="this.props.onFocusInput"
          t-on-focus.stop="this.onInputFocused"
          t-on-change="this.setValueFromInput"
          t-ref="this.inputRef"
        />
        <t t-out="this.props.valueIcon"/>
        <span>
          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
        </span>
      </div>
      <Popover t-if="this.dropdown.isOpen" t-props="this.popoverProps">
        <div class="o-text-options" t-on-click.stop="" t-ref="this.valueListRef">
          <t t-foreach="this.props.valueList" t-as="value" t-key="value">
            <div t-att-data-size="value" t-on-click="() => this.setValueFromList(value)">
              <t t-out="value"/>
              <t t-out="this.props.valueIcon"/>
            </div>
          </t>
        </div>
      </Popover>
    </div>
  </t>
</templates>
