@allakando/allakando-web-ui/dist/js/esm-bundle.js

Allakando's web component library

/** @preserve @license @cc_on
 * ----------------------------------------------------------
 * @allakando/allakando-web-ui version 0.0.73
 * Allakando's web component library
 * Copyright (c) 2024 Allakando
 * All Rights Reserved. MIT License
 * https://mit-license.org/
 * ----------------------------------------------------------
 */
 // Builds in frameworks like NextJS will sometimes crash without this
const polyfill = () => {
	try {
		if (!global.HTMLElement) {
			global.HTMLElement = class HTMLElementPolyfill {};
		}
	} catch (e) {
	}
};
polyfill();

const template$p = "<button>\r\n  <div id=\"container\">\r\n    <slot></slot>\r\n    <img alt=\"Icon\" id=\"icon\" />\r\n  </div>\r\n</button>";

const styles$q = ":host([size=small]) button{font-family:var(--ako-font-family-body, trade-gothic-next-soft-round, sans-serif);font-style:normal;font-stretch:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ako-body-text-color, #777777);font-weight:700;font-size:1rem;line-height:1.25rem;color:var(--ako-cta-text-color, #868686)}@media screen and (max-width: 768px){:host([size=small]) button{font-size:.875rem;line-height:1.125rem}}:host([size=large]) button{font-family:var(--ako-font-family-body, trade-gothic-next-soft-round, sans-serif);font-style:normal;font-stretch:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ako-body-text-color, #777777);font-weight:700;font-size:1.5rem;line-height:1.75rem;color:var(--ako-cta-text-color, #868686)}@media screen and (max-width: 768px){:host([size=large]) button{font-size:1.25rem;line-height:1.5rem}}:host([size=medium]) button,button{font-family:var(--ako-font-family-body, trade-gothic-next-soft-round, sans-serif);font-style:normal;font-stretch:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ako-body-text-color, #777777);font-weight:700;font-size:1.25rem;line-height:1.5rem;color:var(--ako-cta-text-color, #868686)}@media screen and (max-width: 768px){:host([size=medium]) button,button{font-size:1rem;line-height:1.25rem}}:host{display:inline-block;width:100%}button{--color-dark: var(--ako-primary-color-1000, #81bb10);--color-standard: var(--ako-primary-color-900, #96c933);--color-light: var(--ako-neutral-color-300, #c3c3c3);--color-neutral: var(--ako-neutral-color-200, #d2d2d2);--with-color: var(--ako-with-color-over-500, #ffffff);color:var(--with-color)!important;background:var(--color-dark);padding:1rem;cursor:pointer;white-space:nowrap;text-align:center;width:100%;border:none;outline:none;transition:color ease var(--ako-standard-animation-duration, .2s),background-color ease var(--ako-standard-animation-duration, .2s);border-radius:.25rem}button:hover,button:active{background-color:var(--color-standard)}.disabled{cursor:not-allowed;opacity:75%!important;box-shadow:none!important;color:var(--with-color);background-color:var(--color-neutral)}.disabled:hover,.disabled:active{background-color:var(--color-neutral)!important}#container{display:flex;align-items:center;justify-content:center;gap:.5em}#icon{height:1.25rem;width:1.25rem;min-height:1.25rem;min-width:1.25rem;object-fit:contain;pointer-events:none}:host([size=large]) #icon{height:1.5rem;width:1.5rem;min-height:1.5rem;min-width:1.5rem}:host([size=medium]) #icon{height:1.25rem;width:1.25rem;min-height:1.25rem;min-width:1.25rem}:host([size=small]) #icon{height:1rem;width:1rem;min-height:1rem;min-width:1rem}:host([hollow]) button{--with-color: var(--color-dark);background:transparent;box-shadow:none;border:2px solid var(--color-dark);padding:.875rem}:host([hollow]) button:hover,:host([hollow]) button:active{--with-color: var(--ako-with-color-over-500, #ffffff);background:var(--color-dark)}:host([hollow]) button:hover #icon,:host([hollow]) button:active #icon{filter:brightness(0) invert(1)}:host([hollow]) .disabled{--with-color: var(--color-light);border:2px solid var(--color-light)}:host([hollow]) .disabled:hover,:host([hollow]) .disabled:active{--with-color: var(--color-light);background-color:transparent!important;border:2px solid var(--color-light)}:host([hollow]) .disabled:hover #icon,:host([hollow]) .disabled:active #icon{filter:grayscale(1)}:host([type=primary]) button{--color-dark: var(--ako-primary-color-1000, #81bb10);--color-standard: var(--ako-primary-color-900, #96c933);--color-light: var(--ako-primary-color-500, #c0df85)}:host([type=neutral]) button{--color-dark: var(--ako-neutral-color-1000, #535353);--color-standard: var(--ako-neutral-color-900, #686868);--color-light: var(--ako-neutral-color-700, #868686)}:host([type=warning]) button{--color-dark: var(--ako-warning-color-1000, #eab300);--color-standard: var(--ako-warning-color-900, #f5bb00);--color-light: var(--ako-warning-color-800, #f6c21a)}:host([type=error]) button{--color-dark: var(--ako-error-color-1000, #e62900);--color-standard: var(--ako-error-color-900, #f52c00);--color-light: var(--ako-error-color-800, #f6411a)}@media screen and (max-width: 768px){:host([size=large]) #icon{height:1.25rem;width:1.25rem;min-height:1.25rem;min-width:1.25rem}:host([size=medium]) #icon{height:1rem;width:1rem;min-height:1rem;min-width:1rem}:host([size=small]) #icon{height:.75rem;width:.75rem;min-height:.75rem;min-width:.75rem}}\n";

/**
 * Allakando Button
 * Renders an Allakando button.
 * @element ako-button
 *
 * @attr {boolean} disabled - If set the button will not fire click events, and will get styled as being disabled.
 * @attr {boolean} hollow - If set the button will be styled as hollow.
 * @attr {string} akostyle - Custom inline styles to be applied to the internal button element.
 * @attr {string} icon - Optional icon URL.
 * @attr {string} icon-placement - Icon position types are "before" or "after". Default is "before".
 * @attr {string} type - Determines the look and feel of the button. The types are "primary"|"neutral"|"warning"|"error". Defaults to "primary".
 * @attr {string} size - Determines the size of the button. The types are "small"|"medium"|"large". Defaults to "medium".
 *
 * @slot - Button child elements
 *
 * @function click - Clicks the button
 *
 */
class AllakandoButton extends HTMLElement {
	static get elementName() {
		return "ako-button"
	}

	static get observedAttributes() {
		return ["disabled", "akostyle", "icon", "size", "type", "icon-placement"]
	}

	constructor() {
		super();
		if (!AllakandoButton._template) {
			const templateElement = document.createElement("template");
			templateElement.innerHTML = `<style>${styles$q}</style>${template$p}`;
			AllakandoButton._template = templateElement;
			AllakandoButton._elementName = "ako-button";
		}
		this.attachShadow({ mode: "open" }).appendChild(AllakandoButton._template.content.cloneNode(true));
		this._mainContainer = this.shadowRoot.querySelector("#container");
		this._iconElement = this.shadowRoot.querySelector("#icon");
		this._slotElement = this.shadowRoot.querySelector("slot");
		this._buttonElement = this.shadowRoot.querySelector("button");
		//The active selector will not fire for touch input. So we handle this visual effect manually.

		this._render();
	}

	attributeChangedCallback(name, oldValue, newValue) {
		if (name === "icon-placement") {
			if (newValue.toLowerCase() === "before") {
				this._mainContainer.appendChild(this._iconElement);
				this._mainContainer.appendChild(this._slotElement);
			} else {
				this._mainContainer.appendChild(this._slotElement);
				this._mainContainer.appendChild(this._iconElement);
			}
		}
		this._render();
	}

	click() {
		this._buttonElement.click();
	}

	_render() {
		//Handle Icon Display
		this._iconElement.style.removeProperty("display");
		if (this.hasAttribute("icon")) {
			this._iconElement.setAttribute("src", this.getAttribute("icon"));
		} else {
			this._iconElement.style.display = "none";
		}

		//Handle Disabled
		this._buttonElement.classList.remove("disabled");
		this._buttonElement.removeAttribute("disabled");
		if (this.hasAttribute("disabled")) {
			this._buttonElement.classList.add("disabled");
			this._buttonElement.setAttribute("disabled", true);
		}

		//Handle Style
		this._buttonElement.removeAttribute("style");
		this.hasAttribute("akostyle") && (this._buttonElement.style = this.getAttribute("akostyle"));
	}
}

const template$o = "<div>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 100 100\"\r\n    preserveAspectRatio=\"xMaxYMax\" class=\"spinner-wheel\">\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.9166666666666666s\"\r\n          repeatCount=\"indefinite\"></animate>\r\n      </rect>\r\n    </g>\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.8333333333333334s\"\r\n          repeatCount=\"indefinite\"></animate>\r\n      </rect>\r\n    </g>\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.75s\" repeatCount=\"indefinite\">\r\n        </animate>\r\n      </rect>\r\n    </g>\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.6666666666666666s\"\r\n          repeatCount=\"indefinite\"></animate>\r\n      </rect>\r\n    </g>\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5833333333333334s\"\r\n          repeatCount=\"indefinite\"></animate>\r\n      </rect>\r\n    </g>\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5s\" repeatCount=\"indefinite\">\r\n        </animate>\r\n      </rect>\r\n    </g>\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.4166666666666667s\"\r\n          repeatCount=\"indefinite\"></animate>\r\n      </rect>\r\n    </g>\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.3333333333333333s\"\r\n          repeatCount=\"indefinite\"></animate>\r\n      </rect>\r\n    </g>\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.25s\" repeatCount=\"indefinite\">\r\n        </animate>\r\n      </rect>\r\n    </g>\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.16666666666666666s\"\r\n          repeatCount=\"indefinite\"></animate>\r\n      </rect>\r\n    </g>\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.08333333333333333s\"\r\n          repeatCount=\"indefinite\"></animate>\r\n      </rect>\r\n    </g>\r\n    <g>\r\n      <rect x=\"46\" y=\"2\" y=\"2\" rx=\"6\" ry=\"3\" class=\"spinner-blade\">\r\n        <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"0s\" repeatCount=\"indefinite\">\r\n        </animate>\r\n      </rect>\r\n    </g>\r\n  </svg>\r\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\" class=\"spinner-circle\">\r\n    <circle id=\"background-circle\" pathLength=\"100\" cx=\"50\" cy=\"50\" r=\"43\"/>\r\n    <circle id=\"spinning-circle\" pathLength=\"100\" cx=\"50\" cy=\"50\" r=\"43\"/>\r\n  </svg>\r\n</div>";

const styles$p = ":host([type=circle]) .spinner-wheel{display:none}:host([type=circle]) .spinner-circle{display:block}:host([type=wheel]) .spinner-wheel{display:block}:host([type=wheel]) .spinner-circle{display:none}:host([uselight]) #spinning-circle{stroke:var(--ako-spinner-color, #ffffff)}:host([uselight]) #background-circle{stroke:var(--ako-spinner-background-color, rgba(255, 255, 255, .3))}:host([usebackground]) #background-circle{display:inherit}.spinner-wheel{display:none;width:100%;height:100%}.spinner-wheel>g:first-child{transform:rotate(0);transform-origin:50px 50px}.spinner-wheel>g:nth-child(2){transform:rotate(30deg);transform-origin:50px 50px}.spinner-wheel>g:nth-child(3){transform:rotate(60deg);transform-origin:50px 50px}.spinner-wheel>g:nth-child(4){transform:rotate(90deg);transform-origin:50px 50px}.spinner-wheel>g:nth-child(5){transform:rotate(120deg);transform-origin:50px 50px}.spinner-wheel>g:nth-child(6){transform:rotate(150deg);transform-origin:50px 50px}.spinner-wheel>g:nth-child(7){transform:rotate(180deg);transform-origin:50px 50px}.spinner-wheel>g:nth-child(8){transform:rotate(210deg);transform-origin:50px 50px}.spinner-wheel>g:nth-child(9){transform:rotate(240deg);transform-origin:50px 50px}.spinner-wheel>g:nth-child(10){transform:rotate(270deg);transform-origin:50px 50px}.spinner-wheel>g:nth-child(11){transform:rotate(300deg);transform-origin:50px 50px}.spinner-wheel>g:nth-child(12){transform:rotate(330deg);transform-origin:50px 50px}.spinner-wheel .spinner-blade{width:.5rem;height:1.5rem;fill:var(--ako-neutral-color-900, #686868)}.spinner-circle{display:block;width:100%;height:100%;animation:1.6s linear infinite svg-animation}.spinner-circle #spinning-circle{display:block;fill:transparent;stroke:var(--ako-spinner-color, var(--ako-neutral-color-800, #777777));stroke-linecap:round;stroke-width:12px;transform-origin:50% 50%;stroke-dasharray:100;stroke-dashoffset:100;animation:1.6s ease-in-out infinite both circle-animation}.spinner-circle #background-circle{display:none;fill:transparent;stroke:var(--ako-spinner-background-color, var(--ako-neutral-color-100, #ececec));stroke-linecap:initial;stroke-width:12px}@keyframes svg-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes circle-animation{0%,25%{stroke-dashoffset:90;transform:rotate(0)}50%,60%{stroke-dashoffset:0;transform:rotate(45deg)}to{stroke-dashoffset:90;transform:rotate(360deg)}}\n";

/**
 * Allakando Spinner
 * A configurable spinner element to illustrate a loading state.
 * @element ako-spinner
 *
 * @attr {number} size - Sets a fixed size of the spinner
 * @attr {string} type - Sets the type of spinner. Options are "wheel" or "circle"
 * @attr {number} percent - Sets the radius percent of the circle
 * @attr {boolean} usebackground - Sets the background to be visible or not
 * @attr {boolean} uselight - Sets the circular spinner color for light and dark backgrounds
 *
 */

class AllakandoSpinner extends HTMLElement {
	static get elementName() {
		return "ako-spinner"
	}

	static get observedAttributes() {
		return ["size", "type", "percent", "usebackground", "uselight"]
	}

	constructor() {
		super();
		if (!AllakandoSpinner._template) {
			const templateElement = document.createElement("template");
			templateElement.innerHTML = `<style>${styles$p}</style>${template$o}`;
			AllakandoSpinner._template = templateElement;
			AllakandoSpinner._elementName = "ako-spinner";
		}
		this.attachShadow({ mode: "open" }).appendChild(AllakandoSpinner._template.content.cloneNode(true));
		this._spinnerWheel = this.shadowRoot.querySelector(".spinner-wheel");
		this._spinnerCircle = this.shadowRoot.querySelector(".spinner-circle");

		this._backgroundCircleElement = this.shadowRoot.querySelector("#background-circle");
		this._spinningCircleElement = this.shadowRoot.querySelector("#spinning-circle");
	}

	attributeChangedCallback(name, oldValue, newValue) {
		if (name === "size") {
			if (newValue === null) {
				this._spinnerCircle.style.removeProperty("min-width");
				this._spinnerCircle.style.removeProperty("width");
				this._spinnerCircle.style.removeProperty("min-height");
				this._spinnerCircle.style.removeProperty("height");
				this._spinnerWheel.removeAttribute("style");
			} else {
				this._spinnerCircle.style.minWidth = newValue;
				this._spinnerCircle.style.width = newValue;
				this._spinnerCircle.style.minHeight = newValue;
				this._spinnerCircle.style.height = newValue;
				this._spinnerWheel.style.height = newValue;
				this._spinnerWheel.style.minHeight = newValue;
				this._spinnerWheel.style.maxHeight = newValue;
				this._spinnerWheel.style.width = newValue;
				this._spinnerWheel.style.minWidth = newValue;
				this._spinnerWheel.style.maxWidth = newValue;
			}
		}

		if (name === "percent") {
			if (newValue === null) {
				this._spinningCircleElement.style.removeProperty("stroke-dashoffset");
				this._spinningCircleElement.style.removeProperty("animation");
				this._spinnerCircle.style.removeProperty("animation");
			} else {
				this._spinningCircleElement.style.strokeDashoffset = 100 - parseInt(newValue);
				this._spinningCircleElement.style.animation = "none";
				this._spinnerCircle.style.animation = "none";
			}
		}
	}
}

const template$n = "<div id=\"backdrop\"></div>\n<div id=\"main\">\n\t<div id=\"window\">\n\t\t<div id=\"header-section\">\n\t\t\t<div id=\"header\">\n\t\t\t\t<div id=\"header-icon-container\">\n\t\t\t\t\t<div id=\"header-initials-icon\" hidden></div>\n\t\t\t\t\t<img id=\"header-icon\" alt=\"\" src=\"\" width=\"40\" height=\"40\" hidden />\n\t\t\t\t</div>\n\t\t\t\t<div id=\"header-title-container\">\n\t\t\t\t\t<span id=\"header-title\"></span>\n\t\t\t\t</div>\n\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t</div>\n\t\t\t<div id=\"close-icon\">\n\t\t\t\t<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M0.510369 0.366201C0.998637 -0.122067 1.79028 -0.122067 2.27854 0.366201L10 8.08766L17.7215 0.366201C18.2097 -0.122067 19.0014 -0.122067 19.4896 0.366201L19.6338 0.510369C20.1221 0.998637 20.1221 1.79028 19.6338 2.27854L11.9123 10L19.6338 17.7215C20.1221 18.2097 20.1221 19.0014 19.6338 19.4896L19.4896 19.6338C19.0014 20.1221 18.2097 20.1221 17.7215 19.6338L10 11.9123L2.27855 19.6338C1.79028 20.1221 0.998639 20.1221 0.510371 19.6338L0.366203 19.4896C-0.122065 19.0014 -0.122065 18.2097 0.366203 17.7215L8.08766 10L0.366201 2.27854C-0.122067 1.79028 -0.122067 0.998637 0.366201 0.510369L0.510369 0.366201Z\"\n\t\t\t\t\t\tfill=\"#868686\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</div>\n\t\t<div id=\"content\">\n\t\t\t<div id=\"content-header\">\n\t\t\t\t<span id=\"content-header-title\"></span>\n\t\t\t\t<span id=\"content-header-subtitle\"></span>\n\t\t\t</div>\n\t\t\t<div id=\"body\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t\t<div id=\"footer\">\n\t\t\t<slot name=\"footer\"></slot>\n\t\t</div>\n\t</div>\n</div>\n";

const styles$o = "#main #window #content #content-header #content-header-title{font-family:var(--ako-font-family-body, trade-gothic-next-soft-round, sans-serif);font-style:normal;font-stretch:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ako-body-text-color, #777777);font-weight:700;font-size:2rem;line-height:2.5rem;color:var(--ako-header-text-color, #535353)}@media screen and (max-width: 768px){#main #window #content #content-header #content-header-title{font-size:1.5rem;line-height:2rem}}#main #window #header-section #header #header-title-container #header-title,#main #window #header-section #header #header-icon-container #header-initials-icon{font-family:var(--ako-font-family-body, trade-gothic-next-soft-round, sans-serif);font-style:normal;font-stretch:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ako-body-text-color, #777777);font-weight:700;font-size:1.125rem;line-height:1.375rem;color:var(--ako-header-text-color, #535353)}@media screen and (max-width: 768px){#main #window #header-section #header #header-title-container #header-title,#main #window #header-section #header #header-icon-container #header-initials-icon{font-size:1rem;line-height:1.25rem}}#main #window #content #content-header #content-header-subtitle{font-family:var(--ako-font-family-body, trade-gothic-next-soft-round, sans-serif);font-style:normal;font-stretch:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:1.25rem;line-height:2rem;color:var(--ako-body-text-color, #777777)}@media screen and (max-width: 768px){#main #window #content #content-header #content-header-subtitle{font-size:1.125rem;line-height:1.75rem}}#main #window #footer,#main #window #content #body{font-family:var(--ako-font-family-body, trade-gothic-next-soft-round, sans-serif);font-style:normal;font-stretch:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:1.125rem;line-height:1.75rem;color:var(--ako-body-text-color, #777777)}@media screen and (max-width: 768px){#main #window #footer,#main #window #content #body{font-size:1rem;line-height:1.5rem}}*{scrollbar-width:var(--ako-scrollbar-width, thin);scrollbar-color:var(--ako-scrollbar-thumb-color, #cdcdcd) var(--ako-scrollbar-track-color, #f0f0f0)}::-webkit-scrollbar{width:var(--ako-scrollbar-width-webkit, .5rem);height:var(--ako-scrollbar-width-webkit, .5rem)}::-webkit-scrollbar-thumb{background:var(--ako-scrollbar-thumb-color, #cdcdcd);border-radius:var(--ako-scrollbar-thumb-radius, .5rem);box-shadow:var(--ako-scrollbar-thumb-boxshadow, none);border:var(--ako-scrollbar-thumb-border, none)}::-webkit-scrollbar-hover{background:var(--ako-scrollbar-thumb-color-hover, #cdcdcd);border-radius:var(--ako-scrollbar-thumb-radius-hover, .5rem);box-shadow:var(--ako-scrollbar-thumb-boxshadow-hover, none);border:var(--ako-scrollbar-thumb-border-hover, none)}::-webkit-scrollbar-active{background:var(--ako-scrollbar-thumb-color-active, #cdcdcd);border-radius:var(--ako-scrollbar-thumb-radius-active, .5rem);box-shadow:var(--ako-scrollbar-thumb-boxshadow-active, none);border:var(--ako-scrollbar-thumb-border-active, none)}::-webkit-scrollbar-track{background:var(--ako-scrollbar-track-color, #f0f0f0);background-size:var(--ako-scrollbar-track-backgroundsize, .5rem)}#backdrop{position:fixed;inset:0;background-color:#000;opacity:.5;pointer-events:none;z-index:9000}:host([scrollable]) #main{overflow-y:auto;align-items:unset}:host([scrollable]) #main #window{max-height:none;bottom:0;border-radius:var(--ako-border-radius-large, 1rem)}:host([scrollable]) #main #window #footer{border-bottom-left-radius:var(--ako-border-radius-large, 1rem);border-bottom-right-radius:var(--ako-border-radius-large, 1rem)}:host([noheader]) #main{--padding-sides: 7.875rem;--padding-outer-top: 5rem;--padding-outer-bottom: 4.5rem;--padding-body-top: var(--padding-outer-top)}:host([noheader]) #main #window #header-section #header{display:none!important}:host([noheader]) #main #window #content #content-header{display:none!important}:host([noheader]) #main #window #body{border-top-left-radius:var(--ako-border-radius-large, 1rem);border-top-right-radius:var(--ako-border-radius-large, 1rem)}:host([nofooter]) #main{--padding-body-bottom: var(--padding-outer-bottom)}:host([nofooter]) #main #body{border-bottom-left-radius:var(--ako-border-radius-large, 1rem);border-bottom-right-radius:var(--ako-border-radius-large, 1rem)}:host([nofooter]) #main #footer{display:none!important}:host([bgcolor=primary]) #main #window #header-section #header-content{background:linear-gradient(to bottom,var(--ako-primary-color-600, #b6d970),var(--ako-primary-color-900, #96c933))}:host([bgcolor=primary]) #main #window #header-section #header-content #header-title{color:#fff!important}:host([bgcolor=primary]) #main #window #header-section #header-content #header-subtitle{color:#fff!important}:host([noclose]) #main #window #header-section #close-icon{display:none}:host([fluid]) #main{--padding-sides: 0 !important;--padding-outer-top: 0 !important;--padding-outer-bottom: 0 !important;--padding-header-top: 0 !important;--padding-header-bottom: 0 !important;--padding-body-top: 0 !important;--padding-body-bottom: 0 !important}:host([fluid]) #main #window{width:auto!important}:host([modality=disabled]) #backdrop{pointer-events:none}#main{display:flex;align-items:center;position:fixed;top:0;left:0;z-index:9001;width:100%;height:100%;overflow-x:hidden;overflow-y:hidden;outline:0;--padding-sides: 3.25rem;--padding-outer-top: 2.5rem;--padding-outer-bottom: 2rem;--padding-header-top: var(--padding-outer-top);--padding-header-bottom: 1.5rem;--padding-body-top: 1.5rem;--padding-body-bottom: 1.5rem;--margin-sides-close-icon-maximum: 3.25rem}#main #window{background-color:#fff;position:relative;display:flex;flex-direction:column;max-width:43.25rem;width:calc(100% - 6rem);max-height:90%;height:fit-content;box-shadow:0 2px 5px #0003;border-radius:var(--ako-border-radius-large, 1rem);animation-duration:var(--ako-standard-animation-duration, .2s);animation-timing-function:ease-in-out;transition:all var(--ako-standard-animation-duration, .2s);margin:5rem auto}#main #window #header-section #header{position:relative;overflow:hidden;border-bottom:none;display:flex;flex-direction:row;gap:1.25rem;user-select:none;padding-bottom:var(--padding-header-bottom)!important;padding-top:2.5rem!important;padding-inline:2.5rem;border-top-left-radius:var(--ako-border-radius-large, 1rem);border-top-right-radius:var(--ako-border-radius-large, 1rem);transition:.5s;background:#fafafa;min-height:2rem}#main #window #header-section #header #header-icon-container{min-width:2rem;min-height:2rem}#main #window #header-section #header #header-icon-container #header-initials-icon{color:var(--ako-with-color-over-500, #ffffff);background:var(--ako-primary-color-900, #96c933);align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem;width:1.5rem;height:1.5rem;border-radius:50%;padding:.5rem}#main #window #header-section #header #close-icon>svg>path{stroke:var(--ako-primary-color-700, #abd45c);fill:var(--ako-primary-color-700, #abd45c)}#main #window #header-section #header #header-title-container{display:flex;flex-direction:column;align-items:center;justify-content:center}#main #window #header-section #header #header-title-container #header-title{display:flex;flex:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ako-neutral-color-1000, #535353)!important;visibility:hidden}#main #window #header-section #close-icon{position:absolute;font-size:1.25rem;top:0;right:0;cursor:pointer;filter:none;--close-icon-padding: .75rem;padding:var(--close-icon-padding);margin:1.25rem calc(min(var(--padding-sides),var(--margin-sides-close-icon-maximum)) - var(--close-icon-padding));border-radius:50%;transition:opacity var(--ako-standard-animation-duration, .2s);background-color:#fff}#main #window #header-section #close-icon svg{display:block}#main #window #header-section #close-icon:hover{opacity:.85}#main #window #content{overflow:auto;overscroll-behavior:none}#main #window #content #content-header{display:flex;flex-direction:column;gap:.25rem;background:#fafafa;padding-bottom:var(--padding-header-bottom)!important;padding-inline:2.5rem}#main #window #content #content-header #content-header-title{display:flex;flex:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ako-neutral-color-1000, #535353)!important}#main #window #content #content-header #content-header-subtitle{display:flex;flex:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#main #window #content #body{height:auto;background:#ffffff;padding-top:var(--padding-body-top);padding-bottom:var(--padding-body-bottom);padding-inline:var(--padding-sides)}#main #window #footer{background:#ffffff;border-top:none;display:block;flex-direction:row;align-items:center;white-space:nowrap;padding-inline:var(--padding-sides);padding-bottom:var(--padding-outer-bottom);border-bottom-left-radius:var(--ako-border-radius-large, 1rem);border-bottom-right-radius:var(--ako-border-radius-large, 1rem)}#main #window.isScrolled{transition:all var(--ako-standard-animation-duration, .2s)}#main #window.isScrolled #content #content-header{background:#ffffff}#main #window.isScrolled #content #content-header #content-header-title,#main #window.isScrolled #content #content-header #content-header-subtitle{visibility:hidden}#main #window.isScrolled #header-section #header{background-color:#fff}#main #window.isScrolled #header-section #header #header-title-container{width:100%;justify-content:center;align-items:center}#main #window.isScrolled #header-section #header #header-title-container #header-title{visibility:visible}#main #window.isScrolled #header-section #header #header-icon-container{visibility:hidden;display:none}@media screen and (max-width: 768px){#main{--padding-sides: 1.5rem !important;--padding-outer-bottom: 2.25rem !important}:host([noheader]) #main{--padding-outer-top: 4rem}:host([scrollable]) #main #window{width:calc(100% - 1rem)}:host(:not([scrollable])) #main #window{max-height:95%;height:min-content;width:100%;max-width:unset;position:fixed;bottom:0;left:0;right:0;margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not([scrollable])) #main #window #body{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not([scrollable])) #main #window #header,:host(:not([scrollable])) #main #window #footer{padding-left:2.5rem!important;padding-right:2.5rem!important;border-bottom-left-radius:0;border-bottom-right-radius:0}}@keyframes main-animation{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}\n";

const deserializeForHtmlAttribute = str => {
	return JSON.parse(str.replaceAll("%20", " "))
};

const isValidUrl = urlString => {
	try {
		return /(\/[^"']*\.(?:png|jpg|jpeg|gif|webp|svg))/gm.test(String(urlString)) || Boolean(new URL(urlString))
	} catch (e) {
		return false
	}
};

/**
 * Allakando dialog window
 * A window that can be opened within the browser viewport. Can work either as a dialog or a modal.
 * @element ako-dialog
 *
 * @attr {boolean} noheader - If set to any value the header will not be rendered.
 * @attr {boolean} nofooter - If set to any value the footer will not be rendered.
 * @attr {boolean} noclose - If set to any value the window will not have a close button in the top right corner of the header.
 * @attr {string} modality - configures the backdrop of the window. Options are "clickable" or "disabled"
 * @attr {string} headertitle - Header text.
 * @attr {string} headersubtitle - Header sub-text.
 * @attr {boolean} scrollable - Makes the modal scrollable.
 * @attr {string} icon - To set an icon at the header section.
 * @attr {string} bgcolor - To update the background color. Currently there are only 2 options "primary" or "neutral".
 *
 * @function close - Will close the window
 *
 * @slot body - body Content
 * @slot header - Header Content
 * @slot footer - Footer Content
 *
 * @fires close - Sent when the window is closed.
 * @type {CustomEvent}
 * @param {object} detail - Additional details about the event
 * @property {string} triggeredBy - {"X_ICON"|"BUTTON"|"BACKDROP"|"EXTERNAL"} - Value depends on the src of the event
 *
 **/

class AllakandoDialog extends HTMLElement {
	static get elementName() {
		return "ako-dialog"
	}

	static get observedAttributes() {
		return ["noheader", "nofooter", "noclose", "modality", "headertitle", "headersubtitle", "icon", "bgcolor", "scrollable"]
	}

	constructor() {
		super();
		if (!AllakandoDialog._template) {
			const templateElement = document.createElement("template");
			templateElement.innerHTML = `<style>${styles$o}</style>${template$n}`;
			AllakandoDialog._template = templateElement;
			AllakandoDialog._elementName = "ako-dialog";
		}
		this.attachShadow({ mode: "open" }).appendChild(AllakandoDialog._template.content.cloneNode(true));
		this._mainElement = this.shadowRoot.querySelector("#main");
		this._windowElement = this.shadowRoot.querySelector("#window");
		this._headerElement = this.shadowRoot.querySelector("#header");
		this._headerInitialsIconElement = this.shadowRoot.querySelector("#header-initials-icon");
		this._headerTextElement = this.shadowRoot.querySelector("#header-title");
		this._headerButtonsContainerElement = this.shadowRoot.querySelector("#header-buttons");
		this._closeIconElement = this.shadowRoot.querySelector("#close-icon");
		this._contentHeaderTitle = this.shadowRoot.querySelector("#content-header-title");
		this._contentHeaderSubtitle = this.shadowRoot.querySelector("#content-header-subtitle");
		this._bodyElement = this.shadowRoot.querySelector("#body");
		this._footerElement = this.shadowRoot.querySelector("#footer");
		this._headerIconElement = this.shadowRoot.querySelector("#header-icon");
		this._contentElement = this.shadowRoot.querySelector("#content");

		//Init Icons
		this._closeIconElement.addEventListener("click", this.close.bind(this));

		//Keeps track of if the initial(!) mount has taken place.
		//When the component is initially mounted it will center and auto-size itself.
		this._hasMounted = false;

		//Should the window close when the backdrop is clicked?
		this._mainElement.addEventListener("click", event => {
			if (this.getAttribute("modality") !== "disabled") {
				if (event.composedPath()[0] === this._mainElement) {
					this.close(event, "close");
				}
			}
		});

		// Adding the scrolling effect for the header
		this._contentElement.addEventListener("scroll", () => {
			if (this._contentElement.scrollTop > 20) {
				this._windowElement.classList.add("isScrolled");
				this._headerIconElement.setAttribute("hidden", "hidden");
			} else {
				this._windowElement.classList.remove("isScrolled");
				this.hasAttribute("icon") ? this._headerIconElement.removeAttribute("hidden") : null;
			}
		});
	}

	connectedCallback() {
		if (!this._hasMounted) {
			this._hasMounted = true;
			requestAnimationFrame(() => {
				this._animate(false);
			});
		}
		document.body.style.overflow = "hidden";
	}

	disconnectedCallback() {
		if (document.querySelectorAll("ako-dialog").length === 0) {
			document.body.style.overflow = null;
		}
	}

	attributeChangedCallback(name, oldValue, newValue) {
		if (name === "headertitle") {
			this._updateHeaderText(newValue);
		}
		if (name === "headersubtitle") {
			this._updateHeaderSubtext(newValue);
		}
		if (name === "icon") {
			this._updateHeaderIcon(newValue);
		}
	}

	_updateHeaderText(newValue) {
		this._updateHeaderElement(newValue, this._headerTextElement);
		this._updateHeaderElement(newValue, this._contentHeaderTitle);
	}

	_updateHeaderSubtext(newValue) {
		this._updateHeaderElement(newValue, this._contentHeaderSubtitle);
	}

	_updateHeaderElement(newValue, element) {
		element.innerHTML = "";
		element.style.removeProperty("display");
		if (newValue) {
			element.appendChild(document.createTextNode(newValue));
			element.style.display = "initial";
		}
	}

	_updateHeaderIcon(newValue) {
		this._headerIconElement.style.display = "none";
		this._headerInitialsIconElement.innerHTML = "";
		this._headerInitialsIconElement.style.display = "none";

		if (newValue) {
			if (isValidUrl(newValue)) {
				this._headerIconElement.setAttribute("src", newValue);
				this._headerIconElement.style.display = "block";
			} else {
				this._headerInitialsIconElement.appendChild(document.createTextNode(newValue.substring(0, 1).toUpperCase()));
				this._headerInitialsIconElement.style.display = "flex";
			}
		}
	}

	_animate(isReverse) {
		let resolve;
		const promise = new Promise(innerResolve => (resolve = innerResolve));
		if (isReverse) {
			this._windowElement.style.animationDirection = "reverse";
		}
		this._windowElement.style.animationTimingFunction = "ease-in-out";
		this._windowElement.style.animationName = "main-animation";
		const handleAnimationEnd = () => {
			this._windowElement.style.removeProperty("animation-name");
			this._windowElement.style.removeProperty("animation-direction");
			this._windowElement.removeEventListener("animationend", handleAnimationEnd);
			resolve();
		};
		this._windowElement.addEventListener("animationend", handleAnimationEnd);
		return promise
	}

	/**
	 * Closes the window with the proper close animation
	 * and dispatch event based on the source element of
	 * the close function.
	 **/

	close(event) {
		let src = "";
		event && event.preventDefault();
		this._animate(true).then(() => this.remove());

		if (event) {
			const path = event.composedPath();
			if (path.includes(this._closeIconElement)) {
				src = "X_ICON";
			} else if (path.includes(this._mainElement) && !path.includes(this._windowElement)) {
				src = "BACKDROP";
			} else if (path.includes(this._windowElement) && path.some(element => element.tagName.toLowerCase().includes("button"))) {
				src = "BUTTON";
			} else {
				src = "EXTERNAL";
			}
		}

		this.dispatchEvent(new CustomEvent("close", { detail: { triggeredBy: src } }));
	}
}

const template$m = "<div id=\"accordion-wrapper\">\n\t<div id=\"accordion-header\">\n\t\t<div id=\"image-title-wrap\">\n\t\t\t<div id=\"accordion-image\"></div>\n\t\t\t<div id=\"accordion-title\"></div>\n\t\t</div>\n\t\t<span id=\"toggle-accordion\"></span>\n\t</div>\n\t<div id=\"accordion-content\" class=\"closed\">\n\t\t<slot></slot>\n\t</div>\n</div>\n";

const styles$n = "#accordion-wrapper #accordion-header #accordion-title.opened{font-family:var(--ako-font-family-body, trade-gothic-next-soft-round, sans-serif);font-style:normal;font-stretch:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ako-body-text-color, #777777);font-weight:700;font-size:2.5rem;line-height:3rem;color:var(--ako-header-text-color, #535353)}@media screen and (max-width: 768px){#accordion-wrapper #accordion-header #accordion-title.opened{font-size:2rem;line-height:2.5rem}}#accordion-wrapper #accordion-header #accordion-title{font-family:var(--ako-font-family-body, trade-gothic-next-soft-round, sans-serif);font-style:normal;font-stretch:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ako-body-text-color, #777777);font-weight:400;font-size:1.375rem;line-height:2.25rem;color:var(--ako-neutral-color-800, #777777)}@media screen and (max-width: 768px){#accordion-wrapper #accordion-header #accordion-title{font-size:1.25rem;line-height:2rem}}#accordion-wrapper #accordion-header #toggle-accordion,#accordion-wrapper #accordion-header{font-family:var(--ako-font-family-body, trade-gothic-next-soft-round, sans-serif);font-style:normal;font-stretch:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:1.25rem;line-height:2rem;color:var(--ako-body-text-color, #777777)}@media screen and (max-width: 768px){#accordion-wrapper #accordion-header #toggle-accordion,#accordion-wrapper #accordion-header{font-size:1.125rem;line-height:1.75rem}}:host(:not(:first-of-type)) #accordion-wrapper{border-top:0}#accordion-wrapper{padding-top:1.75rem;padding-bottom:1.75rem;transition:all .2s;border-top:var(--ako-accordion-border-top, 2px solid #f0f0f0);border-bottom:var(--ako-accordion-border-bottom, 2px solid #f0f0f0)}#accordion-wrapper #accordion-header{display:flex;align-items:center;justify-content:space-between}#accordion-wrapper #accordion-header #image-title-wrap{display:flex;justify-content:center;align-items:center;overflow:hidden}#accordion-wrapper #accordion-header #accordion-title{line-height:initial!important;transition:all .2s;white-space:nowrap;overflow:hidden;flex:auto;text-overflow:ellipsis}#accordion-wrapper #accordion-header #accordion-image{display:none;width:2.75rem;height:2.75rem;min-width:2.75rem;min-height:2.75rem;margin-right:1.75rem}#accordion-wrapper #accordion-header #accordion-image.is-image{background-size:contain;background-repeat:no-repeat;background-position:center center}#accordion-wrapper #accordion-header #accordion-image.is-letters{background:var(--ako-primary-color-900, #96c933);color:#fff;text-transform:uppercase;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.125rem;line-height:1;font-weight:700}#accordion-wrapper #accordion-header #toggle-accordion{cursor:pointer;white-space:nowrap;margin-left:1.75rem}#accordion-wrapper #accordion-header #toggle-accordion:after{display:inline-block;content:\"\";width:.875rem;height:.75rem;margin-left:.5rem;background-size:.85rem .5rem;background-repeat:no-repeat;background-position:50%;transition:transform .2s;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M13.3.7a1 1 0 010 1.3L7.7 7.3a1 1 0 01-1.4 0L.7 2A1 1 0 01.7.7a1 1 0 011.4 0L7 5.3 11.9.7a1 1 0 011.4 0z' fill='%23686868' fill-rule='evenodd'/%3E%3C/svg%3E\")}#accordion-wrapper #accordion-header #toggle-accordion.opened:after{transform:rotate(-180deg)}#accordion-wrapper #accordion-content{display:block;margin-top:1.25rem}#accordion-wrapper #accordion-content.closed{display:none!important}@media (max-width: 768px){#accordion-wrapper{padding-top:1rem;padding-bottom:1.25rem}}\n";

/**
 * Allakando Accordion
 * A universal accordion with option of adding an image.
 * @element ako-accordion
 *
 * @attr {string} headertitle - Title of the accordion header
 * @attr {string} icon - Url or letters of the icon
 * @attr {string} open-text - Text for opening the accordion
 * @attr {string} close-text - Text for closing the accordion
 *
 * @slot - Accordion child element
 *
 * @function toggle - Toggles the accordion
 *
 */
class AllakandoAccordion extends HTMLElement {
	static get elementName() {
		return "ako-accordion"
	}

	static get observedAttributes() {
		return ["headertitle", "icon", "open-text", "close-text"]
	}

	constructor() {
		super();
		if (!AllakandoAccordion._template) {
			const templateElement = document.createElement("template");
			templateElement.innerHTML = `<style>${styles$n}</style>${template$m}`;
			AllakandoAccordion._template = templateElement;
		}
		this.attachShadow({ mode: "open" }).appendChild(AllakandoAccordion._template.content.cloneNode(true));
		this._titleTextElement = this.shadowRoot.querySelector("#accordion-title");
		this._toggleAccordionElement = this.shadowRoot.querySelector("#toggle-accordion");
		this._contentElement = this.shadowRoot.querySelector("#accordion-content");
		this._mainElement = this.shadowRoot.querySelector("#accordion-wrapper");
		this._slotElement = this.shadowRoot.querySelector("slot");
		this._imageElement = this.shadowRoot.querySelector("#accordion-image");

		this._accordionOpened = false;
		this._openAccordionText = "Visa";
		this._closeAccordionText = "Dölj";

		this._toggleAccordionElement.addEventListener("click", this.toggle.bind(this));
		this._render();
	}

	attributeChangedCallback(name, oldValue, newValue) {
		if (name === "headertitle") {
			this._updateHeaderText(newValue);
		}
		this._render();
	}

	_updateHeaderText(newValue) {
		const element = this._titleTextElement;
		element.innerHTML = "";
		element.style.removeProperty("display");
		if (newValue) {
			element.appendChild(document.createTextNode(newValue));
			element.style.display = "initial";
		}
	}

	/**
	 * Toggles the accordion open/close.
	 */
	toggle(event) {
		event && event.preventDefault();
		if (this._accordionOpened) {
			this._contentElement.classList.add("closed");
			this._titleTextElement.classList.remove("opened");
			this._toggleAccordionElement.classList.remove("opened");
			this._toggleAccordionElement.textContent = this._openAccordionText;
			this._accordionOpened = false;
		} else {
			this._contentElement.classList.remove("closed");
			this._titleTextElement.classList.add("opened");
			this._toggleAccordionElement.classList.add("opened");
			this._toggleAccordionElement.textContent = this._closeAccordionText;
			this._accordionOpened = true;
		}
	}

	_render() {
		if (this.hasAttribute("open-text")) {
			this._openAccordionText = this.getAttribute("open-text");
		}
		if (this.hasAttribute("close-text")) {
			this._closeAccordionText = this.getAttribute("close-text");
		}
		this._toggleAccordionElement.innerHTML = "";
		this._toggleAccordionElement.appendChild(document.createTextNode(this._openAccordionText));

		if (this.hasAttribute("icon")) {
			this._imageElement.style.display = "flex";
			if (isValidUrl(this.getAttribute("icon"))) {
				this._imageElement.style.backgroundImage = `url(${this.getAttribute("icon")})`;
				this._imageElement.classList.add("is-image");
			} else {
				this._imageElement.innerHTML = this.getAttribute("icon").substring(0, 2);
				this._imageElement.classList.add("is-letters");
			}
		}
	}
}

const template$l = "<div id=\"menu-panel\">\r\n  <div class=\"toggle\" id=\"close-toggle\">\r\n    <svg id=\"close-svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\r\n      <path d=\"M3 3l26 26M29 3l-26 26\"></path>\r\n    </svg>\r\n  </div>\r\n  <slot></slot>\r\n</div>\r\n<div id=\"backdrop\"></div>\r\n<div class=\"toggle\">\r\n  <svg id=\"open-svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 38 32\">\r\n    <path d=\"M2 2h32M2 16h32M2 30h32\"></path>\r\n  </svg>\r\n</div>";

const styles$m = ".toggle{box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:max-content;height:max-content;cursor:pointer;transition:all .3s;background:transparent;border-radius:.5em;padding:.5em;box-shadow:none}#open-svg{width:1.5rem;height:1.25rem}#close-svg{width:1.25rem;height:1.25rem}svg path{stroke:var(--ako-neutral-color-600, #959595);fill:var(--ako-neutral-color-600, #959595);stroke-width:4px;stroke-linecap:round;transition:all .3s}.toggle:hover svg path{opacity:.7}#close-toggle{position:absolute;right:.75rem;top:.5rem}#menu-panel{display:block;position:fixed;top:0;height:100vh;width:18.75rem;max-width:100vw;right:-18.75rem;z-index:99;transition:inset .3s,box-shadow .3s;box-shadow:none;background-color:#fff}:host([open]) #menu-panel{right:0;pointer-events:unset;box-shadow:-1.25rem 0 1.875rem #0000001a}#backdrop{pointer-events:none;background:transparent;position:fixed;inset:0;z-index:98}:host([open]) #backdrop{pointer-events:all;display:block}\n";

/**
 * Allakando Drawer
 * A drawer element that when clicked opens up a drawer area.
 * @element ako-drawer
 *
 * @attr {boolean} open - If set the drawer menu will open.
 *
 */
class AllakandoDrawer extends HTMLElement {
	static get elementName() {
		return "ako-drawer"
	}

	static get observedAttributes() {
		return ["open"]
	}

	constructor() {
		super();
		if (!AllakandoDrawer._template) {
			const templateElement = document.createElement("template");
			templateElement.innerHTML = `<style>${styles$m}</style>${template$l}`;
			AllakandoDrawer._template = templateElement;
			AllakandoDrawer._elementName = "ako-drawer";
		}
		this.attachShadow({ mode: "open" }).appendChild(AllakandoDrawer._template.content.cloneNode(true));
		this.shadowRoot.querySelectorAll(".toggle").forEach(element => element.addEventListener("click", () => this.toggleAttribute("open")));
		this.shadowRoot.querySelector("#backdrop").addEventListener("click", () => this.toggleAttribute("open"));
	}

	attributeChangedCallback() {
		this._render();
	}

	_render() {
		if (this.hasAttribute("open")) {
			document.body.style.overflow = "hidden";
		} else {
			document.body.style.removeProperty("overflow");
		}
	}
}

const template$k = "<div id=\"badge\">\r\n    <div id=\"badge-value\">\r\n        <slot></slot>\r\n    </div>\r\n</div>";

const styles$l = "#badge{font-family:var(--ako-font-family-body, trade-gothic-next-soft-round, sans-serif);font-style:normal;font-stretch:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ako-body-text-color, #777777);font-weight:700;font-size:1rem;line-height:1.25rem;color:var(--ako-cta-text-color, #868686)}@media screen and (max-width: 768px){#badge{font-size:.875rem;line-height:1.125rem}}#badge{display:flex;position:absolute;box-sizing:border-box;align-items:center;justify-content:center;top:0;right:0}#badge-value{display:flex;justify-content:center;align-items:center;position:absolute;width:max-content;min-width:1rem;min-height:1rem;border-radius:4rem;padding:.06rem .25rem .15rem;color:var(--ako-with-color-over-500, #ffffff);background-color:var(--ako-error-color-800, #f6411a);z-index:1}:host([inline]) #badge{left:auto;bottom:auto;display:inline-block;position:static}:host([inline]) #badge-value{position:initial}:host([shape=square]) #badge-value{border-radius:.125em}:host([type=primary]) #badge-value{background-color:var(--ako-primary-color-800, #a0ce47)}:host([type=neutral]) #badge-value{background-color:var(--ako-neutral-color-800, #777777)}:host([type=warning]) #badge-value{background-color:var(--ako-warning-color-800, #f6c21a)}:host([type=error]) #badge-value{background-color:var(--ako-error-color-1000, #e62900)}\n";

/**
 * Allakando Badge
 * A badge icon that will contain some values and will be positioned at top right corner of the element it will be wrapped to.
 * @element ako-badge
 * @attr {"round"|"square"} shape - To determines the shape of the badge element.
 * @attr {any} inline - To update the display property as inline or flex. If it is true then the display will be inline or flex.
 * @attr {"primary"|"neutral"|"warning"|"error"} type - To change the background co