@fylib/adapter-angular 0.2.3 → 0.2.7

package/dist/components/button.component.js

@@ -1,12 +1,3 @@
-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, Output, EventEmitter, ViewEncapsulation, HostBinding, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ButtonDefinition } from '@fylib/catalog';
@@ -14,7 +5,8 @@ import { FyIconComponent } from './icon.component';
 import { BaseFyComponent } from '../base/base-component';
 import { FyLibService } from '../services/fylib.service';
 import { logger } from '@fylib/logger';
-let FyButtonComponent = class FyButtonComponent extends BaseFyComponent {
+import * as i0 from "@angular/core";
+export class FyButtonComponent extends BaseFyComponent {
     constructor() {
         super(inject(FyLibService), 'fy-button');
         this.label = undefined;
@@ -64,103 +56,9 @@ let FyButtonComponent = class FyButtonComponent extends BaseFyComponent {
         if (this.hoverEffect)
             this.triggerDirect(this.hoverEffect, this.activeEffects);
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyButtonComponent.prototype, "label", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyButtonComponent.prototype, "variant", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyButtonComponent.prototype, "size", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyButtonComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyButtonComponent.prototype, "loading", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyButtonComponent.prototype, "icon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyButtonComponent.prototype, "iconName", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyButtonComponent.prototype, "iconSet", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyButtonComponent.prototype, "activeAnimations", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyButtonComponent.prototype, "activeEffects", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyButtonComponent.prototype, "customStyles", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyButtonComponent.prototype, "hoverAnimation", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyButtonComponent.prototype, "clickAnimation", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyButtonComponent.prototype, "successAnimation", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyButtonComponent.prototype, "errorAnimation", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyButtonComponent.prototype, "hoverEffect", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyButtonComponent.prototype, "clickEffect", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyButtonComponent.prototype, "successEffect", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyButtonComponent.prototype, "errorEffect", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FyButtonComponent.prototype, "fyClick", void 0);
-__decorate([
-    HostBinding('class.fy-animations-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], FyButtonComponent.prototype, "animationsDisabled", null);
-__decorate([
-    HostBinding('style'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], FyButtonComponent.prototype, "hostStyles", null);
-FyButtonComponent = __decorate([
-    Component({
-        selector: 'fy-button',
-        standalone: true,
-        imports: [CommonModule, FyIconComponent],
-        template: `
+}
+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"
@@ -183,90 +81,77 @@ FyButtonComponent = __decorate([
         <span class="fy-button__label">{{ label }}</span>
       }
     </button>
-  `,
-        styles: [`
-    .fy-button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--fy-spacing-sm) var(--fy-spacing-md);
-      border-radius: var(--fy-borderRadius-md);
-      font-family: inherit;
-      font-size: var(--fy-typography-fontSize-md);
-      font-weight: var(--fy-typography-fontWeight-bold);
-      cursor: pointer;
-      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      border: 1px solid var(--fy-effects-button-borderColor, transparent);
-      background: var(--fy-effects-button-background, var(--fy-colors-primary));
-      color: var(--fy-effects-button-textColor, var(--fy-colors-white));
-      outline: none;
-      user-select: none;
-      position: relative;
-      overflow: hidden;
-      gap: 8px;
-    }
-
-    .fy-animations-disabled, .fy-animations-disabled * {
-      transition: none !important;
-      animation: none !important;
-    }
-
-    .fy-button--secondary {
-      background: none !important;
-      background-color: var(--fy-colors-secondary) !important;
-      color: var(--fy-effects-button-textColor, var(--fy-colors-white)) !important;
-    }
-
-    .fy-button--ghost {
-      background: none !important;
-      background-color: transparent !important;
-      color: var(--fy-colors-primary) !important;
-      border-color: var(--fy-colors-primary) !important;
-    }
-
-    .fy-button--ghost:hover:not(:disabled) {
-      background-color: rgba(var(--fy-colors-primary-rgb, 59, 130, 246), 0.1);
-    }
-
-    .fy-button--danger {
-      background: none !important;
-      background-color: var(--fy-colors-danger) !important;
-      color: var(--fy-effects-button-textColor, var(--fy-colors-white)) !important;
-    }
-
-    .fy-button--sm { 
-      padding: var(--fy-spacing-xs) var(--fy-spacing-sm); 
-      font-size: var(--fy-typography-fontSize-sm); 
-    }
-    
-    .fy-button--lg { 
-      padding: var(--fy-spacing-md) var(--fy-spacing-lg); 
-      font-size: var(--fy-typography-fontSize-lg); 
-    }
-
-    .fy-button:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    .fy-button__loader {
-      width: 16px;
-      height: 16px;
-      border: 2px solid currentColor;
-      border-bottom-color: transparent;
-      border-radius: 50%;
-      display: inline-block;
-      animation: fy-spin 0.8s linear infinite;
-      flex-shrink: 0;
-    }
-
-    @keyframes fy-spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
-  `],
-        encapsulation: ViewEncapsulation.None
-    }),
-    __metadata("design:paramtypes", [])
-], FyButtonComponent);
-export { FyButtonComponent };
+  `, 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>
+  `, 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
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], iconSet: [{
+                type: Input
+            }], activeAnimations: [{
+                type: Input
+            }], activeEffects: [{
+                type: Input
+            }], customStyles: [{
+                type: Input
+            }], hoverAnimation: [{
+                type: Input
+            }], clickAnimation: [{
+                type: Input
+            }], successAnimation: [{
+                type: Input
+            }], errorAnimation: [{
+                type: Input
+            }], hoverEffect: [{
+                type: Input
+            }], clickEffect: [{
+                type: Input
+            }], successEffect: [{
+                type: Input
+            }], errorEffect: [{
+                type: Input
+            }], fyClick: [{
+                type: Output
+            }], animationsDisabled: [{
+                type: HostBinding,
+                args: ['class.fy-animations-disabled']
+            }], hostStyles: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });

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

@@ -2,6 +2,7 @@ import { EventEmitter } from '@angular/core';
 import { CardProps } from '@fylib/catalog';
 import { EffectName } from '@fylib/config';
 import { BaseFyComponent, FyComponentBaseInputs } from '../base/base-component';
+import * as i0 from "@angular/core";
 export declare class FyCardComponent extends BaseFyComponent<'fy-card'> implements CardProps, FyComponentBaseInputs {
     title?: string;
     headerIconName?: string;
@@ -26,4 +27,6 @@ export declare class FyCardComponent extends BaseFyComponent<'fy-card'> implemen
     get hostStyles(): string;
     onSubmit(event: Event): void;
     private resolveAnimationsActive;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FyCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FyCardComponent, "fy-card", never, { "title": { "alias": "title"; "required": false; }; "headerIconName": { "alias": "headerIconName"; "required": false; }; "footerIconName": { "alias": "footerIconName"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "mutedHeader": { "alias": "mutedHeader"; "required": false; }; "mutedFooter": { "alias": "mutedFooter"; "required": false; }; "footerText": { "alias": "footerText"; "required": false; }; "scrollContent": { "alias": "scrollContent"; "required": false; }; "activeAnimations": { "alias": "activeAnimations"; "required": false; }; "activeEffects": { "alias": "activeEffects"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; "submitEffect": { "alias": "submitEffect"; "required": false; }; }, { "fySubmit": "fySubmit"; }, never, ["[fy-card-header]", "*", "[fy-card-actions]", "[fy-card-footer]"], true, never>;
 }

package/dist/components/card.component.js

@@ -1,19 +1,11 @@
-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, Output, EventEmitter, ViewEncapsulation, HostBinding, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CardDefinition } from '@fylib/catalog';
 import { FyIconComponent } from './icon.component';
 import { animationClasses } from '../base/interaction.utils';
 import { BaseFyComponent } from '../base/base-component';
-let FyCardComponent = class FyCardComponent extends BaseFyComponent {
+import * as i0 from "@angular/core";
+export class FyCardComponent extends BaseFyComponent {
     get animationsDisabled() {
         return !this.isAnimationsActive(this.activeAnimations);
     }
@@ -57,74 +49,9 @@ let FyCardComponent = class FyCardComponent extends BaseFyComponent {
     resolveAnimationsActive() {
         return this.isAnimationsActive(this.activeAnimations);
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyCardComponent.prototype, "title", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyCardComponent.prototype, "headerIconName", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyCardComponent.prototype, "footerIconName", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyCardComponent.prototype, "variant", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyCardComponent.prototype, "mode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyCardComponent.prototype, "mutedHeader", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyCardComponent.prototype, "mutedFooter", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyCardComponent.prototype, "footerText", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], FyCardComponent.prototype, "scrollContent", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyCardComponent.prototype, "activeAnimations", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyCardComponent.prototype, "activeEffects", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FyCardComponent.prototype, "customStyles", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FyCardComponent.prototype, "submitEffect", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FyCardComponent.prototype, "fySubmit", void 0);
-__decorate([
-    HostBinding('class.fy-animations-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], FyCardComponent.prototype, "animationsDisabled", null);
-FyCardComponent = __decorate([
-    Component({
-        selector: 'fy-card',
-        standalone: true,
-        imports: [CommonModule, FyIconComponent],
-        template: `
+}
+FyCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FyCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FyCardComponent, isStandalone: true, selector: "fy-card", inputs: { title: "title", headerIconName: "headerIconName", footerIconName: "footerIconName", variant: "variant", mode: "mode", mutedHeader: "mutedHeader", mutedFooter: "mutedFooter", footerText: "footerText", scrollContent: "scrollContent", activeAnimations: "activeAnimations", activeEffects: "activeEffects", customStyles: "customStyles", submitEffect: "submitEffect" }, outputs: { fySubmit: "fySubmit" }, host: { properties: { "class.fy-animations-disabled": "this.animationsDisabled" } }, usesInheritance: true, ngImport: i0, template: `
     <section
       class="fy-card fy-card--{{variant}} {{ animationClassSuffix }}"
       [style]="hostStyles"
@@ -162,75 +89,77 @@ FyCardComponent = __decorate([
         </footer>
       }
     </section>
-  `,
-        styles: [`
-    .fy-card {
-      display: flex;
-      flex-direction: column;
-      gap: var(--fy-spacing-sm, 8px);
-      border-radius: var(--fy-borderRadius-lg, 12px);
-      background: var(--fy-effects-card-background, var(--fy-colors-surface, #fff));
-      border: 1px solid var(--fy-effects-card-borderColor, rgba(0,0,0,0.08));
-      box-shadow: var(--fy-effects-card-shadow, 0 6px 24px rgba(15, 23, 42, 0.06));
-      overflow: hidden;
-      width: 100%;
-      max-width: 100%;
-      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
-    }
-    .fy-card__header-icon, .fy-card__footer-icon { margin-right: var(--fy-spacing-sm, 8px); opacity: .9; }
-
-    .fy-card__header,
-    .fy-card__footer {
-      padding: var(--fy-spacing-md, 16px);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .fy-card__header--muted,
-    .fy-card__footer--muted {
-      background: var(--fy-colors-mutedBackground, rgba(15, 23, 42, 0.03));
-      color: var(--fy-colors-secondary, #64748b);
-    }
-
-    .fy-card__title {
-      margin: 0;
-      font-size: var(--fy-typography-fontSize-lg, 20px);
-      font-weight: var(--fy-typography-fontWeight-bold, 700);
-    }
-
-    .fy-card__body {
-      padding: var(--fy-spacing-md, 16px);
-      display: flex;
-      flex-direction: column;
-      gap: var(--fy-spacing-md, 16px);
-    }
-
-    .fy-card__body--scroll {
-      max-height: 420px;
-      overflow-y: auto;
-    }
+  `, isInline: true, styles: ["\n    .fy-card {\n      display: flex;\n      flex-direction: column;\n      gap: var(--fy-spacing-sm, 8px);\n      border-radius: var(--fy-borderRadius-lg, 12px);\n      background: var(--fy-effects-card-background, var(--fy-colors-surface, #fff));\n      border: 1px solid var(--fy-effects-card-borderColor, rgba(0,0,0,0.08));\n      box-shadow: var(--fy-effects-card-shadow, 0 6px 24px rgba(15, 23, 42, 0.06));\n      overflow: hidden;\n      width: 100%;\n      max-width: 100%;\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n    .fy-card__header-icon, .fy-card__footer-icon { margin-right: var(--fy-spacing-sm, 8px); opacity: .9; }\n\n    .fy-card__header,\n    .fy-card__footer {\n      padding: var(--fy-spacing-md, 16px);\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .fy-card__header--muted,\n    .fy-card__footer--muted {\n      background: var(--fy-colors-mutedBackground, rgba(15, 23, 42, 0.03));\n      color: var(--fy-colors-secondary, #64748b);\n    }\n\n    .fy-card__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-lg, 20px);\n      font-weight: var(--fy-typography-fontWeight-bold, 700);\n    }\n\n    .fy-card__body {\n      padding: var(--fy-spacing-md, 16px);\n      display: flex;\n      flex-direction: column;\n      gap: var(--fy-spacing-md, 16px);\n    }\n\n    .fy-card__body--scroll {\n      max-height: 420px;\n      overflow-y: auto;\n    }\n\n    .fy-card__actions {\n      display: flex;\n      gap: var(--fy-spacing-sm, 8px);\n      padding-top: var(--fy-spacing-sm, 8px);\n      border-top: 1px solid var(--fy-effects-card-dividerColor, rgba(0,0,0,0.08));\n      justify-content: flex-end;\n      flex-wrap: wrap;\n    }\n\n    @media (max-width: 768px) {\n      .fy-card__body--scroll {\n        max-height: 60vh;\n      }\n      .fy-card__actions {\n        justify-content: stretch;\n      }\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: FyCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fy-card', standalone: true, imports: [CommonModule, FyIconComponent], template: `
+    <section
+      class="fy-card fy-card--{{variant}} {{ animationClassSuffix }}"
+      [style]="hostStyles"
+    >
+      @if (title || hasHeaderSlot) {
+        <header class="fy-card__header" [class.fy-card__header--muted]="mutedHeader">
+          @if (headerIconName) {
+            <fy-icon class="fy-card__header-icon" [name]="headerIconName"></fy-icon>
+          }
+          <ng-content select="[fy-card-header]"></ng-content>
+          @if (title) {
+            <h3 class="fy-card__title">{{ title }}</h3>
+          }
+        </header>
+      }
 
-    .fy-card__actions {
-      display: flex;
-      gap: var(--fy-spacing-sm, 8px);
-      padding-top: var(--fy-spacing-sm, 8px);
-      border-top: 1px solid var(--fy-effects-card-dividerColor, rgba(0,0,0,0.08));
-      justify-content: flex-end;
-      flex-wrap: wrap;
-    }
+      <form class="fy-card__body" [class.fy-card__body--scroll]="scrollContent" (submit)="onSubmit($event)">
+        <ng-content></ng-content>
+        @if (hasActionsSlot) {
+          <div class="fy-card__actions">
+            <ng-content select="[fy-card-actions]"></ng-content>
+          </div>
+        }
+      </form>
 
-    @media (max-width: 768px) {
-      .fy-card__body--scroll {
-        max-height: 60vh;
-      }
-      .fy-card__actions {
-        justify-content: stretch;
+      @if (footerText || hasFooterSlot) {
+        <footer class="fy-card__footer" [class.fy-card__footer--muted]="mutedFooter">
+          @if (footerIconName) {
+            <fy-icon class="fy-card__footer-icon" [name]="footerIconName"></fy-icon>
+          }
+          <ng-content select="[fy-card-footer]"></ng-content>
+          @if (footerText) {
+            <span>{{ footerText }}</span>
+          }
+        </footer>
       }
-    }
-  `],
-        encapsulation: ViewEncapsulation.None
-    }),
-    __metadata("design:paramtypes", [])
-], FyCardComponent);
-export { FyCardComponent };
+    </section>
+  `, encapsulation: ViewEncapsulation.None, styles: ["\n    .fy-card {\n      display: flex;\n      flex-direction: column;\n      gap: var(--fy-spacing-sm, 8px);\n      border-radius: var(--fy-borderRadius-lg, 12px);\n      background: var(--fy-effects-card-background, var(--fy-colors-surface, #fff));\n      border: 1px solid var(--fy-effects-card-borderColor, rgba(0,0,0,0.08));\n      box-shadow: var(--fy-effects-card-shadow, 0 6px 24px rgba(15, 23, 42, 0.06));\n      overflow: hidden;\n      width: 100%;\n      max-width: 100%;\n      color: var(--fy-colors-textOverlay, var(--fy-colors-text));\n    }\n    .fy-card__header-icon, .fy-card__footer-icon { margin-right: var(--fy-spacing-sm, 8px); opacity: .9; }\n\n    .fy-card__header,\n    .fy-card__footer {\n      padding: var(--fy-spacing-md, 16px);\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .fy-card__header--muted,\n    .fy-card__footer--muted {\n      background: var(--fy-colors-mutedBackground, rgba(15, 23, 42, 0.03));\n      color: var(--fy-colors-secondary, #64748b);\n    }\n\n    .fy-card__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-lg, 20px);\n      font-weight: var(--fy-typography-fontWeight-bold, 700);\n    }\n\n    .fy-card__body {\n      padding: var(--fy-spacing-md, 16px);\n      display: flex;\n      flex-direction: column;\n      gap: var(--fy-spacing-md, 16px);\n    }\n\n    .fy-card__body--scroll {\n      max-height: 420px;\n      overflow-y: auto;\n    }\n\n    .fy-card__actions {\n      display: flex;\n      gap: var(--fy-spacing-sm, 8px);\n      padding-top: var(--fy-spacing-sm, 8px);\n      border-top: 1px solid var(--fy-effects-card-dividerColor, rgba(0,0,0,0.08));\n      justify-content: flex-end;\n      flex-wrap: wrap;\n    }\n\n    @media (max-width: 768px) {\n      .fy-card__body--scroll {\n        max-height: 60vh;\n      }\n      .fy-card__actions {\n        justify-content: stretch;\n      }\n    }\n  "] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
+                type: Input
+            }], headerIconName: [{
+                type: Input
+            }], footerIconName: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], mutedHeader: [{
+                type: Input
+            }], mutedFooter: [{
+                type: Input
+            }], footerText: [{
+                type: Input
+            }], scrollContent: [{
+                type: Input
+            }], activeAnimations: [{
+                type: Input
+            }], activeEffects: [{
+                type: Input
+            }], customStyles: [{
+                type: Input
+            }], submitEffect: [{
+                type: Input
+            }], fySubmit: [{
+                type: Output
+            }], animationsDisabled: [{
+                type: HostBinding,
+                args: ['class.fy-animations-disabled']
+            }] } });

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

@@ -3,6 +3,7 @@ import { ChartProps, ChartType, ChartSeries } from '@fylib/catalog';
 import { BaseFyComponent } from '../base/base-component';
 import { BaseChartDirective } from 'ng2-charts';
 import { ChartConfiguration, ChartData, ChartEvent } from 'chart.js';
+import * as i0 from "@angular/core";
 export declare class FyChartComponent extends BaseFyComponent<'fy-chart'> implements ChartProps, OnInit, OnChanges {
     type: ChartType;
     series: ChartSeries[];
@@ -36,4 +37,6 @@ export declare class FyChartComponent extends BaseFyComponent<'fy-chart'> implem
         active?: {}[];
     }): void;
     get animationClassSuffix(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FyChartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FyChartComponent, "fy-chart", never, { "type": { "alias": "type"; "required": false; }; "series": { "alias": "series"; "required": false; }; "categories": { "alias": "categories"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "height": { "alias": "height"; "required": false; }; "width": { "alias": "width"; "required": false; }; "colors": { "alias": "colors"; "required": false; }; "showLegend": { "alias": "showLegend"; "required": false; }; "showGrid": { "alias": "showGrid"; "required": false; }; "showLabels": { "alias": "showLabels"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "animated": { "alias": "animated"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "activeAnimations": { "alias": "activeAnimations"; "required": false; }; "activeEffects": { "alias": "activeEffects"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; }, { "fyDataClick": "fyDataClick"; }, never, never, true, never>;
 }