@startnext/chrome 0.2.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +223 -26
  2. package/dist/components/base/BaseComponent.d.ts +2 -0
  3. package/dist/components/base/BaseComponent.d.ts.map +1 -1
  4. package/dist/components/base/icons.d.ts.map +1 -1
  5. package/dist/components/footer/StartnextFooter.d.ts +5 -0
  6. package/dist/components/footer/StartnextFooter.d.ts.map +1 -1
  7. package/dist/components/header/StartnextHeader.d.ts.map +1 -1
  8. package/dist/components/header/header.css.d.ts +1 -1
  9. package/dist/components/header/header.css.d.ts.map +1 -1
  10. package/dist/components/header/header.template.d.ts +4 -0
  11. package/dist/components/header/header.template.d.ts.map +1 -1
  12. package/dist/index.d.ts +5 -0
  13. package/dist/index.d.ts.map +1 -1
  14. package/dist/index.js +2 -2
  15. package/dist/index.umd.js +2 -2
  16. package/dist/render.d.ts +52 -0
  17. package/dist/render.d.ts.map +1 -0
  18. package/dist/render.js +7 -0
  19. package/dist/types/index.d.ts +4 -0
  20. package/dist/types/index.d.ts.map +1 -1
  21. package/package.json +11 -1
package/README.md CHANGED
@@ -14,22 +14,37 @@ pnpm add @startnext/chrome
14
14
 
15
15
  ## Quick Start
16
16
 
17
- ### Modern JavaScript (React, Vue, etc.)
17
+ Es gibt zwei Integrationsmodi:
18
+
19
+ 1. **Client-Side Rendering** — Web Component fetcht Daten selbst (einfach, kein Server noetig)
20
+ 2. **Server-Side Rendering** — Server holt fertig gerendertes HTML von der API (sofort sichtbar ohne JS, bessere Performance + SEO)
21
+
22
+ ### Client-Side: Via CDN (PHP, Vanilla HTML)
23
+ ```html
24
+ <script type="module" src="https://unpkg.com/@startnext/chrome@latest/dist/index.js"></script>
25
+
26
+ <startnext-header api-url="https://scs-api.vercel.app"></startnext-header>
27
+ <startnext-footer api-url="https://scs-api.vercel.app"></startnext-footer>
28
+ ```
29
+
30
+ ### Client-Side: Modern JavaScript (React, Vue, etc.)
18
31
  ```javascript
19
32
  import '@startnext/chrome';
20
33
  ```
21
34
 
22
35
  ```html
23
- <startnext-header></startnext-header>
24
- <startnext-footer></startnext-footer>
36
+ <startnext-header api-url="https://scs-api.vercel.app"></startnext-header>
37
+ <startnext-footer api-url="https://scs-api.vercel.app"></startnext-footer>
25
38
  ```
26
39
 
27
- ### Via CDN (PHP, Vanilla HTML)
28
- ```html
29
- <script type="module" src="https://unpkg.com/@startnext/chrome@latest/dist/index.js"></script>
40
+ ### Server-Side Rendering (empfohlen)
30
41
 
31
- <startnext-header></startnext-header>
32
- <startnext-footer></startnext-footer>
42
+ SSR-HTML von der API holen und direkt einbinden. Die Web Component JS hydriert anschliessend (haengt Events an, statt DOM neu zu rendern). Siehe Abschnitt [SSR mit React / Next.js](#ssr-mit-react--nextjs-app-router) oder [SSR — PHP / ESI](#ssr--php-beispiel) weiter unten.
43
+
44
+ ```bash
45
+ # SSR-HTML holen (z.B. serverseitig per fetch, file_get_contents, ESI)
46
+ curl "https://scs-api.vercel.app/api/header/render?lang=de&large-animation"
47
+ curl "https://scs-api.vercel.app/api/footer/render?lang=de"
33
48
  ```
34
49
 
35
50
  ## API
@@ -49,6 +64,11 @@ import '@startnext/chrome';
49
64
  | `color-mode` | `'light' \| 'dark'` | auto | Farbmodus. Ohne Attribut: Header scannt `<html>` nach Klasse `dark`/`light`. Ohne Klasse: Default `dark` (dunkle Seite, heller Header). Toggle-Button wechselt `<html>`-Klasse und Header-Darstellung |
50
65
  | `hide-color-mode` | `boolean` | `false` | Versteckt den Color-Mode Toggle-Button |
51
66
  | `hide-lang` | `boolean` | `false` | Versteckt den Language-Switcher |
67
+ | `hide-login` | `boolean` | `false` | Versteckt den Login/Avatar-Button |
68
+ | `show-back-link` | `boolean` | `false` | Zeigt einen "Zurueck zu Startnext"-Link (Text kommt von der API) |
69
+ | `back-url` | `string` | - | Ueberschreibt die Back-Link-URL |
70
+ | `back-label` | `string` | - | Ueberschreibt den Back-Link-Text |
71
+ | `api-url` | `string` | - | API-Endpoint-URL fuer Live-Daten aus Notion |
52
72
 
53
73
  **Events:**
54
74
 
@@ -94,6 +114,17 @@ import '@startnext/chrome';
94
114
  </html>
95
115
  ```
96
116
 
117
+ ```html
118
+ <!-- Embedded / Microservice-Modus: Login ausblenden, Back-Link anzeigen -->
119
+ <startnext-header
120
+ hide-login
121
+ show-back-link
122
+ back-url="https://www.startnext.com"
123
+ back-label="Zurueck zu Startnext"
124
+ api-url="https://scs-api.vercel.app"
125
+ ></startnext-header>
126
+ ```
127
+
97
128
  ```javascript
98
129
  const header = document.querySelector('startnext-header');
99
130
 
@@ -103,8 +134,9 @@ header.addEventListener('navigation-click', (e) => {
103
134
  });
104
135
 
105
136
  header.addEventListener('language-change', (e) => {
106
- // Sprache auch im Footer synchronisieren
107
- document.querySelector('startnext-footer').setAttribute('lang', e.detail.language);
137
+ // Footer synchronisiert Sprache automatisch (lang-sync ist default true).
138
+ // Manuelle Synchronisation nur noetig wenn lang-sync="false" gesetzt ist:
139
+ // document.querySelector('startnext-footer').setAttribute('lang', e.detail.language);
108
140
  });
109
141
 
110
142
  header.addEventListener('logout', () => {
@@ -124,6 +156,8 @@ header.addEventListener('color-mode-change', (e) => {
124
156
  | Attribute | Type | Default | Description |
125
157
  |---|---|---|---|
126
158
  | `lang` | `string` | `'de'` | Sprache (`'de'`, `'en'`) |
159
+ | `api-url` | `string` | - | API-Endpoint-URL fuer Live-Daten |
160
+ | `lang-sync` | `boolean` | `true` | Synchronisiert Sprache automatisch wenn der Header ein `language-change` Event emittiert. Mit `lang-sync="false"` deaktivieren |
127
161
 
128
162
  **Events:**
129
163
 
@@ -166,11 +200,168 @@ startnext-header, startnext-footer {
166
200
  }
167
201
  ```
168
202
 
203
+ ## Server-Side Rendering (SSR)
204
+
205
+ Das Paket exportiert einen server-sicheren Subpath `@startnext/chrome/render` mit reinen String-Funktionen (keine Browser-Abhaengigkeiten). Damit kann der API-Server fertig gerendertes HTML per Declarative Shadow DOM erzeugen.
206
+
207
+ ### Render Entry Point
208
+
209
+ ```javascript
210
+ import {
211
+ renderHeader, renderBurgerItems, renderUserItems,
212
+ renderFooter,
213
+ headerCSS, footerCSS,
214
+ renderHeaderCrawlerNav, renderFooterCrawlerNav,
215
+ toHeaderRenderData, toFooterRenderData,
216
+ getUiString, getIcon,
217
+ } from '@startnext/chrome/render';
218
+ ```
219
+
220
+ ### Exports
221
+
222
+ | Export | Beschreibung |
223
+ |--------|-------------|
224
+ | `renderHeader(props)` | Header Shadow DOM HTML |
225
+ | `renderBurgerItems(data, expandedSections)` | Burger-Menue Items HTML |
226
+ | `renderUserItems(data, expandedSections)` | User-Menue Items HTML |
227
+ | `renderFooter(data)` | Footer Shadow DOM HTML |
228
+ | `headerCSS`, `footerCSS`, `resetCSS` | CSS als Strings |
229
+ | `getIcon(name, size?)` | SVG-Icon als String |
230
+ | `getUiString(key, lang)` | UI-String (ARIA Labels etc.) |
231
+ | `toHeaderRenderData(apiData)` | API-Daten → HeaderData (fuegt stub `theme` hinzu) |
232
+ | `toFooterRenderData(apiData)` | API-Daten → FooterData (fuegt stub `theme` hinzu) |
233
+ | `renderHeaderCrawlerNav(data)` | Crawler-`<nav>` fuer Header (Light DOM, SEO) |
234
+ | `renderFooterCrawlerNav(data)` | Crawler-`<nav>` fuer Footer (Light DOM, SEO) |
235
+
236
+ ### Hydration
237
+
238
+ Wenn der Server HTML mit Declarative Shadow DOM (`<template shadowrootmode="open">`) liefert, erkennt die Web Component den bestehenden `shadowRoot` und **hydriert** statt neu zu rendern:
239
+
240
+ 1. Browser parst DSD → `shadowRoot` existiert vor dem Custom-Element-Constructor
241
+ 2. `BaseComponent` erkennt bestehenden `shadowRoot`, setzt `isHydrating = true`
242
+ 3. `render()` ueberspringt `innerHTML`, ruft nur `attachEvents()` auf
243
+ 4. `connectedCallback()` erkennt bestehenden `[data-crawler-nav]`, ueberspringt `renderLightDomNav()`
244
+ 5. `loadApiData()` holt frische Daten → loest danach ein vollstaendiges Re-Render aus
245
+
246
+ ```html
247
+ <!-- Server liefert fertiges HTML -->
248
+ <startnext-header lang="de" light large-animation>
249
+ <template shadowrootmode="open">
250
+ <style>/* headerCSS */</style>
251
+ <div><!-- Shadow DOM HTML --></div>
252
+ </template>
253
+ <nav data-crawler-nav aria-hidden="true" style="display:none">
254
+ <!-- SEO-Links -->
255
+ </nav>
256
+ </startnext-header>
257
+
258
+ <!-- JS hydriert automatisch -->
259
+ <script type="module" src="@startnext/chrome"></script>
260
+ ```
261
+
262
+ ### SSR mit React / Next.js (App Router)
263
+
264
+ React's `dangerouslySetInnerHTML` nutzt intern `innerHTML`, das Declarative Shadow DOM **nicht** parsed. Daher muss nach der Hydration `setHTMLUnsafe()` als Fallback aufgerufen werden.
265
+
266
+ **1. Layout (Server Component) — SSR HTML von der API fetchen:**
267
+
268
+ ```tsx
269
+ // app/[locale]/layout.tsx
270
+ async function fetchChromeHtml(path: string): Promise<string> {
271
+ try {
272
+ const res = await fetch(`${process.env.NEXT_PUBLIC_SCS_API_URL}${path}`, {
273
+ next: { revalidate: 60 },
274
+ });
275
+ if (!res.ok) return "";
276
+ return await res.text();
277
+ } catch {
278
+ return "";
279
+ }
280
+ }
281
+
282
+ export default async function Layout({ children, params }) {
283
+ const { locale } = await params;
284
+ const [headerHtml, footerHtml] = await Promise.all([
285
+ fetchChromeHtml(`/api/header/render?lang=${locale}&large-animation`),
286
+ fetchChromeHtml(`/api/footer/render?lang=${locale}`),
287
+ ]);
288
+
289
+ return (
290
+ <html lang={locale}>
291
+ <body>
292
+ <ChromeHeader ssrHtml={headerHtml} />
293
+ <main>{children}</main>
294
+ <ChromeFooter ssrHtml={footerHtml} />
295
+ </body>
296
+ </html>
297
+ );
298
+ }
299
+ ```
300
+
301
+ **2. Client Component — SSR HTML rendern + DSD Fallback + Hydration:**
302
+
303
+ ```tsx
304
+ // components/ChromeHeader.tsx
305
+ "use client";
306
+ import { useEffect, useRef, useState } from "react";
307
+
308
+ export function ChromeHeader({ ssrHtml }: { ssrHtml?: string }) {
309
+ const containerRef = useRef<HTMLDivElement>(null);
310
+ const [mounted, setMounted] = useState(false);
311
+
312
+ useEffect(() => {
313
+ const container = containerRef.current;
314
+ if (container && ssrHtml) {
315
+ // Falls DSD nicht geparsed wurde (innerHTML parsed kein DSD),
316
+ // setHTMLUnsafe() als Fallback nutzen
317
+ const header = container.querySelector("startnext-header");
318
+ if (!header?.shadowRoot && "setHTMLUnsafe" in Element.prototype) {
319
+ container.setHTMLUnsafe(ssrHtml);
320
+ }
321
+ }
322
+ import("@startnext/chrome"); // Web Component JS laden → Hydration
323
+ setMounted(true);
324
+ }, [ssrHtml]);
325
+
326
+ if (ssrHtml) {
327
+ return (
328
+ <div
329
+ ref={containerRef}
330
+ style={{ display: "contents" }}
331
+ suppressHydrationWarning
332
+ dangerouslySetInnerHTML={{ __html: ssrHtml }}
333
+ />
334
+ );
335
+ }
336
+
337
+ // Fallback: Client-Side Rendering (wenn SSR HTML nicht verfuegbar)
338
+ return <startnext-header api-url={process.env.NEXT_PUBLIC_SCS_API_URL} />;
339
+ }
340
+ ```
341
+
342
+ **Wichtig:** `dangerouslySetInnerHTML` sorgt dafuer, dass das SSR-HTML im initialen HTML-Stream enthalten ist (fuer Crawler und First Paint). `setHTMLUnsafe()` stellt sicher, dass DSD auch nach React-Hydration oder Client-Side-Navigation korrekt geparsed wird.
343
+
344
+ **Render-Endpoints (Query-Parameter):**
345
+
346
+ | Parameter | Typ | Beschreibung |
347
+ |-----------|-----|-------------|
348
+ | `lang` | `de` \| `en` | Sprache |
349
+ | `light` | flag | Heller Header |
350
+ | `large-animation` | flag | Grosse Logo-Animation |
351
+ | `hide-color-mode` | flag | Color-Mode Toggle verstecken |
352
+ | `hide-lang` | flag | Language-Switcher verstecken |
353
+ | `hide-login` | flag | Login-Button verstecken |
354
+ | `show-back-link` | flag | Back-Link anzeigen |
355
+ | `back-url` | string | Back-Link URL |
356
+ | `back-label` | string | Back-Link Text |
357
+
358
+ Beispiel: `GET /api/header/render?lang=de&large-animation&hide-login&show-back-link`
359
+
169
360
  ## Browser Support
170
361
 
171
- - Chrome/Edge 90+
172
- - Firefox 88+
173
- - Safari 14+
362
+ - Chrome/Edge 90+ (Declarative Shadow DOM: Chrome 90+, Firefox 123+, Safari 16.4+)
363
+ - Firefox 88+ (123+ fuer SSR/Hydration)
364
+ - Safari 14+ (16.4+ fuer SSR/Hydration)
174
365
 
175
366
  ## Development
176
367
 
@@ -188,7 +379,7 @@ pnpm --filter @startnext/chrome build
188
379
  pnpm --filter @startnext/chrome lint
189
380
  ```
190
381
 
191
- Demo-Seite öffnen: `packages/sn-chrome-web-component/examples/vanilla/index.html`
382
+ Demo-Seite oeffnen: `demo/index.html`
192
383
 
193
384
  ## Architecture
194
385
 
@@ -198,36 +389,42 @@ Jede Component ist modular in drei Dateien aufgeteilt:
198
389
  src/
199
390
  ├── components/
200
391
  │ ├── base/
201
- │ │ ├── BaseComponent.ts # Abstrakte Basis (Shadow DOM, Events, Theming)
392
+ │ │ ├── BaseComponent.ts # Abstrakte Basis (Shadow DOM, DSD-Hydration, Events, Theming)
202
393
  │ │ ├── icons.ts # SVG-Icon-Registry
203
394
  │ │ └── styles.ts # Shared Reset-CSS
204
395
  │ ├── header/
205
- │ │ ├── StartnextHeader.ts # Logik (Scroll, Drawers, Lottie, Events)
396
+ │ │ ├── StartnextHeader.ts # Logik (Scroll, Drawers, Lottie, Events, Hydration)
206
397
  │ │ ├── header.css.ts # CSS als Template-Literal-Export
207
398
  │ │ └── header.template.ts # Render-Funktionen (HTML-Strings)
208
399
  │ └── footer/
209
- │ ├── StartnextFooter.ts # Logik (Render, Events)
400
+ │ ├── StartnextFooter.ts # Logik (Render, Events, Hydration)
210
401
  │ ├── footer.css.ts # CSS als Template-Literal-Export
211
402
  │ └── footer.template.ts # Render-Funktion (HTML-String)
212
403
  ├── data/
213
- │ └── mockData.ts # Mock-Daten
404
+ │ ├── mockData.ts # Mock-Daten
405
+ │ └── uiStrings.ts # UI-Strings (ARIA Labels, de/en)
214
406
  ├── types/
215
407
  │ └── index.ts # Alle TypeScript-Interfaces
216
- └── index.ts # Barrel-Export
408
+ ├── index.ts # Browser-Entry (Custom Elements registrieren)
409
+ └── render.ts # Server-Entry (reine String-Funktionen, kein Browser)
217
410
  ```
218
411
 
219
412
  **Konventionen:**
220
- - CSS in `*.css.ts` als exportierter Template-Literal-String (kein extra Build-Plugin nötig)
221
- - Templates in `*.template.ts` als reine Funktionen die HTML-Strings zurückgeben
222
- - Logik in der Hauptdatei: Event-Handling, State, Lifecycle
223
- - BEM-Naming für CSS-Klassen (`headbar__left`, `drawer__item--highlighted`)
224
- - Shadow DOM (open mode), kein Virtual DOM
413
+ - CSS in `*.css.ts` als exportierter Template-Literal-String (kein extra Build-Plugin noetig)
414
+ - Templates in `*.template.ts` als reine Funktionen die HTML-Strings zurueckgeben (server-safe)
415
+ - Logik in der Hauptdatei: Event-Handling, State, Lifecycle, Hydration
416
+ - BEM-Naming fuer CSS-Klassen (`headbar__left`, `drawer__item--highlighted`)
417
+ - Shadow DOM (open mode), kein Virtual DOM, Declarative Shadow DOM fuer SSR
418
+
419
+ **Zwei Entry Points:**
420
+ - `src/index.ts` → `dist/index.js` (ESM) + `dist/index.umd.js` (UMD) — Browser, registriert Custom Elements
421
+ - `src/render.ts` → `dist/render.js` (ESM) — Server, reine String-Funktionen ohne Browser-Abhaengigkeiten
225
422
 
226
423
  ## Monorepo Structure
227
424
 
228
425
  ```
229
426
  packages/
230
- scs-web-component/ ← this package
231
- scs-api/ ← Express API service
427
+ scs-web-component/ ← dieses Paket
428
+ scs-api/ ← Express API Service (nutzt @startnext/chrome/render fuer SSR)
232
429
  ```
233
430
 
package/dist/components/base/BaseComponent.d.ts CHANGED
@@ -5,6 +5,8 @@ import type { ThemeVariables } from '../../types/index.js';
5
5
  */
6
6
  export declare abstract class BaseComponent extends HTMLElement {
7
7
  protected shadow: ShadowRoot;
8
+ /** True when Declarative Shadow DOM was present — first render should hydrate, not replace. */
9
+ protected isHydrating: boolean;
8
10
  constructor();
9
11
  /** Emit a typed CustomEvent that bubbles and is composed (crosses shadow DOM). */
10
12
  protected emit<T>(name: string, detail: T): boolean;
package/dist/components/base/BaseComponent.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;GAGG;AACH,8BAAsB,aAAc,SAAQ,WAAW;IACrD,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC;;IAO7B,kFAAkF;IAClF,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,OAAO;IAWnD,mEAAmE;IACnE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,UAAQ,GAAG,OAAO;IAM9D,6DAA6D;IAC7D,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAMjD,kDAAkD;IAClD,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB;CAKrD"}
1
+ {"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;GAGG;AACH,8BAAsB,aAAc,SAAQ,WAAW;IACrD,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC;IAE7B,+FAA+F;IAC/F,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC;;IAU/B,kFAAkF;IAClF,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,OAAO;IAWnD,mEAAmE;IACnE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,UAAQ,GAAG,OAAO;IAM9D,6DAA6D;IAC7D,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAMjD,kDAAkD;IAClD,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB;CAKrD"}
package/dist/components/base/icons.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/base/icons.ts"],"names":[],"mappings":"AA6CA,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiCxC,CAAC;AAEF,sFAAsF;AACtF,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAM3D"}
1
+ {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/base/icons.ts"],"names":[],"mappings":"AA8CA,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkCxC,CAAC;AAEF,sFAAsF;AACtF,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAM3D"}
package/dist/components/footer/StartnextFooter.d.ts CHANGED
@@ -4,10 +4,15 @@ export declare class StartnextFooter extends BaseComponent {
4
4
  private data;
5
5
  /** Cached API data per language. */
6
6
  private apiCache;
7
+ /** Bound handler for document-level language-change events. */
8
+ private _langSyncHandler;
7
9
  private get currentLang();
10
+ private get langSyncEnabled();
8
11
  connectedCallback(): void;
9
12
  disconnectedCallback(): void;
10
13
  attributeChangedCallback(name: string): void;
14
+ private setupLangSync;
15
+ private teardownLangSync;
11
16
  /** Return cached API data if available, otherwise defaults (theme only). */
12
17
  private getFooterData;
13
18
  /** If api-url is set, fetch footer data from API and re-render. */
package/dist/components/footer/StartnextFooter.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StartnextFooter.d.ts","sourceRoot":"","sources":["../../../src/components/footer/StartnextFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,MAAM,CAAC,kBAAkB,WAAuB;IAEhD,OAAO,CAAC,IAAI,CAAc;IAC1B,oCAAoC;IACpC,OAAO,CAAC,QAAQ,CAAiC;IAEjD,OAAO,KAAK,WAAW,GAEtB;IAED,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAI5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAS5C,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IAuBzB,OAAO,CAAC,iBAAiB;IAiCzB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,YAAY;CAUrB"}
1
+ {"version":3,"file":"StartnextFooter.d.ts","sourceRoot":"","sources":["../../../src/components/footer/StartnextFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,MAAM,CAAC,kBAAkB,WAAoC;IAE7D,OAAO,CAAC,IAAI,CAAc;IAC1B,oCAAoC;IACpC,OAAO,CAAC,QAAQ,CAAiC;IACjD,+DAA+D;IAC/D,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAc5C,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,gBAAgB;IAOxB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IAuBzB,OAAO,CAAC,iBAAiB;IAiCzB,OAAO,CAAC,MAAM;IAkBd,OAAO,CAAC,YAAY;CAUrB"}
package/dist/components/header/StartnextHeader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAWzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,UAAU,CAAuB;IACzC,6EAA6E;IAC7E,OAAO,CAAC,QAAQ,CAAiC;IAEjD,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,KAAK,WAAW,GAEtB;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IAgBzB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IA6BzB,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAa5C,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IA0BlB,OAAO,CAAC,YAAY;IAgDpB,OAAO,CAAC,mBAAmB;IAoC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;IA0Bd,OAAO,CAAC,YAAY;CA4DrB"}
1
+ {"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAWzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,UAAU,CAAuB;IACzC,6EAA6E;IAC7E,OAAO,CAAC,QAAQ,CAAiC;IAEjD,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,KAAK,WAAW,GAEtB;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IAoBzB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IA6BzB,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAa5C,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IA0BlB,OAAO,CAAC,YAAY;IAgDpB,OAAO,CAAC,mBAAmB;IAoC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;IAuCd,OAAO,CAAC,YAAY;CAkErB"}
package/dist/components/header/header.css.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const headerCSS = "\n \n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n :host {\n display: block;\n font-family: var(--font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);\n font-size: var(--font-size-base, 16px);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button {\n font: inherit;\n cursor: pointer;\n border: none;\n background: none;\n color: inherit;\n }\n\n ul, ol {\n list-style: none;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n\n :host {\n display: block;\n }\n\n /* \u2500\u2500 Headbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100px;\n z-index: var(--header-z-index, 12);\n transition: transform 0.3s ease, opacity 0.3s ease, backdrop-filter 0.3s linear;\n will-change: transform, opacity, backdrop-filter;\n }\n\n .headbar::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: #FFFFFF;\n z-index: -1;\n opacity: 0;\n transition: opacity 0.3s linear;\n }\n\n @media (min-width: 768px) {\n .headbar > * {\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n }\n\n /* \u2500\u2500 States \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar--light .headbar__icon {\n fill: #FFFFFF;\n color: #FFFFFF;\n }\n\n .headbar--light a,\n .headbar--light button {\n color: #FFFFFF;\n }\n\n .headbar--tight::after {\n opacity: 0.8;\n }\n\n .headbar--tight {\n backdrop-filter: blur(2px);\n }\n\n .headbar--tight .headbar__action--hide {\n opacity: 0;\n pointer-events: none;\n }\n\n .headbar--slide-up {\n pointer-events: none;\n opacity: 0;\n transform: translateY(-100%);\n }\n\n /* \u2500\u2500 Left (Burger) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__left {\n position: absolute;\n left: 16px;\n top: 34px;\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__left {\n left: 24px;\n }\n }\n\n /* \u2500\u2500 Right \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__right {\n position: absolute;\n right: 16px;\n top: 38px;\n height: 24px;\n display: flex;\n align-items: center;\n gap: 6px;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__right {\n right: 24px;\n gap: 24px;\n }\n }\n\n /* \u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__icon {\n fill: var(--text-primary, #304b50);\n color: var(--text-primary, #304b50);\n transition: fill 0.3s linear, color 0.3s linear;\n will-change: fill, color;\n display: flex;\n align-items: center;\n }\n\n .headbar__icon svg {\n width: 24px;\n height: 24px;\n }\n\n .headbar__icon--clickable {\n cursor: pointer;\n padding: 4px;\n border-radius: 4px;\n }\n\n .headbar__icon--clickable:hover {\n opacity: 0.7;\n }\n\n /* \u2500\u2500 CTA Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headerbar__btn {\n position: absolute;\n left: 54px;\n top: 34px;\n background-color: var(--btn-primary-bg, #06E481);\n height: 32px;\n border-radius: 16px;\n padding: 0 15px;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n opacity: 0;\n transition: all 300ms ease-out;\n will-change: transform, opacity, max-width;\n z-index: 2;\n overflow: hidden;\n }\n\n .headerbar__btn--loaded {\n opacity: 1;\n }\n\n .headerbar__btn a {\n display: flex;\n align-items: center;\n white-space: nowrap;\n color: inherit;\n text-decoration: none;\n }\n\n .headerbar__btn:hover {\n background-color: var(--btn-primary-hover, #00B86F);\n }\n\n .headerbar__btn--text {\n fill: var(--text-primary, #304b50);\n transition: all 300ms ease-out;\n }\n\n .headerbar__btn--icon {\n opacity: 0;\n width: 0;\n transition: all 300ms ease-out;\n display: flex;\n align-items: center;\n }\n\n @media (max-width: 767px) {\n .headbar--tight .headerbar__btn--text {\n width: 0;\n overflow: hidden;\n }\n .headbar--tight .headerbar__btn--icon {\n width: 24px;\n opacity: 1;\n }\n }\n\n @media (min-width: 768px) {\n .headerbar__btn {\n left: 80px;\n }\n }\n\n /* \u2500\u2500 Main Nav (desktop > 1100px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__menu {\n display: none;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n @media (min-width: 1100px) {\n .headbar__menu {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n height: 100%;\n display: flex;\n align-items: center;\n transition: all 300ms ease-out;\n max-width: fit-content;\n will-change: transform, opacity, max-width;\n }\n\n .headbar__menu--faded {\n transform: translateX(calc(-50% - 60px));\n max-width: 0;\n opacity: 0;\n }\n }\n\n .headbar__menu-item {\n list-style: none;\n }\n\n .headbar__menu-link {\n display: inline-block;\n padding: 8px 15px;\n position: relative;\n font-size: 16px;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n transition: color 0.3s;\n }\n\n .headbar--light .headbar__menu-link {\n color: #FFFFFF;\n }\n\n .headbar__menu-link::after {\n content: \"\";\n position: absolute;\n left: 15px;\n right: 15px;\n bottom: 2px;\n height: 2px;\n background-color: var(--text-primary, #304b50);\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__menu-link::after {\n background-color: #FFFFFF;\n }\n\n .headbar__menu-link:hover::after {\n opacity: 1;\n }\n\n /* \u2500\u2500 Logo (Lottie) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__pageLogo--animation {\n width: 100%;\n max-width: 200px;\n margin: 0 auto;\n display: block;\n position: relative;\n top: 110px;\n transform: translateY(-110px) scale(0.65);\n z-index: 1;\n text-decoration: none;\n }\n\n .headbar__pageLogo--animation svg {\n transform: unset !important;\n }\n\n .headbar__pageLogo--animation svg path[fill] {\n fill: var(--text-primary, #304b50);\n }\n .headbar__pageLogo--animation svg path[stroke] {\n stroke: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__pageLogo--animation svg path[fill] {\n fill: #FFFFFF;\n }\n .headbar--light .headbar__pageLogo--animation svg path[stroke] {\n stroke: #FFFFFF;\n }\n\n @media (min-width: 768px) {\n .headbar__pageLogo--animation {\n max-width: 300px;\n transform: translateY(-115px) scale(0.5);\n top: 100px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__pageLogo--animation {\n top: 120px;\n transform: translateY(-140px) scale(0.5);\n }\n }\n\n .headbar__pageLogo--animation-large {\n transform: translateY(0) scale(1);\n }\n\n /* \u2500\u2500 Claim \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__claim {\n font-size: 14px;\n transition: all 0.3s;\n width: 100%;\n text-align: center;\n color: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__claim {\n color: #FFFFFF;\n }\n\n .headbar__claim--large {\n position: absolute;\n top: 201px;\n left: 50%;\n transform: translate(-50%);\n white-space: nowrap;\n z-index: 1;\n }\n\n .headbar--tight .headbar__claim--large {\n pointer-events: none;\n }\n\n @media (min-width: 768px) {\n .headbar__claim--large {\n top: 232px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__claim--large {\n top: 252px;\n }\n }\n\n /* \u2500\u2500 User Avatar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n border: 2px solid transparent;\n transition: border-color 0.3s;\n }\n\n .headbar--light .headbar__avatar {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n .headbar__avatar:hover {\n opacity: 0.85;\n }\n\n /* \u2500\u2500 Login Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__login {\n padding: 4px 6px;\n font-size: 16px;\n font-family: inherit;\n white-space: nowrap;\n border: none;\n cursor: pointer;\n background: none;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s;\n display: flex;\n align-items: center;\n }\n\n .headbar--light .headbar__login {\n color: #FFFFFF;\n }\n\n .headbar__login:hover {\n opacity: 0.75;\n }\n\n .headbar__login-icon {\n display: flex;\n align-items: center;\n }\n\n .headbar__login-text {\n display: none;\n }\n\n .headbar__login-icon {\n display: flex;\n }\n\n @media (min-width: 768px) {\n .headbar__login-text {\n display: inline;\n }\n .headbar__login-icon {\n display: none;\n }\n }\n\n /* \u2500\u2500 Language Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__lang {\n position: relative;\n }\n\n .headbar__lang-toggle {\n display: flex;\n align-items: center;\n gap: 4px;\n font-family: inherit;\n font-size: 16px;\n padding: 4px 6px;\n border: none;\n background: none;\n color: var(--text-primary, #304b50);\n cursor: pointer;\n border-radius: 4px;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__lang-toggle {\n color: #FFFFFF;\n }\n\n .headbar__lang-toggle:hover {\n opacity: 0.75;\n }\n\n .headbar__lang-arrow {\n display: flex;\n align-items: center;\n position: relative;\n top: -1px;\n left: 2px;\n transition: transform 0.25s ease;\n }\n\n .headbar__lang-arrow.open {\n transform: rotate(180deg);\n }\n\n .headbar__lang-menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 50%;\n min-width: 120px;\n background: #FFFFFF;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n padding: 4px 0;\n opacity: 0;\n visibility: hidden;\n transform: translateX(-50%) translateY(-8px);\n transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n z-index: 10;\n }\n\n .headbar__lang-menu.open {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n\n .headbar__lang-option {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 14px;\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: #304b50;\n background: none;\n border: none;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n text-align: left;\n }\n\n .headbar__lang-option:hover {\n color: var(--btn-primary-bg, #06E481);\n background: var(--hover-bg, #F3F4F6);\n }\n\n .headbar__lang-option--active {\n font-weight: 700;\n color: var(--btn-primary-bg, #06E481);\n }\n\n .headbar--light .headbar__lang-option {\n color: #304b50;\n }\n\n .headbar--light .headbar__lang-option:hover,\n .headbar--light .headbar__lang-option--active {\n color: var(--btn-primary-bg, #06E481);\n }\n\n /* \u2500\u2500 Color Mode Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__color-mode {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n border-radius: 50%;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s, color 0.3s;\n }\n\n .headbar--light .headbar__color-mode {\n color: #FFFFFF;\n }\n\n .headbar__color-mode:hover {\n opacity: 0.7;\n }\n\n .headbar__color-mode-sun,\n .headbar__color-mode-moon {\n display: flex;\n align-items: center;\n }\n\n .headbar__color-mode-moon {\n display: none;\n }\n\n :host([color-mode=\"dark\"]) .headbar__color-mode-sun {\n display: none;\n }\n\n :host([color-mode=\"dark\"]) .headbar__color-mode-moon {\n display: flex;\n }\n\n /* \u2500\u2500 Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: var(--overlay-z-index, 1050);\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .overlay.open {\n opacity: 1;\n visibility: visible;\n }\n\n /* \u2500\u2500 Drawer (shared) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .drawer {\n position: fixed;\n top: 0;\n bottom: 0;\n width: 320px;\n max-width: 85vw;\n background: #FFFFFF;\n z-index: var(--drawer-z-index, 1100);\n overflow-y: auto;\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n color: var(--text-primary, #304b50);\n }\n\n .drawer--left {\n left: 0;\n transform: translateX(-100%);\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer--right {\n right: 0;\n transform: translateX(100%);\n box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer.open {\n transform: translateX(0);\n }\n\n .drawer__user {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid var(--border-color, #E5E7EB);\n }\n\n .drawer__user-avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n object-fit: cover;\n }\n\n .drawer__user-name {\n font-weight: 600;\n font-size: 16px;\n }\n\n .drawer__nav {\n padding: 8px 0;\n }\n\n .drawer__item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 20px;\n font-size: 16px;\n font-weight: 500;\n transition: background-color 0.15s;\n cursor: pointer;\n width: 100%;\n text-align: left;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n border: none;\n background: none;\n font-family: inherit;\n }\n\n .drawer__item:hover {\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item--highlighted {\n color: #FFFFFF;\n background: var(--btn-primary-bg, #06E481);\n margin: 8px 16px;\n border-radius: 8px;\n justify-content: center;\n font-weight: 600;\n width: auto;\n }\n\n .drawer__item--highlighted:hover {\n background: var(--btn-primary-hover, #00B86F);\n }\n\n .drawer__item--small {\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n padding: 8px 20px;\n font-weight: 400;\n }\n\n .drawer__item--disabled {\n color: var(--text-disabled, #D1D5DB);\n pointer-events: none;\n }\n\n .drawer__item--outline {\n margin: 8px 16px;\n border: 1.5px solid var(--border-color, #E5E7EB);\n border-radius: 8px;\n justify-content: center;\n width: auto;\n background: none;\n }\n\n .drawer__item--outline:hover {\n border-color: var(--text-secondary, #6B7280);\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n }\n\n .drawer__item-badge {\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--btn-primary-bg, #06E481);\n color: #FFFFFF;\n font-size: 12px;\n font-weight: 700;\n }\n\n .drawer__item-expand {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(0deg);\n transition: transform 0.3s ease;\n }\n\n .drawer__item-expand.expanded {\n transform: rotate(180deg);\n }\n\n .drawer__item-nav-arrow {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(-90deg);\n }\n\n .drawer__divider {\n height: 1px;\n background: var(--border-color, #E5E7EB);\n margin: 8px 20px;\n }\n\n .drawer__children {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n }\n\n .drawer__children.expanded {\n max-height: 500px;\n }\n\n .drawer__child {\n display: block;\n padding: 10px 20px 10px 52px;\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n transition: background-color 0.15s, color 0.15s;\n text-decoration: none;\n }\n\n .drawer__child:hover {\n background: var(--hover-bg, #F3F4F6);\n color: var(--text-primary, #304b50);\n }\n\n /* \u2500\u2500 Focus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__icon--clickable:focus-visible,\n .headerbar__btn:focus-visible,\n .headbar__login:focus-visible,\n .headbar__menu-link:focus-visible,\n .drawer__item:focus-visible,\n .drawer__child:focus-visible {\n outline: 2px solid var(--btn-primary-bg, #06E481);\n outline-offset: 2px;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n";
1
+ export declare const headerCSS = "\n \n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n :host {\n display: block;\n font-family: var(--font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);\n font-size: var(--font-size-base, 16px);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button {\n font: inherit;\n cursor: pointer;\n border: none;\n background: none;\n color: inherit;\n }\n\n ul, ol {\n list-style: none;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n\n :host {\n display: block;\n }\n\n /* \u2500\u2500 Headbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100px;\n z-index: var(--header-z-index, 12);\n transition: transform 0.3s ease, opacity 0.3s ease, backdrop-filter 0.3s linear;\n will-change: transform, opacity, backdrop-filter;\n }\n\n .headbar::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: #FFFFFF;\n z-index: -1;\n opacity: 0;\n transition: opacity 0.3s linear;\n }\n\n @media (min-width: 768px) {\n .headbar > * {\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n }\n\n /* \u2500\u2500 States \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar--light .headbar__icon {\n fill: #FFFFFF;\n color: #FFFFFF;\n }\n\n .headbar--light a,\n .headbar--light button {\n color: #FFFFFF;\n }\n\n .headbar--tight::after {\n opacity: 0.8;\n }\n\n .headbar--tight {\n backdrop-filter: blur(2px);\n }\n\n .headbar--tight .headbar__action--hide {\n opacity: 0;\n pointer-events: none;\n }\n\n .headbar--slide-up {\n pointer-events: none;\n opacity: 0;\n transform: translateY(-100%);\n }\n\n /* \u2500\u2500 Left (Burger) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__left {\n position: absolute;\n left: 16px;\n top: 34px;\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__left {\n left: 24px;\n }\n }\n\n /* \u2500\u2500 Right \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__right {\n position: absolute;\n right: 16px;\n top: 38px;\n height: 24px;\n display: flex;\n align-items: center;\n gap: 6px;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__right {\n right: 24px;\n gap: 12px;\n }\n }\n\n /* \u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__icon {\n fill: var(--text-primary, #304b50);\n color: var(--text-primary, #304b50);\n transition: fill 0.3s linear, color 0.3s linear;\n will-change: fill, color;\n display: flex;\n align-items: center;\n }\n\n .headbar__icon svg {\n width: 24px;\n height: 24px;\n }\n\n .headbar__icon--clickable {\n cursor: pointer;\n padding: 4px;\n border-radius: 4px;\n }\n\n .headbar__icon--clickable:hover {\n opacity: 0.7;\n }\n\n /* \u2500\u2500 CTA Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headerbar__btn {\n position: absolute;\n left: 54px;\n top: 34px;\n background-color: var(--btn-primary-bg, #06E481);\n height: 32px;\n border-radius: 16px;\n padding: 0 15px;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n opacity: 0;\n transition: all 300ms ease-out;\n will-change: transform, opacity, max-width;\n z-index: 2;\n overflow: hidden;\n }\n\n .headerbar__btn--loaded {\n opacity: 1;\n }\n\n .headerbar__btn a {\n display: flex;\n align-items: center;\n white-space: nowrap;\n color: inherit;\n text-decoration: none;\n }\n\n .headerbar__btn:hover {\n background-color: var(--btn-primary-hover, #00B86F);\n }\n\n .headerbar__btn--text {\n fill: var(--text-primary, #304b50);\n transition: all 300ms ease-out;\n }\n\n .headerbar__btn--icon {\n opacity: 0;\n width: 0;\n transition: all 300ms ease-out;\n display: flex;\n align-items: center;\n }\n\n @media (max-width: 767px) {\n .headbar--tight .headerbar__btn--text {\n width: 0;\n overflow: hidden;\n }\n .headbar--tight .headerbar__btn--icon {\n width: 24px;\n opacity: 1;\n }\n }\n\n @media (min-width: 768px) {\n .headerbar__btn {\n left: 80px;\n }\n }\n\n /* \u2500\u2500 Main Nav (desktop > 1100px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__menu {\n display: none;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n @media (min-width: 1100px) {\n .headbar__menu {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n height: 100%;\n display: flex;\n align-items: center;\n transition: all 300ms ease-out;\n max-width: fit-content;\n will-change: transform, opacity, max-width;\n }\n\n .headbar__menu--faded {\n transform: translateX(calc(-50% - 60px));\n max-width: 0;\n opacity: 0;\n }\n }\n\n .headbar__menu-item {\n list-style: none;\n }\n\n .headbar__menu-link {\n display: inline-block;\n padding: 8px 15px;\n position: relative;\n font-size: 16px;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n transition: color 0.3s;\n }\n\n .headbar--light .headbar__menu-link {\n color: #FFFFFF;\n }\n\n .headbar__menu-link::after {\n content: \"\";\n position: absolute;\n left: 15px;\n right: 15px;\n bottom: 2px;\n height: 2px;\n background-color: var(--text-primary, #304b50);\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__menu-link::after {\n background-color: #FFFFFF;\n }\n\n .headbar__menu-link:hover::after {\n opacity: 1;\n }\n\n /* \u2500\u2500 Logo (Lottie) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__pageLogo--animation {\n width: 100%;\n max-width: 200px;\n margin: 0 auto;\n display: block;\n position: relative;\n top: 110px;\n transform: translateY(-110px) scale(0.65);\n z-index: 1;\n text-decoration: none;\n }\n\n .headbar__pageLogo--animation svg {\n transform: unset !important;\n }\n\n .headbar__pageLogo--animation svg path[fill] {\n fill: var(--text-primary, #304b50);\n }\n .headbar__pageLogo--animation svg path[stroke] {\n stroke: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__pageLogo--animation svg path[fill] {\n fill: #FFFFFF;\n }\n .headbar--light .headbar__pageLogo--animation svg path[stroke] {\n stroke: #FFFFFF;\n }\n\n @media (min-width: 768px) {\n .headbar__pageLogo--animation {\n max-width: 300px;\n transform: translateY(-115px) scale(0.5);\n top: 100px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__pageLogo--animation {\n top: 120px;\n transform: translateY(-140px) scale(0.5);\n }\n }\n\n .headbar__pageLogo--animation-large {\n transform: translateY(0) scale(1);\n }\n\n /* \u2500\u2500 Claim \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__claim {\n font-size: 14px;\n transition: all 0.3s;\n width: 100%;\n text-align: center;\n color: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__claim {\n color: #FFFFFF;\n }\n\n .headbar__claim--large {\n position: absolute;\n top: 201px;\n left: 50%;\n transform: translate(-50%);\n white-space: nowrap;\n z-index: 1;\n }\n\n .headbar--tight .headbar__claim--large {\n pointer-events: none;\n }\n\n @media (min-width: 768px) {\n .headbar__claim--large {\n top: 232px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__claim--large {\n top: 252px;\n }\n }\n\n /* \u2500\u2500 User Avatar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n border: 2px solid transparent;\n transition: border-color 0.3s;\n }\n\n .headbar--light .headbar__avatar {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n .headbar__avatar:hover {\n opacity: 0.85;\n }\n\n /* \u2500\u2500 Login Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__login {\n padding: 4px 6px;\n font-size: 16px;\n font-family: inherit;\n white-space: nowrap;\n border: none;\n cursor: pointer;\n background: none;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s;\n display: flex;\n align-items: center;\n }\n\n .headbar--light .headbar__login {\n color: #FFFFFF;\n }\n\n .headbar__login:hover {\n opacity: 0.75;\n }\n\n .headbar__login-icon {\n display: flex;\n align-items: center;\n }\n\n .headbar__login-text {\n display: none;\n }\n\n .headbar__login-icon {\n display: flex;\n }\n\n @media (min-width: 768px) {\n .headbar__login-text {\n display: inline;\n }\n .headbar__login-icon {\n display: none;\n }\n }\n\n /* \u2500\u2500 Language Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__lang {\n position: relative;\n }\n\n .headbar__lang-toggle {\n display: flex;\n align-items: center;\n gap: 4px;\n font-family: inherit;\n font-size: 16px;\n padding: 4px 6px;\n border: none;\n background: none;\n color: var(--text-primary, #304b50);\n cursor: pointer;\n border-radius: 4px;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__lang-toggle {\n color: #FFFFFF;\n }\n\n .headbar__lang-toggle:hover {\n opacity: 0.75;\n }\n\n .headbar__lang-arrow {\n display: flex;\n align-items: center;\n position: relative;\n top: -1px;\n left: 2px;\n transition: transform 0.25s ease;\n }\n\n .headbar__lang-arrow.open {\n transform: rotate(180deg);\n }\n\n .headbar__lang-menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 50%;\n min-width: 120px;\n background: #FFFFFF;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n padding: 4px 0;\n opacity: 0;\n visibility: hidden;\n transform: translateX(-50%) translateY(-8px);\n transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n z-index: 10;\n }\n\n .headbar__lang-menu.open {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n\n .headbar__lang-option {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 14px;\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: #304b50;\n background: none;\n border: none;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n text-align: left;\n }\n\n .headbar__lang-option:hover {\n color: var(--btn-primary-bg, #06E481);\n background: var(--hover-bg, #F3F4F6);\n }\n\n .headbar__lang-option--active {\n font-weight: 700;\n color: var(--btn-primary-bg, #06E481);\n }\n\n .headbar--light .headbar__lang-option {\n color: #304b50;\n }\n\n .headbar--light .headbar__lang-option:hover,\n .headbar--light .headbar__lang-option--active {\n color: var(--btn-primary-bg, #06E481);\n }\n\n /* \u2500\u2500 Back Link \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__back-link {\n display: flex;\n align-items: center;\n gap: 6px;\n text-decoration: none;\n color: var(--text-primary, #304b50);\n font-size: 16px;\n white-space: nowrap;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__back-link {\n color: #FFFFFF;\n }\n\n .headbar__back-link:hover {\n opacity: 0.75;\n }\n\n .headbar__back-arrow {\n display: flex;\n align-items: center;\n position: relative;\n top: -1px;\n }\n\n @media (max-width: 768px) {\n .headbar__back-text { display: none; }\n }\n\n /* \u2500\u2500 Color Mode Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__color-mode {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n border-radius: 50%;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s, color 0.3s;\n }\n\n .headbar--light .headbar__color-mode {\n color: #FFFFFF;\n }\n\n .headbar__color-mode:hover {\n opacity: 0.7;\n }\n\n .headbar__color-mode-sun,\n .headbar__color-mode-moon {\n display: flex;\n align-items: center;\n }\n\n .headbar__color-mode-moon {\n display: none;\n }\n\n :host([color-mode=\"dark\"]) .headbar__color-mode-sun {\n display: none;\n }\n\n :host([color-mode=\"dark\"]) .headbar__color-mode-moon {\n display: flex;\n }\n\n /* \u2500\u2500 Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: var(--overlay-z-index, 1050);\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .overlay.open {\n opacity: 1;\n visibility: visible;\n }\n\n /* \u2500\u2500 Drawer (shared) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .drawer {\n position: fixed;\n top: 0;\n bottom: 0;\n width: 320px;\n max-width: 85vw;\n background: #FFFFFF;\n z-index: var(--drawer-z-index, 1100);\n overflow-y: auto;\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n color: var(--text-primary, #304b50);\n }\n\n .drawer--left {\n left: 0;\n transform: translateX(-100%);\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer--right {\n right: 0;\n transform: translateX(100%);\n box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer.open {\n transform: translateX(0);\n }\n\n .drawer__user {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid var(--border-color, #E5E7EB);\n }\n\n .drawer__user-avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n object-fit: cover;\n }\n\n .drawer__user-name {\n font-weight: 600;\n font-size: 16px;\n }\n\n .drawer__nav {\n padding: 8px 0;\n }\n\n .drawer__item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 20px;\n font-size: 16px;\n font-weight: 500;\n transition: background-color 0.15s;\n cursor: pointer;\n width: 100%;\n text-align: left;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n border: none;\n background: none;\n font-family: inherit;\n }\n\n .drawer__item:hover {\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item--highlighted {\n color: #FFFFFF;\n background: var(--btn-primary-bg, #06E481);\n margin: 8px 16px;\n border-radius: 8px;\n justify-content: center;\n font-weight: 600;\n width: auto;\n }\n\n .drawer__item--highlighted:hover {\n background: var(--btn-primary-hover, #00B86F);\n }\n\n .drawer__item--small {\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n padding: 8px 20px;\n font-weight: 400;\n }\n\n .drawer__item--disabled {\n color: var(--text-disabled, #D1D5DB);\n pointer-events: none;\n }\n\n .drawer__item--outline {\n margin: 8px 16px;\n border: 1.5px solid var(--border-color, #E5E7EB);\n border-radius: 8px;\n justify-content: center;\n width: auto;\n background: none;\n }\n\n .drawer__item--outline:hover {\n border-color: var(--text-secondary, #6B7280);\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n }\n\n .drawer__item-badge {\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--btn-primary-bg, #06E481);\n color: #FFFFFF;\n font-size: 12px;\n font-weight: 700;\n }\n\n .drawer__item-expand {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(0deg);\n transition: transform 0.3s ease;\n }\n\n .drawer__item-expand.expanded {\n transform: rotate(180deg);\n }\n\n .drawer__item-nav-arrow {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(-90deg);\n }\n\n .drawer__divider {\n height: 1px;\n background: var(--border-color, #E5E7EB);\n margin: 8px 20px;\n }\n\n .drawer__children {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n }\n\n .drawer__children.expanded {\n max-height: 500px;\n }\n\n .drawer__child {\n display: block;\n padding: 10px 20px 10px 52px;\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n transition: background-color 0.15s, color 0.15s;\n text-decoration: none;\n }\n\n .drawer__child:hover {\n background: var(--hover-bg, #F3F4F6);\n color: var(--text-primary, #304b50);\n }\n\n /* \u2500\u2500 Focus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__icon--clickable:focus-visible,\n .headerbar__btn:focus-visible,\n .headbar__login:focus-visible,\n .headbar__menu-link:focus-visible,\n .drawer__item:focus-visible,\n .drawer__child:focus-visible {\n outline: 2px solid var(--btn-primary-bg, #06E481);\n outline-offset: 2px;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n";
2
2
  //# sourceMappingURL=header.css.d.ts.map
package/dist/components/header/header.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,+5qBA0wBrB,CAAC"}
1
+ {"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,u1sBAyyBrB,CAAC"}
package/dist/components/header/header.template.d.ts CHANGED
@@ -5,6 +5,10 @@ export interface HeaderRenderProps {
5
5
  isLarge: boolean;
6
6
  hideColorMode: boolean;
7
7
  hideLang: boolean;
8
+ hideLogin: boolean;
9
+ showBackLink: boolean;
10
+ backUrl: string;
11
+ backLabel: string;
8
12
  userName: string;
9
13
  userAvatar: string;
10
14
  data: HeaderData;
package/dist/components/header/header.template.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"header.template.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,sBAAsB,CAAC;AAEvE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,GAAG,MAAM,CA6EzD;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAwBzF;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CA4BvF"}
1
+ {"version":3,"file":"header.template.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,sBAAsB,CAAC;AAEvE,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAiFzD;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CAwBzF;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,MAAM,CA4BvF"}
package/dist/index.d.ts CHANGED
@@ -11,6 +11,10 @@ interface StartnextHeaderAttributes {
11
11
  'color-mode'?: 'light' | 'dark' | string;
12
12
  'hide-color-mode'?: boolean | string;
13
13
  'hide-lang'?: boolean | string;
14
+ 'hide-login'?: boolean | string;
15
+ 'show-back-link'?: boolean | string;
16
+ 'back-url'?: string;
17
+ 'back-label'?: string;
14
18
  children?: unknown;
15
19
  ref?: unknown;
16
20
  class?: string;
@@ -21,6 +25,7 @@ interface StartnextHeaderAttributes {
21
25
  }
22
26
  interface StartnextFooterAttributes {
23
27
  lang?: string;
28
+ 'lang-sync'?: boolean | string;
24
29
  children?: unknown;
25
30
  ref?: unknown;
26
31
  class?: string;
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,YAAY,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,GACf,MAAM,kBAAkB,CAAC;AAG1B,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAGD,OAAO,QAAQ,OAAO,CAAC;IAErB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,YAAY,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,GACf,MAAM,kBAAkB,CAAC;AAG1B,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAGD,OAAO,QAAQ,OAAO,CAAC;IAErB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF"}