@emartech/ui-framework-utils

UI Framework Utils

Installation

npm install @emartech/ui-framework-utils

Public Utilities

HTMLCustomElement

Base class for Emarsys UI webcomponents. It provides the following capabilities:

• Automatic binding of getters and setters to observed attributes
• Automatic debouncing of the render() or _render() methods (requestRender())
• Callback for when children of the element are changed (childrenChangedCallback())

Attribute Conversion Utilities

Functions that are used to convert HTML attributes to given types.

• convertAttributeToBoolean(value)
• convertAttributeToString(value)
• convertAttributeToArray(value)
• convertAttributeToObject(value)

Keyboard Accessibility Utilites

Functions that are used to find and test elements for keyboard accessbility:

• isKeyboardFocusable(element)
• queryKeyboardFocusableAll(parentElement)
• queryKeyboardFocusable(parentElement)

Formatting utilites

Functions that format values based on provided options:

• formatNumber(options, value)
• formatDuration(value, options)

Date utilites

Functions for handling date-related operations in the dateUtils object (based on dateFns):

Properties

• invalidDateString
• formats
• locales

Methods

• createInvalidDateObject()
• getFormatsByUserConfig(userConfig)
• getLocaleWithFallback(locale)
• parse(value)
• parseByFormat(value, phpFormat)
• parseWithoutTime(value)
• parseWithoutTimeByFormat(value, phpFormat)
• format(date, formatString, options)
• formatByLocale(date, { locale, short })
• formatByName(date, formatName, userConfig)
• formatDistance(date, baseDate, options)
• startOfMonth(date)
• startOfWeek(date)
• endOfMonth(date)
• eachDayOfInterval({ start, end }, options)
• getYear(date)
• getMonth(date)
• getDate(date)
• setMonth(date, month)
• addMonths(date, months)
• addWeeks(date, weeks)
• addDays(date, days)
• subMonths(date, months)
• subDays(date, days)
• subHours(date, hours)
• isBefore(date, dateToCompare)
• isAfter(date, dateToCompare)
• isToday(date)
• isEqual(dateLeft, dateRight)
• isSameDay(dateLeft, dateRight)
• isWithinInterval(date, { start, end })
• isValid(date)

Adding Languages

If you want to add a new language to the Emarsys UI, you also have to add it to this utility library in the following places:

1. src/date/locales.js: Date formatter utility locale config
2. src/format-number/abbreviations.js: Number formatter abbreviations
3. src/format-duration/abbreviations.js: Duration formatter abbreviations
4. src/dateformatter/index.js: Legacy date formatter (deprecated)

Currently supported languages: en, de, es, fr, pt, ru, tr, cn, jp, cz, ko.