New release: Mobiscroll 4.6.0 and 4.6.1

Announcements
1

Hi everyone :wave:

Improved event listing

A lot of people like the event calendar with agenda below, but we kept hearing the same questions. Is it possible to keep the calendar fixed at the top of the page and have the event list scrolling below? Happy to announce that it is supported out of the box. That means you can have a week-view with the weekly to-do listed below and clicking on the days the list will take you to the daily events.

Use marked days and colored days at the same time

The calendar, event calendar and range components support marked and colored days at the same time. No more hacks and compromises to get things working.

React type definitions

Happy to introduce full typescript support for the React components. As typescript is becoming a more common choice for React developers this is a very welcome addition.

Dynamic option bindings in Angular

For an angular developer this isn’t anything new. Basically if an option changes, it should automagically propagate to the component. While it was supported for some of the Mobiscroll options, this was not working for all of them up until now.

Improved desktop listview

The listview is one of those components that was mobile first. Everything started with gestures, sliding, swipe-away, but with more and more people using it on both mobile and desktop, shortcomings started popping up. With this latest release we are making the usage on desktop better by introducing hover effects, click styling and selected states. Both single select & multi-select is supported. So if you’re using the listview for a master-detail view, having the list item selected while loading all the details in a second-pane, you are in luck.

Better load on demand

Besides the desktop improvements we are introducing the onListEnd event that is triggered when someone scrolls to the end of the list. Why is this useful? Well, it makes implementing a “load on demand” logic super-simple. In addition to that you can call the showLoading and hideLoading methods to toggle a loading animation while fetching the data.

Calendar

NEW
  • You can now finally use the marked setting along with colored days, they are not mutually exclusive anymore.
FIXED
  • Using keyboard navigation left and right arrows worked in the reverse direction in RTL mode.
  • We fixed a bug where IE11 threw an exception on day selection if the calendar view was refreshed.

Cards

FIXED
  • We fixed a bug where reinitializing or dynamically updating an option duplicated the collapsible chevron.
  • Added missing type definitions for html attributes.

Datetime

FIXED
  • Added missing exports for Date and Time components in react type definitions.

Eventcalendar

NEW
  • You can now finally use the marked setting along with colored days, they are not mutually exclusive anymore.
  • We are rolling out fixed calendar views with scrollable event listing. No more scrolling the whole page and messy workarounds. (#452)
  • We added support for the pop-over event listing across week and month views. With this we also refactored the code making the file-size a little bit smaller.
  • You can now use the formatDuration function to change the text that is used for the event duration.
FIXED
  • We fixed a bug that was showing incorrect event duration for all-day events.
  • We fixed a bug that occurred with multiple labels loaded dynamically.
  • Links inside event texts weren’t triggered, we fixed that.
  • onEventSelect event argument returned wrong event on calendar label tap, if both labels and event list was used.
  • Using keyboard navigation left and right arrows worked in the reverse direction in RTL mode.
  • We fixed a bug where IE11 threw an exception on day selection if the calendar view was refreshed.
  • In Ionic 1 the onEventSelect was not fired if an event was clicked inside the popover.

Forms

FIXED
  • We fixed the snackbar control that blocked mouse interactions for elements rendered right next to it.
  • We fixed the Angular version rating control since it didn’t work well with fractional values.

General

NEW
  • We implemented dynamic options binding across all settings in the Angular version.
  • Added inputStyle and labelStyle props to react form components: Slider, Progress, Rating, Stepper and Switch. With this you’ll be able to keep consistency across inputs and all these other components too.
  • We added input-style and label-style support to all Angular components.
  • Typescript definitions landed in the React version of products.
FIXED
  • We fixed the Dutch localization, where some of the day names did not start with capital letters.
  • On iPhone, when showing a toast or snackbar right after closing a modal popup caused the page content to scroll back to the top.
  • French translation for Sunday was incorrect (only in form inputs). (#460)
  • The styling of Angular components was wrong after changing theme dynamically.
  • Angularjs model was not set when the keyboard was used to type the value.
  • Added missing i18n property to the type defintions, which enables adding custom language modules.
  • Exported component interfaces to enable the usage of react useRef hooks.
  • Type definition improvements.

Listview

NEW
  • onListEnd event was added and is triggered when someone scrolls to the end of the list view. Use this to implement load on demand, show a loading animation and so on.
  • We added a loading animation that you can show/hide with the following methods: showLoading and hideLoading . The icon inside the loading content can be specified with the loadingIcon setting and it can be anything from the included icon package.
  • Hover styling for list items was added making it more desktop-friendly.
  • Native support for item selection was added. This means no more home-baked selected listview item logic.
  • We added the animateAddRemove setting to turn animations on/off for adding and removing list items. Useful for turning it off on batch operations.
FIXED
  • We fixed a bug in the dynamic update logic of the context setting. This is needed for the listview to be used correctly within Ionic Framework 4.
  • The onItemTap event was fired on the touchend event on touch devices, as a consequence, the click event firing afterwards was causing problems in certain use cases, for example immediately closing a popup opened from the onItemTap event handler.

Numpad

NEW
  • We added support for [mbsc-options] to be used with directives. This was only supported within the components before.
FIXED
  • We added the missing preset setting to the MbscNumpadOptions type definitions.
  • We exported the preset specific settings ( MbscNumpadDateOption , MbscNumpadDecimalOptions …) that were missing in the Angular version.
  • We fixed a bug with the thousandsSeparator that messed up values in some cases: 0.0,005 was printed instead of 0.0005 .

Range

NEW
  • You can now finally use the marked setting along with colored days, they are not mutually exclusive anymore.
FIXED
  • Using keyboard navigation left and right arrows worked in the reverse direction in RTL mode.
  • We fixed a bug where IE11 threw an exception on day selection if the calendar view was refreshed.

Select

FIXED
  • Reduce filter input margin for Material theme.
  • When the Select was opened on iPhone, the content was scrolling and flickering, but only if the select element was wrapped inside a label, and the page content was scrollable.

Timer

FIXED
  • Wheel labels were not updated when language was changed dynamically.

Timespan

FIXED
  • Wheel labels were not updated when language was changed dynamically.