ng-fusion-ui
Version:
New Angular component library!
2,212 lines • 233 kB
JavaScript
import * as i0 from '@angular/core';
import { signal, computed, effect, Injectable, input, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, model, Directive, Input, booleanAttribute, EventEmitter, Output, HostListener, Pipe, TemplateRef, ContentChild, NgModule, inject, ElementRef, Renderer2, contentChild, DestroyRef, output, untracked } from '@angular/core';
import { BehaviorSubject, filter, take, Subject } from 'rxjs';
import * as i4 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i1 from '@angular/platform-browser';
import * as i3 from '@angular/common';
import { CommonModule, NgTemplateOutlet } from '@angular/common';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
class DataSortingService {
constructor() {
this.sortKeyValue = signal('');
this.sortDirectionValue = signal('asc');
this.cellDefs = [];
this.localStorageKey = signal('');
this.cellKeys = signal([]);
this.sortKey = computed(() => this.sortKeyValue());
this.sortDirection = computed(() => this.sortDirectionValue());
this.storedValues = signal({
sortKey: '',
sortDirection: 'asc',
});
effect(() => {
const storedData = window.localStorage.getItem(this.localStorageKey());
if (storedData) {
const parsedData = JSON.parse(storedData);
this.storedValues.set(parsedData);
this.sortKeyValue.set(parsedData.sortKey);
this.sortDirectionValue.set(parsedData.sortDirection);
}
});
}
getLocalStorageKey(key) {
this.localStorageKey.set(`fu-${key}-sort`);
}
setSortKey(key) {
if (this.sortKey() !== key) {
this.sortDirectionValue.set('asc');
}
else {
this.sortDirectionValue.update(val => (val === 'asc' ? 'desc' : 'asc'));
}
this.sortKeyValue.set(key);
window.localStorage.setItem(this.localStorageKey(), JSON.stringify({ sortKey: key, sortDirection: this.sortDirectionValue() }));
}
setCellDef(index, cellDef) {
this.cellDefs[index] = cellDef;
}
getCellDef(index) {
return this.cellDefs[index];
}
clear() {
this.cellDefs = [];
}
getCellKeys(data) {
this.cellKeys.set(Object.keys(data));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataSortingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataSortingService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataSortingService, decorators: [{
type: Injectable
}], ctorParameters: () => [] });
class EditRowService {
constructor() {
this.editIndexSubject = new BehaviorSubject(null);
this.editIndex$ = this.editIndexSubject.asObservable();
this.editValuesSubject = new BehaviorSubject({});
this.editValues$ = this.editValuesSubject.asObservable();
}
startEditing(rowIndex) {
this.editIndexSubject.next(rowIndex);
}
stopEditing() {
this.editIndexSubject.next(null);
}
updateEditValues(key, value) {
const currentValues = this.editValuesSubject.value;
this.editValuesSubject.next({ ...currentValues, [key]: value });
}
resetEditValues() {
this.editValuesSubject.next({});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: EditRowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: EditRowService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: EditRowService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const edit = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M4 20h4L18.5 9.5a2.828 2.828 0 1 0-4-4L4 16zm9.5-13.5l4 4"/></svg>`;
const editOff = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m10 10l-6 6v4h4l6-6m1.99-1.99l2.504-2.504a2.828 2.828 0 1 0-4-4l-2.5 2.5M13.5 6.5l4 4M3 3l18 18"/></svg>`;
const editSave = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M4 20h4L18.5 9.5a2.828 2.828 0 1 0-4-4L4 16zm9.5-13.5l4 4M15 19l2 2l4-4"/></svg>`;
const trash = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></svg>`;
const doubleArrowRight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m7 7l5 5l-5 5m6-10l5 5l-5 5"/></svg>`;
const doubleArrowLeft = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m11 7l-5 5l5 5m6-10l-5 5l5 5"/></svg>`;
const arrowLeft = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m15 6l-6 6l6 6"/></svg>`;
const arrowRight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m9 6l6 6l-6 6"/></svg>`;
const sort = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5"/></svg>`;
const sortAsc = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M4 6h7m-7 6h7m-7 6h9m2-9l3-3l3 3m-3-3v12"/></svg>`;
const sortDesc = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M4 6h9m-9 6h7m-7 6h7m4-3l3 3l3-3m-3-9v12"/></svg>`;
const filterRemove = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M13.758 19.414L9 21v-8.5L4.52 7.572A2 2 0 0 1 4 6.227V4h16v2.172a2 2 0 0 1-.586 1.414L15 12v1.5m7 8.5l-5-5m0 5l5-5"/></svg>`;
const filterPlus = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m12 20l-3 1v-8.5L4.52 7.572A2 2 0 0 1 4 6.227V4h16v2.172a2 2 0 0 1-.586 1.414L15 12v3m1 4h6m-3-3v6"/></svg>`;
const filterEdit = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M10.97 20.344L9 21v-8.5L4.52 7.572A2 2 0 0 1 4 6.227V4h16v2.172a2 2 0 0 1-.586 1.414L15 12v1.5m3.42 2.11a2.1 2.1 0 0 1 2.97 2.97L18 22h-3v-3z"/></svg>`;
const check = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m5 12l5 5L20 7"/></svg>`;
const save = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M21 7v12q0 .825-.587 1.413T19 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h12zm-2 .85L16.15 5H5v14h14zM12 18q1.25 0 2.125-.875T15 15t-.875-2.125T12 12t-2.125.875T9 15t.875 2.125T12 18m-6-8h9V6H6zM5 7.85V19V5z"/></svg>`;
const search = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14" /></svg>`;
const building = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"/><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3z"/></g></svg>`;
const buildingHand = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="m2 1c0-0.55228 0.44772-1 1-1h10c0.55228 0 1 0.44772 1 1v6.5c0 0.66667-1 0.66667-1 0v-6.5h-10v14h3s2.2783-0.07879 2 1h-5c-0.55228 0-1-0.44772-1-1z"/><path d="M4.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm-6 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm-6 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"/><path d="m4.0496 13.493v0.43773l4.5597 1.0943 3.9897-0.83169v0.61283h3.4198v-4.8151h-4.5597l-3.5338 1.0068c-0.56996 0.17509-1.0259 0.6566-1.0259 1.1819h-1.1399c-0.96894 0-1.7099 0.56905-1.7099 1.3132m9.6894 0.43773v-3.0641h1.1399v3.0641zm-8.4925-0.61282q0.17099-0.26264 0.51297-0.26264h3.0778c0.28498 0 0.62696-0.04377 0.91194-0.08756l1.3109-0.35018-0.34198-0.83169-1.3679 0.35018c-0.17099 0-1.3109 0.04377-1.3109 0.04377 0-0.17509 0.11399-0.30641 0.34198-0.35018l3.3058-0.963h0.91194v2.4075l-3.9897 0.83169z" fill="currentColor" stroke-width=".49949"/></g></svg>`;
const buildingUser = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><path d="m-12.888 20.361a4.25 4.25 0 0 0-2.1938 0.56919 4.25 4.25 0 0 0-2.1226 3.5432l-0.0024 0.13755 0.0024 0.13755a4.25 4.25 0 1 0 4.3164-4.3875zm0.60951 2.7036h0.62611v2.6657l-2.3076 0.5929-2.6396-0.88936c0-0.1482 0.06709-0.29647 0.16601-0.41503 0.13191-0.11856 0.29543-0.17787 0.4933-0.17787h2.31l0.69252-0.23716-0.09961-0.26562-0.59291 0.20633h-0.92493c-0.09894 0-0.23051-0.05931-0.29646-0.11859-0.06595-0.05928-0.09724-0.14824-0.09724-0.23716 0-0.1482 0.09835-0.26563 0.26325-0.32491zm1.2854 0h1.3186v3.2586h-1.3186z" stroke-width=".425"/><g fill="currentColor"></g><path d="m2.0619 18.318a4.9999 4.9999 0 0 0-2.5808 0.66962 4.9999 4.9999 0 0 0-2.4971 4.1684l-0.0028 0.16182 0.0028 0.16183a4.9999 4.9999 0 1 0 5.078-5.1617zm0.71705 3.1807h0.73658v3.1361l-2.7148 0.69752-3.1054-1.0463c0-0.17435 0.07893-0.34878 0.19531-0.48826 0.15518-0.13948 0.34756-0.20926 0.58034-0.20926h2.7175l0.81471-0.27901-0.11719-0.31249-0.69753 0.24274h-1.0881c-0.1164 0-0.27118-0.06977-0.34876-0.13951-0.07759-0.06974-0.1144-0.1744-0.1144-0.27901 0-0.17435 0.1157-0.3125 0.3097-0.38224zm1.5122 0h1.5513v3.8336h-1.5513z" stroke-width=".49999"/><g transform="matrix(.86364 0 0 .86364 26.355 .79387)"><path d="m16 10.5c0-3.025-2.475-5.5-5.5-5.5-3.025 0-5.5 2.475-5.5 5.5 0 3.025 2.475 5.5 5.5 5.5 3.025 0 5.5-2.475 5.5-5.5m-3.85-3.025 1.925 1.925-1.925 1.925v-1.375h-2.2v-1.1h2.2zm-3.3 6.05-1.925-1.925 1.925-1.925v1.375h2.2v1.1h-2.2z" fill="currentColor" stroke-width=".55"/></g><path d="m38.863 0.91746c0 1.4444-0.6447 2.7386-1.6625 3.61a4.7327 4.7327 0 0 1-3.0875 1.14c-1.1789 0-2.2571-0.42923-3.0875-1.14a4.7414 4.7414 0 0 1-1.6625-3.61c0-2.6233 2.1267-4.75 4.75-4.75s4.75 2.1267 4.75 4.75m-3.0227-1.5114a1.7273 1.7273 0 1 0-3.4545 0 1.7273 1.7273 0 0 0 3.4545 0m1.0795 4.1994v-0.09716a1.7273 1.7273 0 0 0-1.7273-1.7273h-2.1591a1.7273 1.7273 0 0 0-1.7273 1.7273v0.09716q0.13386 0.13948 0.28068 0.26557a3.8691 3.8691 0 0 0 2.5261 0.93273 3.8691 3.8691 0 0 0 2.8068-1.1983" fill="currentColor" stroke-width=".43182"/><g fill="currentColor"><g fill="currentColor"><path d="m3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5v-0.62695a5.25 5.25 0 0 1-1.9102-3.1582 0.5 0.5 0 0 0-0.089844 0.28516v2.5h-3v-14h10v5.3008a5.25 5.25 0 0 1 1 0.47852v-5.7793a1 1 0 0 0-1-1z"/><path d="m4.5 2a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h0.66797a5.25 5.25 0 0 1 0.83203-0.49219 0.5 0.5 0 0 0 0-0.0078125v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v0.65234a5.25 5.25 0 0 1 1.248-0.15234 5.25 5.25 0 0 1 0.75195 0.054688v-0.55469a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5z"/></g><path d="m11.25 7.3636a3.8864 3.8864 0 0 0-3.8864 3.8864 3.8691 3.8691 0 0 0 0.76561 2.3167 2.1591 2.1591 0 0 1 2.0412-1.4531h2.1591a2.1591 2.1591 0 0 1 2.0412 1.4531 3.8691 3.8691 0 0 0 0.76561-2.3167 3.8864 3.8864 0 0 0-3.8864-3.8864m2.375 6.9631v-0.05398a1.2955 1.2955 0 0 0-1.2955-1.2955h-2.1591a1.2955 1.2955 0 0 0-1.2955 1.2955v0.05398a3.8691 3.8691 0 0 0 2.375 0.80966c0.89473 0 1.7182-0.30227 2.375-0.80966m-7.125-3.0767c0-2.6233 2.1267-4.75 4.75-4.75 2.6233 0 4.75 2.1267 4.75 4.75a4.7414 4.7414 0 0 1-1.6625 3.61 4.7327 4.7327 0 0 1-3.0875 1.14 4.7327 4.7327 0 0 1-3.0875-1.14 4.7414 4.7414 0 0 1-1.6625-3.61m4.75-2.5909a1.0795 1.0795 0 1 0 0 2.1591 1.0795 1.0795 0 0 0 0-2.1591m-1.9432 1.0795a1.9432 1.9432 0 1 1 3.8864 0 1.9432 1.9432 0 0 1-3.8864 0" stroke-width=".43182"/></g></svg>`;
const buildingSwap = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><path d="m-12.888 20.361a4.25 4.25 0 0 0-2.1938 0.56919 4.25 4.25 0 0 0-2.1226 3.5432l-0.0024 0.13755 0.0024 0.13755a4.25 4.25 0 1 0 4.3164-4.3875zm0.60951 2.7036h0.62611v2.6657l-2.3076 0.5929-2.6396-0.88936c0-0.1482 0.06709-0.29647 0.16601-0.41503 0.13191-0.11856 0.29543-0.17787 0.4933-0.17787h2.31l0.69252-0.23716-0.09961-0.26562-0.59291 0.20633h-0.92493c-0.09894 0-0.23051-0.05931-0.29646-0.11859-0.06595-0.05928-0.09724-0.14824-0.09724-0.23716 0-0.1482 0.09835-0.26563 0.26325-0.32491zm1.2854 0h1.3186v3.2586h-1.3186z" stroke-width=".425"/><g fill="currentColor"></g><path d="m2.0619 18.318a4.9999 4.9999 0 0 0-2.5808 0.66962 4.9999 4.9999 0 0 0-2.4971 4.1684l-0.0028 0.16182 0.0028 0.16183a4.9999 4.9999 0 1 0 5.078-5.1617zm0.71705 3.1807h0.73658v3.1361l-2.7148 0.69752-3.1054-1.0463c0-0.17435 0.07893-0.34878 0.19531-0.48826 0.15518-0.13948 0.34756-0.20926 0.58034-0.20926h2.7175l0.81471-0.27901-0.11719-0.31249-0.69753 0.24274h-1.0881c-0.1164 0-0.27118-0.06977-0.34876-0.13951-0.07759-0.06974-0.1144-0.1744-0.1144-0.27901 0-0.17435 0.1157-0.3125 0.3097-0.38224zm1.5122 0h1.5513v3.8336h-1.5513z" stroke-width=".49999"/><g fill="currentColor"><g fill="currentColor"><path d="m3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5v-0.62695a5.25 5.25 0 0 1-1.9102-3.1582 0.5 0.5 0 0 0-0.089844 0.28516v2.5h-3v-14h10v5.3008a5.25 5.25 0 0 1 1 0.47852v-5.7793a1 1 0 0 0-1-1z"/><path d="m4.5 2a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h0.66797a5.25 5.25 0 0 1 0.83203-0.49219 0.5 0.5 0 0 0 0-0.0078125v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v0.65234a5.25 5.25 0 0 1 1.248-0.15234 5.25 5.25 0 0 1 0.75195 0.054688v-0.55469a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5z"/></g></g><path d="m11.25 6.5c-2.6125 0-4.75 2.1375-4.75 4.75 0 2.6125 2.1375 4.75 4.75 4.75s4.75-2.1375 4.75-4.75c0-2.6125-2.1375-4.75-4.75-4.75m0 8.55c-2.0948 0-3.8-1.7052-3.8-3.8 0-2.0948 1.7052-3.8 3.8-3.8 2.0948 0 3.8 1.7053 3.8 3.8 0 2.0948-1.7052 3.8-3.8 3.8m1.425-6.4125v1.1875h-1.9v0.95h1.9v1.1875l1.6625-1.6625zm-2.85 1.9-1.6625 1.6625 1.6625 1.6625v-1.1875h1.9v-0.95h-1.9z" fill="currentColor" stroke-width=".475"/></svg>`;
const buildingBuild = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><path d="m-12.888 20.361a4.25 4.25 0 0 0-2.1938 0.56919 4.25 4.25 0 0 0-2.1226 3.5432l-0.0024 0.13755 0.0024 0.13755a4.25 4.25 0 1 0 4.3164-4.3875zm0.60951 2.7036h0.62611v2.6657l-2.3076 0.5929-2.6396-0.88936c0-0.1482 0.06709-0.29647 0.16601-0.41503 0.13191-0.11856 0.29543-0.17787 0.4933-0.17787h2.31l0.69252-0.23716-0.09961-0.26562-0.59291 0.20633h-0.92493c-0.09894 0-0.23051-0.05931-0.29646-0.11859-0.06595-0.05928-0.09724-0.14824-0.09724-0.23716 0-0.1482 0.09835-0.26563 0.26325-0.32491zm1.2854 0h1.3186v3.2586h-1.3186z" stroke-width=".425"/><g fill="currentColor"></g><g fill="currentColor"><g fill="currentColor"><path d="m3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5v-0.62695a5.25 5.25 0 0 1-1.9102-3.1582 0.5 0.5 0 0 0-0.089844 0.28516v2.5h-3v-14h10v5.3008a5.25 5.25 0 0 1 1 0.47852v-5.7793a1 1 0 0 0-1-1z"/><path d="m4.5 2a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h0.66797a5.25 5.25 0 0 1 0.83203-0.49219 0.5 0.5 0 0 0 0-0.0078125v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v0.65234a5.25 5.25 0 0 1 1.248-0.15234 5.25 5.25 0 0 1 0.75195 0.054688v-0.55469a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5z"/></g></g><path d="m11.25 6.5c2.619 0 4.75 2.131 4.75 4.75 0 2.619-2.131 4.75-4.75 4.75-2.619 0-4.75-2.131-4.75-4.75 0-2.619 2.131-4.75 4.75-4.75m0 0.95001c-2.1028 0-3.8 1.6972-3.8 3.8 0 2.1028 1.6972 3.8 3.8 3.8 2.1028 0 3.8-1.6972 3.8-3.8 0-2.1028-1.6972-3.8-3.8-3.8m0.0204 1.6205c0.3593 0.4672 0.48051 1.0419 0.36538 1.4615q-0.0215 0.10358 1.5192 1.6153 0.5038 0.5038 0 1.0076-0.47417 0.47414-0.94836 0.0558l-1.667-1.5825c-0.41962 0.11514-0.99434-6e-3 -1.4615-0.36537-0.34267-0.45055-0.46084-1.0395-0.36538-1.4615l0.73075 0.73076 0.73076-0.36538 0.36538-0.73076-0.73076-0.73078c0.42209-0.0954 1.011 0.0227 1.4615 0.36538" fill="currentColor" fill-rule="evenodd" stroke-width=".022266"/></svg>`;
const buildingGear = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><path d="m-14.269 23.484a4.75 4.75 0 0 0-2.4518 0.63615 4.75 4.75 0 0 0-2.3723 3.96l-0.0027 0.15374 0.0027 0.15374a4.75 4.75 0 1 0 4.8242-4.9037zm0.68121 3.0217h0.69976v2.9793l-2.5791 0.66266-2.9502-0.99399c0-0.16564 0.07498-0.33135 0.18554-0.46386 0.14743-0.13251 0.33018-0.1988 0.55133-0.1988h2.5817l0.77399-0.26506-0.11133-0.29687-0.66266 0.23061h-1.0337c-0.11058 0-0.25762-0.06629-0.33133-0.13254-0.07371-0.06625-0.10868-0.16568-0.10868-0.26506 0-0.16564 0.10992-0.29688 0.29422-0.36314zm1.4366 0h1.4738v3.642h-1.4738z" stroke-width=".475"/><g fill="currentColor"></g><g transform="translate(.11566 1.0024)"><g transform="translate(-.11566 -1.0024)"><g fill="currentColor"><g fill="currentColor"><path d="m3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5v-0.62695a5.25 5.25 0 0 1-1.9102-3.1582 0.5 0.5 0 0 0-0.089844 0.28516v2.5h-3v-14h10v5.3008a5.25 5.25 0 0 1 1 0.47852v-5.7793a1 1 0 0 0-1-1z"/><path d="m4.5 2a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h0.66797a5.25 5.25 0 0 1 0.83203-0.49219 0.5 0.5 0 0 0 0-0.0078125v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v0.65234a5.25 5.25 0 0 1 1.248-0.15234 5.25 5.25 0 0 1 0.75195 0.054688v-0.55469a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5z"/></g></g></g><path d="m14.281 9.329 1.1442 0.18703a0.19356 0.19356 0 0 1 0.16209 0.19119v1.0646a0.19356 0.19356 0 0 1-0.16031 0.19059l-1.1459 0.20128q-0.09915 0.34556-0.27253 0.65966l0.67747 0.9405a0.19356 0.19356 0 0 1-0.02018 0.25056l-0.75288 0.75288a0.19356 0.19356 0 0 1-0.24819 0.02198l-0.95-0.66678a3.2656 3.2656 0 0 1-0.66381 0.27788l-0.20188 1.1406a0.19356 0.19356 0 0 1-0.19119 0.15972h-1.064a0.19297 0.19297 0 0 1-0.19059-0.1615l-0.18941-1.1347a3.2656 3.2656 0 0 1-0.66678-0.27609l-0.94287 0.66084a0.19356 0.19356 0 0 1-0.24819-0.021975l-0.75347-0.75288a0.19594 0.19594 0 0 1-0.020776-0.24938l0.66678-0.93219a3.2656 3.2656 0 0 1-0.27907-0.67034l-1.1287-0.20009a0.19356 0.19356 0 0 1-0.15972-0.19059v-1.0646c0-0.09499 0.06828-0.17575 0.16209-0.19119l1.1287-0.18822q0.10272-0.35031 0.27906-0.66975l-0.65906-0.94169a0.19356 0.19356 0 0 1 0.021975-0.24759l0.75347-0.75228a0.19356 0.19356 0 0 1 0.24938-0.020776l0.93516 0.66797q0.31647-0.17338 0.66559-0.27313l0.18525-1.1341a0.19356 0.19356 0 0 1 0.19119-0.16209h1.0646c0.0944 0 0.17456 0.067688 0.19119 0.16031l0.1995 1.14q0.34734 0.10034 0.665 0.27609l0.93694-0.67391a0.19356 0.19356 0 0 1 0.25056 0.019591l0.75287 0.75288a0.19356 0.19356 0 0 1 0.02137 0.24819l-0.66797 0.95178q0.17219 0.31469 0.27312 0.65906zm-4.503 0.91853a1.3555 1.3555 0 1 0 2.7111 0 1.3555 1.3555 0 0 0-2.7111 0z" clip-rule="evenodd" fill="none" stroke="currentColor" stroke-width=".59375"/></g></svg>`;
const buildingGearBuild = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><path d="m-14.269 23.484a4.75 4.75 0 0 0-2.4518 0.63615 4.75 4.75 0 0 0-2.3723 3.96l-0.0027 0.15374 0.0027 0.15374a4.75 4.75 0 1 0 4.8242-4.9037zm0.68121 3.0217h0.69976v2.9793l-2.5791 0.66266-2.9502-0.99399c0-0.16564 0.07498-0.33135 0.18554-0.46386 0.14743-0.13251 0.33018-0.1988 0.55133-0.1988h2.5817l0.77399-0.26506-0.11133-0.29687-0.66266 0.23061h-1.0337c-0.11058 0-0.25762-0.06629-0.33133-0.13254-0.07371-0.06625-0.10868-0.16568-0.10868-0.26506 0-0.16564 0.10992-0.29688 0.29422-0.36314zm1.4366 0h1.4738v3.642h-1.4738z" stroke-width=".475"/><g fill="currentColor"></g><g transform="translate(.11566 1.0024)"><g transform="translate(-.11566 -1.0024)"><g fill="currentColor"><g fill="currentColor"><path d="m3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5v-0.62695a5.25 5.25 0 0 1-1.9102-3.1582 0.5 0.5 0 0 0-0.089844 0.28516v2.5h-3v-14h10v5.3008a5.25 5.25 0 0 1 1 0.47852v-5.7793a1 1 0 0 0-1-1z"/><path d="m4.5 2a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h0.66797a5.25 5.25 0 0 1 0.83203-0.49219 0.5 0.5 0 0 0 0-0.0078125v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v0.65234a5.25 5.25 0 0 1 1.248-0.15234 5.25 5.25 0 0 1 0.75195 0.054688v-0.55469a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5z"/></g></g></g><path d="m14.281 9.329 1.1442 0.18703c0.09357 0.015417 0.16219 0.096356 0.16209 0.19119v1.0646c-4.5e-5 0.09404-0.06767 0.17444-0.16031 0.19059l-1.1459 0.20128c-0.0661 0.23038-0.15694 0.45026-0.27253 0.65966l0.67747 0.9405c0.0558 0.07712 0.04724 0.18337-0.02018 0.25056l-0.75288 0.75288c-0.06639 0.06668-0.17111 0.07595-0.24819 0.02198l-0.95-0.66678c-0.21036 0.1168-0.43298 0.20999-0.66381 0.27788l-0.20188 1.1406c-0.01645 0.09263-0.09711 0.16001-0.19119 0.15972h-1.064c-0.09451 1.02e-4 -0.17518-0.06826-0.19059-0.1615l-0.18941-1.1347c-0.23178-0.067114-0.4554-0.15971-0.66678-0.27609l-0.94287 0.66084c-0.077074 0.05397-0.1818 0.0447-0.24819-0.02197l-0.75347-0.75288c-0.066017-0.0673-0.074746-0.17208-0.020776-0.24938l0.66678-0.93219c-0.11765-0.21238-0.21125-0.43722-0.27907-0.67034l-1.1287-0.20009c-0.092404-0.01641-0.15972-0.096743-0.15972-0.19059v-1.0646c0-0.09499 0.06828-0.17575 0.16209-0.19119l1.1287-0.18822c0.068482-0.23354 0.1615-0.45679 0.27906-0.66975l-0.65906-0.94169c-0.053635-0.076954-0.044375-0.18129 0.021975-0.24759l0.75347-0.75228c0.066872-0.06695 0.17235-0.075737 0.24938-0.020776l0.93516 0.66797c0.21098-0.11558 0.43284-0.20663 0.66559-0.27313l0.18525-1.1341c0.01542-0.093571 0.09635-0.16219 0.19119-0.16209h1.0646c0.0944 0 0.17456 0.067688 0.19119 0.16031l0.1995 1.14c0.23156 0.066893 0.45323 0.15892 0.665 0.27609l0.93694-0.67391c0.07698-0.055954 0.18322-0.047648 0.25056 0.019591l0.75287 0.75288c0.06648 0.066546 0.0755 0.17125 0.02137 0.24819l-0.66797 0.95178c0.11479 0.20979 0.20583 0.42948 0.27312 0.65906z" clip-rule="evenodd" fill="none" stroke="currentColor" stroke-width=".59375"/><path d="m10.231 8.372c0.62223 0 1.1267 0.50443 1.1267 1.1267 0 0.11382-0.01688 0.22369-0.04827 0.32727l1.1749 1.1749c0.20741 0.20741 0.20741 0.54369 0 0.7511-0.20741 0.20741-0.5437 0.20741-0.7511 0l-1.1749-1.1749c-0.10357 0.03139-0.21345 0.04827-0.32727 0.04827-0.62223 0-1.1267-0.50442-1.1267-1.1267 0-0.12008 0.01878-0.23577 0.05358-0.34429l0.53294 0.53206 0.52824-0.17593 0.02359-0.023589 0.17608-0.52775-0.53356-0.53309c0.10895-0.035102 0.22516-0.054062 0.34579-0.054062" fill="currentColor" fill-rule="evenodd" stroke-width=".008802"/></g></svg>`;
const buildingRemove = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m-14.269 23.484a4.75 4.75 0 0 0-2.4518 0.63615 4.75 4.75 0 0 0-2.3723 3.96l-0.0027 0.15374 0.0027 0.15374a4.75 4.75 0 1 0 4.8242-4.9037zm0.68121 3.0217h0.69976v2.9793l-2.5791 0.66266-2.9502-0.99399c0-0.16564 0.07498-0.33135 0.18554-0.46386 0.14743-0.13251 0.33018-0.1988 0.55133-0.1988h2.5817l0.77399-0.26506-0.11133-0.29687-0.66266 0.23061h-1.0337c-0.11058 0-0.25762-0.06629-0.33133-0.13254-0.07371-0.06625-0.10868-0.16568-0.10868-0.26506 0-0.16564 0.10992-0.29688 0.29422-0.36314zm1.4366 0h1.4738v3.642h-1.4738z" stroke-width=".475"/><g fill="currentColor"></g><g transform="translate(.11566 1.0024)"><g transform="translate(-.11566 -1.0024)"><g fill="currentColor"><g fill="currentColor"><path d="m3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5v-0.62695a5.25 5.25 0 0 1-1.9102-3.1582 0.5 0.5 0 0 0-0.089844 0.28516v2.5h-3v-14h10v5.3008a5.25 5.25 0 0 1 1 0.47852v-5.7793a1 1 0 0 0-1-1z"/><path d="m4.5 2a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h0.66797a5.25 5.25 0 0 1 0.83203-0.49219 0.5 0.5 0 0 0 0-0.0078125v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v0.65234a5.25 5.25 0 0 1 1.248-0.15234 5.25 5.25 0 0 1 0.75195 0.054688v-0.55469a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5z"/></g></g></g><path d="m11.134 14.048c-2.0947 0-3.8-1.7052-3.8-3.8 0-2.0947 1.7052-3.8 3.8-3.8 2.0948 0 3.8 1.7052 3.8 3.8 0 2.0948-1.7052 3.8-3.8 3.8m0-8.55c-2.6267 0-4.75 2.1232-4.75 4.75 0 2.6268 2.1232 4.75 4.75 4.75 2.6268 0 4.75-2.1232 4.75-4.75 0-2.6267-2.1232-4.75-4.75-4.75m1.2302 2.85-1.2302 1.2302-1.2302-1.2302-0.66975 0.66975 1.2302 1.2302-1.2302 1.2302 0.66975 0.66975 1.2302-1.2302 1.2302 1.2302 0.66975-0.66975-1.2302-1.2302 1.2302-1.2302z" fill="currentColor" stroke-width=".475"/></g></svg>`;
const buildingAdd = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m-14.269 23.484a4.75 4.75 0 0 0-2.4518 0.63615 4.75 4.75 0 0 0-2.3723 3.96l-0.0027 0.15374 0.0027 0.15374a4.75 4.75 0 1 0 4.8242-4.9037zm0.68121 3.0217h0.69976v2.9793l-2.5791 0.66266-2.9502-0.99399c0-0.16564 0.07498-0.33135 0.18554-0.46386 0.14743-0.13251 0.33018-0.1988 0.55133-0.1988h2.5817l0.77399-0.26506-0.11133-0.29687-0.66266 0.23061h-1.0337c-0.11058 0-0.25762-0.06629-0.33133-0.13254-0.07371-0.06625-0.10868-0.16568-0.10868-0.26506 0-0.16564 0.10992-0.29688 0.29422-0.36314zm1.4366 0h1.4738v3.642h-1.4738z" stroke-width=".475"/><g fill="currentColor"></g><g transform="translate(.11566 1.0024)"><g transform="translate(-.11566 -1.0024)"><g fill="currentColor"><g fill="currentColor"><path d="m3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5v-0.62695a5.25 5.25 0 0 1-1.9102-3.1582 0.5 0.5 0 0 0-0.089844 0.28516v2.5h-3v-14h10v5.3008a5.25 5.25 0 0 1 1 0.47852v-5.7793a1 1 0 0 0-1-1z"/><path d="m4.5 2a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h0.66797a5.25 5.25 0 0 1 0.83203-0.49219 0.5 0.5 0 0 0 0-0.0078125v-1a0.5 0.5 0 0 0-0.5-0.5zm3 0a0.5 0.5 0 0 0-0.5 0.5v0.65234a5.25 5.25 0 0 1 1.248-0.15234 5.25 5.25 0 0 1 0.75195 0.054688v-0.55469a0.5 0.5 0 0 0-0.5-0.5zm-6 3a0.5 0.5 0 0 0-0.5 0.5v1a0.5 0.5 0 0 0 0.5 0.5h1a0.5 0.5 0 0 0 0.5-0.5v-1a0.5 0.5 0 0 0-0.5-0.5z"/></g></g></g><path d="m11.134 6.4476c2.0952 0 3.8 1.7048 3.8 3.8 0 2.0952-1.7048 3.8-3.8 3.8-2.0952 0-3.8-1.7048-3.8-3.8 0-2.0952 1.7048-3.8 3.8-3.8m0-0.95c-2.6234 0-4.75 2.1266-4.75 4.75 0 2.6234 2.1266 4.75 4.75 4.75 2.6234 0 4.75-2.1266 4.75-4.75 0-2.6234-2.1266-4.75-4.75-4.75m2.375 4.275h-1.9v-1.9h-0.95v1.9h-1.9v0.95h1.9v1.9h0.95v-1.9h1.9z" fill="currentColor" stroke-width=".475"/></g></svg>`;
const exchange = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m21 9l-4-4v3h-7v2h7v3M7 11l-4 4l4 4v-3h7v-2H7z"/></svg>`;
const exchangeCircle = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M12.005 22.003c-5.523 0-10-4.477-10-10s4.477-10 10-10s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m-5-7h9v2h-4v3zm5-4v-3l5 5h-9v-2z"/></svg>`;
const cancel = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M6.758 17.243L12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243"/></svg>`;
const cancelCircle = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m8.4 17l3.6-3.6l3.6 3.6l1.4-1.4l-3.6-3.6L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4l3.6 3.6L7 15.6zm3.6 5q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>`;
const plus = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" style="stroke-width:var(--fu-icon-stroke-width, 2)" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/></svg>`;
const plusCircle = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" style="stroke-width:var(--fu-icon-stroke-width, 2)" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m6 0h6m-3-3v6"/></svg>`;
const eye = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="stroke-width:var(--fu-icon-stroke-width, 2)"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0" /><path d="M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" /></g></svg>`;
const chevronRight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M12 8L5.68 1.68L4 3.35L8.65 8L4 12.65l1.68 1.67z"/></svg>`;
const link = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M17 7h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c1.65 0 3 1.35 3 3s-1.35 3-3 3h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c2.76 0 5-2.24 5-5s-2.24-5-5-5m-9 5c0 .55.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1H9c-.55 0-1 .45-1 1m2 3H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h3c.55 0 1-.45 1-1s-.45-1-1-1H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h3c.55 0 1-.45 1-1s-.45-1-1-1" /></svg>`;
const certificate = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M128 136a8 8 0 0 1-8 8H72a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8m-8-40H72a8 8 0 0 0 0 16h48a8 8 0 0 0 0-16m112 65.47V224a8 8 0 0 1-12 7l-24-13.74L172 231a8 8 0 0 1-12-7v-24H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16v30.53a51.88 51.88 0 0 1 0 74.94M160 184v-22.53A52 52 0 0 1 216 76V56H40v128Zm56-12a51.88 51.88 0 0 1-40 0v38.22l16-9.16a8 8 0 0 1 7.94 0l16 9.16Zm16-48a36 36 0 1 0-36 36a36 36 0 0 0 36-36" /></svg>`;
const elevator = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m7 2l4 4H8v4H6V6H3zm10 8l-4-4h3V2h2v4h3zM7 12h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2m0 2v6h10v-6z" /></svg>`;
const report = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9H6m9.5 2a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5M6 6h3m9 12l-4.5-3l-2.5 2l-5-4" /><path d="M3 20.4V3.6a.6.6 0 0 1 .6-.6h16.8a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6Z" /></g></svg>`;
const templateEdit = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" fill-rule="evenodd" d="M10.944 1.25h2.112c1.838 0 3.294 0 4.433.153c1.172.158 2.121.49 2.87 1.238a.75.75 0 0 1-1.06 1.06c-.424-.422-1.004-.676-2.01-.811c-1.027-.138-2.382-.14-4.289-.14h-2c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812S4.025 4.705 3.89 5.71c-.138 1.029-.14 2.383-.14 4.29v4c0 1.907.002 3.262.14 4.29c.135 1.005.389 1.585.812 2.008s1.003.677 2.009.812c1.028.138 2.382.14 4.289.14h2c1.907 0 3.262-.002 4.29-.14c1.005-.135 1.585-.389 2.008-.812c.696-.696.907-1.777.943-4.309a.75.75 0 0 1 1.5.022c-.035 2.427-.192 4.158-1.382 5.348c-.749.748-1.698 1.08-2.87 1.238c-1.14.153-2.595.153-4.433.153h-2.112c-1.838 0-3.294 0-4.433-.153c-1.172-.158-2.121-.49-2.87-1.238c-.748-.749-1.08-1.698-1.238-2.87c-.153-1.14-.153-2.595-.153-4.433V9.944c0-1.838 0-3.294.153-4.433c.158-1.172.49-2.121 1.238-2.87c.749-.748 1.698-1.08 2.87-1.238c1.14-.153 2.595-.153 4.433-.153m7.17 5.796a2.716 2.716 0 1 1 3.84 3.84L17.2 15.643a7 7 0 0 1-.63.587q-.346.27-.744.46c-.224.107-.46.185-.806.3l-2.084.695a1.28 1.28 0 0 1-1.62-1.62l.681-2.04l.014-.043c.116-.347.194-.582.301-.806a4 4 0 0 1 .46-.744c.153-.196.328-.371.587-.63l.031-.031zm2.78 1.06a1.216 1.216 0 0 0-1.72 0l-.182.182l.034.107c.094.27.273.63.611.968a2.55 2.55 0 0 0 1.075.645l.182-.182a1.216 1.216 0 0 0 0-1.72m-1.328 3.048a4 4 0 0 1-.99-.73a4 4 0 0 1-.73-.99L14.45 12.83c-.301.301-.407.409-.496.523q-.17.218-.289.467c-.062.131-.111.274-.246.678l-.4 1.2l.283.283l1.2-.4c.404-.135.547-.184.678-.246q.248-.12.467-.289c.114-.089.222-.195.523-.496zM7.25 9A.75.75 0 0 1 8 8.25h6.5a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 9m0 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75" clip-rule="evenodd" /></svg>`;
const draftEdit = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 1.5)" ><path d="m18.18 8.04l.463-.464a1.966 1.966 0 1 1 2.781 2.78l-.463.464M18.18 8.04s.058.984.927 1.853s1.854.927 1.854.927M18.18 8.04l-4.26 4.26c-.29.288-.434.433-.558.592q-.22.282-.374.606c-.087.182-.151.375-.28.762l-.413 1.24l-.134.401m8.8-5.081l-4.26 4.26c-.29.29-.434.434-.593.558q-.282.22-.606.374c-.182.087-.375.151-.762.28l-1.24.413l-.401.134m0 0l-.401.134a.53.53 0 0 1-.67-.67l.133-.402m.938.938l-.938-.938" /><path stroke-linecap="round" d="M8 13h2.5M8 9h6.5M8 17h1.5M3 14v-4c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172M21 14c0 3.771 0 5.657-1.172 6.828m-15.656 0C5.343 22 7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172m0 0c.944-.943 1.127-2.348 1.163-4.828" /></g></svg>`;
const widgets = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 1.5)" d="M16.65 13L11 7.35l5.65-5.65l5.65 5.65zM3 11V3h8v8zm10 10v-8h8v8zM3 21v-8h8v8z" /></svg>`;
const starOutline = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 1.5)" d="m8.85 16.825l3.15-1.9l3.15 1.925l-.825-3.6l2.775-2.4l-3.65-.325l-1.45-3.4l-1.45 3.375l-3.65.325l2.775 2.425zM5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275zM12 12.25" /></svg>`;
const starSolid = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 1.5)" d="m5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275z" /></svg>`;
class IconRegistryService {
constructor(sanitizer) {
this.sanitizer = sanitizer;
this.icons = new Map();
this.registerIcon('edit', edit);
this.registerIcon('editOff', editOff);
this.registerIcon('editSave', editSave);
this.registerIcon('trash', trash);
this.registerIcon('arrowLeft', arrowLeft);
this.registerIcon('arrowRight', arrowRight);
this.registerIcon('doubleArrowLeft', doubleArrowLeft);
this.registerIcon('doubleArrowRight', doubleArrowRight);
this.registerIcon('sort', sort);
this.registerIcon('sortAsc', sortAsc);
this.registerIcon('sortDesc', sortDesc);
this.registerIcon('filterRemove', filterRemove);
this.registerIcon('filterPlus', filterPlus);
this.registerIcon('filterEdit', filterEdit);
this.registerIcon('check', check);
this.registerIcon('save', save);
this.registerIcon('building', building);
this.registerIcon('buildingHand', buildingHand);
this.registerIcon('buildingBuild', buildingBuild);
this.registerIcon('buildingSwap', buildingSwap);
this.registerIcon('buildingUser', buildingUser);
this.registerIcon('buildingGear', buildingGear);
this.registerIcon('buildingGearBuild', buildingGearBuild);
this.registerIcon('buildingRemove', buildingRemove);
this.registerIcon('buildingAdd', buildingAdd);
this.registerIcon('exchange', exchange);
this.registerIcon('exchangeCircle', exchangeCircle);
this.registerIcon('cancel', cancel);
this.registerIcon('cancelCircle', cancelCircle);
this.registerIcon('plus', plus);
this.registerIcon('plusCircle', plusCircle);
this.registerIcon('search', search);
this.registerIcon('eye', eye);
this.registerIcon('chevronRight', chevronRight);
this.registerIcon('link', link);
this.registerIcon('certificate', certificate);
this.registerIcon('report', report);
this.registerIcon('elevator', elevator);
this.registerIcon('templateEdit', templateEdit);
this.registerIcon('draftEdit', draftEdit);
this.registerIcon('widgets', widgets);
this.registerIcon('starOutline', starOutline);
this.registerIcon('starSolid', starSolid);
}
registerIcon(name, svg) {
const safeSvg = this.sanitizer.bypassSecurityTrustHtml(svg);
this.icons.set(name, safeSvg);
}
getIcon(name) {
return this.icons.get(name);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconRegistryService, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconRegistryService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconRegistryService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: i1.DomSanitizer }] });
class IconComponent {
get classList() {
return `fu-icon`;
}
constructor(iconRegistry, elementRef) {
this.iconRegistry = iconRegistry;
this.elementRef = elementRef;
this.iconName = input.required();
this.size = input('');
this.strokeWidth = input('');
this.color = input('');
}
ngOnChanges(changes) {
if (changes['size']) {
this.setIconSize();
}
if (changes['color']) {
this.setIconColor();
}
if (changes['strokeWidth']) {
this.setIconStrokeWidth();
}
}
ngOnInit() {
this.iconSvg = this.iconRegistry.getIcon(this.iconName());
}
setIconColor() {
this.elementRef.nativeElement.style.removeProperty('color');
if (this.color() !== undefined) {
this.elementRef.nativeElement.style.setProperty('color', this.color());
}
}
setIconSize() {
this.elementRef.nativeElement.style.removeProperty('--fu-icon-size');
if (this.size() !== undefined) {
this.elementRef.nativeElement.style.setProperty('--fu-icon-size', this.size().toString());
}
}
setIconStrokeWidth() {
this.elementRef.nativeElement.style.removeProperty('--fu-icon-stroke-width');
if (this.strokeWidth() !== undefined) {
this.elementRef.nativeElement.style.setProperty('--fu-icon-stroke-width', this.strokeWidth().toString());
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconComponent, deps: [{ token: IconRegistryService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: IconComponent, isStandalone: false, selector: "fu-icon", inputs: { iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classList" } }, usesOnChanges: true, ngImport: i0, template: "<span [innerHTML]=\"iconSvg\" class=\"fu-icon-container\"></span>\r\n", styles: ["fu-icon{display:inline-block;width:var(--fu-icon-size, 1.1rem);height:var(--fu-icon-size, 1.1rem)}.fu-icon-container{display:inline-block;width:var(--fu-icon-size, 1.1rem);height:var(--fu-icon-size, 1.1rem);line-height:initial;vertical-align:initial;overflow:hidden}.fu-icon-container svg{width:inherit;height:inherit;vertical-align:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<span [innerHTML]=\"iconSvg\" class=\"fu-icon-container\"></span>\r\n", styles: ["fu-icon{display:inline-block;width:var(--fu-icon-size, 1.1rem);height:var(--fu-icon-size, 1.1rem)}.fu-icon-container{display:inline-block;width:var(--fu-icon-size, 1.1rem);height:var(--fu-icon-size, 1.1rem);line-height:initial;vertical-align:initial;overflow:hidden}.fu-icon-container svg{width:inherit;height:inherit;vertical-align:inherit}\n"] }]
}], ctorParameters: () => [{ type: IconRegistryService }, { type: i0.ElementRef }], propDecorators: { classList: [{
type: HostBinding,
args: ['class']
}] } });
class BodyRowCellComponent {
constructor(sortService, editRowService, elementRef) {
this.sortService = sortService;
this.editRowService = editRowService;
this.elementRef = elementRef;
this.cellValue = input('');
this.editKey = input('');
this.cellDef = signal('');
this.editCellValue = model();
this.isEditing = signal(false);
this.hasCellValue = signal(false);
this.isCellBoolean = computed(() => typeof this.cellValue() === 'boolean');
}
ngOnChanges(changes) {
const rowIndex = this.getRowIndex();
if (changes['cellValue']) {
this.hasCellValue.set(true);
}
if (changes['editKey']) {
this.validateKey();
this.subscription = this.editRowService.editIndex$
.pipe(filter(() => !!this.editKey))
.subscribe(index => {
this.editCellValue.set(this.cellValue());
this.isEditing.set(index === rowIndex);
});
}
}
ngOnInit() {
const index = this.getCellIndex();
this.cellDef.set(this.sortService.getCellDef(index) || '');
}
checkboxClick(event) {
event.stopPropagation();
}
onInputChange(value) {
this.editCellValue.set(value);
if (this.isEditing()) {
this.editRowService.updateEditValues(this.editKey(), value);
}
}
validateKey() {
if (!this.sortService.cellKeys().includes(this.editKey())) {
console.warn(`Invalid editKey '${this.editKey}' provided.`);
}
}
getCellIndex() {
const parent = this.elementRef.nativeElement.parentElement;
return Array.from(parent.children).indexOf(this.elementRef.nativeElement);
}
getRowIndex() {
const element = this.elementRef.nativeElement.parentElement;
const parent = element.parentElement;
if (!parent)
return -1;
const children = Array.from(parent.children);
return children.indexOf(element);
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BodyRowCellComponent, deps: [{ token: DataSortingService }, { token: EditRowService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: BodyRowCellComponent, isStandalone: false, selector: "fu-body-row-cell", inputs: { cellValue: { classPropertyName: "cellValue", publicName: "cellValue", isSignal: true, isRequired: false, transformFunction: null }, editKey: { classPropertyName: "editKey", publicName: "editKey", isSignal: true, isRequired: false, transformFunction: null }, editCellValue: { classPropertyName: "editCellValue", publicName: "editCellValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editCellValue: "editCellValueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-body-row-cell\" [attr.data-edit]=\"isEditing()\">\r\n <span>{{ cellDef() }}</span>\r\n\r\n @if (hasCellValue()) {\r\n @if (isEditing()) {\r\n @if (isCellBoolean()) {\r\n <div class=\"fu-checkbox-input\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"cellValue()\"\r\n [(ngModel)]=\"editCellValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (click)=\"checkboxClick($event)\"\r\n />\r\n </div>\r\n } @else {\r\n <input\r\n class=\"fu-edit-input\"\r\n [(ngModel)]=\"editCellValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n } @else {\r\n @if (isCellBoolean()) {\r\n @if (cellValue()) {\r\n <div style=\"margin-left: 6px\">\r\n <fu-icon iconName=\"check\" size=\"16px\" strokeWidth=\"3\" />\r\n </div>\r\n }\r\n } @else {\r\n <span>{{ cellValue() }}</span>\r\n }\r\n }\r\n }\r\n\r\n @if (!hasCellValue()) {\r\n <span>\r\n <ng-content />\r\n </span>\r\n }\r\n</div>\r\n", styles: [".fu-body-row-cell{padding:12px 16px}.fu-body-row-cell[data-edit=true]{padding:5px 16px;align-items:center}.fu-body-row-cell>span:nth-child(1){display:none}@media (max-width: 900px){.fu-body-row-cell>span:nth-child(1){display:inline;font-weight:700}}.fu-body-row-cell>span:nth-child(2){color:var(--fu-grid-cell-color);word-break:break-all}@media (max-width: 900px){.fu-body-row-cell{display:grid;grid-template-columns:repeat(2,1fr);padding:8px 16px}}@media (max-width: 600px){.fu-body-row-cell{grid-template-columns:35% 1fr;padding:6px 16px}}.fu-edit-input{background-color:transparent;color:var(--fu-grid-cell-edit-input);width:100%;padding:4px;border:none;outline:1px solid gray;border-radius:4px}.fu-checkbox-input{--borderColor: var(--fu-grid-cell-edit-input);--borderWidth: 2px}.fu-checkbox-input label{display:block;max-width:100%;margin:0 auto}.fu-checkbox-input input[type=checkbox]{-webkit-appearance:none;appearance:none;vertical-align:middle;font-size:1.75em;border-radius:.125em;display:inline-block;border:var(--borderWidth) solid var(--borderColor);width:1em;height:1em;position:relative;cursor:pointer}.fu-checkbox-input input[type=checkbox]:before,.fu-checkbox-input input[type=checkbox]:after{content:\"\";position:absolute;background:var(--borderColor);width:calc(var(--borderWidth) * 3);height:var(--borderWidth);top:55%;left:15%;transform-origin:left center}.fu-checkbox-input input[type=checkbox]:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -3),calc(var(--borderWidth) / -3)) scaleX(0)}.fu-checkbox-input input[type=checkbox]:after{width:calc(var(--borderWidth) * 6);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(0);transform-origin:left center}.fu-checkbox-input input[type=checkbox]:checked:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -2),calc(var(--borderWidth) / -2)) scaleX(1)}.fu-checkbox-input input[type=checkbox]:checked:after{width:calc(var(--borderWidth) * 7);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(1)}.fu-checkbox-input input[type=checkbox]:focus{outline:calc(var(--borderWidth) / 2) dotted rgba(0,0,0,.25)}\n"], dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BodyRowCellComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-body-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"fu-body-row-cell\" [attr.data-edit]=\"isEditing()\">\r\n <span>{{ cellDef() }}</span>\r\n\r\n @if (hasCellValue()) {\r\n @if (isEditing()) {\r\n @if (isCellBoolean()) {\r\n <div class=\"fu-checkbox-input\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"cellValue()\"\r\n [(ngModel)]=\"editCellValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (click)=\"checkboxClick($event)\"\r\n />\r\n </div>\r\n } @else {\r\n <input\r\n class=\"fu-edit-input\"\r\n [(ngModel)]=\"editCellValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n } @else {\r\n @if (isCellBoolean()) {\r\n @if (cellValue()) {\r\n <div style=\"margin-left: 6px\">\r\n <fu-icon iconName=\"check\" size=\"16px\" strokeWidth=\"3\" />\r\n </div>\r\n }\r\n } @else {\r\n <span>{{ cellValue() }}</span>\r\n }\r\n }\r\n }\r\n\r\n @if (!hasCellValue()) {\r\n <span>\r\n <ng-content />\r\n </span>\r\n }\r\n</div>\r\n", styles: [".fu-body-row-cell{padding:12px 16px}.fu-body-row-cell[data-edit=true]{padding:5px 16px;align-items:center}.fu-body-row-cell>span:nth-child(1){display:none}@media (max-width: 900px){.fu-body-row-cell>span:nth-child(1){display:inline;font-weight:700}}.fu-body-row-cell>span:nth-child(2){color:var(--fu-grid-cell-color);word-break:break-all}@media (max-width: 900px){.fu-body-row-cell{display:grid;grid-template-columns:repeat(2,1fr);padding:8px 16px}}@media (max-width: 600px){.fu-body-row-cell{grid-template-columns:35% 1fr;padding:6px 16px}}.fu-edit-input{background-color:transparent;color:var(--fu-grid-cell-edit-input);width:100%;padding:4px;border:none;outline:1px solid gray;border-radius:4px}.fu-checkbox-input{--borderColor: var(--fu-grid-cell-edit-input);--borderWidth: 2px}.fu-checkbox-input label{display:block;max-width:100%;margin:0 auto}.fu-checkbox-input input[type=checkbox]{-webkit-appearance:none;appearance:none;vertical-align:middle;font-size:1.75em;border-radius:.125em;display:inline-block;border:var(--borderWidth) solid var(--borderColor);width:1em;height:1em;position:relative;cursor:pointer}.fu-checkbox-input input[type=checkbox]:before,.fu-checkbox-input input[type=checkbox]:after{content:\"\";position:absolute;background:var(--borderColor);width:calc(var(--borderWidth) * 3);height:var(--borderWidth);top:55%;left:15%;transform-origin:left center}.fu-checkbox-input input[type=checkbox]:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -3),calc(var(--borderWidth) / -3)) scaleX(0)}.fu-checkbox-input input[type=checkbox]:after{width:calc(var(--borderWidth) * 6);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(0);transform-origin:left center}.fu-checkbox-input input[type=checkbox]:checked:before{transform:rotate(45deg) translate(calc(var(--borderWidth) / -2),calc(var(--borderWidth) / -2)) scaleX(1)}.fu-checkbox-input input[type=checkbox]:checked:after{width:calc(var(--borderWidth) * 7);transform:rotate(-45deg) translateY(calc(var(--borderWidth) * 3)) scaleX(1)}.fu-checkbox-input input[type=checkbox]:focus{outline:calc(var(--borderWidth) / 2) dotted rgba(0,0,0,.25)}\n"] }]
}], ctorParameters: () => [{ type: DataSortingService }, { type: EditRowService }, { type: i0.ElementRef }] });
class SortColumnDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
}
ngAfterViewInit() {
if (this.column) {
this.renderer.setAttribute(this.el.nativeElement, 'data-sorted', this.column);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortColumnDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SortColumnDirective, isStandalone: false, selector: "[sortColumn]", inputs: { column: ["sortColumn", "column"] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortColumnDirective, decorators: [{
type: Directive,
args: [{
selector: '[sortColumn]',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { column: [{
type: Input,
args: ['sortColumn']
}] } });
class HeadRowCellComponent {
// private storedValues = computed<OnSortEvent>(() =>
// this.sortService.storedValues()
// );
constructor(sortService, elementRef) {
this.sortService = sortService;
this.elementRef = elementRef;
this.cellDef = input.required();
this.sortKey = input();
this.direction = computed(() => this.sortService.sortDirection());
this.sorting = computed(() => this.sortService.sortKey());
}
ngOnInit() {
const index = this.getIndex();
this.sortService.setCellDef(index, this.cellDef());
}
onSorting() {
this.sortService.setSortKey(this.sortKey());
}
// private validateKey(): void {
// if (this.sortService.cellKeys().length > 0) {
// if (!this.sortService.cellKeys().includes(this.sortKey()! as string)) {
// console.warn(`Invalid sortKey '${this.sortKey}' provided.`);
// }
// }
// }
getIndex() {
const parent = this.elementRef.nativeElement.parentElement;
return Array.from(parent.children).indexOf(this.elementRef.nativeElement);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: HeadRowCellComponent, deps: [{ token: DataSortingService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: HeadRowCellComponent, isStandalone: false, selector: "fu-head-row-cell", inputs: { cellDef: { classPropertyName: "cellDef", publicName: "cellDef", isSignal: true, isRequired: true, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n class=\"fu-head-row-cell\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n [sortColumn]=\"sortKey()\"\r\n (click)=\"onSorting()\"\r\n>\r\n <span>{{ cellDef() }}</span>\r\n @if (sortKey()) {\r\n @if (sortKey() == sorting()) {\r\n <button>\r\n @if (direction() === 'asc') {\r\n <fu-icon strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @if (direction() === 'desc') {\r\n <fu-icon strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n </button>\r\n } @else {\r\n <button><fu-icon color=\"gray\" iconName=\"sort\" /></button>\r\n }\r\n }\r\n</div>\r\n", styles: [".fu-head-row-cell{padding:16px;font-weight:700;display:flex}.fu-head-row-cell>span{margin-right:4px}.fu-head-row-cell>button{cursor:pointer;background-color:transparent;color:var(--fu-grid-text-color);font-weight:700;border:none}@media (max-width: 900px){.fu-head-row-cell{display:none}.fu-head-row-cell[data-sorted]{display:flex}}.fu-head-row-cell[data-sorted]:hover{cursor:pointer;background-color:var(--fu-grid-hover-color)}.fu-head-row-cell.sort-asc,.fu-head-row-cell.sort-desc{background-color:var(--fu-grid-fg-color)}@media (max-width: 600px){.fu-head-row-cell{padding:8px}}.disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "directive", type: SortColumnDirective, selector: "[sortColumn]", inputs: ["sortColumn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: HeadRowCellComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-head-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\r\n class=\"fu-head-row-cell\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n [sortColumn]=\"sortKey()\"\r\n (click)=\"onSorting()\"\r\n>\r\n <span>{{ cellDef() }}</span>\r\n @if (sortKey()) {\r\n @if (sortKey() == sorting()) {\r\n <button>\r\n @if (direction() === 'asc') {\r\n <fu-icon strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @if (direction() === 'desc') {\r\n <fu-icon strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n </button>\r\n } @else {\r\n <button><fu-icon color=\"gray\" iconName=\"sort\" /></button>\r\n }\r\n }\r\n</div>\r\n", styles: [".fu-head-row-cell{padding:16px;font-weight:700;display:flex}.fu-head-row-cell>span{margin-right:4px}.fu-head-row-cell>button{cursor:pointer;background-color:transparent;color:var(--fu-grid-text-color);font-weight:700;border:none}@media (max-width: 900px){.fu-head-row-cell{display:none}.fu-head-row-cell[data-sorted]{display:flex}}.fu-head-row-cell[data-sorted]:hover{cursor:pointer;background-color:var(--fu-grid-hover-color)}.fu-head-row-cell.sort-asc,.fu-head-row-cell.sort-desc{background-color:var(--fu-grid-fg-color)}@media (max-width: 600px){.fu-head-row-cell{padding:8px}}.disabled{pointer-events:none}\n"] }]
}], ctorParameters: () => [{ type: DataSortingService }, { type: i0.ElementRef }] });
/**
* @deprecated fu-btn-outline will be removed in next versions. Use `fuButton` instead.
*/
class OutlinedButtonDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.variant = 'regular';
this.iconButton = false;
this.rounded = false;
this.compact = false;
}
ngOnInit() {
this.setInitialStyles();
}
setInitialStyles() {
this.renderer.addClass(this.el.nativeElement, 'fu-btn');
this.renderer.addClass(this.el.nativeElement, 'fu-btn-outline');
this.renderer.addClass(this.el.nativeElement, `fu-btn-${this.variant}`);
if (this.iconButton) {
this.renderer.setAttribute(this.el.nativeElement, 'icon', 'true');
}
if (this.rounded) {
this.renderer.setAttribute(this.el.nativeElement, 'rounded', 'true');
}
if (this.compact) {
this.renderer.setAttribute(this.el.nativeElement, 'compact', 'true');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OutlinedButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.6", type: OutlinedButtonDirective, isStandalone: true, selector: "[fu-btn-outline]", inputs: { variant: "variant", iconButton: ["iconButton", "iconButton", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: OutlinedButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[fu-btn-outline]',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { variant: [{
type: Input
}], iconButton: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], rounded: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], compact: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
class RowActionsComponent {
constructor(renderer, el, editRowService) {
this.renderer = renderer;
this.el = el;
this.editRowService = editRowService;
this.editRow = input();
this.editIndex = input();
this.isEditing = signal(false);
this.showDelete = signal(false);
this.editSave = new EventEmitter();
this.delete = new EventEmitter();
this.renderer.setAttribute(this.el.nativeElement, 'data-actions', 'true');
}
ngOnChanges(changes) {
if (changes['editRow'] && changes['editIndex']) {
this.subscription = this.editRowService.editIndex$.subscribe(index => {
this.isEditing.set(index === this.editIndex());
});
}
}
ngOnInit() {
this.showDelete.set(this.delete.observed);
}
setEdit(e) {
this.editRowService.startEditing(this.editIndex());
e.stopPropagation();
}
cancelEdit(e) {
this.editRowService.stopEditing();
e.stopPropagation();
}
saveEdit(e) {
this.editRowService.stopEditing();
this.editRowService.editValues$.pipe(take(1)).subscribe(editedValues => {
const updatedRow = { ...this.editRow(), ...editedValues };
this.editSave.emit(updatedRow);
});
this.editRowService.resetEditValues();
e.stopPropagation();
}
emitDelete(e) {
this.delete.emit();
e.stopPropagation();
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
setTimeout(() => {
this.editRowService.stopEditing();
}, 100);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: RowActionsComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: EditRowService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: RowActionsComponent, isStandalone: false, selector: "fu-row-actions", inputs: { editRow: { classPropertyName: "editRow", publicName: "editRow", isSignal: true, isRequired: false, transformFunction: null }, editIndex: { classPropertyName: "editIndex", publicName: "editIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editSave: "editSave", delete: "delete" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-row-actions\">\r\n @if (editRow() && editIndex() !== null) {\r\n @if (isEditing()) {\r\n <button fu-btn-outline iconButton (click)=\"cancelEdit($event)\">\r\n <fu-icon iconName=\"editOff\" />\r\n </button>\r\n <button\r\n fu-btn-outline\r\n iconButton\r\n variant=\"success\"\r\n (click)=\"saveEdit($event)\"\r\n >\r\n <fu-icon iconName=\"save\" />\r\n </button>\r\n } @else {\r\n <button fu-btn-outline iconButton (click)=\"setEdit($event)\">\r\n <fu-icon iconName=\"edit\" />\r\n </button>\r\n }\r\n }\r\n @if (!isEditing() && showDelete()) {\r\n <button\r\n fu-btn-outline\r\n iconButton\r\n variant=\"danger\"\r\n (click)=\"emitDelete($event)\"\r\n >\r\n <fu-icon iconName=\"trash\" />\r\n </button>\r\n }\r\n <ng-content />\r\n</div>\r\n", styles: [".fu-row-actions{display:flex;justify-content:flex-end;align-items:center;height:100%;gap:12px;margin-right:16px}@media (max-width: 900px){.fu-row-actions{justify-content:center}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "directive", type: OutlinedButtonDirective, selector: "[fu-btn-outline]", inputs: ["variant", "iconButton", "rounded", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: RowActionsComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-row-actions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"fu-row-actions\">\r\n @if (editRow() && editIndex() !== null) {\r\n @if (isEditing()) {\r\n <button fu-btn-outline iconButton (click)=\"cancelEdit($event)\">\r\n <fu-icon iconName=\"editOff\" />\r\n </button>\r\n <button\r\n fu-btn-outline\r\n iconButton\r\n variant=\"success\"\r\n (click)=\"saveEdit($event)\"\r\n >\r\n <fu-icon iconName=\"save\" />\r\n </button>\r\n } @else {\r\n <button fu-btn-outline iconButton (click)=\"setEdit($event)\">\r\n <fu-icon iconName=\"edit\" />\r\n </button>\r\n }\r\n }\r\n @if (!isEditing() && showDelete()) {\r\n <button\r\n fu-btn-outline\r\n iconButton\r\n variant=\"danger\"\r\n (click)=\"emitDelete($event)\"\r\n >\r\n <fu-icon iconName=\"trash\" />\r\n </button>\r\n }\r\n <ng-content />\r\n</div>\r\n", styles: [".fu-row-actions{display:flex;justify-content:flex-end;align-items:center;height:100%;gap:12px;margin-right:16px}@media (max-width: 900px){.fu-row-actions{justify-content:center}}\n"] }]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: EditRowService }], propDecorators: { editSave: [{
type: Output
}], delete: [{
type: Output
}] } });
class GridHeaderTemplateDirective {
static ngTemplateContextGuard(dir, ctx) {
return true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: GridHeaderTemplateDirective, isStandalone: false, selector: "[fuHeaderTemplate]", inputs: { dataSource: ["fuHeaderTemplate", "dataSource"] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridHeaderTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[fuHeaderTemplate]',
standalone: false
}]
}], propDecorators: { dataSource: [{
type: Input,
args: ['fuHeaderTemplate']
}] } });
class GridBodyTemplateDirective {
constructor() {
this.dataSource = [];
}
static ngTemplateContextGuard(dir, ctx) {
return true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridBodyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: GridBodyTemplateDirective, isStandalone: false, selector: "[fuBodyTemplate]", inputs: { dataSource: ["fuBodyTemplate", "dataSource"] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridBodyTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[fuBodyTemplate]',
standalone: false
}]
}], propDecorators: { dataSource: [{
type: Input,
args: ['fuBodyTemplate']
}] } });
class GridExpandTemplateDirective {
static ngTemplateContextGuard(dir, ctx) {
return true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridExpandTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: GridExpandTemplateDirective, isStandalone: false, selector: "[fuExpandTemplate]", inputs: { dataSource: ["fuExpandTemplate", "dataSource"] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridExpandTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[fuExpandTemplate]',
standalone: false
}]
}], propDecorators: { dataSource: [{
type: Input,
args: ['fuExpandTemplate']
}] } });
class PaginationService {
constructor() {
this.paginationSubject = new Subject();
this.firstPageSubject = new Subject();
this.paginator$ = this.paginationSubject.asObservable();
this.firstPage$ = this.firstPageSubject.asObservable();
}
setPage(page, pageSize) {
// const currentState = this.paginationSubject.value;
this.paginationSubject.next({ page, pageSize });
}
setPageSize(pageSize) {
this.paginationSubject.next({ page: 1, pageSize });
}
initPagination(page, pageSize) {
this.paginationSubject.next({ page, pageSize });
}
firstPage() {
this.firstPageSubject.next(true);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PaginationService, providedIn: 'any' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PaginationService, decorators: [{
type: Injectable,
args: [{
providedIn: 'any',
}]
}] });
/**
* @deprecated fu-btn-text will be removed in next versions. Use `fuButton` instead.
*/
class TextButtonDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.variant = 'regular';
this.iconButton = false;
this.rounded = false;
this.raised = false;
this.compact = false;
}
ngOnInit() {
this.setInitialStyles();
}
setInitialStyles() {
this.renderer.addClass(this.el.nativeElement, 'fu-btn');
this.renderer.addClass(this.el.nativeElement, 'fu-btn-text');
this.renderer.addClass(this.el.nativeElement, `fu-btn-${this.variant}`);
if (this.iconButton) {
this.renderer.setAttribute(this.el.nativeElement, 'icon', 'true');
}
if (this.rounded) {
this.renderer.setAttribute(this.el.nativeElement, 'rounded', 'true');
}
if (this.raised) {
this.renderer.setAttribute(this.el.nativeElement, 'raised', 'true');
}
if (this.compact) {
this.renderer.setAttribute(this.el.nativeElement, 'compact', 'true');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TextButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.6", type: TextButtonDirective, isStandalone: true, selector: "[fu-btn-text]", inputs: { variant: "variant", iconButton: ["iconButton", "iconButton", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], raised: ["raised", "raised", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TextButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[fu-btn-text]',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { variant: [{
type: Input
}], iconButton: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], rounded: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], raised: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], compact: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
class GridColumnsDirective {
constructor(el) {
this.el = el;
this.columnSizes = input([]);
}
ngAfterViewInit() {
this.updateGridColumns();
}
onResize() {
this.updateGridColumns();
}
generateColumns(count) {
if (this.columnSizes()) {
const columnsCount = this.columnSizes().length;
if (columnsCount !== count) {
console.warn(`Incorect amount of Column sizes ${columnsCount}/${count} provided!`);
}
return this.columnSizes().join(' ');
}
return Array(count).fill('1fr').join(' ');
}
updateGridColumns() {
const childrenCount = this.el.nativeElement.children.length;
const dataGrid = this.el.nativeElement.closest('#fusion-datagrid');
const columns = this.generateColumns(childrenCount);
if (dataGrid) {
dataGrid.style.setProperty('--grid-columns', columns);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridColumnsDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: GridColumnsDirective, isStandalone: false, selector: "[gridColumns]", inputs: { columnSizes: { classPropertyName: "columnSizes", publicName: "columnSizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridColumnsDirective, decorators: [{
type: Directive,
args: [{
selector: '[gridColumns]',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onResize: [{
type: HostListener,
args: ['window:resize']
}] } });
let KeyMappingPipe$1 = class KeyMappingPipe {
transform(value) {
if (!value || typeof value !== 'object') {
return value;
}
const mappedObject = {};
Object.keys(value).forEach((key) => {
mappedObject[key] = key;
});
return mappedObject;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe, isStandalone: false, name: "keyMapping" }); }
};
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe$1, decorators: [{
type: Pipe,
args: [{
name: 'keyMapping',
standalone: false
}]
}] });
class DataGridComponent {
constructor(sortService, paginationService) {
this.sortService = sortService;
this.paginationService = paginationService;
/**
* Table data - array of objects.
* [totalCount] required with server side pagination.
*/
this.dataSource = [];
/**
* String key which will be used to store pageSize and currentPage in local storage for each table.
*/
this.localStorageKey = 'data';
/**
* Initial page size for paginator.
*/
this.pageSize = 5;
/**
* Page size optionsfor paginator.
*/
this.pageSizeOptions = [5, 10, 15];
/**
* Shows spinner and overlay when new data is being loaded.
* Usable only with server pagination when totalCount is provided.
*/
this.dataLoading = false;
/**
* Makes row expandable on click.
*/
this.expandable = false;
/**
* Enables filter for dataSource.
* Usable only if not server side pagination.
*/
this.filter = false;
/**
* Shows paginator.
*/
this.paginator = false;
/**
* Highlights row on hover.
*/
this.hoverable = true;
/**
* Darker background for each odd row.
*/
this.striped = true;
/**
* Sets paginator to first page on init.
*/
this.firstPageOnInit = false;
/**
* Renders empty container above paginator.
*/
this.renderNewAddRow = false;
/**
* Callback to invoke when a row is clicked.
* Emits selected row data.
*/
this.rowSelect = new EventEmitter();
this.onSort = new EventEmitter();
this.sortedData = [...this.dataSource];
this.sortDirection = 'asc';
this.sortKey = '';
this.filteredData = [];
this.filterText = '';
this.currentPage = 1;
this.paginatedData = [];
this.expandedRowIndex = null;
this.serverPagination = signal(false);
this.expandIndex = model(null);
this.initLoad = true;
this.originalOrder = (a, b) => {
const keys = Object.keys(this.dataSource);
return keys.indexOf(a.key) - keys.indexOf(b.key);
};
effect(() => {
if (!this.serverPagination()) {
this.sortData(this.sortService.sortKey());
}
else if (this.sortService.sortKey()) {
this.onSort.emit({
sortKey: this.sortService.sortKey(),
sortDirection: this.sortService.sortDirection(),
});
}
});
this.subscription = this.paginationService.firstPage$
.pipe(filter(() => this.currentPage !== 1))
.subscribe(() => {
this.currentPage = 1;
window.localStorage.setItem(`fu-grid-${this.localStorageKey}-currentPage`, this.currentPage.toString());
this.paginationService.initPagination(this.currentPage, this.pageSize);
});
}
ngOnChanges(changes) {
if (changes['localStorageKey']) {
const searchText = window.localStorage.getItem(`fu-grid-${this.localStorageKey}-searchText`);
if (searchText) {
this.filterText = searchText;
}
this.sortService.getLocalStorageKey(this.localStorageKey);
this.pageSize = JSON.parse(window.localStorage.getItem(`fu-grid-${this.localStorageKey}-pageSize`) || this.pageSizeOptions[0].toString());
if (this.firstPageOnInit) {
this.paginationService.initPagination(1, this.pageSize);
}
else {
this.currentPage = JSON.parse(window.localStorage.getItem(`fu-grid-${this.localStorageKey}-currentPage`) || '1');
this.paginationService.initPagination(this.currentPage, this.pageSize);
}
}
if (changes['totalCount']) {
this.serverPagination.set(true);
}
if (changes['dataSource']) {
if (!this.serverPagination()) {
if (!this.initLoad) {
this.sortData(this.sortService.sortKey());
}
this.filteredData = [...this.dataSource];
this.sortedData = [...this.filteredData];
}
this.sortService.getCellKeys(this.dataSource[0] || {});
this.updatePagination();
}
}
ngAfterContentInit() {
this.sortService.clear();
}
sortData(key) {
this.sortKey = key;
const sortDirection = this.sortService.sortDirection();
this.sortedData.sort((a, b) => {
if (a[key] < b[key]) {
return sortDirection === 'asc' ? -1 : 1;
}
else if (a[key] > b[key]) {
return sortDirection === 'asc' ? 1 : -1;
}
return 0;
});
this.addSortClass(key);
if (!this.initLoad) {
this.currentPage = 1;
window.localStorage.setItem(`fu-grid-${this.localStorageKey}-currentPage`, this.currentPage.toString());
}
this.initLoad = false;
if (this.filterText !== '') {
this.filterData();
}
else {
this.updatePagination();
}
}
addSortClass(key) {
const sortDirection = this.sortService.sortDirection();
const element = document.querySelector(`[data-sorted="${key}"]`);
document
.querySelectorAll('[data-sorted]')
.forEach(th => th.classList.remove('sort-asc', 'sort-desc'));
if (element) {
element.classList.add(sortDirection === 'asc' ? 'sort-asc' : 'sort-desc');
}
}
filterData(changes = false) {
if (this.filterText.trim() === '') {
this.filteredData = [...this.sortedData];
}
else {
window.localStorage.setItem(`fu-grid-${this.localStorageKey}-searchText`, this.filterText);
this.filteredData = this.sortedData.filter((item) => Object.values(item).some((value) => {
if (typeof value !== 'string' && typeof value !== 'number') {
return;
}
return value
.toString()
.toLowerCase()
.includes(this.filterText.toLowerCase());
}));
}
if (changes) {
this.currentPage = 1;
window.localStorage.setItem(`fu-grid-${this.localStorageKey}-currentPage`, this.currentPage.toString());
}
this.updatePagination(true);
}
resetFilter() {
this.filterText = '';
window.localStorage.removeItem(`fu-grid-${this.localStorageKey}-searchText`);
this.filterData(true);
}
serverSidePagination() {
this.paginatedData = this.dataSource;
}
updatePagination(isFiltering = false) {
this.expandedRowIndex = null;
this.expandIndex.set(null);
if (this.serverPagination()) {
return this.serverSidePagination();
}
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
if (isFiltering) {
this.paginatedData = [...this.filteredData].slice(start, end);
}
else {
this.paginatedData = this.sortedData.slice(start, end);
}
}
goToPage(page) {
if (page < 1 || page > this.totalPages()) {
return;
}
this.currentPage = page;
window.localStorage.setItem(`fu-grid-${this.localStorageKey}-currentPage`, this.currentPage.toString());
this.paginationService.setPage(page, this.pageSize);
this.updatePagination();
}
totalPages() {
return Math.ceil(this.totalItemCount() / this.pageSize);
}
getPageStart() {
return (this.currentPage - 1) * this.pageSize + 1;
}
getPageEnd() {
return Math.min(this.currentPage * this.pageSize, this.totalItemCount());
}
changePageSize(event) {
this.pageSize = Number(event.target.value);
this.currentPage = 1;
this.paginationService.setPageSize(this.pageSize);
// this.updatePagination();
if (this.filterText !== '') {
this.filterData();
}
else {
this.updatePagination();
}
window.localStorage.setItem(`fu-grid-${this.localStorageKey}-currentPage`, this.currentPage.toString());
window.localStorage.setItem(`fu-grid-${this.localStorageKey}-pageSize`, this.pageSize.toString());
}
totalItemCount() {
return this.totalCount || this.filteredData.length;
}
rowClick(row, index = 0) {
if (this.expandable) {
if (this.expandedRowIndex === index) {
this.expandedRowIndex = null;
}
else {
this.expandedRowIndex = index;
}
return;
}
this.rowSelect.emit(row);
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataGridComponent, deps: [{ token: DataSortingService }, { token: PaginationService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: DataGridComponent, isStandalone: false, selector: "fu-data-grid", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: true, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: false, isRequired: true, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: false, isRequired: false, transformFunction: null }, columnSizes: { classPropertyName: "columnSizes", publicName: "columnSizes", isSignal: false, isRequired: false, transformFunction: null }, dataLoading: { classPropertyName: "dataLoading", publicName: "dataLoading", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, firstPageOnInit: { classPropertyName: "firstPageOnInit", publicName: "firstPageOnInit", isSignal: false, isRequired: false, transformFunction: null }, renderNewAddRow: { classPropertyName: "renderNewAddRow", publicName: "renderNewAddRow", isSignal: false, isRequired: false, transformFunction: null }, expandIndex: { classPropertyName: "expandIndex", publicName: "expandIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelect: "rowSelect", onSort: "onSort", expandIndex: "expandIndexChange" }, providers: [DataSortingService], queries: [{ propertyName: "captionTemplate", first: true, predicate: ["caption"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: GridHeaderTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "bodyTemplate", first: true, predicate: GridBodyTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "expandTemplate", first: true, predicate: GridExpandTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: ["noDataRow"], descendants: true }, { propertyName: "addButtonTemplate", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "addNewRowTemplate", first: true, predicate: ["addNewRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"fusion-datagrid\" class=\"fu-data-grid-wrapper\">\r\n @if (filter) {\r\n <div class=\"fu-data-grid-filter\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"filterText\"\r\n (input)=\"filterData(true)\"\r\n placeholder=\"Search...\"\r\n />\r\n @if (!!filterText) {\r\n <div (click)=\"resetFilter()\">\r\n <fu-icon size=\"20px\" iconName=\"cancel\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"fu-data-grid-container\">\r\n <div class=\"fu-data-grid-header\">\r\n <div class=\"fu-head-row\" gridColumns [columnSizes]=\"columnSizes\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate || defaultHeaderTemplate;\r\n context: { $implicit: dataSource, keys: dataSource[0] | keyMapping }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n <div class=\"fu-data-grid-body\">\r\n <div *ngIf=\"dataLoading\" class=\"fu-data-grid-spinner-overlay\">\r\n <div class=\"fu-spinner\"></div>\r\n </div>\r\n\r\n @for (row of paginatedData; track $index) {\r\n <div\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{ hoverable, striped }\"\r\n [style.cursor]=\"\r\n expandable || rowSelect.observed ? 'pointer' : 'default'\r\n \"\r\n (click)=\"rowClick(row, $index)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate || defaultBodyTemplate;\r\n context: { $implicit: row, index: $index, keys: row | keyMapping }\r\n \"\r\n />\r\n\r\n @if (\r\n (expandable && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <div class=\"fu-expanded-row\" (click)=\"$event.stopPropagation()\">\r\n <div>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"footerTemplate; context: { $implicit: paginatedData }\"\r\n />\r\n\r\n @if (paginatedData.length <= 0 && !dataLoading) {\r\n <ng-container *ngTemplateOutlet=\"noDataTemplate\" />\r\n }\r\n\r\n @if (renderNewAddRow) {\r\n <ng-container *ngTemplateOutlet=\"addNewRowTemplate\" />\r\n }\r\n\r\n @if (paginator) {\r\n <ng-container\r\n *ngTemplateOutlet=\"defaultPaginator; context: { $implicit: sortData }\"\r\n />\r\n }\r\n</div>\r\n\r\n<ng-template #defaultHeaderTemplate let-data>\r\n @for (header of data[0] | keyvalue: originalOrder; track $index) {\r\n <fu-head-row-cell\r\n [cellDef]=\"$any(header.key)\"\r\n [sortKey]=\"$any(header.key)\"\r\n />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultBodyTemplate let-rows>\r\n @for (row of rows | keyvalue: originalOrder; track $index) {\r\n <fu-body-row-cell [cellValue]=\"$any(row.value)\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultPaginator let-data>\r\n <div class=\"fu-data-grid-paginator\">\r\n <div class=\"fu-grid-add-button\">\r\n <ng-container *ngTemplateOutlet=\"addButtonTemplate\" />\r\n </div>\r\n\r\n <div class=\"fu-paginator-page-select\">\r\n <span>Page size:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n <option\r\n *ngFor=\"let size of pageSizeOptions\"\r\n [value]=\"size\"\r\n [selected]=\"size === pageSize\"\r\n >\r\n {{ size }}\r\n </option>\r\n </select>\r\n </div>\r\n <div class=\"fu-paginator-controls\">\r\n <div>\r\n {{ getPageStart() }} - {{ getPageEnd() }} of {{ totalItemCount() }}\r\n </div>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage - 1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"arrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage + 1)\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"arrowRight\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(totalPages())\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"doubleArrowRight\" />\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["html{--fu-grid-fg-color: #232534;--fu-grid-bg-color: #1e1f2b;--fu-grid-hover-color: #12121240;--fu-grid-striped-color: #22232e;--fu-grid-border-color: #4b444d;--fu-grid-text-color: #ffffff;--fu-grid-cell-color: #bab9b9;--fu-filter-input-color: #ccc;--fu-grid-cell-edit-input: #fff;--fu-grid-shape: 4px}.fu-data-grid-wrapper{border-radius:var(--fu-grid-shape);box-shadow:0 2px 4px #00000080;background-color:var(--fu-grid-bg-color);color:var(--fu-grid-text-color);font-family:Roboto,sans-serif;font-size:14px}.fu-data-grid-container{width:100%}.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:flex;justify-content:space-between;flex-wrap:wrap}.fu-data-grid-container .fu-data-grid-header .fu-head-row>*{flex:1 1 auto}}.fu-data-grid-container .fu-data-grid-body{position:relative}.fu-data-grid-container .fu-data-grid-body .fu-body-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color);align-items:center}.fu-data-grid-container .fu-data-grid-body .fu-body-row.striped:nth-child(2n){background-color:var(--fu-grid-striped-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row.hoverable:hover{background-color:var(--fu-grid-hover-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:repeat(2,1fr)}.fu-data-grid-container .fu-data-grid-body .fu-body-row :nth-child(odd):last-child{grid-column:span 2}.fu-data-grid-container .fu-data-grid-body .fu-body-row [data-actions]{grid-column:1/-1;margin:8px 0}}@media (max-width: 600px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:1fr;border-bottom:1px solid var(--fu-grid-border-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row>:nth-child(odd):last-child{grid-column:span 1}}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row{grid-column:1/-1;border-top:1px solid rgba(128,128,128,.1);padding:12px 16px}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row>div{cursor:default}.fu-data-grid-paginator{display:flex;justify-content:flex-end;padding:16px;position:relative}.fu-data-grid-paginator .fu-page-size-select{background-color:var(--fu-grid-fg-color);color:var(--fu-grid-cell-edit-input);padding:4px;border:1px solid var(--fu-grid-border-color)}@media (max-width: 600px){.fu-data-grid-paginator{gap:12px;flex-direction:column;padding:12px 16px}}.fu-data-grid-paginator .fu-paginator-page-select{display:flex;justify-content:flex-end;align-items:center;margin-right:12px;font-size:14px}@media (max-width: 600px){.fu-data-grid-paginator .fu-paginator-page-select{margin-right:0}}.fu-data-grid-paginator .fu-paginator-page-select span{margin-right:8px}.fu-data-grid-paginator .fu-paginator-controls{display:flex;justify-content:flex-end;align-items:center;gap:8px}.fu-grid-add-button{position:absolute;left:10px;top:10px}.fu-data-grid-filter{position:relative}.fu-data-grid-filter input{box-sizing:border-box;background-color:var(--fu-grid-fg-color);color:var(--fu-filter-input-color);width:calc(100% - 32px);padding:10px 42px 10px 8px;margin:16px;outline:none;border:none}.fu-data-grid-filter div{position:absolute;display:flex;justify-content:center;align-items:center;width:24px;height:24px;background-color:var(--fu-grid-fg-color);top:22px;right:24px;cursor:pointer;transition:.1s ease-in-out}.fu-data-grid-filter div:hover{background-color:var(--fu-grid-hover-color)}.fu-data-grid-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#78787880;display:flex;justify-content:center;align-items:center;z-index:1000}.fu-data-grid-spinner-overlay .fu-spinner{border:10px solid var(--fu-grid-bg-color);border-top:10px solid #3498db;border-radius:50%;width:30px;height:30px;animation:spin 2s linear infinite;margin:5px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "directive", type: TextButtonDirective, selector: "[fu-btn-text]", inputs: ["variant", "iconButton", "rounded", "raised", "compact"] }, { kind: "directive", type: GridColumnsDirective, selector: "[gridColumns]", inputs: ["columnSizes"] }, { kind: "component", type: BodyRowCellComponent, selector: "fu-body-row-cell", inputs: ["cellValue", "editKey", "editCellValue"], outputs: ["editCellValueChange"] }, { kind: "component", type: HeadRowCellComponent, selector: "fu-head-row-cell", inputs: ["cellDef", "sortKey"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: KeyMappingPipe$1, name: "keyMapping" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataGridComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-data-grid', providers: [DataSortingService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div id=\"fusion-datagrid\" class=\"fu-data-grid-wrapper\">\r\n @if (filter) {\r\n <div class=\"fu-data-grid-filter\">\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"filterText\"\r\n (input)=\"filterData(true)\"\r\n placeholder=\"Search...\"\r\n />\r\n @if (!!filterText) {\r\n <div (click)=\"resetFilter()\">\r\n <fu-icon size=\"20px\" iconName=\"cancel\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"fu-data-grid-container\">\r\n <div class=\"fu-data-grid-header\">\r\n <div class=\"fu-head-row\" gridColumns [columnSizes]=\"columnSizes\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate || defaultHeaderTemplate;\r\n context: { $implicit: dataSource, keys: dataSource[0] | keyMapping }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n <div class=\"fu-data-grid-body\">\r\n <div *ngIf=\"dataLoading\" class=\"fu-data-grid-spinner-overlay\">\r\n <div class=\"fu-spinner\"></div>\r\n </div>\r\n\r\n @for (row of paginatedData; track $index) {\r\n <div\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{ hoverable, striped }\"\r\n [style.cursor]=\"\r\n expandable || rowSelect.observed ? 'pointer' : 'default'\r\n \"\r\n (click)=\"rowClick(row, $index)\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate || defaultBodyTemplate;\r\n context: { $implicit: row, index: $index, keys: row | keyMapping }\r\n \"\r\n />\r\n\r\n @if (\r\n (expandable && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <div class=\"fu-expanded-row\" (click)=\"$event.stopPropagation()\">\r\n <div>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"footerTemplate; context: { $implicit: paginatedData }\"\r\n />\r\n\r\n @if (paginatedData.length <= 0 && !dataLoading) {\r\n <ng-container *ngTemplateOutlet=\"noDataTemplate\" />\r\n }\r\n\r\n @if (renderNewAddRow) {\r\n <ng-container *ngTemplateOutlet=\"addNewRowTemplate\" />\r\n }\r\n\r\n @if (paginator) {\r\n <ng-container\r\n *ngTemplateOutlet=\"defaultPaginator; context: { $implicit: sortData }\"\r\n />\r\n }\r\n</div>\r\n\r\n<ng-template #defaultHeaderTemplate let-data>\r\n @for (header of data[0] | keyvalue: originalOrder; track $index) {\r\n <fu-head-row-cell\r\n [cellDef]=\"$any(header.key)\"\r\n [sortKey]=\"$any(header.key)\"\r\n />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultBodyTemplate let-rows>\r\n @for (row of rows | keyvalue: originalOrder; track $index) {\r\n <fu-body-row-cell [cellValue]=\"$any(row.value)\" />\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultPaginator let-data>\r\n <div class=\"fu-data-grid-paginator\">\r\n <div class=\"fu-grid-add-button\">\r\n <ng-container *ngTemplateOutlet=\"addButtonTemplate\" />\r\n </div>\r\n\r\n <div class=\"fu-paginator-page-select\">\r\n <span>Page size:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n <option\r\n *ngFor=\"let size of pageSizeOptions\"\r\n [value]=\"size\"\r\n [selected]=\"size === pageSize\"\r\n >\r\n {{ size }}\r\n </option>\r\n </select>\r\n </div>\r\n <div class=\"fu-paginator-controls\">\r\n <div>\r\n {{ getPageStart() }} - {{ getPageEnd() }} of {{ totalItemCount() }}\r\n </div>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage - 1)\"\r\n [disabled]=\"currentPage === 1\"\r\n >\r\n <fu-icon iconName=\"arrowLeft\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(currentPage + 1)\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"arrowRight\" />\r\n </button>\r\n <button\r\n fu-btn-text\r\n iconButton\r\n (click)=\"goToPage(totalPages())\"\r\n [disabled]=\"currentPage >= totalPages()\"\r\n >\r\n <fu-icon iconName=\"doubleArrowRight\" />\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["html{--fu-grid-fg-color: #232534;--fu-grid-bg-color: #1e1f2b;--fu-grid-hover-color: #12121240;--fu-grid-striped-color: #22232e;--fu-grid-border-color: #4b444d;--fu-grid-text-color: #ffffff;--fu-grid-cell-color: #bab9b9;--fu-filter-input-color: #ccc;--fu-grid-cell-edit-input: #fff;--fu-grid-shape: 4px}.fu-data-grid-wrapper{border-radius:var(--fu-grid-shape);box-shadow:0 2px 4px #00000080;background-color:var(--fu-grid-bg-color);color:var(--fu-grid-text-color);font-family:Roboto,sans-serif;font-size:14px}.fu-data-grid-container{width:100%}.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-header .fu-head-row{display:flex;justify-content:space-between;flex-wrap:wrap}.fu-data-grid-container .fu-data-grid-header .fu-head-row>*{flex:1 1 auto}}.fu-data-grid-container .fu-data-grid-body{position:relative}.fu-data-grid-container .fu-data-grid-body .fu-body-row{display:grid;grid-template-columns:var(--grid-columns);border-bottom:1px solid var(--fu-grid-border-color);align-items:center}.fu-data-grid-container .fu-data-grid-body .fu-body-row.striped:nth-child(2n){background-color:var(--fu-grid-striped-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row.hoverable:hover{background-color:var(--fu-grid-hover-color)}@media (max-width: 900px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:repeat(2,1fr)}.fu-data-grid-container .fu-data-grid-body .fu-body-row :nth-child(odd):last-child{grid-column:span 2}.fu-data-grid-container .fu-data-grid-body .fu-body-row [data-actions]{grid-column:1/-1;margin:8px 0}}@media (max-width: 600px){.fu-data-grid-container .fu-data-grid-body .fu-body-row{grid-template-columns:1fr;border-bottom:1px solid var(--fu-grid-border-color)}.fu-data-grid-container .fu-data-grid-body .fu-body-row>:nth-child(odd):last-child{grid-column:span 1}}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row{grid-column:1/-1;border-top:1px solid rgba(128,128,128,.1);padding:12px 16px}.fu-data-grid-container .fu-data-grid-body .fu-body-row .fu-expanded-row>div{cursor:default}.fu-data-grid-paginator{display:flex;justify-content:flex-end;padding:16px;position:relative}.fu-data-grid-paginator .fu-page-size-select{background-color:var(--fu-grid-fg-color);color:var(--fu-grid-cell-edit-input);padding:4px;border:1px solid var(--fu-grid-border-color)}@media (max-width: 600px){.fu-data-grid-paginator{gap:12px;flex-direction:column;padding:12px 16px}}.fu-data-grid-paginator .fu-paginator-page-select{display:flex;justify-content:flex-end;align-items:center;margin-right:12px;font-size:14px}@media (max-width: 600px){.fu-data-grid-paginator .fu-paginator-page-select{margin-right:0}}.fu-data-grid-paginator .fu-paginator-page-select span{margin-right:8px}.fu-data-grid-paginator .fu-paginator-controls{display:flex;justify-content:flex-end;align-items:center;gap:8px}.fu-grid-add-button{position:absolute;left:10px;top:10px}.fu-data-grid-filter{position:relative}.fu-data-grid-filter input{box-sizing:border-box;background-color:var(--fu-grid-fg-color);color:var(--fu-filter-input-color);width:calc(100% - 32px);padding:10px 42px 10px 8px;margin:16px;outline:none;border:none}.fu-data-grid-filter div{position:absolute;display:flex;justify-content:center;align-items:center;width:24px;height:24px;background-color:var(--fu-grid-fg-color);top:22px;right:24px;cursor:pointer;transition:.1s ease-in-out}.fu-data-grid-filter div:hover{background-color:var(--fu-grid-hover-color)}.fu-data-grid-spinner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#78787880;display:flex;justify-content:center;align-items:center;z-index:1000}.fu-data-grid-spinner-overlay .fu-spinner{border:10px solid var(--fu-grid-bg-color);border-top:10px solid #3498db;border-radius:50%;width:30px;height:30px;animation:spin 2s linear infinite;margin:5px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
}], ctorParameters: () => [{ type: DataSortingService }, { type: PaginationService }], propDecorators: { dataSource: [{
type: Input,
args: [{ required: true }]
}], localStorageKey: [{
type: Input,
args: [{ required: true }]
}], totalCount: [{
type: Input
}], pageSize: [{
type: Input
}], pageSizeOptions: [{
type: Input
}], columnSizes: [{
type: Input
}], dataLoading: [{
type: Input
}], expandable: [{
type: Input
}], filter: [{
type: Input
}], paginator: [{
type: Input
}], hoverable: [{
type: Input
}], striped: [{
type: Input
}], firstPageOnInit: [{
type: Input
}], renderNewAddRow: [{
type: Input
}], captionTemplate: [{
type: ContentChild,
args: ['caption']
}], headerTemplate: [{
type: ContentChild,
args: [GridHeaderTemplateDirective, { read: TemplateRef }]
}], bodyTemplate: [{
type: ContentChild,
args: [GridBodyTemplateDirective, { read: TemplateRef }]
}], expandTemplate: [{
type: ContentChild,
args: [GridExpandTemplateDirective, { read: TemplateRef }]
}], footerTemplate: [{
type: ContentChild,
args: ['footer']
}], noDataTemplate: [{
type: ContentChild,
args: ['noDataRow']
}], addButtonTemplate: [{
type: ContentChild,
args: ['addButton']
}], addNewRowTemplate: [{
type: ContentChild,
args: ['addNewRow']
}], rowSelect: [{
type: Output
}], onSort: [{
type: Output
}] } });
class DataGridPaginator {
}
class IconModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: IconModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconModule, providers: [IconRegistryService], imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: IconModule, decorators: [{
type: NgModule,
args: [{
declarations: [IconComponent],
imports: [CommonModule],
providers: [IconRegistryService],
exports: [IconComponent],
}]
}] });
/**
* @deprecated fu-btn-filled will be removed in next versions. Use `fuButton` instead.
*/
class FilledButtonDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.variant = 'regular';
this.iconButton = false;
this.rounded = false;
this.compact = false;
}
ngOnInit() {
this.setInitialStyles();
}
setInitialStyles() {
this.renderer.addClass(this.el.nativeElement, 'fu-btn');
this.renderer.addClass(this.el.nativeElement, 'fu-btn-filled');
this.renderer.addClass(this.el.nativeElement, `fu-btn-${this.variant}`);
if (this.iconButton) {
this.renderer.setAttribute(this.el.nativeElement, 'icon', 'true');
}
if (this.rounded) {
this.renderer.setAttribute(this.el.nativeElement, 'rounded', 'true');
}
if (this.compact) {
this.renderer.setAttribute(this.el.nativeElement, 'compact', 'true');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FilledButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.6", type: FilledButtonDirective, isStandalone: true, selector: "[fu-btn-filled]", inputs: { variant: "variant", iconButton: ["iconButton", "iconButton", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FilledButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[fu-btn-filled]',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { variant: [{
type: Input
}], iconButton: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], rounded: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], compact: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
class ButtonDirective {
constructor() {
this.variant = input('filled');
this.severity = input('primary');
this.iconButton = input(false, {
transform: booleanAttribute,
});
this.rounded = input(false, {
transform: booleanAttribute,
});
this.compact = input(false, {
transform: booleanAttribute,
});
this.raised = input(false, {
transform: booleanAttribute,
});
this.el = inject(ElementRef);
this.renderer = inject(Renderer2);
}
ngOnInit() {
this.setInitialStyles();
}
setInitialStyles() {
this.renderer.addClass(this.el.nativeElement, 'fu-btn');
this.renderer.addClass(this.el.nativeElement, `fu-btn-${this.variant()}`);
this.renderer.addClass(this.el.nativeElement, `fu-btn-${this.severity()}`);
if (this.iconButton()) {
this.renderer.setAttribute(this.el.nativeElement, 'icon', 'true');
}
if (this.rounded()) {
this.renderer.setAttribute(this.el.nativeElement, 'rounded', 'true');
}
if (this.compact()) {
this.renderer.setAttribute(this.el.nativeElement, 'compact', 'true');
}
if (this.raised()) {
this.renderer.setAttribute(this.el.nativeElement, 'raised', 'true');
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: ButtonDirective, isStandalone: true, selector: "[fuButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, iconButton: { classPropertyName: "iconButton", publicName: "iconButton", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonDirective, decorators: [{
type: Directive,
args: [{
selector: '[fuButton]',
}]
}] });
class ButtonModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, imports: [OutlinedButtonDirective,
FilledButtonDirective,
TextButtonDirective,
ButtonDirective,
CommonModule], exports: [OutlinedButtonDirective,
FilledButtonDirective,
TextButtonDirective,
ButtonDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ButtonModule, decorators: [{
type: NgModule,
args: [{
imports: [
OutlinedButtonDirective,
FilledButtonDirective,
TextButtonDirective,
ButtonDirective,
CommonModule,
],
exports: [
OutlinedButtonDirective,
FilledButtonDirective,
TextButtonDirective,
ButtonDirective,
],
}]
}] });
/**
* @deprecated This module will be removed in version X. Use `DataTableModule` instead.
*/
console.warn('DataGridModule is deprecated and will be removed in the next version. Please use DataTableModule instead.');
class DataGridModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: DataGridModule, declarations: [SortColumnDirective,
GridColumnsDirective,
DataGridComponent,
BodyRowCellComponent,
HeadRowCellComponent,
GridHeaderTemplateDirective,
GridExpandTemplateDirective,
GridBodyTemplateDirective,
RowActionsComponent,
KeyMappingPipe$1], imports: [CommonModule, FormsModule, IconModule, ButtonModule], exports: [DataGridComponent,
HeadRowCellComponent,
BodyRowCellComponent,
RowActionsComponent,
GridHeaderTemplateDirective,
GridExpandTemplateDirective,
GridBodyTemplateDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataGridModule, providers: [{ provide: DataGridPaginator, useExisting: PaginationService }], imports: [CommonModule, FormsModule, IconModule, ButtonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataGridModule, decorators: [{
type: NgModule,
args: [{
declarations: [
SortColumnDirective,
GridColumnsDirective,
DataGridComponent,
BodyRowCellComponent,
HeadRowCellComponent,
GridHeaderTemplateDirective,
GridExpandTemplateDirective,
GridBodyTemplateDirective,
RowActionsComponent,
KeyMappingPipe$1,
],
imports: [CommonModule, FormsModule, IconModule, ButtonModule],
exports: [
DataGridComponent,
HeadRowCellComponent,
BodyRowCellComponent,
RowActionsComponent,
GridHeaderTemplateDirective,
GridExpandTemplateDirective,
GridBodyTemplateDirective,
],
providers: [{ provide: DataGridPaginator, useExisting: PaginationService }],
}]
}] });
class TableUtilityService {
constructor() {
this.headerTexts = [];
this.headerCount = signal(0);
this.isLoading = signal(false);
this.sortCellIndex = signal(-1);
this.expanded = signal(false);
}
setSortCellIndex(index) {
this.sortCellIndex.set(index);
}
resetSortCellIndex() {
this.sortCellIndex.set(-1);
}
setHeaderText(index, text) {
this.headerTexts[index] = text;
}
getHeaderText(index) {
return this.headerTexts[index];
}
clearHeaderText() {
this.headerTexts = [];
}
setColumnCount() {
this.headerCount.update(count => count + 1);
}
resetColumnCount() {
this.headerCount.set(0);
}
setIsLoading(loading) {
this.isLoading.set(loading);
}
getExpanded(expanded) {
this.expanded.set(expanded);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableUtilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableUtilityService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableUtilityService, decorators: [{
type: Injectable
}] });
const initialState = {
currentPage: 0,
pageSize: 10,
sortKey: '',
sortDirection: '',
searchText: '',
};
class TableStorageService {
constructor() {
this.storageState = signal(initialState);
this.localStorageKey = signal('');
this.currentPage = computed(() => this.storageState().currentPage);
this.pageSize = computed(() => this.storageState().pageSize);
this.sortKey = computed(() => this.storageState().sortKey);
this.sortDirection = computed(() => this.storageState().sortDirection);
this.searchText = computed(() => this.storageState().searchText);
this.storageStateEffect = effect(() => {
if (this.localStorageKey()) {
const state = this.storageState();
this.updateLocalStorage(state);
}
});
}
setCurrentPage(currentPage) {
this.storageState.update(state => ({
...state,
currentPage,
}));
}
setPageSize(pageSize) {
this.storageState.update(state => ({
...state,
pageSize,
}));
}
setSortKey(sortKey) {
this.storageState.update(state => ({
...state,
sortKey,
}));
}
setSortDirection(sortDirection) {
this.storageState.update(state => ({
...state,
sortDirection,
}));
}
setSearchText(searchText) {
this.storageState.update(state => ({
...state,
searchText,
}));
}
setLocalStorageKey(key) {
const storedValues = window.localStorage.getItem(key);
if (storedValues && key) {
this.storageState.set(JSON.parse(storedValues));
}
this.localStorageKey.set(key);
}
resetStorageKey() {
this.localStorageKey.set('');
}
resetState() {
this.storageState.set(initialState);
}
updateLocalStorage(state) {
window.localStorage.setItem(this.localStorageKey(), JSON.stringify(state));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableStorageService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableStorageService, decorators: [{
type: Injectable
}] });
class TableIntlService {
constructor() {
this.searchPlaceholder = signal('Search...');
this.pageSizeLabel = signal('Page size');
this.noRecordsText = signal('No records found');
this.noEntriesLabel = signal('No entries');
this.entriesLabel = (first, last, total) => `${first} to ${last} of ${total} entries`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableIntlService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableIntlService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class TableEditService {
constructor() {
this.editIndex = signal(null);
this.editValues = signal({});
this.savingIndex = signal(-1);
}
startEditing(rowIndex) {
this.editValues.set({});
this.editIndex.set(rowIndex);
}
stopEditing() {
this.editIndex.set(null);
}
updateEditValues(key, value) {
this.editValues.update(values => ({
...values,
[key]: value,
}));
}
resetEditValues() {
this.editValues.set({});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableEditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableEditService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableEditService, decorators: [{
type: Injectable
}] });
class TablePaginatorComponent {
constructor() {
this.pageSizeOptions = input([]);
this.quickPageJump = input(false);
this.dataLenght = input(0);
this.tableEditService = inject(TableEditService);
this.tableStorageService = inject(TableStorageService);
this.tableIntl = inject(TableIntlService);
this.pageSizeLabel = this.tableIntl.pageSizeLabel;
this.pageSize = this.tableStorageService.pageSize;
this.currentPage = this.tableStorageService.currentPage;
this.searchText = this.tableStorageService.searchText;
this.first = computed(() => this.currentPage() * this.pageSize() + 1);
this.last = computed(() => Math.min((this.currentPage() + 1) * this.pageSize(), this.dataLenght()));
this.totalPages = computed(() => Math.ceil(this.dataLenght() / this.pageSize()));
this.totalItems = computed(() => this.dataLenght());
this.noEntriesLabel = this.tableIntl.noEntriesLabel;
this.entriesLabel = computed(() => this.tableIntl.entriesLabel(this.first(), this.last(), this.totalItems()));
}
goToPage(page) {
if (page < 0 || page > this.totalPages()) {
return;
}
this.stopEditing();
this.tableStorageService.setCurrentPage(page);
}
changePageSize(event) {
const pageSize = Number(event.target.value);
this.tableStorageService.setCurrentPage(0);
this.tableStorageService.setPageSize(pageSize);
this.stopEditing();
}
jumpToPage(input) {
const previousValue = this.tableStorageService.currentPage() + 1;
const inputValue = input.value.trim();
const value = Number(inputValue);
const min = Number(input.min);
const max = Number(input.max);
if (isNaN(value) || inputValue !== value.toString()) {
input.value = previousValue.toString();
return;
}
if (value < min) {
input.value = min.toString();
this.tableStorageService.setCurrentPage(min - 1);
}
else if (value > max) {
input.value = max.toString();
this.tableStorageService.setCurrentPage(max - 1);
}
else {
this.tableStorageService.setCurrentPage(value - 1);
}
this.stopEditing();
}
adjustWidth(input) {
input.style.width = this.calculateWidth(input.value) + 'px';
}
calculateWidth(value) {
if (!value || value.toString().trim() === '') {
return 24;
}
const length = value.toString().length;
return length === 1 ? 24 : length === 2 ? 24 : 36;
}
stopEditing() {
if (this.tableEditService.editIndex() !== null) {
this.tableEditService.stopEditing();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TablePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TablePaginatorComponent, isStandalone: true, selector: "fu-table-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, quickPageJump: { classPropertyName: "quickPageJump", publicName: "quickPageJump", isSignal: true, isRequired: false, transformFunction: null }, dataLenght: { classPropertyName: "dataLenght", publicName: "dataLenght", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fu-table-paginator\">\r\n <div class=\"fu-paginator-page-select\">\r\n <div class=\"fu-item-count\">\r\n @if (totalItems() !== 0) {\r\n {{ entriesLabel() }}\r\n } @else {\r\n {{ noEntriesLabel() }}\r\n }\r\n </div>\r\n\r\n <div>\r\n <span>{{ pageSizeLabel() }}:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n @for (size of pageSizeOptions(); track $index) {\r\n <option [value]=\"size\" [selected]=\"size === pageSize()\">\r\n {{ size }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"fu-paginator-controls\">\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(0)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(currentPage() - 1)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"arrowLeft\" />\r\n </button>\r\n\r\n @if (quickPageJump()) {\r\n @if (totalPages() === 0) {\r\n <div class=\"fu-no-pages\">\r\n <span>-</span><span>/</span><span>-</span>\r\n </div>\r\n } @else {\r\n <div class=\"fu-jump-to-page\">\r\n <input\r\n #pageInput\r\n [min]=\"1\"\r\n [max]=\"totalPages()\"\r\n [value]=\"currentPage() + 1\"\r\n (input)=\"adjustWidth(pageInput)\"\r\n (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\r\n [style.width.px]=\"calculateWidth(pageInput.value)\"\r\n />\r\n <span>/</span>\r\n <span>{{ totalPages() }}</span>\r\n </div>\r\n }\r\n <!-- <div class=\"fu-jump-to-page\">\r\n <input\r\n #pageInput\r\n [min]=\"1\"\r\n [max]=\"totalPages()\"\r\n [value]=\"currentPage() + 1\"\r\n (input)=\"adjustWidth(pageInput)\"\r\n (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\r\n [style.width.px]=\"calculateWidth(pageInput.value)\"\r\n />\r\n <span>/</span>\r\n <span>{{ totalPages() }}</span>\r\n </div> -->\r\n }\r\n\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(currentPage() + 1)\"\r\n [disabled]=\"currentPage() + 1 >= totalPages()\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"arrowRight\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(totalPages() - 1)\"\r\n [disabled]=\"currentPage() + 1 >= totalPages()\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"doubleArrowRight\" />\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".fu-table-paginator{position:relative;display:grid;grid-template-columns:1fr max-content}@media (max-width: 900px){.fu-table-paginator{grid-template-columns:1fr}}.fu-table-paginator .fu-page-size-select{background-color:inherit;color:inherit;padding:4px;border:1px solid var(--fu-table-border-color)}.fu-table-paginator .fu-paginator-page-select{display:flex;justify-content:flex-end;align-items:center;margin-right:12px;font-size:14px}@media (max-width: 900px){.fu-table-paginator .fu-paginator-page-select{margin-right:0;margin-bottom:8px}}.fu-table-paginator .fu-paginator-page-select .fu-item-count{margin-right:auto}.fu-table-paginator .fu-paginator-page-select span{margin-right:8px}.fu-table-paginator .fu-paginator-controls{display:flex;justify-content:flex-end;align-items:center;gap:4px}.fu-jump-to-page{display:flex;justify-content:center;align-items:center;gap:4px;margin:0 8px}.fu-jump-to-page input{height:22px;text-align:center;background-color:inherit;color:inherit;border:1px solid var(--fu-quick-jump-border-color, var(--fu-primary-500));border-radius:4px}.fu-jump-to-page input:focus{outline:1px solid var(--fu-quick-jump-border-color, var(--fu-primary-500))}.fu-no-pages{display:flex;gap:10px;color:#4e4e4e;font-weight:700}.dark option{background-color:var(--fu-table-bg-color);color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: ButtonDirective, selector: "[fuButton]", inputs: ["variant", "severity", "iconButton", "rounded", "compact", "raised"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TablePaginatorComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-table-paginator', imports: [ButtonModule, IconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-paginator\">\r\n <div class=\"fu-paginator-page-select\">\r\n <div class=\"fu-item-count\">\r\n @if (totalItems() !== 0) {\r\n {{ entriesLabel() }}\r\n } @else {\r\n {{ noEntriesLabel() }}\r\n }\r\n </div>\r\n\r\n <div>\r\n <span>{{ pageSizeLabel() }}:</span>\r\n <select class=\"fu-page-size-select\" (change)=\"changePageSize($event)\">\r\n @for (size of pageSizeOptions(); track $index) {\r\n <option [value]=\"size\" [selected]=\"size === pageSize()\">\r\n {{ size }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"fu-paginator-controls\">\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(0)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"doubleArrowLeft\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(currentPage() - 1)\"\r\n [disabled]=\"currentPage() === 0\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"arrowLeft\" />\r\n </button>\r\n\r\n @if (quickPageJump()) {\r\n @if (totalPages() === 0) {\r\n <div class=\"fu-no-pages\">\r\n <span>-</span><span>/</span><span>-</span>\r\n </div>\r\n } @else {\r\n <div class=\"fu-jump-to-page\">\r\n <input\r\n #pageInput\r\n [min]=\"1\"\r\n [max]=\"totalPages()\"\r\n [value]=\"currentPage() + 1\"\r\n (input)=\"adjustWidth(pageInput)\"\r\n (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\r\n [style.width.px]=\"calculateWidth(pageInput.value)\"\r\n />\r\n <span>/</span>\r\n <span>{{ totalPages() }}</span>\r\n </div>\r\n }\r\n <!-- <div class=\"fu-jump-to-page\">\r\n <input\r\n #pageInput\r\n [min]=\"1\"\r\n [max]=\"totalPages()\"\r\n [value]=\"currentPage() + 1\"\r\n (input)=\"adjustWidth(pageInput)\"\r\n (change)=\"jumpToPage(pageInput)\"\r\n [disabled]=\"totalPages() === 0\"\r\n [style.width.px]=\"calculateWidth(pageInput.value)\"\r\n />\r\n <span>/</span>\r\n <span>{{ totalPages() }}</span>\r\n </div> -->\r\n }\r\n\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(currentPage() + 1)\"\r\n [disabled]=\"currentPage() + 1 >= totalPages()\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"arrowRight\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n (click)=\"goToPage(totalPages() - 1)\"\r\n [disabled]=\"currentPage() + 1 >= totalPages()\"\r\n >\r\n <fu-icon size=\"20px\" iconName=\"doubleArrowRight\" />\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".fu-table-paginator{position:relative;display:grid;grid-template-columns:1fr max-content}@media (max-width: 900px){.fu-table-paginator{grid-template-columns:1fr}}.fu-table-paginator .fu-page-size-select{background-color:inherit;color:inherit;padding:4px;border:1px solid var(--fu-table-border-color)}.fu-table-paginator .fu-paginator-page-select{display:flex;justify-content:flex-end;align-items:center;margin-right:12px;font-size:14px}@media (max-width: 900px){.fu-table-paginator .fu-paginator-page-select{margin-right:0;margin-bottom:8px}}.fu-table-paginator .fu-paginator-page-select .fu-item-count{margin-right:auto}.fu-table-paginator .fu-paginator-page-select span{margin-right:8px}.fu-table-paginator .fu-paginator-controls{display:flex;justify-content:flex-end;align-items:center;gap:4px}.fu-jump-to-page{display:flex;justify-content:center;align-items:center;gap:4px;margin:0 8px}.fu-jump-to-page input{height:22px;text-align:center;background-color:inherit;color:inherit;border:1px solid var(--fu-quick-jump-border-color, var(--fu-primary-500));border-radius:4px}.fu-jump-to-page input:focus{outline:1px solid var(--fu-quick-jump-border-color, var(--fu-primary-500))}.fu-no-pages{display:flex;gap:10px;color:#4e4e4e;font-weight:700}.dark option{background-color:var(--fu-table-bg-color);color:#fff}\n"] }]
}] });
class BodyTemplateDirective {
constructor() {
this.dataSource = input([], { alias: 'fuBodyTemplate' });
}
static ngTemplateContextGuard(dir, ctx) {
return true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BodyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: BodyTemplateDirective, isStandalone: true, selector: "[fuBodyTemplate]", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "fuBodyTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BodyTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[fuBodyTemplate]',
}]
}] });
class ExpandTemplateDirective {
constructor() {
this.dataSource = input([], { alias: 'fuExpandTemplate' });
}
static ngTemplateContextGuard(dir, ctx) {
return true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ExpandTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: ExpandTemplateDirective, isStandalone: true, selector: "[fuExpandTemplate]", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "fuExpandTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ExpandTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[fuExpandTemplate]',
}]
}] });
class HeaderTemplateDirective {
constructor() {
this.dataSource = input([], { alias: 'fuHeaderTemplate' });
}
static ngTemplateContextGuard(dir, ctx) {
return true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: HeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: HeaderTemplateDirective, isStandalone: true, selector: "[fuHeaderTemplate]", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "fuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[fuHeaderTemplate]',
}]
}] });
class KeyMappingPipe {
transform(value) {
if (!value || typeof value !== 'object') {
return value;
}
const mappedObject = {};
Object.keys(value).forEach(key => {
mappedObject[key] = key;
});
return mappedObject;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe, isStandalone: true, name: "keyMapping" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: KeyMappingPipe, decorators: [{
type: Pipe,
args: [{
name: 'keyMapping',
}]
}] });
class TbodyCellComponent {
constructor() {
this.cellValue = input(undefined);
this.editKey = input('');
this.headerText = signal('');
this.rowIndex = signal(-1);
this.cellValueType = computed(() => typeof this.cellValue());
this.isEditing = computed(() => this.rowIndex() === this.tableEditService.editIndex() && !!this.editKey());
this.tableStorageService = inject(TableStorageService);
this.tableUtilityService = inject(TableUtilityService);
this.tableEditService = inject(TableEditService);
this.elementRef = inject(ElementRef);
this.expanded = this.tableUtilityService.expanded;
this.isLoading = this.tableUtilityService.isLoading;
this.searchText = this.tableStorageService.searchText;
this.editIndex = this.tableEditService.editIndex;
this.savingIndex = this.tableEditService.savingIndex;
this.highLightedText = computed(() => this.highlightText());
this.sortCell = computed(() => this.tableUtilityService.sortCellIndex() === this.cellIndex());
this.cellIndex = signal(-2);
this.editSavingEffect = effect(() => {
if (this.savingIndex() > -1 && !this.isLoading() && this.isEditing()) {
this.tableEditService.savingIndex.set(-1);
this.tableEditService.stopEditing();
}
});
}
ngOnInit() {
const rowIndex = this.getRowIndex();
this.rowIndex.set(rowIndex);
const cellIndex = this.getCellIndex();
this.cellIndex.set(cellIndex);
this.headerText.set(this.tableUtilityService.getHeaderText(cellIndex) || '');
}
highlightText() {
const cellValue = this.cellValue();
const searchText = this.searchText();
if (!searchText || (!cellValue && cellValue !== 0)) {
return cellValue;
}
const cellValueStr = cellValue.toString();
const searchTerm = searchText.toString().toLowerCase();
const regex = new RegExp(`(${searchTerm})`, 'gi');
return cellValueStr.replace(regex, '<span class="fu-highlight">$1</span>');
}
onInputChange(value) {
this.tableEditService.updateEditValues(this.editKey(), value);
}
getCellIndex() {
const parent = this.elementRef.nativeElement.parentElement;
return Array.from(parent.children).indexOf(this.elementRef.nativeElement);
}
getRowIndex() {
const element = this.elementRef.nativeElement.parentElement;
const parent = element.parentElement;
if (!parent)
return -1;
const children = Array.from(parent.children);
return children.indexOf(element);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TbodyCellComponent, isStandalone: true, selector: "fu-tbody-cell", inputs: { cellValue: { classPropertyName: "cellValue", publicName: "cellValue", isSignal: true, isRequired: false, transformFunction: null }, editKey: { classPropertyName: "editKey", publicName: "editKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"cell\"", "class.sorting": "sortCell()", "class.loading": "isLoading()", "class.expanded": "!expanded()" } }, ngImport: i0, template: "<div>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if ((isLoading() && savingIndex() < 0) || savingIndex() === rowIndex()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n @if (cellValue() !== undefined) {\r\n @if (isEditing()) {\r\n @switch (cellValueType()) {\r\n @case ('string') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('number') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n type=\"number\"\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper\" [class.editing]=\"isEditing()\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n #editInput\r\n [id]=\"cellIndex()\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label [for]=\"cellIndex()\"></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (cellValueType()) {\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper fu-checkbox-disabled\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n disabled\r\n [checked]=\"cellValue()\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n @default {\r\n <span class=\"fu-cell-text\" [innerHTML]=\"highLightedText()\"></span>\r\n }\r\n }\r\n }\r\n } @else {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\"> <ng-content /></span>\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-tbody-cell{display:table-cell;text-align:left;vertical-align:middle;height:40px}fu-tbody-cell.expanded{border-bottom:1px solid var(--fu-table-border-color)}fu-tbody-cell.loading{pointer-events:none}fu-tbody-cell.sorting{background-color:var(--fu-table-sort-bg-color)}fu-tbody-cell>div{padding:0 8px}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-text-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell .fu-edit{margin-left:-4px}@media (max-width: 900px){fu-tbody-cell .fu-edit{margin-left:0}}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-text-color)}fu-tbody-cell .fu-cell-text{display:block;overflow:hidden;text-overflow:ellipsis}@media (max-width: 900px){fu-tbody-cell .fu-cell-text{margin-left:4px}fu-tbody-cell .fu-cell-text .fu-edit{margin-left:0}}fu-tbody-cell .fu-cell-text:has(svg){margin-left:2px}fu-tbody-cell .fu-header-text{display:none}@media (max-width: 900px){fu-tbody-cell{display:block;min-height:40px;height:auto;align-content:center}fu-tbody-cell div{display:grid;grid-template-columns:40% 1fr}fu-tbody-cell .fu-header-text{font-weight:700;text-transform:capitalize;display:flex;align-items:center;margin-right:12px}}.fu-skeleton-loader{display:block;height:16px;background:var(--fu-table-skeleton-color);position:relative;overflow:hidden;border-radius:4px;animation:fade 1.5s infinite ease-in-out}@media (max-width: 900px){.fu-skeleton-loader{height:20px;margin:3.6px 0}}@keyframes fade{0%,to{opacity:.5}50%{opacity:1}}.fu-highlight{background-color:var(--fu-table-highlight-bg-color);color:var(--fu-table-highlight-color);font-weight:700}.fu-checkbox-wrapper{--size: 24px;position:relative}.fu-checkbox-wrapper *,.fu-checkbox-wrapper *:before,.fu-checkbox-wrapper *:after{box-sizing:border-box}.fu-checkbox-wrapper .fu-input-checkbox{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.fu-checkbox-wrapper input:checked~svg{height:calc(var(--size) * .6)}.fu-checkbox-wrapper label:active:after{background-color:var(--fu-table-edit-input-bg-color)}.fu-checkbox-wrapper label{color:var(--fu-table-text-color);line-height:var(--size);cursor:pointer;position:relative}.fu-checkbox-wrapper label:after{content:\"\";height:var(--size);width:var(--size);margin-right:8px;float:left;border:1.5px solid var(--fu-table-border-color);border-radius:3px;transition:.15s all ease-out}.fu-checkbox-wrapper.editing label:after{border-color:var(--fu-table-text-color)}.fu-checkbox-wrapper svg{stroke:var(--fu-table-text-color);stroke-width:3px;height:0;width:calc(var(--size) * .6);position:absolute;left:calc(var(--size) * .21);top:calc(var(--size) * .2);stroke-dasharray:33}.fu-checkbox-disabled{pointer-events:none}@-webkit-keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}@keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyCellComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-tbody-cell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
'[attr.role]': '"cell"',
'[class.sorting]': 'sortCell()',
'[class.loading]': 'isLoading()',
'[class.expanded]': '!expanded()',
}, template: "<div>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if ((isLoading() && savingIndex() < 0) || savingIndex() === rowIndex()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n @if (cellValue() !== undefined) {\r\n @if (isEditing()) {\r\n @switch (cellValueType()) {\r\n @case ('string') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('number') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n type=\"number\"\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper\" [class.editing]=\"isEditing()\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n #editInput\r\n [id]=\"cellIndex()\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label [for]=\"cellIndex()\"></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (cellValueType()) {\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper fu-checkbox-disabled\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n disabled\r\n [checked]=\"cellValue()\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n @default {\r\n <span class=\"fu-cell-text\" [innerHTML]=\"highLightedText()\"></span>\r\n }\r\n }\r\n }\r\n } @else {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\"> <ng-content /></span>\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-tbody-cell{display:table-cell;text-align:left;vertical-align:middle;height:40px}fu-tbody-cell.expanded{border-bottom:1px solid var(--fu-table-border-color)}fu-tbody-cell.loading{pointer-events:none}fu-tbody-cell.sorting{background-color:var(--fu-table-sort-bg-color)}fu-tbody-cell>div{padding:0 8px}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-text-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell .fu-edit{margin-left:-4px}@media (max-width: 900px){fu-tbody-cell .fu-edit{margin-left:0}}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-text-color)}fu-tbody-cell .fu-cell-text{display:block;overflow:hidden;text-overflow:ellipsis}@media (max-width: 900px){fu-tbody-cell .fu-cell-text{margin-left:4px}fu-tbody-cell .fu-cell-text .fu-edit{margin-left:0}}fu-tbody-cell .fu-cell-text:has(svg){margin-left:2px}fu-tbody-cell .fu-header-text{display:none}@media (max-width: 900px){fu-tbody-cell{display:block;min-height:40px;height:auto;align-content:center}fu-tbody-cell div{display:grid;grid-template-columns:40% 1fr}fu-tbody-cell .fu-header-text{font-weight:700;text-transform:capitalize;display:flex;align-items:center;margin-right:12px}}.fu-skeleton-loader{display:block;height:16px;background:var(--fu-table-skeleton-color);position:relative;overflow:hidden;border-radius:4px;animation:fade 1.5s infinite ease-in-out}@media (max-width: 900px){.fu-skeleton-loader{height:20px;margin:3.6px 0}}@keyframes fade{0%,to{opacity:.5}50%{opacity:1}}.fu-highlight{background-color:var(--fu-table-highlight-bg-color);color:var(--fu-table-highlight-color);font-weight:700}.fu-checkbox-wrapper{--size: 24px;position:relative}.fu-checkbox-wrapper *,.fu-checkbox-wrapper *:before,.fu-checkbox-wrapper *:after{box-sizing:border-box}.fu-checkbox-wrapper .fu-input-checkbox{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.fu-checkbox-wrapper input:checked~svg{height:calc(var(--size) * .6)}.fu-checkbox-wrapper label:active:after{background-color:var(--fu-table-edit-input-bg-color)}.fu-checkbox-wrapper label{color:var(--fu-table-text-color);line-height:var(--size);cursor:pointer;position:relative}.fu-checkbox-wrapper label:after{content:\"\";height:var(--size);width:var(--size);margin-right:8px;float:left;border:1.5px solid var(--fu-table-border-color);border-radius:3px;transition:.15s all ease-out}.fu-checkbox-wrapper.editing label:after{border-color:var(--fu-table-text-color)}.fu-checkbox-wrapper svg{stroke:var(--fu-table-text-color);stroke-width:3px;height:0;width:calc(var(--size) * .6);position:absolute;left:calc(var(--size) * .21);top:calc(var(--size) * .2);stroke-dasharray:33}.fu-checkbox-disabled{pointer-events:none}@-webkit-keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}@keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}\n"] }]
}] });
class PopupTemplateDirective {
constructor() {
this.dataSource = input([], { alias: 'fuPopupTemplate' });
}
static ngTemplateContextGuard(dir, ctx) {
return true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PopupTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: PopupTemplateDirective, isStandalone: true, selector: "[fuPopupTemplate]", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "fuPopupTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PopupTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[fuPopupTemplate]',
}]
}] });
class TableFilterComponent {
constructor() {
this.title = input();
this.tableStorageService = inject(TableStorageService);
this.tableEditService = inject(TableEditService);
this.tableIntl = inject(TableIntlService);
this.placeholder = this.tableIntl.searchPlaceholder;
this.searchText = this.tableStorageService.searchText;
}
resetSearch() {
this.resetEdit();
this.tableStorageService.setSearchText('');
this.tableStorageService.setCurrentPage(0);
}
searchFilter(text) {
this.resetEdit();
this.tableStorageService.setSearchText(text);
this.tableStorageService.setCurrentPage(0);
}
resetEdit() {
if (this.tableEditService.editIndex() !== null) {
this.tableEditService.stopEditing();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TableFilterComponent, isStandalone: true, selector: "fu-table-filter", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"fu-table-search\" [class.title]=\"title()\">\r\n @if (title()) {\r\n <div class=\"fu-table-title\">\r\n <h3>{{ title() }}</h3>\r\n </div>\r\n }\r\n\r\n <input\r\n #searchInput\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [value]=\"searchText()\"\r\n (input)=\"searchFilter(searchInput.value)\"\r\n />\r\n\r\n @if (searchText()) {\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n class=\"fu-table-clear-button\"\r\n (click)=\"resetSearch()\"\r\n >\r\n <fu-icon color=\"gray\" iconName=\"cancel\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: [".fu-table-search{position:relative;margin-bottom:12px;display:grid}.fu-table-search.title{grid-template-columns:max-content 1fr}.fu-table-search .fu-table-title{display:flex;align-items:center;margin-right:12px}.fu-table-search input{padding:8px 40px 8px 8px;width:100%;box-sizing:border-box;background-color:inherit;color:inherit;border:1px solid var(--fu-table-border-color);outline:none;border-radius:4px}.fu-table-search input:focus{outline:1px solid var(--fu-primary-500)}.fu-table-search .fu-table-clear-button{position:absolute;top:50%;right:0;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: ButtonDirective, selector: "[fuButton]", inputs: ["variant", "severity", "iconButton", "rounded", "compact", "raised"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableFilterComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-table-filter', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [IconModule, ButtonModule], template: "<div class=\"fu-table-search\" [class.title]=\"title()\">\r\n @if (title()) {\r\n <div class=\"fu-table-title\">\r\n <h3>{{ title() }}</h3>\r\n </div>\r\n }\r\n\r\n <input\r\n #searchInput\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n [value]=\"searchText()\"\r\n (input)=\"searchFilter(searchInput.value)\"\r\n />\r\n\r\n @if (searchText()) {\r\n <button\r\n fuButton\r\n iconButton\r\n variant=\"text\"\r\n class=\"fu-table-clear-button\"\r\n (click)=\"resetSearch()\"\r\n >\r\n <fu-icon color=\"gray\" iconName=\"cancel\" />\r\n </button>\r\n }\r\n</div>\r\n", styles: [".fu-table-search{position:relative;margin-bottom:12px;display:grid}.fu-table-search.title{grid-template-columns:max-content 1fr}.fu-table-search .fu-table-title{display:flex;align-items:center;margin-right:12px}.fu-table-search input{padding:8px 40px 8px 8px;width:100%;box-sizing:border-box;background-color:inherit;color:inherit;border:1px solid var(--fu-table-border-color);outline:none;border-radius:4px}.fu-table-search input:focus{outline:1px solid var(--fu-primary-500)}.fu-table-search .fu-table-clear-button{position:absolute;top:50%;right:0;transform:translateY(-50%)}\n"] }]
}] });
class TableSortService {
constructor() {
this.tableStorageService = inject(TableStorageService);
this.sortKey = this.tableStorageService.sortKey;
this.sortDirection = this.tableStorageService.sortDirection;
}
updateSort(column) {
const newDirection = this.sortKey() === column && this.sortDirection() === 'asc'
? 'desc'
: 'asc';
this.tableStorageService.setCurrentPage(0);
this.tableStorageService.setSortKey(column);
this.tableStorageService.setSortDirection(newDirection);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableSortService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableSortService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableSortService, decorators: [{
type: Injectable
}] });
class TableComponent {
constructor() {
this.dataSource = input.required();
this.localStorageKey = input('', {
transform: val => `fu-table-${val}`,
});
this.tableLayout = input('auto');
this.firstPageOnInit = input(false);
this.pageSizeOptions = input([10, 15, 20]);
this.isLoading = input(false);
this.totalCount = input();
this.serverPagination = input(false);
this.stripedRows = input(true);
this.expandable = input(false);
this.expanded = input(false);
this.showFilter = input(false);
this.showPaginator = input(true);
this.quickPageJump = input(true);
this.popupOffset = input(0);
this.tableTitle = input();
this.variant = input('raised');
this.setsFirstPage$ = input();
this.expandIndex = model(null);
this.noRecordsTemplate = contentChild('noRecordsTemplate');
this.footerTemplate = contentChild('footerTemplate');
this.popupTemplate = contentChild(PopupTemplateDirective, {
read: TemplateRef,
});
this.expandTemplate = contentChild(ExpandTemplateDirective, {
read: TemplateRef,
});
this.bodyTemplate = contentChild.required(BodyTemplateDirective, {
read: TemplateRef,
});
this.headerTemplate = contentChild.required(HeaderTemplateDirective, {
read: TemplateRef,
});
this.isInitLoad = signal(true);
this.filteredData = signal([]);
this.sortedData = signal([]);
this.destroyRef = inject(DestroyRef);
this.tableIntl = inject(TableIntlService);
this.tableUtilityService = inject(TableUtilityService);
this.tableStorageService = inject(TableStorageService);
this.noRecordsText = this.tableIntl.noRecordsText;
this.columnCount = this.tableUtilityService.headerCount;
this.pageSize = this.tableStorageService.pageSize;
this.currentPage = this.tableStorageService.currentPage;
this.searchText = this.tableStorageService.searchText;
this.sortColumn = this.tableStorageService.sortKey;
this.sortDirection = this.tableStorageService.sortDirection;
this.totalItems = computed(() => this.totalCount() || this.filteredData().length);
this.expandedRowIndex = null;
this.arrayFromSize = computed(() => Array.from({ length: this.pageSize() }));
this.arrayFromCols = computed(() => Array.from({ length: this.expandColumnSpan() }));
this.expandColumnSpan = computed(() => {
if (this.expandable()) {
return this.columnCount() + 1;
}
else {
return this.columnCount();
}
});
this.hoveredRow = signal(null);
this.popupPosition = signal({ top: 0, left: 0, right: 0 });
this.isMobile = signal(false);
this.hidePopupTimeout = undefined;
this.isPopupReady = computed(() => this.popupTemplate() && !this.isMobile() && !this.isLoading());
this.tableActions = output();
this.selectRowAction = new EventEmitter();
this.tableActionsEffect = effect(() => {
if (this.serverPagination()) {
this.emitTableActions();
}
else {
this.toggleSort();
}
});
this.loadingEffect = effect(() => {
this.tableUtilityService.setIsLoading(this.isLoading());
this.watchInitLoad();
untracked(() => {
this.expandedRowIndex = null;
this.expandIndex.set(null);
});
});
}
ngOnChanges(changes) {
if (changes['localStorageKey']) {
this.tableStorageService.setLocalStorageKey(this.localStorageKey());
}
if (changes['expanded']) {
this.tableUtilityService.getExpanded(this.expanded());
}
if (changes['dataSource']) {
if (this.serverPagination()) {
this.loadServerData();
}
else {
this.filteredData.set([...this.dataSource()]);
}
}
}
ngOnInit() {
this.isMobile.set(window.innerWidth < 900);
this.setsFirstPage$()
?.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => {
this.tableStorageService.setCurrentPage(0);
});
if (this.firstPageOnInit()) {
this.tableStorageService.setCurrentPage(0);
}
}
onResize() {
const mobile = window.innerWidth < 900;
this.isMobile.set(mobile);
}
toggleRow(row, index = 0) {
if (this.isLoading())
return;
if (this.expandable()) {
if (this.expandedRowIndex === index) {
this.expandedRowIndex = null;
}
else {
this.expandedRowIndex = index;
}
return;
}
this.selectRowAction.emit(row);
}
filterData() {
const filteredData = this.dataSource().filter(item => Object.values(item).some((value) => {
if (typeof value !== 'string' && typeof value !== 'number') {
return;
}
return value
.toString()
.toLowerCase()
.includes(this.searchText().toLowerCase());
}));
this.filteredData.set(filteredData);
}
sortData() {
if (!this.sortDirection()) {
this.filterData();
return;
}
this.filterData();
this.filteredData().sort((a, b) => {
const valueA = a[this.sortColumn()];
const valueB = b[this.sortColumn()];
if (valueA < valueB)
return this.sortDirection() === 'asc' ? -1 : 1;
if (valueA > valueB)
return this.sortDirection() === 'asc' ? 1 : -1;
return 0;
});
}
paginateData() {
this.expandedRowIndex = null;
this.expandIndex.set(null);
const startIndex = this.currentPage() * this.pageSize();
const endIndex = startIndex + this.pageSize();
const sortedData = this.filteredData().slice(startIndex, endIndex);
this.sortedData.set(sortedData);
}
loadServerData() {
this.sortedData.set([...this.dataSource()]);
}
watchInitLoad() {
if (this.isInitLoad()) {
this.isInitLoad.set(this.isLoading());
}
}
emitTableActions() {
this.tableActions.emit({
sortDirection: this.sortDirection(),
sortKey: this.sortColumn(),
pageSize: this.pageSize(),
page: this.currentPage(),
});
}
toggleSort() {
this.sortData();
this.paginateData();
}
onRowHover(event, row) {
if (!this.isPopupReady())
return;
clearTimeout(this.hidePopupTimeout);
this.hoveredRow.set(row);
const rowElement = event.target.closest('tr');
if (rowElement) {
const rect = rowElement.getBoundingClientRect();
this.popupPosition.set({
top: rect.top + window.scrollY,
left: rect.right + window.scrollX,
right: window.innerWidth - rect.right + this.popupOffset(),
});
}
}
onRowLeave() {
if (!this.isPopupReady())
return;
this.hidePopupTimeout = setTimeout(() => {
this.hoveredRow.set(null);
}, 100);
}
onPopupHover() {
clearTimeout(this.hidePopupTimeout);
}
onPopupLeave() {
this.hidePopupTimeout = setTimeout(() => {
this.hoveredRow.set(null);
}, 100);
}
onExpandHover() {
if (!this.isPopupReady())
return;
this.hoveredRow.set(null);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TableComponent, isStandalone: true, selector: "fu-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, firstPageOnInit: { classPropertyName: "firstPageOnInit", publicName: "firstPageOnInit", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, serverPagination: { classPropertyName: "serverPagination", publicName: "serverPagination", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, quickPageJump: { classPropertyName: "quickPageJump", publicName: "quickPageJump", isSignal: true, isRequired: false, transformFunction: null }, popupOffset: { classPropertyName: "popupOffset", publicName: "popupOffset", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, setsFirstPage$: { classPropertyName: "setsFirstPage$", publicName: "setsFirstPage$", isSignal: true, isRequired: false, transformFunction: null }, expandIndex: { classPropertyName: "expandIndex", publicName: "expandIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandIndex: "expandIndexChange", tableActions: "tableActions", selectRowAction: "selectRowAction" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [
TableUtilityService,
TableStorageService,
TableSortService,
TableEditService,
], queries: [{ propertyName: "noRecordsTemplate", first: true, predicate: ["noRecordsTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }, { propertyName: "popupTemplate", first: true, predicate: PopupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "expandTemplate", first: true, predicate: ExpandTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: BodyTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index ||\r\n expanded()\r\n ) {\r\n <tr\r\n class=\"fu-expand-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd && expanded(),\r\n }\"\r\n [attr.expanded]=\"expanded()\"\r\n (mouseenter)=\"onExpandHover()\"\r\n >\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n @if (isLoading() && expanded()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n }\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}.fu-expand-row[expanded=false]{border-top:1px solid var(--fu-table-border-color)}.fu-expand-row.striped{background-color:var(--fu-table-striped-row-bg-color)}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "component", type: TablePaginatorComponent, selector: "fu-table-paginator", inputs: ["pageSizeOptions", "quickPageJump", "dataLenght"] }, { kind: "component", type: TableFilterComponent, selector: "fu-table-filter", inputs: ["title"] }, { kind: "component", type: TbodyCellComponent, selector: "fu-tbody-cell", inputs: ["cellValue", "editKey"] }, { kind: "pipe", type: KeyMappingPipe, name: "keyMapping" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-table', imports: [
CommonModule,
ButtonModule,
IconModule,
TablePaginatorComponent,
TableFilterComponent,
TbodyCellComponent,
KeyMappingPipe,
], providers: [
TableUtilityService,
TableStorageService,
TableSortService,
TableEditService,
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index ||\r\n expanded()\r\n ) {\r\n <tr\r\n class=\"fu-expand-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd && expanded(),\r\n }\"\r\n [attr.expanded]=\"expanded()\"\r\n (mouseenter)=\"onExpandHover()\"\r\n >\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n @if (isLoading() && expanded()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n }\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}.fu-expand-row[expanded=false]{border-top:1px solid var(--fu-table-border-color)}.fu-expand-row.striped{background-color:var(--fu-table-striped-row-bg-color)}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"] }]
}], propDecorators: { selectRowAction: [{
type: Output
}], onResize: [{
type: HostListener,
args: ['window:resize', ['$event']]
}] } });
class TheadCellComponent {
constructor() {
this.headerText = input('');
this.sortKey = input(undefined);
this.width = input('auto');
this.tableStorageService = inject(TableStorageService);
this.tableSortService = inject(TableSortService);
this.tableUtilityService = inject(TableUtilityService);
this.elementRef = inject(ElementRef);
this.sortColumn = this.tableStorageService.sortKey;
this.sortDirection = this.tableStorageService.sortDirection;
this.cellIndex = signal(-1);
this.initSortEffect = effect(() => {
this.initSortCell();
});
}
ngOnInit() {
const index = this.getIndex();
this.cellIndex.set(index);
this.tableUtilityService.setHeaderText(index, this.headerText());
this.tableUtilityService.setColumnCount();
}
toogleSort() {
this.tableUtilityService.setSortCellIndex(this.cellIndex());
this.tableSortService.updateSort(this.sortKey());
}
initSortCell() {
if (this.sortColumn() === this.sortKey()) {
this.tableUtilityService.setSortCellIndex(this.cellIndex());
}
}
getIndex() {
const parent = this.elementRef.nativeElement.parentElement;
return Array.from(parent.children).indexOf(this.elementRef.nativeElement);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TheadCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TheadCellComponent, isStandalone: true, selector: "fu-thead-cell", inputs: { headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"columnheader\"", "style.width": "width()", "class.sorting": "sortKey() !== undefined" } }, ngImport: i0, template: "<div\r\n class=\"fu-header-cell\"\r\n (click)=\"toogleSort()\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if (sortKey()) {\r\n @if (sortColumn() === sortKey()) {\r\n @switch (sortDirection()) {\r\n @case ('asc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @case ('desc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n @default {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n } @else {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-thead-cell{display:table-cell;text-align:left;font-weight:700;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){fu-thead-cell{width:auto!important}}fu-thead-cell .fu-header-cell{display:flex;align-items:center;padding:12px 8px;cursor:pointer}fu-thead-cell .fu-header-cell:hover{background-color:var(--fu-table-bg-hover-color);transition:background-color .3s}fu-thead-cell .fu-header-cell .fu-header-text{margin-right:4px}fu-thead-cell .disabled{pointer-events:none}@media (max-width: 900px){fu-thead-cell{display:none}}@media (max-width: 900px){fu-thead-cell.sorting{display:inline-block;border-bottom:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TheadCellComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-thead-cell', imports: [CommonModule, IconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
'[attr.role]': '"columnheader"',
'[style.width]': 'width()',
'[class.sorting]': 'sortKey() !== undefined',
}, template: "<div\r\n class=\"fu-header-cell\"\r\n (click)=\"toogleSort()\"\r\n [ngClass]=\"{ disabled: !sortKey() }\"\r\n>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if (sortKey()) {\r\n @if (sortColumn() === sortKey()) {\r\n @switch (sortDirection()) {\r\n @case ('asc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortAsc\" />\r\n }\r\n @case ('desc') {\r\n <fu-icon size=\"1rem\" strokeWidth=\"2.5\" iconName=\"sortDesc\" />\r\n }\r\n @default {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n } @else {\r\n <fu-icon size=\"1rem\" color=\"gray\" iconName=\"sort\" />\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-thead-cell{display:table-cell;text-align:left;font-weight:700;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){fu-thead-cell{width:auto!important}}fu-thead-cell .fu-header-cell{display:flex;align-items:center;padding:12px 8px;cursor:pointer}fu-thead-cell .fu-header-cell:hover{background-color:var(--fu-table-bg-hover-color);transition:background-color .3s}fu-thead-cell .fu-header-cell .fu-header-text{margin-right:4px}fu-thead-cell .disabled{pointer-events:none}@media (max-width: 900px){fu-thead-cell{display:none}}@media (max-width: 900px){fu-thead-cell.sorting{display:inline-block;border-bottom:none}}\n"] }]
}] });
class TbodyActionsComponent {
constructor() {
this.editRowData = input();
this.disabled = input(false);
this.tableUtilityService = inject(TableUtilityService);
this.tableEditService = inject(TableEditService);
this.elementRef = inject(ElementRef);
this.isLoading = this.tableUtilityService.isLoading;
this.editIndex = this.tableEditService.editIndex;
this.rowIndex = signal(-1);
this.editSaveAction = new EventEmitter();
this.deleteAction = new EventEmitter();
this.cancelEditEffect = effect(() => {
if (this.isLoading() &&
this.editIndex() !== null &&
this.tableEditService.savingIndex() < 0) {
this.tableEditService.stopEditing();
}
});
}
startEditing(event) {
const rowIndex = this.getRowIndex();
this.rowIndex.set(rowIndex);
this.tableEditService.startEditing(rowIndex);
event.stopPropagation();
}
cancelEditing(event) {
this.tableEditService.stopEditing();
event.stopPropagation();
}
saveEditing(event) {
this.tableEditService.savingIndex.set(this.rowIndex());
const editedValues = this.tableEditService.editValues();
const updatedRow = { ...this.editRowData(), ...editedValues };
this.editSaveAction.emit(updatedRow);
this.tableEditService.resetEditValues();
event.stopPropagation();
}
deleteRow(event) {
this.deleteAction.emit();
event.stopPropagation();
}
getRowIndex() {
const element = this.elementRef.nativeElement.parentElement;
const parent = element.parentElement;
if (!parent)
return -1;
const children = Array.from(parent.children);
return children.indexOf(element);
}
ngOnDestroy() {
this.tableEditService.stopEditing();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TbodyActionsComponent, isStandalone: true, selector: "fu-tbody-actions", inputs: { editRowData: { classPropertyName: "editRowData", publicName: "editRowData", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editSaveAction: "editSaveAction", deleteAction: "deleteAction" }, host: { properties: { "attr.role": "\"cell\"" } }, ngImport: i0, template: "<div class=\"fu-row-actions\" (click)=\"$event.stopPropagation()\">\r\n @if (editIndex() === rowIndex()) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"warning\"\r\n [disabled]=\"isLoading() || disabled()\"\r\n (click)=\"cancelEditing($event)\"\r\n >\r\n <fu-icon iconName=\"cancel\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"success\"\r\n [disabled]=\"isLoading() || disabled()\"\r\n (click)=\"saveEditing($event)\"\r\n >\r\n <fu-icon iconName=\"save\" />\r\n </button>\r\n } @else if (editSaveAction.observed) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n [disabled]=\"isLoading() || disabled()\"\r\n (click)=\"startEditing($event)\"\r\n >\r\n <fu-icon iconName=\"edit\" />\r\n </button>\r\n }\r\n @if (editIndex() !== rowIndex() && deleteAction.observed) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"danger\"\r\n [disabled]=\"isLoading() || disabled()\"\r\n (click)=\"deleteRow($event)\"\r\n >\r\n <fu-icon iconName=\"trash\" />\r\n </button>\r\n }\r\n\r\n <ng-content />\r\n</div>\r\n", styles: ["fu-tbody-actions{display:table-cell;border-bottom:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle;height:40px}fu-tbody-actions .fu-row-actions button{margin:0 4px}@media (max-width: 900px){fu-tbody-actions{display:flex;justify-content:center;padding:4px 0;border-left:none}}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: ButtonDirective, selector: "[fuButton]", inputs: ["variant", "severity", "iconButton", "rounded", "compact", "raised"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyActionsComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-tbody-actions', imports: [IconModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
'[attr.role]': '"cell"',
}, template: "<div class=\"fu-row-actions\" (click)=\"$event.stopPropagation()\">\r\n @if (editIndex() === rowIndex()) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"warning\"\r\n [disabled]=\"isLoading() || disabled()\"\r\n (click)=\"cancelEditing($event)\"\r\n >\r\n <fu-icon iconName=\"cancel\" />\r\n </button>\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"success\"\r\n [disabled]=\"isLoading() || disabled()\"\r\n (click)=\"saveEditing($event)\"\r\n >\r\n <fu-icon iconName=\"save\" />\r\n </button>\r\n } @else if (editSaveAction.observed) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n [disabled]=\"isLoading() || disabled()\"\r\n (click)=\"startEditing($event)\"\r\n >\r\n <fu-icon iconName=\"edit\" />\r\n </button>\r\n }\r\n @if (editIndex() !== rowIndex() && deleteAction.observed) {\r\n <button\r\n fuButton\r\n iconButton\r\n raised\r\n variant=\"text\"\r\n severity=\"danger\"\r\n [disabled]=\"isLoading() || disabled()\"\r\n (click)=\"deleteRow($event)\"\r\n >\r\n <fu-icon iconName=\"trash\" />\r\n </button>\r\n }\r\n\r\n <ng-content />\r\n</div>\r\n", styles: ["fu-tbody-actions{display:table-cell;border-bottom:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle;height:40px}fu-tbody-actions .fu-row-actions button{margin:0 4px}@media (max-width: 900px){fu-tbody-actions{display:flex;justify-content:center;padding:4px 0;border-left:none}}\n"] }]
}], propDecorators: { editSaveAction: [{
type: Output
}], deleteAction: [{
type: Output
}] } });
class HighlightDirective {
constructor() {
this.fuHighlight = input('');
this.storageService = inject(TableStorageService);
this.el = inject(ElementRef);
this.searchText = this.storageService.searchText;
this.highlightEffect = effect(() => {
this.highlightText();
});
}
highlightText() {
const value = this.fuHighlight();
if (!this.searchText() || !value) {
this.el.nativeElement.innerHTML = value;
return;
}
const regex = new RegExp(`(${this.searchText()})`, 'gi');
this.el.nativeElement.innerHTML = `${value}`.replace(regex, '<span class="fu-highlight">$1</span>');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: HighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: HighlightDirective, isStandalone: true, selector: "[fuHighlight]", inputs: { fuHighlight: { classPropertyName: "fuHighlight", publicName: "fuHighlight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: HighlightDirective, decorators: [{
type: Directive,
args: [{
selector: '[fuHighlight]',
}]
}] });
class DataTableModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: DataTableModule, imports: [TableComponent,
TbodyCellComponent,
TheadCellComponent,
TbodyActionsComponent,
BodyTemplateDirective,
HeaderTemplateDirective,
ExpandTemplateDirective,
PopupTemplateDirective,
HighlightDirective], exports: [TableComponent,
TbodyCellComponent,
TheadCellComponent,
TbodyActionsComponent,
BodyTemplateDirective,
HeaderTemplateDirective,
ExpandTemplateDirective,
PopupTemplateDirective,
HighlightDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataTableModule, imports: [TableComponent,
TheadCellComponent,
TbodyActionsComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DataTableModule, decorators: [{
type: NgModule,
args: [{
declarations: [],
imports: [
TableComponent,
TbodyCellComponent,
TheadCellComponent,
TbodyActionsComponent,
BodyTemplateDirective,
HeaderTemplateDirective,
ExpandTemplateDirective,
PopupTemplateDirective,
HighlightDirective,
],
exports: [
TableComponent,
TbodyCellComponent,
TheadCellComponent,
TbodyActionsComponent,
BodyTemplateDirective,
HeaderTemplateDirective,
ExpandTemplateDirective,
PopupTemplateDirective,
HighlightDirective,
],
}]
}] });
class TreeComponent {
constructor() {
this.dataSource = input.required();
this.onExpand = output();
this.onCollapse = output();
this.onSelect = output();
this.actionTemplate = contentChild('actionTemplate');
}
toggleExpand(event, item) {
event.stopPropagation();
item.isExpanded = !item.isExpanded;
this.emitEvents(item);
if (item.hasChildren && item.children) {
item.children.forEach(sub => {
sub.isExpanded = false;
});
}
}
toggleSelect(item) {
this.onSelect.emit(item);
}
emitEvents(item) {
if (item.isExpanded) {
this.onExpand.emit(item);
}
else {
this.onCollapse.emit(item);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TreeComponent, isStandalone: true, selector: "fu-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onExpand: "onExpand", onCollapse: "onCollapse", onSelect: "onSelect" }, queries: [{ propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fu-tree-container\">\r\n <ul>\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveList; context: { $implicit: dataSource() }\"\r\n />\r\n </ul>\r\n</div>\r\n\r\n<ng-template #recursiveList let-items>\r\n @for (item of items; track $index) {\r\n <li>\r\n <div class=\"fu-tree-item\" (click)=\"toggleSelect(item)\">\r\n @if (item.hasChildren) {\r\n <button\r\n fuButton\r\n variant=\"text\"\r\n iconButton\r\n (click)=\"toggleExpand($event, item)\"\r\n >\r\n <fu-icon\r\n size=\"16px\"\r\n strokeWidth=\"3px\"\r\n [class.fu-rotate]=\"item.isExpanded\"\r\n iconName=\"arrowRight\"\r\n />\r\n </button>\r\n }\r\n\r\n <span\r\n [style.margin-left]=\"!item.hasChildren ? '40px' : '0'\"\r\n class=\"fu-tree-item-text\"\r\n >{{ item.label }}</span\r\n >\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionTemplate() || null;\r\n context: { $implicit: item }\r\n \"\r\n />\r\n </div>\r\n\r\n @if (item.hasChildren && item.isExpanded) {\r\n <ul style=\"padding-left: 16px\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n recursiveList;\r\n context: { $implicit: item.children }\r\n \"\r\n />\r\n </ul>\r\n }\r\n </li>\r\n }\r\n</ng-template>\r\n", styles: [".fu-tree-container{padding:8px 12px;margin:16px;box-shadow:0 1px 4px #0000005e;background-color:var(--fu-tree-bg-color);width:400px;overflow-y:auto}.fu-tree-item{display:flex;align-items:center;cursor:pointer;gap:8px;background-color:var(--fu-tree-item-bg-color);margin:6px 0;min-height:32px;transition:.1s ease-in-out}.fu-tree-item:hover{background-color:var(--fu-tree-bg-hover-color)}.fu-tree-item .fu-rotate{transform:rotate(90deg);transition:.1s ease-in-out}.fu-tree-item-text{margin-right:auto}.fu-item-current,.fu-item-access{padding:4px 0}.tree-dropdown{max-height:calc(100% - 40px)}ul{list-style-type:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}::-webkit-scrollbar-thumb{background:#888;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#555}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: ButtonDirective, selector: "[fuButton]", inputs: ["variant", "severity", "iconButton", "rounded", "compact", "raised"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TreeComponent, decorators: [{
type: Component,
args: [{ selector: 'fu-tree', imports: [NgTemplateOutlet, ButtonModule, IconModule], template: "<div class=\"fu-tree-container\">\r\n <ul>\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveList; context: { $implicit: dataSource() }\"\r\n />\r\n </ul>\r\n</div>\r\n\r\n<ng-template #recursiveList let-items>\r\n @for (item of items; track $index) {\r\n <li>\r\n <div class=\"fu-tree-item\" (click)=\"toggleSelect(item)\">\r\n @if (item.hasChildren) {\r\n <button\r\n fuButton\r\n variant=\"text\"\r\n iconButton\r\n (click)=\"toggleExpand($event, item)\"\r\n >\r\n <fu-icon\r\n size=\"16px\"\r\n strokeWidth=\"3px\"\r\n [class.fu-rotate]=\"item.isExpanded\"\r\n iconName=\"arrowRight\"\r\n />\r\n </button>\r\n }\r\n\r\n <span\r\n [style.margin-left]=\"!item.hasChildren ? '40px' : '0'\"\r\n class=\"fu-tree-item-text\"\r\n >{{ item.label }}</span\r\n >\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionTemplate() || null;\r\n context: { $implicit: item }\r\n \"\r\n />\r\n </div>\r\n\r\n @if (item.hasChildren && item.isExpanded) {\r\n <ul style=\"padding-left: 16px\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n recursiveList;\r\n context: { $implicit: item.children }\r\n \"\r\n />\r\n </ul>\r\n }\r\n </li>\r\n }\r\n</ng-template>\r\n", styles: [".fu-tree-container{padding:8px 12px;margin:16px;box-shadow:0 1px 4px #0000005e;background-color:var(--fu-tree-bg-color);width:400px;overflow-y:auto}.fu-tree-item{display:flex;align-items:center;cursor:pointer;gap:8px;background-color:var(--fu-tree-item-bg-color);margin:6px 0;min-height:32px;transition:.1s ease-in-out}.fu-tree-item:hover{background-color:var(--fu-tree-bg-hover-color)}.fu-tree-item .fu-rotate{transform:rotate(90deg);transition:.1s ease-in-out}.fu-tree-item-text{margin-right:auto}.fu-item-current,.fu-item-access{padding:4px 0}.tree-dropdown{max-height:calc(100% - 40px)}ul{list-style-type:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}::-webkit-scrollbar-thumb{background:#888;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#555}\n"] }]
}] });
class TreeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: TreeModule, imports: [TreeComponent], exports: [TreeComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TreeModule, imports: [TreeComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TreeModule, decorators: [{
type: NgModule,
args: [{
declarations: [],
imports: [TreeComponent],
exports: [TreeComponent],
}]
}] });
/*
* Public API Surface of ng-fusion-ui
*/
/**
* Generated bundle index. Do not edit.
*/
export { BodyRowCellComponent, BodyTemplateDirective, ButtonDirective, ButtonModule, DataGridComponent, DataGridModule, DataGridPaginator, DataTableModule, ExpandTemplateDirective, FilledButtonDirective, GridBodyTemplateDirective, GridExpandTemplateDirective, GridHeaderTemplateDirective, HeadRowCellComponent, HeaderTemplateDirective, HighlightDirective, IconComponent, IconModule, OutlinedButtonDirective, PopupTemplateDirective, RowActionsComponent, TableComponent, TableFilterComponent, TableIntlService, TablePaginatorComponent, TbodyActionsComponent, TbodyCellComponent, TextButtonDirective, TheadCellComponent, TreeComponent, TreeModule };
//# sourceMappingURL=ng-fusion-ui.mjs.map