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

package/dist/cjs/utils-Ctsvcil0.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const Breakpoints = {
+    xSmall: 320,
+    small: 480,
+    smallPlus: 720,
+    medium: 960,
+    large: 1200,
+    xLarge: 1440,
+};
+const isGreaterThanEqualBreakpointMediaQuery = (size) => globalThis.matchMedia(`(min-width: ${Breakpoints[size]}px)`);
+
+exports.isGreaterThanEqualBreakpointMediaQuery = isGreaterThanEqualBreakpointMediaQuery;

package/dist/cjs/utils-D94MuKO1.js

@@ -0,0 +1,194 @@
+'use strict';
+
+const FEEDBACK_RESET_TIMEOUT = 3000;
+const FEEDBACK_SET_TIMEOUT = 350;
+const SCRIM_HEIGHT = 44;
+const BACKDROP_TRANSITION_IN_DURATION = 180;
+const BACKDROP_TRANSITION_OUT_DURATION = 160;
+const MODAL_TRANSITION_IN_DURATION = 220;
+const MODAL_TRANSITION_OUT_DURATION = BACKDROP_TRANSITION_OUT_DURATION;
+const UHDS_APP_NAME_ATTR = 'data-uhds-app-name';
+const CHECKBOX_GROUP_TREE_TRANSITION_IN_DURATION_MS = 140;
+const CHECKBOX_GROUP_TREE_TRANSITION_OUT_DURATION_MS = 100;
+
+const isBrowser = () => globalThis.window !== undefined && typeof document !== 'undefined';
+const formatAs = (value, suffix) => (value.endsWith(suffix) ? value : `${value}${suffix}`);
+const formatAsPx = (value) => formatAs(value, 'px');
+const remToPx = (remString) => {
+    const rootFontSize = 16;
+    const rem = Number.parseFloat(remString);
+    return formatAsPx(`${rem * rootFontSize}`);
+};
+function* idGenerator(id) {
+    let currentId = 1;
+    while (true) {
+        yield `${id}-${currentId++}`;
+    }
+}
+const debounce = (func, wait = 0, immediate = false) => {
+    let timeout = null;
+    const debounced = (...args) => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        if (immediate && !timeout) {
+            func(...args);
+        }
+        timeout = setTimeout(function () {
+            timeout = null;
+            if (!immediate) {
+                func(...args);
+            }
+        }, wait);
+    };
+    debounced.cancel = () => {
+        if (timeout) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    };
+    return debounced;
+};
+const throttle = (func, timeFrame = 0) => {
+    let lastTime = 0;
+    return (...args) => {
+        const now = Date.now();
+        if (now - lastTime >= timeFrame) {
+            func(...args);
+            lastTime = now;
+        }
+    };
+};
+const transformTagName = (tagToBeTransformed, knownUntransformedTag, knownUntransformedTagElementReference) => {
+    const actualTagName = knownUntransformedTagElementReference.tagName.toLowerCase();
+    if (!actualTagName.includes(knownUntransformedTag)) {
+        throw new Error(`knownUntransformedTag mismatch: expected tag to include '${knownUntransformedTag}', ` + `but got '${actualTagName}'`);
+    }
+    const actualCurrentTag = knownUntransformedTagElementReference.tagName.toLowerCase();
+    const knownTagWithoutDesignSystemPrefix = knownUntransformedTag.split(/^ds-/)[1];
+    const targetTagWithoutDesignSystemPrefix = tagToBeTransformed.split(/^ds-/)[1];
+    const [prefix, suffix] = actualCurrentTag.split(knownTagWithoutDesignSystemPrefix);
+    return (prefix + targetTagWithoutDesignSystemPrefix + suffix);
+};
+const declareComponentDependencies = (_t) => {
+};
+const omit = (obj, keys) => {
+    const omitSet = new Set(keys);
+    return Object.fromEntries(Object.entries(obj).filter(([key]) => !omitSet.has(key)));
+};
+const ifDefined = (key, value) => {
+    if (value === undefined || value === null || value === '') {
+        return {};
+    }
+    return { [key]: value };
+};
+const componentOnReady = (el) => {
+    if (el?.componentOnReady) {
+        return el.componentOnReady();
+    }
+    return new Promise(resolve => {
+        requestAnimationFrame(() => resolve(el));
+    });
+};
+function isKey(key, keys, excludes) {
+    const allowedKeys = keys;
+    return allowedKeys.includes(key);
+}
+const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+function isArrowKey(key, excludes) {
+    return isKey(key, arrowKeys);
+}
+const selectionKeys = ['Enter', ' '];
+function isSelectionKey(key, excludes) {
+    return isKey(key, selectionKeys);
+}
+const getShadowHost = (el) => {
+    const root = el.getRootNode();
+    return root instanceof ShadowRoot ? root.host : null;
+};
+const getComposedParent = (el) => {
+    return el.parentElement ?? getShadowHost(el);
+};
+const hasComposedClosest = (el, selector) => {
+    let current = el;
+    while (current) {
+        if (current.closest(selector))
+            return true;
+        current = getShadowHost(current);
+    }
+    return false;
+};
+const getComposedClosestElement = (el, selector) => {
+    let current = el ?? null;
+    while (current) {
+        const match = current.closest(selector);
+        if (match)
+            return match;
+        current = getShadowHost(current);
+    }
+    return null;
+};
+const resolveMatomoAppName = (el) => {
+    if (!isBrowser()) {
+        return;
+    }
+    const closest = getComposedClosestElement(el, `[${UHDS_APP_NAME_ATTR}]`);
+    const attrValue = closest?.dataset.uhdsAppName?.trim();
+    if (attrValue)
+        return attrValue;
+    const docValue = document.documentElement?.dataset.uhdsAppName?.trim();
+    if (docValue)
+        return docValue;
+    return globalThis._uhdsMatomoAppName;
+};
+const injectMatomoScript = () => {
+    const matomoSrc = 'https://matomo.it.helsinki.fi/matomo/js/container_hxIamClK.js';
+    if (!isBrowser()) {
+        return;
+    }
+    if (Array.from(document.scripts).some(s => s.src === matomoSrc)) {
+        return;
+    }
+    globalThis._mtm = globalThis._mtm || [];
+    globalThis._mtm.push({ 'mtm.startTime': Date.now(), 'event': 'mtm.Start' });
+    const g = document.createElement('script');
+    g.async = true;
+    g.src = matomoSrc;
+    const s = document.scripts[0];
+    if (s?.parentNode) {
+        s.parentNode.insertBefore(g, s);
+        return;
+    }
+    (document.head ?? document.documentElement).appendChild(g);
+};
+const isEventWithinElement = (event, elem) => {
+    return event.composedPath().includes(elem);
+};
+const nextFrame = () => new Promise(resolve => requestAnimationFrame(() => resolve()));
+
+exports.BACKDROP_TRANSITION_IN_DURATION = BACKDROP_TRANSITION_IN_DURATION;
+exports.BACKDROP_TRANSITION_OUT_DURATION = BACKDROP_TRANSITION_OUT_DURATION;
+exports.CHECKBOX_GROUP_TREE_TRANSITION_IN_DURATION_MS = CHECKBOX_GROUP_TREE_TRANSITION_IN_DURATION_MS;
+exports.CHECKBOX_GROUP_TREE_TRANSITION_OUT_DURATION_MS = CHECKBOX_GROUP_TREE_TRANSITION_OUT_DURATION_MS;
+exports.FEEDBACK_RESET_TIMEOUT = FEEDBACK_RESET_TIMEOUT;
+exports.FEEDBACK_SET_TIMEOUT = FEEDBACK_SET_TIMEOUT;
+exports.MODAL_TRANSITION_IN_DURATION = MODAL_TRANSITION_IN_DURATION;
+exports.MODAL_TRANSITION_OUT_DURATION = MODAL_TRANSITION_OUT_DURATION;
+exports.SCRIM_HEIGHT = SCRIM_HEIGHT;
+exports.componentOnReady = componentOnReady;
+exports.debounce = debounce;
+exports.declareComponentDependencies = declareComponentDependencies;
+exports.getComposedParent = getComposedParent;
+exports.hasComposedClosest = hasComposedClosest;
+exports.idGenerator = idGenerator;
+exports.ifDefined = ifDefined;
+exports.injectMatomoScript = injectMatomoScript;
+exports.isArrowKey = isArrowKey;
+exports.isEventWithinElement = isEventWithinElement;
+exports.isSelectionKey = isSelectionKey;
+exports.nextFrame = nextFrame;
+exports.omit = omit;
+exports.remToPx = remToPx;
+exports.resolveMatomoAppName = resolveMatomoAppName;
+exports.throttle = throttle;
+exports.transformTagName = transformTagName;

package/dist/collection/collection-manifest.json

@@ -31,6 +31,7 @@
     "components/01-base-components/ds-breadcrumbs/ds-breadcrumbs-separator/ds-breadcrumbs-separator.js",
     "components/01-base-components/ds-button/ds-button.js",
     "components/01-base-components/ds-card/ds-card.js",
+    "components/01-base-components/ds-checkbox-group/ds-checkbox-group-expand-button/ds-checkbox-group-expand-button.js",
     "components/01-base-components/ds-chip-group/ds-chip-group.js",
     "components/01-base-components/ds-control-label/ds-control-label.js",
     "components/01-base-components/ds-datepicker/ds-datepicker-custom/ds-datepicker-custom.js",
@@ -360,7 +361,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.4",
+    "version": "4.43.5",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/00-foundations/breakpoints/utils.js

@@ -6,7 +6,7 @@ export const Breakpoints = {
     large: 1200,
     xLarge: 1440,
 };
-export const isSmallerThanBreakpoint = (size) => window.innerWidth < Breakpoints[size];
-export const isGreaterThanEqualBreakpoint = (size) => window.innerWidth >= Breakpoints[size];
-export const isSmallerThanBreakpointMediaQuery = (size) => window.matchMedia(`(max-width: ${Breakpoints[size] - 1}px)`);
-export const isGreaterThanEqualBreakpointMediaQuery = (size) => window.matchMedia(`(min-width: ${Breakpoints[size]}px)`);
+export const isSmallerThanBreakpoint = (size) => globalThis.innerWidth < Breakpoints[size];
+export const isGreaterThanEqualBreakpoint = (size) => globalThis.innerWidth >= Breakpoints[size];
+export const isSmallerThanBreakpointMediaQuery = (size) => globalThis.matchMedia(`(max-width: ${Breakpoints[size] - 1}px)`);
+export const isGreaterThanEqualBreakpointMediaQuery = (size) => globalThis.matchMedia(`(min-width: ${Breakpoints[size]}px)`);

package/dist/collection/components/00-foundations/factories/ariaDeprecationFactory.js

@@ -15,7 +15,8 @@ export const ariaDeprecationFactory = (Base) => {
         getDeprecationWarningsForAriaAttributes = (el) => {
             if (this.dsMuteAriaDeprecationWarning)
                 return;
-            ariaAttributes.forEach(attr => this.getDeprecationWarningForAriaAttribute(el, attr));
+            for (const attr of ariaAttributes)
+                this.getDeprecationWarningForAriaAttribute(el, attr);
         };
         static get properties() {
             return {

package/dist/collection/components/00-foundations/factories/componentFactory.js

@@ -1,10 +1,10 @@
-import { idGenerator } from "../../../utils/utils";
+import { getComposedParent, hasComposedClosest, idGenerator, resolveMatomoAppName } from "../../../utils/utils";
 import { analyticsState } from "../global/analyticsState";
 import { getLanguage } from "../../../store";
 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) {
+if (globalThis.sessionStorage?.getItem(COLLECTION_STORAGE_KEY) === null) {
     globalThis.sessionStorage.setItem(COLLECTION_STORAGE_KEY, (Math.random() <= COLLECTION_PROBABILITY).toString());
 }
 const generators = new Map();
@@ -13,8 +13,8 @@ let isBatchTrackingInitialized = false;
 function flushState() {
     if (isFlushing)
         return;
-    const components = analyticsState.getAll();
-    if (components.size === 0)
+    const entries = analyticsState.getAll();
+    if (entries.length === 0)
         return;
     isFlushing = true;
     try {
@@ -22,15 +22,14 @@ function flushState() {
             return;
         const tracker = globalThis._mtm;
         const appHost = globalThis.location.hostname;
-        const appName = globalThis._uhdsMatomoAppName;
-        for (const [name, stats] of components.entries()) {
+        for (const { appName, componentName, stats } of entries) {
             tracker.push({
                 'event': 'uhds.components',
                 'uhds.action': 'mounted',
-                'uhds.component': name,
+                'uhds.component': componentName,
                 'uhds.app_name': appName,
                 'uhds.app_host': appHost,
-                'uhds.instance_key': `${appHost}::${name}`,
+                'uhds.instance_key': `${appHost}::${appName}::${componentName}`,
                 'uhds.instances_seen': stats.mountEventsTotal,
             });
         }
@@ -56,24 +55,6 @@ 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;
@@ -131,7 +112,8 @@ export const componentFactory = (componentName, options = {}) => (Base) => {
             return this.getGenerator().next().value;
         }
         componentMounted() {
-            if (!globalThis._uhdsMatomoAppName)
+            const appName = resolveMatomoAppName(this.el);
+            if (!appName)
                 return;
             if (!globalThis.sessionStorage || globalThis.sessionStorage?.getItem(COLLECTION_STORAGE_KEY) === 'false')
                 return;
@@ -140,7 +122,7 @@ export const componentFactory = (componentName, options = {}) => (Base) => {
             if (hasBlockingAncestor(this.el))
                 return;
             initBatchTracking();
-            analyticsState.incrementMount(componentName);
+            analyticsState.incrementMount(appName, componentName);
         }
         handleLanguageChange(newValue) {
             this.lang = newValue.detail;

package/dist/collection/components/00-foundations/global/analyticsState.js

@@ -2,11 +2,31 @@ 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({
+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,
     }));

package/dist/collection/components/00-foundations/icons/iconList.js

@@ -24,7 +24,10 @@ export const icons = [
 ];
 export const colourNames = ['default', 'neutral', 'white', 'primary', 'info', 'danger', 'success', 'attention', 'disabled-onDark', 'disabled-onLight'];
 export const iconStates = ['hover', 'active'];
-export const getIconColourVariable = (name, state) => `ds-iconColor-${name}${state ? `-${state}` : ''}`;
+export const getIconColourVariable = (name, state) => {
+    const stateSuffix = state ? `-${state}` : '';
+    return `ds-iconColor-${name}${stateSuffix}`;
+};
 export const baseIconColours = colourNames.map(name => getIconColourVariable(name));
 export const resolveIconColour = (colour) => {
     if (colourNames.includes(colour)) {
@@ -34,8 +37,8 @@ export const resolveIconColour = (colour) => {
 };
 export const iconColours = baseIconColours.reduce((acc, curr) => {
     acc.push(curr);
-    iconStates.forEach(state => {
+    for (const state of iconStates) {
         acc.push(getIconColourVariable(curr, state));
-    });
+    }
     return acc;
 }, []);