UNPKG

@allakando/allakando-web-ui

Version:

Allakando's web component library

184 lines • 179 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
import{s as Y}from"./chunk-HJCNT6QR-21c0b054.js";import"./chunk-FJPRWHXQ-ae58696e.js";import"./DialogManager-abca015e.js";import{i as D,d as G}from"./helper-774a7e1d.js";import{h as P,i as Q,j as X}from"./inline-622e1189.js";import"./index-356e4a49.js";const K=`<button>\r <div id="container">\r <slot></slot>\r <img alt="Icon" id="icon" />\r </div>\r </button>`,J=`: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}} `;class h extends HTMLElement{static get elementName(){return"ako-button"}static get observedAttributes(){return["disabled","akostyle","icon","size","type","icon-placement"]}constructor(){if(super(),!h._template){const t=document.createElement("template");t.innerHTML=`<style>${J}</style>${K}`,h._template=t,h._elementName="ako-button"}this.attachShadow({mode:"open"}).appendChild(h._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,i){t==="icon-placement"&&(i.toLowerCase()==="before"?(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"))}}const V=`<div>\r <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"\r preserveAspectRatio="xMaxYMax" class="spinner-wheel">\r <g>\r <rect x="46" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s"\r repeatCount="indefinite"></animate>\r </rect>\r </g>\r <g>\r <rect x="46" y="2" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s"\r repeatCount="indefinite"></animate>\r </rect>\r </g>\r <g>\r <rect x="46" y="2" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite">\r </animate>\r </rect>\r </g>\r <g>\r <rect x="46" y="2" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s"\r repeatCount="indefinite"></animate>\r </rect>\r </g>\r <g>\r <rect x="46" y="2" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s"\r repeatCount="indefinite"></animate>\r </rect>\r </g>\r <g>\r <rect x="46" y="2" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite">\r </animate>\r </rect>\r </g>\r <g>\r <rect x="46" y="2" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s"\r repeatCount="indefinite"></animate>\r </rect>\r </g>\r <g>\r <rect x="46" y="2" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s"\r repeatCount="indefinite"></animate>\r </rect>\r </g>\r <g>\r <rect x="46" y="2" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite">\r </animate>\r </rect>\r </g>\r <g>\r <rect x="46" y="2" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s"\r repeatCount="indefinite"></animate>\r </rect>\r </g>\r <g>\r <rect x="46" y="2" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s"\r repeatCount="indefinite"></animate>\r </rect>\r </g>\r <g>\r <rect x="46" y="2" y="2" rx="6" ry="3" class="spinner-blade">\r <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite">\r </animate>\r </rect>\r </g>\r </svg>\r <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="spinner-circle">\r <circle id="background-circle" pathLength="100" cx="50" cy="50" r="43"/>\r <circle id="spinning-circle" pathLength="100" cx="50" cy="50" r="43"/>\r </svg>\r </div>`,tt=`: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)}} `;class p extends HTMLElement{static get elementName(){return"ako-spinner"}static get observedAttributes(){return["size","type","percent","usebackground","uselight"]}constructor(){if(super(),!p._template){const t=document.createElement("template");t.innerHTML=`<style>${tt}</style>${V}`,p._template=t,p._elementName="ako-spinner"}this.attachShadow({mode:"open"}).appendChild(p._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,i){t==="size"&&(i===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")):(this._spinnerCircle.style.minWidth=i,this._spinnerCircle.style.width=i,this._spinnerCircle.style.minHeight=i,this._spinnerCircle.style.height=i,this._spinnerWheel.style.height=i,this._spinnerWheel.style.minHeight=i,this._spinnerWheel.style.maxHeight=i,this._spinnerWheel.style.width=i,this._spinnerWheel.style.minWidth=i,this._spinnerWheel.style.maxWidth=i)),t==="percent"&&(i===null?(this._spinningCircleElement.style.removeProperty("stroke-dashoffset"),this._spinningCircleElement.style.removeProperty("animation"),this._spinnerCircle.style.removeProperty("animation")):(this._spinningCircleElement.style.strokeDashoffset=100-parseInt(i),this._spinningCircleElement.style.animation="none",this._spinnerCircle.style.animation="none"))}}const et=`<div id="backdrop"></div> <div id="main"> <div id="window"> <div id="header-section"> <div id="header"> <div id="header-icon-container"> <div id="header-initials-icon" hidden></div> <img id="header-icon" alt="" src="" width="40" height="40" hidden /> </div> <div id="header-title-container"> <span id="header-title"></span> </div> <slot name="header"></slot> </div> <div id="close-icon"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="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" fill="#868686" /> </svg> </div> </div> <div id="content"> <div id="content-header"> <span id="content-header-title"></span> <span id="content-header-subtitle"></span> </div> <div id="body"> <slot></slot> </div> </div> <div id="footer"> <slot name="footer"></slot> </div> </div> </div> `,it=`#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;top:0;right:0;bottom:0;left: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;-webkit-user-select:none;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}} `;class g extends HTMLElement{static get elementName(){return"ako-dialog"}static get observedAttributes(){return["noheader","nofooter","noclose","modality","headertitle","headersubtitle","icon","bgcolor","scrollable"]}constructor(){if(super(),!g._template){const t=document.createElement("template");t.innerHTML=`<style>${it}</style>${et}`,g._template=t,g._elementName="ako-dialog"}this.attachShadow({mode:"open"}).appendChild(g._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=>{this.getAttribute("modality")!=="disabled"&&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(){document.querySelectorAll("ako-dialog").length===0&&(document.body.style.overflow=null)}attributeChangedCallback(t,e,i){t==="headertitle"&&this._updateHeaderText(i),t==="headersubtitle"&&this._updateHeaderSubtext(i),t==="icon"&&this._updateHeaderIcon(i)}_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&&(D(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 i=new Promise(r=>e=r);t&&(this._windowElement.style.animationDirection="reverse"),this._windowElement.style.animationTimingFunction="ease-in-out",this._windowElement.style.animationName="main-animation";const o=()=>{this._windowElement.style.removeProperty("animation-name"),this._windowElement.style.removeProperty("animation-direction"),this._windowElement.removeEventListener("animationend",o),e()};return this._windowElement.addEventListener("animationend",o),i}close(t){let e="";if(t&&t.preventDefault(),this._animate(!0).then(()=>this.remove()),t){const i=t.composedPath();i.includes(this._closeIconElement)?e="X_ICON":i.includes(this._mainElement)&&!i.includes(this._windowElement)?e="BACKDROP":i.includes(this._windowElement)&&i.some(o=>o.tagName.toLowerCase().includes("button"))?e="BUTTON":e="EXTERNAL"}this.dispatchEvent(new CustomEvent("close",{detail:{triggeredBy:e}}))}}const ot=`<div id="accordion-wrapper"> <div id="accordion-header"> <div id="image-title-wrap"> <div id="accordion-image"></div> <div id="accordion-title"></div> </div> <span id="toggle-accordion"></span> </div> <div id="accordion-content" class="closed"> <slot></slot> </div> </div> `,rt=`#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}} `;class j extends HTMLElement{static get elementName(){return"ako-accordion"}static get observedAttributes(){return["headertitle","icon","open-text","close-text"]}constructor(){if(super(),!j._template){const t=document.createElement("template");t.innerHTML=`<style>${rt}</style>${ot}`,j._template=t}this.attachShadow({mode:"open"}).appendChild(j._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,i){t==="headertitle"&&this._updateHeaderText(i),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",D(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")))}}const nt=`<div id="menu-panel">\r <div class="toggle" id="close-toggle">\r <svg id="close-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">\r <path d="M3 3l26 26M29 3l-26 26"></path>\r </svg>\r </div>\r <slot></slot>\r </div>\r <div id="backdrop"></div>\r <div class="toggle">\r <svg id="open-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 32">\r <path d="M2 2h32M2 16h32M2 30h32"></path>\r </svg>\r </div>`,at=`.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;top:0;right:0;bottom:0;left:0;z-index:98}:host([open]) #backdrop{pointer-events:all;display:block} `;class u extends HTMLElement{static get elementName(){return"ako-drawer"}static get observedAttributes(){return["open"]}constructor(){if(super(),!u._template){const t=document.createElement("template");t.innerHTML=`<style>${at}</style>${nt}`,u._template=t,u._elementName="ako-drawer"}this.attachShadow({mode:"open"}).appendChild(u._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")}}const st=`<div id="badge">\r <div id="badge-value">\r <slot></slot>\r </div>\r </div>`,lt=`#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)} `;class f extends HTMLElement{static get elementName(){return"ako-badge"}static get observedAttributes(){return["shape","type","inline","offsetv","offseth"]}constructor(){if(super(),!f._template){const t=document.createElement("template");t.innerHTML=`<style>${lt}</style>${st}`,f._template=t,f._elementName="ako-badge"}this.attachShadow({mode:"open"}).appendChild(f._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")}}const dt=`<div id="notification">\r <div id="close-icon">\r <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">\r <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 </svg>\r </div>\r <div id="card-image-placeholder"></div>\r <img id="notification-image" alt="Image"></img>\r <div id="content">\r <div id="notification-title">\r <slot name="title"></slot>\r </div>\r <div id="notification-message">\r <slot name="message"></slot>\r </div>\r </div>\r </div>`,ct=`#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} `;class b extends HTMLElement{static get elementName(){return"ako-notification"}static get observedAttributes(){return["image","headertitle","message","noclose"]}constructor(){if(super(),!b._template){const t=document.createElement("template");t.innerHTML=`<style>${ct}</style>${dt}`,b._template=t,b._elementName="ako-notification"}this.attachShadow({mode:"open"}).appendChild(b._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,i){t==="image"&&this._updateImage(i),t==="headertitle"&&this._updateTitleText(i),t==="message"&&this._updateMesageText(i)}_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?D(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")}}const mt=`<button>\r <div id="tab">\r <img alt="Icon" id="icon"></img>\r <div id="tab-title"></div>\r <div id="subtitle">\r <slot></slot>\r </div>\r </div>\r </button>`,ht=`#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(--ako-primary-color-400, #cbe499);--with-color: var(--ako-with-color-over-500, #ffffff);color:var(--with-color)!important;background:linear-gradient(to bottom,var(--color-light),var(--color-dark));box-shadow:0 1.8125rem 1.25rem -1.25rem var(--color-standard);border-radius:var(--ako-border-radius-small, .2rem)}:host([active]) button:hover,:host([active]) button:active{background-color:var(--color-light)}:host([active]) button #icon{filter:brightness(1.9)}:host([active]) button #tab-title{color:var(--with-color)} `;class y extends HTMLElement{static get elementName(){return"ako-tabbutton"}static get observedAttributes(){return["ico