@fylib/adapter-angular 0.1.0

package/dist/base/base-component.d.ts

@@ -0,0 +1,18 @@
+import { FyLibService } from '../services/fylib.service';
+import { ComponentSelector, UIEventKey, EffectName } from '@fylib/config';
+export interface FyComponentBaseInputs {
+    activeAnimations?: boolean | null;
+    activeEffects?: boolean | null;
+    customStyles?: Record<string, string> | null;
+}
+export declare abstract class BaseFyComponent<TSelector extends ComponentSelector> {
+    protected fylib: FyLibService;
+    protected selector: TSelector;
+    protected constructor(fylib: FyLibService, selector: TSelector);
+    protected isAnimationsActive(instanceFlag: boolean | null | undefined): boolean;
+    protected getHostStyles(style: Record<string, string> | null | undefined): string;
+    protected resolveAnim(event: string, instanceOverride?: string, definitionFallback?: string): string | undefined;
+    protected composeAnimClasses(...names: Array<string | undefined>): string;
+    protected triggerByEvent(eventKey: UIEventKey, effectName?: EffectName, instanceFlag?: boolean | null): void;
+    protected triggerDirect(effectName?: EffectName, instanceFlag?: boolean | null): void;
+}

package/dist/base/base-component.js

@@ -0,0 +1,36 @@
+import { resolveAnimationsActive, resolveAnimationName, animationClasses, triggerEffectForEvent, styleString } from './interaction.utils';
+export class BaseFyComponent {
+    constructor(fylib, selector) {
+        this.fylib = fylib;
+        this.selector = selector;
+    }
+    isAnimationsActive(instanceFlag) {
+        return resolveAnimationsActive(this.fylib, this.selector, instanceFlag);
+    }
+    getHostStyles(style) {
+        return styleString(style || null);
+    }
+    resolveAnim(event, instanceOverride, definitionFallback) {
+        return resolveAnimationName(this.fylib, this.selector, event, instanceOverride, definitionFallback);
+    }
+    composeAnimClasses(...names) {
+        return animationClasses(...names);
+    }
+    triggerByEvent(eventKey, effectName, instanceFlag) {
+        if (instanceFlag === false)
+            return;
+        if (effectName) {
+            this.fylib.triggerEffect(effectName);
+        }
+        else {
+            triggerEffectForEvent(this.fylib, eventKey, this.selector, instanceFlag ?? null);
+        }
+    }
+    triggerDirect(effectName, instanceFlag) {
+        if (!effectName)
+            return;
+        if (instanceFlag === false)
+            return;
+        this.fylib.triggerEffect(effectName);
+    }
+}

package/dist/base/interaction.utils.d.ts

@@ -0,0 +1,7 @@
+import { FyLibService } from '../services/fylib.service';
+import { ComponentSelector, UIEventKey } from '@fylib/config';
+export declare function resolveAnimationsActive(fylib: FyLibService, selector: ComponentSelector, instanceFlag: boolean | null | undefined): boolean;
+export declare function resolveAnimationName(fylib: FyLibService, selector: ComponentSelector, event: string, instanceOverride?: string | undefined, definitionFallback?: string | undefined): string | undefined;
+export declare function animationClasses(...names: Array<string | undefined>): string;
+export declare function triggerEffectForEvent(fylib: FyLibService, eventKey: UIEventKey, selector?: ComponentSelector, instanceFlag?: boolean | null): void;
+export declare function styleString(style: Record<string, string> | null | undefined): string;

package/dist/base/interaction.utils.js

@@ -0,0 +1,34 @@
+export function resolveAnimationsActive(fylib, selector, instanceFlag) {
+    const globalEnabledForComponent = fylib.isAnimationsEnabledFor(selector);
+    if (instanceFlag === false)
+        return false;
+    if (instanceFlag === true)
+        return globalEnabledForComponent;
+    return globalEnabledForComponent;
+}
+export function resolveAnimationName(fylib, selector, event, instanceOverride, definitionFallback) {
+    if (instanceOverride)
+        return instanceOverride;
+    const fromTheme = fylib.getComponentAnimation(selector, event);
+    if (fromTheme)
+        return fromTheme;
+    return definitionFallback;
+}
+export function animationClasses(...names) {
+    const classes = [];
+    for (const n of names) {
+        if (n)
+            classes.push(` fy-anim-${n}`);
+    }
+    return classes.join('');
+}
+export function triggerEffectForEvent(fylib, eventKey, selector, instanceFlag) {
+    fylib.triggerEffectForEvent(eventKey, selector, instanceFlag ?? null);
+}
+export function styleString(style) {
+    if (!style)
+        return '';
+    return Object.entries(style)
+        .map(([k, v]) => `${k}: ${v}`)
+        .join('; ');
+}

package/dist/base/interaction.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/base/interaction.utils.test.js

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { animationClasses, styleString } from './interaction.utils';
+describe('interaction.utils', () => {
+    describe('animationClasses', () => {
+        it('should return empty string for no names', () => {
+            expect(animationClasses()).toBe('');
+        });
+        it('should compose animation classes with prefix', () => {
+            expect(animationClasses('fade-in', 'slide-up')).toBe(' fy-anim-fade-in fy-anim-slide-up');
+        });
+        it('should ignore undefined or empty names', () => {
+            expect(animationClasses('fade-in', undefined, '')).toBe(' fy-anim-fade-in');
+        });
+    });
+    describe('styleString', () => {
+        it('should return empty string for null/undefined', () => {
+            expect(styleString(null)).toBe('');
+            expect(styleString(undefined)).toBe('');
+        });
+        it('should convert object to style string', () => {
+            const styles = { color: 'red', 'font-size': '12px' };
+            expect(styleString(styles)).toBe('color: red; font-size: 12px');
+        });
+    });
+});

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

@@ -0,0 +1,32 @@
+import { EventEmitter } from '@angular/core';
+import { AccordionProps, AccordionItem, AccordionExpandMode } from '@fylib/catalog';
+import { BaseFyComponent, FyComponentBaseInputs } from '../base/base-component';
+export declare class FyAccordionComponent extends BaseFyComponent<'fy-accordion'> implements AccordionProps, FyComponentBaseInputs {
+    constructor();
+    items: AccordionItem[];
+    activeIndex?: number | number[];
+    expandMode: AccordionExpandMode;
+    size: AccordionProps['size'];
+    status: AccordionProps['status'];
+    bordered: boolean;
+    flush: boolean;
+    animated: boolean;
+    lazy: boolean;
+    iconPosition: 'left' | 'right';
+    disabled: boolean;
+    onOpen?: (index: number) => void;
+    onClose?: (index: number) => void;
+    onChange?: (activeIndex: number | number[]) => void;
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    fyOpen: EventEmitter<number>;
+    fyClose: EventEmitter<number>;
+    fyChange: EventEmitter<number | number[]>;
+    get animationsDisabled(): boolean;
+    get hostStyles(): string;
+    getPanelClasses(i: number): Record<string, boolean | string | undefined>;
+    isActive(i: number): boolean;
+    handleKeyDown(event: KeyboardEvent, index: number): void;
+    toggle(i: number): void;
+}

package/dist/components/accordion.component.js

@@ -0,0 +1,337 @@
+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 { AccordionDefinition } from '@fylib/catalog';
+import { BaseFyComponent } from '../base/base-component';
+import { FyLibService } from '../services/fylib.service';
+let FyAccordionComponent = class FyAccordionComponent extends BaseFyComponent {
+    constructor() {
+        super(inject(FyLibService), 'fy-accordion');
+        this.items = AccordionDefinition.defaultProps.items;
+        this.expandMode = AccordionDefinition.defaultProps.expandMode;
+        this.size = AccordionDefinition.defaultProps.size;
+        this.status = AccordionDefinition.defaultProps.status;
+        this.bordered = AccordionDefinition.defaultProps.bordered;
+        this.flush = AccordionDefinition.defaultProps.flush;
+        this.animated = AccordionDefinition.defaultProps.animated;
+        this.lazy = AccordionDefinition.defaultProps.lazy;
+        this.iconPosition = AccordionDefinition.defaultProps.iconPosition;
+        this.disabled = AccordionDefinition.defaultProps.disabled;
+        this.activeAnimations = null;
+        this.activeEffects = null;
+        this.customStyles = null;
+        this.fyOpen = new EventEmitter();
+        this.fyClose = new EventEmitter();
+        this.fyChange = new EventEmitter();
+    }
+    get animationsDisabled() { return !this.isAnimationsActive(this.activeAnimations); }
+    get hostStyles() { return this.getHostStyles(this.customStyles); }
+    getPanelClasses(i) {
+        const active = this.isActive(i);
+        const animClass = active
+            ? this.resolveAnim('expand', undefined, 'accordion-expand')
+            : this.resolveAnim('collapse', undefined, 'accordion-collapse');
+        const classes = {
+            'fy-accordion__panel-wrapper--active': active
+        };
+        if (animClass) {
+            classes[animClass] = true;
+        }
+        return classes;
+    }
+    isActive(i) {
+        const val = this.activeIndex;
+        if (this.expandMode === 'multiple') {
+            if (Array.isArray(val)) {
+                return val.includes(i);
+            }
+            return val === i;
+        }
+        return val === i;
+    }
+    handleKeyDown(event, index) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggle(index);
+        }
+    }
+    toggle(i) {
+        if (this.disabled || this.items[i]?.disabled)
+            return;
+        const wasActive = this.isActive(i);
+        if (this.expandMode === 'single') {
+            this.activeIndex = wasActive ? undefined : i;
+        }
+        else {
+            const current = Array.isArray(this.activeIndex)
+                ? [...this.activeIndex]
+                : (this.activeIndex !== undefined ? [this.activeIndex] : []);
+            const idx = current.indexOf(i);
+            if (idx >= 0) {
+                current.splice(idx, 1);
+            }
+            else {
+                current.push(i);
+            }
+            this.activeIndex = current;
+        }
+        if (this.isAnimationsActive(this.activeAnimations) && this.animated) {
+            const event = wasActive ? 'collapse' : 'expand';
+            const name = this.resolveAnim(event, undefined, AccordionDefinition.features?.animations?.[event]);
+            if (name)
+                this.fylib.playAnimation(name);
+        }
+        if (!wasActive) {
+            if (this.onOpen)
+                this.onOpen(i);
+            this.fyOpen.emit(i);
+        }
+        else {
+            if (this.onClose)
+                this.onClose(i);
+            this.fyClose.emit(i);
+        }
+        const emitValue = this.activeIndex ?? (this.expandMode === 'single' ? -1 : []);
+        if (this.onChange)
+            this.onChange(emitValue);
+        this.fyChange.emit(emitValue);
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FyAccordionComponent.prototype, "items", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyAccordionComponent.prototype, "activeIndex", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyAccordionComponent.prototype, "expandMode", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyAccordionComponent.prototype, "size", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyAccordionComponent.prototype, "status", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyAccordionComponent.prototype, "bordered", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyAccordionComponent.prototype, "flush", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyAccordionComponent.prototype, "animated", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyAccordionComponent.prototype, "lazy", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyAccordionComponent.prototype, "iconPosition", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyAccordionComponent.prototype, "disabled", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FyAccordionComponent.prototype, "onOpen", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FyAccordionComponent.prototype, "onClose", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FyAccordionComponent.prototype, "onChange", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyAccordionComponent.prototype, "activeAnimations", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyAccordionComponent.prototype, "activeEffects", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyAccordionComponent.prototype, "customStyles", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyAccordionComponent.prototype, "fyOpen", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyAccordionComponent.prototype, "fyClose", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyAccordionComponent.prototype, "fyChange", void 0);
+__decorate([
+    HostBinding('class.fy-animations-disabled'),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], FyAccordionComponent.prototype, "animationsDisabled", null);
+__decorate([
+    HostBinding('style'),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], FyAccordionComponent.prototype, "hostStyles", null);
+FyAccordionComponent = __decorate([
+    Component({
+        selector: 'fy-accordion',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <div class="fy-accordion" 
+         [class.fy-accordion--bordered]="bordered" 
+         [class.fy-accordion--flush]="flush"
+         role="presentation">
+      @for (it of items; track it.id; let i = $index) {
+        <section class="fy-accordion__item" 
+                 [class.fy-accordion__item--active]="isActive(i)" 
+                 [class.fy-accordion__item--disabled]="it.disabled">
+          <header class="fy-accordion__header" 
+                  (click)="toggle(i)"
+                  (keydown)="handleKeyDown($event, i)"
+                  [attr.aria-expanded]="isActive(i)"
+                  [attr.aria-controls]="'fy-accordion-panel-' + it.id"
+                  [attr.aria-disabled]="it.disabled || disabled"
+                  [attr.id]="'fy-accordion-header-' + it.id"
+                  [tabindex]="it.disabled || disabled ? -1 : 0"
+                  role="button">
+            <div class="fy-accordion__header-main">
+              <h4 class="fy-accordion__title">{{ it.title }}</h4>
+              @if (it.subtitle) { <p class="fy-accordion__subtitle">{{ it.subtitle }}</p> }
+            </div>
+            <span class="fy-accordion__indicator" 
+                  [class.fy-accordion__indicator--open]="isActive(i)"
+                  aria-hidden="true">▾</span>
+          </header>
+          
+          <div 
+            class="fy-accordion__panel-wrapper" 
+            [ngClass]="getPanelClasses(i)"
+            [attr.id]="'fy-accordion-panel-' + it.id"
+            [attr.aria-labelledby]="'fy-accordion-header-' + it.id"
+            [attr.aria-hidden]="!isActive(i)"
+            role="region"
+          >
+            <div class="fy-accordion__panel">
+              @if (!lazy || isActive(i)) {
+                @if (it.content) {
+                  <div class="fy-accordion__content">{{ it.content }}</div>
+                } @else {
+                  <ng-content select="[fy-accordion-item-content={{it.id}}]"></ng-content>
+                }
+              }
+            </div>
+          </div>
+        </section>
+      }
+    </div>
+  `,
+        styles: [`
+    .fy-accordion {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .fy-accordion--bordered { 
+      border: 1px solid var(--fy-effects-accordion-borderColor, rgba(0,0,0,0.1));
+      border-radius: var(--fy-effects-accordion-borderRadius, var(--fy-borderRadius-md));
+      padding: 4px;
+      background: var(--fy-effects-accordion-background, #fff);
+      box-shadow: var(--fy-effects-accordion-shadow, none);
+    }
+    .fy-accordion--flush { border: none; padding: 0; }
+
+    .fy-accordion__item {
+      background: var(--fy-effects-accordion-background, #fff);
+      border: 1px solid var(--fy-effects-accordion-borderColor, rgba(0,0,0,0.1));
+      border-radius: var(--fy-effects-accordion-borderRadius, var(--fy-borderRadius-md));
+      overflow: hidden;
+    }
+    .fy-accordion--flush .fy-accordion__item {
+      border: none;
+      border-radius: 0;
+      background: transparent;
+    }
+
+    .fy-accordion__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 10px 12px;
+      background: var(--fy-effects-accordion-headerBackground, transparent);
+      cursor: pointer;
+      user-select: none;
+    }
+    .fy-accordion__title {
+      margin: 0;
+      font-size: var(--fy-typography-fontSize-md, 14px);
+      font-weight: var(--fy-typography-fontWeight-bold, 600);
+    }
+    .fy-accordion__subtitle {
+      margin: 0;
+      font-size: var(--fy-typography-fontSize-sm, 11px);
+      opacity: .7;
+    }
+    .fy-accordion__header-main {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .fy-accordion__indicator {
+      transition: transform .2s ease;
+    }
+    .fy-accordion__indicator--open { transform: rotate(180deg); }
+
+    .fy-accordion__panel-wrapper {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+      opacity: 0;
+      overflow: hidden;
+    }
+
+    .fy-accordion__panel-wrapper--active {
+      grid-template-rows: 1fr;
+      opacity: 1;
+    }
+
+    .fy-accordion__panel {
+      min-height: 0;
+      border-top: 1px solid var(--fy-effects-accordion-dividerColor, rgba(0,0,0,0.08));
+      padding: 0 12px;
+      transition: padding 0.3s ease;
+    }
+
+    .fy-accordion__panel-wrapper--active .fy-accordion__panel {
+      padding: 12px;
+    }
+  `],
+        encapsulation: ViewEncapsulation.None
+    }),
+    __metadata("design:paramtypes", [])
+], FyAccordionComponent);
+export { FyAccordionComponent };

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

@@ -0,0 +1,10 @@
+export declare class FyBadgeComponent {
+    private fylib;
+    text?: string;
+    background?: string | null;
+    textColor?: string | null;
+    borderRadius?: string | null;
+    shine?: boolean | null;
+    badgeStyle: import("@angular/core").Signal<Record<string, string>>;
+    shineClass: import("@angular/core").Signal<boolean>;
+}

package/dist/components/badge.component.js

@@ -0,0 +1,112 @@
+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, inject, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FyLibService } from '../services/fylib.service';
+let FyBadgeComponent = class FyBadgeComponent {
+    constructor() {
+        this.fylib = inject(FyLibService);
+        this.badgeStyle = computed(() => {
+            const style = {};
+            const tokens = this.fylib.tokens();
+            const badgeTokens = tokens?.effects?.badge || tokens?.badge || {};
+            const bg = this.background ?? badgeTokens.background ?? null;
+            const fg = this.textColor ?? badgeTokens.textColor ?? null;
+            const br = this.borderRadius ?? badgeTokens.borderRadius ?? null;
+            if (bg)
+                style['--fy-badge-background'] = bg;
+            if (fg)
+                style['--fy-badge-textColor'] = fg;
+            if (br)
+                style['border-radius'] = br;
+            return style;
+        });
+        this.shineClass = computed(() => {
+            const tokens = this.fylib.tokens();
+            const badgeTokens = tokens?.effects?.badge || tokens?.badge || {};
+            const shineToken = badgeTokens.animation === 'shine';
+            return this.shine ?? shineToken;
+        });
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyBadgeComponent.prototype, "text", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyBadgeComponent.prototype, "background", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyBadgeComponent.prototype, "textColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyBadgeComponent.prototype, "borderRadius", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyBadgeComponent.prototype, "shine", void 0);
+FyBadgeComponent = __decorate([
+    Component({
+        selector: 'fy-badge',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <span class="fy-badge" [class.fy-badge--shine]="shineClass()" [ngStyle]="badgeStyle()" >
+      <ng-content></ng-content>
+      @if (text) {
+        <span>{{ text }}</span>
+      }
+    </span>
+  `,
+        styles: [`
+    .fy-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 6px;
+      min-width: 16px;
+      height: 16px;
+      font-size: 10px;
+      font-weight: 700;
+      line-height: 1;
+      border-radius: 8px;
+      background-color: var(--fy-badge-background, #ff4757);
+      color: var(--fy-badge-textColor, #fff);
+      box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
+      white-space: nowrap;
+    }
+    .fy-badge.fy-badge--shine {
+      position: relative;
+      overflow: hidden;
+    }
+    .fy-badge.fy-badge--shine::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -150%;
+      width: 50%;
+      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
+      transform: skewX(-20deg);
+      animation: fy-badge-shine 2.4s linear infinite;
+    }
+    @keyframes fy-badge-shine {
+      0% { left: -150%; }
+      100% { left: 200%; }
+    }
+  `],
+        encapsulation: ViewEncapsulation.None
+    })
+], FyBadgeComponent);
+export { FyBadgeComponent };

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

@@ -0,0 +1,33 @@
+import { EventEmitter } from '@angular/core';
+import { ButtonProps } from '@fylib/catalog';
+import { ButtonHoverAnimationName, ButtonClickAnimationName, ButtonStateAnimationName } from '@fylib/animation';
+import { EffectName } from '@fylib/config';
+import { BaseFyComponent, FyComponentBaseInputs } from '../base/base-component';
+export declare class FyButtonComponent extends BaseFyComponent<'fy-button'> implements ButtonProps, FyComponentBaseInputs {
+    constructor();
+    label: string | undefined;
+    variant: ButtonProps['variant'];
+    size: ButtonProps['size'];
+    disabled: boolean;
+    loading: boolean;
+    icon?: string;
+    iconName?: string;
+    iconSet?: 'ph' | 'fa' | 'mdi';
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    hoverAnimation?: ButtonHoverAnimationName;
+    clickAnimation?: ButtonClickAnimationName;
+    successAnimation?: ButtonStateAnimationName;
+    errorAnimation?: ButtonStateAnimationName;
+    hoverEffect?: EffectName;
+    clickEffect?: EffectName;
+    successEffect?: EffectName;
+    errorEffect?: EffectName;
+    fyClick: EventEmitter<MouseEvent>;
+    get animationsDisabled(): boolean;
+    get hostStyles(): string;
+    get animationClassSuffix(): string;
+    handleClick(event: MouseEvent): void;
+    handleHover(): void;
+}