@planeasyinc/le-angular 0.0.2 → 0.0.4

package/dist/lib/components/container/container.component.d.ts

@@ -10,7 +10,8 @@ export declare class LeContainerComponent {
     }>;
     constructor();
     onSelectionChange(view: LeNode): void;
-    private setEffects;
+    private listenAuthState;
+    private listenPageInit;
     static ɵfac: i0.ɵɵFactoryDeclaration<LeContainerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<LeContainerComponent, "le-container", never, {}, {}, never, never, true, never>;
 }

package/dist/lib/components/filters/filters.component.d.ts

@@ -0,0 +1,54 @@
+import { ElementRef, OnDestroy, TemplateRef } from '@angular/core';
+import { SelectionModel } from '@angular/cdk/collections';
+import { FormControl, FormGroup } from '@angular/forms';
+import { FilterModel, ColumnFilterModel } from '../../services/le-filters.service';
+import * as i0 from "@angular/core";
+export declare class FiltersComponent implements OnDestroy, OnDestroy {
+    private filtersService;
+    private overlay;
+    private viewContainerRef;
+    private _filteredOptions;
+    private _isDropdownOpened;
+    private overlayRef;
+    private destroy$;
+    readonly isOpened: import("@angular/core").Signal<boolean>;
+    readonly options: import("@angular/core").Signal<ColumnFilterModel[]>;
+    readonly filteredOptions: import("@angular/core").Signal<ColumnFilterModel[]>;
+    readonly isDropdownOpened: import("@angular/core").Signal<boolean>;
+    protected inputEl: import("@angular/core").Signal<ElementRef<HTMLInputElement>>;
+    protected inputContainerEl: import("@angular/core").Signal<ElementRef<HTMLInputElement>>;
+    protected dropdownTpl: import("@angular/core").Signal<TemplateRef<unknown>>;
+    protected contentTpl: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
+    protected search: FormControl<any>;
+    protected selectedFilters: SelectionModel<{
+        key: string;
+        type: string;
+        label: string;
+        options?: string[];
+    }>;
+    protected filtersForm: FormGroup<{}>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onApplyClick(event: Event): void;
+    onResetClick(event: Event): void;
+    onCloseClick(event: Event): void;
+    onInput(event: Event): void;
+    onInputClearClick(event: Event): void;
+    onFocus(event: Event): void;
+    onBlur(event: Event): void;
+    onOptionClick(control: FilterModel['control']): void;
+    onFilterRemoveClick(control: FilterModel['control']): void;
+    private closePanel;
+    private openPanel;
+    private showDropdown;
+    private closeDropdown;
+    private clearSelection;
+    private initFilters;
+    private listenSearchChanges;
+    private listenSelectionChanges;
+    private listenDropdownState;
+    private filter;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FiltersComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FiltersComponent, "le-filters", never, {}, {}, never, ["*"], true, never>;
+}

package/dist/lib/directives/le-drawer.directive.d.ts

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+type leDrawerType = 'side' | 'over';
 export declare class LeDrawerDirective {
     opened: import("@angular/core").InputSignal<boolean>;
     width: import("@angular/core").InputSignal<number>;
     hideOnClose: import("@angular/core").InputSignal<boolean>;
-    _width: import("@angular/core").Signal<number>;
+    type: import("@angular/core").InputSignal<leDrawerType>;
+    protected _width: import("@angular/core").Signal<number>;
+    protected _position: import("@angular/core").Signal<"absolute" | "relative">;
     static ɵfac: i0.ɵɵFactoryDeclaration<LeDrawerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<LeDrawerDirective, "[leDrawer]", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hideOnClose": { "alias": "hideOnClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LeDrawerDirective, "[leDrawer]", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hideOnClose": { "alias": "hideOnClose"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+export {};

package/dist/lib/icons/icons-map.d.ts

@@ -14,4 +14,9 @@ export declare const ICONS_MAP: {
         viewBox: string;
         content: string[];
     };
+    readonly close: {
+        name: string;
+        viewBox: string;
+        content: string[];
+    };
 };

package/dist/lib/icons/le-icon.component.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class LeIconComponent {
-    name: import("@angular/core").InputSignal<"chevron" | "arrow-down" | "sort">;
+    name: import("@angular/core").InputSignal<"chevron" | "arrow-down" | "sort" | "close">;
     size: import("@angular/core").InputSignal<string | number>;
     icon: import("@angular/core").Signal<{
         size: number;
@@ -17,6 +17,11 @@ export declare class LeIconComponent {
         name: string;
         viewBox: string;
         content: string[];
+    } | {
+        size: number;
+        name: string;
+        viewBox: string;
+        content: string[];
     }>;
     static ɵfac: i0.ɵɵFactoryDeclaration<LeIconComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<LeIconComponent, "le-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

package/dist/lib/icons/svg/close.d.ts

@@ -0,0 +1,5 @@
+export declare const close: {
+    name: string;
+    viewBox: string;
+    content: string[];
+};

package/dist/lib/services/le-data.service.d.ts

@@ -6,10 +6,10 @@ export declare class LEDataService {
     private apiService;
     private _config;
     private _view;
-    private _parentMenu;
+    private _parentPath;
     private _customCss;
     readonly view: import("@angular/core").Signal<LeNode>;
-    readonly parentMenu: import("@angular/core").Signal<LeNode>;
+    readonly parentPath: import("@angular/core").Signal<LeNode[]>;
     readonly config: import("@angular/core").Signal<LeNode>;
     readonly customCss: import("@angular/core").Signal<string>;
     setView(node: LeNode): void;

package/dist/lib/services/le-filters.service.d.ts

@@ -0,0 +1,33 @@
+import * as i0 from "@angular/core";
+type filterType = 'EQ' | 'NEQ' | 'GT' | 'GTE' | 'LT' | 'LTE';
+export interface FilterModel {
+    type: filterType;
+    control: {
+        key: string;
+        type: string;
+        label: string;
+        options?: string[];
+    };
+}
+export interface ColumnFilterModel {
+    label: string;
+    name: string;
+    filters: FilterModel[];
+}
+export declare class LEFiltersService {
+    private _shown;
+    private _options;
+    private _selection;
+    readonly shown: import("@angular/core").Signal<boolean>;
+    readonly options: import("@angular/core").Signal<ColumnFilterModel[]>;
+    readonly selection: import("@angular/core").Signal<Record<string, string>>;
+    open(): void;
+    close(): void;
+    updateSelection(value: Record<string, string>): void;
+    setOptions(options: ColumnFilterModel[]): void;
+    private filterValues;
+    private isEqual;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LEFiltersService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LEFiltersService>;
+}
+export {};

package/dist/lib/views/table-view/table-view.component.d.ts

@@ -1,6 +1,7 @@
 import { LeTableAction, LeTableNode } from '@planeasyinc/le-core';
 import { TableDataSource } from './table-data-sourse';
 import { PageChange } from './table-view.types';
+import { ColumnFilterModel } from '../../services/le-filters.service';
 import * as i0 from "@angular/core";
 interface ColumnModel {
     type: string;
@@ -14,6 +15,7 @@ interface CellModel {
 export declare class TableViewComponent {
     private apiService;
     private dataService;
+    private filtersService;
     node: import("@angular/core").InputSignal<LeTableNode>;
     private _columns;
     private _data;
@@ -39,9 +41,11 @@ export declare class TableViewComponent {
     readonly isSortingEnabled: import("@angular/core").Signal<boolean>;
     readonly sortColumnKeys: import("@angular/core").Signal<Set<string>>;
     readonly hasRowClickAction: import("@angular/core").Signal<boolean>;
+    readonly filters: import("@angular/core").Signal<ColumnFilterModel[]>;
     constructor();
     onPageChange(pageChange: PageChange): void;
     onSortClick(event: Event, column: ColumnModel): void;
+    onFiltersClick(event: Event): void;
     onToolbarActionClick({ actions }: LeTableAction): void;
     onRowClick(row: CellModel): void;
     private processTableAction;
@@ -50,6 +54,7 @@ export declare class TableViewComponent {
     private buildRequest;
     private handleTableDataSuccessResponse;
     private handleTableDataErrorResponse;
+    private getFilters;
     private interpolateRowValues;
     private setEffects;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableViewComponent, never>;

package/dist/styles/styles.scss

@@ -153,6 +153,20 @@ ul {
   flex: 1 1 auto;
 }
 
+.le-divider {
+  background-color: var(--le-color-divider);
+
+  &-horizontal {
+    height: 1px;
+    width: 100%;
+  }
+
+  &-vertical {
+    width: 1px;
+    height: 100%;
+  }
+}
+
 @mixin flex-row {
   display: flex;
   flex-direction: row;
@@ -440,6 +454,10 @@ ul {
     padding-left: 32px;
   }
 
+  .le-menu-group .le-menu-item {
+    padding-left: 48px;
+  }
+
   &.le-menu-group--expanded {
     opacity: 1;
     max-height: 5000px;
@@ -451,11 +469,12 @@ ul {
   ========================== */
 
 .le-toolbar {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+  @include flex-row;
+  @include align-center;
+  @include justify-between;
+
   height: 60px;
+  gap: 16px;
 }
 
 .le-table-container {
@@ -510,6 +529,7 @@ ul {
   @include flex-row;
   @include align-center;
   @include justify-between;
+  gap: 1rex;
 }
 
 .le-table-header-cell {
@@ -621,7 +641,7 @@ $sort-icon-size: 6px;
   @include align-center;
   @include justify-center;
   margin: 0 2px;
-  width: calc($sort-icon-size * 3);
+  width: calc($sort-icon-size * 7);
   height: calc($sort-icon-size * 3);
 }
 
@@ -758,3 +778,113 @@ $sort-icon-size: 6px;
   background-color: var(--le-color-background);
   margin-bottom: 16px;
 }
+
+/* =========================
+     FILTERS
+  ========================== */
+.le-filters-container {
+  @include flex-column;
+  gap: 16px;
+  padding: 16px 8px;
+  width: 320px;
+  overflow-x: hidden;
+}
+
+.le-filters-title {
+  font-size: var(--le-font-size-lg);
+  font-weight: var(--le-font-weight-semibold);
+}
+
+.le-filters-actions {
+  @include flex-row;
+  @include justify-between;
+}
+
+.le-autocomplete-container {
+  @include flex-row;
+  @include align-center;
+
+  border: 1px solid var(--le-color-border);
+  padding: 2px 4px;
+}
+
+.le-button-icon {
+  @include flex-column;
+  @include align-center;
+  @include justify-center;
+
+  flex-shrink: 0;
+  border-radius: 50%;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.le-autocomplete-input {
+  border: 0;
+  width: 100%;
+  padding: 4px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.le-autocomplete-panel {
+  height: 200px;
+  overflow: auto;
+  box-shadow: var(--le-dropdown-shadow);
+  background-color: var(--le-color-background);
+}
+
+.le-autocomplete-label, .le-autocomplete-option {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.le-autocomplete-label {
+  color: var(--le-color-gray-500);
+  padding-left: 8px;
+}
+
+.le-autocomplete-option {
+  padding-left: 16px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--le-color-gray-200);
+  }
+
+  &--selected {
+    background-color: var(--le-color-gray-100);
+  }
+}
+
+.le-filters-list {
+  @include flex-column;
+  gap: 8px;
+}
+
+.le-filters-list-item {
+  @include flex-column;
+  gap: 4px;
+
+  div {
+    @include flex-row;
+    @include align-center;
+    gap: 4px;
+  }
+
+  select,
+  input {
+    &:focus {
+      outline: none;
+    }
+    border-color: var(--le-color-border);
+    border-style: solid;
+    border-width: 1px;
+    flex-grow: 1;
+    padding: 4px 8px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planeasyinc/le-angular",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "private": false,
   "exports": {
     ".": {
@@ -21,6 +21,7 @@
     "@angular/common": ">=17.0.0 <20.0.0",
     "@angular/cdk": ">=17.0.0 <20.0.0",
     "@angular/animations": ">=17.0.0 <20.0.0",
+    "@angular/forms": ">=17.0.0 <20.0.0",
     "rxjs": ">=7.0.0",
     "@planeasyinc/le-core": "^0.0.1",
     "@planeasyinc/fe-adapters-old": "^0.1",