@uh-design-system/component-library 1.5.1 → 1.5.2-rc.1

package/dist/cjs/multipleValueFactory-CaHM2uLj.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var index = require('./index-DE2Ldy1x.js');
+
+const multipleValueFactory = (Base) => {
+    const BaseMultiple = class extends Base {
+        constructor(hostRef) {
+            super();
+            index.registerInstance(this, hostRef);
+        }
+        value = null;
+        withValue(value) {
+            if (!this.value) {
+                return [value];
+            }
+            else if (!this.value.includes(value)) {
+                return [...this.value, value];
+            }
+            return this.value;
+        }
+        withoutValue(value) {
+            if (this.value?.includes(value)) {
+                return this.value.filter(v => v !== value);
+            }
+            return this.value;
+        }
+        withoutValues(values) {
+            return this.value?.filter(v => !values.includes(v)) || this.value;
+        }
+        inValue(value) {
+            return this.value?.includes(value) || false;
+        }
+        toValue(value) {
+            if (!value)
+                return null;
+            if (Array.isArray(value))
+                return value;
+            return [value];
+        }
+        getValueItem(index) {
+            return this.value?.[index] || null;
+        }
+    };
+    return BaseMultiple;
+};
+
+exports.multipleValueFactory = multipleValueFactory;

package/dist/cjs/paginationContext-ipc_3HhT.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var utils = require('./utils-DK6WJuOa.js');
+
+const CONTEXT_KEY = '__ds_pagination_context__';
+const CONTEXT_UPDATE_EVENT = 'dsPaginationContextUpdate';
+function getChildSelector(parentElement) {
+    const itemTag = utils.transformTagName('ds-pagination-item', 'ds-pagination', parentElement);
+    const pageTag = utils.transformTagName('ds-pagination-page', 'ds-pagination', parentElement);
+    const ellipsisTag = utils.transformTagName('ds-pagination-ellipsis', 'ds-pagination', parentElement);
+    return [itemTag, pageTag, ellipsisTag].join(', ');
+}
+function dispatchContextUpdate(element, context, isCompact) {
+    element.dispatchEvent(new CustomEvent(CONTEXT_UPDATE_EVENT, {
+        bubbles: false,
+        detail: { ...context, isCompact },
+    }));
+}
+function storePaginationContext(element, context) {
+    element[CONTEXT_KEY] = context;
+}
+function providePaginationContextToSlots(element, context) {
+    element[CONTEXT_KEY] = context;
+    const shadowRoot = element.shadowRoot;
+    if (!shadowRoot)
+        return;
+    const childSelector = getChildSelector(element);
+    const compactSlot = shadowRoot.querySelector('slot[name="compact"]');
+    if (compactSlot) {
+        const compactElements = compactSlot.assignedElements({ flatten: true });
+        compactElements.forEach(el => {
+            if (el.matches(childSelector)) {
+                dispatchContextUpdate(el, context, true);
+            }
+            el.querySelectorAll(childSelector).forEach(child => {
+                dispatchContextUpdate(child, context, true);
+            });
+        });
+    }
+    const fullSlot = shadowRoot.querySelector('slot[name="full"]');
+    if (fullSlot) {
+        const fullElements = fullSlot.assignedElements({ flatten: true });
+        fullElements.forEach(el => {
+            if (el.matches(childSelector)) {
+                dispatchContextUpdate(el, context, false);
+            }
+            el.querySelectorAll(childSelector).forEach(child => {
+                dispatchContextUpdate(child, context, false);
+            });
+        });
+    }
+}
+function consumePaginationContext(element) {
+    let parent = element.parentElement;
+    while (parent) {
+        if (parent[CONTEXT_KEY]) {
+            const context = parent[CONTEXT_KEY];
+            return context;
+        }
+        parent = parent.parentElement;
+    }
+    console.warn(`${element.tagName} must be used inside ds-pagination component`);
+    return null;
+}
+
+exports.consumePaginationContext = consumePaginationContext;
+exports.providePaginationContextToSlots = providePaginationContextToSlots;
+exports.storePaginationContext = storePaginationContext;

package/dist/cjs/paginationFactory-QgGFY7xD.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-DE2Ldy1x.js');
+var paginationContext = require('./paginationContext-ipc_3HhT.js');
+
+const paginationFactory = (Base) => {
+    const BasePagination = class extends Base {
+        constructor(hostRef) {
+            super();
+            index.registerInstance(this, hostRef);
+        }
+        context;
+        contextUpdateHandler = (event) => {
+            const customEvent = event;
+            this.context = customEvent.detail;
+        };
+        get paginationContext() {
+            return this.context;
+        }
+        componentWillLoad() {
+            this.context = paginationContext.consumePaginationContext(this.el) || undefined;
+            this.el.addEventListener('dsPaginationContextUpdate', this.contextUpdateHandler);
+        }
+        disconnectedCallback() {
+            this.el.removeEventListener('dsPaginationContextUpdate', this.contextUpdateHandler);
+        }
+    };
+    return BasePagination;
+};
+
+exports.paginationFactory = paginationFactory;

package/dist/cjs/paginationUtils-CFgXa548.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var store = require('./store-B6QgBSUx.js');
+
+const calculatePaginationPages = (currentPage, totalPages) => {
+    const pages = [];
+    if (totalPages <= 9) {
+        for (let i = 1; i <= totalPages; i++) {
+            pages.push(i);
+        }
+        return pages;
+    }
+    pages.push(1);
+    if (currentPage <= 5) {
+        for (let i = 2; i <= 7; i++) {
+            pages.push(i);
+        }
+        pages.push('ellipsis');
+        pages.push(totalPages);
+        return pages;
+    }
+    if (currentPage >= totalPages - 4) {
+        pages.push('ellipsis');
+        for (let i = totalPages - 6; i <= totalPages; i++) {
+            pages.push(i);
+        }
+        return pages;
+    }
+    pages.push('ellipsis');
+    for (let i = currentPage - 2; i <= currentPage + 2; i++) {
+        pages.push(i);
+    }
+    pages.push('ellipsis');
+    pages.push(totalPages);
+    return pages;
+};
+const pagination = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Sivutus';
+        case 'sv':
+            return 'Paginering';
+        default:
+            return 'Pagination';
+    }
+};
+const firstPage = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Alkuun';
+        case 'sv':
+            return 'Till början';
+        default:
+            return 'First';
+    }
+};
+const lastPage = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Loppuun';
+        case 'sv':
+            return 'Till slutet';
+        default:
+            return 'Last';
+    }
+};
+const previousPage = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Edellinen';
+        case 'sv':
+            return 'Föregående';
+        default:
+            return 'Previous';
+    }
+};
+const nextPage = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Seuraava';
+        case 'sv':
+            return 'Nästa';
+        default:
+            return 'Next';
+    }
+};
+const goToFirstPage = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Ensimmäinen sivu';
+        case 'sv':
+            return 'Första sidan';
+        default:
+            return 'First page';
+    }
+};
+const goToLastPage = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Viimeinen sivu';
+        case 'sv':
+            return 'Sista sidan';
+        default:
+            return 'Last page';
+    }
+};
+const goToPreviousPage = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Edellinen sivu';
+        case 'sv':
+            return 'Föregående sida';
+        default:
+            return 'Previous page';
+    }
+};
+const goToNextPage = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Seuraava sivu';
+        case 'sv':
+            return 'Nästa sida';
+        default:
+            return 'Next page';
+    }
+};
+const currentPage = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Nykyinen sivu';
+        case 'sv':
+            return 'Nuvarande sida';
+        default:
+            return 'Current page';
+    }
+};
+
+exports.calculatePaginationPages = calculatePaginationPages;
+exports.currentPage = currentPage;
+exports.firstPage = firstPage;
+exports.goToFirstPage = goToFirstPage;
+exports.goToLastPage = goToLastPage;
+exports.goToNextPage = goToNextPage;
+exports.goToPreviousPage = goToPreviousPage;
+exports.lastPage = lastPage;
+exports.nextPage = nextPage;
+exports.pagination = pagination;
+exports.previousPage = previousPage;

package/dist/cjs/store-B6QgBSUx.js

@@ -0,0 +1,307 @@
+'use strict';
+
+var index = require('./index-DE2Ldy1x.js');
+
+const appendToMap = (map, propName, value) => {
+    let refs = map.get(propName);
+    if (!refs) {
+        refs = [];
+        map.set(propName, refs);
+    }
+    if (!refs.some((ref) => ref.deref() === value)) {
+        refs.push(new WeakRef(value));
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * 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()) {
+        const refs = map.get(key).filter((ref) => {
+            const elm = ref.deref();
+            return elm && isConnected(elm);
+        });
+        map.set(key, refs);
+    }
+}, 2_000);
+const core = index.StencilCore;
+const forceUpdate = core.forceUpdate;
+const getRenderingRef = core.getRenderingRef;
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function' || typeof forceUpdate !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const ensureForceUpdate = forceUpdate;
+    const ensureGetRenderingRef = getRenderingRef;
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = ensureGetRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const refs = elmsToUpdate.get(propName);
+            if (refs) {
+                const nextRefs = refs.filter((ref) => {
+                    const elm = ref.deref();
+                    if (!elm)
+                        return false;
+                    return ensureForceUpdate(elm);
+                });
+                elmsToUpdate.set(propName, nextRefs);
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((refs) => {
+                refs.forEach((ref) => {
+                    const elm = ref.deref();
+                    if (elm)
+                        ensureForceUpdate(elm);
+                });
+            });
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const resolveDefaultState = () => (unwrap(defaultState) ?? {});
+    const initialState = resolveDefaultState();
+    let states = new Map(Object.entries(initialState));
+    const proxyAvailable = typeof Proxy !== 'undefined';
+    const plainState = proxyAvailable ? null : {};
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    // Track onChange listeners to enable removeListener functionality
+    const changeListeners = new Map();
+    const reset = () => {
+        // 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(resolveDefaultState()));
+        if (!proxyAvailable) {
+            syncPlainStateKeys();
+        }
+        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);
+            if (!proxyAvailable) {
+                ensurePlainProperty(propName);
+            }
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (proxyAvailable
+        ? new Proxy(initialState, {
+            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;
+            },
+        })
+        : (() => {
+            syncPlainStateKeys();
+            return plainState;
+        })());
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const setHandler = (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        };
+        const resetHandler = () => {
+            const snapshot = resolveDefaultState();
+            cb(snapshot[propName]);
+        };
+        // Register the handlers
+        const unSet = on('set', setHandler);
+        const unReset = on('reset', resetHandler);
+        // Track the relationship between the user callback and internal handlers
+        changeListeners.set(cb, { setHandler, resetHandler, propName });
+        return () => {
+            unSet();
+            unReset();
+            changeListeners.delete(cb);
+        };
+    };
+    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));
+    };
+    const removeListener = (propName, listener) => {
+        const listenerInfo = changeListeners.get(listener);
+        if (listenerInfo && listenerInfo.propName === propName) {
+            // Remove the specific handlers that were created for this listener
+            removeFromArray(handlers.set, listenerInfo.setHandler);
+            removeFromArray(handlers.reset, listenerInfo.resetHandler);
+            changeListeners.delete(listener);
+        }
+    };
+    function ensurePlainProperty(key) {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        if (Object.prototype.hasOwnProperty.call(plainState, key)) {
+            return;
+        }
+        Object.defineProperty(plainState, key, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return get(key);
+            },
+            set(value) {
+                set(key, value);
+            },
+        });
+    }
+    function syncPlainStateKeys() {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        const knownKeys = new Set(states.keys());
+        for (const key of Object.keys(plainState)) {
+            if (!knownKeys.has(key)) {
+                delete plainState[key];
+            }
+        }
+        for (const key of knownKeys) {
+            ensurePlainProperty(key);
+        }
+    }
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+        removeListener,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+const languages = ['fi', 'sv', 'en'];
+const isLanguage = (language) => {
+    return languages.includes(language);
+};
+const defaultLanguage = 'en';
+const initialState = {
+    language: defaultLanguage,
+};
+const { state, onChange } = createStore({
+    ...initialState,
+});
+const getLanguage = () => state.language;
+const setLanguage = (language) => {
+    if (!isLanguage(language)) {
+        console.warn(`Unsupported language "${language}" provided to component library. Falling back to default language "${defaultLanguage}".`);
+        return;
+    }
+    state.language = language;
+};
+const initialize = ({ language = defaultLanguage } = {}) => {
+    setLanguage(language);
+};
+
+exports.defaultLanguage = defaultLanguage;
+exports.getLanguage = getLanguage;
+exports.initialize = initialize;
+exports.onChange = onChange;
+exports.setLanguage = setLanguage;

package/dist/cjs/tabsContext-DD2_65O-.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var utils = require('./utils-DK6WJuOa.js');
+
+const CONTEXT_KEY = '__ds_tabs_context__';
+const CONTEXT_UPDATE_EVENT = 'dsTabsContextUpdate';
+function getChildSelector(parentElement) {
+    const tabListTag = utils.transformTagName('ds-tablist', 'ds-tabs', parentElement);
+    const tabPanelTag = utils.transformTagName('ds-tabpanel', 'ds-tabs', parentElement);
+    const tabTag = utils.transformTagName('ds-tab', 'ds-tabs', parentElement);
+    return [tabListTag, tabPanelTag, tabTag].join(', ');
+}
+function isInCurrentTabsBoundary(child, currentTabsElement) {
+    const tabsTag = utils.transformTagName('ds-tabs', 'ds-tabs', currentTabsElement);
+    const closestTabs = child.closest(tabsTag);
+    return closestTabs instanceof HTMLElement && closestTabs === currentTabsElement;
+}
+function dispatchContextUpdate(element, context) {
+    element.dispatchEvent(new CustomEvent(CONTEXT_UPDATE_EVENT, {
+        bubbles: false,
+        detail: { ...context },
+    }));
+}
+function storeTabsContext(element, context) {
+    element[CONTEXT_KEY] = context;
+}
+function provideTabsContext(element, context) {
+    storeTabsContext(element, context);
+    const childSelector = getChildSelector(element);
+    const children = element.querySelectorAll(childSelector);
+    children.forEach(child => {
+        if (isInCurrentTabsBoundary(child, element)) {
+            dispatchContextUpdate(child, context);
+        }
+    });
+}
+function consumeTabsContext(element) {
+    let parent = element.parentElement;
+    while (parent) {
+        if (parent[CONTEXT_KEY]) {
+            const context = parent[CONTEXT_KEY];
+            return context;
+        }
+        parent = parent.parentElement;
+    }
+    console.warn(`${element.tagName} must be used inside ds-tabs component`);
+    return null;
+}
+
+exports.CONTEXT_UPDATE_EVENT = CONTEXT_UPDATE_EVENT;
+exports.consumeTabsContext = consumeTabsContext;
+exports.provideTabsContext = provideTabsContext;
+exports.storeTabsContext = storeTabsContext;

package/dist/cjs/tabsFactory-DdZp13_J.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var index = require('./index-DE2Ldy1x.js');
+var tabsContext = require('./tabsContext-DD2_65O-.js');
+
+const tabsFactory = (Base) => {
+    const BaseTabs = class extends Base {
+        constructor(hostRef) {
+            super();
+            index.registerInstance(this, hostRef);
+        }
+        context;
+        contextUpdateHandler = (event) => {
+            const customEvent = event;
+            this.context = customEvent.detail;
+        };
+        componentWillLoad() {
+            this.context = tabsContext.consumeTabsContext(this.el) || undefined;
+            this.el.addEventListener(tabsContext.CONTEXT_UPDATE_EVENT, this.contextUpdateHandler);
+        }
+        disconnectedCallback() {
+            this.el.removeEventListener(tabsContext.CONTEXT_UPDATE_EVENT, this.contextUpdateHandler);
+        }
+    };
+    return BaseTabs;
+};
+
+exports.tabsFactory = tabsFactory;