@internetstiftelsen/styleguide 5.0.18 → 5.1.0

package/dist/atoms/tooltip/tooltip.js

@@ -1,22 +1,18 @@
-'use strict';
-
-var toolTip = document.querySelector('[role="tooltip"]');
-var toolTipText = document.querySelector('[data-tooltip]');
-
+"use strict";
+const toolTip = document.querySelector('[role="tooltip"]');
+const toolTipText = document.querySelector('[data-tooltip]');
 function isInViewport(elem) {
-	var distance = elem.getBoundingClientRect();
-	return distance.top >= 30 && distance.left >= 30 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth);
+    const distance = elem.getBoundingClientRect();
+    return distance.top >= 30 && distance.left >= 30 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth);
 }
-
 function positionToolTip() {
-	if (isInViewport(toolTip)) {
-		toolTipText.classList.remove('down');
-	} else {
-		toolTipText.classList.add('down');
-	}
+    if (isInViewport(toolTip)) {
+        toolTipText.classList.remove('down');
+    } else {
+        toolTipText.classList.add('down');
+    }
 }
-
 if (toolTip) {
-	positionToolTip();
-	window.addEventListener('scroll', positionToolTip);
-}
+    positionToolTip();
+    window.addEventListener('scroll', positionToolTip);
+}

package/dist/components.js

@@ -1,77 +1,42 @@
-'use strict';
-
-require('./assets/js/readSpeakerHandling');
-
-require('./molecules/form');
-
-require('./atoms/textarea/rich-text');
-
-require('./atoms/password-toggle/password-toggle');
-
-require('./utilities/tab-highlighting/tab-highlighting');
-
-require('./molecules/system-error/system-error');
-
-require('./molecules/cookie-disclaimer/cookie-disclaimer');
-
-require('./organisms/accordion/accordion');
-
-require('./organisms/tabs/tabs');
-
-require('./organisms/mailchimp/mailchimp');
-
-require('./organisms/mega-menu/mega-menu');
-
-require('./molecules/share/share');
-
-require('./molecules/natural-language-form/natural-language-form');
-
-require('./atoms/tooltip/tooltip');
-
-require('./atoms/height-limiter/height-limiter');
-
-require('./atoms/file/file');
-
-require('./atoms/file/filePreview');
-
-require('./organisms/podcast/podcast');
-
-require('./assets/js/responsivePosition');
-
-require('./assets/js/youtube');
-
-require('./molecules/glider/glider');
-
-require('./molecules/glider/glider-course');
-
-require('./molecules/glider/glider-hero');
-
-require('./molecules/context-menu/context-menu');
-
-require('./molecules/alert/alert');
-
-require('./molecules/continue-video-guide/continue-video-guide');
-
-require('./organisms/video-guide/video-guide');
-
-require('./organisms/timeline/timeline');
-
-require('./molecules/overview-navigation/overview-navigation');
-
-require('./organisms/schedule/schedule-filter');
-
-require('./assets/js/ot');
-
-require('./assets/js/charCounter');
-
-require('./atoms/range/range');
-
-require('./assets/js/utmGenerator');
-
-require('./assets/js/textToggle');
-
-require('./assets/js/iconToggle');
-
-require('./molecules/multi-select/multi-select');
-
-require('./organisms/haveibeenpwned/haveibeenpwned');
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+require("./assets/js/readSpeakerHandling");
+require("./molecules/form");
+require("./atoms/textarea/rich-text");
+require("./atoms/password-toggle/password-toggle");
+require("./utilities/tab-highlighting/tab-highlighting");
+require("./molecules/system-error/system-error");
+require("./molecules/cookie-disclaimer/cookie-disclaimer");
+require("./organisms/accordion/accordion");
+require("./organisms/tabs/tabs");
+require("./organisms/mailchimp/mailchimp");
+require("./organisms/mega-menu/mega-menu");
+require("./molecules/share/share");
+require("./molecules/natural-language-form/natural-language-form");
+require("./atoms/tooltip/tooltip");
+require("./atoms/height-limiter/height-limiter");
+require("./atoms/file/file");
+require("./atoms/file/filePreview");
+require("./organisms/podcast/podcast");
+require("./assets/js/responsivePosition");
+require("./assets/js/youtube");
+require("./molecules/glider/glider");
+require("./molecules/glider/glider-course");
+require("./molecules/glider/glider-hero");
+require("./molecules/context-menu/context-menu");
+require("./molecules/alert/alert");
+require("./molecules/continue-video-guide/continue-video-guide");
+require("./organisms/video-guide/video-guide");
+require("./organisms/timeline/timeline");
+require("./molecules/overview-navigation/overview-navigation");
+require("./organisms/schedule/schedule-filter");
+require("./assets/js/ot");
+require("./assets/js/charCounter");
+require("./atoms/range/range");
+require("./assets/js/utmGenerator");
+require("./assets/js/textToggle");
+require("./assets/js/iconToggle");
+require("./molecules/multi-select/multi-select");
+require("./organisms/haveibeenpwned/haveibeenpwned");

package/dist/focusTrap.js

@@ -1,91 +1,80 @@
-'use strict';
-
+"use strict";
 Object.defineProperty(exports, "__esModule", {
-	value: true
+    value: true
 });
-exports.default = focusTrap;
-
-var _focusTrap = require('focus-trap');
-
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return focusTrap;
+    }
+});
+const _focustrap = require("focus-trap");
 function getContainer(element) {
-	return document.getElementById(element.getAttribute('data-a11y-toggle'));
+    return document.getElementById(element.getAttribute('data-a11y-toggle'));
 }
-
 function focusTrap(container) {
-	if (container && container.getAttribute('data-focus-trap') !== 'false' && !container.focusTrap) {
-		container.focusTrap = (0, _focusTrap.createFocusTrap)('#' + container.id, { clickOutsideDeactivates: true });
-		container.setAttribute('data-focus-trap', 'true');
-	}
+    if (container && container.getAttribute('data-focus-trap') !== 'false' && !container.focusTrap) {
+        container.focusTrap = (0, _focustrap.createFocusTrap)(`#${container.id}`, {
+            clickOutsideDeactivates: true
+        });
+        container.setAttribute('data-focus-trap', 'true');
+    }
 }
-
-var buttons = document.querySelectorAll('[data-a11y-toggle]');
-
-[].forEach.call(buttons, function (button) {
-	var container = getContainer(button);
-
-	if (!container) {
-		return;
-	}
-
-	container.setAttribute('data-container', 'true');
-
-	if (!container.focusTrap) {
-		focusTrap(container);
-	}
+const buttons = document.querySelectorAll('[data-a11y-toggle]');
+[].forEach.call(buttons, (button)=>{
+    const container = getContainer(button);
+    if (!container) {
+        return;
+    }
+    container.setAttribute('data-container', 'true');
+    if (!container.focusTrap) {
+        focusTrap(container);
+    }
 });
-
 function delegate(handler, e) {
-	var target = e.target.closest('[data-a11y-toggle]');
-
-	if (!target) {
-		return;
-	}
-
-	handler(e, target);
+    const target = e.target.closest('[data-a11y-toggle]');
+    if (!target) {
+        return;
+    }
+    handler(e, target);
 }
-
 function handleKeyDown(e, element) {
-	if (element.getAttribute('aria-expanded') === 'true') {
-		return;
-	}
-
-	if (e.keyCode === 9) {
-		var container = getContainer(element);
-
-		if (container) {
-			container.tabIndex = -1;
-		}
-	}
+    if (element.getAttribute('aria-expanded') === 'true') {
+        return;
+    }
+    if (e.keyCode === 9) {
+        const container = getContainer(element);
+        if (container) {
+            container.tabIndex = -1;
+        }
+    }
 }
-
 function handleFocusTrap(e, element) {
-	var container = getContainer(element);
-
-	if (!container) {
-		return;
-	}
-
-	focusTrap(container);
-
-	// Run on next tick
-	setTimeout(function () {
-		if (container.getAttribute('aria-hidden') === 'false') {
-			container.tabIndex = 0;
-
-			if (container.focusTrap) {
-				container.focusTrap.activate();
-			}
-		} else {
-			if (container.focusTrap) {
-				container.focusTrap.deactivate();
-			}
-
-			container.addEventListener('transitionend', function () {
-				container.tabIndex = -1;
-			}, { once: true });
-		}
-	}, 0);
+    const container = getContainer(element);
+    if (!container) {
+        return;
+    }
+    focusTrap(container);
+    // Run on next tick
+    setTimeout(()=>{
+        if (container.getAttribute('aria-hidden') === 'false') {
+            container.tabIndex = 0;
+            if (container.focusTrap) {
+                container.focusTrap.activate();
+            }
+        } else {
+            if (container.focusTrap) {
+                container.focusTrap.deactivate();
+            }
+            container.addEventListener('transitionend', ()=>{
+                container.tabIndex = -1;
+            }, {
+                once: true
+            });
+        }
+    }, 0);
 }
-
 document.addEventListener('click', delegate.bind(null, handleFocusTrap));
-document.addEventListener('keydown', delegate.bind(null, handleKeyDown), { once: true });
+document.addEventListener('keydown', delegate.bind(null, handleKeyDown), {
+    once: true
+});

package/dist/molecules/alert/alert.js

@@ -1,23 +1,18 @@
-'use strict';
-
-var alerts = document.querySelectorAll('.js-dismiss-alert');
-
+"use strict";
+const alerts = document.querySelectorAll('.js-dismiss-alert');
 function dismiss(alert) {
-	var target = alert.querySelector('[data-a11y-toggle]');
-	var id = target.closest('[role]').getAttribute('id');
-	var idElement = document.getElementById(id);
-
-	if (sessionStorage.getItem(id) !== 'is-dismissed') {
-		window.addEventListener('DOMContentLoaded', function () {
-			idElement.setAttribute('aria-hidden', 'false');
-		});
-
-		target.addEventListener('click', function () {
-			sessionStorage.setItem(id, 'is-dismissed');
-		});
-	}
+    const target = alert.querySelector('[data-a11y-toggle]');
+    const id = target.closest('[role]').getAttribute('id');
+    const idElement = document.getElementById(id);
+    if (sessionStorage.getItem(id) !== 'is-dismissed') {
+        window.addEventListener('DOMContentLoaded', ()=>{
+            idElement.setAttribute('aria-hidden', 'false');
+        });
+        target.addEventListener('click', ()=>{
+            sessionStorage.setItem(id, 'is-dismissed');
+        });
+    }
 }
-
 if (alerts) {
-	[].forEach.call(alerts, dismiss);
-}
+    [].forEach.call(alerts, dismiss);
+}

package/dist/molecules/context-menu/context-menu.js

@@ -1,19 +1,14 @@
-'use strict';
-
-var elements = document.querySelectorAll('[data-close-on-outside-click]');
-
+"use strict";
+const elements = document.querySelectorAll('[data-close-on-outside-click]');
 function closeElement(element) {
-	document.addEventListener('mouseup', function (e) {
-		var childElement = element.nextElementSibling;
-
-		/* Close menu on all clicks except the trigger button,
-   the menu and it's child elements and if the menu is actually open. */
-		if (!element.contains(e.target) && !childElement.contains(e.target) && element.getAttribute('aria-expanded') === 'true') {
-			element.click();
-		}
-	});
+    document.addEventListener('mouseup', (e)=>{
+        const childElement = element.nextElementSibling;
+        /* Close menu on all clicks except the trigger button,
+		 the menu and it's child elements and if the menu is actually open. */ if (!element.contains(e.target) && !childElement.contains(e.target) && element.getAttribute('aria-expanded') === 'true') {
+            element.click();
+        }
+    });
 }
-
 if (elements) {
-	[].forEach.call(elements, closeElement);
-}
+    [].forEach.call(elements, closeElement);
+}

package/dist/molecules/continue-video-guide/continue-video-guide.js

@@ -1,109 +1,98 @@
-'use strict';
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _className = require('../../assets/js/className');
-
-var _className2 = _interopRequireDefault(_className);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _CustomElement() {
-	return Reflect.construct(HTMLElement, [], this.__proto__.constructor);
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _className = /*#__PURE__*/ _interop_require_default(require("../../assets/js/className"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
 }
-
-;
-Object.setPrototypeOf(_CustomElement.prototype, HTMLElement.prototype);
-Object.setPrototypeOf(_CustomElement, HTMLElement);
-
-var ProgressRing = function (_CustomElement2) {
-	_inherits(ProgressRing, _CustomElement2);
-
-	function ProgressRing() {
-		_classCallCheck(this, ProgressRing);
-
-		var _this = _possibleConstructorReturn(this, (ProgressRing.__proto__ || Object.getPrototypeOf(ProgressRing)).call(this));
-
-		var stroke = _this.getAttribute('stroke');
-		var radius = _this.getAttribute('radius');
-		var normalizedRadius = radius - stroke * 2;
-		_this.circumference = normalizedRadius * 2 * Math.PI;
-
-		_this.root = _this.attachShadow({ mode: 'open' });
-		_this.root.innerHTML = '\n\t\t<svg\n\t\theight="' + radius * 2 + '"\n\t\twidth="' + radius * 2 + '"\n\t\t>\n\t\t<circle\n\t\tstroke="white"\n\t\tstroke-dasharray="' + _this.circumference + ' ' + _this.circumference + '"\n\t\tstyle="stroke-dashoffset:' + _this.circumference + '"\n\t\tstroke-width="' + stroke + '"\n\t\tfill="transparent"\n\t\tr="' + normalizedRadius + '"\n\t\tcx="' + radius + '"\n\t\tcy="' + radius + '"\n\t\t/>\n\t\t</svg>\n\n\t\t<style>\n\t\tcircle {\n\t\t\ttransition: stroke-dashoffset 0.35s;\n\t\t\ttransform: rotate(-90deg);\n\t\t\ttransform-origin: 50% 50%;\n\t\t}\n\t\t</style>\n\t\t';
-		return _this;
-	}
-
-	_createClass(ProgressRing, [{
-		key: 'setProgress',
-		value: function setProgress(percent) {
-			var offset = this.circumference - percent / 100 * this.circumference;
-			var circle = this.root.querySelector('circle');
-			circle.style.strokeDashoffset = offset;
-		}
-	}, {
-		key: 'attributeChangedCallback',
-		value: function attributeChangedCallback(name, oldValue, newValue) {
-			if (name === 'progress') {
-				this.setProgress(newValue);
-			}
+class ProgressRing extends HTMLElement {
+    setProgress(percent) {
+        const offset = this.circumference - percent / 100 * this.circumference;
+        const circle = this.root.querySelector('circle');
+        circle.style.strokeDashoffset = offset;
+    }
+    static get observedAttributes() {
+        return [
+            'progress'
+        ];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'progress') {
+            this.setProgress(newValue);
+        }
+    }
+    constructor(){
+        super();
+        const stroke = this.getAttribute('stroke');
+        const radius = this.getAttribute('radius');
+        const normalizedRadius = radius - stroke * 2;
+        this.circumference = normalizedRadius * 2 * Math.PI;
+        this.root = this.attachShadow({
+            mode: 'open'
+        });
+        this.root.innerHTML = `
+		<svg
+		height="${radius * 2}"
+		width="${radius * 2}"
+		>
+		<circle
+		stroke="white"
+		stroke-dasharray="${this.circumference} ${this.circumference}"
+		style="stroke-dashoffset:${this.circumference}"
+		stroke-width="${stroke}"
+		fill="transparent"
+		r="${normalizedRadius}"
+		cx="${radius}"
+		cy="${radius}"
+		/>
+		</svg>
+
+		<style>
+		circle {
+			transition: stroke-dashoffset 0.35s;
+			transform: rotate(-90deg);
+			transform-origin: 50% 50%;
 		}
-	}], [{
-		key: 'observedAttributes',
-		get: function get() {
-			return ['progress'];
-		}
-	}]);
-
-	return ProgressRing;
-}(_CustomElement);
-
+		</style>
+		`;
+    }
+}
 window.customElements.define('progress-ring', ProgressRing);
-var continueElement = document.querySelector('.js-guide-continue');
-
+const continueElement = document.querySelector('.js-guide-continue');
 // Get value from sessionStorage if present
 if (sessionStorage.getItem('InmsCurrentTime')) {
-	var videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
-	var videoDuration = sessionStorage.getItem('InmsDuration');
-	var progressRing = document.querySelector('progress-ring');
-	var continueLink = document.querySelector('.js-guide-continue-link');
-	var guideURL = sessionStorage.getItem('InmsCurrentGuideURL');
-	var guideImage = sessionStorage.getItem('InmsCurrentGuideImage');
-
-	if (videoCurrentTime > 0 && progressRing && continueElement && guideImage && continueLink) {
-		var alternativeText = continueLink.dataset.altText;
-		var currentProgress = videoCurrentTime / videoDuration;
-		var currentGuideImage = document.querySelector('.js-guide-continue-image');
-
-		continueElement.classList.add((0, _className2.default)('m-continue-video-guide--has-progress'));
-		continueLink.setAttribute('href', guideURL);
-		currentGuideImage.src = guideImage;
-		continueLink.querySelector('span').innerText = alternativeText;
-		// Calculate percentage played
-		progressRing.setAttribute('progress', Math.floor(currentProgress * 100));
-	}
+    const videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
+    const videoDuration = sessionStorage.getItem('InmsDuration');
+    const progressRing = document.querySelector('progress-ring');
+    const continueLink = document.querySelector('.js-guide-continue-link');
+    const guideURL = sessionStorage.getItem('InmsCurrentGuideURL');
+    const guideImage = sessionStorage.getItem('InmsCurrentGuideImage');
+    if (videoCurrentTime > 0 && progressRing && continueElement && guideImage && continueLink) {
+        const alternativeText = continueLink.dataset.altText;
+        const currentProgress = videoCurrentTime / videoDuration;
+        const currentGuideImage = document.querySelector('.js-guide-continue-image');
+        continueElement.classList.add((0, _className.default)('m-continue-video-guide--has-progress'));
+        continueLink.setAttribute('href', guideURL);
+        currentGuideImage.src = guideImage;
+        continueLink.querySelector('span').innerText = alternativeText;
+        // Calculate percentage played
+        progressRing.setAttribute('progress', Math.floor(currentProgress * 100));
+    }
 }
-
 // Close Continue Component
-var closeButton = document.querySelector('.js-guide-close');
-
+const closeButton = document.querySelector('.js-guide-close');
 if (closeButton) {
-	closeButton.addEventListener('click', function () {
-		sessionStorage.setItem('InmsGuideClosed', true);
-		continueElement.classList.remove('is-visible');
-	});
-
-	if (!sessionStorage.getItem('InmsGuideClosed')) {
-		continueElement.classList.add('is-visible');
-	}
-
-	if (document.querySelector('.js-video-guide')) {
-		continueElement.classList.remove('is-visible');
-	}
-}
+    closeButton.addEventListener('click', ()=>{
+        sessionStorage.setItem('InmsGuideClosed', true);
+        continueElement.classList.remove('is-visible');
+    });
+    if (!sessionStorage.getItem('InmsGuideClosed')) {
+        continueElement.classList.add('is-visible');
+    }
+    if (document.querySelector('.js-video-guide')) {
+        continueElement.classList.remove('is-visible');
+    }
+}