Utilities

import { mcUtil } from '@thewebformula/materially/services';
// import { mcUtil } from '@thewebformula/materially';

// --- Below are some of the more useful methods ---

// debounce function calls by milliseconds
mcUtil.debounce(() => {}, 200);

// throttle function calls by request animations frames
mcUtil.rafThrottle(() => {});

// Jaro Winkler based fuzzy searching
mcUtil.fuzzySearch('search term', [ { label: 'One', value: 1 }, { label: 'Two', value: 2 } ], distanceCap /* defaults to 0.2 */ );

// toggle between dark and light color schemes. This can also be done via css
mcUtil.toggleColorScheme();
            

import { mcDate } from '@thewebformula/materially/services';
// import { mcDate } from '@thewebformula/materially';

// --- Below are some of the more useful methods ---

// Set local for anything using this util, including date pickers
mcDate.locale = 'EN-US';

// Set timezone for anything using this util, including date pickers
mcDate.timeZone = 'GMT';

mcDate.hourCycle; // h12 - h24

// Parse accepts strings (yyyy-mm-dd) and Date objects
// returns Date object
mcDate.parse('2023-01-20');

// build on top of Intl.DateTimeFormat, using the utils locale and timezone
// returns String
// ddd, MMM DD = Thu, Dec 12
// YYYY-MMMM-dddd = 2019-month-wednesday
// YY/MMM/ddd = 19/10/22
mcDate.format(new Date(), 'yyyy-mm-dd');

// returns Date object
mcDate.buildFromParts({ year: '2023', month: '01', day: '20' });

mcDate.getYear(new Date());
mcDate.getMonth(new Date());
mcDate.getWeekDay(new Date());
mcDate.getMonthDay(new Date());
mcDate.getFirstDateOfMonth(new Date());
mcDate.getParts(new Date()); // { year, month, day }

mcDate.getMonthNames();
mcDate.getMonthNamesShort();
mcDate.getDayNames('long | short | narrow'); // mon, tue, wed, thur, fri

// Add to individual parts of date, use negative numbers to subtract
// returns Date object
mcDate.addToDateByParts(new Date(), { year: 1, month: 1, day: 1 });

// Set individual parts of date
// returns Date object
mcDate.setDateByParts(new Date(), { year: 1, month: 1, day: 1 });
            

import { mcDevice } from '@thewebformula/materially/services';
// import { mcDevice } from '@thewebformula/materially';

mcDevice.state; // expanded - medium - compact
// mcDevice.COMPACT
// mcDevice.MEDIUM
// mcDevice.EXPANDED
if (mcDevice.state === mcDevice.COMPACT) {
  // do work
}

mcDevice.orientation; // landscape - portrait
mcDevice.hasTouchScreen; // true - false

window.addEventListener('mcwindowstatechange', event => {
  // listen for state changes
  // there will be no lastState on initial event
  console.log(event.detail.state, event.detail.lastState);
})