@fylib/adapter-angular 0.2.8 → 0.3.0

package/dist/components/button.component.d.ts

@@ -14,6 +14,8 @@ export declare class FyButtonComponent extends BaseFyComponent<'fy-button'> impl
     icon?: string;
     iconName?: string;
     iconSet?: 'ph' | 'fa' | 'mdi';
+    link?: string;
+    target?: string;
     activeAnimations: boolean | null;
     activeEffects: boolean | null;
     customStyles: Record<string, string> | null;
@@ -32,5 +34,5 @@ export declare class FyButtonComponent extends BaseFyComponent<'fy-button'> impl
     handleClick(event: MouseEvent): void;
     handleHover(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FyButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FyButtonComponent, "fy-button", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "iconSet": { "alias": "iconSet"; "required": false; }; "activeAnimations": { "alias": "activeAnimations"; "required": false; }; "activeEffects": { "alias": "activeEffects"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; "hoverAnimation": { "alias": "hoverAnimation"; "required": false; }; "clickAnimation": { "alias": "clickAnimation"; "required": false; }; "successAnimation": { "alias": "successAnimation"; "required": false; }; "errorAnimation": { "alias": "errorAnimation"; "required": false; }; "hoverEffect": { "alias": "hoverEffect"; "required": false; }; "clickEffect": { "alias": "clickEffect"; "required": false; }; "successEffect": { "alias": "successEffect"; "required": false; }; "errorEffect": { "alias": "errorEffect"; "required": false; }; }, { "fyClick": "fyClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FyButtonComponent, "fy-button", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "iconSet": { "alias": "iconSet"; "required": false; }; "link": { "alias": "link"; "required": false; }; "target": { "alias": "target"; "required": false; }; "activeAnimations": { "alias": "activeAnimations"; "required": false; }; "activeEffects": { "alias": "activeEffects"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; "hoverAnimation": { "alias": "hoverAnimation"; "required": false; }; "clickAnimation": { "alias": "clickAnimation"; "required": false; }; "successAnimation": { "alias": "successAnimation"; "required": false; }; "errorAnimation": { "alias": "errorAnimation"; "required": false; }; "hoverEffect": { "alias": "hoverEffect"; "required": false; }; "clickEffect": { "alias": "clickEffect"; "required": false; }; "successEffect": { "alias": "successEffect"; "required": false; }; "errorEffect": { "alias": "errorEffect"; "required": false; }; }, { "fyClick": "fyClick"; }, never, never, true, never>;
 }

package/dist/components/button.component.js

@@ -15,6 +15,7 @@ export class FyButtonComponent extends BaseFyComponent {
         this.disabled = ButtonDefinition.defaultProps.disabled;
         this.loading = ButtonDefinition.defaultProps.loading;
         this.icon = ButtonDefinition.defaultProps.icon;
+        this.target = '_self';
         this.activeAnimations = null;
         this.activeEffects = null;
         this.customStyles = null;
@@ -58,55 +59,97 @@ export class FyButtonComponent extends BaseFyComponent {
     }
 }
 FyButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FyButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FyButtonComponent, isStandalone: true, selector: "fy-button", inputs: { label: "label", variant: "variant", size: "size", disabled: "disabled", loading: "loading", icon: "icon", iconName: "iconName", iconSet: "iconSet", activeAnimations: "activeAnimations", activeEffects: "activeEffects", customStyles: "customStyles", hoverAnimation: "hoverAnimation", clickAnimation: "clickAnimation", successAnimation: "successAnimation", errorAnimation: "errorAnimation", hoverEffect: "hoverEffect", clickEffect: "clickEffect", successEffect: "successEffect", errorEffect: "errorEffect" }, outputs: { fyClick: "fyClick" }, host: { properties: { "class.fy-animations-disabled": "this.animationsDisabled", "style": "this.hostStyles" } }, usesInheritance: true, ngImport: i0, template: `
-    <button 
-      [class]="'fy-button fy-button--' + variant + ' fy-button--' + size + animationClassSuffix"
-      [disabled]="disabled || loading"
-      (click)="handleClick($event)"
-      (mouseenter)="handleHover()"
-      [style]="hostStyles"
-      [attr.aria-busy]="loading"
-      [attr.aria-live]="loading ? 'polite' : null"
-      [attr.aria-label]="label || iconName || icon"
-    >
-      @if(loading) {
-        <span class="fy-button__loader"></span>
-      }
-      @if(iconName && !loading) {
-        <fy-icon [name]="iconName" [set]="iconSet" class="fy-button__icon"></fy-icon>
-      } @else if(icon && !loading) {
-        <span [class]="'fy-button__icon ' + icon"></span>
-      }
-      @if (label) {
-        <span class="fy-button__label">{{ label }}</span>
-      }
-    </button>
+FyButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FyButtonComponent, isStandalone: true, selector: "fy-button", inputs: { label: "label", variant: "variant", size: "size", disabled: "disabled", loading: "loading", icon: "icon", iconName: "iconName", iconSet: "iconSet", link: "link", target: "target", activeAnimations: "activeAnimations", activeEffects: "activeEffects", customStyles: "customStyles", hoverAnimation: "hoverAnimation", clickAnimation: "clickAnimation", successAnimation: "successAnimation", errorAnimation: "errorAnimation", hoverEffect: "hoverEffect", clickEffect: "clickEffect", successEffect: "successEffect", errorEffect: "errorEffect" }, outputs: { fyClick: "fyClick" }, host: { properties: { "class.fy-animations-disabled": "this.animationsDisabled", "style": "this.hostStyles" } }, usesInheritance: true, ngImport: i0, template: `
+    @if (link) {
+      <a 
+        [href]="link"
+        [target]="target"
+        [class]="'fy-button fy-button--' + variant + ' fy-button--' + size + animationClassSuffix"
+        [style]="hostStyles"
+        (click)="handleClick($event)"
+        (mouseenter)="handleHover()"
+        [attr.aria-label]="label || iconName || icon"
+      >
+        @if(iconName) {
+          <fy-icon [name]="iconName" [set]="iconSet" class="fy-button__icon"></fy-icon>
+        } @else if(icon) {
+          <span [class]="'fy-button__icon ' + icon"></span>
+        }
+        @if (label) {
+          <span class="fy-button__label">{{ label }}</span>
+        }
+      </a>
+    } @else {
+      <button 
+        [class]="'fy-button fy-button--' + variant + ' fy-button--' + size + animationClassSuffix"
+        [disabled]="disabled || loading"
+        (click)="handleClick($event)"
+        (mouseenter)="handleHover()"
+        [style]="hostStyles"
+        [attr.aria-busy]="loading"
+        [attr.aria-live]="loading ? 'polite' : null"
+        [attr.aria-label]="label || iconName || icon"
+      >
+        @if(loading) {
+          <span class="fy-button__loader"></span>
+        }
+        @if(iconName && !loading) {
+          <fy-icon [name]="iconName" [set]="iconSet" class="fy-button__icon"></fy-icon>
+        } @else if(icon && !loading) {
+          <span [class]="'fy-button__icon ' + icon"></span>
+        }
+        @if (label) {
+          <span class="fy-button__label">{{ label }}</span>
+        }
+      </button>
+    }
   `, isInline: true, styles: ["\n    .fy-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--fy-spacing-sm) var(--fy-spacing-md);\n      border-radius: var(--fy-borderRadius-md);\n      font-family: inherit;\n      font-size: var(--fy-typography-fontSize-md);\n      font-weight: var(--fy-typography-fontWeight-bold);\n      cursor: pointer;\n      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n      border: 1px solid var(--fy-effects-button-borderColor, transparent);\n      background: var(--fy-effects-button-background, var(--fy-colors-primary));\n      color: var(--fy-effects-button-textColor, var(--fy-colors-white));\n      outline: none;\n      user-select: none;\n      position: relative;\n      overflow: hidden;\n      gap: 8px;\n    }\n\n    .fy-animations-disabled, .fy-animations-disabled * {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .fy-button--secondary {\n      background: none !important;\n      background-color: var(--fy-colors-secondary) !important;\n      color: var(--fy-effects-button-textColor, var(--fy-colors-white)) !important;\n    }\n\n    .fy-button--ghost {\n      background: none !important;\n      background-color: transparent !important;\n      color: var(--fy-colors-primary) !important;\n      border-color: var(--fy-colors-primary) !important;\n    }\n\n    .fy-button--ghost:hover:not(:disabled) {\n      background-color: rgba(var(--fy-colors-primary-rgb, 59, 130, 246), 0.1);\n    }\n\n    .fy-button--danger {\n      background: none !important;\n      background-color: var(--fy-colors-danger) !important;\n      color: var(--fy-effects-button-textColor, var(--fy-colors-white)) !important;\n    }\n\n    .fy-button--sm { \n      padding: var(--fy-spacing-xs) var(--fy-spacing-sm); \n      font-size: var(--fy-typography-fontSize-sm); \n    }\n    \n    .fy-button--lg { \n      padding: var(--fy-spacing-md) var(--fy-spacing-lg); \n      font-size: var(--fy-typography-fontSize-lg); \n    }\n\n    .fy-button:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .fy-button__loader {\n      width: 16px;\n      height: 16px;\n      border: 2px solid currentColor;\n      border-bottom-color: transparent;\n      border-radius: 50%;\n      display: inline-block;\n      animation: fy-spin 0.8s linear infinite;\n      flex-shrink: 0;\n    }\n\n    @keyframes fy-spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n  "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FyIconComponent, selector: "fy-icon", inputs: ["name", "size", "color", "strokeWidth", "variant", "set"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fy-button', standalone: true, imports: [CommonModule, FyIconComponent], template: `
-    <button 
-      [class]="'fy-button fy-button--' + variant + ' fy-button--' + size + animationClassSuffix"
-      [disabled]="disabled || loading"
-      (click)="handleClick($event)"
-      (mouseenter)="handleHover()"
-      [style]="hostStyles"
-      [attr.aria-busy]="loading"
-      [attr.aria-live]="loading ? 'polite' : null"
-      [attr.aria-label]="label || iconName || icon"
-    >
-      @if(loading) {
-        <span class="fy-button__loader"></span>
-      }
-      @if(iconName && !loading) {
-        <fy-icon [name]="iconName" [set]="iconSet" class="fy-button__icon"></fy-icon>
-      } @else if(icon && !loading) {
-        <span [class]="'fy-button__icon ' + icon"></span>
-      }
-      @if (label) {
-        <span class="fy-button__label">{{ label }}</span>
-      }
-    </button>
+    @if (link) {
+      <a 
+        [href]="link"
+        [target]="target"
+        [class]="'fy-button fy-button--' + variant + ' fy-button--' + size + animationClassSuffix"
+        [style]="hostStyles"
+        (click)="handleClick($event)"
+        (mouseenter)="handleHover()"
+        [attr.aria-label]="label || iconName || icon"
+      >
+        @if(iconName) {
+          <fy-icon [name]="iconName" [set]="iconSet" class="fy-button__icon"></fy-icon>
+        } @else if(icon) {
+          <span [class]="'fy-button__icon ' + icon"></span>
+        }
+        @if (label) {
+          <span class="fy-button__label">{{ label }}</span>
+        }
+      </a>
+    } @else {
+      <button 
+        [class]="'fy-button fy-button--' + variant + ' fy-button--' + size + animationClassSuffix"
+        [disabled]="disabled || loading"
+        (click)="handleClick($event)"
+        (mouseenter)="handleHover()"
+        [style]="hostStyles"
+        [attr.aria-busy]="loading"
+        [attr.aria-live]="loading ? 'polite' : null"
+        [attr.aria-label]="label || iconName || icon"
+      >
+        @if(loading) {
+          <span class="fy-button__loader"></span>
+        }
+        @if(iconName && !loading) {
+          <fy-icon [name]="iconName" [set]="iconSet" class="fy-button__icon"></fy-icon>
+        } @else if(icon && !loading) {
+          <span [class]="'fy-button__icon ' + icon"></span>
+        }
+        @if (label) {
+          <span class="fy-button__label">{{ label }}</span>
+        }
+      </button>
+    }
   `, encapsulation: ViewEncapsulation.None, styles: ["\n    .fy-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--fy-spacing-sm) var(--fy-spacing-md);\n      border-radius: var(--fy-borderRadius-md);\n      font-family: inherit;\n      font-size: var(--fy-typography-fontSize-md);\n      font-weight: var(--fy-typography-fontWeight-bold);\n      cursor: pointer;\n      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n      border: 1px solid var(--fy-effects-button-borderColor, transparent);\n      background: var(--fy-effects-button-background, var(--fy-colors-primary));\n      color: var(--fy-effects-button-textColor, var(--fy-colors-white));\n      outline: none;\n      user-select: none;\n      position: relative;\n      overflow: hidden;\n      gap: 8px;\n    }\n\n    .fy-animations-disabled, .fy-animations-disabled * {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .fy-button--secondary {\n      background: none !important;\n      background-color: var(--fy-colors-secondary) !important;\n      color: var(--fy-effects-button-textColor, var(--fy-colors-white)) !important;\n    }\n\n    .fy-button--ghost {\n      background: none !important;\n      background-color: transparent !important;\n      color: var(--fy-colors-primary) !important;\n      border-color: var(--fy-colors-primary) !important;\n    }\n\n    .fy-button--ghost:hover:not(:disabled) {\n      background-color: rgba(var(--fy-colors-primary-rgb, 59, 130, 246), 0.1);\n    }\n\n    .fy-button--danger {\n      background: none !important;\n      background-color: var(--fy-colors-danger) !important;\n      color: var(--fy-effects-button-textColor, var(--fy-colors-white)) !important;\n    }\n\n    .fy-button--sm { \n      padding: var(--fy-spacing-xs) var(--fy-spacing-sm); \n      font-size: var(--fy-typography-fontSize-sm); \n    }\n    \n    .fy-button--lg { \n      padding: var(--fy-spacing-md) var(--fy-spacing-lg); \n      font-size: var(--fy-typography-fontSize-lg); \n    }\n\n    .fy-button:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .fy-button__loader {\n      width: 16px;\n      height: 16px;\n      border: 2px solid currentColor;\n      border-bottom-color: transparent;\n      border-radius: 50%;\n      display: inline-block;\n      animation: fy-spin 0.8s linear infinite;\n      flex-shrink: 0;\n    }\n\n    @keyframes fy-spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n  "] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
@@ -124,6 +167,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                 type: Input
             }], iconSet: [{
                 type: Input
+            }], link: [{
+                type: Input
+            }], target: [{
+                type: Input
             }], activeAnimations: [{
                 type: Input
             }], activeEffects: [{

package/dist/components/modal.component.js

@@ -158,7 +158,7 @@ FyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", versi
         }
       </div>
     }
-  `, isInline: true, styles: ["\n    .fy-modal-overlay {\n      position: fixed;\n      inset: 0;\n      background: var(--fy-effects-modal-overlayColor, rgba(0,0,0,0.45));\n      z-index: 2000;\n    }\n    .fy-modal {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: var(--fy-effects-modal-background, var(--fy-colors-surface, #fff));\n      border: var(--fy-effects-modal-borderWidth, 1px) solid var(--fy-effects-modal-borderColor, rgba(0,0,0,0.12));\n      border-radius: var(--fy-effects-modal-borderRadius, var(--fy-borderRadius-md));\n      box-shadow: var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n      color: var(--fy-colors-text);\n      width: 90vw;\n      max-width: 640px;\n      max-height: 85vh;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      z-index: 2001;\n    } \n    .fy-modal--sm { max-width: 400px; }\n    .fy-modal--md { max-width: 640px; }\n    .fy-modal--lg { max-width: 840px; }\n    .fy-modal--xl { max-width: 1040px; }\n    .fy-modal--full { width: 96vw; height: 90vh; max-width: none; }\n\n    .fy-modal__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 12px;\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));\n    }\n    .fy-modal__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-lg, 18px);\n      font-weight: var(--fy-typography-fontWeight-bold, 700);\n    }\n    .fy-modal__subtitle {\n      margin: 0;\n      opacity: .8;\n      font-size: var(--fy-typography-fontSize-sm, 12px);\n    }\n    .fy-modal__close {\n      border: 0;\n      background: transparent;\n      cursor: pointer;\n      font-size: 20px;\n      line-height: 1;\n    }\n    .fy-modal__body {\n      padding: 16px;\n      flex: 1; \n      overflow: auto;\n    }\n    .fy-modal__footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 8px;\n      padding: 12px 16px;\n      border-top: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));\n    }\n\n    .fy-modal--status-success {\n      border-color: var(--fy-colors-success, #22c55e);\n      box-shadow: 0 0 0 3px rgba(34,197,94,0.15), var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n    }\n    .fy-modal--status-error {\n      border-color: var(--fy-colors-danger, #ef4444);\n      box-shadow: 0 0 0 3px rgba(239,68,68,0.15), var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n    }\n\n    .fy-animations-disabled, .fy-animations-disabled * {\n      transition: none !important;\n      animation: none !important;\n    }\n  "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FyButtonComponent, selector: "fy-button", inputs: ["label", "variant", "size", "disabled", "loading", "icon", "iconName", "iconSet", "activeAnimations", "activeEffects", "customStyles", "hoverAnimation", "clickAnimation", "successAnimation", "errorAnimation", "hoverEffect", "clickEffect", "successEffect", "errorEffect"], outputs: ["fyClick"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["\n    .fy-modal-overlay {\n      position: fixed;\n      inset: 0;\n      background: var(--fy-effects-modal-overlayColor, rgba(0,0,0,0.45));\n      z-index: 2000;\n    }\n    .fy-modal {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: var(--fy-effects-modal-background, var(--fy-colors-surface, #fff));\n      border: var(--fy-effects-modal-borderWidth, 1px) solid var(--fy-effects-modal-borderColor, rgba(0,0,0,0.12));\n      border-radius: var(--fy-effects-modal-borderRadius, var(--fy-borderRadius-md));\n      box-shadow: var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n      color: var(--fy-colors-text);\n      width: 90vw;\n      max-width: 640px;\n      max-height: 85vh;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      z-index: 2001;\n    } \n    .fy-modal--sm { max-width: 400px; }\n    .fy-modal--md { max-width: 640px; }\n    .fy-modal--lg { max-width: 840px; }\n    .fy-modal--xl { max-width: 1040px; }\n    .fy-modal--full { width: 96vw; height: 90vh; max-width: none; }\n\n    .fy-modal__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 12px;\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));\n    }\n    .fy-modal__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-lg, 18px);\n      font-weight: var(--fy-typography-fontWeight-bold, 700);\n    }\n    .fy-modal__subtitle {\n      margin: 0;\n      opacity: .8;\n      font-size: var(--fy-typography-fontSize-sm, 12px);\n    }\n    .fy-modal__close {\n      border: 0;\n      background: transparent;\n      cursor: pointer;\n      font-size: 20px;\n      line-height: 1;\n    }\n    .fy-modal__body {\n      padding: 16px;\n      flex: 1; \n      overflow: auto;\n    }\n    .fy-modal__footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 8px;\n      padding: 12px 16px;\n      border-top: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));\n    }\n\n    .fy-modal--status-success {\n      border-color: var(--fy-colors-success, #22c55e);\n      box-shadow: 0 0 0 3px rgba(34,197,94,0.15), var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n    }\n    .fy-modal--status-error {\n      border-color: var(--fy-colors-danger, #ef4444);\n      box-shadow: 0 0 0 3px rgba(239,68,68,0.15), var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n    }\n\n    .fy-animations-disabled, .fy-animations-disabled * {\n      transition: none !important;\n      animation: none !important;\n    }\n  "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FyButtonComponent, selector: "fy-button", inputs: ["label", "variant", "size", "disabled", "loading", "icon", "iconName", "iconSet", "link", "target", "activeAnimations", "activeEffects", "customStyles", "hoverAnimation", "clickAnimation", "successAnimation", "errorAnimation", "hoverEffect", "clickEffect", "successEffect", "errorEffect"], outputs: ["fyClick"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fy-modal', standalone: true, imports: [CommonModule, FyButtonComponent], template: `

package/dist/components/notification-menu.component.js

@@ -74,7 +74,7 @@ export class FyNotificationMenuComponent extends BaseFyComponent {
             this._notifications.set(current);
             const limit = this.resolvedConfig().limit;
             this.visibleLimit.set(Math.max(limit ?? 10, 10));
-        });
+        }, { allowSignalWrites: true });
     }
     initialLimit() {
         const limit = this.resolvedConfig().limit;

package/dist/components/table.component.js

@@ -306,7 +306,7 @@ FyTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", versi
         </footer>
       }
     </div>
-  `, isInline: true, styles: ["\n    .fy-table-container {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      background: var(--fy-effects-table-background, #fff);\n      border: 1px solid var(--fy-effects-table-borderColor, rgba(0,0,0,0.08));\n      border-radius: var(--fy-borderRadius-lg, 12px);\n      overflow: hidden;\n    }\n\n    .fy-table__header {\n      padding: var(--fy-spacing-md);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      gap: 16px;\n      flex-wrap: wrap;\n    }\n\n    .fy-table__header-tools {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex: 1;\n      justify-content: flex-end;\n    }\n\n    .fy-table__header-tools ::ng-deep [fy-table-tools] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .fy-table__actions-group {\n      display: flex;\n      gap: 6px;\n    }\n\n    @media (max-width: 640px) {\n      .fy-table__header-tools {\n        justify-content: flex-start;\n      }\n      \n      .fy-table__header-tools ::ng-deep [fy-table-tools] {\n        width: 100%;\n        overflow-x: auto;\n        padding-bottom: 4px;\n      }\n\n      .fy-table__header-tools ::ng-deep [fy-table-tools] fy-button .fy-button__label {\n        display: none;\n      }\n\n      .fy-table__header-tools ::ng-deep [fy-table-tools] fy-button .fy-button {\n        padding: var(--fy-spacing-sm);\n      }\n    }\n\n    .fy-table__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-lg);\n      font-weight: var(--fy-typography-fontWeight-bold);\n    }\n\n    .fy-table__subtitle {\n      margin: 4px 0 0;\n      font-size: var(--fy-typography-fontSize-sm);\n      color: var(--fy-colors-secondary);\n    }\n\n    .fy-table__header-tools {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex: 1;\n      justify-content: flex-end;\n    }\n\n    .fy-table__search {\n      max-width: 300px;\n      width: 100%;\n    }\n\n    .fy-table__content {\n      width: 100%;\n      overflow-x: auto;\n    }\n\n    .fy-table {\n      width: 100%;\n      border-collapse: collapse;\n      text-align: left;\n      font-size: var(--fy-typography-fontSize-md);\n    }\n\n    .fy-table th {\n      padding: var(--fy-spacing-md);\n      background: var(--fy-effects-table-headerBackground, rgba(0,0,0,0.02));\n      color: var(--fy-colors-text);\n      font-weight: var(--fy-typography-fontWeight-bold);\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      white-space: nowrap;\n    }\n\n    .fy-table td {\n      padding: var(--fy-spacing-md);\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      color: var(--fy-colors-text);\n    }\n\n    .fy-table__row:last-child td {\n      border-bottom: none;\n    }\n\n    .fy-table__row:hover {\n      background: var(--fy-effects-table-rowHoverBackground, rgba(0,0,0,0.01));\n    }\n\n    .fy-table__row--clickable {\n      cursor: pointer;\n    }\n\n    .fy-table--striped tbody tr:nth-child(even) {\n      background: var(--fy-effects-table-stripedBackground, rgba(0,0,0,0.005));\n    }\n\n    .fy-table--bordered td, \n    .fy-table--bordered th {\n      border: 1px solid var(--fy-effects-table-borderColor);\n    }\n\n    .fy-table--compact td,\n    .fy-table--compact th {\n      padding: var(--fy-spacing-sm);\n    }\n\n    .fy-table__th-content {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .fy-table__th--sortable {\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .fy-table__th--sortable:hover {\n      background: rgba(0,0,0,0.04);\n    }\n\n    .fy-table__footer {\n      padding: var(--fy-spacing-md);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-top: 1px solid var(--fy-effects-table-borderColor);\n      background: var(--fy-effects-table-headerBackground);\n    }\n\n    .fy-table__pagination {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .fy-table__page-info {\n      font-size: var(--fy-typography-fontSize-sm);\n      font-weight: var(--fy-typography-fontWeight-bold);\n    }\n\n    .fy-table__loader {\n      width: 24px;\n      height: 24px;\n      border: 3px solid var(--fy-colors-primary);\n      border-bottom-color: transparent;\n      border-radius: 50%;\n      margin: 24px auto;\n      animation: fy-spin 0.8s linear infinite;\n    }\n\n    @keyframes fy-spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    @media (max-width: 640px) {\n      .fy-table__header {\n        flex-direction: column;\n        align-items: stretch;\n      }\n      .fy-table__search {\n        max-width: 100%;\n      }\n      .fy-table__footer {\n        flex-direction: column;\n        gap: 16px;\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: FyInputComponent, selector: "fy-input", inputs: ["value", "placeholder", "type", "disabled", "readonly", "mask", "showPasswordToggle", "iconLeft", "iconRight", "iconLeftName", "iconRightName", "size", "status", "activeAnimations", "activeEffects", "customStyles", "focusAnimation", "successAnimation", "errorAnimation", "focusEffect", "successEffect", "errorEffect", "onInput", "onChange", "onFocus", "onBlur"], outputs: ["fyInput", "fyChange", "fyFocus", "fyBlur"] }, { kind: "component", type: FyButtonComponent, selector: "fy-button", inputs: ["label", "variant", "size", "disabled", "loading", "icon", "iconName", "iconSet", "activeAnimations", "activeEffects", "customStyles", "hoverAnimation", "clickAnimation", "successAnimation", "errorAnimation", "hoverEffect", "clickEffect", "successEffect", "errorEffect"], outputs: ["fyClick"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["\n    .fy-table-container {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      background: var(--fy-effects-table-background, #fff);\n      border: 1px solid var(--fy-effects-table-borderColor, rgba(0,0,0,0.08));\n      border-radius: var(--fy-borderRadius-lg, 12px);\n      overflow: hidden;\n    }\n\n    .fy-table__header {\n      padding: var(--fy-spacing-md);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      gap: 16px;\n      flex-wrap: wrap;\n    }\n\n    .fy-table__header-tools {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex: 1;\n      justify-content: flex-end;\n    }\n\n    .fy-table__header-tools ::ng-deep [fy-table-tools] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .fy-table__actions-group {\n      display: flex;\n      gap: 6px;\n    }\n\n    @media (max-width: 640px) {\n      .fy-table__header-tools {\n        justify-content: flex-start;\n      }\n      \n      .fy-table__header-tools ::ng-deep [fy-table-tools] {\n        width: 100%;\n        overflow-x: auto;\n        padding-bottom: 4px;\n      }\n\n      .fy-table__header-tools ::ng-deep [fy-table-tools] fy-button .fy-button__label {\n        display: none;\n      }\n\n      .fy-table__header-tools ::ng-deep [fy-table-tools] fy-button .fy-button {\n        padding: var(--fy-spacing-sm);\n      }\n    }\n\n    .fy-table__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-lg);\n      font-weight: var(--fy-typography-fontWeight-bold);\n    }\n\n    .fy-table__subtitle {\n      margin: 4px 0 0;\n      font-size: var(--fy-typography-fontSize-sm);\n      color: var(--fy-colors-secondary);\n    }\n\n    .fy-table__header-tools {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex: 1;\n      justify-content: flex-end;\n    }\n\n    .fy-table__search {\n      max-width: 300px;\n      width: 100%;\n    }\n\n    .fy-table__content {\n      width: 100%;\n      overflow-x: auto;\n    }\n\n    .fy-table {\n      width: 100%;\n      border-collapse: collapse;\n      text-align: left;\n      font-size: var(--fy-typography-fontSize-md);\n    }\n\n    .fy-table th {\n      padding: var(--fy-spacing-md);\n      background: var(--fy-effects-table-headerBackground, rgba(0,0,0,0.02));\n      color: var(--fy-colors-text);\n      font-weight: var(--fy-typography-fontWeight-bold);\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      white-space: nowrap;\n    }\n\n    .fy-table td {\n      padding: var(--fy-spacing-md);\n      border-bottom: 1px solid var(--fy-effects-table-borderColor);\n      color: var(--fy-colors-text);\n    }\n\n    .fy-table__row:last-child td {\n      border-bottom: none;\n    }\n\n    .fy-table__row:hover {\n      background: var(--fy-effects-table-rowHoverBackground, rgba(0,0,0,0.01));\n    }\n\n    .fy-table__row--clickable {\n      cursor: pointer;\n    }\n\n    .fy-table--striped tbody tr:nth-child(even) {\n      background: var(--fy-effects-table-stripedBackground, rgba(0,0,0,0.005));\n    }\n\n    .fy-table--bordered td, \n    .fy-table--bordered th {\n      border: 1px solid var(--fy-effects-table-borderColor);\n    }\n\n    .fy-table--compact td,\n    .fy-table--compact th {\n      padding: var(--fy-spacing-sm);\n    }\n\n    .fy-table__th-content {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .fy-table__th--sortable {\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .fy-table__th--sortable:hover {\n      background: rgba(0,0,0,0.04);\n    }\n\n    .fy-table__footer {\n      padding: var(--fy-spacing-md);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-top: 1px solid var(--fy-effects-table-borderColor);\n      background: var(--fy-effects-table-headerBackground);\n    }\n\n    .fy-table__pagination {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .fy-table__page-info {\n      font-size: var(--fy-typography-fontSize-sm);\n      font-weight: var(--fy-typography-fontWeight-bold);\n    }\n\n    .fy-table__loader {\n      width: 24px;\n      height: 24px;\n      border: 3px solid var(--fy-colors-primary);\n      border-bottom-color: transparent;\n      border-radius: 50%;\n      margin: 24px auto;\n      animation: fy-spin 0.8s linear infinite;\n    }\n\n    @keyframes fy-spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    @media (max-width: 640px) {\n      .fy-table__header {\n        flex-direction: column;\n        align-items: stretch;\n      }\n      .fy-table__search {\n        max-width: 100%;\n      }\n      .fy-table__footer {\n        flex-direction: column;\n        gap: 16px;\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: FyInputComponent, selector: "fy-input", inputs: ["value", "placeholder", "type", "disabled", "readonly", "mask", "showPasswordToggle", "iconLeft", "iconRight", "iconLeftName", "iconRightName", "size", "status", "activeAnimations", "activeEffects", "customStyles", "focusAnimation", "successAnimation", "errorAnimation", "focusEffect", "successEffect", "errorEffect", "onInput", "onChange", "onFocus", "onBlur"], outputs: ["fyInput", "fyChange", "fyFocus", "fyBlur"] }, { kind: "component", type: FyButtonComponent, selector: "fy-button", inputs: ["label", "variant", "size", "disabled", "loading", "icon", "iconName", "iconSet", "link", "target", "activeAnimations", "activeEffects", "customStyles", "hoverAnimation", "clickAnimation", "successAnimation", "errorAnimation", "hoverEffect", "clickEffect", "successEffect", "errorEffect"], outputs: ["fyClick"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fy-table', standalone: true, imports: [

package/dist/components/text.component.js

@@ -12,19 +12,17 @@ export class FyTextComponent {
         effect(async () => {
             const raw = this._raw();
             const cfg = this.fylib.config().crypto;
+            let finalValue = raw;
             if (this.cryptoEnabled && cfg?.enabled) {
                 try {
-                    const dec = await cryptoEngine.decrypt(raw, cfg);
-                    this.value.set(dec);
+                    finalValue = await cryptoEngine.decrypt(raw, cfg);
                 }
                 catch {
-                    this.value.set(raw);
+                    finalValue = raw;
                 }
             }
-            else {
-                this.value.set(raw);
-            }
-        });
+            this.value.set(finalValue);
+        }, { allowSignalWrites: true });
     }
 }
 FyTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });

package/dist/components/toast.component.js

@@ -17,6 +17,8 @@ export class FyToastComponent extends BaseFyComponent {
         this.customStyles = null;
         this.fyClose = new EventEmitter();
         this.isClosing = signal(false, ...(ngDevMode ? [{ debugName: "isClosing" }] : /* istanbul ignore next */ []));
+        // Garantir que efeitos reativos sejam permitidos se necessário no futuro
+        // (Por enquanto o Toast usa ngOnInit para disparar eventos)
     }
     ngOnInit() {
         if (this.duration > 0) {

package/dist/layouts/layout.component.d.ts

@@ -5,6 +5,7 @@ export declare class FyLayoutComponent implements OnInit, OnChanges, OnDestroy {
     private fylib;
     private platformId;
     private layoutEffectId;
+    protected currentTheme: import("@angular/core").WritableSignal<string>;
     name: string;
     activeAnimations: boolean | null;
     activeEffects: boolean | null;

package/dist/layouts/layout.component.js

@@ -1,4 +1,4 @@
-import { Component, Input, ViewEncapsulation, HostBinding, inject, effect, PLATFORM_ID } from '@angular/core';
+import { Component, Input, ViewEncapsulation, HostBinding, inject, effect, PLATFORM_ID, signal } from '@angular/core';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { FyLibService } from '../services/fylib.service';
 import { AppLayoutDefinition } from '@fylib/catalog';
@@ -13,6 +13,7 @@ export class FyLayoutComponent {
         this.fylib = inject(FyLibService);
         this.platformId = inject(PLATFORM_ID);
         this.layoutEffectId = `layout-bg-effect-${Math.random().toString(36).substr(2, 9)}`;
+        this.currentTheme = signal('default', ...(ngDevMode ? [{ debugName: "currentTheme" }] : /* istanbul ignore next */ []));
         this.name = AppLayoutDefinition.name;
         this.activeAnimations = null;
         this.activeEffects = null;
@@ -22,9 +23,14 @@ export class FyLayoutComponent {
         this.bgEffectLoop = null;
         // Reage a mudanças na configuração global de efeitos de tema (themeEffectsEnabled)
         effect(() => {
-            this.fylib.config();
+            const config = this.fylib.config();
+            // Sincronizar o sinal currentTheme de forma segura
+            const theme = config.theme?.theme;
+            if (theme) {
+                this.currentTheme.set(theme);
+            }
             this.applyBgEffect();
-        });
+        }, { allowSignalWrites: true });
     }
     ngOnInit() {
         if (!isPlatformBrowser(this.platformId))

package/dist/schematics/ng-add/index.js

@@ -4,6 +4,16 @@ exports.ngAdd = ngAdd;
 const schematics_1 = require("@angular-devkit/schematics");
 const core_1 = require("@angular-devkit/core");
 const tasks_1 = require("@angular-devkit/schematics/tasks");
+const THEMES = [
+    { id: 'default', name: 'Padrão', color: '#3b82f6', icon: 'star' },
+    { id: 'finey-workbench-1', name: 'Workbench', color: '#007aff', icon: 'briefcase' },
+    { id: 'finey-puffy-1', name: 'Puffy', color: '#ff85a2', icon: 'heart' },
+    { id: 'windows-xp', name: 'Legacy XP', color: '#3a6ea5', icon: 'monitor' },
+    { id: 'windows-7', name: 'Legacy 7', color: '#2979ff', icon: 'desktop' },
+    { id: 'christmas', name: 'Natal', color: '#af111c', icon: 'gift' },
+    { id: 'finey-nexus-1', name: 'Nexus', color: '#6366f1', icon: 'cpu' },
+    { id: 'finey-hub-1', name: 'Hub', color: '#22c55e', icon: 'layout' }
+];
 function ngAdd(options) {
     return (tree, context) => {
         return (0, schematics_1.chain)([
@@ -95,7 +105,7 @@ function updateAppComponent() {
             content = content.replace(/@Component\({/, `@Component({\n  standalone: true,\n  imports: [\n    FyThemeVarsDirective, FyLayoutComponent, FyCardComponent, FyButtonComponent, FyIconComponent, FyTextComponent\n  ],`);
         }
         // 4. Update Class Definition
-        content = content.replace(/export class (\w+) \{/, `export class $1 implements OnInit {\n  private fylib = inject(FyLibService);\n  private sse = inject(FySSEService);\n  protected readonly mode = signal<'light' | 'dark'>('light');\n\n  ngOnInit() {\n    this.fylib.setTheme(themeConfig.theme);\n    this.fylib.setMode(this.mode());\n  }\n`);
+        content = content.replace(/export class (\w+) \{/, `export class $1 implements OnInit {\n  private fylib = inject(FyLibService);\n  private sse = inject(FySSEService);\n  protected readonly mode = signal<'light' | 'dark'>('light');\n  protected readonly themes = ${JSON.stringify(THEMES, null, 2)};\n\n  ngOnInit() {\n    this.fylib.setTheme(themeConfig.theme);\n    this.fylib.setMode(this.mode());\n  }\n\n  changeTheme(theme: string) {\n    this.fylib.setTheme(theme as any);\n  }\n`);
         tree.overwrite(targetPath, content);
         return tree;
     };
@@ -145,12 +155,8 @@ function getWelcomeHTML() {
           </p>
 
           <div class="welcome-actions">
-            <a href="https://github.com/dfiney/fylib/" target="_blank">
-              <fy-button variant="primary" label="GitHub do Projeto" iconName="search"></fy-button>
-            </a>
-            <a href="https://www.linkedin.com/in/victor-barberino-373797231/" target="_blank">
-              <fy-button variant="secondary" label="LinkedIn do Autor" iconName="user"></fy-button>
-            </a>
+            <fy-button variant="primary" label="GitHub do Projeto" iconName="search" link="https://github.com/dfiney/fylib/" target="_blank"></fy-button>
+            <fy-button variant="secondary" label="LinkedIn do Autor" iconName="user" link="https://www.linkedin.com/in/victor-barberino-373797231/" target="_blank"></fy-button>
           </div>
         </div>
 
@@ -158,6 +164,27 @@ function getWelcomeHTML() {
           <fy-text text="© Finey 2026 · Built with Passion"></fy-text>
         </div>
       </fy-card>
+
+      <div class="theme-catalog">
+        <h3 class="catalog-title">Explore nossos Temas</h3>
+        <div class="theme-grid">
+          @for (theme of themes; track theme.id) {
+            <fy-card (click)="changeTheme(theme.id)" class="theme-card">
+              <div class="theme-card-content">
+                <div class="theme-icon-box" [style.background]="theme.color">
+                  <fy-icon [name]="theme.icon" size="md"></fy-icon>
+                </div>
+                <span class="theme-name">{{ theme.name }}</span>
+                <div class="theme-palette">
+                  <div class="color-dot" [style.background]="theme.color"></div>
+                  <div class="color-dot" style="background: #64748b"></div>
+                  <div class="color-dot" style="background: #f1f5f9"></div>
+                </div>
+              </div>
+            </fy-card>
+          }
+        </div>
+      </div>
     </div>
   </fy-layout>
 </div>
@@ -170,15 +197,19 @@ function getWelcomeHTML() {
   }
   .welcome-container {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     height: 100%;
-    padding: 20px;
+    padding: 60px 20px;
+    overflow-y: auto;
+    gap: 40px;
   }
   .welcome-card {
-    max-width: 500px;
+    max-width: 600px;
     width: 100%;
     animation: fadeInScale 0.6s ease-out;
+    flex-shrink: 0;
   }
   .welcome-header {
     display: flex;
@@ -213,9 +244,6 @@ function getWelcomeHTML() {
     flex-direction: column;
     gap: 12px;
   }
-  .welcome-actions a {
-    width: 100%;
-  }
   .welcome-actions fy-button {
     width: 100%;
   }
@@ -225,10 +253,68 @@ function getWelcomeHTML() {
     justify-content: center;
   }
 
+  .theme-catalog {
+    width: 100%;
+    max-width: 1000px;
+    animation: fadeInUp 0.8s ease-out;
+  }
+  .catalog-title {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 24px;
+    text-align: center;
+    color: var(--fy-colors-text);
+  }
+  .theme-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+  }
+  .theme-card {
+    cursor: pointer;
+    transition: transform 0.2s;
+  }
+  .theme-card:hover {
+    transform: translateY(-5px);
+  }
+  .theme-card-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 20px;
+  }
+  .theme-icon-box {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+  }
+  .theme-name {
+    font-weight: 600;
+    font-size: 14px;
+  }
+  .theme-palette {
+    display: flex;
+    gap: 4px;
+  }
+  .color-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+  }
+
   @keyframes fadeInScale {
     from { opacity: 0; transform: scale(0.95) translateY(10px); }
     to { opacity: 1; transform: scale(1) translateY(0); }
   }
+  @keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
 </style>
 `;
 }
@@ -254,23 +340,49 @@ import {
   styles: [\`
     :host { display: block; height: 100vh; }
     .fy-app-container { height: 100vh; width: 100%; overflow: hidden; }
-    .welcome-container { display: flex; align-items: center; justify-content: center; height: 100%; padding: 20px; }
-    .welcome-card { max-width: 500px; width: 100%; animation: fadeInScale 0.6s ease-out; }
+    .welcome-container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; padding: 60px 20px; overflow-y: auto; gap: 40px; }
+    .welcome-card { max-width: 600px; width: 100%; animation: fadeInScale 0.6s ease-out; flex-shrink: 0; }
     .welcome-header { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 0 16px; }
     .logo-box { background: var(--fy-colors-primary); color: white; padding: 16px; border-radius: 16px; box-shadow: 0 8px 16px rgba(var(--fy-colors-primary-rgb), 0.3); }
     .welcome-title { font-size: 28px; font-weight: 800; color: var(--fy-colors-text); }
     .welcome-content { text-align: center; padding: 0 24px 24px; }
     .welcome-desc { color: var(--fy-colors-secondary); line-height: 1.6; margin-bottom: 32px; }
     .welcome-actions { display: flex; flex-direction: column; gap: 12px; }
-    .welcome-actions a { width: 100%; }
     .welcome-footer { opacity: 0.6; font-size: 12px; justify-content: center; }
+    
+    .theme-catalog { width: 100%; max-width: 1000px; animation: fadeInUp 0.8s ease-out; }
+    .catalog-title { font-size: 20px; font-weight: 700; margin-bottom: 24px; text-align: center; color: var(--fy-colors-text); }
+    .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
+    .theme-card { cursor: pointer; transition: transform 0.2s; }
+    .theme-card:hover { transform: translateY(-5px); }
+    .theme-card-content { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; }
+    .theme-icon-box { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; }
+    .theme-name { font-weight: 600; font-size: 14px; }
+    .theme-palette { display: flex; gap: 4px; }
+    .color-dot { width: 12px; height: 12px; border-radius: 50%; }
+
     @keyframes fadeInScale {
       from { opacity: 0; transform: scale(0.95) translateY(10px); }
       to { opacity: 1; transform: scale(1) translateY(0); }
     }
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
   \`]
 })
-export class FylibWelcomeComponent {}
+export class FylibWelcomeComponent implements OnInit {
+  private fylib = inject(FyLibService);
+  protected readonly themes = ${JSON.stringify(THEMES, null, 2)};
+
+  ngOnInit() {
+    this.fylib.setTheme('default');
+  }
+
+  changeTheme(theme: string) {
+    this.fylib.setTheme(theme as any);
+  }
+}
 `;
         const htmlContent = getWelcomeHTML();
         tree.create(`${componentDir}/fylib-welcome.component.ts`, tsContent);

package/dist/schematics/ng-add/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../schematics/ng-add/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../schematics/ng-add/index.ts"],"names":[],"mappings":"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"}

package/dist/services/sse.service.js

@@ -28,6 +28,9 @@ export class FySSEService {
             return;
         this.disconnect();
         try {
+            if (!this.config.endpoint) {
+                throw new Error('[fyLib/SSE] endpoint is required when SSE is enabled');
+            }
             this.eventSource = new EventSource(this.config.endpoint, {
                 withCredentials: this.config.withCredentials ?? false
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fylib/adapter-angular",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -24,13 +24,13 @@
     "ng2-charts": "^10.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "@fylib/core": "0.2.0",
-    "@fylib/theme": "0.2.0",
-    "@fylib/animation": "0.2.0",
-    "@fylib/config": "0.2.1",
-    "@fylib/crypto": "0.2.0",
-    "@fylib/catalog": "0.2.0",
-    "@fylib/logger": "0.2.0"
+    "@fylib/core": "0.2.2",
+    "@fylib/theme": "0.2.2",
+    "@fylib/animation": "0.2.2",
+    "@fylib/catalog": "0.3.0",
+    "@fylib/config": "0.2.3",
+    "@fylib/crypto": "0.2.2",
+    "@fylib/logger": "0.2.2"
   },
   "devDependencies": {
     "typescript": "^5.9.3",