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

package/dist/esm/multipleValueFactory-BuYHHdO3.js

@@ -0,0 +1,45 @@
+import { r as registerInstance } from './index-WKPTmD1Z.js';
+
+const multipleValueFactory = (Base) => {
+    const BaseMultiple = class extends Base {
+        constructor(hostRef) {
+            super();
+            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;
+};
+
+export { multipleValueFactory as m };

package/dist/esm/paginationFactory-TDryWyOU.js

@@ -0,0 +1,29 @@
+import { r as registerInstance } from './index-WKPTmD1Z.js';
+import { c as consumePaginationContext } from './paginationContext-B834L-N9.js';
+
+const paginationFactory = (Base) => {
+    const BasePagination = class extends Base {
+        constructor(hostRef) {
+            super();
+            registerInstance(this, hostRef);
+        }
+        context;
+        contextUpdateHandler = (event) => {
+            const customEvent = event;
+            this.context = customEvent.detail;
+        };
+        get paginationContext() {
+            return this.context;
+        }
+        componentWillLoad() {
+            this.context = consumePaginationContext(this.el) || undefined;
+            this.el.addEventListener('dsPaginationContextUpdate', this.contextUpdateHandler);
+        }
+        disconnectedCallback() {
+            this.el.removeEventListener('dsPaginationContextUpdate', this.contextUpdateHandler);
+        }
+    };
+    return BasePagination;
+};
+
+export { paginationFactory as p };

package/dist/esm/paginationUtils-DtuCm0la.js

@@ -0,0 +1,136 @@
+import { g as getLanguage } from './store-CaI4gcSt.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 (getLanguage()) {
+        case 'fi':
+            return 'Sivutus';
+        case 'sv':
+            return 'Paginering';
+        default:
+            return 'Pagination';
+    }
+};
+const firstPage = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Alkuun';
+        case 'sv':
+            return 'Till början';
+        default:
+            return 'First';
+    }
+};
+const lastPage = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Loppuun';
+        case 'sv':
+            return 'Till slutet';
+        default:
+            return 'Last';
+    }
+};
+const previousPage = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Edellinen';
+        case 'sv':
+            return 'Föregående';
+        default:
+            return 'Previous';
+    }
+};
+const nextPage = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Seuraava';
+        case 'sv':
+            return 'Nästa';
+        default:
+            return 'Next';
+    }
+};
+const goToFirstPage = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Ensimmäinen sivu';
+        case 'sv':
+            return 'Första sidan';
+        default:
+            return 'First page';
+    }
+};
+const goToLastPage = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Viimeinen sivu';
+        case 'sv':
+            return 'Sista sidan';
+        default:
+            return 'Last page';
+    }
+};
+const goToPreviousPage = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Edellinen sivu';
+        case 'sv':
+            return 'Föregående sida';
+        default:
+            return 'Previous page';
+    }
+};
+const goToNextPage = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Seuraava sivu';
+        case 'sv':
+            return 'Nästa sida';
+        default:
+            return 'Next page';
+    }
+};
+const currentPage = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Nykyinen sivu';
+        case 'sv':
+            return 'Nuvarande sida';
+        default:
+            return 'Current page';
+    }
+};
+
+export { currentPage as a, goToPreviousPage as b, calculatePaginationPages as c, goToLastPage as d, goToFirstPage as e, firstPage as f, goToNextPage as g, pagination as h, lastPage as l, nextPage as n, previousPage as p };

package/dist/esm/store-CaI4gcSt.js

@@ -0,0 +1,293 @@
+import { S as StencilCore } from './index-WKPTmD1Z.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 = 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 defaultLanguage = 'en';
+const initialState = {
+    language: defaultLanguage,
+};
+const { state, onChange } = createStore({
+    ...initialState,
+});
+const getLanguage = () => state.language;
+const setLanguage = (language) => {
+    state.language = language;
+};
+const initialize = ({ language }) => {
+    state.language = language || state.language;
+};
+
+export { defaultLanguage as d, getLanguage as g, initialize as i, onChange as o, setLanguage as s };

package/dist/esm/tabsFactory-D6bx4WWK.js

@@ -0,0 +1,26 @@
+import { r as registerInstance } from './index-WKPTmD1Z.js';
+import { c as consumeTabsContext, C as CONTEXT_UPDATE_EVENT } from './tabsContext-9ZMZNA_E.js';
+
+const tabsFactory = (Base) => {
+    const BaseTabs = class extends Base {
+        constructor(hostRef) {
+            super();
+            registerInstance(this, hostRef);
+        }
+        context;
+        contextUpdateHandler = (event) => {
+            const customEvent = event;
+            this.context = customEvent.detail;
+        };
+        componentWillLoad() {
+            this.context = consumeTabsContext(this.el) || undefined;
+            this.el.addEventListener(CONTEXT_UPDATE_EVENT, this.contextUpdateHandler);
+        }
+        disconnectedCallback() {
+            this.el.removeEventListener(CONTEXT_UPDATE_EVENT, this.contextUpdateHandler);
+        }
+    };
+    return BaseTabs;
+};
+
+export { tabsFactory as t };

package/dist/hydrate/index.d.ts

@@ -3,6 +3,7 @@
 import { Readable } from 'node:stream';
 
 export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
+export type TagTransformer = (tag: string) => string;
 /**
  * Serialize a value to a string that can be deserialized later.
  * @param {unknown} value - The value to serialize.
@@ -271,5 +272,16 @@ export declare function renderToString(html: string | any, options: SerializeDoc
 export declare function hydrateDocument(doc: any | string, options?: HydrateDocumentOptions): Promise<HydrateResults>;
 export declare function hydrateDocument(doc: any | string, options: HydrateDocumentOptions | undefined, asStream?: boolean): Readable;
 export declare function serializeDocumentToString(doc: Document, opts: HydrateFactoryOptions): string;
+/**
+ * Transforms a tag name using the current tag transformer
+ * @param tag - the tag to transform e.g. `my-tag`
+ * @returns the transformed tag e.g. `new-my-tag`
+ */
+export declare function transformTag<T extends string>(tag: T): T;
+/**
+ * Sets the tag transformer to be used when rendering custom elements
+ * @param transformer the transformer function to use. Must return a string
+ */
+export declare function setTagTransformer(transformer: TagTransformer): void;
 
 export {};