@designsystem-se/af 39.4.0 → 39.5.0

package/components/digi-media-svg.js

@@ -0,0 +1,802 @@
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-D6LCrv8C.js';
+import { a as applyStencilScope } from './p-Bt5oq5cL.js';
+import { d as defineCustomElement$4 } from './p-gMNNKkdk.js';
+import { d as defineCustomElement$3 } from './p-Cs9lEhNQ.js';
+import { d as defineCustomElement$2 } from './p-BT9Do6XC.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class MediaSvg extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * 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 H) || !svg)
+            return;
+        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 (h(Host, { key: 'feb7551894e52a1af5d5e070831d4c18996529e2' }, h("div", { key: 'ad7cf939dd5fd2a01ea40a4d87e1b0832cda95c7', class: "digi-media-svg__status", "aria-live": "assertive" }, this.hasError && (h("slot", { key: '0904ef7441a1f6fba669d17308e6201b45d1429c', name: "error" }, h("span", { key: '28966d116333e3335c55d77facc094b23500c2b7', class: "digi--a11y--sr-only" }, "Grafiken kunde inte laddas"), h("digi-icon-exclamation-triangle", { key: '18952dfa16f824cb0ec6f25c536b88ffc735bbb0', class: "digi-media-svg__content" })))), showGraphic && (h("div", { key: '8e65d5979c7e5abc38844f6a32dac02e1b34e3b9', class: Object.assign({ 'digi-media-svg': true }, this.cssModifiers) }, this.svgContent ? (h("div", { class: "digi-media-svg__content", innerHTML: this.svgContent })) : (h("slot", { name: "loading" }, h("digi-loader-spinner", { class: "digi-media-svg__content", "af-size": "small" })))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "afSrcset": [{
+                "handleSourceChanges": 0
+            }],
+        "afDefaultSource": [{
+                "handleSourceChanges": 0
+            }],
+        "afDefaultMinWidth": [{
+                "handleSourceChanges": 0
+            }],
+        "afAlt": [{
+                "handlePresentationChanges": 0
+            }],
+        "afDefaultResponsive": [{
+                "handlePresentationChanges": 0
+            }]
+    }; }
+    static get style() { return mediaSvgCss(); }
+}, [262, "digi-media-svg", {
+        "afDefaultSource": [1, "af-default-source"],
+        "afDefaultMinWidth": [2, "af-default-min-width"],
+        "afDefaultResponsive": [4, "af-default-responsive"],
+        "afSrcset": [1, "af-srcset"],
+        "afDebounceMs": [2, "af-debounce-ms"],
+        "afAlt": [1, "af-alt"],
+        "svgContent": [32],
+        "hasError": [32],
+        "activeSrc": [32],
+        "isResponsive": [32],
+        "afGetActiveSource": [64]
+    }, undefined, {
+        "afSrcset": [{
+                "handleSourceChanges": 0
+            }],
+        "afDefaultSource": [{
+                "handleSourceChanges": 0
+            }],
+        "afDefaultMinWidth": [{
+                "handleSourceChanges": 0
+            }],
+        "afAlt": [{
+                "handlePresentationChanges": 0
+            }],
+        "afDefaultResponsive": [{
+                "handlePresentationChanges": 0
+            }]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["digi-media-svg", "digi-icon-exclamation-triangle", "digi-icon-spinner", "digi-loader-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "digi-media-svg":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), MediaSvg);
+            }
+            break;
+        case "digi-icon-exclamation-triangle":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "digi-icon-spinner":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "digi-loader-spinner":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DigiMediaSvg = MediaSvg;
+const defineCustomElement = defineCustomElement$1;
+
+export { DigiMediaSvg, defineCustomElement };