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

package/dist/cjs/componentFactory-C0erJ_VA.js

@@ -0,0 +1,193 @@
+'use strict';
+
+var utils = require('./utils-DWrHry7C.js');
+var store = require('./store-BDkw2fdF.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 !utils.hasComposedClosest(utils.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 = utils.getComposedParent(el);
+    while (current) {
+        const tag = normalizeTag(current.tagName);
+        if (!isBlockingAncestorTag(tag)) {
+            current = utils.getComposedParent(current);
+            continue;
+        }
+        if (rootTrackingStopTags.has(tag) && !shouldStopRootTracking(current, tag)) {
+            current = utils.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 = store.getLanguage();
+        getGenerator() {
+            const name = componentName.trim() || 'ds-component';
+            if (!generators.has(name)) {
+                generators.set(name, utils.idGenerator(name));
+            }
+            return generators.get(name);
+        }
+        getUniqueId() {
+            return this.getGenerator().next().value;
+        }
+        componentMounted() {
+            const appName = utils.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;
+};
+
+exports.componentFactory = componentFactory;

package/dist/cjs/controlUtils-C1d8TGh2.js

@@ -0,0 +1,414 @@
+'use strict';
+
+var store = require('./store-BDkw2fdF.js');
+
+const valueMissing = () => {
+    switch (store.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 (store.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 (store.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 (store.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 (store.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 (store.getLanguage()) {
+        case 'fi':
+            return 'Lyhennä tekstiä.';
+        case 'sv':
+            return 'Förkorta texten.';
+        default:
+            return 'Shorten your text.';
+    }
+};
+const tooShort = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Pidennä tekstiä.';
+        case 'sv':
+            return 'Förläng texten.';
+        default:
+            return 'Lengthen your text.';
+    }
+};
+const rangeUnderflow = () => {
+    switch (store.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 (store.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 (store.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 (store.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 (store.getLanguage()) {
+        case 'fi':
+            defaultText = '(valinnainen)';
+            break;
+        case 'sv':
+            defaultText = '(valfritt)';
+            break;
+    }
+    return [text, optionalText || defaultText].join(' ');
+};
+const getRequiredText = (text) => [text, '*'].join(' ');
+const atLeastOneOption = () => {
+    switch (store.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 (store.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 (store.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 (store.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 (store.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 (store.getLanguage()) {
+        case 'fi':
+            return 'Ladataan vaihtoehtoja...';
+        case 'sv':
+            return 'Laddar alternativ...';
+        default:
+            return 'Loading options...';
+    }
+};
+const searchOrSelectAnOption = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Kirjoita tai valitse...';
+        case 'sv':
+            return 'Sök eller välj...';
+        default:
+            return 'Search or select...';
+    }
+};
+const noResultsFound = (searchTerm) => {
+    switch (store.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 (store.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 (store.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 (store.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 (store.getLanguage()) {
+        case 'fi':
+            return `${remaining} merkkiä jäljellä.`;
+        case 'sv':
+            return `${remaining} tecken kvar.`;
+        default:
+            return `${remaining} characters remaining.`;
+    }
+};
+const itemsShortage = (shortage) => {
+    switch (store.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 (store.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 (store.getLanguage()) {
+        case 'fi':
+            return 'Tyhjennä kenttä';
+        case 'sv':
+            return 'Rensa fält';
+        default:
+            return 'Clear field';
+    }
+};
+const showPassword = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Näytä salasana';
+        case 'sv':
+            return 'Visa lösenord';
+        default:
+            return 'Show password';
+    }
+};
+const hidePassword = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Piilota salasana';
+        case 'sv':
+            return 'Dölj lösenord';
+        default:
+            return 'Hide password';
+    }
+};
+const selectAnOption = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Valitse vaihtoehto';
+        case 'sv':
+            return 'Välj alternativ';
+        default:
+            return 'Select an option';
+    }
+};
+const selections = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'valintaa';
+        case 'sv':
+            return 'val';
+        default:
+            return 'selections';
+    }
+};
+const multiselectable = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'monivalinta';
+        case 'sv':
+            return 'flerval';
+        default:
+            return 'multiselectable';
+    }
+};
+const ellipsis = () => {
+    switch (store.getLanguage()) {
+        case 'fi':
+            return 'Kolme pistettä';
+        case 'sv':
+            return 'Tre punkter';
+        default:
+            return 'Ellipsis';
+    }
+};
+
+exports.allOptions = allOptions;
+exports.atLeastOneOption = atLeastOneOption;
+exports.badInput = badInput;
+exports.characterOverage = characterOverage;
+exports.charactersRemaining = charactersRemaining;
+exports.clearField = clearField;
+exports.ellipsis = ellipsis;
+exports.getOptionalText = getOptionalText;
+exports.getRequiredText = getRequiredText;
+exports.hidePassword = hidePassword;
+exports.itemsOverage = itemsOverage;
+exports.itemsShortage = itemsShortage;
+exports.loadingOptions = loadingOptions;
+exports.multiselectable = multiselectable;
+exports.noResultsFound = noResultsFound;
+exports.rangeOverflow = rangeOverflow;
+exports.rangeUnderflow = rangeUnderflow;
+exports.removeSelection = removeSelection;
+exports.searchOrSelectAnOption = searchOrSelectAnOption;
+exports.selectAnOption = selectAnOption;
+exports.selections = selections;
+exports.showPassword = showPassword;
+exports.thereAreOptionsToBrowse = thereAreOptionsToBrowse;
+exports.tooLong = tooLong;
+exports.tryADifferentSearchTerm = tryADifferentSearchTerm;
+exports.tryAgainOrIfTheProblemPersists = tryAgainOrIfTheProblemPersists;
+exports.validityMessage = validityMessage;
+exports.valueMissing = valueMissing;
+exports.weCouldNotLoadOptions = weCouldNotLoadOptions;

package/dist/cjs/cx-D4_fhK_D.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var index = require('./index-7cLzA8W5.js');
+
+const cx = (className) => `${className}__${index.Env.PACKAGE_VERSION}`;
+
+exports.cx = cx;