@fylib/adapter-angular 0.2.5 → 0.2.7

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

@@ -1,6 +1,7 @@
 import { EventEmitter } from '@angular/core';
 import { AccordionProps, AccordionItem, AccordionExpandMode } from '@fylib/catalog';
 import { BaseFyComponent, FyComponentBaseInputs } from '../base/base-component';
+import * as i0 from "@angular/core";
 export declare class FyAccordionComponent extends BaseFyComponent<'fy-accordion'> implements AccordionProps, FyComponentBaseInputs {
     constructor();
     items: AccordionItem[];
@@ -29,4 +30,6 @@ export declare class FyAccordionComponent extends BaseFyComponent<'fy-accordion'
     isActive(i: number): boolean;
     handleKeyDown(event: KeyboardEvent, index: number): void;
     toggle(i: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FyAccordionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FyAccordionComponent, "fy-accordion", never, { "items": { "alias": "items"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; "expandMode": { "alias": "expandMode"; "required": false; }; "size": { "alias": "size"; "required": false; }; "status": { "alias": "status"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "flush": { "alias": "flush"; "required": false; }; "animated": { "alias": "animated"; "required": false; }; "lazy": { "alias": "lazy"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "onOpen": { "alias": "onOpen"; "required": false; }; "onClose": { "alias": "onClose"; "required": false; }; "onChange": { "alias": "onChange"; "required": false; }; "activeAnimations": { "alias": "activeAnimations"; "required": false; }; "activeEffects": { "alias": "activeEffects"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; }, { "fyOpen": "fyOpen"; "fyClose": "fyClose"; "fyChange": "fyChange"; }, never, ["[fy-accordion-item-content={{it.id}}]"], true, never>;
 }

package/dist/components/accordion.component.js

@@ -1,18 +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 { AccordionDefinition } from '@fylib/catalog';
 import { BaseFyComponent } from '../base/base-component';
 import { FyLibService } from '../services/fylib.service';
-let FyAccordionComponent = class FyAccordionComponent extends BaseFyComponent {
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class FyAccordionComponent extends BaseFyComponent {
     constructor() {
         super(inject(FyLibService), 'fy-accordion');
         this.items = AccordionDefinition.defaultProps.items;
@@ -104,103 +97,9 @@ let FyAccordionComponent = class FyAccordionComponent extends BaseFyComponent {
             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: `
+}
+FyAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FyAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FyAccordionComponent, isStandalone: true, selector: "fy-accordion", inputs: { items: "items", activeIndex: "activeIndex", expandMode: "expandMode", size: "size", status: "status", bordered: "bordered", flush: "flush", animated: "animated", lazy: "lazy", iconPosition: "iconPosition", disabled: "disabled", onOpen: "onOpen", onClose: "onClose", onChange: "onChange", activeAnimations: "activeAnimations", activeEffects: "activeEffects", customStyles: "customStyles" }, outputs: { fyOpen: "fyOpen", fyClose: "fyClose", fyChange: "fyChange" }, host: { properties: { "class.fy-animations-disabled": "this.animationsDisabled", "style": "this.hostStyles" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="fy-accordion" 
          [class.fy-accordion--bordered]="bordered" 
          [class.fy-accordion--flush]="flush"
@@ -248,90 +147,102 @@ FyAccordionComponent = __decorate([
         </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 };
+  `, isInline: true, styles: ["\n    .fy-accordion {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n    .fy-accordion--bordered { \n      border: 1px solid var(--fy-effects-accordion-borderColor, rgba(0,0,0,0.1));\n      border-radius: var(--fy-effects-accordion-borderRadius, var(--fy-borderRadius-md));\n      padding: 4px;\n      background: var(--fy-effects-accordion-background, #fff);\n      box-shadow: var(--fy-effects-accordion-shadow, none);\n    }\n    .fy-accordion--flush { border: none; padding: 0; }\n\n    .fy-accordion__item {\n      background: var(--fy-effects-accordion-background, #fff);\n      border: 1px solid var(--fy-effects-accordion-borderColor, rgba(0,0,0,0.1));\n      border-radius: var(--fy-effects-accordion-borderRadius, var(--fy-borderRadius-md));\n      overflow: hidden;\n    }\n    .fy-accordion--flush .fy-accordion__item {\n      border: none;\n      border-radius: 0;\n      background: transparent;\n    }\n\n    .fy-accordion__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n      padding: 10px 12px;\n      background: var(--fy-effects-accordion-headerBackground, transparent);\n      cursor: pointer;\n      user-select: none;\n    }\n    .fy-accordion__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-md, 14px);\n      font-weight: var(--fy-typography-fontWeight-bold, 600);\n    }\n    .fy-accordion__subtitle {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-sm, 11px);\n      opacity: .7;\n    }\n    .fy-accordion__header-main {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .fy-accordion__indicator {\n      transition: transform .2s ease;\n    }\n    .fy-accordion__indicator--open { transform: rotate(180deg); }\n\n    .fy-accordion__panel-wrapper {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;\n      opacity: 0;\n      overflow: hidden;\n    }\n\n    .fy-accordion__panel-wrapper--active {\n      grid-template-rows: 1fr;\n      opacity: 1;\n    }\n\n    .fy-accordion__panel {\n      min-height: 0;\n      border-top: 1px solid var(--fy-effects-accordion-dividerColor, rgba(0,0,0,0.08));\n      padding: 0 12px;\n      transition: padding 0.3s ease;\n    }\n\n    .fy-accordion__panel-wrapper--active .fy-accordion__panel {\n      padding: 12px;\n    }\n  "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  `, encapsulation: ViewEncapsulation.None, styles: ["\n    .fy-accordion {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n    .fy-accordion--bordered { \n      border: 1px solid var(--fy-effects-accordion-borderColor, rgba(0,0,0,0.1));\n      border-radius: var(--fy-effects-accordion-borderRadius, var(--fy-borderRadius-md));\n      padding: 4px;\n      background: var(--fy-effects-accordion-background, #fff);\n      box-shadow: var(--fy-effects-accordion-shadow, none);\n    }\n    .fy-accordion--flush { border: none; padding: 0; }\n\n    .fy-accordion__item {\n      background: var(--fy-effects-accordion-background, #fff);\n      border: 1px solid var(--fy-effects-accordion-borderColor, rgba(0,0,0,0.1));\n      border-radius: var(--fy-effects-accordion-borderRadius, var(--fy-borderRadius-md));\n      overflow: hidden;\n    }\n    .fy-accordion--flush .fy-accordion__item {\n      border: none;\n      border-radius: 0;\n      background: transparent;\n    }\n\n    .fy-accordion__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n      padding: 10px 12px;\n      background: var(--fy-effects-accordion-headerBackground, transparent);\n      cursor: pointer;\n      user-select: none;\n    }\n    .fy-accordion__title {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-md, 14px);\n      font-weight: var(--fy-typography-fontWeight-bold, 600);\n    }\n    .fy-accordion__subtitle {\n      margin: 0;\n      font-size: var(--fy-typography-fontSize-sm, 11px);\n      opacity: .7;\n    }\n    .fy-accordion__header-main {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .fy-accordion__indicator {\n      transition: transform .2s ease;\n    }\n    .fy-accordion__indicator--open { transform: rotate(180deg); }\n\n    .fy-accordion__panel-wrapper {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;\n      opacity: 0;\n      overflow: hidden;\n    }\n\n    .fy-accordion__panel-wrapper--active {\n      grid-template-rows: 1fr;\n      opacity: 1;\n    }\n\n    .fy-accordion__panel {\n      min-height: 0;\n      border-top: 1px solid var(--fy-effects-accordion-dividerColor, rgba(0,0,0,0.08));\n      padding: 0 12px;\n      transition: padding 0.3s ease;\n    }\n\n    .fy-accordion__panel-wrapper--active .fy-accordion__panel {\n      padding: 12px;\n    }\n  "] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{
+                type: Input
+            }], activeIndex: [{
+                type: Input
+            }], expandMode: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], bordered: [{
+                type: Input
+            }], flush: [{
+                type: Input
+            }], animated: [{
+                type: Input
+            }], lazy: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onOpen: [{
+                type: Input
+            }], onClose: [{
+                type: Input
+            }], onChange: [{
+                type: Input
+            }], activeAnimations: [{
+                type: Input
+            }], activeEffects: [{
+                type: Input
+            }], customStyles: [{
+                type: Input
+            }], fyOpen: [{
+                type: Output
+            }], fyClose: [{
+                type: Output
+            }], fyChange: [{
+                type: Output
+            }], animationsDisabled: [{
+                type: HostBinding,
+                args: ['class.fy-animations-disabled']
+            }], hostStyles: [{
+                type: HostBinding,
+                args: ['style']
+            }] } });

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

@@ -1,3 +1,4 @@
+import * as i0 from "@angular/core";
 export declare class FyBadgeComponent {
     private fylib;
     text?: string;
@@ -7,4 +8,6 @@ export declare class FyBadgeComponent {
     shine?: boolean | null;
     badgeStyle: import("@angular/core").Signal<Record<string, string>>;
     shineClass: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FyBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FyBadgeComponent, "fy-badge", never, { "text": { "alias": "text"; "required": false; }; "background": { "alias": "background"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "shine": { "alias": "shine"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/dist/components/badge.component.js

@@ -1,16 +1,9 @@
-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 {
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class FyBadgeComponent {
     constructor() {
         this.fylib = inject(FyLibService);
         this.badgeStyle = computed(() => {
@@ -27,86 +20,42 @@ let FyBadgeComponent = class FyBadgeComponent {
             if (br)
                 style['border-radius'] = br;
             return style;
-        });
+        }, ...(ngDevMode ? [{ debugName: "badgeStyle" }] : /* istanbul ignore next */ []));
         this.shineClass = computed(() => {
             const tokens = this.fylib.tokens();
             const badgeTokens = tokens?.effects?.badge || tokens?.badge || {};
             const shineToken = badgeTokens.animation === 'shine';
             return this.shine ?? shineToken;
-        });
+        }, ...(ngDevMode ? [{ debugName: "shineClass" }] : /* istanbul ignore next */ []));
     }
-};
-__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: `
+}
+FyBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FyBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FyBadgeComponent, isStandalone: true, selector: "fy-badge", inputs: { text: "text", background: "background", textColor: "textColor", borderRadius: "borderRadius", shine: "shine" }, ngImport: i0, 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 };
+  `, isInline: true, styles: ["\n    .fy-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      padding: 0 6px;\n      min-width: 16px;\n      height: 16px;\n      font-size: 10px;\n      font-weight: 700;\n      line-height: 1;\n      border-radius: 8px;\n      background-color: var(--fy-badge-background, #ff4757);\n      color: var(--fy-badge-textColor, #fff);\n      box-shadow: 0 0 0 1px rgba(0,0,0,0.06);\n      white-space: nowrap;\n    }\n    .fy-badge.fy-badge--shine {\n      position: relative;\n      overflow: hidden;\n    }\n    .fy-badge.fy-badge--shine::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: -150%;\n      width: 50%;\n      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);\n      transform: skewX(-20deg);\n      animation: fy-badge-shine 2.4s linear infinite;\n    }\n    @keyframes fy-badge-shine {\n      0% { left: -150%; }\n      100% { left: 200%; }\n    }\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: FyBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  `, encapsulation: ViewEncapsulation.None, styles: ["\n    .fy-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      padding: 0 6px;\n      min-width: 16px;\n      height: 16px;\n      font-size: 10px;\n      font-weight: 700;\n      line-height: 1;\n      border-radius: 8px;\n      background-color: var(--fy-badge-background, #ff4757);\n      color: var(--fy-badge-textColor, #fff);\n      box-shadow: 0 0 0 1px rgba(0,0,0,0.06);\n      white-space: nowrap;\n    }\n    .fy-badge.fy-badge--shine {\n      position: relative;\n      overflow: hidden;\n    }\n    .fy-badge.fy-badge--shine::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: -150%;\n      width: 50%;\n      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);\n      transform: skewX(-20deg);\n      animation: fy-badge-shine 2.4s linear infinite;\n    }\n    @keyframes fy-badge-shine {\n      0% { left: -150%; }\n      100% { left: 200%; }\n    }\n  "] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], shine: [{
+                type: Input
+            }] } });

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

@@ -3,6 +3,7 @@ import { ButtonProps } from '@fylib/catalog';
 import { ButtonHoverAnimationName, ButtonClickAnimationName, ButtonStateAnimationName } from '@fylib/animation';
 import { EffectName } from '@fylib/config';
 import { BaseFyComponent, FyComponentBaseInputs } from '../base/base-component';
+import * as i0 from "@angular/core";
 export declare class FyButtonComponent extends BaseFyComponent<'fy-button'> implements ButtonProps, FyComponentBaseInputs {
     constructor();
     label: string | undefined;
@@ -30,4 +31,6 @@ export declare class FyButtonComponent extends BaseFyComponent<'fy-button'> impl
     get animationClassSuffix(): string;
     handleClick(event: MouseEvent): void;
     handleHover(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FyButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FyButtonComponent, "fy-button", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "iconSet": { "alias": "iconSet"; "required": false; }; "activeAnimations": { "alias": "activeAnimations"; "required": false; }; "activeEffects": { "alias": "activeEffects"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; "hoverAnimation": { "alias": "hoverAnimation"; "required": false; }; "clickAnimation": { "alias": "clickAnimation"; "required": false; }; "successAnimation": { "alias": "successAnimation"; "required": false; }; "errorAnimation": { "alias": "errorAnimation"; "required": false; }; "hoverEffect": { "alias": "hoverEffect"; "required": false; }; "clickEffect": { "alias": "clickEffect"; "required": false; }; "successEffect": { "alias": "successEffect"; "required": false; }; "errorEffect": { "alias": "errorEffect"; "required": false; }; }, { "fyClick": "fyClick"; }, never, never, true, never>;
 }