[🚀esl-media-query]: ability to track breakpoints transformations

[ala-n]

As an ESL Media Query consumer I want to be able to

• track my project breakpoint changes (e. g. I have 3 main project brekapoints : Small, Medium, Large ; all of them added to the ESLScreenBreakpoints registry; I want to be able to track the environment transformations between breakpoints, with an assumption that breakpoints are not intersects)

   // Detemin the way to subscribe the following method
   onBreakpointChange() {
   }
  

• quickly determinate currently active breakpoint (with the same assumption that project breakpoints are not intersects)

   const currentBp = ESL....; // ?
  

  Note: currently covered with technically equal checks like ESLMediaQuery.for('@Small').matches Note: ESLScreenBreakpoints can contan much more registrated breakpoints then just the main ones (i.e. it is a wrong assumption to consider ALL ESLScreenBreakpoints to be non intersecting)
• (optional, NTH) be able to receive transformation details, e.g.:

   /**
    * @param current - currently active breakpoint
    * @param previous - breakpoint name that was active before
    */
   onBreakpointChange(current: string, previous: string) {
   }
  

  Note: the third point looks like the most tricky one in terms of alternatives, please be attentive

Story output

As the story result is expected to have the following points resolved:

1. Resolution recommendation for cases mentioned in the first part of the story (should be added to the esl-media-query documentation)
2. (If applicable) Small corrections and extensions for esl-media-query module
3. (If applicable) Additional API to resolve mentioned problems

As you may notice, the output of the story technically is undefined right now, that means that all the cases may covered by existing functionality (then only samples in "how to" section is needed), or it can be resolved with a list of the small additions to the currentmodule API, or it may require some big API changes.

Please describe alternatives you've considered with the @exadel-inc/esl-core-team to be sure we chose the right way.

Priority: Normal