<templates>
  <t t-name="o-spreadsheet-Ripple">
    <div
      class="o-ripple-container position-relative"
      t-att-class="this.props.class"
      t-on-click="this.onClick">
      <div class="position-absolute w-100 h-100">
        <t t-foreach="this.state.ripples" t-as="ripple" t-key="ripple.id">
          <RippleEffect t-props="this.getRippleEffectProps(ripple.id)"/>
        </t>
      </div>
      <div class="position-relative" t-ref="this.childContainerRef">
        <t t-call-slot="default"/>
      </div>
    </div>
  </t>

  <t t-name="o-spreadsheet-RippleEffect">
    <div
      class="position-absolute"
      t-att-class="{ 'overflow-hidden': !this.props.allowOverflow }"
      t-att-style="this.props.style">
      <div
        class="o-ripple position-relative pe-none"
        t-ref="this.rippleRef"
        t-att-style="this.rippleStyle"
      />
    </div>
  </t>
</templates>
