@designsystem-se/af 39.4.0 → 39.5.0

package/dist/cjs/digi-icon-exclamation-triangle_4.cjs.entry.js

@@ -0,0 +1,814 @@
+'use strict';
+
+var index = require('./index-D36hZyeW.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var loaderSpinnerSize_enum = require('./loader-spinner-size.enum-u5AQs-UJ.js');
+var applyStencilScope_util = require('./applyStencilScope.util-Dvz01Lkf.js');
+
+const iconExclamationTriangleCss = () => `.sc-digi-icon-exclamation-triangle-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-exclamation-triangle-h svg.sc-digi-icon-exclamation-triangle{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
+
+const IconExclamationTriangle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * För att dölja ikonen för skärmläsare. Default är satt till true.
+         * @en Hides the icon for screen readers. Default is set to true.
+         */
+        this.afSvgAriaHidden = true;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: 'd95ca0a55f77498ae84c2066deb2fe9629b3f267', class: "digi-icon-exclamation-triangle", width: "44", height: "38", viewBox: "0 0 44 38", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined }, this.afTitle && index.h("title", { key: 'a62ddc3a52527945e80e5968421b5b9728a25d9b', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '8b2c7e6deef5f0ee48455534277c428ae4915609' }, this.afDesc), index.h("g", { key: '19679288795daa12557575eb136c7163a9a12a5e', class: "digi-icon-exclamation-triangle__shape", fill: "currentColor" }, index.h("path", { key: 'cb26e971acf6ccc539eee1a3a8a5c347ccb00bd9', d: "M20.417 3.941L3.35 31.235s-.787 1.777 0 2.771S4.985 35 4.985 35h33.93s.846 0 1.718-.994c.826-.941 0-2.77 0-2.77L23.583 3.94C23.27 3.418 22.792 3 22 3c-.792 0-1.27.418-1.583.941zM22 0c1.853 0 3.283.943 4.128 2.352l17.156 27.465.083.184c.097.214.212.513.323.881A6.84 6.84 0 0144 32.92c-.01 1.113-.333 2.178-1.113 3.065C41.62 37.43 40.151 38 38.914 38H4.977c-.17-.005-.17-.005-.243-.01a4.78 4.78 0 01-1.237-.273 5.57 5.57 0 01-2.201-1.499 6.453 6.453 0 01-.298-.35c-.982-1.24-1.154-2.662-.9-4.132a7.384 7.384 0 01.509-1.716l.086-.195L17.861 2.37C18.735.93 20.159 0 22 0z", "fill-rule": "nonzero" }), index.h("path", { key: 'f1af40e1b0b824fd4489dca7e639145f0b01e1de', d: "M19 13l.75 11h4.5L25 13zM25 28c0-1.645-1.133-3-3-3s-3 3-3 3 1.133 3 3 3 3-1.355 3-3z" }))));
+    }
+};
+IconExclamationTriangle.style = iconExclamationTriangleCss();
+
+const iconSpinnerCss = () => `.sc-digi-icon-spinner-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-spinner-h svg.sc-digi-icon-spinner{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
+
+const IconSpinner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this._path = 'M25 42c9.389 0 17-7.611 17-17S34.389 8 25 8 8 15.611 8 25s7.611 17 17 17zm0 8C11.193 50 0 38.807 0 25S11.193 0 25 0s25 11.193 25 25-11.193 25-25 25z';
+        /**
+         * För att dölja ikonen för skärmläsare. Default är satt till true.
+         * @en Hides the icon for screen readers. Default is set to true.
+         */
+        this.afSvgAriaHidden = true;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: '01da9beec6d02170d261e7bcbb0a869c390a5708', class: "digi-icon-spinner", height: "50", viewBox: "0 0 50 50", width: "50", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: '8085da966873f30a1a9af705eb8e7e3e17947c82', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '35eba6af8d23e43ac97fe8c28bcdf99e33af53c1' }, this.afDesc), index.h("g", { key: '4267eaffae10765793cb8ed64e54eee85606b750', class: "digi-icon-spinner__shape", fill: "none", "fill-rule": "evenodd" }, index.h("mask", { key: '3dcd53a9ebdb592389ba7223543956d2798cdef4', fill: "#fff", id: "iconSpinnerPath" }, index.h("path", { key: '7072d33494d1e76b1b476662242b148b7a92cc36', d: this._path })), index.h("path", { key: 'de7579ae4a346d40ccaea6e0d2148f143ff42235', d: this._path, fill: "#dddddd", "fill-rule": "nonzero" }), index.h("path", { key: '0c63307f29dc2476751b618cfce38c4e34570d08', d: "M19 26L54-5v62z", fill: "currentColor", mask: "url(#iconSpinnerPath)" }))));
+    }
+};
+IconSpinner.style = iconSpinnerCss();
+
+const loaderSpinnerCss = () => `.sc-digi-loader-spinner-h{--digi--loader-spinner--background-color:var(--digi--color--marking--indication--secondary);--digi--loader-spinner--icon--size--small:1rem;--digi--loader-spinner--icon--size--medium:2rem;--digi--loader-spinner--icon--size--large:5rem;--digi-loader-spinner--font--size--small:var(--digi--typography--heading-4--font-size--desktop-xsmall);--digi-loader-spinner--font--size--medium:var(--digi--typography--heading-4--font-size--desktop);--digi-loader-spinner--font--size--large:var(--digi--typography--heading-4--font-size--desktop-large)}.sc-digi-loader-spinner-h .digi-loader-spinner.sc-digi-loader-spinner{display:flex;flex-direction:column;align-items:center;width:max-content;padding:var(--PADDING)}.sc-digi-loader-spinner-h .digi-loader-spinner--small.sc-digi-loader-spinner{--ICON-HEIGHT:var(--digi--loader-spinner--icon--size--small);--FONT-SIZE:var(--digi-loader-spinner--font--size--small);--PADDING:0}.sc-digi-loader-spinner-h .digi-loader-spinner--medium.sc-digi-loader-spinner{--ICON-HEIGHT:var(--digi--loader-spinner--icon--size--medium);--FONT-SIZE:var(--digi-loader-spinner--font--size--medium);--PADDING:var(--digi--gutter--large)}.sc-digi-loader-spinner-h .digi-loader-spinner--large.sc-digi-loader-spinner{--ICON-HEIGHT:var(--digi--loader-spinner--icon--size--large);--FONT-SIZE:var(--digi-loader-spinner--font--size--large);--PADDING:var(--digi--gutter--large)}.sc-digi-loader-spinner-h .digi-loader-spinner__container.sc-digi-loader-spinner{height:max-content;width:max-content}.sc-digi-loader-spinner-h .digi-loader-spinner__spinner.sc-digi-loader-spinner{animation:animation__rotation 3s infinite linear;transform-origin:center;--digi--icon--height:var(--ICON-HEIGHT);--digi--icon--color:var(--digi--loader-spinner--background-color)}@media (prefers-reduced-motion){.sc-digi-loader-spinner-h .digi-loader-spinner__spinner.sc-digi-loader-spinner{animation:none}}@keyframes animation__rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.sc-digi-loader-spinner-h .digi-loader-spinner__label.sc-digi-loader-spinner{margin-top:var(--digi--gutter--medium);color:var(--digi--color--text--primary)}`;
+
+const LoaderSpinner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Sätter spinnerns storlek. 'medium' är förvalt.
+         * @en Set spinner icon size. Defaults to medium size.
+         */
+        this.afSize = loaderSpinnerSize_enum.LoaderSpinnerSize.MEDIUM;
+    }
+    get cssModifiers() {
+        return {
+            'digi-loader-spinner--small': this.afSize == 'small',
+            'digi-loader-spinner--medium': this.afSize == 'medium',
+            'digi-loader-spinner--large': this.afSize == 'large'
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '5ce83a90773fde8a399784f2b039d5eacf26baba' }, index.h("div", { key: 'cf0d7ee45d6efa765f352fad64aa09b2ddf65501', "aria-label": this.afText, "aria-live": "assertive", class: Object.assign({ 'digi-loader-spinner': true }, this.cssModifiers) }, index.h("div", { key: '66cd562f405f159fdafae03c111f9b404699c55a', class: "digi-loader-spinner__container", "aria-hidden": "true" }, index.h("digi-icon-spinner", { key: '4c04dc8d0cdd8f8a959907366c375bb2dde3d79f', class: "digi-loader-spinner__spinner" })), this.afText && (index.h("div", { key: 'a9b00ce291b44719c53f1350ba8921cacc5a04d7', class: "digi-loader-spinner__label" }, this.afText)))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+LoaderSpinner.style = loaderSpinnerCss();
+
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const BLOCKED_ELEMENTS = new Set([
+    'script',
+    'foreignobject',
+    'iframe',
+    'object',
+    'embed'
+]);
+const UNSAFE_URL = /^\s*(javascript|vbscript|data)\s*:/i;
+const UNSAFE_STYLE = /javascript\s*:|expression\s*\(|@import|-moz-binding|behavior\s*:/i;
+const FRAGMENT_REFERENCE = /^\s*(#|url\(\s*['"]?#)/i;
+const SAFE_LINK = /^(https?:|mailto:|tel:)/i;
+function prepareSvgMarkup(raw, options) {
+    const parsed = new DOMParser().parseFromString(raw, 'image/svg+xml');
+    const svg = parsed.documentElement;
+    if (svg.localName !== 'svg' || svg.namespaceURI !== SVG_NAMESPACE) {
+        return null;
+    }
+    sanitizeSvg(svg);
+    // Id:n måste prefixas först, så att #id i <style> redan är unika när selektorerna begränsas.
+    prefixSvgIds(svg, options.idPrefix);
+    scopeSvgStyles(svg, options.idPrefix);
+    applyDimensions(svg, options);
+    applyAccessibility(svg, options);
+    return new XMLSerializer().serializeToString(svg);
+}
+function sanitizeSvg(svg) {
+    var _a;
+    sanitizeElement(svg);
+    for (const el of Array.from(svg.querySelectorAll('*'))) {
+        if (svg.contains(el)) {
+            sanitizeElement(el);
+        }
+    }
+    for (const styleEl of Array.from(svg.querySelectorAll('style'))) {
+        if (UNSAFE_STYLE.test((_a = styleEl.textContent) !== null && _a !== void 0 ? _a : '')) {
+            styleEl.remove();
+        }
+    }
+}
+function sanitizeElement(el) {
+    const tag = el.localName.toLowerCase();
+    if (tag !== 'svg' && BLOCKED_ELEMENTS.has(tag)) {
+        el.remove();
+        return;
+    }
+    if ((tag === 'animate' || tag === 'set') && sanitizeAnimation(el, tag)) {
+        return;
+    }
+    for (const attr of Array.from(el.attributes)) {
+        const name = attr.localName.toLowerCase();
+        if (name.startsWith('on')) {
+            removeAttribute(el, attr);
+            continue;
+        }
+        if ((name === 'href' || name === 'src') && !isAllowedUrl(tag, attr.value)) {
+            removeAttribute(el, attr);
+            continue;
+        }
+        if (name === 'style' && UNSAFE_STYLE.test(attr.value)) {
+            removeAttribute(el, attr);
+        }
+    }
+}
+function isAllowedUrl(tag, value) {
+    const trimmed = value.trim();
+    if (!trimmed || UNSAFE_URL.test(trimmed)) {
+        return !trimmed;
+    }
+    if (tag === 'use' || tag === 'image') {
+        return FRAGMENT_REFERENCE.test(trimmed);
+    }
+    return FRAGMENT_REFERENCE.test(trimmed) || SAFE_LINK.test(trimmed);
+}
+const ANIMATION_VALUE_ATTRIBUTES = ['to', 'from', 'by', 'values'];
+const SCOPE_ATTRIBUTE = 'data-digi-svg-scope';
+/**
+ * Saniterar SMIL-animationer för att förhindra XSS-attacker.
+ * (SMIL = Synchronized Multimedia Integration Language)
+ *
+ * SMIL kan manipulera 'href/src' via attribut som to/from/values.
+ * Om animationen försöker injicera en osäker URL (t.ex. javascript:)
+ * tas hela elementet bort.
+ *
+ * @returns true om elementet raderades, annars false.
+ */ function sanitizeAnimation(el, tag) {
+    var _a;
+    const attributeName = (_a = el.getAttribute('attributeName')) !== null && _a !== void 0 ? _a : '';
+    if (attributeName.toLowerCase().startsWith('on')) {
+        el.remove();
+        return true;
+    }
+    const urlAttribute = isUrlAttributeName(attributeName);
+    // href/src: hela elementet tas bort. Annars räcker det att ta bort javascript:-värdet.
+    for (const name of ANIMATION_VALUE_ATTRIBUTES) {
+        const value = el.getAttribute(name);
+        if (value == null)
+            continue;
+        if (urlAttribute) {
+            const parts = name === 'values' ? value.split(';') : [value];
+            if (parts.some((part) => !isAllowedUrl(tag, part))) {
+                el.remove();
+                return true;
+            }
+            continue;
+        }
+        if (animationValueIsUnsafe(value)) {
+            el.removeAttribute(name);
+        }
+    }
+    return false;
+}
+function isUrlAttributeName(name) {
+    const normalized = name.trim().toLowerCase();
+    return (normalized === 'href' ||
+        normalized === 'src' ||
+        normalized.endsWith(':href') ||
+        normalized.endsWith(':src'));
+}
+function animationValueIsUnsafe(value) {
+    return value.split(';').some((part) => UNSAFE_URL.test(part));
+}
+/**
+ * <style> i en inlinad SVG gäller hela dokumentet. Selektorer begränsas
+ * till den här instansen via data-digi-svg-scope på rot-svg:n.
+ */
+function scopeSvgStyles(svg, scopeId) {
+    var _a;
+    if (!scopeId)
+        return;
+    const styleElements = Array.from(svg.querySelectorAll('style'));
+    if (styleElements.length === 0)
+        return;
+    svg.setAttribute(SCOPE_ATTRIBUTE, scopeId);
+    const scope = `[${SCOPE_ATTRIBUTE}="${scopeId.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"]`;
+    for (const styleEl of styleElements) {
+        styleEl.textContent = prefixCssSelectors((_a = styleEl.textContent) !== null && _a !== void 0 ? _a : '', scope);
+    }
+}
+/**
+ * Går igenom CSS och prefixar selektorlistor. @keyframes lämnas orörda
+ * (from, to och procent). Övriga @-regler, till exempel @media, prefixas bara inuti.
+ */
+function prefixCssSelectors(css, scope) {
+    let result = '';
+    let cursor = 0;
+    let depth = 0;
+    const keyframeDepths = new Set();
+    while (cursor < css.length) {
+        const found = findNextBrace(css, cursor);
+        if (!found) {
+            result += css.slice(cursor);
+            break;
+        }
+        const prelude = css.slice(cursor, found.index);
+        if (found.char === '}') {
+            if (keyframeDepths.has(depth))
+                keyframeDepths.delete(depth);
+            result += prelude + '}';
+            depth = Math.max(0, depth - 1);
+            cursor = found.index + 1;
+            continue;
+        }
+        const stripped = prelude.replace(/\/\*[\s\S]*?\*\//g, '').trim();
+        const entering = depth + 1;
+        // Inuti @keyframes, och på själva @-regeln, ska preludiet inte prefixas.
+        if (isKeyframesPrelude(stripped)) {
+            keyframeDepths.add(entering);
+            result += prelude + '{';
+        }
+        else if (keyframeDepths.has(depth) ||
+            stripped.startsWith('@') ||
+            !stripped) {
+            result += prelude + '{';
+        }
+        else {
+            result += scopeSelectorList(prelude, scope) + '{';
+        }
+        depth = entering;
+        cursor = found.index + 1;
+    }
+    return result;
+}
+function isKeyframesPrelude(prelude) {
+    return /^@(-[\w]+-)?keyframes\b/i.test(prelude);
+}
+function scopeSelectorList(list, scope) {
+    var _a, _b, _c, _d;
+    const leading = (_b = (_a = list.match(/^\s*/)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '';
+    const trailing = (_d = (_c = list.match(/\s*$/)) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : '';
+    const scoped = splitSelectors(list)
+        .map((selector) => scopeSelector(selector, scope))
+        .filter(Boolean)
+        .join(', ');
+    return `${leading}${scoped}${trailing}`;
+}
+/**
+ * Två varianter så att regeln träffar både barn och rot-svg:n.
+ * `.box` blir `[scope] .box, [scope].box`. `svg` blir `[scope] svg, svg[scope]`.
+ */
+function scopeSelector(selector, scope) {
+    const trimmed = selector.trim();
+    if (!trimmed)
+        return '';
+    return `${scope} ${trimmed}, ${mergeScope(trimmed, scope)}`;
+}
+function mergeScope(selector, scope) {
+    const typeMatch = selector.match(/^(?:\*|[A-Za-z_][\w-]*)/);
+    if (typeMatch) {
+        return `${typeMatch[0]}${scope}${selector.slice(typeMatch[0].length)}`;
+    }
+    return `${scope}${selector}`;
+}
+// Komma inuti :is(), strängar och kommentarer är inte avgränsare mellan selektorer.
+function splitSelectors(list) {
+    var _a;
+    const parts = [];
+    let current = '';
+    let paren = 0;
+    let quote = null;
+    for (let index = 0; index < list.length; index++) {
+        const char = list[index];
+        if (quote) {
+            current += char;
+            if (char === '\\') {
+                current += (_a = list[index + 1]) !== null && _a !== void 0 ? _a : '';
+                index++;
+            }
+            else if (char === quote) {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+            current += char;
+            continue;
+        }
+        if (char === '/' && list[index + 1] === '*') {
+            const end = list.indexOf('*/', index + 2);
+            const commentEnd = end === -1 ? list.length : end + 2;
+            current += list.slice(index, commentEnd);
+            index = commentEnd - 1;
+            continue;
+        }
+        if (char === '(')
+            paren++;
+        if (char === ')')
+            paren = Math.max(0, paren - 1);
+        if (char === ',' && paren === 0) {
+            parts.push(current);
+            current = '';
+            continue;
+        }
+        current += char;
+    }
+    parts.push(current);
+    return parts;
+}
+// Hoppar över { och } inuti strängar och kommentarer.
+function findNextBrace(css, from) {
+    let quote = null;
+    for (let index = from; index < css.length; index++) {
+        const char = css[index];
+        if (quote) {
+            if (char === '\\') {
+                index++;
+                continue;
+            }
+            if (char === quote)
+                quote = null;
+            continue;
+        }
+        if (char === '/' && css[index + 1] === '*') {
+            const end = css.indexOf('*/', index + 2);
+            index = end === -1 ? css.length : end + 1;
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+            continue;
+        }
+        if (char === '{' || char === '}') {
+            return { index, char: char };
+        }
+    }
+    return null;
+}
+function removeAttribute(el, attr) {
+    if (attr.namespaceURI) {
+        el.removeAttributeNS(attr.namespaceURI, attr.localName);
+        return;
+    }
+    el.removeAttribute(attr.localName);
+}
+function prefixSvgIds(svg, idPrefix) {
+    var _a;
+    if (!idPrefix)
+        return;
+    const elements = Array.from(svg.querySelectorAll('[id]'));
+    const ids = elements
+        .map((el) => el.getAttribute('id'))
+        .filter((id) => !!id);
+    if (ids.length === 0)
+        return;
+    const idSet = new Set(ids);
+    const rewrite = (value) => rewriteReferences(value, ids, idPrefix);
+    for (const el of [svg, ...Array.from(svg.querySelectorAll('*'))]) {
+        for (const attr of Array.from(el.attributes)) {
+            const rewritten = rewriteIdAttribute(attr.localName, attr.value, idSet, idPrefix, rewrite);
+            if (rewritten !== attr.value) {
+                setAttribute(el, attr, rewritten);
+            }
+        }
+    }
+    for (const styleEl of Array.from(svg.querySelectorAll('style'))) {
+        styleEl.textContent = rewrite((_a = styleEl.textContent) !== null && _a !== void 0 ? _a : '');
+    }
+    for (const el of elements) {
+        const id = el.getAttribute('id');
+        if (id && idSet.has(id)) {
+            el.setAttribute('id', `${idPrefix}${id}`);
+        }
+    }
+}
+function rewriteIdAttribute(name, value, idSet, idPrefix, rewrite) {
+    if (name === 'aria-labelledby' ||
+        name === 'aria-describedby' ||
+        name === 'aria-activedescendant') {
+        return value
+            .split(/\s+/)
+            .map((token) => (idSet.has(token) ? `${idPrefix}${token}` : token))
+            .join(' ');
+    }
+    return rewrite(value);
+}
+function rewriteReferences(value, ids, idPrefix) {
+    const sorted = [...ids].sort((a, b) => b.length - a.length);
+    let result = '';
+    let index = 0;
+    while (index < value.length) {
+        const hash = value.indexOf('#', index);
+        if (hash === -1) {
+            result += value.slice(index);
+            break;
+        }
+        result += value.slice(index, hash);
+        const rest = value.slice(hash + 1);
+        const match = sorted.find((id) => rest.startsWith(id) && !isIdChar(rest.charAt(id.length)));
+        if (match) {
+            result += `#${idPrefix}${match}`;
+            index = hash + 1 + match.length;
+        }
+        else {
+            result += '#';
+            index = hash + 1;
+        }
+    }
+    return result;
+}
+function isIdChar(char) {
+    return char !== '' && /[\w.-]/.test(char);
+}
+function setAttribute(el, attr, value) {
+    if (attr.namespaceURI) {
+        el.setAttributeNS(attr.namespaceURI, attr.localName, value);
+        return;
+    }
+    el.setAttribute(attr.localName, value);
+}
+function applyDimensions(svg, options) {
+    if (!options.responsive)
+        return;
+    svg.setAttribute('width', '100%');
+    svg.removeAttribute('height');
+    setStyleProperties(svg, {
+        width: '100%',
+        height: 'auto'
+    });
+}
+// Ersätter width och height i ett befintligt style-attribut. Övriga deklarationer behålls.
+function setStyleProperties(svg, updates) {
+    var _a;
+    const names = new Set(Object.keys(updates));
+    const kept = ((_a = svg.getAttribute('style')) !== null && _a !== void 0 ? _a : '')
+        .split(';')
+        .map((part) => part.trim())
+        .filter(Boolean)
+        .filter((part) => {
+        var _a;
+        const name = (_a = part.split(':')[0]) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
+        return !!name && !names.has(name);
+    });
+    const next = [
+        ...kept,
+        ...Object.entries(updates).map(([name, value]) => `${name}: ${value}`)
+    ];
+    svg.setAttribute('style', `${next.join('; ')};`);
+}
+function applyAccessibility(svg, options) {
+    const label = options.label.trim();
+    const title = svg.querySelector(':scope > title');
+    if (!label) {
+        svg.setAttribute('aria-hidden', 'true');
+        svg.removeAttribute('aria-label');
+        svg.removeAttribute('aria-labelledby');
+        svg.removeAttribute('role');
+        title === null || title === void 0 ? void 0 : title.remove();
+        return;
+    }
+    svg.removeAttribute('aria-hidden');
+    svg.removeAttribute('aria-label');
+    svg.setAttribute('role', 'img');
+    const titleId = uniqueId(svg, `${options.idPrefix}accessible-name`);
+    svg.setAttribute('aria-labelledby', titleId);
+    let titleElement = title;
+    if (!titleElement) {
+        titleElement = svg.ownerDocument.createElementNS(SVG_NAMESPACE, 'title');
+        svg.insertBefore(titleElement, svg.firstChild);
+    }
+    titleElement.setAttribute('id', titleId);
+    titleElement.textContent = label;
+}
+function uniqueId(svg, base) {
+    let candidate = base;
+    let suffix = 2;
+    while (svg.querySelector(`[id="${candidate}"]`)) {
+        candidate = `${base}-${suffix++}`;
+    }
+    return candidate;
+}
+
+const mediaSvgCss = () => `.sc-digi-media-svg-h{display:block;box-sizing:border-box;width:100%}.sc-digi-media-svg-h .digi--a11y--sr-only.sc-digi-media-svg{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.digi-media-svg__content.sc-digi-media-svg{--digi--icon--width:1rem}.digi-media-svg--responsive.sc-digi-media-svg .digi-media-svg__content.sc-digi-media-svg svg.sc-digi-media-svg{width:100%;height:auto}`;
+
+const SVG_CACHE = new Map();
+let uniqueIdCounter = 0;
+const MediaSvg = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Sätter standardkällan till bredd 100% och höjd auto. Annars behåller filen sina egna mått.
+         * @en Sets the default source to width 100% and height auto. Otherwise the file keeps its own dimensions.
+         */
+        this.afDefaultResponsive = false;
+        /**
+         * Källor som matchas mot komponentens egen bredd i CSS-pixlar. Källan med högst minWidth som bredden fortfarande uppfyller vinner. Skicka en array, eller en JSON-sträng när attributet sätts i HTML.
+         * @en Sources matched against this component's own width, in CSS pixels. The source with the highest minWidth that the width still satisfies wins. Pass an array, or a JSON string when setting the attribute in HTML.
+         */
+        this.afSrcset = [];
+        /**
+         * Fördröjning i millisekunder innan komponentens bredd matchas mot brytpunkterna.
+         * @en Delay in milliseconds before the component width is matched against the breakpoints.
+         */
+        this.afDebounceMs = 150;
+        /**
+         * Alternativtext för grafiken. Utelämnad eller tom text gör grafiken dekorativ.
+         * Används också när en källa i afSrcset saknar altText.
+         * @en Alternative text for the graphic. Omitted or empty text treats the graphic as decorative.
+         * Also used when a source in afSrcset has no altText.
+         */
+        this.afAlt = '';
+        this.svgContent = '';
+        this.hasError = false;
+        this.activeSrc = '';
+        this.isResponsive = false;
+        this.currentMatchedSource = null;
+        this.parsedSources = [];
+        this.renderedSrc = '';
+        this.resizeObserver = null;
+        this.debounceTimeoutId = null;
+        this.internalId = `digi-media-svg-${uniqueIdCounter++}`;
+    }
+    /**
+     * Hämta källan som visas. Tom sträng betyder att ingen grafik visas, även under hämtning och vid fel.
+     * @en Get the source currently shown. An empty string means no graphic is shown, including while loading and on error.
+     */
+    async afGetActiveSource() {
+        const shown = this.el.querySelector('div.digi-media-svg__content > svg');
+        return shown ? this.renderedSrc : '';
+    }
+    componentWillLoad() {
+        this.parseSources();
+        this.syncResponsiveState();
+        // Angular sätter källan en frame efter uppgradering (Stencil 4.36+).
+        // @Watch hoppar över den första tilldelningen. Finns källan redan väntar vi inte.
+        if (this.afDefaultSource || this.parsedSources.length > 0)
+            return;
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                this.parseSources();
+                this.syncResponsiveState();
+                resolve();
+            });
+        });
+    }
+    componentDidLoad() {
+        this.evaluateContainerBreakpoints(this.el.clientWidth || 0);
+    }
+    componentDidRender() {
+        // Nodes from innerHTML never receive the scope class Stencil adds during render.
+        this.scopeInsertedSvg();
+    }
+    connectedCallback() {
+        this.parseSources();
+        this.setupContainerObserver();
+        // En hämtning som blev klar medan elementet var frånkopplat ritades inte ut.
+        this.resumeSvgLoad();
+    }
+    disconnectedCallback() {
+        this.disconnectObserver();
+        if (this.debounceTimeoutId !== null) {
+            clearTimeout(this.debounceTimeoutId);
+            this.debounceTimeoutId = null;
+        }
+    }
+    handleSourceChanges() {
+        this.parseSources();
+        this.evaluateContainerBreakpoints(this.el.clientWidth || 0);
+    }
+    handlePresentationChanges() {
+        this.syncResponsiveState();
+        this.reprepareActiveSvg();
+    }
+    parseSources() {
+        const parsed = typeof this.afSrcset === 'string'
+            ? this.parseSrcsetJson(this.afSrcset)
+            : this.afSrcset;
+        // {}, null och tal är inte itererbara. Spridning i breddmätningen skulle kasta.
+        this.parsedSources = Array.isArray(parsed) ? parsed : [];
+    }
+    parseSrcsetJson(value) {
+        try {
+            return JSON.parse(value);
+        }
+        catch (error) {
+            console.error('Failed to parse sources JSON string:', error);
+            return [];
+        }
+    }
+    setupContainerObserver() {
+        this.disconnectObserver();
+        this.resizeObserver = new ResizeObserver((entries) => {
+            var _a, _b, _c;
+            for (const entry of entries) {
+                const width = (_c = (_b = (_a = entry.contentBoxSize) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.inlineSize) !== null && _c !== void 0 ? _c : entry.contentRect.width;
+                if (this.debounceTimeoutId !== null) {
+                    clearTimeout(this.debounceTimeoutId);
+                }
+                this.debounceTimeoutId = setTimeout(() => {
+                    this.debounceTimeoutId = null;
+                    this.evaluateContainerBreakpoints(width);
+                }, this.afDebounceMs);
+            }
+        });
+        this.resizeObserver.observe(this.el);
+    }
+    disconnectObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    defaultMinWidth() {
+        const minWidth = this.afDefaultMinWidth;
+        return typeof minWidth === 'number' && Number.isFinite(minWidth)
+            ? minWidth
+            : null;
+    }
+    isBelowDefaultMinWidth(hostWidth) {
+        const minWidth = this.defaultMinWidth();
+        return minWidth !== null && hostWidth < minWidth;
+    }
+    evaluateContainerBreakpoints(hostWidth) {
+        let matchedSrc = this.isBelowDefaultMinWidth(hostWidth)
+            ? ''
+            : this.afDefaultSource || '';
+        let matchedSourceObj = null;
+        const sortedSources = [...this.parsedSources].sort((a, b) => (b.minWidth || 0) - (a.minWidth || 0));
+        for (const source of sortedSources) {
+            if (source.minWidth !== undefined && hostWidth >= source.minWidth) {
+                matchedSrc = source.src;
+                matchedSourceObj = source;
+                break;
+            }
+        }
+        const presentationChanged = this.prepareSignature(this.currentMatchedSource) !==
+            this.prepareSignature(matchedSourceObj);
+        this.currentMatchedSource = matchedSourceObj;
+        this.syncResponsiveState();
+        if (matchedSrc !== this.activeSrc) {
+            this.activeSrc = matchedSrc;
+            void this.fetchSvg(this.activeSrc);
+            return;
+        }
+        if (presentationChanged) {
+            this.reprepareActiveSvg();
+        }
+    }
+    // Responsive sizing and alt text passed to prepareSvgMarkup.
+    // The cache stores the raw file by URL, so the same address is prepared again when these inputs change.
+    prepareSignature(source) {
+        var _a, _b, _c, _d;
+        if (!source) {
+            return [
+                'default',
+                this.afDefaultResponsive === true,
+                (_b = (_a = this.afAlt) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : ''
+            ].join('|');
+        }
+        const hasAltText = typeof source.altText === 'string';
+        const label = (_d = (_c = (hasAltText ? source.altText : this.afAlt)) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '';
+        return [source.src, source.responsive === true, hasAltText, label].join('|');
+    }
+    activeLabel() {
+        var _a, _b;
+        const altText = (_a = this.currentMatchedSource) === null || _a === void 0 ? void 0 : _a.altText;
+        const label = typeof altText === 'string' ? altText : this.afAlt;
+        return (_b = label === null || label === void 0 ? void 0 : label.trim()) !== null && _b !== void 0 ? _b : '';
+    }
+    resumeSvgLoad() {
+        if (!this.activeSrc || this.activeSrc === this.renderedSrc)
+            return;
+        void this.fetchSvg(this.activeSrc);
+    }
+    async fetchSvg(url) {
+        if (!url) {
+            this.hasError = false;
+            this.svgContent = '';
+            this.renderedSrc = '';
+            return;
+        }
+        const cached = SVG_CACHE.get(url);
+        if (cached !== undefined) {
+            this.applyFetchedSvg(url, cached);
+            return;
+        }
+        try {
+            this.hasError = false;
+            const response = await fetch(url);
+            if (!response.ok)
+                throw new Error(`HTTP error status: ${response.status}`);
+            const rawText = await response.text();
+            SVG_CACHE.set(url, rawText);
+            this.applyFetchedSvg(url, rawText);
+        }
+        catch (error) {
+            console.error(`Error loading SVG from ${url}:`, error);
+            if (this.activeSrc === url && this.el.isConnected) {
+                this.hasError = true;
+                this.svgContent = '';
+                this.renderedSrc = '';
+            }
+        }
+    }
+    applyFetchedSvg(url, raw) {
+        if (this.activeSrc !== url || !this.el.isConnected)
+            return;
+        this.applyActiveSvg(raw);
+    }
+    reprepareActiveSvg() {
+        if (!this.activeSrc)
+            return;
+        const cached = SVG_CACHE.get(this.activeSrc);
+        if (cached === undefined)
+            return;
+        this.applyActiveSvg(cached);
+    }
+    applyActiveSvg(raw) {
+        const prepared = this.prepareSvg(raw);
+        if (prepared === null) {
+            this.hasError = true;
+            this.svgContent = '';
+            this.renderedSrc = '';
+            return;
+        }
+        this.hasError = false;
+        this.svgContent = prepared;
+        this.renderedSrc = this.activeSrc;
+    }
+    prepareSvg(raw) {
+        return prepareSvgMarkup(raw, {
+            label: this.activeLabel(),
+            idPrefix: `${this.internalId}-`,
+            responsive: this.isActiveSourceResponsive()
+        });
+    }
+    isActiveSourceResponsive() {
+        const source = this.currentMatchedSource;
+        return source
+            ? source.responsive === true
+            : this.afDefaultResponsive === true;
+    }
+    syncResponsiveState() {
+        this.isResponsive = this.isActiveSourceResponsive();
+    }
+    scopeInsertedSvg() {
+        const content = this.el.querySelector('div.digi-media-svg__content');
+        const svg = content === null || content === void 0 ? void 0 : content.querySelector(':scope > svg');
+        if (!(content instanceof HTMLElement) || !svg)
+            return;
+        applyStencilScope_util.applyStencilScope(content, svg);
+    }
+    get cssModifiers() {
+        return {
+            'digi-media-svg--responsive': this.isResponsive
+        };
+    }
+    render() {
+        // Spinnaren hör till en adress som hämtas. Ingen källa ger samma tomma värd som under minsta bredd.
+        const showGraphic = !!this.activeSrc && !this.hasError;
+        return (index.h(index.Host, { key: 'feb7551894e52a1af5d5e070831d4c18996529e2' }, index.h("div", { key: 'ad7cf939dd5fd2a01ea40a4d87e1b0832cda95c7', class: "digi-media-svg__status", "aria-live": "assertive" }, this.hasError && (index.h("slot", { key: '0904ef7441a1f6fba669d17308e6201b45d1429c', name: "error" }, index.h("span", { key: '28966d116333e3335c55d77facc094b23500c2b7', class: "digi--a11y--sr-only" }, "Grafiken kunde inte laddas"), index.h("digi-icon-exclamation-triangle", { key: '18952dfa16f824cb0ec6f25c536b88ffc735bbb0', class: "digi-media-svg__content" })))), showGraphic && (index.h("div", { key: '8e65d5979c7e5abc38844f6a32dac02e1b34e3b9', class: Object.assign({ 'digi-media-svg': true }, this.cssModifiers) }, this.svgContent ? (index.h("div", { class: "digi-media-svg__content", innerHTML: this.svgContent })) : (index.h("slot", { name: "loading" }, index.h("digi-loader-spinner", { class: "digi-media-svg__content", "af-size": "small" })))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "afSrcset": [{
+                "handleSourceChanges": 0
+            }],
+        "afDefaultSource": [{
+                "handleSourceChanges": 0
+            }],
+        "afDefaultMinWidth": [{
+                "handleSourceChanges": 0
+            }],
+        "afAlt": [{
+                "handlePresentationChanges": 0
+            }],
+        "afDefaultResponsive": [{
+                "handlePresentationChanges": 0
+            }]
+    }; }
+};
+MediaSvg.style = mediaSvgCss();
+
+exports.digi_icon_exclamation_triangle = IconExclamationTriangle;
+exports.digi_icon_spinner = IconSpinner;
+exports.digi_loader_spinner = LoaderSpinner;
+exports.digi_media_svg = MediaSvg;