@fylib/adapter-angular 0.2.3 → 0.2.7

package/dist/components/chart.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, 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 {
+import * as i0 from "@angular/core";
+export class FyChartComponent extends BaseFyComponent {
     constructor() {
         super(inject(FyLibService), 'fy-chart');
         this.type = ChartDefinition.defaultProps.type;
@@ -143,90 +135,9 @@ let FyChartComponent = class FyChartComponent extends BaseFyComponent {
         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: `
+}
+FyChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FyChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FyChartComponent, isStandalone: true, selector: "fy-chart", inputs: { type: "type", series: "series", categories: "categories", title: "title", subtitle: "subtitle", height: "height", width: "width", colors: "colors", showLegend: "showLegend", showGrid: "showGrid", showLabels: "showLabels", stacked: "stacked", animated: "animated", variant: "variant", activeAnimations: "activeAnimations", activeEffects: "activeEffects", customStyles: "customStyles" }, outputs: { fyDataClick: "fyDataClick" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <div
       class="fy-chart-container"
       [class]="'fy-chart--' + variant"
@@ -258,50 +169,79 @@ FyChartComponent = __decorate([
       }
      
     </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 };
+  `, isInline: true, styles: ["\n    .fy-chart-container {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      background: var(--fy-effects-chart-background, transparent);\n      border: 1px solid var(--fy-effects-chart-borderColor, transparent);\n      border-radius: var(--fy-borderRadius-lg, 12px);\n      padding: var(--fy-spacing-md);\n      box-sizing: border-box;\n    }\n\n    .fy-chart__header {\n      margin-bottom: var(--fy-spacing-md);\n    }\n\n    .fy-chart__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-lg);\n      font-weight: var(--fy-typography-fontWeight-bold);\n      color: var(--fy-colors-text);\n    }\n\n    .fy-chart__subtitle {\n      margin: 4px 0 0;\n      font-size: var(--fy-typography-fontSize-sm);\n      color: var(--fy-colors-secondary);\n    }\n\n    .fy-chart__content {\n      position: relative;\n      margin: auto;\n      width: 100%;\n    }\n\n    .fy-chart--minimal {\n      padding: 0;\n      border: none;\n      background: transparent;\n    }\n  "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyChartComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  `, encapsulation: ViewEncapsulation.None, styles: ["\n    .fy-chart-container {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      background: var(--fy-effects-chart-background, transparent);\n      border: 1px solid var(--fy-effects-chart-borderColor, transparent);\n      border-radius: var(--fy-borderRadius-lg, 12px);\n      padding: var(--fy-spacing-md);\n      box-sizing: border-box;\n    }\n\n    .fy-chart__header {\n      margin-bottom: var(--fy-spacing-md);\n    }\n\n    .fy-chart__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-lg);\n      font-weight: var(--fy-typography-fontWeight-bold);\n      color: var(--fy-colors-text);\n    }\n\n    .fy-chart__subtitle {\n      margin: 4px 0 0;\n      font-size: var(--fy-typography-fontSize-sm);\n      color: var(--fy-colors-secondary);\n    }\n\n    .fy-chart__content {\n      position: relative;\n      margin: auto;\n      width: 100%;\n    }\n\n    .fy-chart--minimal {\n      padding: 0;\n      border: none;\n      background: transparent;\n    }\n  "] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], series: [{
+                type: Input
+            }], categories: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], showLegend: [{
+                type: Input
+            }], showGrid: [{
+                type: Input
+            }], showLabels: [{
+                type: Input
+            }], stacked: [{
+                type: Input
+            }], animated: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], activeAnimations: [{
+                type: Input
+            }], activeEffects: [{
+                type: Input
+            }], customStyles: [{
+                type: Input
+            }], fyDataClick: [{
+                type: Output
+            }], chart: [{
+                type: ViewChild,
+                args: [BaseChartDirective]
+            }] } });

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

@@ -1,5 +1,6 @@
 import { IconVariant } from '../icons/registry';
 import { IconSet } from '@fylib/config';
+import * as i0 from "@angular/core";
 type IconSize = 'sm' | 'md' | 'lg';
 export declare class FyIconComponent {
     private fylib;
@@ -14,5 +15,7 @@ export declare class FyIconComponent {
     private _svgViewBox;
     get svgViewBox(): string;
     get className(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FyIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FyIconComponent, "fy-icon", never, { "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "set": { "alias": "set"; "required": false; }; }, {}, never, never, true, never>;
 }
 export {};

package/dist/components/icon.component.js

@@ -1,17 +1,10 @@
-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 {
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class FyIconComponent {
     constructor() {
         this.fylib = inject(FyLibService);
         this.size = 'md';
@@ -27,7 +20,7 @@ let FyIconComponent = class FyIconComponent {
             if (sw != null)
                 style['--fy-icon-stroke-width'] = String(sw);
             return style;
-        });
+        }, ...(ngDevMode ? [{ debugName: "wrapperStyle" }] : /* istanbul ignore next */ []));
         this._svgViewBox = '0 0 24 24';
     }
     get svgPath() {
@@ -77,37 +70,9 @@ let FyIconComponent = class FyIconComponent {
         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: `
+}
+FyIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FyIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FyIconComponent, isStandalone: true, selector: "fy-icon", inputs: { name: "name", size: "size", color: "color", strokeWidth: "strokeWidth", variant: "variant", set: "set" }, ngImport: i0, template: `
     <span class="fy-icon"
           [class]="'fy-icon--' + size"
           [ngStyle]="wrapperStyle()"
@@ -122,23 +87,35 @@ FyIconComponent = __decorate([
         }
       }
     </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 };
+  `, isInline: true, styles: ["\n    .fy-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--fy-icons-color, currentColor);\n    }\n    .fy-icon svg {\n      width: 1em;\n      height: 1em;\n    }\n    .fy-icon--sm { font-size: var(--fy-icons-size-sm, var(--fy-typography-fontSize-sm, 12px)); }\n    .fy-icon--md { font-size: var(--fy-icons-size-md, var(--fy-typography-fontSize-md, 16px)); }\n    .fy-icon--lg { font-size: var(--fy-icons-size-lg, var(--fy-typography-fontSize-lg, 20px)); }\n  "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyIconComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  `, encapsulation: ViewEncapsulation.None, styles: ["\n    .fy-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--fy-icons-color, currentColor);\n    }\n    .fy-icon svg {\n      width: 1em;\n      height: 1em;\n    }\n    .fy-icon--sm { font-size: var(--fy-icons-size-sm, var(--fy-typography-fontSize-sm, 12px)); }\n    .fy-icon--md { font-size: var(--fy-icons-size-md, var(--fy-typography-fontSize-md, 16px)); }\n    .fy-icon--lg { font-size: var(--fy-icons-size-lg, var(--fy-typography-fontSize-lg, 20px)); }\n  "] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], set: [{
+                type: Input
+            }] } });

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

@@ -3,6 +3,7 @@ import { InputProps } from '@fylib/catalog';
 import { InputFocusAnimationName, InputStateAnimationName } from '@fylib/animation';
 import { EffectName } from '@fylib/config';
 import { BaseFyComponent, FyComponentBaseInputs } from '../base/base-component';
+import * as i0 from "@angular/core";
 export declare class FyInputComponent extends BaseFyComponent<'fy-input'> implements InputProps, FyComponentBaseInputs {
     value?: string;
     placeholder?: string;
@@ -47,4 +48,6 @@ export declare class FyInputComponent extends BaseFyComponent<'fy-input'> implem
     onBlurHandler(): void;
     private resolveAnimationsActive;
     private applyMask;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FyInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FyInputComponent, "fy-input", never, { "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "showPasswordToggle": { "alias": "showPasswordToggle"; "required": false; }; "iconLeft": { "alias": "iconLeft"; "required": false; }; "iconRight": { "alias": "iconRight"; "required": false; }; "iconLeftName": { "alias": "iconLeftName"; "required": false; }; "iconRightName": { "alias": "iconRightName"; "required": false; }; "size": { "alias": "size"; "required": false; }; "status": { "alias": "status"; "required": false; }; "activeAnimations": { "alias": "activeAnimations"; "required": false; }; "activeEffects": { "alias": "activeEffects"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; "focusAnimation": { "alias": "focusAnimation"; "required": false; }; "successAnimation": { "alias": "successAnimation"; "required": false; }; "errorAnimation": { "alias": "errorAnimation"; "required": false; }; "focusEffect": { "alias": "focusEffect"; "required": false; }; "successEffect": { "alias": "successEffect"; "required": false; }; "errorEffect": { "alias": "errorEffect"; "required": false; }; "onInput": { "alias": "onInput"; "required": false; }; "onChange": { "alias": "onChange"; "required": false; }; "onFocus": { "alias": "onFocus"; "required": false; }; "onBlur": { "alias": "onBlur"; "required": false; }; }, { "fyInput": "fyInput"; "fyChange": "fyChange"; "fyFocus": "fyFocus"; "fyBlur": "fyBlur"; }, never, never, true, never>;
 }