@fylib/adapter-angular 0.1.0 → 0.2.1

package/dist/components/card.component.js

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

package/dist/components/chart.component.js

@@ -226,79 +226,79 @@ FyChartComponent = __decorate([
         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>
+        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;
-    }
+        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
     }),

package/dist/components/icon.component.js

@@ -107,36 +107,36 @@ FyIconComponent = __decorate([
         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>
+        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)); }
+        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
     })

package/dist/components/input.component.js

@@ -263,118 +263,118 @@ FyInputComponent = __decorate([
         selector: 'fy-input',
         standalone: true,
         imports: [CommonModule, FyIconComponent],
-        template: `
-    <div
-      class="fy-input"
-      [class.fy-input--with-left]="iconLeft || iconLeftName"
-      [class.fy-input--with-right]="iconRight || iconRightName"
-      [class.fy-input--sm]="size === 'sm'"
-      [class.fy-input--lg]="size === 'lg'"
-      [class.fy-input--status-success]="status === 'success'"
-      [class.fy-input--status-error]="status === 'error'"
-      [class]="animationClassSuffix"
-    >
-      @if (iconLeftName) {
-        <fy-icon class="fy-input__icon fy-input__icon--left" [name]="iconLeftName"></fy-icon>
-      } @else if (iconLeft) {
-        <span class="fy-input__icon fy-input__icon--left" [class]="iconLeft"></span>
-      }
-      <input
-        class="fy-input__field"
-        [attr.type]="visibleType"
-        [attr.placeholder]="placeholder || null"
-        [disabled]="disabled"
-        [readOnly]="readonly"
-        [value]="value ?? ''"
-        [attr.aria-invalid]="status === 'error'"
-        [attr.aria-label]="placeholder"
-        (input)="onInputHandler($event)"
-        (change)="onChangeHandler($event)"
-        (focus)="onFocusHandler()"
-        (blur)="onBlurHandler()"
-      />
-      @if (type === 'password' && showPasswordToggle) {
-        <button 
-          type="button" 
-          class="fy-input__toggle" 
-          (click)="togglePassword()"
-          [attr.aria-label]="visibleType === 'password' ? 'Mostrar senha' : 'Ocultar senha'"
-        ></button>
-      }
-      @if (iconRightName) {
-        <fy-icon class="fy-input__icon fy-input__icon--right" [name]="iconRightName"></fy-icon>
-      } @else if (iconRight) {
-        <span class="fy-input__icon fy-input__icon--right" [class]="iconRight"></span>
-      }
-    </div>
+        template: `
+    <div
+      class="fy-input"
+      [class.fy-input--with-left]="iconLeft || iconLeftName"
+      [class.fy-input--with-right]="iconRight || iconRightName"
+      [class.fy-input--sm]="size === 'sm'"
+      [class.fy-input--lg]="size === 'lg'"
+      [class.fy-input--status-success]="status === 'success'"
+      [class.fy-input--status-error]="status === 'error'"
+      [class]="animationClassSuffix"
+    >
+      @if (iconLeftName) {
+        <fy-icon class="fy-input__icon fy-input__icon--left" [name]="iconLeftName"></fy-icon>
+      } @else if (iconLeft) {
+        <span class="fy-input__icon fy-input__icon--left" [class]="iconLeft"></span>
+      }
+      <input
+        class="fy-input__field"
+        [attr.type]="visibleType"
+        [attr.placeholder]="placeholder || null"
+        [disabled]="disabled"
+        [readOnly]="readonly"
+        [value]="value ?? ''"
+        [attr.aria-invalid]="status === 'error'"
+        [attr.aria-label]="placeholder"
+        (input)="onInputHandler($event)"
+        (change)="onChangeHandler($event)"
+        (focus)="onFocusHandler()"
+        (blur)="onBlurHandler()"
+      />
+      @if (type === 'password' && showPasswordToggle) {
+        <button 
+          type="button" 
+          class="fy-input__toggle" 
+          (click)="togglePassword()"
+          [attr.aria-label]="visibleType === 'password' ? 'Mostrar senha' : 'Ocultar senha'"
+        ></button>
+      }
+      @if (iconRightName) {
+        <fy-icon class="fy-input__icon fy-input__icon--right" [name]="iconRightName"></fy-icon>
+      } @else if (iconRight) {
+        <span class="fy-input__icon fy-input__icon--right" [class]="iconRight"></span>
+      }
+    </div>
   `,
-        styles: [`
-    .fy-input {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      width: 100%;
-      max-width: 100%;
-      border: var(--fy-effects-input-borderWidth, 1px) solid var(--fy-effects-input-borderColor, rgba(0,0,0,0.15));
-      background: var(--fy-effects-input-background, #fff);
-      border-radius: var(--fy-effects-input-borderRadius, var(--fy-borderRadius-md));
-      box-shadow: var(--fy-effects-input-shadow, none);
-      transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
-      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
-      min-height: 36px;
-      padding: 0 10px;
-      gap: 6px;
-    }
-
-    .fy-animations-disabled, .fy-animations-disabled * {
-      transition: none !important;
-      animation: none !important;
-    }
-
-    .fy-input--sm { min-height: 30px; border-radius: var(--fy-borderRadius-sm); }
-    .fy-input--lg { min-height: 42px; border-radius: var(--fy-borderRadius-lg); }
-
-    .fy-input--status-success {
-      border-color: var(--fy-colors-success, #22c55e);
-      background: rgba(34, 197, 94, 0.04);
-    }
-
-    .fy-input--status-error {
-      border-color: var(--fy-colors-danger, #ef4444);
-      background: rgba(239, 68, 68, 0.04);
-    }
-
-    .fy-input__field {
-      flex: 1 1 auto;
-      border: 0;
-      outline: 0;
-      background: transparent;
-      font: inherit;
-      color: inherit;
-      min-width: 0;
-      height: 100%;
-    }
-    .fy-input__field::placeholder {
-      color: var(--fy-effects-input-placeholderColor, #6b7280);
-      opacity: .8;
-    }
-
-    .fy-input__icon {
-      width: 16px;
-      height: 16px;
-      opacity: .9;
-      flex: 0 0 auto;
-      color: var(--fy-effects-input-icons-color, currentColor);
-    }
-
-    .fy-input__toggle {
-      width: 20px;
-      height: 20px;
-      border: 0;
-      background: transparent;
-      cursor: pointer;
-      flex: 0 0 auto;
-    }
+        styles: [`
+    .fy-input {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      width: 100%;
+      max-width: 100%;
+      border: var(--fy-effects-input-borderWidth, 1px) solid var(--fy-effects-input-borderColor, rgba(0,0,0,0.15));
+      background: var(--fy-effects-input-background, #fff);
+      border-radius: var(--fy-effects-input-borderRadius, var(--fy-borderRadius-md));
+      box-shadow: var(--fy-effects-input-shadow, none);
+      transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
+      min-height: 36px;
+      padding: 0 10px;
+      gap: 6px;
+    }
+
+    .fy-animations-disabled, .fy-animations-disabled * {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .fy-input--sm { min-height: 30px; border-radius: var(--fy-borderRadius-sm); }
+    .fy-input--lg { min-height: 42px; border-radius: var(--fy-borderRadius-lg); }
+
+    .fy-input--status-success {
+      border-color: var(--fy-colors-success, #22c55e);
+      background: rgba(34, 197, 94, 0.04);
+    }
+
+    .fy-input--status-error {
+      border-color: var(--fy-colors-danger, #ef4444);
+      background: rgba(239, 68, 68, 0.04);
+    }
+
+    .fy-input__field {
+      flex: 1 1 auto;
+      border: 0;
+      outline: 0;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      min-width: 0;
+      height: 100%;
+    }
+    .fy-input__field::placeholder {
+      color: var(--fy-effects-input-placeholderColor, #6b7280);
+      opacity: .8;
+    }
+
+    .fy-input__icon {
+      width: 16px;
+      height: 16px;
+      opacity: .9;
+      flex: 0 0 auto;
+      color: var(--fy-effects-input-icons-color, currentColor);
+    }
+
+    .fy-input__toggle {
+      width: 20px;
+      height: 20px;
+      border: 0;
+      background: transparent;
+      cursor: pointer;
+      flex: 0 0 auto;
+    }
   `],
         encapsulation: ViewEncapsulation.None
     }),