@fylib/adapter-angular 0.2.5 → 0.2.8

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

@@ -1,6 +1,7 @@
 import { EventEmitter } from '@angular/core';
 import { SelectProps } from '@fylib/catalog';
 import { BaseFyComponent, FyComponentBaseInputs } from '../base/base-component';
+import * as i0 from "@angular/core";
 export declare class FySelectComponent extends BaseFyComponent<'fy-select'> implements SelectProps, FyComponentBaseInputs {
     options: {
         label: string;
@@ -49,4 +50,6 @@ export declare class FySelectComponent extends BaseFyComponent<'fy-select'> impl
     selectOption(val: string): void;
     isSelected(val: string): boolean;
     onSearch(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FySelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FySelectComponent, "fy-select", never, { "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "size": { "alias": "size"; "required": false; }; "status": { "alias": "status"; "required": false; }; "iconRightName": { "alias": "iconRightName"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "onChange": { "alias": "onChange"; "required": false; }; "onFocus": { "alias": "onFocus"; "required": false; }; "onBlur": { "alias": "onBlur"; "required": false; }; "activeAnimations": { "alias": "activeAnimations"; "required": false; }; "activeEffects": { "alias": "activeEffects"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; }, { "fyChange": "fyChange"; "fyFocus": "fyFocus"; "fyBlur": "fyBlur"; }, never, never, true, never>;
 }

package/dist/components/select.component.js

@@ -1,19 +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, 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 {
+import * as i0 from "@angular/core";
+export class FySelectComponent extends BaseFyComponent {
     get animationsDisabled() {
         return !this.isAnimationsActive(this.activeAnimations);
     }
@@ -156,115 +148,9 @@ let FySelectComponent = class FySelectComponent extends BaseFyComponent {
         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: `
+}
+FySelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FySelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FySelectComponent, isStandalone: true, selector: "fy-select", inputs: { options: "options", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", size: "size", status: "status", iconRightName: "iconRightName", searchable: "searchable", showCheckbox: "showCheckbox", closeOnSelect: "closeOnSelect", onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur", activeAnimations: "activeAnimations", activeEffects: "activeEffects", customStyles: "customStyles" }, outputs: { fyChange: "fyChange", fyFocus: "fyFocus", fyBlur: "fyBlur" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown": "onKeydown($event)" }, properties: { "class.fy-animations-disabled": "this.animationsDisabled", "style": "this.hostStyles" } }, usesInheritance: true, ngImport: i0, template: `
     <div
       class="fy-select"
       [class.fy-select--open]="open"
@@ -321,75 +207,117 @@ FySelectComponent = __decorate([
         </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;
-    }
+  `, isInline: true, styles: ["\n    .fy-select {\n      position: relative;\n      width: 100%;\n      font: inherit;\n      display: inline-flex;\n      align-items: center;\n      border: var(--fy-effects-select-borderWidth, 1px) solid var(--fy-effects-select-borderColor, rgba(0,0,0,.15));\n      background: var(--fy-effects-select-background, #fff);\n      border-radius: var(--fy-effects-select-borderRadius, var(--fy-borderRadius-md));\n      box-shadow: var(--fy-effects-select-shadow, none);\n      min-height: 36px;\n      padding: 0 10px;\n      gap: 6px;\n      transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;\n    }\n\n    .fy-select__control {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      width: 100%;\n      cursor: pointer;\n    }\n\n    .fy-select__dropdown {\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: calc(100% + 4px);\n      background: var(--fy-effects-select-background, #fff);\n      border: 1px solid var(--fy-effects-select-borderColor, rgba(0,0,0,.1));\n      border-radius: var(--fy-borderRadius-md);\n      box-shadow: var(--fy-effects-select-shadow, none);\n      max-height: 240px;\n      overflow-y: auto;\n      z-index: 1000;\n    }\n\n    .fy-select__option {\n      padding: 6px 10px;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .fy-select__option--selected {\n      background: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.08);\n    }\n\n    .fy-select__search {\n      width: 100%;\n      padding: 6px;\n      border: none;\n      outline: none;\n      border-bottom: 1px solid rgba(0,0,0,.1);\n      background-color: transparent;\n    }\n    .fy-select__icon {\n      transition: transform .2s ease;\n    }\n    .fy-select.fy-select--open .fy-select__icon {\n      transform: rotate(180deg);\n    }\n  "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FyIconComponent, selector: "fy-icon", inputs: ["name", "size", "color", "strokeWidth", "variant", "set"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FySelectComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
 
-    .fy-select__option {
-      padding: 6px 10px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
+        @if (iconRightName) {
+          <fy-icon class="fy-select__icon" [name]="iconRightName"></fy-icon>
+        }
+      </div>
 
-    .fy-select__option--selected {
-      background: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.08);
-    }
+      @if (open) {
+        <div class="fy-select__dropdown" [class]="dropdownAnimClass">
+          @if (searchable) {
+            <input
+              class="fy-select__search"
+              type="text"
+              placeholder="Buscar..."
+              (input)="onSearch($event)"
+            />
+          }
 
-    .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 };
+          @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>
+  `, encapsulation: ViewEncapsulation.None, styles: ["\n    .fy-select {\n      position: relative;\n      width: 100%;\n      font: inherit;\n      display: inline-flex;\n      align-items: center;\n      border: var(--fy-effects-select-borderWidth, 1px) solid var(--fy-effects-select-borderColor, rgba(0,0,0,.15));\n      background: var(--fy-effects-select-background, #fff);\n      border-radius: var(--fy-effects-select-borderRadius, var(--fy-borderRadius-md));\n      box-shadow: var(--fy-effects-select-shadow, none);\n      min-height: 36px;\n      padding: 0 10px;\n      gap: 6px;\n      transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;\n    }\n\n    .fy-select__control {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      width: 100%;\n      cursor: pointer;\n    }\n\n    .fy-select__dropdown {\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: calc(100% + 4px);\n      background: var(--fy-effects-select-background, #fff);\n      border: 1px solid var(--fy-effects-select-borderColor, rgba(0,0,0,.1));\n      border-radius: var(--fy-borderRadius-md);\n      box-shadow: var(--fy-effects-select-shadow, none);\n      max-height: 240px;\n      overflow-y: auto;\n      z-index: 1000;\n    }\n\n    .fy-select__option {\n      padding: 6px 10px;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .fy-select__option--selected {\n      background: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.08);\n    }\n\n    .fy-select__search {\n      width: 100%;\n      padding: 6px;\n      border: none;\n      outline: none;\n      border-bottom: 1px solid rgba(0,0,0,.1);\n      background-color: transparent;\n    }\n    .fy-select__icon {\n      transition: transform .2s ease;\n    }\n    .fy-select.fy-select--open .fy-select__icon {\n      transform: rotate(180deg);\n    }\n  "] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], iconRightName: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], showCheckbox: [{
+                type: Input
+            }], closeOnSelect: [{
+                type: Input
+            }], onChange: [{
+                type: Input
+            }], onFocus: [{
+                type: Input
+            }], onBlur: [{
+                type: Input
+            }], activeAnimations: [{
+                type: Input
+            }], activeEffects: [{
+                type: Input
+            }], customStyles: [{
+                type: Input
+            }], fyChange: [{
+                type: Output
+            }], fyFocus: [{
+                type: Output
+            }], fyBlur: [{
+                type: Output
+            }], animationsDisabled: [{
+                type: HostBinding,
+                args: ['class.fy-animations-disabled']
+            }], hostStyles: [{
+                type: HostBinding,
+                args: ['style']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });

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

@@ -1,6 +1,7 @@
 import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
 import { TableProps, TableColumn, TableAction } from '@fylib/catalog';
 import { BaseFyComponent } from '../base/base-component';
+import * as i0 from "@angular/core";
 export declare class FyTableComponent extends BaseFyComponent<'fy-table'> implements TableProps, OnInit {
     data: any[];
     columns: TableColumn[];
@@ -52,4 +53,6 @@ export declare class FyTableComponent extends BaseFyComponent<'fy-table'> implem
     onPageChange(page: number): void;
     onRowClick(row: any): void;
     onActionClick(event: MouseEvent, action: TableAction, row: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FyTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FyTableComponent, "fy-table", never, { "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "showPagination": { "alias": "showPagination"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "currentPage": { "alias": "currentPage"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "totalItems": { "alias": "totalItems"; "required": false; }; "searchTargets": { "alias": "searchTargets"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "rowClickable": { "alias": "rowClickable"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "activeAnimations": { "alias": "activeAnimations"; "required": false; }; "activeEffects": { "alias": "activeEffects"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; }, { "fySearch": "fySearch"; "fySort": "fySort"; "fyPageChange": "fyPageChange"; "fyRowClick": "fyRowClick"; }, ["cellTemplate"], ["[fy-table-tools]"], true, never>;
 }