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

package/dist/cjs/ariaDeprecationFactory-DXnYDFcg.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var index = require('./index-CPg45o9h.js');
+var attributes = require('./attributes-5eBKMo1N.js');
+
+const ariaDeprecationFactory = (Base) => {
+    const AriaDeprecation = class extends Base {
+        constructor(hostRef) {
+            super();
+            index.registerInstance(this, hostRef);
+        }
+        dsMuteAriaDeprecationWarning = false;
+        getDeprecationWarningForAriaAttribute = (el, attr) => {
+            if (this.dsMuteAriaDeprecationWarning)
+                return;
+            if (el.hasAttribute(attr)) {
+                console.warn(`[DEPRECATION] The use of the '${attr}' attribute on <${el.tagName.toLowerCase()}> is deprecated and will be removed in a future version (tba). Please refer to the documentation for alternative ds-prefixed property name. If the attribute you are using does not have a corresponding ds-prefixed property name, please contact developers at #designsystem Slack channel. In the future, any aria-attributes set on the web component will remain on the host element. To mute all warnings on this component instance, set the "dsMuteAriaDeprecationWarning" property.`);
+            }
+        };
+        getDeprecationWarningsForAriaAttributes = (el) => {
+            if (this.dsMuteAriaDeprecationWarning)
+                return;
+            attributes.ariaAttributes.forEach(attr => this.getDeprecationWarningForAriaAttribute(el, attr));
+        };
+    };
+    return AriaDeprecation;
+};
+
+exports.ariaDeprecationFactory = ariaDeprecationFactory;

package/dist/cjs/component-library.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DE2Ldy1x.js');
+var index = require('./index-CPg45o9h.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*

package/dist/cjs/componentFactory-BNqkQcfi.js

@@ -0,0 +1,191 @@
+'use strict';
+
+var utils = require('./utils-DK6WJuOa.js');
+var store = require('./store-DT9Wk6N2.js');
+
+const state = new Map();
+const createDefaultStats = () => Object.freeze({
+    mountEventsTotal: 0,
+});
+const getAll = () => state;
+const getOne = (componentName) => state.get(componentName) ?? createDefaultStats();
+const incrementMount = (componentName) => {
+    const prev = getOne(componentName);
+    state.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 && 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 components = analyticsState.getAll();
+    if (components.size === 0)
+        return;
+    isFlushing = true;
+    try {
+        if (!Array.isArray(globalThis._mtm))
+            return;
+        const tracker = globalThis._mtm;
+        const appHost = globalThis.location.hostname;
+        const appName = globalThis._uhdsMatomoAppName;
+        for (const [name, stats] of components.entries()) {
+            tracker.push({
+                'event': 'uhds.components',
+                'uhds.action': 'mounted',
+                'uhds.component': name,
+                'uhds.app_name': appName,
+                'uhds.app_host': appHost,
+                'uhds.instance_key': `${appHost}::${name}`,
+                '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 getShadowHost(el) {
+    const root = el.getRootNode();
+    return root instanceof ShadowRoot ? root.host : null;
+}
+function getComposedParent(el) {
+    if (el.parentElement)
+        return el.parentElement;
+    return getShadowHost(el);
+}
+function hasComposedClosest(el, selector) {
+    let current = el;
+    while (current) {
+        if (current.closest(selector))
+            return true;
+        current = getShadowHost(current);
+    }
+    return false;
+}
+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 = 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() {
+            if (!globalThis._uhdsMatomoAppName)
+                return;
+            if (!globalThis.sessionStorage || globalThis.sessionStorage?.getItem(COLLECTION_STORAGE_KEY) === 'false')
+                return;
+            if (options.disableAnalytics)
+                return;
+            if (hasBlockingAncestor(this.el))
+                return;
+            initBatchTracking();
+            analyticsState.incrementMount(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-UVPS1EQ_.js

@@ -0,0 +1,414 @@
+'use strict';
+
+var store = require('./store-DT9Wk6N2.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-Ddclbzw3.js

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