<button type="button" class="a-button a-button--transparent m-modal__graph-button" data-modal-open="modal-container" data-zoom="Klicka på grafen för att zooma">
<span class="a-button__text u-visuallyhidden">Open graph modal</span>
<img src="/assets/images/graph.png" alt="Graf" class="u-border-radius u-b u-b-solid u-b-3 u-b-ash" style="max-width:100%;width:612px;">
</button>
<div id="modal-container" class="m-modal m-modal--has-overlay" aria-hidden="true">
<div class="m-modal__container m-modal__container--dynamic-width js-modal-graph">
<button type="button" class="m-modal__overlay-button js-modal-graph-button">
<span>Scrolla för att se hela grafen</span>
</button>
<button type="button" class="a-button a-button--ocean-light m-modal__button-fixed js-toggle-modal" aria-expanded="false" data-a11y-toggle="modal-container" aria-controls="modal-container" data-modal-close>
<span class="a-button__text">Stäng</span>
</button>
<div id="graph-2185" class="background-snow wp-block-graph ">
<div class="wrapper">
<div data-iis-graph-parent="" class="iis-graph alignwide u-p-b-4" style="position: relative; z-index:2;">
<div class="row align-items-start justify-content-between article__content article__content--full-width">
<div class="grid-18 grid-md-auto">
<div class="display-flex align-items-center justify-content-md-end">
<span class="a-button a-button--transparent a-button--icon m-share__button u-p-r-1" style="overflow: visible">
<span class="a-button__text">Hjälp</span>
<span tabindex="0" class="a-tooltip" id="tooltip-2185" role="tooltip">
<span class="a-tooltip__text" data-tooltip="">Grafen är interaktiv vilket gör att du kan markera ytor med musen för att zooma (gäller enbart desktop) samt själv välja vilka delar du vill ska synas genom att klicka på diagramförklaringarna.</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-questionmark"></use>
</svg>
</span>
</span>
<div class="m-context-menu js-context-menu">
<button type="button" class="a-button a-button--transparent a-button--icon js-context-menu-btn" data-a11y-toggle="graph-export-218570df" id="a11y-toggle-0" aria-controls="graph-export-218570df" aria-expanded="false">
<span class="a-button__text">Exportera</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-download"></use>
</svg>
</button>
<ul class="m-context-menu__list u-list-clean u-z-index-middleground-important" id="graph-export-218570df" data-container="true" data-focus-trap="true" aria-hidden="true" aria-labelledby="a11y-toggle-0">
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="pdf" href="#">PDF</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="png" href="#">PNG</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="jpg" href="#">JPG</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="svg" href="#">SVG</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="csv" href="#">CSV</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="xlsx" href="#">XLSX</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="json" href="#">JSON</a></li>
</ul>
</div>
<a href="#" data-export-type="print" data-export-graph="2185" class="a-button a-button--transparent a-button--icon m-share__button">
<span class="a-button__text">Skriv ut</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-print"></use>
</svg>
</a>
</div>
</div>
</div>
<div>
<div data-iis-graph-idle-icon="2185" id="idle-icon" style="position: absolute;top: 50%;margin-top: -40px;margin-left: -40px;width: 80px;display: none;z-index: 99;pointer-events: none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="100%" height="100%">
<g>
<path class="arrow" d="M11.854 5.146a.5.5 0 01-.708.708l-2-2a.5.5 0 010-.708l2-2a.5.5 0 01.708.708L10.707 3H20.5a.5.5 0 110 1h-9.796l1.15 1.146z"></path>
</g>
<g>
<path class="hand" d="M22.093 13.708l-1.47-2.024a1.495 1.495 0 00-2.45.033l1.418 1.95a.507.507 0 01-.109.702.507.507 0 01-.7-.114l-1.763-2.425a1.495 1.495 0 00-2.448.032l2.005 2.76a.507.507 0 01-.109.701.507.507 0 01-.7-.113l-1.762-2.426a1.495 1.495 0 00-2.449.033l2.593 3.568a.507.507 0 01-.109.701.507.507 0 01-.7-.113l-4.701-6.47a1.495 1.495 0 00-2.095-.331 1.502 1.502 0 00-.332 2.094l5.43 7.475-2.41-1.073a1.495 1.495 0 00-1.979.76 1.502 1.502 0 00.759 1.98l2.65 1.18c.95.53 1.805 1.505 3.651 2.68 2.032 1.292 3.935 1.863 4.17 2.187a.51.51 0 00-.11.698c.162.224.478.271.706.105l7.266-5.278a.51.51 0 00.118-.704.504.504 0 00-.699-.11c-.864-1.191-1.314-5.213-3.671-8.458z"></path>
</g>
<style>
.arrow {
animation: arrow 3s infinite;
animation-delay: 3s;
opacity: 0;
}
.hand {
animation: hand 3s ease infinite;
transform: translateX(0.2rem);
}
@keyframes hand {
0% {
opacity: 1;
}
50% {
transform: translateX(-0.2rem);
opacity: 1;
}
100% {
transform: translateX(0.2rem);
opacity: 1;
}
}
@keyframes arrow {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
</style>
</svg>
</div>
<div data-iis-graph="2185" data-iis-graph-export="[data-iis-graph-parent]" style="height: 600px; width: 100%; min-width: 1360px;" data-ll-status="entered" class="entered" data-iis-graph-rendered="true" data-iis-graph-mounted="true">
<div style="width: 100%; height: 100%; position: relative; left: -0.5px; top: -0.460938px;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="group" style="width: 100%; height: 100%; overflow: visible;">
<defs>
<clipPath id="id-45">
<rect width="1320" height="600"></rect>
</clipPath>
<filter id="filter-id-72" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%"></filter>
<filter id="filter-id-93" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%"></filter>
<clipPath id="id-115">
<rect width="1206" height="486"></rect>
</clipPath>
<clipPath id="id-131">
<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
</clipPath>
<clipPath id="id-149">
<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
</clipPath>
<clipPath id="id-167">
<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
</clipPath>
<clipPath id="id-185">
<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
</clipPath>
<filter id="filter-id-50" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetBlur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="filter-id-190" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetBlur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="filter-id-172" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetBlur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="filter-id-154" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetBlur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="filter-id-136" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetBlur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<clipPath id="id-432">
<rect width="1206" height="486"></rect>
</clipPath>
</defs>
<g>
<g fill="#ffffff" fill-opacity="0">
<rect width="1320" height="600"></rect>
</g>
<g>
<g role="region" clip-path="url("#id-45")" opacity="1" aria-label="Diagram">
<g transform="translate(15,15)">
<g fill="#000000" id="id-66" font-size="16" font-weight="regular" display="none">
<g transform="translate(20,0)" style="user-select: none;">
<foreignObject width="1281" height="81">
<div style="text-align: center; overflow-wrap: break-word; color: rgb(0, 0, 0); display: block;">
<p>Fråga: Hur ofta använder du internet? Med internetanvändning avser vi all användning oavsett om det är på dator, surfplatta, smartmobil (smartphone), spelkonsol etc., År 2021–2022 (Studie 1)</p>
</div>
</foreignObject>
</g>
</g>
<g>
<g>
<g>
<g>
<g>
<g>
<g style="touch-action: none; user-select: none; -webkit-user-drag: none;" transform="translate(84,0)">
<g fill="#ffffff" fill-opacity="0">
<rect width="1206" height="486"></rect>
</g>
<g>
<g>
<g></g>
</g>
<g>
<g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,-49)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,0)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,49)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,97)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,146)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,194)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,243)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,292)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,340)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,389)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,437)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,486)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,535)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,583)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
</g>
</g>
<g>
<g>
<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#ff4069" aria-label="Icke-användare" stroke-width="0" id="id-182">
<g>
<g clip-path="url("#id-185")">
<g>
<g>
<g>
<g stroke-opacity="1" fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(434.16,456.84)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,29.16 a0,0 0 0 1 -0,0 L0,29.16 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
<g stroke-opacity="1" fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(1037.16,456.84)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,29.16 a0,0 0 0 1 -0,0 L0,29.16 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g></g>
</g>
</g>
<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#ffce2e" aria-label="Sällananvändare" stroke-width="0" id="id-164">
<g>
<g clip-path="url("#id-167")">
<g>
<g>
<g>
<g stroke-opacity="1" fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(313.56,466.56)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,19.44 a0,0 0 0 1 -0,0 L0,19.44 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
<g stroke-opacity="1" fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(916.56,466.56)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,19.44 a0,0 0 0 1 -0,0 L0,19.44 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g></g>
</g>
</g>
<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#55c7b4" aria-label="Dagliga användare" stroke-width="0" id="id-146">
<g>
<g clip-path="url("#id-149")">
<g>
<g>
<g>
<g stroke-opacity="1" fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(192.96,48.6)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,437.4 a0,0 0 0 1 -0,0 L0,437.4 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
<g stroke-opacity="1" fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(795.96,48.6)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,437.4 a0,0 0 0 1 -0,0 L0,437.4 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g></g>
</g>
</g>
<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#50b2fc" aria-label="Internetanvändare 16+ år" stroke-width="0" id="id-128">
<g>
<g clip-path="url("#id-131")">
<g>
<g>
<g>
<g stroke-opacity="1" fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(72.36,29.16)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,456.84 a0,0 0 0 1 -0,0 L0,456.84 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
<g stroke-opacity="1" fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(675.36,29.16)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,456.84 a0,0 0 0 1 -0,0 L0,456.84 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g></g>
</g>
</g>
</g>
</g>
<g clip-path="url("#id-432")">
<g>
<g fill="#50b2fc" stroke="#50b2fc">
<g></g>
</g>
<g fill="#55c7b4" stroke="#55c7b4">
<g></g>
</g>
<g fill="#ffce2e" stroke="#ffce2e">
<g></g>
</g>
<g fill="#ff4069" stroke="#ff4069">
<g></g>
</g>
</g>
</g>
<g>
<g>
<g>
<g></g>
</g>
<g>
<g></g>
</g>
</g>
</g>
<g>
<g></g>
</g>
<g>
<g></g>
</g>
<g opacity="0" clip-path="url("#id-115")" style="touch-action: none; user-select: none; -webkit-user-drag: none;" visibility="hidden" aria-hidden="true">
<g>
<g fill-opacity="0.2" fill="#000000" visibility="hidden" style="pointer-events: none;">
<path></path>
</g>
<g stroke="#000000" fill="none" stroke-dasharray="3,3" stroke-opacity="0.4" style="pointer-events: none;" transform="translate(1206,0)">
<path d=" M0,0 L0,486 "></path>
</g>
<g stroke="#000000" fill="none" stroke-dasharray="3,3" stroke-opacity="0.4" style="pointer-events: none;" transform="translate(0,178.4)">
<path d=" M0,0 L1206,0 "></path>
</g>
</g>
</g>
<g role="button" focusable="true" tabindex="0" opacity="0" visibility="hidden" aria-hidden="true" transform="translate(1166,-3)" aria-labelledby="id-36-title">
<g fill="#6794dc" stroke="#ffffff" fill-opacity="1" stroke-opacity="0" transform="translate(0,8)">
<path d="M17,0 L18,0 a17,17 0 0 1 17,17 L35,17 a17,17 0 0 1 -17,17 L17,34 a17,17 0 0 1 -17,-17 L0,17 a17,17 0 0 1 17,-17 Z"></path>
</g>
<g transform="translate(9,9)">
<g stroke="#ffffff" style="pointer-events: none;" transform="translate(0,8)">
<path d=" M0,0 L11,0 " transform="translate(2.5,7.5)"></path>
</g>
<g fill="#000000" style="pointer-events: none;" transform="translate(17,8)">
<g display="none"></g>
</g>
</g>
<title id="id-36-title">Zooma ut</title>
</g>
</g>
</g>
<g>
<g>
<g aria-hidden="true">
<g>
<g fill="#000000" transform="translate(0,263) rotate(-90)">
<g display="none"></g>
</g>
<g stroke="#000000" stroke-opacity="0.15" fill="none" transform="translate(84,486)" opacity="1">
<path transform="translate(-0.5,-0.5)" d=" M0,0 L1206,0 "></path>
</g>
<g>
<g>
<g fill="#000000" aria-label="L" fill-opacity="0" opacity="0" stroke-opacity="0" style="pointer-events: none;" transform="translate(64,243)">
<g transform="translate(-54,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>100%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,-48.6)" display="none">
<g transform="translate(-54,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>110%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,0)">
<g transform="translate(-54,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>100%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,48.6)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>90%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,97.2)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>80%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,145.8)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>70%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,194.4)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>60%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,243)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>50%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,291.6)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>40%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,340.2)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>30%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,388.8)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>20%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,437.4)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>10%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,486)">
<g transform="translate(-34,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>0%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,534.6)" display="none">
<g transform="translate(-49,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>-10%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,583.2)" display="none">
<g transform="translate(-49,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>-20%</tspan>
</text>
</g>
</g>
</g>
</g>
<g stroke="#000000" stroke-opacity="0" fill="none" style="pointer-events: none;" transform="translate(64,0)">
<path d=" M0,0 L0,486 " transform="translate(-0.5,-0.5)"></path>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(1290,0)">
<g></g>
</g>
</g>
</g>
<g>
<g transform="translate(84,0)"></g>
</g>
<g transform="translate(0,486)">
<g transform="translate(84,0)">
<g aria-hidden="true">
<g>
<g stroke="#000000" stroke-opacity="0" fill="none" style="pointer-events: none;">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g>
<g>
<g fill="#000000" aria-label="L" fill-opacity="0" opacity="0" stroke-opacity="0" style="pointer-events: none;" transform="translate(603,0)">
<g transform="translate(-4.5,10)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>L</tspan>
</text>
</g>
</g>
<g fill="#000000" display="none" transform="translate(1507.5,0)">
<g transform="translate(0,10)" display="none"></g>
</g>
<g fill="#000000" transform="translate(301.5,0)">
<g transform="translate(-20.5,10)" style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>2021</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(904.5,0)">
<g transform="translate(-20.5,10)" style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>2022</tspan>
</text>
</g>
</g>
</g>
</g>
<g stroke="#000000" stroke-opacity="0.15" fill="none" display="none" transform="translate(1206,-486)" opacity="0" visibility="hidden" aria-hidden="true">
<path transform="translate(-0.5,-0.5)" d=" M0,0 L0,486 "></path>
</g>
<g fill="#000000" transform="translate(603,44)">
<g display="none"></g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g role="group" aria-label="Teckenförklaring" transform="translate(0,530)">
<g>
<g focusable="true" tabindex="0" role="switch" aria-controls="id-128" aria-labelledby="id-128" aria-checked="true" style="cursor: pointer;" transform="translate(247,0)">
<g fill="#ffffff" fill-opacity="0">
<rect width="236" height="40"></rect>
</g>
<g transform="translate(0,8)">
<g fill="#50b2fc" style="pointer-events: none;" transform="translate(0,0.5)">
<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
<rect width="23" height="23"></rect>
</g>
<g>
<g fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-opacity="1" stroke-width="0">
<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
</g>
</g>
</g>
<g fill="#000000" aria-label="Internetanvändare 16+ år" style="pointer-events: none;" transform="translate(28,0)">
<g style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>Internetanvändare 16+ år</tspan>
</text>
</g>
</g>
<g fill="#000000" style="pointer-events: none;" display="none">
<g display="none"></g>
</g>
</g>
</g>
<g focusable="true" tabindex="0" role="switch" aria-controls="id-146" aria-labelledby="id-146" aria-checked="true" style="cursor: pointer;" transform="translate(503,0)">
<g fill="#ffffff" fill-opacity="0">
<rect width="180" height="40"></rect>
</g>
<g transform="translate(0,8)">
<g fill="#55c7b4" style="pointer-events: none;" transform="translate(0,0.5)">
<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
<rect width="23" height="23"></rect>
</g>
<g>
<g fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-opacity="1" stroke-width="0">
<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
</g>
</g>
</g>
<g fill="#000000" aria-label="Dagliga användare" style="pointer-events: none;" transform="translate(28,0)">
<g style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>Dagliga användare</tspan>
</text>
</g>
</g>
<g fill="#000000" style="pointer-events: none;" display="none">
<g display="none"></g>
</g>
</g>
</g>
<g focusable="true" tabindex="0" role="switch" aria-controls="id-164" aria-labelledby="id-164" aria-checked="true" style="cursor: pointer;" transform="translate(703,0)">
<g fill="#ffffff" fill-opacity="0">
<rect width="166" height="40"></rect>
</g>
<g transform="translate(0,8)">
<g fill="#ffce2e" style="pointer-events: none;" transform="translate(0,0.5)">
<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
<rect width="23" height="23"></rect>
</g>
<g>
<g fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-opacity="1" stroke-width="0">
<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
</g>
</g>
</g>
<g fill="#000000" aria-label="Sällananvändare" style="pointer-events: none;" transform="translate(28,0)">
<g style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>Sällananvändare</tspan>
</text>
</g>
</g>
<g fill="#000000" style="pointer-events: none;" display="none">
<g display="none"></g>
</g>
</g>
</g>
<g focusable="true" tabindex="0" role="switch" aria-controls="id-182" aria-labelledby="id-182" aria-checked="true" style="cursor: pointer;" transform="translate(889,0)">
<g fill="#ffffff" fill-opacity="0">
<rect width="154" height="40"></rect>
</g>
<g transform="translate(0,8)">
<g fill="#ff4069" style="pointer-events: none;" transform="translate(0,0.5)">
<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
<rect width="23" height="23"></rect>
</g>
<g>
<g fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-opacity="1" stroke-width="0">
<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
</g>
</g>
</g>
<g fill="#000000" aria-label="Icke-användare" style="pointer-events: none;" transform="translate(28,0)">
<g style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>Icke-användare</tspan>
</text>
</g>
</g>
<g fill="#000000" style="pointer-events: none;" display="none">
<g display="none"></g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g>
<g>
<g role="tooltip" opacity="0" aria-describedby="id-128" transform="translate(822.6,44.16)" visibility="hidden" aria-hidden="true">
<g fill="#50b2fc" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url("#filter-id-136")" style="pointer-events: none;" transform="translate(-275,-38.1)">
<path d="M3,0 L266,0 a3,3 0 0 1 3,3 L269,32 a3,3 0 0 1 -3,3 L266,35 L266,35 L275,38.1 L256,35 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
</g>
<g>
<g fill="#000000" style="pointer-events: none;" transform="translate(-140.5,-38.1)">
<g transform="translate(-122.5,7)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>Internetanvändare 16+ år: 94%</tspan>
</text>
</g>
</g>
</g>
</g>
<g role="tooltip" opacity="0" aria-describedby="id-146" transform="translate(943.2,63.6)" visibility="hidden" aria-hidden="true">
<g fill="#55c7b4" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url("#filter-id-154")" style="pointer-events: none;" transform="translate(-219,-17.5)">
<path d="M3,0 L210,0 a3,3 0 0 1 3,3 L213,3 L213,12.5 L219,17.5 L213,22.5 L213,32 a3,3 0 0 1 -3,3 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
</g>
<g>
<g fill="#000000" style="pointer-events: none;" transform="translate(-112.5,-17.5)">
<g transform="translate(-94.5,7)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>Dagliga användare: 90%</tspan>
</text>
</g>
</g>
</g>
</g>
<g role="tooltip" opacity="0" aria-describedby="id-182" transform="translate(1184.4,471.84)" visibility="hidden" aria-hidden="true">
<g fill="#ff4069" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url("#filter-id-190")" style="pointer-events: none;" transform="translate(-184,-47.8)">
<path d="M3,0 L175,0 a3,3 0 0 1 3,3 L178,32 a3,3 0 0 1 -3,3 L175,35 L175,35 L184,47.8 L165,35 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
</g>
<g>
<g fill="#ffffff" style="pointer-events: none;" transform="translate(-95,-47.8)">
<g transform="translate(-77,7)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>Icke-användare: 6%</tspan>
</text>
</g>
</g>
</g>
</g>
<g role="tooltip" opacity="0" aria-describedby="id-164" transform="translate(1063.8,481.56)" visibility="hidden" aria-hidden="true">
<g fill="#ffce2e" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url("#filter-id-172")" style="pointer-events: none;" transform="translate(-195,-17.5)">
<path d="M3,0 L186,0 a3,3 0 0 1 3,3 L189,3 L189,12.5 L195,17.5 L189,22.5 L189,32 a3,3 0 0 1 -3,3 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
</g>
<g>
<g fill="#000000" style="pointer-events: none;" transform="translate(-100.5,-17.5)">
<g transform="translate(-82.5,7)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>Sällananvändare: 4%</tspan>
</text>
</g>
</g>
</g>
</g>
<g role="tooltip" visibility="hidden" opacity="0">
<g fill="#ffffff" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url("#filter-id-50")" style="pointer-events: none;" transform="translate(0,6)">
<path d="M3,0 L3,0 L0,-6 L13,0 L21,0 a3,3 0 0 1 3,3 L24,8 a3,3 0 0 1 -3,3 L3,11 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
</g>
<g>
<g fill="#ffffff" style="pointer-events: none;" transform="translate(12,6)">
<g transform="translate(0,7)" display="none"></g>
</g>
</g>
</g>
<g visibility="hidden" style="pointer-events: none;" display="none">
<g fill="#ffffff" opacity="1">
<rect width="1320" height="600"></rect>
</g>
<g>
<g transform="translate(660,300)">
<g>
<g stroke-opacity="1" fill="#f3f3f3" fill-opacity="0.8">
<g>
<g>
<path d=" M53,0 a53,53,0,0,1,-106,0 a53,53,0,0,1,106,0 M42,0 a42,42,0,0,0,-84,0 a42,42,0,0,0,84,0 L42,0 "></path>
</g>
</g>
</g>
<g stroke-opacity="1" fill="#000000" fill-opacity="0.2">
<g>
<g>
<path d=" M50,0 a50,50,0,0,1,-100,0 a50,50,0,0,1,100,0 M45,0 a45,45,0,0,0,-90,0 a45,45,0,0,0,90,0 L45,0 "></path>
</g>
</g>
</g>
<g fill="#000000" fill-opacity="0.4">
<g transform="translate(-22,-12)" style="user-select: none;">
<text x="22px" y="23.5" dy="-6.345" text-anchor="middle">
<tspan>100%</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</g>
<g role="tooltip" opacity="0" transform="translate(79,200.3)" visibility="hidden" aria-hidden="true">
<g fill="#000000" fill-opacity="1" stroke-width="1" stroke-opacity="1" stroke="#000000" style="pointer-events: none;" transform="translate(-59,-17)">
<path d="M0,0 L54,0 a0,0 0 0 1 0,0 L54,0 L54,12 L59,17 L54,22 L54,34 a0,0 0 0 1 -0,0 L0,34 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0"></path>
</g>
<g>
<g fill="#ffffff" style="pointer-events: none;" transform="translate(-32,-17)">
<g transform="translate(-17,5)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>62%</tspan>
</text>
</g>
</g>
</g>
</g>
<g role="tooltip" opacity="0" transform="translate(1003.5,501)" visibility="hidden" aria-hidden="true">
<g fill="#000000" fill-opacity="1" stroke-width="1" stroke-opacity="1" stroke="#000000" style="pointer-events: none;" transform="translate(-30.5,5)">
<path d="M0,0 L25.5,0 L30.5,-5 L35.5,0 L61,0 a0,0 0 0 1 0,0 L61,34 a0,0 0 0 1 -0,0 L0,34 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0"></path>
</g>
<g>
<g fill="#ffffff" style="pointer-events: none;" transform="translate(0,5)">
<g transform="translate(-20.5,5)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>2022</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
<div class="grid-18 grid-md-9 u-m-b-0 u-p-r-0 u-m-r-0">
<span class="a-meta u-m-b-1">Diagram 1.1a</span>
<p class="u-font-size-medium-plus u-m-b-1"><strong>Bas:</strong> Samtliga 16+ år <strong>Fråga:</strong> Hur ofta använder du internet? Med internetanvändning avser vi all användning oavsett om det är på dator, surfplatta, smartmobil (smartphone), spelkonsol etc., År 2021–2022 (Studie 1)</p>
</div>
</div>
<script>
if (!('graphs' in window)) {
window.graphs = {};
}
window.graphs['2185'] = {
"id": 2185,
"name": "Hur ofta anv\u00e4nder du internet? Samtliga 16+ \u00e5r",
"number": "1.1a",
"publication_id": 19,
"publication": {
"id": 19,
"name": "SOI2022",
"slug": "soi2022",
"color": "#c27fec",
"textColor": "#fff"
},
"created": "2022-03-04T09:31:11.000000Z",
"updated": "2022-07-04T08:20:54.000000Z",
"data": [{
"key": "creditstitle",
"value": "www.svenskarnaochinternet.se CC0"
}, {
"key": "graph_base",
"value": "Samtliga 16+ \u00e5r"
}, {
"key": "maxvalue",
"value": 100
}, {
"key": "subtitle",
"value": "<p>Fr\u00e5ga: Hur ofta anv\u00e4nder du internet? Med internetanv\u00e4ndning avser vi all anv\u00e4ndning oavsett om det \u00e4r p\u00e5 dator, surfplatta, smartmobil (smartphone), spelkonsol etc., \u00c5r 2021\u20132022 (Studie 1)<\/p>"
}, {
"key": "title",
"value": ""
}, {
"key": "type",
"value": "column"
}, {
"key": "xlsdata",
"value": "\tInternetanv\u00e4ndare 16+ \u00e5r\tDagliga anv\u00e4ndare\tS\u00e4llananv\u00e4ndare\tIcke-anv\u00e4ndare\n2021 \t94%\t90%\t4%\t6%\n2022 \t94%\t90%\t4%\t6%\n"
}],
"colors": {
"color0": "50b2fc",
"color1": "ff4069",
"color2": "55c7b4",
"color3": "ffce2e",
"color4": "c27fec",
"color5": "f99963",
"color6": "ff9fb4",
"color7": "1f2a36",
"color8": "8e9297",
"color9": "a7d8fd"
},
"legends": [
["Dagligen", "f99963"],
["N\u00e5gon g\u00e5ng", "c27fec"],
["Befolkningen", "ffce2e"],
["Internetanv\u00e4ndarna", "50b2fc"],
["Smartmobilanv\u00e4ndarna", "50b2fc"],
["Inte meningsfullt (1+2)", "f99963"],
["Meningsfullt (4+5)", "55c7b4"],
["Totalt", "8e9297"],
["Minst n\u00e5gon g\u00e5ng", "ff4069"],
["Minst varje vecka", "50b2fc"],
["Minst varje dag", "ffce2e"],
["2020 Q1", "ffce2e"],
["2020 Q3", "c27fec"],
["Studerar", "55c7b4"],
["Arbetar", "ffce2e"],
["Pension\u00e4r", "ff4069"],
["Internetanv\u00e4ndare", "50b2fc"],
["Dagliga anv\u00e4ndare", "55c7b4"],
["S\u00e4llananv\u00e4ndare", "ffce2e"],
["Icke-anv\u00e4ndare", "ff4069"],
["Man", "ffce2e"],
["Kvinna", "c27fec"],
["2021", "50b2fc"],
["2022", "0477ce"]
],
"combined": []
};
</script>
</div>
</div>
</div>
</div>
<button type="button" class="a-button a-button--transparent m-modal__graph-button" data-modal-open="modal-container" data-zoom="Klicka på grafen för att zooma">
<span class="a-button__text u-visuallyhidden">Open graph modal</span>
<img src="/assets/images/graph.png" alt="Graf" class="u-border-radius u-b u-b-solid u-b-3 u-b-ash" style="max-width:100%;width:612px;">
</button>
<div id="modal-container" class="m-modal m-modal--has-overlay" aria-hidden="true">
<div class="m-modal__container m-modal__container--dynamic-width js-modal-graph">
<button type="button" class="m-modal__overlay-button js-modal-graph-button">
<span>Scrolla för att se hela grafen</span>
</button>
<button type="button" class="a-button a-button--ocean-light m-modal__button-fixed js-toggle-modal" aria-expanded="false" data-a11y-toggle="modal-container" aria-controls="modal-container" data-modal-close>
<span class="a-button__text">Stäng</span>
</button>
<div id="graph-2185" class="background-snow wp-block-graph ">
<div class="wrapper">
<div data-iis-graph-parent="" class="iis-graph alignwide u-p-b-4" style="position: relative; z-index:2;">
<div class="row align-items-start justify-content-between article__content article__content--full-width">
<div class="grid-18 grid-md-auto">
<div class="display-flex align-items-center justify-content-md-end">
<span class="a-button a-button--transparent a-button--icon m-share__button u-p-r-1" style="overflow: visible">
<span class="a-button__text">Hjälp</span>
<span tabindex="0" class="a-tooltip" id="tooltip-2185" role="tooltip">
<span class="a-tooltip__text" data-tooltip="">Grafen är interaktiv vilket gör att du kan markera ytor med musen för att zooma (gäller enbart desktop) samt själv välja vilka delar du vill ska synas genom att klicka på diagramförklaringarna.</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-questionmark"></use>
</svg>
</span>
</span>
<div class="m-context-menu js-context-menu">
<button type="button" class="a-button a-button--transparent a-button--icon js-context-menu-btn" data-a11y-toggle="graph-export-218570df" id="a11y-toggle-0" aria-controls="graph-export-218570df" aria-expanded="false">
<span class="a-button__text">Exportera</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-download"></use>
</svg>
</button>
<ul class="m-context-menu__list u-list-clean u-z-index-middleground-important" id="graph-export-218570df" data-container="true" data-focus-trap="true" aria-hidden="true" aria-labelledby="a11y-toggle-0">
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="pdf" href="#">PDF</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="png" href="#">PNG</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="jpg" href="#">JPG</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="svg" href="#">SVG</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="csv" href="#">CSV</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="xlsx" href="#">XLSX</a></li>
<li class="m-context-menu__item"><a data-export-graph="2185" data-export-type="json" href="#">JSON</a></li>
</ul>
</div>
<a href="#" data-export-type="print" data-export-graph="2185" class="a-button a-button--transparent a-button--icon m-share__button">
<span class="a-button__text">Skriv ut</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-print"></use>
</svg>
</a>
</div>
</div>
</div>
<div>
<div data-iis-graph-idle-icon="2185" id="idle-icon" style="position: absolute;top: 50%;margin-top: -40px;margin-left: -40px;width: 80px;display: none;z-index: 99;pointer-events: none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="100%" height="100%">
<g>
<path class="arrow" d="M11.854 5.146a.5.5 0 01-.708.708l-2-2a.5.5 0 010-.708l2-2a.5.5 0 01.708.708L10.707 3H20.5a.5.5 0 110 1h-9.796l1.15 1.146z"></path>
</g>
<g>
<path class="hand" d="M22.093 13.708l-1.47-2.024a1.495 1.495 0 00-2.45.033l1.418 1.95a.507.507 0 01-.109.702.507.507 0 01-.7-.114l-1.763-2.425a1.495 1.495 0 00-2.448.032l2.005 2.76a.507.507 0 01-.109.701.507.507 0 01-.7-.113l-1.762-2.426a1.495 1.495 0 00-2.449.033l2.593 3.568a.507.507 0 01-.109.701.507.507 0 01-.7-.113l-4.701-6.47a1.495 1.495 0 00-2.095-.331 1.502 1.502 0 00-.332 2.094l5.43 7.475-2.41-1.073a1.495 1.495 0 00-1.979.76 1.502 1.502 0 00.759 1.98l2.65 1.18c.95.53 1.805 1.505 3.651 2.68 2.032 1.292 3.935 1.863 4.17 2.187a.51.51 0 00-.11.698c.162.224.478.271.706.105l7.266-5.278a.51.51 0 00.118-.704.504.504 0 00-.699-.11c-.864-1.191-1.314-5.213-3.671-8.458z"></path>
</g>
<style>.arrow { animation: arrow 3s infinite; animation-delay: 3s; opacity: 0; } .hand { animation: hand 3s ease infinite; transform: translateX(0.2rem); } @keyframes hand { 0% { opacity: 1; } 50% { transform: translateX(-0.2rem); opacity: 1; } 100% { transform: translateX(0.2rem); opacity: 1; } } @keyframes arrow { 0% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } }</style>
</svg>
</div>
<div data-iis-graph="2185" data-iis-graph-export="[data-iis-graph-parent]" style="height: 600px; width: 100%; min-width: 1360px;" data-ll-status="entered" class="entered" data-iis-graph-rendered="true" data-iis-graph-mounted="true">
<div style="width: 100%; height: 100%; position: relative; left: -0.5px; top: -0.460938px;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="group" style="width: 100%; height: 100%; overflow: visible;">
<defs>
<clipPath id="id-45">
<rect width="1320" height="600"></rect>
</clipPath>
<filter id="filter-id-72" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%"></filter>
<filter id="filter-id-93" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%"></filter>
<clipPath id="id-115">
<rect width="1206" height="486"></rect>
</clipPath>
<clipPath id="id-131">
<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
</clipPath>
<clipPath id="id-149">
<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
</clipPath>
<clipPath id="id-167">
<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
</clipPath>
<clipPath id="id-185">
<path d="M0,0 L1206,0 L1206,486 L0,486 L0,0"></path>
</clipPath>
<filter id="filter-id-50" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetBlur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="filter-id-190" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetBlur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="filter-id-172" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetBlur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="filter-id-154" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetBlur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="filter-id-136" filterUnits="objectBoundingBox" width="200%" height="200%" x="-50%" y="-50%">
<feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
<feOffset result="offsetBlur" dx="1" dy="1"></feOffset>
<feFlood flood-color="#000000" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetBlur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<clipPath id="id-432">
<rect width="1206" height="486"></rect>
</clipPath>
</defs>
<g>
<g fill="#ffffff" fill-opacity="0">
<rect width="1320" height="600"></rect>
</g>
<g>
<g role="region" clip-path="url("#id-45")" opacity="1" aria-label="Diagram">
<g transform="translate(15,15)">
<g fill="#000000" id="id-66" font-size="16" font-weight="regular" display="none">
<g transform="translate(20,0)" style="user-select: none;">
<foreignObject width="1281" height="81">
<div style="text-align: center; overflow-wrap: break-word; color: rgb(0, 0, 0); display: block;">
<p>Fråga: Hur ofta använder du internet? Med internetanvändning avser vi all användning oavsett om det är på dator, surfplatta, smartmobil (smartphone), spelkonsol etc., År 2021–2022 (Studie 1)</p>
</div>
</foreignObject>
</g>
</g>
<g>
<g>
<g>
<g>
<g>
<g>
<g style="touch-action: none; user-select: none; -webkit-user-drag: none;" transform="translate(84,0)">
<g fill="#ffffff" fill-opacity="0">
<rect width="1206" height="486"></rect>
</g>
<g>
<g>
<g></g>
</g>
<g>
<g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,-49)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,0)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,49)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,97)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,146)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,194)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,243)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,292)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,340)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,389)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,437)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" transform="translate(0,486)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,535)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g stroke="#8e9297" stroke-opacity="1" fill="none" display="none" transform="translate(0,583)">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
</g>
</g>
<g>
<g>
<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#ff4069" aria-label="Icke-användare" stroke-width="0" id="id-182">
<g>
<g clip-path="url("#id-185")">
<g>
<g>
<g>
<g stroke-opacity="1" fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(434.16,456.84)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,29.16 a0,0 0 0 1 -0,0 L0,29.16 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
<g stroke-opacity="1" fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(1037.16,456.84)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,29.16 a0,0 0 0 1 -0,0 L0,29.16 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g></g>
</g>
</g>
<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#ffce2e" aria-label="Sällananvändare" stroke-width="0" id="id-164">
<g>
<g clip-path="url("#id-167")">
<g>
<g>
<g>
<g stroke-opacity="1" fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(313.56,466.56)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,19.44 a0,0 0 0 1 -0,0 L0,19.44 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
<g stroke-opacity="1" fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(916.56,466.56)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,19.44 a0,0 0 0 1 -0,0 L0,19.44 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g></g>
</g>
</g>
<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#55c7b4" aria-label="Dagliga användare" stroke-width="0" id="id-146">
<g>
<g clip-path="url("#id-149")">
<g>
<g>
<g>
<g stroke-opacity="1" fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(192.96,48.6)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,437.4 a0,0 0 0 1 -0,0 L0,437.4 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
<g stroke-opacity="1" fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(795.96,48.6)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,437.4 a0,0 0 0 1 -0,0 L0,437.4 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g></g>
</g>
</g>
<g role="group" stroke-opacity="0" fill-opacity="1" stroke="#50b2fc" aria-label="Internetanvändare 16+ år" stroke-width="0" id="id-128">
<g>
<g clip-path="url("#id-131")">
<g>
<g>
<g>
<g stroke-opacity="1" fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(72.36,29.16)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,456.84 a0,0 0 0 1 -0,0 L0,456.84 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
<g stroke-opacity="1" fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-width="0" role="menuitem" focusable="true" tabindex="0" transform="translate(675.36,29.16)">
<g>
<g>
<path d="M0,0 L96.48,0 a0,0 0 0 1 0,0 L96.48,456.84 a0,0 0 0 1 -0,0 L0,456.84 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0 Z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g></g>
</g>
</g>
</g>
</g>
<g clip-path="url("#id-432")">
<g>
<g fill="#50b2fc" stroke="#50b2fc">
<g></g>
</g>
<g fill="#55c7b4" stroke="#55c7b4">
<g></g>
</g>
<g fill="#ffce2e" stroke="#ffce2e">
<g></g>
</g>
<g fill="#ff4069" stroke="#ff4069">
<g></g>
</g>
</g>
</g>
<g>
<g>
<g>
<g></g>
</g>
<g>
<g></g>
</g>
</g>
</g>
<g>
<g></g>
</g>
<g>
<g></g>
</g>
<g opacity="0" clip-path="url("#id-115")" style="touch-action: none; user-select: none; -webkit-user-drag: none;" visibility="hidden" aria-hidden="true">
<g>
<g fill-opacity="0.2" fill="#000000" visibility="hidden" style="pointer-events: none;">
<path></path>
</g>
<g stroke="#000000" fill="none" stroke-dasharray="3,3" stroke-opacity="0.4" style="pointer-events: none;" transform="translate(1206,0)">
<path d=" M0,0 L0,486 "></path>
</g>
<g stroke="#000000" fill="none" stroke-dasharray="3,3" stroke-opacity="0.4" style="pointer-events: none;" transform="translate(0,178.4)">
<path d=" M0,0 L1206,0 "></path>
</g>
</g>
</g>
<g role="button" focusable="true" tabindex="0" opacity="0" visibility="hidden" aria-hidden="true" transform="translate(1166,-3)" aria-labelledby="id-36-title">
<g fill="#6794dc" stroke="#ffffff" fill-opacity="1" stroke-opacity="0" transform="translate(0,8)">
<path d="M17,0 L18,0 a17,17 0 0 1 17,17 L35,17 a17,17 0 0 1 -17,17 L17,34 a17,17 0 0 1 -17,-17 L0,17 a17,17 0 0 1 17,-17 Z"></path>
</g>
<g transform="translate(9,9)">
<g stroke="#ffffff" style="pointer-events: none;" transform="translate(0,8)">
<path d=" M0,0 L11,0 " transform="translate(2.5,7.5)"></path>
</g>
<g fill="#000000" style="pointer-events: none;" transform="translate(17,8)">
<g display="none"></g>
</g>
</g>
<title id="id-36-title">Zooma ut</title>
</g>
</g>
</g>
<g>
<g>
<g aria-hidden="true">
<g>
<g fill="#000000" transform="translate(0,263) rotate(-90)">
<g display="none"></g>
</g>
<g stroke="#000000" stroke-opacity="0.15" fill="none" transform="translate(84,486)" opacity="1">
<path transform="translate(-0.5,-0.5)" d=" M0,0 L1206,0 "></path>
</g>
<g>
<g>
<g fill="#000000" aria-label="L" fill-opacity="0" opacity="0" stroke-opacity="0" style="pointer-events: none;" transform="translate(64,243)">
<g transform="translate(-54,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>100%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,-48.6)" display="none">
<g transform="translate(-54,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>110%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,0)">
<g transform="translate(-54,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>100%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,48.6)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>90%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,97.2)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>80%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,145.8)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>70%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,194.4)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>60%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,243)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>50%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,291.6)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>40%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,340.2)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>30%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,388.8)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>20%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,437.4)">
<g transform="translate(-44,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>10%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,486)">
<g transform="translate(-34,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>0%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,534.6)" display="none">
<g transform="translate(-49,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>-10%</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(64,583.2)" display="none">
<g transform="translate(-49,-12)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>-20%</tspan>
</text>
</g>
</g>
</g>
</g>
<g stroke="#000000" stroke-opacity="0" fill="none" style="pointer-events: none;" transform="translate(64,0)">
<path d=" M0,0 L0,486 " transform="translate(-0.5,-0.5)"></path>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(1290,0)">
<g></g>
</g>
</g>
</g>
<g>
<g transform="translate(84,0)"></g>
</g>
<g transform="translate(0,486)">
<g transform="translate(84,0)">
<g aria-hidden="true">
<g>
<g stroke="#000000" stroke-opacity="0" fill="none" style="pointer-events: none;">
<path d=" M0,0 L1206,0 " transform="translate(-0.5,-0.5)"></path>
</g>
<g>
<g>
<g fill="#000000" aria-label="L" fill-opacity="0" opacity="0" stroke-opacity="0" style="pointer-events: none;" transform="translate(603,0)">
<g transform="translate(-4.5,10)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>L</tspan>
</text>
</g>
</g>
<g fill="#000000" display="none" transform="translate(1507.5,0)">
<g transform="translate(0,10)" display="none"></g>
</g>
<g fill="#000000" transform="translate(301.5,0)">
<g transform="translate(-20.5,10)" style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>2021</tspan>
</text>
</g>
</g>
<g fill="#000000" transform="translate(904.5,0)">
<g transform="translate(-20.5,10)" style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>2022</tspan>
</text>
</g>
</g>
</g>
</g>
<g stroke="#000000" stroke-opacity="0.15" fill="none" display="none" transform="translate(1206,-486)" opacity="0" visibility="hidden" aria-hidden="true">
<path transform="translate(-0.5,-0.5)" d=" M0,0 L0,486 "></path>
</g>
<g fill="#000000" transform="translate(603,44)">
<g display="none"></g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g role="group" aria-label="Teckenförklaring" transform="translate(0,530)">
<g>
<g focusable="true" tabindex="0" role="switch" aria-controls="id-128" aria-labelledby="id-128" aria-checked="true" style="cursor: pointer;" transform="translate(247,0)">
<g fill="#ffffff" fill-opacity="0">
<rect width="236" height="40"></rect>
</g>
<g transform="translate(0,8)">
<g fill="#50b2fc" style="pointer-events: none;" transform="translate(0,0.5)">
<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
<rect width="23" height="23"></rect>
</g>
<g>
<g fill="#50b2fc" fill-opacity="1" stroke="#50b2fc" stroke-opacity="1" stroke-width="0">
<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
</g>
</g>
</g>
<g fill="#000000" aria-label="Internetanvändare 16+ år" style="pointer-events: none;" transform="translate(28,0)">
<g style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>Internetanvändare 16+ år</tspan>
</text>
</g>
</g>
<g fill="#000000" style="pointer-events: none;" display="none">
<g display="none"></g>
</g>
</g>
</g>
<g focusable="true" tabindex="0" role="switch" aria-controls="id-146" aria-labelledby="id-146" aria-checked="true" style="cursor: pointer;" transform="translate(503,0)">
<g fill="#ffffff" fill-opacity="0">
<rect width="180" height="40"></rect>
</g>
<g transform="translate(0,8)">
<g fill="#55c7b4" style="pointer-events: none;" transform="translate(0,0.5)">
<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
<rect width="23" height="23"></rect>
</g>
<g>
<g fill="#55c7b4" fill-opacity="1" stroke="#55c7b4" stroke-opacity="1" stroke-width="0">
<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
</g>
</g>
</g>
<g fill="#000000" aria-label="Dagliga användare" style="pointer-events: none;" transform="translate(28,0)">
<g style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>Dagliga användare</tspan>
</text>
</g>
</g>
<g fill="#000000" style="pointer-events: none;" display="none">
<g display="none"></g>
</g>
</g>
</g>
<g focusable="true" tabindex="0" role="switch" aria-controls="id-164" aria-labelledby="id-164" aria-checked="true" style="cursor: pointer;" transform="translate(703,0)">
<g fill="#ffffff" fill-opacity="0">
<rect width="166" height="40"></rect>
</g>
<g transform="translate(0,8)">
<g fill="#ffce2e" style="pointer-events: none;" transform="translate(0,0.5)">
<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
<rect width="23" height="23"></rect>
</g>
<g>
<g fill="#ffce2e" fill-opacity="1" stroke="#ffce2e" stroke-opacity="1" stroke-width="0">
<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
</g>
</g>
</g>
<g fill="#000000" aria-label="Sällananvändare" style="pointer-events: none;" transform="translate(28,0)">
<g style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>Sällananvändare</tspan>
</text>
</g>
</g>
<g fill="#000000" style="pointer-events: none;" display="none">
<g display="none"></g>
</g>
</g>
</g>
<g focusable="true" tabindex="0" role="switch" aria-controls="id-182" aria-labelledby="id-182" aria-checked="true" style="cursor: pointer;" transform="translate(889,0)">
<g fill="#ffffff" fill-opacity="0">
<rect width="154" height="40"></rect>
</g>
<g transform="translate(0,8)">
<g fill="#ff4069" style="pointer-events: none;" transform="translate(0,0.5)">
<g fill="#ffffff" fill-opacity="0" stroke-opacity="0">
<rect width="23" height="23"></rect>
</g>
<g>
<g fill="#ff4069" fill-opacity="1" stroke="#ff4069" stroke-opacity="1" stroke-width="0">
<path d="M3,0 L20,0 a3,3 0 0 1 3,3 L23,20 a3,3 0 0 1 -3,3 L3,23 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3 Z"></path>
</g>
</g>
</g>
<g fill="#000000" aria-label="Icke-användare" style="pointer-events: none;" transform="translate(28,0)">
<g style="user-select: none;">
<text x="0" y="23.5" overflow="hidden" dy="-6.345">
<tspan>Icke-användare</tspan>
</text>
</g>
</g>
<g fill="#000000" style="pointer-events: none;" display="none">
<g display="none"></g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g>
<g>
<g role="tooltip" opacity="0" aria-describedby="id-128" transform="translate(822.6,44.16)" visibility="hidden" aria-hidden="true">
<g fill="#50b2fc" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url("#filter-id-136")" style="pointer-events: none;" transform="translate(-275,-38.1)">
<path d="M3,0 L266,0 a3,3 0 0 1 3,3 L269,32 a3,3 0 0 1 -3,3 L266,35 L266,35 L275,38.1 L256,35 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
</g>
<g>
<g fill="#000000" style="pointer-events: none;" transform="translate(-140.5,-38.1)">
<g transform="translate(-122.5,7)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>Internetanvändare 16+ år: 94%</tspan>
</text>
</g>
</g>
</g>
</g>
<g role="tooltip" opacity="0" aria-describedby="id-146" transform="translate(943.2,63.6)" visibility="hidden" aria-hidden="true">
<g fill="#55c7b4" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url("#filter-id-154")" style="pointer-events: none;" transform="translate(-219,-17.5)">
<path d="M3,0 L210,0 a3,3 0 0 1 3,3 L213,3 L213,12.5 L219,17.5 L213,22.5 L213,32 a3,3 0 0 1 -3,3 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
</g>
<g>
<g fill="#000000" style="pointer-events: none;" transform="translate(-112.5,-17.5)">
<g transform="translate(-94.5,7)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>Dagliga användare: 90%</tspan>
</text>
</g>
</g>
</g>
</g>
<g role="tooltip" opacity="0" aria-describedby="id-182" transform="translate(1184.4,471.84)" visibility="hidden" aria-hidden="true">
<g fill="#ff4069" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url("#filter-id-190")" style="pointer-events: none;" transform="translate(-184,-47.8)">
<path d="M3,0 L175,0 a3,3 0 0 1 3,3 L178,32 a3,3 0 0 1 -3,3 L175,35 L175,35 L184,47.8 L165,35 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
</g>
<g>
<g fill="#ffffff" style="pointer-events: none;" transform="translate(-95,-47.8)">
<g transform="translate(-77,7)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>Icke-användare: 6%</tspan>
</text>
</g>
</g>
</g>
</g>
<g role="tooltip" opacity="0" aria-describedby="id-164" transform="translate(1063.8,481.56)" visibility="hidden" aria-hidden="true">
<g fill="#ffce2e" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url("#filter-id-172")" style="pointer-events: none;" transform="translate(-195,-17.5)">
<path d="M3,0 L186,0 a3,3 0 0 1 3,3 L189,3 L189,12.5 L195,17.5 L189,22.5 L189,32 a3,3 0 0 1 -3,3 L3,35 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
</g>
<g>
<g fill="#000000" style="pointer-events: none;" transform="translate(-100.5,-17.5)">
<g transform="translate(-82.5,7)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>Sällananvändare: 4%</tspan>
</text>
</g>
</g>
</g>
</g>
<g role="tooltip" visibility="hidden" opacity="0">
<g fill="#ffffff" fill-opacity="0.9" stroke-width="1" stroke-opacity="1" stroke="#ffffff" filter="url("#filter-id-50")" style="pointer-events: none;" transform="translate(0,6)">
<path d="M3,0 L3,0 L0,-6 L13,0 L21,0 a3,3 0 0 1 3,3 L24,8 a3,3 0 0 1 -3,3 L3,11 a3,3 0 0 1 -3,-3 L0,3 a3,3 0 0 1 3,-3"></path>
</g>
<g>
<g fill="#ffffff" style="pointer-events: none;" transform="translate(12,6)">
<g transform="translate(0,7)" display="none"></g>
</g>
</g>
</g>
<g visibility="hidden" style="pointer-events: none;" display="none">
<g fill="#ffffff" opacity="1">
<rect width="1320" height="600"></rect>
</g>
<g>
<g transform="translate(660,300)">
<g>
<g stroke-opacity="1" fill="#f3f3f3" fill-opacity="0.8">
<g>
<g>
<path d=" M53,0 a53,53,0,0,1,-106,0 a53,53,0,0,1,106,0 M42,0 a42,42,0,0,0,-84,0 a42,42,0,0,0,84,0 L42,0 "></path>
</g>
</g>
</g>
<g stroke-opacity="1" fill="#000000" fill-opacity="0.2">
<g>
<g>
<path d=" M50,0 a50,50,0,0,1,-100,0 a50,50,0,0,1,100,0 M45,0 a45,45,0,0,0,-90,0 a45,45,0,0,0,90,0 L45,0 "></path>
</g>
</g>
</g>
<g fill="#000000" fill-opacity="0.4">
<g transform="translate(-22,-12)" style="user-select: none;">
<text x="22px" y="23.5" dy="-6.345" text-anchor="middle">
<tspan>100%</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</g>
<g role="tooltip" opacity="0" transform="translate(79,200.3)" visibility="hidden" aria-hidden="true">
<g fill="#000000" fill-opacity="1" stroke-width="1" stroke-opacity="1" stroke="#000000" style="pointer-events: none;" transform="translate(-59,-17)">
<path d="M0,0 L54,0 a0,0 0 0 1 0,0 L54,0 L54,12 L59,17 L54,22 L54,34 a0,0 0 0 1 -0,0 L0,34 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0"></path>
</g>
<g>
<g fill="#ffffff" style="pointer-events: none;" transform="translate(-32,-17)">
<g transform="translate(-17,5)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>62%</tspan>
</text>
</g>
</g>
</g>
</g>
<g role="tooltip" opacity="0" transform="translate(1003.5,501)" visibility="hidden" aria-hidden="true">
<g fill="#000000" fill-opacity="1" stroke-width="1" stroke-opacity="1" stroke="#000000" style="pointer-events: none;" transform="translate(-30.5,5)">
<path d="M0,0 L25.5,0 L30.5,-5 L35.5,0 L61,0 a0,0 0 0 1 0,0 L61,34 a0,0 0 0 1 -0,0 L0,34 a0,0 0 0 1 -0,-0 L0,0 a0,0 0 0 1 0,-0"></path>
</g>
<g>
<g fill="#ffffff" style="pointer-events: none;" transform="translate(0,5)">
<g transform="translate(-20.5,5)" style="user-select: none;">
<text x="0" y="23.5" dy="-6.345">
<tspan>2022</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
<div class="grid-18 grid-md-9 u-m-b-0 u-p-r-0 u-m-r-0">
<span class="a-meta u-m-b-1">Diagram 1.1a</span>
<p class="u-font-size-medium-plus u-m-b-1"><strong>Bas:</strong> Samtliga 16+ år <strong>Fråga:</strong> Hur ofta använder du internet? Med internetanvändning avser vi all användning oavsett om det är på dator, surfplatta, smartmobil (smartphone), spelkonsol etc., År 2021–2022 (Studie 1)</p>
</div>
</div>
<script>if (!('graphs' in window)) {window.graphs = {};}window.graphs['2185'] = {"id":2185,"name":"Hur ofta anv\u00e4nder du internet? Samtliga 16+ \u00e5r","number":"1.1a","publication_id":19,"publication":{"id":19,"name":"SOI2022","slug":"soi2022","color":"#c27fec","textColor":"#fff"},"created":"2022-03-04T09:31:11.000000Z","updated":"2022-07-04T08:20:54.000000Z","data":[{"key":"creditstitle","value":"www.svenskarnaochinternet.se CC0"},{"key":"graph_base","value":"Samtliga 16+ \u00e5r"},{"key":"maxvalue","value":100},{"key":"subtitle","value":"<p>Fr\u00e5ga: Hur ofta anv\u00e4nder du internet? Med internetanv\u00e4ndning avser vi all anv\u00e4ndning oavsett om det \u00e4r p\u00e5 dator, surfplatta, smartmobil (smartphone), spelkonsol etc., \u00c5r 2021\u20132022 (Studie 1)<\/p>"},{"key":"title","value":""},{"key":"type","value":"column"},{"key":"xlsdata","value":"\tInternetanv\u00e4ndare 16+ \u00e5r\tDagliga anv\u00e4ndare\tS\u00e4llananv\u00e4ndare\tIcke-anv\u00e4ndare\n2021 \t94%\t90%\t4%\t6%\n2022 \t94%\t90%\t4%\t6%\n"}],"colors":{"color0":"50b2fc","color1":"ff4069","color2":"55c7b4","color3":"ffce2e","color4":"c27fec","color5":"f99963","color6":"ff9fb4","color7":"1f2a36","color8":"8e9297","color9":"a7d8fd"},"legends":[["Dagligen","f99963"],["N\u00e5gon g\u00e5ng","c27fec"],["Befolkningen","ffce2e"],["Internetanv\u00e4ndarna","50b2fc"],["Smartmobilanv\u00e4ndarna","50b2fc"],["Inte meningsfullt (1+2)","f99963"],["Meningsfullt (4+5)","55c7b4"],["Totalt","8e9297"],["Minst n\u00e5gon g\u00e5ng","ff4069"],["Minst varje vecka","50b2fc"],["Minst varje dag","ffce2e"],["2020 Q1","ffce2e"],["2020 Q3","c27fec"],["Studerar","55c7b4"],["Arbetar","ffce2e"],["Pension\u00e4r","ff4069"],["Internetanv\u00e4ndare","50b2fc"],["Dagliga anv\u00e4ndare","55c7b4"],["S\u00e4llananv\u00e4ndare","ffce2e"],["Icke-anv\u00e4ndare","ff4069"],["Man","ffce2e"],["Kvinna","c27fec"],["2021","50b2fc"],["2022","0477ce"]],"combined":[]};</script>
</div>
</div>
</div>
</div>
{
"title": "Du har sparat FooCoding Graduation!",
"text": "En påminnelse kommer skickas till din adress <a href=\"https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/\" class=\"u-link\">15 minuter</a> innan streamen startar.",
"button_text": "Stäng",
"aria_controls": "",
"is_hidden": false,
"button_primary_color": "#e0bff5",
"button_primary_hover_color": "#c27fec",
"button_primary_border_color": "#c27fec",
"button_primary_text_color": "#1f2a36",
"button_secondary_color": "#ff9fb4",
"button_secondary_hover_color": "#ff4069",
"button_secondary_border_color": "#ff4069",
"button_secondary_text_color": "#1f2a36"
}
@include molecule(modal) {
display: flex;
position: fixed;
z-index: z_index(foreground);
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
&[aria-hidden='true'] {
display: none;
}
// Adjust close button position
@include m(has-overlay) {
&::after {
content: '';
position: absolute;
z-index: z_index(foregroundMinus);
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
}
@include e(container) {
display: flex;
position: relative;
z-index: z_index(foreground);
flex-direction: column;
width: 100%;
max-height: calc(100vh - #{rhythm(2)});
margin: rhythm(1);
padding: rhythm(4) rhythm(2) rhythm(4) rhythm(2);
overflow-y: auto;
border-radius: $border-radius;
background: var(--snow-color);
> button {
position: absolute;
z-index: z_index(background);
top: rhythm(1);
right: rhythm(1);
}
@include bp-up(sm) {
padding: rhythm(4) rhythm(4) rhythm(6) rhythm(4);
width: auto;
min-width: rem(576px);
}
@include bp-up(md) {
padding: rhythm(8) rhythm(8) rhythm(6) rhythm(8);
}
@include bp-up(lg) {
max-width: rem(961px);
}
@include m(no-max-width) {
max-width: none;
}
@include m(dynamic-width) {
width: 100%;
max-width: calc(100vw);
min-width: 0;
max-height: calc(100% - #{rhythm(2)});
padding: 0;
overflow: auto;
svg {
pointer-events: none;
}
}
}
@include bp-up(md) {
@include e(input-wrapper) {
display: flex;
justify-content: space-between;
margin-bottom: rhythm(2);
}
}
@include e(content) {
position: relative;
margin-right: rhythm(2);
@include bp-up(sm) {
margin-right: 0;
}
@include m(form-name) {
flex: 0 0 45%;
}
@include m(form-lname) {
flex: 0 0 45%;
}
@include e(input-wrapper) {
display: flex;
justify-content: space-between;
margin-bottom: rhythm(2);
}
@include bp-up(md) {
@include m(form-email) {
margin-bottom: rhythm(2);
}
@include m(form-username) {
margin-bottom: rhythm(2);
}
}
@include m(form-check) {
display: flex;
}
@include m(form-text) {
display: flex;
justify-content: center;
margin-top: rhythm(2);
}
}
@include e(buttons) {
display: flex;
flex-shrink: 0;
justify-content: flex-end;
}
@include e(button-primary) {
color: var(--m-modal-button-primary-color) !important;
box-shadow: 0 0 0 1px inset var(--m-modal-button-primary-border-color) !important;
> [class*='text'] {
color: var(--m-modal-button-primary-text-color) !important;
}
&:hover,
&:focus {
color: var(--m-modal-button-primary-hover-color) !important;
}
}
@include e(button-secondary) {
color: var(--m-modal-button-secondary-color) !important;
box-shadow: 0 0 0 1px inset var(--m-modal-button-secondary-border-color) !important;
> [class*='text'] {
color: var(--m-modal-button-secondary-text-color) !important;
}
&:hover,
&:focus {
color: var(--m-modal-button-secondary-hover-color) !important;
}
}
@include e(graph-button) {
padding: 0;
position: relative;
&:hover,
&:focus {
@extend %input-focus;
}
&::after {
content: attr(data-zoom);
color: $color-snow;
padding: rhythm(1) rhythm(2) rhythm(1) rhythm(4);
display: block;
position: absolute;
top: 0;
left: 0;
border-top-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
width: auto;
line-height: 1;
height: $icon-size-large * 1.4;
background-color: rgba($color-cyberspace, 0.7);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-search' viewbox='0 0 32 32' width='32' height='32' fill='%23ffffff'%3E%3Cpath d='M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z'/%3E%3C/svg%3E");
background-position: rhythm(1) center;
background-size: $icon-size-medium $icon-size-medium;
background-repeat: no-repeat;
}
}
@include e(button-fixed) {
position: fixed !important;
top: rhythm(2) !important;
right: rhythm(3) !important;
z-index: z_index(foreground) !important;
}
@include e(overlay-button) {
position: fixed !important;
color: $color-snow;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
padding: 0;
z-index: z_index(foregroundMinus) !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
background: rgba(0, 0, 0, 0.5);
text-shadow: 0 0 rhythm(0.5) $color-cyberspace;
font-family: $font-family-headings;
border: 0;
width: 100vw;
&.is-hidden {
display: none;
}
@include bp-up(xxl) {
display: none;
}
}
@include b(field-group) {
margin-bottom: rhythm(1);
}
}
/**
* Close overlay on graph modal
*/
const graphModals = document.querySelectorAll('.js-modal-graph');
const graphModalButtons = document.querySelectorAll('.js-modal-graph-button');
const addMultipleListeners = (el, types, listener, options, useCapture) => {
types.forEach((type) => el.addEventListener(type, listener, options, useCapture));
};
function closeOverlay(graphModalButton) {
// Close overlay button on 'click' on itself
graphModalButton.addEventListener('click', () => {
graphModalButton.classList.add('is-hidden');
graphModalButton.blur();
});
[].forEach.call(graphModals, (graphModal) => {
const closeButton = graphModal.querySelector('.js-toggle-modal');
closeButton.addEventListener('click', () => {
graphModalButton.classList.remove('is-hidden');
});
// Close overlay button on 'wheel', 'scroll', 'touchstart' on modal container
addMultipleListeners(
graphModal,
['wheel', 'scroll', 'touchstart'],
() => {
graphModalButton.classList.add('is-hidden');
console.log('fire!');
},
);
});
}
if (graphModalButtons && graphModals) {
[].forEach.call(graphModalButtons, closeOverlay);
}
import focusTrap from '../../focusTrap';
import className from '../../assets/js/className';
/**
* Modal action
* @typedef {Object} ModalAction
* @property {string} icon - icon name
* @property {string} color - styleguide color
* @property {string} modifier - styleguide modifier
* @property {string} text - action content
* @property {string} url - action link url
* @property {string} target - action link target
* @property {string} key - action click handler key shortcut
* @property {function} onClick - action click handler
* @property {object} attrs – action element attributes
*/
/**
* Modal content
* @typedef {Object} ModalContent
* @property {string} title - Modal title
* @property {string} content - Modal content
* @property {ModalAction[]} actions - Modal actions
*/
/**
* Modal settings
* @typedef {Object} ModalSettings
* @property {boolean} replaceCurrent - Replace currently displayed modal
* @property {boolean} skipIfCurrent - Skip if currently displaying modal
* @property {function} onClose - onClose callback
* @property {function} onOpen - onOpen callback
*/
const queue = [];
const globalOnCloseCallbacks = [];
const globalOnOpenCallbacks = [];
let active = null;
let incrementId = 0;
let modal = null;
let modalContent = null;
let modalActions = null;
let modalClose = null;
let keyHandlers = {};
/**
* Increase increment ID and return the latest
*
* @returns {number}
*/
function getId() {
incrementId += 1;
return incrementId;
}
function objectToAttributes(obj) {
return Object.entries(obj)
.filter(([, value]) => value !== undefined)
.map(([key, value]) => ((value !== null) ? `${key}=${value}` : key))
.join(' ');
}
/**
* Create an action DOM node and append to modal actions container.
*
* @param {ModalAction} action
*/
function addAction(action) {
const icon = (action.icon) ? `
<svg class="icon ${className('a-button__icon')}">
<use xlink:href="#icon-${action.icon}"></use>
</svg>
` : '';
let cls = `${className('a-button')} u-m-l-2`;
if (action.color) {
cls += ` ${className(`a-button--${action.color}`)}`;
}
if (action.modifier) {
cls += ` ${className(`m-modal__button-${action.modifier}`)}`;
}
if (action.icon) {
cls += ` ${className('a-button--icon')}`;
}
const tag = (action.url) ? 'a' : 'button';
const button = `
<${tag} ${objectToAttributes({ ...action.attrs, href: action.url, target: action.target })} class="${cls}">
<span class="${className('a-button__text')}">${action.text}</span>
${icon}
</${tag}>
`;
const dummy = document.createElement('div');
dummy.innerHTML = button;
const el = dummy.firstElementChild;
modalActions.appendChild(el);
if (action.onClick) {
el.addEventListener('click', (e) => {
// eslint-disable-next-line no-use-before-define
action.onClick(e, modal, close);
});
}
}
function handleKeyUp(e) {
Object.entries(keyHandlers).forEach(([key, handler]) => {
if (e.key.toLowerCase() === key) {
// eslint-disable-next-line no-use-before-define
handler(e, modal, close);
}
});
}
/**
* Global onOpen handler
*
* @param {Function} cb
* @returns {number}
*/
export function onOpen(cb) {
const index = globalOnOpenCallbacks.push(cb) - 1;
return () => {
globalOnOpenCallbacks.splice(index, 1);
};
}
function dispatchOnOpenHandlers(el, id) {
globalOnOpenCallbacks.forEach((cb) => cb(el, id));
}
/**
* Display the active modal.
*/
function display() {
if (active.content.nodeName) {
// Content is a custom modal
active.el = active.content;
} else {
active.el = modal;
modalContent.innerHTML = `
<h1>${active.content.title}</h1>
${active.content.content}
`;
if (active.content.actions) {
modalActions.innerHTML = '';
active.content.actions.forEach(addAction);
modalActions.classList.remove('u-hide');
} else {
modalActions.classList.add('u-hide');
}
}
focusTrap(active.el);
active.el.setAttribute('aria-hidden', 'false');
active.el.setAttribute('data-a11y-toggle-open', 'true');
if (active.settings.onOpen) {
active.settings.onOpen(active.id, active.el);
}
dispatchOnOpenHandlers(active.el, active.id);
setTimeout(() => {
if (active.el.focusTrap) {
active.el.focusTrap.activate();
}
}, 1);
// Just to make sure
keyHandlers = {};
if (active.content.actions) {
active.content.actions.forEach((action) => {
if (action.key && action.onClick) {
keyHandlers[action.key] = action.onClick;
}
});
}
document.addEventListener('keyup', handleKeyUp);
}
/**
* Dispatch the next modal in queue.
*/
function dispatch() {
if (!modal || active || !queue.length) {
return;
}
active = queue.shift();
display();
}
/**
* Global onClose handler
*
* @param {Function} cb
* @returns {number}
*/
export function onClose(cb) {
const index = globalOnCloseCallbacks.push(cb) - 1;
return () => {
globalOnCloseCallbacks.splice(index, 1);
};
}
function dispatchOnCloseHandlers(el, id) {
globalOnCloseCallbacks.forEach((cb) => cb(el, id));
}
/**
* Close currently active modal
* and dispatch next in queue.
*/
function close() {
if (active) {
active.el.setAttribute('aria-hidden', 'true');
active.el.removeAttribute('data-a11y-toggle-open');
if (active.settings.onClose) {
active.settings.onClose(active.id);
}
dispatchOnCloseHandlers(active.el, active.id);
document.removeEventListener('keyup', handleKeyUp);
if (active.el.focusTrap) {
active.el.focusTrap.deactivate();
}
keyHandlers = {};
active = null;
}
setTimeout(() => {
dispatch();
}, 1);
}
/**
* Create the modal skeleton and add it to the DOM.
* Done once and cached.
*/
function createModal() {
if (modal) {
return;
}
const id = 'iisModal';
const dummy = document.createElement('div');
dummy.innerHTML = `
<div id="${id}" class="${className('m-modal m-modal--has-overlay')}" data-container="true" aria-hidden="true" aria-labelledby="${id}-close">
<div class="${className('m-modal__container')}">
<button type="button" class="${className('a-button a-button--standalone-icon a-button--transparent')}" data-modal-close aria-expanded="false" data-a11y-toggle="${id}" aria-controls="${id}" id="${id}-close">
<span class="${className('a-button__text')} u-visuallyhidden">Stäng</span>
<svg class="icon ${className('a-button__icon')}">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<div class="${className('m-modal__content')}" data-modal-content></div>
<div class="${className('m-modal__buttons')} u-m-t-2 u-hide" data-modal-actions></div>
</div>
</div>
`;
modal = dummy.firstElementChild;
modalContent = modal.querySelector('[data-modal-content]');
modalActions = modal.querySelector('[data-modal-actions]');
modalClose = modal.querySelector('[data-modal-close]');
document.body.appendChild(modal);
modalClose.addEventListener('click', close);
setTimeout(() => {
dispatch();
}, 1);
}
/**
* Clear the current modal queue
*/
function clearQueue() {
queue.length = 0;
}
/**
* Open a modal.
*
* @param {ModalContent|HTMLElement} content
* @param {ModalSettings} settings
*/
function open(content, settings = {}) {
if (active && settings.skipIfCurrent) {
return;
}
queue.push({
id: getId(),
content,
settings,
});
if (settings.replaceCurrent) {
close();
} else {
dispatch();
}
}
function delegate(e) {
const openModal = e.target.closest('[data-modal-open]');
if (openModal) {
e.preventDefault();
e.stopPropagation();
const id = openModal.getAttribute('data-modal-open');
const modalEl = document.getElementById(id);
document.querySelector('body').classList.add('prevent-scroll');
if (modalEl) {
open(modalEl, {
replaceCurrent: openModal.hasAttribute('data-modal-replace'),
skipIfCurrent: openModal.hasAttribute('data-modal-skip'),
});
[].forEach.call(document.querySelectorAll(`[aria-controls="${id}"]`), (el) => {
el.setAttribute('aria-expanded', 'true');
});
}
return false;
}
const closeModal = e.target.closest('[data-modal-close]');
if (closeModal) {
e.preventDefault();
e.stopPropagation();
const id = closeModal.getAttribute('data-modal-close') || (active && active.el.id);
document.querySelector('body').classList.remove('prevent-scroll');
if (active && active.el.id === id) {
close();
[].forEach.call(document.querySelectorAll(`[aria-controls="${id}"]`), (el) => {
el.setAttribute('aria-expanded', 'false');
});
}
return false;
}
return true;
}
/**
* Attach global listeners
*/
function attach() {
document.body.addEventListener('click', delegate);
}
createModal();
attach();
export {
clearQueue,
open,
close,
};
No notes defined.