@esri/solutions-components 0.7.3 → 0.7.4

package/dist/components/index4.js

@@ -3,202 +3,197 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-const supportedTimeZones = (() => {
-    const platformTimeZones = Intl.supportedValuesOf('timeZone');
-    // not all browsers include these time zones, so we add them to ensure consistent groups
-    const etcTimeZones = [
-        "Etc/GMT+1",
-        "Etc/GMT+10",
-        "Etc/GMT+11",
-        "Etc/GMT+12",
-        "Etc/GMT+2",
-        "Etc/GMT+3",
-        "Etc/GMT+4",
-        "Etc/GMT+5",
-        "Etc/GMT+6",
-        "Etc/GMT+7",
-        "Etc/GMT+8",
-        "Etc/GMT+9",
-        "Etc/GMT-1",
-        "Etc/GMT-10",
-        "Etc/GMT-11",
-        "Etc/GMT-12",
-        "Etc/GMT-13",
-        "Etc/GMT-14",
-        "Etc/GMT-2",
-        "Etc/GMT-3",
-        "Etc/GMT-4",
-        "Etc/GMT-5",
-        "Etc/GMT-6",
-        "Etc/GMT-7",
-        "Etc/GMT-8",
-        "Etc/GMT-9"
-    ];
-    return [...new Set([...platformTimeZones, ...etcTimeZones])];
-})();
+import { getRenderingRef, forceUpdate } from '@stencil/core/internal/client';
 
-const now = new Date();
-const startDate = now.toISOString();
-const daysInYear = 365;
-const groupDateRange = daysInYear;
-const defaultGroupingOptions = {
-    startDate,
-    groupDateRange,
-    debug: false,
-};
-
-const continentAllowList = new Set([
-    'Europe',
-    'Asia',
-    'America',
-    'America/Argentina',
-    'Africa',
-    'Australia',
-    'Pacific',
-    'Atlantic',
-    'Antarctica',
-    'Arctic',
-    'Indian',
-]);
-const _getDates = (startDate, numberDays, dateEngine) => {
-    const dateArray = [];
-    let date = dateEngine.create(startDate);
-    for (let i = 0; i <= numberDays; i++) {
-        date = dateEngine.increase(date);
-        dateArray.push(dateEngine.formatToIsoDateString(date));
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
     }
-    return dateArray;
-};
-const _extractContinent = (label) => {
-    if (label.includes('Istanbul')) {
-        return 'Europe';
+    else if (!items.includes(value)) {
+        items.push(value);
     }
-    const lastIndex = label.lastIndexOf('/');
-    return lastIndex === -1 ? label : label.slice(0, lastIndex);
 };
-const _isRegularContinent = (continent) => continentAllowList.has(continent);
-const generateTimeZoneMetadata = (timeZoneItems, startDate, numberDays, dateEngine, debug = false) => {
-    const processedDates = new Map();
-    if (debug) {
-        console.log(`Initializing data starting ${startDate} with ${numberDays} days in the future, comparing ${timeZoneItems.length} timezones`);
-    }
-    const theDates = _getDates(startDate, numberDays, dateEngine);
-    return timeZoneItems.map((tzItem) => {
-        const label = tzItem.label;
-        const continent = _extractContinent(label);
-        const dates = theDates.map((date) => {
-            const key = `${date}-${label}`;
-            let utc = processedDates.get(key);
-            if (utc) {
-                return utc;
-            }
-            utc = dateEngine.isoToTimeZone(date, label);
-            processedDates.set(key, utc);
-            return utc;
-        });
-        return {
-            ...tzItem,
-            continent,
-            isRegularContinent: _isRegularContinent(continent),
-            dates,
-        };
-    });
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
 };
-const compareDateArrs = (array1, array2, dateEngine) => array1.length === array2.length &&
-    array1.every((value, index) => dateEngine.same(value, array2[index]));
-const getGroupLabelTimeZoneIndices = (rawTZs, max = 5) => {
-    const shrinkedTzs = rawTZs.filter(({ label }) => _isRegularContinent(_extractContinent(label)));
-    if (shrinkedTzs.length === 0) {
-        return [0];
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
     }
-    const validLabels = shrinkedTzs.map((tz) => rawTZs.indexOf(tz));
-    return equallyDistributedSampling(validLabels, max);
-};
-function equallyDistributedSampling(items, maxItems = 5) {
-    const totalItems = items.length;
-    if (totalItems <= maxItems) {
-        return items;
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
     }
-    const numberItemsToSelect = Math.min(totalItems - 2, maxItems - 2);
-    const stepSize = (totalItems - 1) / (numberItemsToSelect + 1);
-    return [
-        items[0],
-        ...Array.from({ length: numberItemsToSelect }, (_, i) => items[Math.round((i + 1) * stepSize)]),
-        items[totalItems - 1],
-    ];
-}
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
 
-async function groupTimeZones(options) {
-    const { debug, groupDateRange, hooks, startDate, dateEngine } = {
-        ...defaultGroupingOptions,
-        ...options,
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
     };
-    const grouping = [];
-    if (!dateEngine) {
-        throw new Error('dateEngine is required');
-    }
-    const timeZoneItems = supportedTimeZones.map((tz) => ({ label: tz }));
-    hooks?.onBeforeTimeZoneMetadataCreate?.(timeZoneItems);
-    const timeZoneMetadata = generateTimeZoneMetadata(timeZoneItems, startDate, groupDateRange, dateEngine, debug);
-    hooks?.onTimeZoneMetadataCreate?.(timeZoneMetadata);
-    // We traverse the mappedDB and see if we find matches by comparing each set
-    // of transformed date for that specific TZ.
-    for (const tzMetadatumI of timeZoneMetadata) {
-        const { label, continent, dates } = tzMetadatumI;
-        // ignore if we visited this element already
-        if (tzMetadatumI.visited) {
-            continue;
+    const reset = () => {
+        var _a;
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
         }
-        // Mark element as already visited
-        tzMetadatumI.visited = true;
-        // The grouped timezone that we want as a result
-        const newGroup = {
-            labelTzIndices: undefined,
-            tzs: [{ label }],
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
         };
-        hooks?.onGroupCreate?.(newGroup, tzMetadatumI);
-        for (const tzMetadatumJ of timeZoneMetadata.filter((_) => !_.visited)) {
-            const { label: labelJ, continent: continentJ, isRegularContinent: isRegularContinentJ, dates: datesJ, } = tzMetadatumJ;
-            // We define a matching TZ by:
-            // 1) if both continents match (avoid grouping Antarctica with anything else)
-            // 2) if the transformed dates match in both TZs
-            if ((continent === continentJ || !isRegularContinentJ) &&
-                compareDateArrs(dates, datesJ, dateEngine)) {
-                const tzItem = { label: labelJ };
-                newGroup.tzs.push(tzItem);
-                hooks?.onGroupTimeZoneAdd?.(newGroup, tzItem, tzMetadatumJ);
-                // Mark element as already visited
-                tzMetadatumJ.visited = true;
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
             }
-        }
-        grouping.push(newGroup);
-        hooks?.onGroupAdd?.(newGroup);
-    }
-    // Now that we have a group, we want an easy way to find a fitting label for the group
-    // which is defined as the list of the most-common 7 cities, shown in alphabetical order
-    const finalGrouping = grouping
-        .map((group) => {
-        hooks?.onBeforeFinalGroupCreate?.(group);
-        group.tzs = group.tzs.sort((a, b) => a.label.localeCompare(b.label));
-        const finalGrouping = {
-            labelTzIndices: getGroupLabelTimeZoneIndices(group.tzs, 7),
-            tzs: group.tzs.map((_) => _.label),
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
         };
-        hooks?.onFinalGroupCreate?.(finalGrouping, group);
-        return finalGrouping;
-    })
-        .sort((a, b) => b.tzs.length - a.tzs.length);
-    if (debug) {
-        const missingTzs = supportedTimeZones
-            .map((tz) => (finalGrouping.some((y) => y.tzs.includes(tz)) ? null : tz))
-            .filter(Boolean);
-        if (missingTzs.length > 0) {
-            throw new Error(`There are ${missingTzs.length} missing timezones: ${missingTzs.toString()}`);
-        }
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
     }
-    return hooks?.onFinalGroupingCreate
-        ? hooks.onFinalGroupingCreate(finalGrouping)
-        : finalGrouping;
-}
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
 
-export { groupTimeZones };
+export { createStore as c };

package/dist/components/index5.js

@@ -3,69 +3,202 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-class NativeDateEngine {
-    constructor() {
-        this._formatterCache = new Map();
-        this._commonDateTimeFormatterOptions = {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            timeZoneName: 'shortOffset',
-        };
-    }
-    get name() {
-        return 'native';
-    }
-    create(date) {
-        return new Date(date);
+const supportedTimeZones = (() => {
+    const platformTimeZones = Intl.supportedValuesOf('timeZone');
+    // not all browsers include these time zones, so we add them to ensure consistent groups
+    const etcTimeZones = [
+        "Etc/GMT+1",
+        "Etc/GMT+10",
+        "Etc/GMT+11",
+        "Etc/GMT+12",
+        "Etc/GMT+2",
+        "Etc/GMT+3",
+        "Etc/GMT+4",
+        "Etc/GMT+5",
+        "Etc/GMT+6",
+        "Etc/GMT+7",
+        "Etc/GMT+8",
+        "Etc/GMT+9",
+        "Etc/GMT-1",
+        "Etc/GMT-10",
+        "Etc/GMT-11",
+        "Etc/GMT-12",
+        "Etc/GMT-13",
+        "Etc/GMT-14",
+        "Etc/GMT-2",
+        "Etc/GMT-3",
+        "Etc/GMT-4",
+        "Etc/GMT-5",
+        "Etc/GMT-6",
+        "Etc/GMT-7",
+        "Etc/GMT-8",
+        "Etc/GMT-9"
+    ];
+    return [...new Set([...platformTimeZones, ...etcTimeZones])];
+})();
+
+const now = new Date();
+const startDate = now.toISOString();
+const daysInYear = 365;
+const groupDateRange = daysInYear;
+const defaultGroupingOptions = {
+    startDate,
+    groupDateRange,
+    debug: false,
+};
+
+const continentAllowList = new Set([
+    'Europe',
+    'Asia',
+    'America',
+    'America/Argentina',
+    'Africa',
+    'Australia',
+    'Pacific',
+    'Atlantic',
+    'Antarctica',
+    'Arctic',
+    'Indian',
+]);
+const _getDates = (startDate, numberDays, dateEngine) => {
+    const dateArray = [];
+    let date = dateEngine.create(startDate);
+    for (let i = 0; i <= numberDays; i++) {
+        date = dateEngine.increase(date);
+        dateArray.push(dateEngine.formatToIsoDateString(date));
     }
-    increase(date) {
-        const oneDayInMs = 86400000;
-        return new Date(date.getTime() + oneDayInMs);
+    return dateArray;
+};
+const _extractContinent = (label) => {
+    if (label.includes('Istanbul')) {
+        return 'Europe';
     }
-    formatToIsoDateString(date) {
-        const year = date.getFullYear();
-        const month = date.getMonth() + 1;
-        const day = date.getDate();
-        return `${year}-${month.toString().padStart(2, '0')}-${day
-            .toString()
-            .padStart(2, '0')}`;
+    const lastIndex = label.lastIndexOf('/');
+    return lastIndex === -1 ? label : label.slice(0, lastIndex);
+};
+const _isRegularContinent = (continent) => continentAllowList.has(continent);
+const generateTimeZoneMetadata = (timeZoneItems, startDate, numberDays, dateEngine, debug = false) => {
+    const processedDates = new Map();
+    if (debug) {
+        console.log(`Initializing data starting ${startDate} with ${numberDays} days in the future, comparing ${timeZoneItems.length} timezones`);
     }
-    isoToTimeZone(isoDate, tz) {
-        const date = this._toDate(isoDate);
-        const formatter = this._getFormatter(tz);
-        const parts = formatter.formatToParts(date);
-        const [offset] = parts
-            .filter(({ type }) => type === 'timeZoneName')
-            .map(({ value }) => value);
-        const tzOffset = this._getTimeZoneOffsetInMins(offset);
-        const tzOffsetMinutes = date.getMinutes() - (date.getTimezoneOffset() - tzOffset);
-        date.setMinutes(tzOffsetMinutes);
-        return date;
+    const theDates = _getDates(startDate, numberDays, dateEngine);
+    return timeZoneItems.map((tzItem) => {
+        const label = tzItem.label;
+        const continent = _extractContinent(label);
+        const dates = theDates.map((date) => {
+            const key = `${date}-${label}`;
+            let utc = processedDates.get(key);
+            if (utc) {
+                return utc;
+            }
+            utc = dateEngine.isoToTimeZone(date, label);
+            processedDates.set(key, utc);
+            return utc;
+        });
+        return {
+            ...tzItem,
+            continent,
+            isRegularContinent: _isRegularContinent(continent),
+            dates,
+        };
+    });
+};
+const compareDateArrs = (array1, array2, dateEngine) => array1.length === array2.length &&
+    array1.every((value, index) => dateEngine.same(value, array2[index]));
+const getGroupLabelTimeZoneIndices = (rawTZs, max = 5) => {
+    const shrinkedTzs = rawTZs.filter(({ label }) => _isRegularContinent(_extractContinent(label)));
+    if (shrinkedTzs.length === 0) {
+        return [0];
     }
-    same(date1, date2) {
-        return date1.getTime() === date2.getTime();
+    const validLabels = shrinkedTzs.map((tz) => rawTZs.indexOf(tz));
+    return equallyDistributedSampling(validLabels, max);
+};
+function equallyDistributedSampling(items, maxItems = 5) {
+    const totalItems = items.length;
+    if (totalItems <= maxItems) {
+        return items;
     }
-    _toDate(isoDate) {
-        return new Date(isoDate);
+    const numberItemsToSelect = Math.min(totalItems - 2, maxItems - 2);
+    const stepSize = (totalItems - 1) / (numberItemsToSelect + 1);
+    return [
+        items[0],
+        ...Array.from({ length: numberItemsToSelect }, (_, i) => items[Math.round((i + 1) * stepSize)]),
+        items[totalItems - 1],
+    ];
+}
+
+async function groupTimeZones(options) {
+    const { debug, groupDateRange, hooks, startDate, dateEngine } = {
+        ...defaultGroupingOptions,
+        ...options,
+    };
+    const grouping = [];
+    if (!dateEngine) {
+        throw new Error('dateEngine is required');
     }
-    _getFormatter(tz) {
-        let formatter = this._formatterCache.get(tz);
-        if (!formatter) {
-            formatter = new Intl.DateTimeFormat('en-US', {
-                timeZone: tz,
-                ...this._commonDateTimeFormatterOptions,
-            });
-            this._formatterCache.set(tz, formatter);
+    const timeZoneItems = supportedTimeZones.map((tz) => ({ label: tz }));
+    hooks?.onBeforeTimeZoneMetadataCreate?.(timeZoneItems);
+    const timeZoneMetadata = generateTimeZoneMetadata(timeZoneItems, startDate, groupDateRange, dateEngine, debug);
+    hooks?.onTimeZoneMetadataCreate?.(timeZoneMetadata);
+    // We traverse the mappedDB and see if we find matches by comparing each set
+    // of transformed date for that specific TZ.
+    for (const tzMetadatumI of timeZoneMetadata) {
+        const { label, continent, dates } = tzMetadatumI;
+        // ignore if we visited this element already
+        if (tzMetadatumI.visited) {
+            continue;
+        }
+        // Mark element as already visited
+        tzMetadatumI.visited = true;
+        // The grouped timezone that we want as a result
+        const newGroup = {
+            labelTzIndices: undefined,
+            tzs: [{ label }],
+        };
+        hooks?.onGroupCreate?.(newGroup, tzMetadatumI);
+        for (const tzMetadatumJ of timeZoneMetadata.filter((_) => !_.visited)) {
+            const { label: labelJ, continent: continentJ, isRegularContinent: isRegularContinentJ, dates: datesJ, } = tzMetadatumJ;
+            // We define a matching TZ by:
+            // 1) if both continents match (avoid grouping Antarctica with anything else)
+            // 2) if the transformed dates match in both TZs
+            if ((continent === continentJ || !isRegularContinentJ) &&
+                compareDateArrs(dates, datesJ, dateEngine)) {
+                const tzItem = { label: labelJ };
+                newGroup.tzs.push(tzItem);
+                hooks?.onGroupTimeZoneAdd?.(newGroup, tzItem, tzMetadatumJ);
+                // Mark element as already visited
+                tzMetadatumJ.visited = true;
+            }
         }
-        return formatter;
+        grouping.push(newGroup);
+        hooks?.onGroupAdd?.(newGroup);
     }
-    _getTimeZoneOffsetInMins(gmtTimeZone) {
-        const [sign, ...hoursMinutes] = gmtTimeZone.slice(3);
-        const [hours, minutes] = hoursMinutes.join('').split(':');
-        const signMultiplier = sign === '+' ? 1 : -1;
-        return signMultiplier * (Number(hours) * 60 + Number(minutes || 0));
+    // Now that we have a group, we want an easy way to find a fitting label for the group
+    // which is defined as the list of the most-common 7 cities, shown in alphabetical order
+    const finalGrouping = grouping
+        .map((group) => {
+        hooks?.onBeforeFinalGroupCreate?.(group);
+        group.tzs = group.tzs.sort((a, b) => a.label.localeCompare(b.label));
+        const finalGrouping = {
+            labelTzIndices: getGroupLabelTimeZoneIndices(group.tzs, 7),
+            tzs: group.tzs.map((_) => _.label),
+        };
+        hooks?.onFinalGroupCreate?.(finalGrouping, group);
+        return finalGrouping;
+    })
+        .sort((a, b) => b.tzs.length - a.tzs.length);
+    if (debug) {
+        const missingTzs = supportedTimeZones
+            .map((tz) => (finalGrouping.some((y) => y.tzs.includes(tz)) ? null : tz))
+            .filter(Boolean);
+        if (missingTzs.length > 0) {
+            throw new Error(`There are ${missingTzs.length} missing timezones: ${missingTzs.toString()}`);
+        }
     }
+    return hooks?.onFinalGroupingCreate
+        ? hooks.onFinalGroupingCreate(finalGrouping)
+        : finalGrouping;
 }
 
-export { NativeDateEngine as DateEngine };
+export { groupTimeZones };