@fylib/adapter-angular 0.1.0

package/dist/components/chart.component.js

@@ -0,0 +1,307 @@
+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, inject, ViewChild, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChartDefinition } from '@fylib/catalog';
+import { FyLibService } from '../services/fylib.service';
+import { BaseFyComponent } from '../base/base-component';
+import { BaseChartDirective } from 'ng2-charts';
+let FyChartComponent = class FyChartComponent extends BaseFyComponent {
+    constructor() {
+        super(inject(FyLibService), 'fy-chart');
+        this.type = ChartDefinition.defaultProps.type;
+        this.series = ChartDefinition.defaultProps.series;
+        this.height = '350px';
+        this.width = '100%';
+        this.showLegend = ChartDefinition.defaultProps.showLegend;
+        this.showGrid = ChartDefinition.defaultProps.showGrid;
+        this.showLabels = ChartDefinition.defaultProps.showLabels;
+        this.stacked = ChartDefinition.defaultProps.stacked;
+        this.animated = ChartDefinition.defaultProps.animated;
+        this.variant = 'default';
+        this.activeAnimations = null;
+        this.activeEffects = null;
+        this.customStyles = null;
+        this.fyDataClick = new EventEmitter();
+        this.chartData = { datasets: [] };
+        this.chartOptions = {};
+        this.chartJsType = 'line';
+    }
+    ngOnInit() {
+        this.updateChart();
+        if (this.isAnimationsActive(this.activeAnimations)) {
+            const anim = this.resolveAnim('enter', undefined, ChartDefinition.features?.animations?.enter);
+            if (anim)
+                this.fylib.playAnimation(anim);
+            this.triggerByEvent('fy-chart.enter', undefined, this.activeEffects);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['series'] || changes['categories'] || changes['type'] || changes['stacked']) {
+            this.updateChart();
+        }
+    }
+    updateChart() {
+        this.chartJsType = this.mapType(this.type);
+        const tokens = this.fylib.getTokens();
+        const themeMode = this.fylib.getMode();
+        const chartTokens = tokens.effects?.chart;
+        const baseColors = this.colors || chartTokens?.colors || ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
+        const labelColor = chartTokens?.labelColor || (themeMode === 'dark' ? '#9ca3af' : '#64748b');
+        const gridColor = chartTokens?.gridColor || (themeMode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(15, 23, 42, 0.05)');
+        const fontFamily = chartTokens?.fontFamily || tokens.typography?.fontFamily?.base || 'inherit';
+        // Map series to Chart.js datasets
+        this.chartData = {
+            labels: this.categories,
+            datasets: this.series.map((s, i) => ({
+                label: s.name,
+                data: s.data,
+                backgroundColor: this.type === 'pie' || this.type === 'donut' ? baseColors : baseColors[i % baseColors.length],
+                borderColor: baseColors[i % baseColors.length],
+                fill: this.type === 'area',
+                tension: 0.4
+            }))
+        };
+        this.chartOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: {
+                duration: this.animated && this.isAnimationsActive(this.activeAnimations) ? 800 : 0
+            },
+            plugins: {
+                legend: {
+                    display: this.showLegend,
+                    position: 'bottom',
+                    labels: {
+                        color: labelColor,
+                        font: { family: fontFamily }
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    mode: 'index',
+                    intersect: false,
+                    backgroundColor: themeMode === 'dark' ? '#1f2937' : '#ffffff',
+                    titleColor: themeMode === 'dark' ? '#f9fafb' : '#111827',
+                    bodyColor: themeMode === 'dark' ? '#d1d5db' : '#4b5563',
+                    borderColor: themeMode === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
+                    borderWidth: 1
+                }
+            },
+            scales: (this.type === 'pie' || this.type === 'donut' || this.type === 'radar' ? {} : {
+                x: {
+                    stacked: this.stacked,
+                    display: this.showLabels,
+                    grid: {
+                        display: false,
+                        color: gridColor
+                    },
+                    ticks: {
+                        color: labelColor,
+                        font: { family: fontFamily }
+                    }
+                },
+                y: {
+                    stacked: this.stacked,
+                    display: this.showLabels,
+                    grid: {
+                        display: this.showGrid,
+                        color: gridColor
+                    },
+                    ticks: {
+                        color: labelColor,
+                        font: { family: fontFamily }
+                    }
+                }
+            })
+        };
+        if (this.chart) {
+            this.chart.update();
+        }
+    }
+    mapType(type) {
+        switch (type) {
+            case 'donut': return 'doughnut';
+            case 'area': return 'line'; // Chart.js handles area as line with fill
+            default: return type;
+        }
+    }
+    onChartClick({ event, active }) {
+        if (active && active.length > 0) {
+            this.fyDataClick.emit(active);
+            this.triggerByEvent('fy-chart.dataClick', undefined, this.activeEffects);
+        }
+    }
+    get animationClassSuffix() {
+        const anim = this.resolveAnim('enter', undefined, ChartDefinition.features?.animations?.enter);
+        return anim ? ` fy-anim-${anim}` : '';
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyChartComponent.prototype, "type", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FyChartComponent.prototype, "series", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FyChartComponent.prototype, "categories", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyChartComponent.prototype, "title", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyChartComponent.prototype, "subtitle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyChartComponent.prototype, "height", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyChartComponent.prototype, "width", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FyChartComponent.prototype, "colors", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyChartComponent.prototype, "showLegend", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyChartComponent.prototype, "showGrid", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyChartComponent.prototype, "showLabels", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyChartComponent.prototype, "stacked", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyChartComponent.prototype, "animated", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyChartComponent.prototype, "variant", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyChartComponent.prototype, "activeAnimations", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyChartComponent.prototype, "activeEffects", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyChartComponent.prototype, "customStyles", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyChartComponent.prototype, "fyDataClick", void 0);
+__decorate([
+    ViewChild(BaseChartDirective),
+    __metadata("design:type", BaseChartDirective)
+], FyChartComponent.prototype, "chart", void 0);
+FyChartComponent = __decorate([
+    Component({
+        selector: 'fy-chart',
+        standalone: true,
+        imports: [CommonModule, BaseChartDirective],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+        template: `
+    <div
+      class="fy-chart-container"
+      [class]="'fy-chart--' + variant"
+      [class]="composeAnimClasses(animationClassSuffix)"
+      [style]="getHostStyles(customStyles)"
+    >
+     
+      @if(title || subtitle) {
+        <div class="fy-chart__header">
+          @if(title) {
+            <h3 class="fy-chart__title">{{ title }}</h3>
+          }
+          @if(subtitle) {
+            <p class="fy-chart__subtitle">{{ subtitle }}</p>
+          }
+        </div>
+      }
+      @if(chartData.datasets.length > 0) {
+        <div class="fy-chart__content" [style.height]="height" [style.width]="width">
+          <canvas
+            baseChart
+            [data]="chartData"
+            [options]="chartOptions"
+            [type]="chartJsType"
+            (chartClick)="onChartClick($event)"
+          >
+          </canvas>
+        </div>
+      }
+     
+    </div>
+  `,
+        styles: [`
+    .fy-chart-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      background: var(--fy-effects-chart-background, transparent);
+      border: 1px solid var(--fy-effects-chart-borderColor, transparent);
+      border-radius: var(--fy-borderRadius-lg, 12px);
+      padding: var(--fy-spacing-md);
+      box-sizing: border-box;
+    }
+
+    .fy-chart__header {
+      margin-bottom: var(--fy-spacing-md);
+    }
+
+    .fy-chart__title {
+      margin: 0;
+      font-size: var(--fy-typography-fontSize-lg);
+      font-weight: var(--fy-typography-fontWeight-bold);
+      color: var(--fy-colors-text);
+    }
+
+    .fy-chart__subtitle {
+      margin: 4px 0 0;
+      font-size: var(--fy-typography-fontSize-sm);
+      color: var(--fy-colors-secondary);
+    }
+
+    .fy-chart__content {
+      position: relative;
+      margin: auto;
+      width: 100%;
+    }
+
+    .fy-chart--minimal {
+      padding: 0;
+      border: none;
+      background: transparent;
+    }
+  `],
+        encapsulation: ViewEncapsulation.None
+    }),
+    __metadata("design:paramtypes", [])
+], FyChartComponent);
+export { FyChartComponent };

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

@@ -0,0 +1,18 @@
+import { IconVariant } from '../icons/registry';
+import { IconSet } from '@fylib/config';
+type IconSize = 'sm' | 'md' | 'lg';
+export declare class FyIconComponent {
+    private fylib;
+    name?: string;
+    size: IconSize;
+    color?: string | null;
+    strokeWidth?: string | number | null;
+    variant?: IconVariant | null;
+    set?: IconSet;
+    wrapperStyle: import("@angular/core").Signal<Record<string, string>>;
+    get svgPath(): string | null;
+    private _svgViewBox;
+    get svgViewBox(): string;
+    get className(): string | null;
+}
+export {};

package/dist/components/icon.component.js

@@ -0,0 +1,144 @@
+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';
+import { iconRegistry } from '../icons/registry';
+let FyIconComponent = class FyIconComponent {
+    constructor() {
+        this.fylib = inject(FyLibService);
+        this.size = 'md';
+        this.wrapperStyle = computed(() => {
+            const style = {};
+            const tokens = this.fylib.tokens();
+            const defaultColor = tokens?.icons?.color;
+            const defaultStroke = tokens?.icons?.strokeWidth;
+            const color = this.color ?? (defaultColor ? String(defaultColor) : null);
+            if (color)
+                style['color'] = color;
+            const sw = this.strokeWidth ?? (defaultStroke ? String(defaultStroke) : null);
+            if (sw != null)
+                style['--fy-icon-stroke-width'] = String(sw);
+            return style;
+        });
+        this._svgViewBox = '0 0 24 24';
+    }
+    get svgPath() {
+        const tokens = this.fylib.tokens();
+        const defaultSet = tokens?.icons?.defaultSet || null;
+        const effectiveSet = this.set || defaultSet || null;
+        if (effectiveSet) {
+            const provider = iconRegistry.getProvider(effectiveSet);
+            const v = (this.variant ?? tokens?.icons?.variant) || undefined;
+            if (provider?.resolveSvg) {
+                const res = provider.resolveSvg(String(this.name), v);
+                if (res?.svg) {
+                    this._svgViewBox = res.viewBox || '0 0 24 24';
+                    return res.svg;
+                }
+            }
+        }
+        switch (this.name) {
+            case 'user':
+                return 'M12 12c2.761 0 5-2.239 5-5s-2.239-5-5-5S7 4.239 7 7s2.239 5 5 5zm0 2c-4.418 0-8 2.239-8 5v2h16v-2c0-2.761-3.582-5-8-5z';
+            case 'search':
+                return 'M11 4a7 7 0 105.197 12.03l3.386 3.387 1.414-1.414-3.387-3.386A7 7 0 0011 4zm0 2a5 5 0 110 10 5 5 0 010-10z';
+            case 'eye':
+                return 'M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 12a5 5 0 110-10 5 5 0 010 10z';
+            case 'eye-slash':
+                return 'M2 2l20 20-1.5 1.5L16.9 18.9A10.9 10.9 0 0112 19c-7 0-11-7-11-7a21.8 21.8 0 015.4-6.5L3.5 3.5 2 2zm7.7 7.7a4 4 0 005.6 5.6l-5.6-5.6zM12 5c7 0 11 7 11 7a21.8 21.8 0 01-4.3 5.1l-1.5-1.5A10.9 10.9 0 0012 7a10.9 10.9 0 00-3.4.6L7.2 6.2A21.8 21.8 0 0112 5zm-9 7s4 7 11 7a10.9 10.9 0 004.3-.9l-1.6-1.6A10.9 10.9 0 0112 17c-7 0-11-5-11-5z';
+            case 'menu':
+                return 'M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z';
+            default:
+                return null;
+        }
+    }
+    get svgViewBox() {
+        return this._svgViewBox;
+    }
+    get className() {
+        const tokens = this.fylib.tokens();
+        const defaultSet = tokens?.icons?.defaultSet || null;
+        const effectiveSet = this.set || defaultSet;
+        if (!effectiveSet)
+            return null;
+        const provider = iconRegistry.getProvider(effectiveSet);
+        const v = (this.variant ?? tokens?.icons?.variant) || undefined;
+        if (provider?.resolveClass) {
+            return provider.resolveClass(String(this.name), v);
+        }
+        const base = effectiveSet === 'ph' ? 'ph' : effectiveSet;
+        return `${base} ${base}-${this.name}`;
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyIconComponent.prototype, "name", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyIconComponent.prototype, "size", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyIconComponent.prototype, "color", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyIconComponent.prototype, "strokeWidth", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyIconComponent.prototype, "variant", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyIconComponent.prototype, "set", void 0);
+FyIconComponent = __decorate([
+    Component({
+        selector: 'fy-icon',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <span class="fy-icon"
+          [class]="'fy-icon--' + size"
+          [ngStyle]="wrapperStyle()"
+          >
+      @if (svgPath) {
+        <svg [attr.viewBox]="svgViewBox" fill="currentColor" aria-hidden="true">
+          <path [attr.d]="svgPath"></path>
+        </svg>
+      } @else {
+        @if (className) {
+          <span [class]="className"></span>
+        }
+      }
+    </span>
+  `,
+        styles: [`
+    .fy-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--fy-icons-color, currentColor);
+    }
+    .fy-icon svg {
+      width: 1em;
+      height: 1em;
+    }
+    .fy-icon--sm { font-size: var(--fy-icons-size-sm, var(--fy-typography-fontSize-sm, 12px)); }
+    .fy-icon--md { font-size: var(--fy-icons-size-md, var(--fy-typography-fontSize-md, 16px)); }
+    .fy-icon--lg { font-size: var(--fy-icons-size-lg, var(--fy-typography-fontSize-lg, 20px)); }
+  `],
+        encapsulation: ViewEncapsulation.None
+    })
+], FyIconComponent);
+export { FyIconComponent };

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from '@angular/core';
+import { InputProps } from '@fylib/catalog';
+import { InputFocusAnimationName, InputStateAnimationName } from '@fylib/animation';
+import { EffectName } from '@fylib/config';
+import { BaseFyComponent, FyComponentBaseInputs } from '../base/base-component';
+export declare class FyInputComponent extends BaseFyComponent<'fy-input'> implements InputProps, FyComponentBaseInputs {
+    value?: string;
+    placeholder?: string;
+    type: InputProps['type'];
+    disabled: boolean;
+    readonly: boolean;
+    mask?: string;
+    showPasswordToggle: boolean;
+    iconLeft?: string;
+    iconRight?: string;
+    iconLeftName?: string;
+    iconRightName?: string;
+    size: NonNullable<InputProps['size']>;
+    status: NonNullable<InputProps['status']>;
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    focusAnimation?: InputFocusAnimationName;
+    successAnimation?: InputStateAnimationName;
+    errorAnimation?: InputStateAnimationName;
+    focusEffect?: EffectName;
+    successEffect?: EffectName;
+    errorEffect?: EffectName;
+    onInput?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    fyInput: EventEmitter<string>;
+    fyChange: EventEmitter<string>;
+    fyFocus: EventEmitter<void>;
+    fyBlur: EventEmitter<void>;
+    get animationsDisabled(): boolean;
+    get hostStyles(): string;
+    get visibleType(): string;
+    get animationClassSuffix(): string;
+    private _passwordVisible;
+    constructor();
+    togglePassword(): void;
+    onInputHandler(event: Event): void;
+    onChangeHandler(event: Event): void;
+    onFocusHandler(): void;
+    onBlurHandler(): void;
+    private resolveAnimationsActive;
+    private applyMask;
+}