@fylib/adapter-angular 0.1.0 → 0.2.1

package/dist/components/accordion.component.js

@@ -200,135 +200,135 @@ FyAccordionComponent = __decorate([
         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>
+        template: `
+    <div class="fy-accordion" 
+         [class.fy-accordion--bordered]="bordered" 
+         [class.fy-accordion--flush]="flush"
+         role="presentation">
+      @for (it of items; track it.id; let i = $index) {
+        <section class="fy-accordion__item" 
+                 [class.fy-accordion__item--active]="isActive(i)" 
+                 [class.fy-accordion__item--disabled]="it.disabled">
+          <header class="fy-accordion__header" 
+                  (click)="toggle(i)"
+                  (keydown)="handleKeyDown($event, i)"
+                  [attr.aria-expanded]="isActive(i)"
+                  [attr.aria-controls]="'fy-accordion-panel-' + it.id"
+                  [attr.aria-disabled]="it.disabled || disabled"
+                  [attr.id]="'fy-accordion-header-' + it.id"
+                  [tabindex]="it.disabled || disabled ? -1 : 0"
+                  role="button">
+            <div class="fy-accordion__header-main">
+              <h4 class="fy-accordion__title">{{ it.title }}</h4>
+              @if (it.subtitle) { <p class="fy-accordion__subtitle">{{ it.subtitle }}</p> }
+            </div>
+            <span class="fy-accordion__indicator" 
+                  [class.fy-accordion__indicator--open]="isActive(i)"
+                  aria-hidden="true">▾</span>
+          </header>
+          
+          <div 
+            class="fy-accordion__panel-wrapper" 
+            [ngClass]="getPanelClasses(i)"
+            [attr.id]="'fy-accordion-panel-' + it.id"
+            [attr.aria-labelledby]="'fy-accordion-header-' + it.id"
+            [attr.aria-hidden]="!isActive(i)"
+            role="region"
+          >
+            <div class="fy-accordion__panel">
+              @if (!lazy || isActive(i)) {
+                @if (it.content) {
+                  <div class="fy-accordion__content">{{ it.content }}</div>
+                } @else {
+                  <ng-content select="[fy-accordion-item-content={{it.id}}]"></ng-content>
+                }
+              }
+            </div>
+          </div>
+        </section>
+      }
+    </div>
   `,
-        styles: [`
-    .fy-accordion {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-    .fy-accordion--bordered { 
-      border: 1px solid var(--fy-effects-accordion-borderColor, rgba(0,0,0,0.1));
-      border-radius: var(--fy-effects-accordion-borderRadius, var(--fy-borderRadius-md));
-      padding: 4px;
-      background: var(--fy-effects-accordion-background, #fff);
-      box-shadow: var(--fy-effects-accordion-shadow, none);
-    }
-    .fy-accordion--flush { border: none; padding: 0; }
-
-    .fy-accordion__item {
-      background: var(--fy-effects-accordion-background, #fff);
-      border: 1px solid var(--fy-effects-accordion-borderColor, rgba(0,0,0,0.1));
-      border-radius: var(--fy-effects-accordion-borderRadius, var(--fy-borderRadius-md));
-      overflow: hidden;
-    }
-    .fy-accordion--flush .fy-accordion__item {
-      border: none;
-      border-radius: 0;
-      background: transparent;
-    }
-
-    .fy-accordion__header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      padding: 10px 12px;
-      background: var(--fy-effects-accordion-headerBackground, transparent);
-      cursor: pointer;
-      user-select: none;
-    }
-    .fy-accordion__title {
-      margin: 0;
-      font-size: var(--fy-typography-fontSize-md, 14px);
-      font-weight: var(--fy-typography-fontWeight-bold, 600);
-    }
-    .fy-accordion__subtitle {
-      margin: 0;
-      font-size: var(--fy-typography-fontSize-sm, 11px);
-      opacity: .7;
-    }
-    .fy-accordion__header-main {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
-    .fy-accordion__indicator {
-      transition: transform .2s ease;
-    }
-    .fy-accordion__indicator--open { transform: rotate(180deg); }
-
-    .fy-accordion__panel-wrapper {
-      display: grid;
-      grid-template-rows: 0fr;
-      transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
-      opacity: 0;
-      overflow: hidden;
-    }
-
-    .fy-accordion__panel-wrapper--active {
-      grid-template-rows: 1fr;
-      opacity: 1;
-    }
-
-    .fy-accordion__panel {
-      min-height: 0;
-      border-top: 1px solid var(--fy-effects-accordion-dividerColor, rgba(0,0,0,0.08));
-      padding: 0 12px;
-      transition: padding 0.3s ease;
-    }
-
-    .fy-accordion__panel-wrapper--active .fy-accordion__panel {
-      padding: 12px;
-    }
+        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
     }),

package/dist/components/badge.component.js

@@ -61,50 +61,50 @@ FyBadgeComponent = __decorate([
         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>
+        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%; }
-    }
+        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
     })

package/dist/components/button.component.js

@@ -160,110 +160,110 @@ FyButtonComponent = __decorate([
         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>
+        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); }
-    }
+        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
     }),