@fylib/adapter-angular 0.1.0

package/dist/layouts/slot.component.js

@@ -0,0 +1,937 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, Input, ViewEncapsulation, HostBinding, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FyLibService } from '../services/fylib.service';
+import { FyIconComponent } from '../components/icon.component';
+import { FyBadgeComponent } from '../components/badge.component';
+import { resolveAnimationsActive, triggerEffectForEvent, styleString } from '../base/interaction.utils';
+let FySlotComponent = class FySlotComponent {
+    get currentYear() {
+        return new Date().getFullYear();
+    }
+    get animationsDisabled() {
+        return !resolveAnimationsActive(this.fylib, 'fy-slot', this.activeAnimations);
+    }
+    get hostStyles() {
+        return styleString(this.customStyles);
+    }
+    get hostClass() {
+        const fixedClass = this.name === 'sidebar' && this.fixedSidebar ? ' fy-slot--sidebar-fixed' : '';
+        return `fy-slot fy-slot--${this.name}${fixedClass}`;
+    }
+    get computedHeaderLogoFilter() {
+        const mode = this.fylib.getMode?.() || 'light';
+        const target = mode === 'dark' ? this.headerLogoColorDark : this.headerLogoColorLight;
+        const base = this.filterFromTargetColor(target);
+        if (!base)
+            return null;
+        if (mode === 'dark') {
+            const op = this.getLogoDarkOpacity('header');
+            return `${base} opacity(${op})`;
+        }
+        return base;
+    }
+    get computedSidebarLogoFilter() {
+        const mode = this.fylib.getMode?.() || 'light';
+        const target = mode === 'dark'
+            ? this.sidebarLogoColorDark
+            : this.sidebarLogoColorLight;
+        const base = this.filterFromTargetColor(target);
+        if (!base)
+            return null;
+        if (mode === 'dark') {
+            const op = this.getLogoDarkOpacity('sidebar');
+            return `${base} opacity(${op})`;
+        }
+        return base;
+    }
+    filterFromTargetColor(color) {
+        if (!color)
+            return null;
+        const c = String(color).trim().toLowerCase();
+        if (c === 'white' || c === '#fff' || c === '#ffffff') {
+            return 'brightness(0) invert(1)';
+        }
+        if (c === 'black' || c === '#000' || c === '#000000') {
+            return 'brightness(0) saturate(100%)';
+        }
+        return null;
+    }
+    getLogoDarkOpacity(slot) {
+        const t = this.fylib.tokens();
+        const layout = (t?.layout || {});
+        const v = (layout?.[slot] || {})?.logoFilterDarkOpacity;
+        const num = parseFloat(String(v ?? '0.85'));
+        const safe = isNaN(num) ? 0.85 : Math.min(Math.max(num, 0), 1);
+        return String(safe);
+    }
+    toggleSidebar() {
+        if (this.name === 'sidebar' && resolveAnimationsActive(this.fylib, 'fy-slot', this.activeAnimations)) {
+            const event = this.sidebarOpen ? 'close' : 'open';
+            const animationName = this.fylib.getComponentAnimation('fy-slot:sidebar', event);
+            if (animationName) {
+                this.fylib.playAnimation(animationName);
+            }
+            const enabled = this.fylib.isEffectsEnabledFor('fy-slot:sidebar', this.activeEffects);
+            if (enabled) {
+                const inst = event === 'open' ? this.openEffect : this.closeEffect;
+                if (inst) {
+                    this.fylib.triggerEffect(inst);
+                }
+                else {
+                    triggerEffectForEvent(this.fylib, `fy-slot:sidebar.${event}`, 'fy-slot:sidebar', this.activeEffects);
+                }
+            }
+        }
+        this.sidebarOpen = !this.sidebarOpen;
+        this.updateBodyScroll();
+        const t = this.fylib.tokens();
+        const sidebarToggle = (t.layout || {}).sidebar?.toggle || {};
+        const openIcon = sidebarToggle.openIcon || 'x';
+        const closedIcon = sidebarToggle.icon || 'menu';
+        this.sidebarToggleIconName = this.sidebarOpen ? openIcon : closedIcon;
+    }
+    toggleHeaderMenu() {
+        if (this.name !== 'header') {
+            return;
+        }
+        const event = this.headerMenuOpen ? 'close' : 'open';
+        if (resolveAnimationsActive(this.fylib, 'fy-slot', this.activeAnimations)) {
+            const configured = this.fylib.getComponentAnimation('fy-slot:header', event);
+            const fallback = event === 'open' ? this.headerMenuAnimationOpen || undefined : this.headerMenuAnimationClose || undefined;
+            const animationName = configured || fallback;
+            if (animationName) {
+                this.fylib.playAnimation(animationName);
+            }
+            // Atribui classe CSS correspondente para animar o contêiner do header (mobile)
+            const nameToClass = {
+                'sidebar-slide-in': 'fy-anim-header-menu-slide-in',
+                'sidebar-slide-out': 'fy-anim-header-menu-slide-out',
+                'sidebar-macos-slide-in': 'fy-anim-header-menu-macos-slide-in',
+                'sidebar-macos-slide-out': 'fy-anim-header-menu-macos-slide-out',
+                'header-menu-slide-in': 'fy-anim-header-menu-slide-in',
+                'header-menu-slide-out': 'fy-anim-header-menu-slide-out',
+                'header-menu-macos-slide-in': 'fy-anim-header-menu-macos-slide-in',
+                'header-menu-macos-slide-out': 'fy-anim-header-menu-macos-slide-out'
+            };
+            const cls = animationName ? nameToClass[animationName] : undefined;
+            if (cls) {
+                this.headerMenuAnimClass = cls;
+                // limpa após o término para permitir re-disparo
+                setTimeout(() => { this.headerMenuAnimClass = ''; }, 350);
+            }
+            // Dispara efeito semântico para o header
+            triggerEffectForEvent(this.fylib, `fy-slot:header.${event}`, 'fy-slot:header', this.activeEffects);
+        }
+        this.headerMenuOpen = !this.headerMenuOpen;
+        this.updateBodyScroll();
+        const t = this.fylib.tokens();
+        const headerToggle = (t.layout || {}).header?.toggle || {};
+        const openIcon = headerToggle.openIcon || 'x';
+        const closedIcon = headerToggle.icon || 'menu';
+        this.headerToggleIconName = this.headerMenuOpen ? openIcon : closedIcon;
+    }
+    constructor() {
+        this.fylib = inject(FyLibService);
+        this.activeAnimations = null;
+        this.activeEffects = null;
+        this.customStyles = null;
+        this.fixedSidebar = null;
+        this.copyrightText = null;
+        this.copyrightShineDuration = '12s';
+        this.sidebarOpen = false;
+        this.headerMenuOpen = false;
+        this.headerToggleIconName = 'menu';
+        this.sidebarToggleIconName = 'menu';
+        this.sidebarToggleMode = 'floating';
+        this.sidebarTonguePos = 'bottom';
+        this.headerMenuAnimClass = '';
+        /** Deprecated: use fy-header-links-center/right slots */
+        this.headerLinksAlign = 'center';
+        this.sidebarLogoBadgeShine = false;
+        const t = this.fylib.tokens();
+        const headerToggle = (t.layout || {}).header?.toggle || {};
+        const sidebarToggle = (t.layout || {}).sidebar?.toggle || {};
+        this.headerToggleIconName = headerToggle.icon || 'menu';
+        this.sidebarToggleIconName = sidebarToggle.icon || 'menu';
+        this.sidebarToggleMode = sidebarToggle.mode || 'floating';
+        this.sidebarTonguePos = sidebarToggle.tonguePosition || 'bottom';
+    }
+    ngOnDestroy() {
+        if (typeof document !== 'undefined') {
+            document.body.classList.remove('fy-no-scroll');
+        }
+    }
+    resolveAnimationsActive() {
+        return resolveAnimationsActive(this.fylib, 'fy-slot', this.activeAnimations);
+    }
+    updateBodyScroll() {
+        if (typeof document === 'undefined')
+            return;
+        // Pequeno timeout para garantir que as classes de 'open' já estejam no DOM se necessário
+        setTimeout(() => {
+            const anyOpen = !!document.querySelector('.fy-slot__panel--open, .fy-slot__header-menus--open');
+            if (anyOpen && window.innerWidth <= 768) {
+                document.body.classList.add('fy-no-scroll');
+            }
+            else {
+                document.body.classList.remove('fy-no-scroll');
+            }
+        }, 0);
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FySlotComponent.prototype, "name", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "activeAnimations", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "activeEffects", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "customStyles", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "fixedSidebar", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "copyrightText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FySlotComponent.prototype, "copyrightShineDuration", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FySlotComponent.prototype, "openEffect", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FySlotComponent.prototype, "closeEffect", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerMenuAnimationOpen", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerMenuAnimationClose", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FySlotComponent.prototype, "headerLinksAlign", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerLogoImgSrc", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerLogoSvgSrc", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerLogoAlt", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerLogoBadgeText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerLogoBadgeBG", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerLogoBadgeTextColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerLogoBadgeRadius", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerLogoBadgeShine", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerLogoColorLight", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerLogoColorDark", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "sidebarLogoImgSrc", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "sidebarLogoSvgSrc", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "sidebarLogoAlt", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "headerLogoFilter", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "sidebarLogoFilter", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "sidebarLogoColorLight", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "sidebarLogoColorDark", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "sidebarLogoBadgeText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "sidebarLogoBadgeBG", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "sidebarLogoBadgeTextColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "sidebarLogoBadgeRadius", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySlotComponent.prototype, "sidebarLogoBadgeShine", void 0);
+__decorate([
+    HostBinding('class.fy-animations-disabled'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], FySlotComponent.prototype, "animationsDisabled", null);
+__decorate([
+    HostBinding('style'),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], FySlotComponent.prototype, "hostStyles", null);
+FySlotComponent = __decorate([
+    Component({
+        selector: 'fy-slot',
+        standalone: true,
+        imports: [CommonModule, FyIconComponent, FyBadgeComponent],
+        template: `
+    <ng-template #projected>
+      <ng-content></ng-content>
+    </ng-template>
+
+    @switch (name) {
+      @case ('sidebar') {
+        <button
+          type="button"
+          class="fy-sidebar-toggle"
+          [class.fy-sidebar-toggle--tongue]="sidebarToggleMode === 'tongue'"
+          [attr.data-tongue-pos]="sidebarTonguePos"
+          (click)="toggleSidebar()"
+        >
+          <fy-icon [name]="sidebarToggleIconName"></fy-icon>
+        </button>
+        <div class="fy-slot__overlay" [class.fy-slot__overlay--open]="sidebarOpen" (click)="toggleSidebar()"></div>
+        <div class="fy-slot__panel" [class.fy-slot__panel--open]="sidebarOpen">
+          <div class="fy-slot__sidebar-inner">
+            @if (sidebarLogoImgSrc || sidebarLogoSvgSrc) {
+              <div class="fy-slot__sidebar-logo">
+                <div class="fy-logo">
+                  <div class="fy-logo__image" [style.filter]="sidebarLogoFilter || computedSidebarLogoFilter || null">
+                    @if (sidebarLogoImgSrc) {
+                      <img [src]="sidebarLogoImgSrc" [alt]="sidebarLogoAlt || 'Logo'">
+                    } @else if (sidebarLogoSvgSrc) {
+                      <img [src]="sidebarLogoSvgSrc" [alt]="sidebarLogoAlt || 'Logo'">
+                    }
+                  </div>
+                  @if (sidebarLogoBadgeText) {
+                    <fy-badge
+                      [text]="sidebarLogoBadgeText"
+                      [background]="sidebarLogoBadgeBG ?? headerLogoBadgeBG ?? null"
+                      [textColor]="sidebarLogoBadgeTextColor ?? headerLogoBadgeTextColor ?? null"
+                      [borderRadius]="sidebarLogoBadgeRadius ?? headerLogoBadgeRadius ?? null"
+                      [shine]="(sidebarLogoBadgeShine ?? headerLogoBadgeShine) ?? null"></fy-badge>
+                  }
+                </div>
+              </div>
+            } @else {
+              <div class="fy-slot__sidebar-logo">
+                <div class="fy-logo">
+                  <div class="fy-logo__image" [style.filter]="sidebarLogoFilter || computedSidebarLogoFilter || null">
+                    <ng-content select="[fy-sidebar-logo]"></ng-content>
+                  </div>
+                  @if (sidebarLogoBadgeText) {
+                    <fy-badge
+                      [text]="sidebarLogoBadgeText"
+                      [background]="sidebarLogoBadgeBG ?? headerLogoBadgeBG ?? null"
+                      [textColor]="sidebarLogoBadgeTextColor ?? headerLogoBadgeTextColor ?? null"
+                      [borderRadius]="sidebarLogoBadgeRadius ?? headerLogoBadgeRadius ?? null"
+                      [shine]="(sidebarLogoBadgeShine ?? headerLogoBadgeShine) ?? null"></fy-badge>
+                  }
+                </div>
+              </div>
+            }
+            <div class="fy-slot__sidebar-header">
+              <ng-content select="[fy-sidebar-header]"></ng-content>
+            </div>
+            <div class="fy-slot__sidebar-links">
+              <ng-content select="[fy-sidebar-links]"></ng-content>
+            </div>
+            <div class="fy-slot__sidebar-footer">
+              <ng-content select="[fy-sidebar-footer]"></ng-content>
+              @if (copyrightText) {
+                <div class="fy-slot__copyright" [style.--fy-copyright-shine-duration]="copyrightShineDuration">
+                  <span class="fy-slot__copyright-text">&copy; {{ copyrightText }} · {{ currentYear }}</span>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      }
+      @case ('header') {
+        <div class="fy-slot__overlay" [class.fy-slot__overlay--open]="headerMenuOpen" (click)="toggleHeaderMenu()"></div>
+        <header class="fy-slot__header-shell">
+          <div class="fy-slot__header-left">
+            @if (headerLogoImgSrc || headerLogoSvgSrc) {
+              <div class="fy-logo">
+                <div class="fy-logo__image" [style.filter]="headerLogoFilter || computedHeaderLogoFilter || null">
+                  @if (headerLogoImgSrc) {
+                    <img [src]="headerLogoImgSrc" [alt]="headerLogoAlt || 'Logo'">
+                  } @else if (headerLogoSvgSrc) {
+                    <img [src]="headerLogoSvgSrc" [alt]="headerLogoAlt || 'Logo'">
+                  }
+                </div>
+                @if (headerLogoBadgeText) {
+                  <fy-badge
+                    [text]="headerLogoBadgeText"
+                    [background]="headerLogoBadgeBG || null"
+                    [textColor]="headerLogoBadgeTextColor || null"
+                    [borderRadius]="headerLogoBadgeRadius || null"
+                    [shine]="headerLogoBadgeShine ?? null"></fy-badge>
+                }
+              </div>
+            } @else {
+              <div class="fy-logo">
+                <div class="fy-logo__image" [style.filter]="headerLogoFilter || computedHeaderLogoFilter || null">
+                  <ng-content select="[fy-header-logo]"></ng-content>
+                </div>
+                @if (headerLogoBadgeText) {
+                  <fy-badge
+                    [text]="headerLogoBadgeText"
+                    [background]="headerLogoBadgeBG || null"
+                    [textColor]="headerLogoBadgeTextColor || null"
+                    [borderRadius]="headerLogoBadgeRadius || null"
+                    [shine]="headerLogoBadgeShine ?? null"></fy-badge>
+                }
+              </div>
+            }
+          </div>
+          <div class="fy-slot__header-menus"
+               [class.fy-slot__header-menus--open]="headerMenuOpen"
+               [class.fy-anim-header-menu-slide-in]="headerMenuAnimClass==='fy-anim-header-menu-slide-in'"
+               [class.fy-anim-header-menu-slide-out]="headerMenuAnimClass==='fy-anim-header-menu-slide-out'"
+               [class.fy-anim-header-menu-macos-slide-in]="headerMenuAnimClass==='fy-anim-header-menu-macos-slide-in'"
+               [class.fy-anim-header-menu-macos-slide-out]="headerMenuAnimClass==='fy-anim-header-menu-macos-slide-out'">
+            <nav class="fy-slot__header-links fy-slot__header-links--center">
+              <ng-content select="[fy-header-links],[fy-header-links-center]"></ng-content>
+            </nav>
+            <nav class="fy-slot__header-links fy-slot__header-links--right">
+              <ng-content select="[fy-header-links-right]"></ng-content>
+            </nav>
+            
+            <!-- Copyright dentro do menu no mobile -->
+            @if (copyrightText) {
+              <div class="fy-slot__copyright fy-slot__copyright--mobile" [style.--fy-copyright-shine-duration]="copyrightShineDuration">
+                <span class="fy-slot__copyright-text">&copy; {{ copyrightText }} · {{ currentYear }}</span>
+              </div>
+            }
+          </div>
+          <div class="fy-slot__header-meta">
+            <!-- Espaço para elementos meta projetados (como notification-menu) -->
+            <ng-content select="[fy-header-meta]"></ng-content>
+            
+            <!-- Outros links de cabeçalho que não são meta -->
+            <div class="fy-slot__header-links-right-meta">
+               <ng-content select="[fy-header-links-right]"></ng-content>
+            </div>
+            
+            <!-- Copyright fora do menu no desktop -->
+            @if (copyrightText) {
+              <div class="fy-slot__copyright fy-slot__copyright--desktop" [style.--fy-copyright-shine-duration]="copyrightShineDuration">
+                <span class="fy-slot__copyright-text">&copy; {{ copyrightText }} · {{ currentYear }}</span>
+              </div>
+            }
+            <button type="button" class="fy-slot__header-toggle" (click)="toggleHeaderMenu()">
+              <fy-icon [name]="sidebarToggleIconName"></fy-icon>
+            </button>
+          </div>
+        </header>
+      }
+
+      @default {
+        <ng-container [ngTemplateOutlet]="projected"></ng-container>
+      }
+    }
+  `,
+        host: {
+            '[style.grid-area]': 'name',
+            '[class]': 'hostClass',
+            '[attr.data-slot]': 'name'
+        },
+        styles: [`
+    .fy-slot { display: block; position: relative; }
+
+    body.fy-no-scroll {
+      overflow: hidden !important;
+    }
+
+    .fy-slot__overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0, 0, 0, 0.45);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.25s ease;
+      z-index: 100;
+    }
+
+    .fy-slot__overlay--open {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .fy-slot--header {
+      z-index: 110;
+      min-height: var(--fy-layout-header-height, 64px);
+      padding: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .fy-slot__header-shell {
+      display: grid;
+      grid-auto-flow: column;
+      grid-template-columns: auto 1fr auto auto;
+      align-items: center;
+      gap: var(--fy-spacing-md, 16px);
+      width: 100%;
+      position: relative;
+      z-index: 110;
+      min-height: inherit;
+      padding: var(--fy-layout-header-padding, 0 24px);
+      background-color: var(--fy-layout-header-background, var(--fy-colors-surface, #fff));
+      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
+      box-shadow: var(--fy-layout-header-shadow, 0 1px 0 rgba(0,0,0,0.06));
+    }
+
+    .fy-slot__header-left { display: flex; align-items: center; gap: var(--fy-spacing-md, 16px); flex-shrink: 0; }
+    .fy-slot__header-menus { display: contents; }
+    .fy-slot__header-links {
+      display: flex;
+      align-items: center;
+      gap: var(--fy-spacing-md, 16px);
+      min-width: 0;
+      width: max-content;
+    }
+    .fy-slot__header-links.fy-slot__header-links--left { justify-self: start; justify-content: flex-start; }
+    .fy-slot__header-links.fy-slot__header-links--center { justify-self: center; justify-content: center; }
+    .fy-slot__header-links.fy-slot__header-links--right { justify-self: end; justify-content: flex-end; }
+    .fy-slot__header-left .fy-logo { position: relative; display: inline-block; }
+    .fy-slot__header-left .fy-logo__image img,
+    .fy-slot__header-left .fy-logo__image svg { display: block; height: 28px; width: auto; }
+    .fy-slot__header-left .fy-logo fy-badge { position: absolute; top: -6px; right: -6px; z-index: 1; }
+    .fy-slot__header-left .fy-logo fy-badge .fy-badge { position: static; }
+
+    .fy-slot__header-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--fy-spacing-md, 16px);
+      flex-shrink: 0;
+    }
+
+    .fy-slot__header-links-right-meta {
+      display: none;
+    }
+
+    .fy-slot__header-meta ::ng-deep fy-notification-menu {
+      display: block;
+    }
+
+    .fy-slot__header-toggle {
+      display: none;
+      width: 40px;
+      height: 40px;
+      border-radius: var(--fy-layout-header-toggle-borderRadius, 999px);
+      border: 1px solid var(--fy-layout-header-toggle-borderColor, transparent);
+      background-color: var(--fy-layout-header-toggle-background, var(--fy-colors-primary, #2563eb));
+      color: var(--fy-layout-header-toggle-textColor, #fff);
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 18px;
+    }
+
+    .fy-slot__header-toggle .fy-icon { font-size: 18px; }
+    .fy-slot__header-shell {
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
+    }
+    .fy-slot--header .fy-nav-link {
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
+    }
+
+    .fy-slot--sidebar {
+      min-width: var(--fy-layout-sidebar-width, 260px);
+      padding: var(--fy-layout-sidebar-padding, 16px 0);
+      border-right: 1px solid var(--fy-colors-border, rgba(0,0,0,0.1));
+      background-color: var(--fy-layout-sidebar-background, var(--fy-colors-surface, transparent));
+    }
+
+    .fy-slot--sidebar-fixed {
+      height: 100%;
+      max-height: 100%;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .fy-slot--sidebar .fy-slot__panel {
+      height: 100%;
+      display: block;
+      background-color: var(--fy-layout-sidebar-background, var(--fy-colors-surface, #fff));
+      box-shadow: var(--fy-layout-sidebar-shadow, none);
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text, inherit));
+    }
+
+    .fy-slot__sidebar-inner {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .fy-slot__sidebar-logo {
+      padding: var(--fy-spacing-md, 16px);
+      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
+    }
+    .fy-slot__sidebar-logo .fy-logo {
+      position: relative;
+      display: inline-block;
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
+    }
+    .fy-slot__sidebar-logo .fy-logo__image img,
+    .fy-slot__sidebar-logo .fy-logo__image svg {
+      display: block;
+      height: 32px;
+      width: auto;
+    }
+    .fy-slot__sidebar-logo .fy-logo fy-badge { position: absolute; top: -6px; right: -6px; z-index: 1; }
+    .fy-slot__sidebar-logo .fy-logo fy-badge .fy-badge { position: static; }
+
+    .fy-slot__sidebar-links {
+      flex: 1 1 auto;
+      overflow-y: auto;
+      padding-inline: var(--fy-spacing-md, 16px);
+      padding-top: var(--fy-spacing-md, 16px);
+      padding-bottom: var(--fy-spacing-md, 16px);
+      display: flex;
+      flex-direction: column;
+      gap: var(--fy-spacing-sm, 8px);
+    }
+    .fy-slot__sidebar-links > * {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fy-spacing-sm, 8px);
+    }
+    .fy-slot--sidebar .fy-nav-link {
+      width: 100%;
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
+    }
+
+    .fy-slot__sidebar-footer {
+      flex-shrink: 0;
+      border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
+      padding: var(--fy-spacing-md, 16px);
+      display: flex;
+      flex-direction: column;
+      gap: var(--fy-spacing-sm, 8px);
+    }
+
+    .fy-slot__copyright--mobile { display: none; }
+    .fy-slot__copyright--desktop { display: block; }
+    
+    .fy-slot__copyright {
+      font-size: var(--fy-typography-fontSize-sm, 12px);
+      color: var(--fy-colors-secondary, #6b7280);
+    }
+
+    .fy-slot__copyright-text {
+      position: relative;
+      display: inline-block;
+      font-weight: var(--fy-typography-fontWeight-bold, 600);
+      background: linear-gradient(
+        120deg, 
+        var(--fy-colors-secondary, #6b7280) 0%, 
+        var(--fy-colors-secondary, #6b7280) 40%, 
+        var(--fy-colors-white, #ffffff) 50%, 
+        var(--fy-colors-secondary, #6b7280) 60%, 
+        var(--fy-colors-secondary, #6b7280) 100%
+      );
+      background-size: 200% auto;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      color: transparent;
+      animation: fy-copyright-shine var(--fy-copyright-shine-duration, 12s) linear infinite;
+    }
+
+    @keyframes fy-copyright-shine {
+      0% { background-position: 200% center; }
+      100% { background-position: -200% center; }
+    }
+
+    .fy-animations-disabled .fy-slot__copyright-text {
+      animation: none;
+      background: none;
+      -webkit-background-clip: initial;
+      -webkit-text-fill-color: initial;
+      color: var(--fy-colors-secondary, #6b7280);
+    }
+
+    .fy-sidebar-toggle {
+      display: none;
+      border-radius: var(--fy-layout-sidebar-toggle-borderRadius, 999px);
+      background-color: var(--fy-layout-sidebar-toggle-background, var(--fy-colors-primary, #2563eb));
+      color: var(--fy-layout-sidebar-toggle-textColor, #fff);
+    }
+
+    .fy-slot--content {
+      padding: var(--fy-layout-content-padding, var(--fy-spacing-lg, 24px));
+      overflow-y: auto;
+    }
+
+    @keyframes fy-copyright-shimmer {
+      0% {
+        background-position: 0% 50%;
+      }
+      50% {
+        background-position: 100% 50%;
+      }
+      100% {
+        background-position: 0% 50%;
+      }
+    }
+
+    @media (max-width: 768px) {
+      .fy-slot--header {
+        padding: 0;
+      }
+      .fy-slot__header-shell { 
+        align-items: center;
+        padding: 0 var(--fy-spacing-md, 16px);
+        background-color: var(--fy-layout-header-background, var(--fy-colors-surface, #ffffff));
+        z-index: 110;
+      }
+      .fy-slot__header-left { 
+        flex: 0 0 auto; 
+        position: relative;
+        z-index: 110;
+      }
+      .fy-slot__header-menus {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        width: 100vw;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: inherit;
+        border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
+        padding: var(--fy-spacing-md, 16px);
+        max-height: 0;
+        overflow: hidden;
+        opacity: 0;
+        transform: translateY(-8px);
+        transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
+        z-index: 110;
+        gap: var(--fy-spacing-lg, 24px);
+      }
+      .fy-slot__header-menus--open {
+        max-height: 80vh;
+        opacity: 1;
+        transform: translateY(0);
+        overflow: visible;
+      }
+      .fy-slot__header-links {
+        display: flex;
+        flex-direction: column;
+        gap: var(--fy-spacing-md, 16px);
+        width: 100%;
+        align-items: stretch;
+      }
+      .fy-slot__header-links .fy-nav-link {
+        width: 100%;
+        justify-content: center;
+      }
+
+      .fy-slot__header-meta {
+        flex: 1;
+        justify-content: flex-end;
+        position: relative;
+        z-index: 110;
+      }
+
+      .fy-slot__header-links-right-meta {
+        display: block !important;
+        width: 100%;
+      }
+      
+      .fy-slot__header-links-right-meta .fy-nav-link {
+        width: 100%;
+        justify-content: center;
+      }
+
+      .fy-slot__header-meta ::ng-deep fy-notification-menu {
+        display: block !important;
+      }
+
+      .fy-slot__header-menus ::ng-deep fy-notification-menu {
+        display: none !important;
+      }
+
+      .fy-slot__copyright--mobile {
+        display: block;
+        margin-top: auto;
+        padding-top: var(--fy-spacing-md);
+        border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.05));
+        width: 100%;
+        text-align: center;
+      }
+      .fy-slot__copyright--desktop {
+        display: none;
+      }
+
+      .fy-slot__header-toggle {
+        display: inline-flex;
+      }
+      .fy-slot--sidebar {
+        height: 0;
+        grid-area: unset !important;
+        min-width: 0 !important;
+        width: 0 !important;
+        overflow: hidden !important;
+      }
+
+      .fy-slot--sidebar .fy-slot__panel {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: var(--fy-layout-sidebar-width, 260px);
+        max-width: 80vw;
+        background-color: var(--fy-colors-surface, #fff);
+        transform: translateX(-100%);
+        opacity: 0;
+        transition: transform 0.25s ease-out, opacity 0.25s ease-out;
+        z-index: 110;
+        overflow-y: auto;
+        pointer-events: none;
+      }
+
+      .fy-slot--sidebar .fy-slot__panel.fy-slot__panel--open {
+        transform: translateX(0);
+        opacity: 1;
+        box-shadow: 0 10px 40px rgba(0,0,0,0.35);
+        pointer-events: auto;
+      }
+
+      .fy-layout--app-layout .fy-slot--content {
+        width: 100%;
+      }
+
+      .fy-sidebar-toggle {
+        position: fixed;
+        bottom: 16px;
+        left: 16px;
+        width: 40px;
+        height: 40px;
+        border-radius: var(--fy-layout-sidebar-toggle-borderRadius, 999px);
+        border: 1px solid var(--fy-layout-sidebar-toggle-borderColor, transparent);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--fy-layout-sidebar-toggle-background, var(--fy-colors-primary, #2563eb));
+        color: var(--fy-layout-sidebar-toggle-textColor, #fff);
+        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+        cursor: pointer;
+        z-index: 120;
+      }
+
+      .fy-sidebar-toggle.fy-sidebar-toggle--tongue {
+        left: 0;
+        transform: translateX(-50%);
+        bottom: auto;
+      }
+      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos="top"] { top: 16px; }
+      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos="middle"] { top: 50%; transform: translate(-50%, -50%); }
+      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos="bottom"] { top: auto; bottom: 16px; }
+
+      .fy-sidebar-toggle span {
+        display: inline;
+      }
+
+      .fy-sidebar-toggle .fy-icon { font-size: 18px; }
+    }
+
+    @media (min-width: 769px) {
+      .fy-slot__header-menus { display: contents; }
+      .fy-slot__header-links { max-height: none; opacity: 1; transform: none; position: static; padding: 0; border: 0; display: flex; }
+
+      .fy-slot__header-toggle {
+        display: none;
+      }
+      .fy-slot--sidebar .fy-slot__panel {
+        position: relative;
+        transform: none;
+        box-shadow: none;
+        width: 100%;
+        max-width: none;
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .fy-sidebar-toggle {
+        display: none;
+      }
+    }
+  `],
+        encapsulation: ViewEncapsulation.None
+    }),
+    __metadata("design:paramtypes", [])
+], FySlotComponent);
+export { FySlotComponent };