@uh-design-system/component-library 1.6.0-rc.2 → 1.6.0

package/dist/cjs/index.cjs.js

@@ -2,9 +2,9 @@
 
 var data = require('./data-CZn97vqo.js');
 var utils = require('./utils-D94MuKO1.js');
-var paginationUtils = require('./paginationUtils-CZ5l8Yel.js');
-require('./store-CSrs5MF9.js');
-require('./index-zpctLS3M.js');
+var paginationUtils = require('./paginationUtils-BpKN7vkY.js');
+require('./store-CeLiPTgq.js');
+require('./index-C6e6b_ut.js');
 
 
 

package/dist/cjs/linkFactory-BTbzQgZk.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-C6e6b_ut.js');
+
+const linkFactory = (Base) => {
+    const BaseLink = class extends Base {
+        constructor(hostRef) {
+            super();
+            index.registerInstance(this, hostRef);
+        }
+        dsClick;
+        dsRel;
+        dsHrefLang;
+        dsHref;
+        dsTarget;
+        dsDownload;
+        dsAriaLabel;
+        dsAriaLabelledby;
+        handleClick(event) {
+            this.dsClick.emit(event);
+        }
+        get linkProps() {
+            return {
+                dsHref: this.dsHref,
+                dsHrefLang: this.dsHrefLang,
+                dsRel: this.dsRel,
+                dsTarget: this.dsTarget,
+                dsDownload: this.dsDownload,
+            };
+        }
+    };
+    return BaseLink;
+};
+
+exports.linkFactory = linkFactory;

package/dist/cjs/linkUtils-0ArHIom7.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var store = require('./store-CeLiPTgq.js');
+
+const opensInNewTab = (target) => target === '_blank';
+const visuallyHiddenAssistiveText = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Avautuu uuteen välilehteen';
+        case 'sv':
+            return 'Öppnas i en ny flik';
+        default:
+            return 'Opens in a new tab';
+    }
+};
+
+exports.opensInNewTab = opensInNewTab;
+exports.visuallyHiddenAssistiveText = visuallyHiddenAssistiveText;

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-zpctLS3M.js');
+var index = require('./index-C6e6b_ut.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/multipleValueFactory-8OYSq_HF.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var index = require('./index-C6e6b_ut.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/paginationFactory-sYi5uYSE.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-C6e6b_ut.js');
+var paginationContext = require('./paginationContext-BFkETGE7.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-BpKN7vkY.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var store = require('./store-CeLiPTgq.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', 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', 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';
+    }
+};
+const pageNumber = (pageNumber) => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return `Sivu ${pageNumber}`;
+        case 'sv':
+            return `Sida ${pageNumber}`;
+        default:
+            return `Page ${pageNumber}`;
+    }
+};
+
+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.pageNumber = pageNumber;
+exports.pagination = pagination;
+exports.previousPage = previousPage;

package/dist/cjs/store-CeLiPTgq.js

@@ -0,0 +1,309 @@
+'use strict';
+
+var index = require('./index-C6e6b_ut.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 store = createStore({
+    ...initialState,
+});
+const state = store.state;
+const onChange = store.onChange;
+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/tabsFactory-CKZdIr9t.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var index = require('./index-C6e6b_ut.js');
+var tabsContext = require('./tabsContext-DWxNG5rh.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;