@fylib/adapter-angular 0.1.0

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

@@ -0,0 +1,52 @@
+import { EventEmitter } from '@angular/core';
+import { SelectProps } from '@fylib/catalog';
+import { BaseFyComponent, FyComponentBaseInputs } from '../base/base-component';
+export declare class FySelectComponent extends BaseFyComponent<'fy-select'> implements SelectProps, FyComponentBaseInputs {
+    options: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+    value?: string | string[];
+    placeholder?: string;
+    disabled: boolean;
+    readonly: boolean;
+    size: 'sm' | 'md' | 'lg';
+    status: 'default' | 'success' | 'error';
+    iconRightName?: string;
+    searchable?: boolean;
+    showCheckbox?: boolean;
+    closeOnSelect?: boolean;
+    onChange?: (value: string | string[]) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    fyChange: EventEmitter<string | string[]>;
+    fyFocus: EventEmitter<void>;
+    fyBlur: EventEmitter<void>;
+    get animationsDisabled(): boolean;
+    get hostStyles(): string;
+    open: boolean;
+    searchTerm: string;
+    dropdownAnimClass: string;
+    constructor();
+    private hostEl;
+    get filteredOptions(): {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+    get displayValue(): string;
+    get animationClassSuffix(): string;
+    toggleOpen(): void;
+    onFocusHandler(): void;
+    onBlurHandler(): void;
+    onCheckboxChange(event: Event, val: string): void;
+    onDocumentClick(event: MouseEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    selectOption(val: string): void;
+    isSelected(val: string): boolean;
+    onSearch(event: Event): void;
+}

package/dist/components/select.component.js

@@ -0,0 +1,395 @@
+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, HostListener, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SelectDefinition } from '@fylib/catalog';
+import { FyIconComponent } from './icon.component';
+import { BaseFyComponent } from '../base/base-component';
+import { ElementRef } from '@angular/core';
+let FySelectComponent = class FySelectComponent extends BaseFyComponent {
+    get animationsDisabled() {
+        return !this.isAnimationsActive(this.activeAnimations);
+    }
+    get hostStyles() {
+        return this.getHostStyles(this.customStyles);
+    }
+    constructor() {
+        super(inject(require('../services/fylib.service').FyLibService), 'fy-select');
+        this.options = [];
+        this.disabled = SelectDefinition.defaultProps.disabled;
+        this.readonly = SelectDefinition.defaultProps.readonly;
+        this.size = SelectDefinition.defaultProps.size;
+        this.status = SelectDefinition.defaultProps.status;
+        this.activeAnimations = null;
+        this.activeEffects = null;
+        this.customStyles = null;
+        this.fyChange = new EventEmitter();
+        this.fyFocus = new EventEmitter();
+        this.fyBlur = new EventEmitter();
+        this.open = false;
+        this.searchTerm = '';
+        this.dropdownAnimClass = '';
+        this.hostEl = inject(ElementRef);
+    }
+    get filteredOptions() {
+        if (!this.searchTerm)
+            return this.options;
+        return this.options.filter(o => o.label.toLowerCase().includes(this.searchTerm.toLowerCase()));
+    }
+    get displayValue() {
+        if (!this.value)
+            return '';
+        if (Array.isArray(this.value)) {
+            return this.options
+                .filter(o => this.value?.includes(o.value))
+                .map(o => o.label)
+                .join(', ');
+        }
+        return this.options.find(o => o.value === this.value)?.label || '';
+    }
+    get animationClassSuffix() {
+        const focus = this.resolveAnim('focus', undefined, SelectDefinition.features?.animations?.focus);
+        const key = this.status === 'success' ? 'success' : (this.status === 'error' ? 'error' : undefined);
+        const state = key
+            ? this.resolveAnim(key, undefined, SelectDefinition.features?.animations?.[key])
+            : undefined;
+        return this.composeAnimClasses(focus, state);
+    }
+    toggleOpen() {
+        if (this.disabled || this.readonly)
+            return;
+        this.open = !this.open;
+        if (this.isAnimationsActive(this.activeAnimations)) {
+            const anim = this.open ? 'header-menu-dropdown-in' : 'header-menu-dropdown-out';
+            this.fylib.playAnimation(anim);
+            this.dropdownAnimClass = `fy-anim-${anim}`;
+            const timeout = this.open ? 250 : 250;
+            setTimeout(() => { this.dropdownAnimClass = ''; }, timeout);
+        }
+        if (this.open) {
+            this.onFocusHandler();
+        }
+        else {
+            this.onBlurHandler();
+        }
+    }
+    onFocusHandler() {
+        if (this.isAnimationsActive(this.activeAnimations)) {
+            const name = this.resolveAnim('focus', undefined, SelectDefinition.features?.animations?.focus);
+            if (name)
+                this.fylib.playAnimation(name);
+            this.triggerByEvent('fy-select.focus', undefined, this.activeEffects);
+        }
+        if (this.onFocus)
+            this.onFocus();
+        this.fyFocus.emit();
+    }
+    onBlurHandler() {
+        if (this.onBlur)
+            this.onBlur();
+        this.fyBlur.emit();
+    }
+    onCheckboxChange(event, val) {
+        event.stopPropagation();
+        this.selectOption(val);
+    }
+    onDocumentClick(event) {
+        if (!this.open)
+            return;
+        const target = event.target;
+        if (!this.hostEl.nativeElement.contains(target)) {
+            this.open = false;
+            if (this.isAnimationsActive(this.activeAnimations)) {
+                this.fylib.playAnimation('header-menu-dropdown-out');
+                this.dropdownAnimClass = 'fy-anim-header-menu-dropdown-out';
+                setTimeout(() => { this.dropdownAnimClass = ''; }, 250);
+            }
+            this.onBlurHandler();
+        }
+    }
+    onKeydown(event) {
+        if (!this.open)
+            return;
+        if (event.key === 'Escape') {
+            this.open = false;
+            if (this.isAnimationsActive(this.activeAnimations)) {
+                this.fylib.playAnimation('header-menu-dropdown-out');
+                this.dropdownAnimClass = 'fy-anim-header-menu-dropdown-out';
+                setTimeout(() => { this.dropdownAnimClass = ''; }, 250);
+            }
+            this.onBlurHandler();
+        }
+    }
+    selectOption(val) {
+        if (this.showCheckbox) {
+            const arr = Array.isArray(this.value) ? [...this.value] : [];
+            const index = arr.indexOf(val);
+            if (index >= 0)
+                arr.splice(index, 1);
+            else
+                arr.push(val);
+            this.value = arr;
+        }
+        else {
+            this.value = val;
+            if (this.closeOnSelect !== false) {
+                this.open = false;
+            }
+        }
+        if (this.onChange)
+            this.onChange(this.value);
+        this.fyChange.emit(this.value);
+    }
+    isSelected(val) {
+        if (Array.isArray(this.value))
+            return this.value.includes(val);
+        return this.value === val;
+    }
+    onSearch(event) {
+        const input = event.target;
+        this.searchTerm = input.value;
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FySelectComponent.prototype, "options", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySelectComponent.prototype, "value", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FySelectComponent.prototype, "placeholder", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FySelectComponent.prototype, "disabled", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FySelectComponent.prototype, "readonly", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FySelectComponent.prototype, "size", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FySelectComponent.prototype, "status", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FySelectComponent.prototype, "iconRightName", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FySelectComponent.prototype, "searchable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FySelectComponent.prototype, "showCheckbox", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FySelectComponent.prototype, "closeOnSelect", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FySelectComponent.prototype, "onChange", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FySelectComponent.prototype, "onFocus", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FySelectComponent.prototype, "onBlur", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySelectComponent.prototype, "activeAnimations", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySelectComponent.prototype, "activeEffects", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FySelectComponent.prototype, "customStyles", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FySelectComponent.prototype, "fyChange", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FySelectComponent.prototype, "fyFocus", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FySelectComponent.prototype, "fyBlur", void 0);
+__decorate([
+    HostBinding('class.fy-animations-disabled'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], FySelectComponent.prototype, "animationsDisabled", null);
+__decorate([
+    HostBinding('style'),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], FySelectComponent.prototype, "hostStyles", null);
+__decorate([
+    HostListener('document:click', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", void 0)
+], FySelectComponent.prototype, "onDocumentClick", null);
+__decorate([
+    HostListener('keydown', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], FySelectComponent.prototype, "onKeydown", null);
+FySelectComponent = __decorate([
+    Component({
+        selector: 'fy-select',
+        standalone: true,
+        imports: [CommonModule, FyIconComponent],
+        template: `
+    <div
+      class="fy-select"
+      [class.fy-select--open]="open"
+      [class.fy-select--sm]="size === 'sm'"
+      [class.fy-select--lg]="size === 'lg'"
+      [class.fy-select--status-success]="status === 'success'"
+      [class.fy-select--status-error]="status === 'error'"
+      [class]="animationClassSuffix"
+    >
+      <div
+        class="fy-select__control"
+        tabindex="0"
+        (click)="toggleOpen()"
+        (focus)="onFocusHandler()"
+        (blur)="onBlurHandler()"
+      >
+        <span class="fy-select__value">
+          {{ displayValue || placeholder }}
+        </span>
+
+        @if (iconRightName) {
+          <fy-icon class="fy-select__icon" [name]="iconRightName"></fy-icon>
+        }
+      </div>
+
+      @if (open) {
+        <div class="fy-select__dropdown" [class]="dropdownAnimClass">
+          @if (searchable) {
+            <input
+              class="fy-select__search"
+              type="text"
+              placeholder="Buscar..."
+              (input)="onSearch($event)"
+            />
+          }
+
+          @for (opt of filteredOptions; track opt.value) {
+            <div
+              class="fy-select__option"
+              [class.fy-select__option--selected]="isSelected(opt.value)"
+              (click)="selectOption(opt.value)"
+            >
+              @if (showCheckbox) {
+                <input
+                  type="checkbox"
+                  [checked]="isSelected(opt.value)"
+                  (click)="$event.stopPropagation()"
+                  (change)="onCheckboxChange($event, opt.value)"
+                />
+              }
+              {{ opt.label }}
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+        styles: [`
+    .fy-select {
+      position: relative;
+      width: 100%;
+      font: inherit;
+      display: inline-flex;
+      align-items: center;
+      border: var(--fy-effects-select-borderWidth, 1px) solid var(--fy-effects-select-borderColor, rgba(0,0,0,.15));
+      background: var(--fy-effects-select-background, #fff);
+      border-radius: var(--fy-effects-select-borderRadius, var(--fy-borderRadius-md));
+      box-shadow: var(--fy-effects-select-shadow, none);
+      min-height: 36px;
+      padding: 0 10px;
+      gap: 6px;
+      transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
+    }
+
+    .fy-select__control {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      cursor: pointer;
+    }
+
+    .fy-select__dropdown {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: calc(100% + 4px);
+      background: var(--fy-effects-select-background, #fff);
+      border: 1px solid var(--fy-effects-select-borderColor, rgba(0,0,0,.1));
+      border-radius: var(--fy-borderRadius-md);
+      box-shadow: var(--fy-effects-select-shadow, none);
+      max-height: 240px;
+      overflow-y: auto;
+      z-index: 1000;
+    }
+
+    .fy-select__option {
+      padding: 6px 10px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .fy-select__option--selected {
+      background: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.08);
+    }
+
+    .fy-select__search {
+      width: 100%;
+      padding: 6px;
+      border: none;
+      outline: none;
+      border-bottom: 1px solid rgba(0,0,0,.1);
+      background-color: transparent;
+    }
+    .fy-select__icon {
+      transition: transform .2s ease;
+    }
+    .fy-select.fy-select--open .fy-select__icon {
+      transform: rotate(180deg);
+    }
+  `],
+        encapsulation: ViewEncapsulation.None
+    }),
+    __metadata("design:paramtypes", [])
+], FySelectComponent);
+export { FySelectComponent };

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

@@ -0,0 +1,55 @@
+import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
+import { TableProps, TableColumn, TableAction } from '@fylib/catalog';
+import { BaseFyComponent } from '../base/base-component';
+export declare class FyTableComponent extends BaseFyComponent<'fy-table'> implements TableProps, OnInit {
+    data: any[];
+    columns: TableColumn[];
+    title?: string;
+    subtitle?: string;
+    footer?: string;
+    loading: boolean;
+    showHeader: boolean;
+    showFooter: boolean;
+    showPagination: boolean;
+    showSearch: boolean;
+    currentPage: number;
+    pageSize: number;
+    totalItems: number;
+    searchTargets: string[];
+    actions?: TableAction[];
+    rowClickable: boolean;
+    variant: TableProps['variant'];
+    stickyHeader: boolean;
+    scrollable: boolean;
+    maxHeight?: string;
+    activeAnimations: boolean | null;
+    activeEffects: boolean | null;
+    customStyles: Record<string, string> | null;
+    fySearch: EventEmitter<string>;
+    fySort: EventEmitter<TableColumn & {
+        direction: "asc" | "desc" | null;
+    }>;
+    fyPageChange: EventEmitter<number>;
+    fyRowClick: EventEmitter<any>;
+    cellTemplate?: TemplateRef<any>;
+    private sortKey;
+    private sortDirection;
+    private searchTerm;
+    constructor();
+    get paginatedData(): any[];
+    get filteredTotal(): number;
+    ngOnInit(): void;
+    get visibleColumns(): TableColumn[];
+    get totalColumns(): number;
+    get totalPages(): number;
+    get startItem(): number;
+    get endItem(): number;
+    get displayTotal(): number;
+    get animationClassSuffix(): string;
+    onSearch(value: string): void;
+    onSort(col: TableColumn): void;
+    getSortIcon(col: TableColumn): string;
+    onPageChange(page: number): void;
+    onRowClick(row: any): void;
+    onActionClick(event: MouseEvent, action: TableAction, row: any): void;
+}