@fylib/adapter-angular 0.1.0

package/dist/components/button.component.js

@@ -0,0 +1,272 @@
+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';
+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 {
+    constructor() {
+        super(inject(FyLibService), 'fy-button');
+        this.label = undefined;
+        this.variant = ButtonDefinition.defaultProps.variant;
+        this.size = ButtonDefinition.defaultProps.size;
+        this.disabled = ButtonDefinition.defaultProps.disabled;
+        this.loading = ButtonDefinition.defaultProps.loading;
+        this.icon = ButtonDefinition.defaultProps.icon;
+        this.activeAnimations = null;
+        this.activeEffects = null;
+        this.customStyles = null;
+        this.fyClick = new EventEmitter();
+    }
+    get animationsDisabled() {
+        return !this.isAnimationsActive(this.activeAnimations);
+    }
+    get hostStyles() {
+        return this.getHostStyles(this.customStyles);
+    }
+    get animationClassSuffix() {
+        const hover = this.resolveAnim('hover', this.hoverAnimation, ButtonDefinition.features?.animations?.hover);
+        const click = this.resolveAnim('click', this.clickAnimation, ButtonDefinition.features?.animations?.click);
+        return this.composeAnimClasses(hover, click);
+    }
+    handleClick(event) {
+        if (!this.disabled && !this.loading) {
+            logger.debug('Component', 'Button clicked', { label: this.label, variant: this.variant });
+            if (this.isAnimationsActive(this.activeAnimations)) {
+                const animationName = this.resolveAnim('click', this.clickAnimation, ButtonDefinition.features?.animations?.click);
+                if (animationName) {
+                    this.fylib.playAnimation(animationName);
+                }
+            }
+            this.fyClick.emit(event);
+            this.triggerByEvent('fy-button.click', this.clickEffect, this.activeEffects);
+        }
+    }
+    handleHover() {
+        if (!this.isAnimationsActive(this.activeAnimations)) {
+            return;
+        }
+        logger.debug('Component', 'Button hovered', { label: this.label });
+        const animationName = this.resolveAnim('hover', this.hoverAnimation, ButtonDefinition.features?.animations?.hover);
+        if (animationName) {
+            this.fylib.playAnimation(animationName);
+        }
+        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: `
+    <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>
+  `,
+        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 };

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

@@ -0,0 +1,29 @@
+import { EventEmitter } from '@angular/core';
+import { CardProps } from '@fylib/catalog';
+import { EffectName } from '@fylib/config';
+import { BaseFyComponent, FyComponentBaseInputs } from '../base/base-component';
+export declare class FyCardComponent extends BaseFyComponent<'fy-card'> implements CardProps, FyComponentBaseInputs {
+    title?: string;
+    headerIconName?: string;
+    footerIconName?: string;
+    variant: NonNullable<CardProps['variant']>;
+    mode: NonNullable<CardProps['mode']>;
+    mutedHeader: boolean;
+    mutedFooter: boolean;
+    footerText?: string;
+    scrollContent: boolean;
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    submitEffect?: EffectName;
+    fySubmit: EventEmitter<void>;
+    get animationsDisabled(): boolean;
+    constructor();
+    get hasHeaderSlot(): boolean;
+    get hasFooterSlot(): boolean;
+    get hasActionsSlot(): boolean;
+    get animationClassSuffix(): string;
+    get hostStyles(): string;
+    onSubmit(event: Event): void;
+    private resolveAnimationsActive;
+}

package/dist/components/card.component.js

@@ -0,0 +1,236 @@
+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 {
+    get animationsDisabled() {
+        return !this.isAnimationsActive(this.activeAnimations);
+    }
+    constructor() {
+        super(inject(require('../services/fylib.service').FyLibService), 'fy-card');
+        this.variant = CardDefinition.defaultProps.variant;
+        this.mode = CardDefinition.defaultProps.mode;
+        this.mutedHeader = CardDefinition.defaultProps.mutedHeader;
+        this.mutedFooter = CardDefinition.defaultProps.mutedFooter;
+        this.scrollContent = CardDefinition.defaultProps.scrollContent;
+        this.activeAnimations = CardDefinition.defaultProps.activeAnimations;
+        this.activeEffects = CardDefinition.defaultProps.activeEffects;
+        this.customStyles = CardDefinition.defaultProps.customStyles;
+        this.fySubmit = new EventEmitter();
+        const t = this.fylib.tokens();
+        const icons = t?.effects?.card?.icons || {};
+        if (icons?.header)
+            this.headerIconName = icons.header;
+        if (icons?.footer)
+            this.footerIconName = icons.footer;
+    }
+    get hasHeaderSlot() { return false; }
+    get hasFooterSlot() { return false; }
+    get hasActionsSlot() { return true; }
+    get animationClassSuffix() {
+        const anim = this.resolveAnim('enter', undefined, CardDefinition.features?.animations?.enter);
+        return animationClasses(anim);
+    }
+    get hostStyles() {
+        return this.getHostStyles(this.customStyles);
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        if (this.mode === 'form' && this.isAnimationsActive(this.activeAnimations)) {
+            this.triggerByEvent('fy-card.submit', this.submitEffect, this.activeEffects);
+        }
+        if (this.mode === 'form') {
+            this.fySubmit.emit();
+        }
+    }
+    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: `
+    <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>
+      }
+
+      <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>
+
+      @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>
+      }
+    </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;
+    }
+
+    .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;
+    }
+
+    @media (max-width: 768px) {
+      .fy-card__body--scroll {
+        max-height: 60vh;
+      }
+      .fy-card__actions {
+        justify-content: stretch;
+      }
+    }
+  `],
+        encapsulation: ViewEncapsulation.None
+    }),
+    __metadata("design:paramtypes", [])
+], FyCardComponent);
+export { FyCardComponent };

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

@@ -0,0 +1,39 @@
+import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+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';
+export declare class FyChartComponent extends BaseFyComponent<'fy-chart'> implements ChartProps, OnInit, OnChanges {
+    type: ChartType;
+    series: ChartSeries[];
+    categories?: string[];
+    title?: string;
+    subtitle?: string;
+    height: string | number;
+    width: string | number;
+    colors?: string[];
+    showLegend: boolean;
+    showGrid: boolean;
+    showLabels: boolean;
+    stacked: boolean;
+    animated: boolean;
+    variant: 'default' | 'minimal' | 'compact';
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    fyDataClick: EventEmitter<any>;
+    chart?: BaseChartDirective;
+    chartData: ChartData<any>;
+    chartOptions: ChartConfiguration['options'];
+    chartJsType: any;
+    constructor();
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private updateChart;
+    private mapType;
+    onChartClick({ event, active }: {
+        event?: ChartEvent;
+        active?: {}[];
+    }): void;
+    get animationClassSuffix(): string;
+}