@fylib/adapter-angular 0.1.0

package/dist/components/input.component.js

@@ -0,0 +1,383 @@
+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 { InputDefinition } from '@fylib/catalog';
+import { FyIconComponent } from './icon.component';
+import { resolveAnimationsActive } from '../base/interaction.utils';
+import { BaseFyComponent } from '../base/base-component';
+import { logger } from '@fylib/logger';
+let FyInputComponent = class FyInputComponent extends BaseFyComponent {
+    get animationsDisabled() {
+        return !this.isAnimationsActive(this.activeAnimations);
+    }
+    get hostStyles() {
+        return this.getHostStyles(this.customStyles);
+    }
+    get visibleType() {
+        return this._passwordVisible && this.type === 'password' ? 'text' : (this.type || 'text');
+    }
+    get animationClassSuffix() {
+        const focus = this.resolveAnim('focus', this.focusAnimation, InputDefinition.features?.animations?.focus);
+        const key = this.status === 'success' ? 'success' : (this.status === 'error' ? 'error' : undefined);
+        const state = key
+            ? this.resolveAnim(key, key === 'success' ? this.successAnimation : this.errorAnimation, InputDefinition.features?.animations?.[key])
+            : undefined;
+        return this.composeAnimClasses(focus, state);
+    }
+    constructor() {
+        super(inject(require('../services/fylib.service').FyLibService), 'fy-input');
+        this.type = InputDefinition.defaultProps.type;
+        this.disabled = InputDefinition.defaultProps.disabled;
+        this.readonly = InputDefinition.defaultProps.readonly;
+        this.showPasswordToggle = InputDefinition.defaultProps.showPasswordToggle;
+        this.size = InputDefinition.defaultProps.size;
+        this.status = InputDefinition.defaultProps.status;
+        this.activeAnimations = null;
+        this.activeEffects = null;
+        this.customStyles = null;
+        // Eventos Angular (não conflitam com o contrato do catálogo)
+        this.fyInput = new EventEmitter();
+        this.fyChange = new EventEmitter();
+        this.fyFocus = new EventEmitter();
+        this.fyBlur = new EventEmitter();
+        this._passwordVisible = false;
+        const t = this.fylib.tokens();
+        const iconsCfg = (t.effects || {}).input?.icons || {};
+        const name = iconsCfg.name;
+        const position = iconsCfg.position;
+        if (name) {
+            if (!this.iconLeftName && !this.iconRightName) {
+                if (position === 'right') {
+                    this.iconRightName = name;
+                }
+                else {
+                    this.iconLeftName = name;
+                }
+            }
+        }
+    }
+    togglePassword() {
+        this._passwordVisible = !this._passwordVisible;
+    }
+    onInputHandler(event) {
+        const target = event.target;
+        let v = target.value || '';
+        if (this.mask) {
+            v = this.applyMask(v, this.mask);
+            target.value = v;
+        }
+        this.value = v;
+        if (this.onInput)
+            this.onInput(v);
+        this.fyInput.emit(v);
+    }
+    onChangeHandler(event) {
+        const target = event.target;
+        const v = target.value || '';
+        if (this.onChange)
+            this.onChange(v);
+        this.fyChange.emit(v);
+    }
+    onFocusHandler() {
+        logger.debug('Component', 'Input focused', { placeholder: this.placeholder });
+        if (this.isAnimationsActive(this.activeAnimations)) {
+            const name = this.resolveAnim('focus', this.focusAnimation, InputDefinition.features?.animations?.focus);
+            if (name)
+                this.fylib.playAnimation(name);
+            if (this.focusEffect)
+                this.triggerDirect(this.focusEffect, this.activeEffects);
+            else
+                this.triggerByEvent('fy-input.focus', undefined, this.activeEffects);
+        }
+        if (this.onFocus)
+            this.onFocus();
+        this.fyFocus.emit();
+    }
+    onBlurHandler() {
+        logger.debug('Component', 'Input blurred', { value: this.value });
+        if (this.onBlur)
+            this.onBlur();
+        this.fyBlur.emit();
+    }
+    resolveAnimationsActive() {
+        return resolveAnimationsActive(this.fylib, 'fy-input', this.activeAnimations);
+    }
+    applyMask(value, mask) {
+        const digits = value.replace(/\D+/g, '');
+        let i = 0;
+        let out = '';
+        for (const ch of mask) {
+            if (ch === '9') {
+                if (i < digits.length)
+                    out += digits[i++];
+                else
+                    break;
+            }
+            else {
+                out += ch;
+            }
+        }
+        return out;
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "value", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "placeholder", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyInputComponent.prototype, "type", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyInputComponent.prototype, "disabled", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyInputComponent.prototype, "readonly", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "mask", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FyInputComponent.prototype, "showPasswordToggle", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "iconLeft", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "iconRight", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "iconLeftName", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "iconRightName", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyInputComponent.prototype, "size", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyInputComponent.prototype, "status", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyInputComponent.prototype, "activeAnimations", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyInputComponent.prototype, "activeEffects", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FyInputComponent.prototype, "customStyles", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "focusAnimation", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "successAnimation", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "errorAnimation", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "focusEffect", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "successEffect", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FyInputComponent.prototype, "errorEffect", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FyInputComponent.prototype, "onInput", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FyInputComponent.prototype, "onChange", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FyInputComponent.prototype, "onFocus", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FyInputComponent.prototype, "onBlur", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyInputComponent.prototype, "fyInput", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyInputComponent.prototype, "fyChange", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyInputComponent.prototype, "fyFocus", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FyInputComponent.prototype, "fyBlur", void 0);
+__decorate([
+    HostBinding('class.fy-animations-disabled'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], FyInputComponent.prototype, "animationsDisabled", null);
+__decorate([
+    HostBinding('style'),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], FyInputComponent.prototype, "hostStyles", null);
+FyInputComponent = __decorate([
+    Component({
+        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>
+  `,
+        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
+    }),
+    __metadata("design:paramtypes", [])
+], FyInputComponent);
+export { FyInputComponent };

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

@@ -0,0 +1,46 @@
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { ModalProps } from '@fylib/catalog';
+import { BaseFyComponent, FyComponentBaseInputs } from '../base/base-component';
+export declare class FyModalComponent extends BaseFyComponent<'fy-modal'> implements ModalProps, FyComponentBaseInputs, OnChanges {
+    visible: boolean;
+    title?: string;
+    subtitle?: string;
+    content?: string;
+    size: NonNullable<ModalProps['size']>;
+    position: NonNullable<ModalProps['position']>;
+    status: NonNullable<ModalProps['status']>;
+    closable: boolean;
+    closeOnEscape: boolean;
+    closeOnBackdrop: boolean;
+    showHeader: boolean;
+    showFooter: boolean;
+    showConfirmButton: boolean;
+    showCancelButton: boolean;
+    confirmText?: string;
+    cancelText?: string;
+    loading: boolean;
+    centered: boolean;
+    blockScroll: boolean;
+    draggable: boolean;
+    resizable: boolean;
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    fyOpen: EventEmitter<void>;
+    fyClose: EventEmitter<void>;
+    fyConfirm: EventEmitter<void>;
+    fyCancel: EventEmitter<void>;
+    get animationsDisabled(): boolean;
+    get hostStyles(): string;
+    constructor();
+    modalAnimClass: string;
+    ngOnChanges(changes: SimpleChanges): void;
+    handleConfirm(): void;
+    handleCancel(): void;
+    onBackdropClick(): void;
+    onKeydown(event: KeyboardEvent): void;
+}