@uh-design-system/component-library 1.7.0-rc.0 → 1.7.0

package/dist/esm/componentFactory-DRKnB2By.js

@@ -0,0 +1,191 @@
+import { g as idGenerator, j as resolveMatomoAppName, k as getComposedParent, l as hasComposedClosest } from './utils-D5pGK2ZH.js';
+import { g as getLanguage } from './store-DYWVDmmN.js';
+
+const state = new Map();
+const createDefaultStats = () => Object.freeze({
+    mountEventsTotal: 0,
+});
+const getOrCreateAppBucket = (appName) => {
+    const existing = state.get(appName);
+    const created = new Map();
+    if (!existing) {
+        state.set(appName, created);
+    }
+    return existing ?? created;
+};
+const getAll = () => {
+    const entries = [];
+    for (const [appName, components] of state.entries()) {
+        for (const [componentName, stats] of components.entries()) {
+            entries.push({ appName, componentName, stats });
+        }
+    }
+    return entries;
+};
+const getOne = (appName, componentName) => {
+    const appBucket = state.get(appName);
+    return appBucket?.get(componentName) ?? createDefaultStats();
+};
+const incrementMount = (appName, componentName) => {
+    const appBucket = getOrCreateAppBucket(appName);
+    const prev = getOne(appName, componentName);
+    appBucket.set(componentName, Object.freeze({
+        ...prev,
+        mountEventsTotal: prev.mountEventsTotal + 1,
+    }));
+};
+const clear = () => {
+    state.clear();
+};
+const analyticsState = {
+    getAll,
+    getOne,
+    incrementMount,
+    clear,
+};
+
+const FALLBACK_COLLECTION_PROBABILITY = 0.5;
+const COLLECTION_PROBABILITY = globalThis._uhdsMatomoCollectionProbability ?? FALLBACK_COLLECTION_PROBABILITY;
+const COLLECTION_STORAGE_KEY = 'uhds_collect_analytics';
+if (globalThis.sessionStorage?.getItem(COLLECTION_STORAGE_KEY) === null) {
+    globalThis.sessionStorage.setItem(COLLECTION_STORAGE_KEY, (Math.random() <= COLLECTION_PROBABILITY).toString());
+}
+const generators = new Map();
+let isFlushing = false;
+let isBatchTrackingInitialized = false;
+function flushState() {
+    if (isFlushing)
+        return;
+    const entries = analyticsState.getAll();
+    if (entries.length === 0)
+        return;
+    isFlushing = true;
+    try {
+        if (!Array.isArray(globalThis._mtm))
+            return;
+        const tracker = globalThis._mtm;
+        const appHost = globalThis.location.hostname;
+        for (const { appName, componentName, stats } of entries) {
+            tracker.push({
+                'event': 'uhds.components',
+                'uhds.action': 'mounted',
+                'uhds.component': componentName,
+                'uhds.app_name': appName,
+                'uhds.app_host': appHost,
+                'uhds.instance_key': `${appHost}::${appName}::${componentName}`,
+                'uhds.instances_seen': stats.mountEventsTotal,
+            });
+        }
+        analyticsState.clear();
+    }
+    finally {
+        isFlushing = false;
+    }
+}
+function initBatchTracking() {
+    if (isBatchTrackingInitialized)
+        return;
+    globalThis.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'hidden')
+            flushState();
+    });
+    globalThis.addEventListener('pagehide', flushState);
+    globalThis.addEventListener('beforeunload', flushState);
+    isBatchTrackingInitialized = true;
+}
+const transparentRootTrackingAncestors = new Set();
+const rootTrackingStopTags = new Map();
+const rootTrackingStopSelectors = new Map();
+const designSystemComponentTags = new Set();
+const normalizeTag = (tag) => tag.trim().toLowerCase();
+function shouldStopRootTracking(el, tag) {
+    if (!rootTrackingStopTags.has(tag))
+        return false;
+    const selector = rootTrackingStopSelectors.get(tag) ?? '';
+    if (!selector)
+        return true;
+    return !hasComposedClosest(getComposedParent(el), selector);
+}
+function isBlockingAncestorTag(tag) {
+    return designSystemComponentTags.has(tag) && !transparentRootTrackingAncestors.has(tag);
+}
+function hasBlockingAncestor(el) {
+    const ownTag = normalizeTag(el.tagName);
+    if (isBlockingAncestorTag(ownTag) && shouldStopRootTracking(el, ownTag))
+        return false;
+    let current = getComposedParent(el);
+    while (current) {
+        const tag = normalizeTag(current.tagName);
+        if (!isBlockingAncestorTag(tag)) {
+            current = getComposedParent(current);
+            continue;
+        }
+        if (rootTrackingStopTags.has(tag) && !shouldStopRootTracking(current, tag)) {
+            current = getComposedParent(current);
+            continue;
+        }
+        return true;
+    }
+    return false;
+}
+const componentFactory = (componentName, options = {}) => (Base) => {
+    const ownTag = normalizeTag(componentName);
+    designSystemComponentTags.add(ownTag);
+    if (options.stopRootTracking) {
+        const exceptions = new Set((options.stopRootTrackingExcept || []).map(normalizeTag));
+        rootTrackingStopTags.set(ownTag, exceptions);
+        rootTrackingStopSelectors.set(ownTag, Array.from(exceptions).join(','));
+    }
+    if (options.transparentForRootTracking) {
+        transparentRootTrackingAncestors.add(ownTag);
+    }
+    class BaseComponent extends Base {
+        constructor() {
+            super();
+        }
+        lang = getLanguage();
+        getGenerator() {
+            const name = componentName.trim() || 'ds-component';
+            if (!generators.has(name)) {
+                generators.set(name, idGenerator(name));
+            }
+            return generators.get(name);
+        }
+        getUniqueId() {
+            return this.getGenerator().next().value;
+        }
+        componentMounted() {
+            const appName = resolveMatomoAppName(this.el);
+            if (!appName)
+                return;
+            if (!globalThis.sessionStorage || globalThis.sessionStorage?.getItem(COLLECTION_STORAGE_KEY) === 'false')
+                return;
+            if (options.disableAnalytics)
+                return;
+            if (hasBlockingAncestor(this.el))
+                return;
+            initBatchTracking();
+            analyticsState.incrementMount(appName, componentName);
+        }
+        handleLanguageChange(newValue) {
+            this.lang = newValue.detail;
+        }
+        static get states() {
+            return {
+                "lang": {}
+            };
+        }
+        static get listeners() {
+            return [{
+                    "name": "dsLanguageChange",
+                    "method": "handleLanguageChange",
+                    "target": "body",
+                    "capture": false,
+                    "passive": false
+                }];
+        }
+    }
+    return BaseComponent;
+};
+
+export { componentFactory as c };

package/dist/esm/controlUtils-BT-SOH5c.js

@@ -0,0 +1,384 @@
+import { g as getLanguage } from './store-DYWVDmmN.js';
+
+const valueMissing = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Täytä tämä kenttä.';
+        case 'sv':
+            return 'Fyll i det här fältet.';
+        default:
+            return 'Fill in this field.';
+    }
+};
+const typeMismatch = (opts) => {
+    if (opts?.type === 'email') {
+        return emailMismatch();
+    }
+    if (opts?.type === 'url') {
+        return urlMismatch();
+    }
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Syötä arvo oikeassa muodossa.';
+        case 'sv':
+            return 'Ange värdet i rätt format.';
+        default:
+            return 'Enter a value in the correct format.';
+    }
+};
+const emailMismatch = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Syötä sähköpostiosoite oikeassa muodossa (esim. nimi@helsinki.fi).';
+        case 'sv':
+            return 'Ange e-postadressen i rätt format (t.ex. namn@helsinki.fi).';
+        default:
+            return 'Enter the email address in the correct format (e.g. name@helsinki.fi).';
+    }
+};
+const urlMismatch = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Syötä verkkosivun osoite oikeassa muodossa (esim. https://helsinki.fi).';
+        case 'sv':
+            return 'Ange webbadressen i rätt formatet (t.ex. https://helsinki.fi).';
+        default:
+            return 'Enter the web address in the correct format (e.g. https://helsinki.fi).';
+    }
+};
+const patternMismatch = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Syötä arvo vaaditussa muodossa.';
+        case 'sv':
+            return 'Ange värdet i det angivna formatet.';
+        default:
+            return 'Match the requested format.';
+    }
+};
+const tooLong = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Lyhennä tekstiä.';
+        case 'sv':
+            return 'Förkorta texten.';
+        default:
+            return 'Shorten your text.';
+    }
+};
+const tooShort = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Pidennä tekstiä.';
+        case 'sv':
+            return 'Förläng texten.';
+        default:
+            return 'Lengthen your text.';
+    }
+};
+const rangeUnderflow = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Syötä suurempi arvo.';
+        case 'sv':
+            return 'Ange ett större värde.';
+        default:
+            return 'Enter a larger value.';
+    }
+};
+const rangeOverflow = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Syötä pienempi arvo.';
+        case 'sv':
+            return 'Ange ett mindre värde.';
+        default:
+            return 'Enter a smaller value.';
+    }
+};
+const stepMismatch = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Syötä sallittu arvo.';
+        case 'sv':
+            return 'Ange ett tillåtet värde.';
+        default:
+            return 'Enter an allowed value.';
+    }
+};
+const badInput = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Anna kelvollinen arvo.';
+        case 'sv':
+            return 'Ange ett giltigt värde.';
+        default:
+            return 'Enter a valid value.';
+    }
+};
+const validityMessage = (flag, opts) => {
+    switch (flag) {
+        case 'valueMissing':
+            return valueMissing();
+        case 'typeMismatch':
+            return typeMismatch(opts);
+        case 'patternMismatch':
+            return patternMismatch();
+        case 'tooLong':
+            return tooLong();
+        case 'tooShort':
+            return tooShort();
+        case 'rangeUnderflow':
+            return rangeUnderflow();
+        case 'rangeOverflow':
+            return rangeOverflow();
+        case 'stepMismatch':
+            return stepMismatch();
+        case 'badInput':
+            return badInput();
+        default:
+            return '';
+    }
+};
+const getOptionalText = (text, optionalText) => {
+    let defaultText = '(optional)';
+    switch (getLanguage()) {
+        case 'fi':
+            defaultText = '(valinnainen)';
+            break;
+        case 'sv':
+            defaultText = '(valfritt)';
+            break;
+    }
+    return [text, optionalText || defaultText].join(' ');
+};
+const getRequiredText = (text) => [text, '*'].join(' ');
+const atLeastOneOption = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Valitse vähintään yksi vaihtoehto.';
+        case 'sv':
+            return 'Välj minst ett alternativ.';
+        default:
+            return 'Select at least one option.';
+    }
+};
+const allOptions = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Valitse kaikki vaihtoehdot.';
+        case 'sv':
+            return 'Välj alla alternativ.';
+        default:
+            return 'Select all options.';
+    }
+};
+const removeSelection = (capitalizeFirstLetter = false) => {
+    let text = '';
+    switch (getLanguage()) {
+        case 'fi':
+            text = 'poista valinta';
+            break;
+        case 'sv':
+            text = 'ta bort val';
+            break;
+        default:
+            text = 'remove selection';
+            break;
+    }
+    return capitalizeFirstLetter ? text[0].toUpperCase() + text.substring(1) : text;
+};
+const weCouldNotLoadOptions = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Emme voineet ladata vaihtoehtoja.';
+        case 'sv':
+            return 'Vi kunde inte ladda alternativen.';
+        default:
+            return 'We could not load options.';
+    }
+};
+const tryAgainOrIfTheProblemPersists = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Yritä uudelleen tai jos ongelma jatkuu, ota yhteyttä ylläpitoon.';
+        case 'sv':
+            return 'Försök igen eller om problemet kvarstår, kontakta supporten.';
+        default:
+            return 'Try again or if the problem persists, contact support.';
+    }
+};
+const loadingOptions = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Ladataan vaihtoehtoja...';
+        case 'sv':
+            return 'Laddar alternativ...';
+        default:
+            return 'Loading options...';
+    }
+};
+const searchOrSelectAnOption = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Kirjoita tai valitse...';
+        case 'sv':
+            return 'Sök eller välj...';
+        default:
+            return 'Search or select...';
+    }
+};
+const noResultsFound = (searchTerm) => {
+    switch (getLanguage()) {
+        case 'fi':
+            return searchTerm ? `Ei tuloksia haulle "${searchTerm}".` : `Ei tuloksia.`;
+        case 'sv':
+            return searchTerm ? `Inga resultat för sökningen "${searchTerm}".` : `Inga resultat.`;
+        default:
+            return searchTerm ? `No results found for "${searchTerm}".` : `No results found.`;
+    }
+};
+const tryADifferentSearchTerm = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Kokeile toista hakusanaa.';
+        case 'sv':
+            return 'Prova ett annat sökord.';
+        default:
+            return 'Try a different search term.';
+    }
+};
+const thereAreOptionsToBrowse = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Vaihtoehtoja on selattavissa.';
+        case 'sv':
+            return 'Det finns alternativ att bläddra i.';
+        default:
+            return 'There are options to browse.';
+    }
+};
+const characterOverage = (overage) => {
+    switch (getLanguage()) {
+        case 'fi':
+            return `${overage} merkkiä liian pitkä.`;
+        case 'sv':
+            return `${overage} tecken för mycket.`;
+        default:
+            return `${overage} characters too many.`;
+    }
+};
+const charactersRemaining = (remaining) => {
+    switch (getLanguage()) {
+        case 'fi':
+            return `${remaining} merkkiä jäljellä.`;
+        case 'sv':
+            return `${remaining} tecken kvar.`;
+        default:
+            return `${remaining} characters remaining.`;
+    }
+};
+const itemsShortage = (shortage) => {
+    switch (getLanguage()) {
+        case 'fi':
+            if (shortage === 1) {
+                return `${shortage} valinta liian vähän.`;
+            }
+            return `${shortage} valintaa liian vähän.`;
+        case 'sv':
+            return `${shortage} val för lite.`;
+        default:
+            if (shortage === 1) {
+                return `${shortage} item too few.`;
+            }
+            return `${shortage} items too few.`;
+    }
+};
+const itemsOverage = (overage) => {
+    switch (getLanguage()) {
+        case 'fi':
+            if (overage === 1) {
+                return `${overage} valinta liikaa.`;
+            }
+            return `${overage} valintaa liikaa.`;
+        case 'sv':
+            return `${overage} val för många.`;
+        default:
+            if (overage === 1) {
+                return `${overage} item too many.`;
+            }
+            return `${overage} items too many.`;
+    }
+};
+const clearField = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Tyhjennä kenttä';
+        case 'sv':
+            return 'Rensa fält';
+        default:
+            return 'Clear field';
+    }
+};
+const showPassword = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Näytä salasana';
+        case 'sv':
+            return 'Visa lösenord';
+        default:
+            return 'Show password';
+    }
+};
+const hidePassword = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Piilota salasana';
+        case 'sv':
+            return 'Dölj lösenord';
+        default:
+            return 'Hide password';
+    }
+};
+const selectAnOption = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Valitse vaihtoehto';
+        case 'sv':
+            return 'Välj alternativ';
+        default:
+            return 'Select an option';
+    }
+};
+const selections = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'valintaa';
+        case 'sv':
+            return 'val';
+        default:
+            return 'selections';
+    }
+};
+const multiselectable = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'monivalinta';
+        case 'sv':
+            return 'flerval';
+        default:
+            return 'multiselectable';
+    }
+};
+const ellipsis = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Kolme pistettä';
+        case 'sv':
+            return 'Tre punkter';
+        default:
+            return 'Ellipsis';
+    }
+};
+
+export { badInput as A, rangeUnderflow as B, rangeOverflow as C, getOptionalText as a, atLeastOneOption as b, allOptions as c, itemsOverage as d, thereAreOptionsToBrowse as e, tryAgainOrIfTheProblemPersists as f, getRequiredText as g, selections as h, itemsShortage as i, hidePassword as j, showPassword as k, loadingOptions as l, multiselectable as m, noResultsFound as n, clearField as o, ellipsis as p, characterOverage as q, removeSelection as r, searchOrSelectAnOption as s, tryADifferentSearchTerm as t, tooLong as u, validityMessage as v, weCouldNotLoadOptions as w, charactersRemaining as x, selectAnOption as y, valueMissing as z };

package/dist/esm/cx-CbD7OdM5.js

@@ -0,0 +1,5 @@
+import { E as Env } from './index-DHrlezow.js';
+
+const cx = (className) => `${className}__${Env.PACKAGE_VERSION}`;
+
+export { cx as c };