UNPKG

@allakando/allakando-web-ui

Version:

Allakando's web component library

10 lines • 229 kB
1
2
3
4
5
6
7
8
9
10
/** @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/ * ---------------------------------------------------------- */ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).AllakandoWebUI={})}(this,(function(t){"use strict";(()=>{try{global.HTMLElement||(global.HTMLElement=class{})}catch(t){}})();class e extends HTMLElement{static get elementName(){return"ako-button"}static get observedAttributes(){return["disabled","akostyle","icon","size","type","icon-placement"]}constructor(){if(super(),!e._template){const t=document.createElement("template");t.innerHTML='<style>: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</style><button>\r\n <div id="container">\r\n <slot></slot>\r\n <img alt="Icon" id="icon" />\r\n </div>\r\n</button>',e._template=t,e._elementName="ako-button"}this.attachShadow({mode:"open"}).appendChild(e._template.content.cloneNode(!0)),this._mainContainer=this.shadowRoot.querySelector("#container"),this._iconElement=this.shadowRoot.querySelector("#icon"),this._slotElement=this.shadowRoot.querySelector("slot"),this._buttonElement=this.shadowRoot.querySelector("button"),this._render()}attributeChangedCallback(t,e,o){"icon-placement"===t&&("before"===o.toLowerCase()?(this._mainContainer.appendChild(this._iconElement),this._mainContainer.appendChild(this._slotElement)):(this._mainContainer.appendChild(this._slotElement),this._mainContainer.appendChild(this._iconElement))),this._render()}click(){this._buttonElement.click()}_render(){this._iconElement.style.removeProperty("display"),this.hasAttribute("icon")?this._iconElement.setAttribute("src",this.getAttribute("icon")):this._iconElement.style.display="none",this._buttonElement.classList.remove("disabled"),this._buttonElement.removeAttribute("disabled"),this.hasAttribute("disabled")&&(this._buttonElement.classList.add("disabled"),this._buttonElement.setAttribute("disabled",!0)),this._buttonElement.removeAttribute("style"),this.hasAttribute("akostyle")&&(this._buttonElement.style=this.getAttribute("akostyle"))}}class o extends HTMLElement{static get elementName(){return"ako-spinner"}static get observedAttributes(){return["size","type","percent","usebackground","uselight"]}constructor(){if(super(),!o._template){const t=document.createElement("template");t.innerHTML='<style>: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</style><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>',o._template=t,o._elementName="ako-spinner"}this.attachShadow({mode:"open"}).appendChild(o._template.content.cloneNode(!0)),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(t,e,o){"size"===t&&(null===o?(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")):(this._spinnerCircle.style.minWidth=o,this._spinnerCircle.style.width=o,this._spinnerCircle.style.minHeight=o,this._spinnerCircle.style.height=o,this._spinnerWheel.style.height=o,this._spinnerWheel.style.minHeight=o,this._spinnerWheel.style.maxHeight=o,this._spinnerWheel.style.width=o,this._spinnerWheel.style.minWidth=o,this._spinnerWheel.style.maxWidth=o)),"percent"===t&&(null===o?(this._spinningCircleElement.style.removeProperty("stroke-dashoffset"),this._spinningCircleElement.style.removeProperty("animation"),this._spinnerCircle.style.removeProperty("animation")):(this._spinningCircleElement.style.strokeDashoffset=100-parseInt(o),this._spinningCircleElement.style.animation="none",this._spinnerCircle.style.animation="none"))}}const r=t=>{try{return/(\/[^"']*\.(?:png|jpg|jpeg|gif|webp|svg))/gm.test(String(t))||Boolean(new URL(t))}catch(e){return!1}};class i extends HTMLElement{static get elementName(){return"ako-dialog"}static get observedAttributes(){return["noheader","nofooter","noclose","modality","headertitle","headersubtitle","icon","bgcolor","scrollable"]}constructor(){if(super(),!i._template){const t=document.createElement("template");t.innerHTML='<style>#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</style><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',i._template=t,i._elementName="ako-dialog"}this.attachShadow({mode:"open"}).appendChild(i._template.content.cloneNode(!0)),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"),this._closeIconElement.addEventListener("click",this.close.bind(this)),this._hasMounted=!1,this._mainElement.addEventListener("click",(t=>{"disabled"!==this.getAttribute("modality")&&t.composedPath()[0]===this._mainElement&&this.close(t,"close")})),this._contentElement.addEventListener("scroll",(()=>{this._contentElement.scrollTop>20?(this._windowElement.classList.add("isScrolled"),this._headerIconElement.setAttribute("hidden","hidden")):(this._windowElement.classList.remove("isScrolled"),this.hasAttribute("icon")&&this._headerIconElement.removeAttribute("hidden"))}))}connectedCallback(){this._hasMounted||(this._hasMounted=!0,requestAnimationFrame((()=>{this._animate(!1)}))),document.body.style.overflow="hidden"}disconnectedCallback(){0===document.querySelectorAll("ako-dialog").length&&(document.body.style.overflow=null)}attributeChangedCallback(t,e,o){"headertitle"===t&&this._updateHeaderText(o),"headersubtitle"===t&&this._updateHeaderSubtext(o),"icon"===t&&this._updateHeaderIcon(o)}_updateHeaderText(t){this._updateHeaderElement(t,this._headerTextElement),this._updateHeaderElement(t,this._contentHeaderTitle)}_updateHeaderSubtext(t){this._updateHeaderElement(t,this._contentHeaderSubtitle)}_updateHeaderElement(t,e){e.innerHTML="",e.style.removeProperty("display"),t&&(e.appendChild(document.createTextNode(t)),e.style.display="initial")}_updateHeaderIcon(t){this._headerIconElement.style.display="none",this._headerInitialsIconElement.innerHTML="",this._headerInitialsIconElement.style.display="none",t&&(r(t)?(this._headerIconElement.setAttribute("src",t),this._headerIconElement.style.display="block"):(this._headerInitialsIconElement.appendChild(document.createTextNode(t.substring(0,1).toUpperCase())),this._headerInitialsIconElement.style.display="flex"))}_animate(t){let e;const o=new Promise((t=>e=t));t&&(this._windowElement.style.animationDirection="reverse"),this._windowElement.style.animationTimingFunction="ease-in-out",this._windowElement.style.animationName="main-animation";const r=()=>{this._windowElement.style.removeProperty("animation-name"),this._windowElement.style.removeProperty("animation-direction"),this._windowElement.removeEventListener("animationend",r),e()};return this._windowElement.addEventListener("animationend",r),o}close(t){let e="";if(t&&t.preventDefault(),this._animate(!0).then((()=>this.remove())),t){const o=t.composedPath();e=o.includes(this._closeIconElement)?"X_ICON":o.includes(this._mainElement)&&!o.includes(this._windowElement)?"BACKDROP":o.includes(this._windowElement)&&o.some((t=>t.tagName.toLowerCase().includes("button")))?"BUTTON":"EXTERNAL"}this.dispatchEvent(new CustomEvent("close",{detail:{triggeredBy:e}}))}}class n extends HTMLElement{static get elementName(){return"ako-accordion"}static get observedAttributes(){return["headertitle","icon","open-text","close-text"]}constructor(){if(super(),!n._template){const t=document.createElement("template");t.innerHTML='<style>#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</style><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',n._template=t}this.attachShadow({mode:"open"}).appendChild(n._template.content.cloneNode(!0)),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=!1,this._openAccordionText="Visa",this._closeAccordionText="Dölj",this._toggleAccordionElement.addEventListener("click",this.toggle.bind(this)),this._render()}attributeChangedCallback(t,e,o){"headertitle"===t&&this._updateHeaderText(o),this._render()}_updateHeaderText(t){const e=this._titleTextElement;e.innerHTML="",e.style.removeProperty("display"),t&&(e.appendChild(document.createTextNode(t)),e.style.display="initial")}toggle(t){t&&t.preventDefault(),this._accordionOpened?(this._contentElement.classList.add("closed"),this._titleTextElement.classList.remove("opened"),this._toggleAccordionElement.classList.remove("opened"),this._toggleAccordionElement.textContent=this._openAccordionText,this._accordionOpened=!1):(this._contentElement.classList.remove("closed"),this._titleTextElement.classList.add("opened"),this._toggleAccordionElement.classList.add("opened"),this._toggleAccordionElement.textContent=this._closeAccordionText,this._accordionOpened=!0)}_render(){this.hasAttribute("open-text")&&(this._openAccordionText=this.getAttribute("open-text")),this.hasAttribute("close-text")&&(this._closeAccordionText=this.getAttribute("close-text")),this._toggleAccordionElement.innerHTML="",this._toggleAccordionElement.appendChild(document.createTextNode(this._openAccordionText)),this.hasAttribute("icon")&&(this._imageElement.style.display="flex",r(this.getAttribute("icon"))?(this._imageElement.style.backgroundImage=`url(${this.getAttribute("icon")})`,this._imageElement.classList.add("is-image")):(this._imageElement.innerHTML=this.getAttribute("icon").substring(0,2),this._imageElement.classList.add("is-letters")))}}class a extends HTMLElement{static get elementName(){return"ako-drawer"}static get observedAttributes(){return["open"]}constructor(){if(super(),!a._template){const t=document.createElement("template");t.innerHTML='<style>.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</style><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>',a._template=t,a._elementName="ako-drawer"}this.attachShadow({mode:"open"}).appendChild(a._template.content.cloneNode(!0)),this.shadowRoot.querySelectorAll(".toggle").forEach((t=>t.addEventListener("click",(()=>this.toggleAttribute("open"))))),this.shadowRoot.querySelector("#backdrop").addEventListener("click",(()=>this.toggleAttribute("open")))}attributeChangedCallback(){this._render()}_render(){this.hasAttribute("open")?document.body.style.overflow="hidden":document.body.style.removeProperty("overflow")}}class s extends HTMLElement{static get elementName(){return"ako-badge"}static get observedAttributes(){return["shape","type","inline","offsetv","offseth"]}constructor(){if(super(),!s._template){const t=document.createElement("template");t.innerHTML='<style>#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</style><div id="badge">\r\n <div id="badge-value">\r\n <slot></slot>\r\n </div>\r\n</div>',s._template=t,s._elementName="ako-badge"}this.attachShadow({mode:"open"}).appendChild(s._template.content.cloneNode(!0)),this._badgeElement=this.shadowRoot.querySelector("#badge")}attributeChangedCallback(){this._render()}_render(){if(this.hasAttribute("offsetv")){const t=this.getAttribute("offsetv");this._badgeElement.style.top=t}else this._badgeElement.style.removeProperty("top");if(this.hasAttribute("offseth")){const t=this.getAttribute("offseth");this._badgeElement.style.right=t}else this._badgeElement.style.removeProperty("right")}}class l extends HTMLElement{static get elementName(){return"ako-notification"}static get observedAttributes(){return["image","headertitle","message","noclose"]}constructor(){if(super(),!l._template){const t=document.createElement("template");t.innerHTML='<style>#card-image-placeholder{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){#card-image-placeholder{font-size:1.5rem;line-height:2rem}}#notification-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:1.5rem;line-height:2rem;color:var(--ako-header-text-color, #535353)}@media screen and (max-width: 768px){#notification-title{font-size:1.25rem;line-height:1.5rem}}#notification-message{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){#notification-message{font-size:1rem;line-height:1.5rem}}#notification{display:flex;flex-direction:row;text-align:left;justify-content:left}#notification-image{display:none;min-width:6.75rem;min-height:6.75rem;width:6.75rem;height:6.75rem;align-self:start;border-radius:50%;color:var(--ako-with-color-over-500, #ffffff)}#card-image-placeholder{display:flex;color:var(--ako-with-color-over-500, #ffffff);background:var(--ako-primary-color-900, #96c933);align-items:center;justify-content:center;min-width:6.75rem;min-height:6.75rem;width:6.75rem;height:6.75rem;border-radius:50%}:host(:not([noclose])) #close-icon{display:flex;justify-content:center;align-items:center;width:2rem;height:2rem;box-sizing:border-box;position:absolute;border:2px solid var(--ako-neutral-color-900, #686868);background:#ffffff;border-radius:50%;cursor:pointer;z-index:1}:host(:not([noclose])) #close-icon svg{fill:var(--ako-neutral-color-900, #686868);stroke:var(--ako-neutral-color-900, #686868);width:.75rem;height:auto;stroke-width:1.4}#content{width:100%;display:flex;align-self:center;flex-direction:column;margin-left:1.75rem;overflow:hidden}#notification-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#notification-message{margin-top:.5rem}\n</style><div id="notification">\r\n <div id="close-icon">\r\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">\r\n <path d="M8.412 6.883L14.588.707a1 1 0 0 1 1.414 0l.116.115a1 1 0 0 1 0 1.415L9.942 8.412l6.176 6.176a1 1 0 0 1 0 1.414l-.116.116a1 1 0 0 1-1.414 0L8.412 9.942l-6.175 6.176a1 1 0 0 1-1.415 0l-.115-.116a1 1 0 0 1 0-1.414l6.176-6.176L.707 2.237a1 1 0 0 1 0-1.415L.822.707a1 1 0 0 1 1.415 0l6.175 6.176z"/>\r\n </svg>\r\n </div>\r\n <div id="card-image-placeholder"></div>\r\n <img id="notification-image" alt="Image"></img>\r\n <div id="content">\r\n <div id="notification-title">\r\n <slot name="title"></slot>\r\n </div>\r\n <div id="notification-message">\r\n <slot name="message"></slot>\r\n </div>\r\n </div>\r\n</div>',l._template=t,l._elementName="ako-notification"}this.attachShadow({mode:"open"}).appendChild(l._template.content.cloneNode(!0)),this._notificationElement=this.shadowRoot.querySelector("#notification"),this._closeIconElement=this.shadowRoot.querySelector("#close-icon"),this._imageElement=this.shadowRoot.querySelector("#notification-image"),this._imagePlaceholderElement=this.shadowRoot.querySelector("#card-image-placeholder"),this._notificationTitleElement=this.shadowRoot.querySelector("#notification-title"),this._notificationMessageElement=this.shadowRoot.querySelector("#notification-message"),this._closeIconElement.addEventListener("click",this._closeClickHandler.bind(this))}attributeChangedCallback(t,e,o){"image"===t&&this._updateImage(o),"headertitle"===t&&this._updateTitleText(o),"message"===t&&this._updateMesageText(o)}_updateTitleText(t){const e=this._notificationTitleElement;e.innerHTML="",t&&e.appendChild(document.createTextNode(t))}_updateMesageText(t){const e=this._notificationMessageElement;e.innerHTML="",t&&e.appendChild(document.createTextNode(t))}_closeClickHandler(){this._notificationElement&&(this._notificationElement.remove(),this.dispatchEvent(new CustomEvent("close")))}_updateImage(t){this._imageElement.style.removeProperty("display"),this._imagePlaceholderElement.style.display="none",this._imagePlaceholderElement.innerHTML="",t?r(t)?(this._imageElement.setAttribute("src",t),this._imageElement.style.display="block"):(this._imagePlaceholderElement.appendChild(document.createTextNode(t.substring(0,2).toUpperCase())),this._imagePlaceholderElement.style.removeProperty("display")):this._imagePlaceholderElement.style.removeProperty("display")}}class d extends HTMLElement{static get elementName(){return"ako-tabbutton"}static get observedAttributes(){return["icon","headertitle","active"]}constructor(){if(super(),!d._template){const t=document.createElement("template");t.innerHTML='<style>#tab-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:2.5rem;line-height:3rem;color:var(--ako-header-text-color, #535353)}@media screen and (max-width: 768px){#tab-title{font-size:2rem;line-height:2.5rem}}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){button{font-size:.875rem;line-height:1.125rem}}:host(:not([headertitle])) #tab-title{display:none}:host(:not([icon])) #icon{display:none}button{--color-dark: var(--ako-neutral-color-1000, #535353);--color-standard: var(--ako-neutral-color-900, #686868);--color-light: var(--ako-neutral-color-100, #ececec);--with-color: var(--ako-with-color-over-500, #ffffff);color:var(--color-standard);background:var(--color-light);box-shadow:none;cursor:pointer;width:100%;height:6.75rem;min-height:6.75rem;border:none;border-radius:var(--ako-border-radius-small, .2rem);outline:none}#tab{display:block;align-items:center;justify-content:center;flex-direction:column}#tab-title{display:block;margin-bottom:.5rem;color:var(--ako-neutral-color-900, #686868);justify-content:center;height:60%;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#icon{height:2.375rem;min-height:2.375rem;max-width:2.375rem;margin-bottom:.25rem;filter:brightness(.75)}#subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) button{--color-dark: var(--ako-primary-color-900, #96c933);--color-standard: var(--ako-primary-color-800, #a0ce47);--color-light: var(