@fylib/adapter-angular 0.2.3 → 0.2.7

package/dist/layouts/slot.component.js

@@ -1,19 +1,12 @@
-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 {
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class FySlotComponent {
     get currentYear() {
         return new Date().getFullYear();
     }
@@ -187,159 +180,9 @@ let FySlotComponent = class FySlotComponent {
             }
         }, 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: `
+}
+FySlotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FySlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FySlotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FySlotComponent, isStandalone: true, selector: "fy-slot", inputs: { name: "name", activeAnimations: "activeAnimations", activeEffects: "activeEffects", customStyles: "customStyles", fixedSidebar: "fixedSidebar", copyrightText: "copyrightText", copyrightShineDuration: "copyrightShineDuration", openEffect: "openEffect", closeEffect: "closeEffect", headerMenuAnimationOpen: "headerMenuAnimationOpen", headerMenuAnimationClose: "headerMenuAnimationClose", headerLinksAlign: "headerLinksAlign", headerLogoImgSrc: "headerLogoImgSrc", headerLogoSvgSrc: "headerLogoSvgSrc", headerLogoAlt: "headerLogoAlt", headerLogoBadgeText: "headerLogoBadgeText", headerLogoBadgeBG: "headerLogoBadgeBG", headerLogoBadgeTextColor: "headerLogoBadgeTextColor", headerLogoBadgeRadius: "headerLogoBadgeRadius", headerLogoBadgeShine: "headerLogoBadgeShine", headerLogoColorLight: "headerLogoColorLight", headerLogoColorDark: "headerLogoColorDark", sidebarLogoImgSrc: "sidebarLogoImgSrc", sidebarLogoSvgSrc: "sidebarLogoSvgSrc", sidebarLogoAlt: "sidebarLogoAlt", headerLogoFilter: "headerLogoFilter", sidebarLogoFilter: "sidebarLogoFilter", sidebarLogoColorLight: "sidebarLogoColorLight", sidebarLogoColorDark: "sidebarLogoColorDark", sidebarLogoBadgeText: "sidebarLogoBadgeText", sidebarLogoBadgeBG: "sidebarLogoBadgeBG", sidebarLogoBadgeTextColor: "sidebarLogoBadgeTextColor", sidebarLogoBadgeRadius: "sidebarLogoBadgeRadius", sidebarLogoBadgeShine: "sidebarLogoBadgeShine" }, host: { properties: { "style.grid-area": "name", "class": "hostClass", "attr.data-slot": "name", "class.fy-animations-disabled": "this.animationsDisabled", "style": "this.hostStyles" } }, ngImport: i0, template: `
     <ng-template #projected>
       <ng-content></ng-content>
     </ng-template>
@@ -496,442 +339,243 @@ FySlotComponent = __decorate([
         <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; }
+  `, isInline: true, styles: ["\n    .fy-slot { display: block; position: relative; }\n\n    body.fy-no-scroll {\n      overflow: hidden !important;\n    }\n\n    .fy-slot__overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100vw;\n      height: 100vh;\n      background-color: rgba(0, 0, 0, 0.45);\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.25s ease;\n      z-index: 100;\n    }\n\n    .fy-slot__overlay--open {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .fy-slot--header {\n      z-index: 110;\n      min-height: var(--fy-layout-header-height, 64px);\n      padding: 0;\n      display: flex;\n      align-items: center;\n    }\n\n    .fy-slot__header-shell {\n      display: grid;\n      grid-auto-flow: column;\n      grid-template-columns: auto 1fr auto auto;\n      align-items: center;\n      gap: var(--fy-spacing-md, 16px);\n      width: 100%;\n      position: relative;\n      z-index: 110;\n      min-height: inherit;\n      padding: var(--fy-layout-header-padding, 0 24px);\n      background-color: var(--fy-layout-header-background, var(--fy-colors-surface, #fff));\n      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));\n      box-shadow: var(--fy-layout-header-shadow, 0 1px 0 rgba(0,0,0,0.06));\n    }\n\n    .fy-slot__header-left { display: flex; align-items: center; gap: var(--fy-spacing-md, 16px); flex-shrink: 0; }\n    .fy-slot__header-menus { display: contents; }\n    .fy-slot__header-links {\n      display: flex;\n      align-items: center;\n      gap: var(--fy-spacing-md, 16px);\n      min-width: 0;\n      width: max-content;\n    }\n    .fy-slot__header-links.fy-slot__header-links--left { justify-self: start; justify-content: flex-start; }\n    .fy-slot__header-links.fy-slot__header-links--center { justify-self: center; justify-content: center; }\n    .fy-slot__header-links.fy-slot__header-links--right { justify-self: end; justify-content: flex-end; }\n    .fy-slot__header-left .fy-logo { position: relative; display: inline-block; }\n    .fy-slot__header-left .fy-logo__image img,\n    .fy-slot__header-left .fy-logo__image svg { display: block; height: 28px; width: auto; }\n    .fy-slot__header-left .fy-logo fy-badge { position: absolute; top: -6px; right: -6px; z-index: 1; }\n    .fy-slot__header-left .fy-logo fy-badge .fy-badge { position: static; }\n\n    .fy-slot__header-meta {\n      display: flex;\n      align-items: center;\n      gap: var(--fy-spacing-md, 16px);\n      flex-shrink: 0;\n    }\n\n    .fy-slot__header-links-right-meta {\n      display: none;\n    }\n\n    .fy-slot__header-meta ::ng-deep fy-notification-menu {\n      display: block;\n    }\n\n    .fy-slot__header-toggle {\n      display: none;\n      width: 40px;\n      height: 40px;\n      border-radius: var(--fy-layout-header-toggle-borderRadius, 999px);\n      border: 1px solid var(--fy-layout-header-toggle-borderColor, transparent);\n      background-color: var(--fy-layout-header-toggle-background, var(--fy-colors-primary, #2563eb));\n      color: var(--fy-layout-header-toggle-textColor, #fff);\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      font-size: 18px;\n    }\n\n    .fy-slot__header-toggle .fy-icon { font-size: 18px; }\n    .fy-slot__header-shell {\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n    .fy-slot--header .fy-nav-link {\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n\n    .fy-slot--sidebar {\n      min-width: var(--fy-layout-sidebar-width, 260px);\n      padding: var(--fy-layout-sidebar-padding, 16px 0);\n      border-right: 1px solid var(--fy-colors-border, rgba(0,0,0,0.1));\n      background-color: var(--fy-layout-sidebar-background, var(--fy-colors-surface, transparent));\n    }\n\n    .fy-slot--sidebar-fixed {\n      height: 100%;\n      max-height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .fy-slot--sidebar .fy-slot__panel {\n      height: 100%;\n      display: block;\n      background-color: var(--fy-layout-sidebar-background, var(--fy-colors-surface, #fff));\n      box-shadow: var(--fy-layout-sidebar-shadow, none);\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text, inherit));\n    }\n\n    .fy-slot__sidebar-inner {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n    .fy-slot__sidebar-logo {\n      padding: var(--fy-spacing-md, 16px);\n      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n    .fy-slot__sidebar-logo .fy-logo {\n      position: relative;\n      display: inline-block;\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n    .fy-slot__sidebar-logo .fy-logo__image img,\n    .fy-slot__sidebar-logo .fy-logo__image svg {\n      display: block;\n      height: 32px;\n      width: auto;\n    }\n    .fy-slot__sidebar-logo .fy-logo fy-badge { position: absolute; top: -6px; right: -6px; z-index: 1; }\n    .fy-slot__sidebar-logo .fy-logo fy-badge .fy-badge { position: static; }\n\n    .fy-slot__sidebar-links {\n      flex: 1 1 auto;\n      overflow-y: auto;\n      padding-inline: var(--fy-spacing-md, 16px);\n      padding-top: var(--fy-spacing-md, 16px);\n      padding-bottom: var(--fy-spacing-md, 16px);\n      display: flex;\n      flex-direction: column;\n      gap: var(--fy-spacing-sm, 8px);\n    }\n    .fy-slot__sidebar-links > * {\n      display: flex;\n      flex-direction: column;\n      gap: var(--fy-spacing-sm, 8px);\n    }\n    .fy-slot--sidebar .fy-nav-link {\n      width: 100%;\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n\n    .fy-slot__sidebar-footer {\n      flex-shrink: 0;\n      border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));\n      padding: var(--fy-spacing-md, 16px);\n      display: flex;\n      flex-direction: column;\n      gap: var(--fy-spacing-sm, 8px);\n    }\n\n    .fy-slot__copyright--mobile { display: none; }\n    .fy-slot__copyright--desktop { display: block; }\n    \n    .fy-slot__copyright {\n      font-size: var(--fy-typography-fontSize-sm, 12px);\n      color: var(--fy-colors-secondary, #6b7280);\n    }\n\n    .fy-slot__copyright-text {\n      position: relative;\n      display: inline-block;\n      font-weight: var(--fy-typography-fontWeight-bold, 600);\n      background: linear-gradient(\n        120deg, \n        var(--fy-colors-secondary, #6b7280) 0%, \n        var(--fy-colors-secondary, #6b7280) 40%, \n        var(--fy-colors-white, #ffffff) 50%, \n        var(--fy-colors-secondary, #6b7280) 60%, \n        var(--fy-colors-secondary, #6b7280) 100%\n      );\n      background-size: 200% auto;\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      color: transparent;\n      animation: fy-copyright-shine var(--fy-copyright-shine-duration, 12s) linear infinite;\n    }\n\n    @keyframes fy-copyright-shine {\n      0% { background-position: 200% center; }\n      100% { background-position: -200% center; }\n    }\n\n    .fy-animations-disabled .fy-slot__copyright-text {\n      animation: none;\n      background: none;\n      -webkit-background-clip: initial;\n      -webkit-text-fill-color: initial;\n      color: var(--fy-colors-secondary, #6b7280);\n    }\n\n    .fy-sidebar-toggle {\n      display: none;\n      border-radius: var(--fy-layout-sidebar-toggle-borderRadius, 999px);\n      background-color: var(--fy-layout-sidebar-toggle-background, var(--fy-colors-primary, #2563eb));\n      color: var(--fy-layout-sidebar-toggle-textColor, #fff);\n    }\n\n    .fy-slot--content {\n      padding: var(--fy-layout-content-padding, var(--fy-spacing-lg, 24px));\n      overflow-y: auto;\n    }\n\n    @keyframes fy-copyright-shimmer {\n      0% {\n        background-position: 0% 50%;\n      }\n      50% {\n        background-position: 100% 50%;\n      }\n      100% {\n        background-position: 0% 50%;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .fy-slot--header {\n        padding: 0;\n      }\n      .fy-slot__header-shell { \n        align-items: center;\n        padding: 0 var(--fy-spacing-md, 16px);\n        background-color: var(--fy-layout-header-background, var(--fy-colors-surface, #ffffff));\n        z-index: 110;\n      }\n      .fy-slot__header-left { \n        flex: 0 0 auto; \n        position: relative;\n        z-index: 110;\n      }\n      .fy-slot__header-menus {\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        width: 100vw;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        background-color: inherit;\n        border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));\n        padding: var(--fy-spacing-md, 16px);\n        max-height: 0;\n        overflow: hidden;\n        opacity: 0;\n        transform: translateY(-8px);\n        transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;\n        z-index: 110;\n        gap: var(--fy-spacing-lg, 24px);\n      }\n      .fy-slot__header-menus--open {\n        max-height: 80vh;\n        opacity: 1;\n        transform: translateY(0);\n        overflow: visible;\n      }\n      .fy-slot__header-links {\n        display: flex;\n        flex-direction: column;\n        gap: var(--fy-spacing-md, 16px);\n        width: 100%;\n        align-items: stretch;\n      }\n      .fy-slot__header-links .fy-nav-link {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .fy-slot__header-meta {\n        flex: 1;\n        justify-content: flex-end;\n        position: relative;\n        z-index: 110;\n      }\n\n      .fy-slot__header-links-right-meta {\n        display: block !important;\n        width: 100%;\n      }\n      \n      .fy-slot__header-links-right-meta .fy-nav-link {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .fy-slot__header-meta ::ng-deep fy-notification-menu {\n        display: block !important;\n      }\n\n      .fy-slot__header-menus ::ng-deep fy-notification-menu {\n        display: none !important;\n      }\n\n      .fy-slot__copyright--mobile {\n        display: block;\n        margin-top: auto;\n        padding-top: var(--fy-spacing-md);\n        border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.05));\n        width: 100%;\n        text-align: center;\n      }\n      .fy-slot__copyright--desktop {\n        display: none;\n      }\n\n      .fy-slot__header-toggle {\n        display: inline-flex;\n      }\n      .fy-slot--sidebar {\n        height: 0;\n        grid-area: unset !important;\n        min-width: 0 !important;\n        width: 0 !important;\n        overflow: hidden !important;\n      }\n\n      .fy-slot--sidebar .fy-slot__panel {\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: var(--fy-layout-sidebar-width, 260px);\n        max-width: 80vw;\n        background-color: var(--fy-colors-surface, #fff);\n        transform: translateX(-100%);\n        opacity: 0;\n        transition: transform 0.25s ease-out, opacity 0.25s ease-out;\n        z-index: 110;\n        overflow-y: auto;\n        pointer-events: none;\n      }\n\n      .fy-slot--sidebar .fy-slot__panel.fy-slot__panel--open {\n        transform: translateX(0);\n        opacity: 1;\n        box-shadow: 0 10px 40px rgba(0,0,0,0.35);\n        pointer-events: auto;\n      }\n\n      .fy-layout--app-layout .fy-slot--content {\n        width: 100%;\n      }\n\n      .fy-sidebar-toggle {\n        position: fixed;\n        bottom: 16px;\n        left: 16px;\n        width: 40px;\n        height: 40px;\n        border-radius: var(--fy-layout-sidebar-toggle-borderRadius, 999px);\n        border: 1px solid var(--fy-layout-sidebar-toggle-borderColor, transparent);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        background-color: var(--fy-layout-sidebar-toggle-background, var(--fy-colors-primary, #2563eb));\n        color: var(--fy-layout-sidebar-toggle-textColor, #fff);\n        box-shadow: 0 8px 24px rgba(0,0,0,0.2);\n        cursor: pointer;\n        z-index: 120;\n      }\n\n      .fy-sidebar-toggle.fy-sidebar-toggle--tongue {\n        left: 0;\n        transform: translateX(-50%);\n        bottom: auto;\n      }\n      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos=\"top\"] { top: 16px; }\n      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos=\"middle\"] { top: 50%; transform: translate(-50%, -50%); }\n      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos=\"bottom\"] { top: auto; bottom: 16px; }\n\n      .fy-sidebar-toggle span {\n        display: inline;\n      }\n\n      .fy-sidebar-toggle .fy-icon { font-size: 18px; }\n    }\n\n    @media (min-width: 769px) {\n      .fy-slot__header-menus { display: contents; }\n      .fy-slot__header-links { max-height: none; opacity: 1; transform: none; position: static; padding: 0; border: 0; display: flex; }\n\n      .fy-slot__header-toggle {\n        display: none;\n      }\n      .fy-slot--sidebar .fy-slot__panel {\n        position: relative;\n        transform: none;\n        box-shadow: none;\n        width: 100%;\n        max-width: none;\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .fy-sidebar-toggle {\n        display: none;\n      }\n    }\n  "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FyIconComponent, selector: "fy-icon", inputs: ["name", "size", "color", "strokeWidth", "variant", "set"] }, { kind: "component", type: FyBadgeComponent, selector: "fy-badge", inputs: ["text", "background", "textColor", "borderRadius", "shine"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FySlotComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fy-slot', standalone: true, imports: [CommonModule, FyIconComponent, FyBadgeComponent], template: `
+    <ng-template #projected>
+      <ng-content></ng-content>
+    </ng-template>
 
-      .fy-slot__header-toggle {
-        display: none;
+    @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>
       }
-      .fy-slot--sidebar .fy-slot__panel {
-        position: relative;
-        transform: none;
-        box-shadow: none;
-        width: 100%;
-        max-width: none;
-        opacity: 1;
-        pointer-events: auto;
+      @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>
       }
 
-      .fy-sidebar-toggle {
-        display: none;
+      @default {
+        <ng-container [ngTemplateOutlet]="projected"></ng-container>
       }
     }
-  `],
-        encapsulation: ViewEncapsulation.None
-    }),
-    __metadata("design:paramtypes", [])
-], FySlotComponent);
-export { FySlotComponent };
+  `, host: {
+                        '[style.grid-area]': 'name',
+                        '[class]': 'hostClass',
+                        '[attr.data-slot]': 'name'
+                    }, encapsulation: ViewEncapsulation.None, styles: ["\n    .fy-slot { display: block; position: relative; }\n\n    body.fy-no-scroll {\n      overflow: hidden !important;\n    }\n\n    .fy-slot__overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100vw;\n      height: 100vh;\n      background-color: rgba(0, 0, 0, 0.45);\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.25s ease;\n      z-index: 100;\n    }\n\n    .fy-slot__overlay--open {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .fy-slot--header {\n      z-index: 110;\n      min-height: var(--fy-layout-header-height, 64px);\n      padding: 0;\n      display: flex;\n      align-items: center;\n    }\n\n    .fy-slot__header-shell {\n      display: grid;\n      grid-auto-flow: column;\n      grid-template-columns: auto 1fr auto auto;\n      align-items: center;\n      gap: var(--fy-spacing-md, 16px);\n      width: 100%;\n      position: relative;\n      z-index: 110;\n      min-height: inherit;\n      padding: var(--fy-layout-header-padding, 0 24px);\n      background-color: var(--fy-layout-header-background, var(--fy-colors-surface, #fff));\n      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));\n      box-shadow: var(--fy-layout-header-shadow, 0 1px 0 rgba(0,0,0,0.06));\n    }\n\n    .fy-slot__header-left { display: flex; align-items: center; gap: var(--fy-spacing-md, 16px); flex-shrink: 0; }\n    .fy-slot__header-menus { display: contents; }\n    .fy-slot__header-links {\n      display: flex;\n      align-items: center;\n      gap: var(--fy-spacing-md, 16px);\n      min-width: 0;\n      width: max-content;\n    }\n    .fy-slot__header-links.fy-slot__header-links--left { justify-self: start; justify-content: flex-start; }\n    .fy-slot__header-links.fy-slot__header-links--center { justify-self: center; justify-content: center; }\n    .fy-slot__header-links.fy-slot__header-links--right { justify-self: end; justify-content: flex-end; }\n    .fy-slot__header-left .fy-logo { position: relative; display: inline-block; }\n    .fy-slot__header-left .fy-logo__image img,\n    .fy-slot__header-left .fy-logo__image svg { display: block; height: 28px; width: auto; }\n    .fy-slot__header-left .fy-logo fy-badge { position: absolute; top: -6px; right: -6px; z-index: 1; }\n    .fy-slot__header-left .fy-logo fy-badge .fy-badge { position: static; }\n\n    .fy-slot__header-meta {\n      display: flex;\n      align-items: center;\n      gap: var(--fy-spacing-md, 16px);\n      flex-shrink: 0;\n    }\n\n    .fy-slot__header-links-right-meta {\n      display: none;\n    }\n\n    .fy-slot__header-meta ::ng-deep fy-notification-menu {\n      display: block;\n    }\n\n    .fy-slot__header-toggle {\n      display: none;\n      width: 40px;\n      height: 40px;\n      border-radius: var(--fy-layout-header-toggle-borderRadius, 999px);\n      border: 1px solid var(--fy-layout-header-toggle-borderColor, transparent);\n      background-color: var(--fy-layout-header-toggle-background, var(--fy-colors-primary, #2563eb));\n      color: var(--fy-layout-header-toggle-textColor, #fff);\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      font-size: 18px;\n    }\n\n    .fy-slot__header-toggle .fy-icon { font-size: 18px; }\n    .fy-slot__header-shell {\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n    .fy-slot--header .fy-nav-link {\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n\n    .fy-slot--sidebar {\n      min-width: var(--fy-layout-sidebar-width, 260px);\n      padding: var(--fy-layout-sidebar-padding, 16px 0);\n      border-right: 1px solid var(--fy-colors-border, rgba(0,0,0,0.1));\n      background-color: var(--fy-layout-sidebar-background, var(--fy-colors-surface, transparent));\n    }\n\n    .fy-slot--sidebar-fixed {\n      height: 100%;\n      max-height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .fy-slot--sidebar .fy-slot__panel {\n      height: 100%;\n      display: block;\n      background-color: var(--fy-layout-sidebar-background, var(--fy-colors-surface, #fff));\n      box-shadow: var(--fy-layout-sidebar-shadow, none);\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text, inherit));\n    }\n\n    .fy-slot__sidebar-inner {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n    .fy-slot__sidebar-logo {\n      padding: var(--fy-spacing-md, 16px);\n      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n    .fy-slot__sidebar-logo .fy-logo {\n      position: relative;\n      display: inline-block;\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n    .fy-slot__sidebar-logo .fy-logo__image img,\n    .fy-slot__sidebar-logo .fy-logo__image svg {\n      display: block;\n      height: 32px;\n      width: auto;\n    }\n    .fy-slot__sidebar-logo .fy-logo fy-badge { position: absolute; top: -6px; right: -6px; z-index: 1; }\n    .fy-slot__sidebar-logo .fy-logo fy-badge .fy-badge { position: static; }\n\n    .fy-slot__sidebar-links {\n      flex: 1 1 auto;\n      overflow-y: auto;\n      padding-inline: var(--fy-spacing-md, 16px);\n      padding-top: var(--fy-spacing-md, 16px);\n      padding-bottom: var(--fy-spacing-md, 16px);\n      display: flex;\n      flex-direction: column;\n      gap: var(--fy-spacing-sm, 8px);\n    }\n    .fy-slot__sidebar-links > * {\n      display: flex;\n      flex-direction: column;\n      gap: var(--fy-spacing-sm, 8px);\n    }\n    .fy-slot--sidebar .fy-nav-link {\n      width: 100%;\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n\n    .fy-slot__sidebar-footer {\n      flex-shrink: 0;\n      border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));\n      padding: var(--fy-spacing-md, 16px);\n      display: flex;\n      flex-direction: column;\n      gap: var(--fy-spacing-sm, 8px);\n    }\n\n    .fy-slot__copyright--mobile { display: none; }\n    .fy-slot__copyright--desktop { display: block; }\n    \n    .fy-slot__copyright {\n      font-size: var(--fy-typography-fontSize-sm, 12px);\n      color: var(--fy-colors-secondary, #6b7280);\n    }\n\n    .fy-slot__copyright-text {\n      position: relative;\n      display: inline-block;\n      font-weight: var(--fy-typography-fontWeight-bold, 600);\n      background: linear-gradient(\n        120deg, \n        var(--fy-colors-secondary, #6b7280) 0%, \n        var(--fy-colors-secondary, #6b7280) 40%, \n        var(--fy-colors-white, #ffffff) 50%, \n        var(--fy-colors-secondary, #6b7280) 60%, \n        var(--fy-colors-secondary, #6b7280) 100%\n      );\n      background-size: 200% auto;\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      color: transparent;\n      animation: fy-copyright-shine var(--fy-copyright-shine-duration, 12s) linear infinite;\n    }\n\n    @keyframes fy-copyright-shine {\n      0% { background-position: 200% center; }\n      100% { background-position: -200% center; }\n    }\n\n    .fy-animations-disabled .fy-slot__copyright-text {\n      animation: none;\n      background: none;\n      -webkit-background-clip: initial;\n      -webkit-text-fill-color: initial;\n      color: var(--fy-colors-secondary, #6b7280);\n    }\n\n    .fy-sidebar-toggle {\n      display: none;\n      border-radius: var(--fy-layout-sidebar-toggle-borderRadius, 999px);\n      background-color: var(--fy-layout-sidebar-toggle-background, var(--fy-colors-primary, #2563eb));\n      color: var(--fy-layout-sidebar-toggle-textColor, #fff);\n    }\n\n    .fy-slot--content {\n      padding: var(--fy-layout-content-padding, var(--fy-spacing-lg, 24px));\n      overflow-y: auto;\n    }\n\n    @keyframes fy-copyright-shimmer {\n      0% {\n        background-position: 0% 50%;\n      }\n      50% {\n        background-position: 100% 50%;\n      }\n      100% {\n        background-position: 0% 50%;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .fy-slot--header {\n        padding: 0;\n      }\n      .fy-slot__header-shell { \n        align-items: center;\n        padding: 0 var(--fy-spacing-md, 16px);\n        background-color: var(--fy-layout-header-background, var(--fy-colors-surface, #ffffff));\n        z-index: 110;\n      }\n      .fy-slot__header-left { \n        flex: 0 0 auto; \n        position: relative;\n        z-index: 110;\n      }\n      .fy-slot__header-menus {\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        width: 100vw;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        background-color: inherit;\n        border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));\n        padding: var(--fy-spacing-md, 16px);\n        max-height: 0;\n        overflow: hidden;\n        opacity: 0;\n        transform: translateY(-8px);\n        transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;\n        z-index: 110;\n        gap: var(--fy-spacing-lg, 24px);\n      }\n      .fy-slot__header-menus--open {\n        max-height: 80vh;\n        opacity: 1;\n        transform: translateY(0);\n        overflow: visible;\n      }\n      .fy-slot__header-links {\n        display: flex;\n        flex-direction: column;\n        gap: var(--fy-spacing-md, 16px);\n        width: 100%;\n        align-items: stretch;\n      }\n      .fy-slot__header-links .fy-nav-link {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .fy-slot__header-meta {\n        flex: 1;\n        justify-content: flex-end;\n        position: relative;\n        z-index: 110;\n      }\n\n      .fy-slot__header-links-right-meta {\n        display: block !important;\n        width: 100%;\n      }\n      \n      .fy-slot__header-links-right-meta .fy-nav-link {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .fy-slot__header-meta ::ng-deep fy-notification-menu {\n        display: block !important;\n      }\n\n      .fy-slot__header-menus ::ng-deep fy-notification-menu {\n        display: none !important;\n      }\n\n      .fy-slot__copyright--mobile {\n        display: block;\n        margin-top: auto;\n        padding-top: var(--fy-spacing-md);\n        border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.05));\n        width: 100%;\n        text-align: center;\n      }\n      .fy-slot__copyright--desktop {\n        display: none;\n      }\n\n      .fy-slot__header-toggle {\n        display: inline-flex;\n      }\n      .fy-slot--sidebar {\n        height: 0;\n        grid-area: unset !important;\n        min-width: 0 !important;\n        width: 0 !important;\n        overflow: hidden !important;\n      }\n\n      .fy-slot--sidebar .fy-slot__panel {\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        width: var(--fy-layout-sidebar-width, 260px);\n        max-width: 80vw;\n        background-color: var(--fy-colors-surface, #fff);\n        transform: translateX(-100%);\n        opacity: 0;\n        transition: transform 0.25s ease-out, opacity 0.25s ease-out;\n        z-index: 110;\n        overflow-y: auto;\n        pointer-events: none;\n      }\n\n      .fy-slot--sidebar .fy-slot__panel.fy-slot__panel--open {\n        transform: translateX(0);\n        opacity: 1;\n        box-shadow: 0 10px 40px rgba(0,0,0,0.35);\n        pointer-events: auto;\n      }\n\n      .fy-layout--app-layout .fy-slot--content {\n        width: 100%;\n      }\n\n      .fy-sidebar-toggle {\n        position: fixed;\n        bottom: 16px;\n        left: 16px;\n        width: 40px;\n        height: 40px;\n        border-radius: var(--fy-layout-sidebar-toggle-borderRadius, 999px);\n        border: 1px solid var(--fy-layout-sidebar-toggle-borderColor, transparent);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        background-color: var(--fy-layout-sidebar-toggle-background, var(--fy-colors-primary, #2563eb));\n        color: var(--fy-layout-sidebar-toggle-textColor, #fff);\n        box-shadow: 0 8px 24px rgba(0,0,0,0.2);\n        cursor: pointer;\n        z-index: 120;\n      }\n\n      .fy-sidebar-toggle.fy-sidebar-toggle--tongue {\n        left: 0;\n        transform: translateX(-50%);\n        bottom: auto;\n      }\n      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos=\"top\"] { top: 16px; }\n      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos=\"middle\"] { top: 50%; transform: translate(-50%, -50%); }\n      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos=\"bottom\"] { top: auto; bottom: 16px; }\n\n      .fy-sidebar-toggle span {\n        display: inline;\n      }\n\n      .fy-sidebar-toggle .fy-icon { font-size: 18px; }\n    }\n\n    @media (min-width: 769px) {\n      .fy-slot__header-menus { display: contents; }\n      .fy-slot__header-links { max-height: none; opacity: 1; transform: none; position: static; padding: 0; border: 0; display: flex; }\n\n      .fy-slot__header-toggle {\n        display: none;\n      }\n      .fy-slot--sidebar .fy-slot__panel {\n        position: relative;\n        transform: none;\n        box-shadow: none;\n        width: 100%;\n        max-width: none;\n        opacity: 1;\n        pointer-events: auto;\n      }\n\n      .fy-sidebar-toggle {\n        display: none;\n      }\n    }\n  "] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{
+                type: Input
+            }], activeAnimations: [{
+                type: Input
+            }], activeEffects: [{
+                type: Input
+            }], customStyles: [{
+                type: Input
+            }], fixedSidebar: [{
+                type: Input
+            }], copyrightText: [{
+                type: Input
+            }], copyrightShineDuration: [{
+                type: Input
+            }], openEffect: [{
+                type: Input
+            }], closeEffect: [{
+                type: Input
+            }], headerMenuAnimationOpen: [{
+                type: Input
+            }], headerMenuAnimationClose: [{
+                type: Input
+            }], headerLinksAlign: [{
+                type: Input
+            }], headerLogoImgSrc: [{
+                type: Input
+            }], headerLogoSvgSrc: [{
+                type: Input
+            }], headerLogoAlt: [{
+                type: Input
+            }], headerLogoBadgeText: [{
+                type: Input
+            }], headerLogoBadgeBG: [{
+                type: Input
+            }], headerLogoBadgeTextColor: [{
+                type: Input
+            }], headerLogoBadgeRadius: [{
+                type: Input
+            }], headerLogoBadgeShine: [{
+                type: Input
+            }], headerLogoColorLight: [{
+                type: Input
+            }], headerLogoColorDark: [{
+                type: Input
+            }], sidebarLogoImgSrc: [{
+                type: Input
+            }], sidebarLogoSvgSrc: [{
+                type: Input
+            }], sidebarLogoAlt: [{
+                type: Input
+            }], headerLogoFilter: [{
+                type: Input
+            }], sidebarLogoFilter: [{
+                type: Input
+            }], sidebarLogoColorLight: [{
+                type: Input
+            }], sidebarLogoColorDark: [{
+                type: Input
+            }], sidebarLogoBadgeText: [{
+                type: Input
+            }], sidebarLogoBadgeBG: [{
+                type: Input
+            }], sidebarLogoBadgeTextColor: [{
+                type: Input
+            }], sidebarLogoBadgeRadius: [{
+                type: Input
+            }], sidebarLogoBadgeShine: [{
+                type: Input
+            }], animationsDisabled: [{
+                type: HostBinding,
+                args: ['class.fy-animations-disabled']
+            }], hostStyles: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });