@dataclouder/ngx-core 0.1.26 → 0.1.30

package/fesm2022/dataclouder-ngx-core.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, Input, Component, output, ChangeDetectionStrategy, inject, HostListener, ChangeDetectorRef, Injectable, Pipe, signal, effect, ViewChild, Directive, InjectionToken, Optional, Inject } from '@angular/core';
+import { input, Input, Component, inject, output, ChangeDetectionStrategy, HostListener, ChangeDetectorRef, Injectable, Pipe, signal, effect, ViewChild, Directive, InjectionToken, Optional, Inject } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule, FormGroup, FormArray } from '@angular/forms';
 import * as i1$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i4 from 'primeng/dialog';
@@ -93,6 +93,7 @@ const sortTypes = [
 const DEFAULT_FILTERS = { filters: {}, page: 0, rowsPerPage: 10, sort: { _id: -1 } };
 class DCFilterBarComponent {
     constructor() {
+        this.fb = inject(FormBuilder);
         // Signal Inputs
         this.items = input([]);
         this.options = input({ showCreateButton: true });
@@ -102,8 +103,6 @@ class DCFilterBarComponent {
         this.onFilterAction = output();
         this.onChangeSort = output();
         this.onNew = output();
-        // Internal State
-        this.customFilterModels = [];
         this.availibleFilters = availibleFilters;
         this.sortOptions = sortOptions;
         this.isSearchVisible = false;
@@ -115,19 +114,20 @@ class DCFilterBarComponent {
         this.dateRange = [];
     }
     ngOnInit() {
-        console.log('customFilters', this.customFilters);
-        if (this.customFilters.length > 0) {
-            console.log('customFilters', this.customFilters);
-            for (const filter of this.customFilters) {
-                console.log('Deberia agregar un filtro nuevo', filter);
-                // this.availibleFilters.push({
-                //   name: filter.name,
-                //   type: filter.type,
-                //   options: filter.options,
-                // });
-            }
+        this.buildCustomFiltersForm();
+    }
+    ngOnChanges(changes) {
+        if (changes['customFilters']) {
+            this.buildCustomFiltersForm();
         }
     }
+    buildCustomFiltersForm() {
+        const formControls = {};
+        for (const filter of this.customFilters) {
+            formControls[filter.field] = [filter.defaultValue || null];
+        }
+        this.customFiltersForm = this.fb.group(formControls);
+    }
     changeFilter(event) {
         console.log('Filter changed');
     }
@@ -154,6 +154,14 @@ class DCFilterBarComponent {
         this.doItemAction({ action: 'filterChange', item: this.filter });
     }
     applyFilters() {
+        const customFilterValues = this.customFiltersForm.value;
+        const activeFilters = Object.entries(customFilterValues).reduce((acc, [key, value]) => {
+            if (value !== null && value !== undefined && value !== '') {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        this.filter.filters = { ...this.filter.filters, ...activeFilters };
         this.doItemAction({ action: 'filterChange', item: this.filter });
         this.isFilterVisible = false;
     }
@@ -161,11 +169,11 @@ class DCFilterBarComponent {
         this.onFilterAction.emit(filterEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCFilterBarComponent, isStandalone: true, selector: "dc-filter-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onFilterAction: "onFilterAction", onChangeSort: "onChangeSort", onNew: "onNew" }, ngImport: i0, template: "<div class=\"background-bar\">\n  <div class=\"button-flex\">\n    <div>\n      <p-button icon=\"pi pi-search\" label=\"buscar\" severity=\"secondary\" (click)=\"isSearchVisible = true\" />\n    </div>\n\n    @if (options()?.showCreateButton) {\n    <span class=\"admin\">\n      <i style=\"position: absolute; right: -5px; top: -5px; z-index: 2; color: grey\" class=\"pi pi-key\"></i>\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  @if(options()?.showViewButton){\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options()?.showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  }\n\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\n  }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-calendar\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-calendar>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <h4>Filtros Personalizados (No terminado...) </h4>\n    <h6>Encontrar la forma de que cada custom filter se renderize como un nuevo form.</h6>\n    @for (filter of customFilters; track filter.name) {\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">{{ filter.name }}</label>\n    </div>\n    } }\n\n    <!-- Recent/All Toggle -->\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"flex justify-content-end gap-2\">\n      <p-button label=\"Limpiar\" icon=\"pi pi-trash\" (click)=\"clearFilters()\" styleClass=\"p-button-text\"> </p-button>\n      <p-button label=\"Aplicar\" icon=\"pi pi-check\" (click)=\"applyFilters()\" severity=\"primary\"> </p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}.admin{margin-left:10px;position:relative}.background-bar{background-color:var(--p-primary-color);display:flex;border-radius:10px;justify-content:space-between;padding:10px}.button-flex{display:flex;margin-right:10px}.white{color:#fff}.search-flex{margin-left:10px}.search-dialog{width:750px;-webkit-backdrop-filter:blur(70px);backdrop-filter:blur(70px)}.border-none{border:none}.bg-black-alpha-50{background-color:var(--p-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i7.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: DCFilterBarComponent, isStandalone: true, selector: "dc-filter-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, customFilters: { classPropertyName: "customFilters", publicName: "customFilters", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onFilterAction: "onFilterAction", onChangeSort: "onChangeSort", onNew: "onNew" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"background-bar\">\n  <div class=\"button-flex\">\n    <div>\n      <p-button icon=\"pi pi-search\" label=\"buscar\" severity=\"secondary\" (click)=\"isSearchVisible = true\" />\n    </div>\n\n    @if (options()?.showCreateButton) {\n    <span class=\"admin\">\n      <i style=\"position: absolute; right: -5px; top: -5px; z-index: 2; color: grey\" class=\"pi pi-key\"></i>\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  @if(options()?.showViewButton){\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options()?.showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  }\n\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\n  }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-calendar\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-calendar>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <form [formGroup]=\"customFiltersForm\">\n      <h4>Filtros Personalizados</h4>\n      @for (customFilter of customFilters; track customFilter.field) {\n      <div class=\"field\">\n        <label class=\"font-semibold block mb-2\">{{ customFilter.name }}</label>\n        @switch (customFilter.type) { @case ('select') {\n        <p-select\n          [options]=\"customFilter.options\"\n          [formControlName]=\"customFilter.field\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [style]=\"{ width: '100%' }\"\n          placeholder=\"Seleccionar {{ customFilter.name }}\" />\n        } @case ('string') {\n        <input type=\"text\" pInputText [formControlName]=\"customFilter.field\" class=\"w-full\" />\n        } @case ('date') {\n        <p-calendar [formControlName]=\"customFilter.field\" [style]=\"{ width: '100%' }\" dateFormat=\"dd/mm/yy\"></p-calendar>\n        } }\n      </div>\n      }\n    </form>\n    }\n\n    <!-- Recent/All Toggle -->\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"flex justify-content-end gap-2\">\n      <p-button label=\"Limpiar\" icon=\"pi pi-trash\" (click)=\"clearFilters()\" styleClass=\"p-button-text\"> </p-button>\n      <p-button label=\"Aplicar\" icon=\"pi pi-check\" (click)=\"applyFilters()\" severity=\"primary\"> </p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}.admin{margin-left:10px;position:relative}.background-bar{background-color:var(--p-primary-color);display:flex;border-radius:10px;justify-content:space-between;padding:10px}.button-flex{display:flex;margin-right:10px}.white{color:#fff}.search-flex{margin-left:10px}.search-dialog{width:750px;-webkit-backdrop-filter:blur(70px);backdrop-filter:blur(70px)}.border-none{border:none}.bg-black-alpha-50{background-color:var(--p-primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i7.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DCFilterBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-filter-bar', standalone: true, imports: [FormsModule, ButtonModule, DialogModule, SelectModule, MultiSelectModule, CalendarModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"background-bar\">\n  <div class=\"button-flex\">\n    <div>\n      <p-button icon=\"pi pi-search\" label=\"buscar\" severity=\"secondary\" (click)=\"isSearchVisible = true\" />\n    </div>\n\n    @if (options()?.showCreateButton) {\n    <span class=\"admin\">\n      <i style=\"position: absolute; right: -5px; top: -5px; z-index: 2; color: grey\" class=\"pi pi-key\"></i>\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  @if(options()?.showViewButton){\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options()?.showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  }\n\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\n  }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-calendar\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-calendar>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <h4>Filtros Personalizados (No terminado...) </h4>\n    <h6>Encontrar la forma de que cada custom filter se renderize como un nuevo form.</h6>\n    @for (filter of customFilters; track filter.name) {\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">{{ filter.name }}</label>\n    </div>\n    } }\n\n    <!-- Recent/All Toggle -->\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"flex justify-content-end gap-2\">\n      <p-button label=\"Limpiar\" icon=\"pi pi-trash\" (click)=\"clearFilters()\" styleClass=\"p-button-text\"> </p-button>\n      <p-button label=\"Aplicar\" icon=\"pi pi-check\" (click)=\"applyFilters()\" severity=\"primary\"> </p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}.admin{margin-left:10px;position:relative}.background-bar{background-color:var(--p-primary-color);display:flex;border-radius:10px;justify-content:space-between;padding:10px}.button-flex{display:flex;margin-right:10px}.white{color:#fff}.search-flex{margin-left:10px}.search-dialog{width:750px;-webkit-backdrop-filter:blur(70px);backdrop-filter:blur(70px)}.border-none{border:none}.bg-black-alpha-50{background-color:var(--p-primary-color)}\n"] }]
+            args: [{ selector: 'dc-filter-bar', standalone: true, imports: [FormsModule, ReactiveFormsModule, ButtonModule, DialogModule, SelectModule, MultiSelectModule, CalendarModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"background-bar\">\n  <div class=\"button-flex\">\n    <div>\n      <p-button icon=\"pi pi-search\" label=\"buscar\" severity=\"secondary\" (click)=\"isSearchVisible = true\" />\n    </div>\n\n    @if (options()?.showCreateButton) {\n    <span class=\"admin\">\n      <i style=\"position: absolute; right: -5px; top: -5px; z-index: 2; color: grey\" class=\"pi pi-key\"></i>\n      <p-button icon=\"pi pi-plus\" label=\"Crear Nueva\" severity=\"secondary\" (click)=\"createNew()\" />\n    </span>\n    }\n  </div>\n\n  @if(options()?.showViewButton){\n  <p-button icon=\"pi pi-objects-column\" variant=\"text\" (click)=\"doItemAction({ action: 'changeView', item: null })\" severity=\"secondary\"></p-button>\n  } @if(options()?.showActions){ @for(item of items(); track $index) {\n  <p-button [icon]=\"item.icon\" variant=\"text\" (click)=\"doItemAction({ action: item.title, item: item })\" severity=\"secondary\"></p-button>\n  }\n\n  <div class=\"button-flex\">\n    <p-button icon=\"pi pi-filter\" label=\"Filtrar\" severity=\"secondary\" (click)=\"isFilterVisible = true\" />\n  </div>\n  }\n</div>\n\n@if (placeholder) {\n<span class=\"search-flex\" (click)=\"search(null)\"> <i class=\"pi pi-times\"></i>{{ placeholder }} </span>\n}\n\n<p-dialog [(visible)]=\"isSearchVisible\" [dismissableMask]=\"true\" [modal]=\"true\" [showHeader]=\"false\" (onHide)=\"isSearchVisible = false\">\n  <p>Haz una b\u00FAsqueda (Enter)</p>\n  <div>\n    <span>\n      <input (keydown.enter)=\"search(placeholder)\" type=\"text\" pInputText [(ngModel)]=\"placeholder\" />\n    </span>\n  </div>\n</p-dialog>\n\n<p-dialog [(visible)]=\"isFilterVisible\" [modal]=\"true\" [style]=\"{ width: '70vw', height: '70vh' }\" [header]=\"'Filtros'\">\n  <div class=\"flex flex-column gap-4\">\n    <!-- Sort Options -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Ordenar por</label>\n      <p-select [options]=\"sortOptions\" [(ngModel)]=\"selectedSort\" optionLabel=\"label\" [style]=\"{ width: '100%' }\" placeholder=\"Seleccionar orden\"> </p-select>\n    </div>\n\n    <p-multiselect\n      [options]=\"availibleFilters\"\n      [(ngModel)]=\"selectedFilters\"\n      optionLabel=\"name\"\n      placeholder=\"Filtros R\u00E1pidos\"\n      [maxSelectedLabels]=\"3\"\n      styleClass=\"w-full md:w-80\" />\n\n    <!-- Date Filter -->\n    <div class=\"field\">\n      <label class=\"font-semibold block mb-2\">Rango de fechas</label>\n      <p-calendar\n        [(ngModel)]=\"dateRange\"\n        selectionMode=\"range\"\n        [showButtonBar]=\"true\"\n        [style]=\"{ width: '100%' }\"\n        placeholder=\"Seleccionar fechas\"\n        dateFormat=\"dd/mm/yy\">\n      </p-calendar>\n    </div>\n\n    @if (customFilters?.length > 0) {\n    <form [formGroup]=\"customFiltersForm\">\n      <h4>Filtros Personalizados</h4>\n      @for (customFilter of customFilters; track customFilter.field) {\n      <div class=\"field\">\n        <label class=\"font-semibold block mb-2\">{{ customFilter.name }}</label>\n        @switch (customFilter.type) { @case ('select') {\n        <p-select\n          [options]=\"customFilter.options\"\n          [formControlName]=\"customFilter.field\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [style]=\"{ width: '100%' }\"\n          placeholder=\"Seleccionar {{ customFilter.name }}\" />\n        } @case ('string') {\n        <input type=\"text\" pInputText [formControlName]=\"customFilter.field\" class=\"w-full\" />\n        } @case ('date') {\n        <p-calendar [formControlName]=\"customFilter.field\" [style]=\"{ width: '100%' }\" dateFormat=\"dd/mm/yy\"></p-calendar>\n        } }\n      </div>\n      }\n    </form>\n    }\n\n    <!-- Recent/All Toggle -->\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"flex justify-content-end gap-2\">\n      <p-button label=\"Limpiar\" icon=\"pi pi-trash\" (click)=\"clearFilters()\" styleClass=\"p-button-text\"> </p-button>\n      <p-button label=\"Aplicar\" icon=\"pi pi-check\" (click)=\"applyFilters()\" severity=\"primary\"> </p-button>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host{display:block}.admin{margin-left:10px;position:relative}.background-bar{background-color:var(--p-primary-color);display:flex;border-radius:10px;justify-content:space-between;padding:10px}.button-flex{display:flex;margin-right:10px}.white{color:#fff}.search-flex{margin-left:10px}.search-dialog{width:750px;-webkit-backdrop-filter:blur(70px);backdrop-filter:blur(70px)}.border-none{border:none}.bg-black-alpha-50{background-color:var(--p-primary-color)}\n"] }]
         }], propDecorators: { customFilters: [{
                 type: Input
             }] } });
@@ -994,10 +1002,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             type: Directive
         }], ctorParameters: () => [] });
 
+const TOAST_ALERTS_TOKEN = new InjectionToken('Toast alerts Service');
+class ToastAlertsAbstractService {
+}
+function provideToastAlert(serviceImplementation) {
+    return [
+        {
+            provide: TOAST_ALERTS_TOKEN,
+            useExisting: serviceImplementation,
+        },
+    ];
+}
+// @deprecated, moved to ngx-vertex
+var AudioSpeed;
+(function (AudioSpeed) {
+    AudioSpeed["VerySlow"] = "verySlow";
+    AudioSpeed["Slow"] = "slow";
+    AudioSpeed["Regular"] = "regular";
+    AudioSpeed["Fast"] = "fast";
+    AudioSpeed["VeryFast"] = "veryFast";
+})(AudioSpeed || (AudioSpeed = {}));
+const AudioSpeedReverse = {
+    [AudioSpeed.VerySlow]: 1,
+    [AudioSpeed.Slow]: 2,
+    [AudioSpeed.Regular]: 3,
+    [AudioSpeed.Fast]: 4,
+    [AudioSpeed.VeryFast]: 5,
+};
+class IAIModel {
+}
+// Since it not clear if this bellows to chat AI Or user i put here.
+class ChatUserSettings {
+}
+
 class EntityBaseFormComponent {
     constructor() {
         this.route = inject(ActivatedRoute);
         this.router = inject(Router);
+        this.toastService = inject(TOAST_ALERTS_TOKEN, { optional: true });
         this.entity = signal(undefined);
         this.entityId = toSignal(this.route.paramMap.pipe(map((params) => params.get('id'))));
         this.loadEntityEffect = effect(async () => {
@@ -1011,8 +1053,8 @@ class EntityBaseFormComponent {
                     }
                 }
                 catch (err) {
+                    this.toastService?.error({ title: 'Error', subtitle: 'Error loading entity' });
                     console.error('Error loading entity', err);
-                    // TODO: Consider adding a generic error toast message
                 }
             }
             else {
@@ -1025,16 +1067,15 @@ class EntityBaseFormComponent {
                     }
                 }
                 catch (err) {
+                    this.toastService?.error({ title: 'Error', subtitle: 'Error creating new entity' });
                     console.error('Error creating new entity', err);
-                    // TODO: Consider adding a generic error toast message
                 }
             }
         }, { allowSignalWrites: true });
     }
     async save() {
         if (this.form.invalid) {
-            // TODO: add toast notification
-            console.error('Form is invalid');
+            this.toastService?.error({ title: 'Error', subtitle: 'Form is invalid' });
         }
         const entityData = { ...this.form.value, _id: this.entityId() };
         const result = await this.entityCommunicationService.createOrUpdate(entityData);
@@ -1042,6 +1083,32 @@ class EntityBaseFormComponent {
         this.patchForm(result);
         return result;
     }
+    getDirtyValues(form) {
+        const dirtyValues = {};
+        Object.keys(form.controls).forEach((key) => {
+            const currentControl = form.get(key);
+            if (!currentControl?.dirty) {
+                return;
+            }
+            if (currentControl instanceof FormGroup) {
+                const nestedDirtyValues = this.getDirtyValues(currentControl);
+                if (Object.keys(nestedDirtyValues).length > 0) {
+                    dirtyValues[key] = nestedDirtyValues;
+                }
+            }
+            else if (currentControl instanceof FormArray) {
+                dirtyValues[key] = currentControl.getRawValue();
+            }
+            else {
+                dirtyValues[key] = currentControl.value;
+            }
+        });
+        return dirtyValues;
+    }
+    saveDirtyValues() {
+        const dirtyValues = this.getDirtyValues(this.form);
+        return this.entityCommunicationService.partialUpdate(this.entityId(), dirtyValues);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EntityBaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: EntityBaseFormComponent, isStandalone: true, ngImport: i0 }); }
 }
@@ -1049,39 +1116,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             type: Directive
         }] });
 
-const TOAST_ALERTS_TOKEN = new InjectionToken('Toast alerts Service');
-class ToastAlertsAbstractService {
-}
-function provideToastAlert(serviceImplementation) {
-    return [
-        {
-            provide: TOAST_ALERTS_TOKEN,
-            useExisting: serviceImplementation,
-        },
-    ];
-}
-// @deprecated, moved to ngx-vertex
-var AudioSpeed;
-(function (AudioSpeed) {
-    AudioSpeed["VerySlow"] = "verySlow";
-    AudioSpeed["Slow"] = "slow";
-    AudioSpeed["Regular"] = "regular";
-    AudioSpeed["Fast"] = "fast";
-    AudioSpeed["VeryFast"] = "veryFast";
-})(AudioSpeed || (AudioSpeed = {}));
-const AudioSpeedReverse = {
-    [AudioSpeed.VerySlow]: 1,
-    [AudioSpeed.Slow]: 2,
-    [AudioSpeed.Regular]: 3,
-    [AudioSpeed.Fast]: 4,
-    [AudioSpeed.VeryFast]: 5,
-};
-class IAIModel {
-}
-// Since it not clear if this bellows to chat AI Or user i put here.
-class ChatUserSettings {
-}
-
 var EModelQuality;
 (function (EModelQuality) {
     EModelQuality["FAST"] = "fast";
@@ -1855,6 +1889,7 @@ const LANGUAGES = {
             es: 'Inglés',
         },
         status: 'ready',
+        speakers: 1500000000,
     },
     es: {
         nativeName: 'Español',
@@ -1890,6 +1925,7 @@ const LANGUAGES = {
             es: 'Español',
         },
         status: 'almostready',
+        speakers: 592000000,
     },
     de: {
         nativeName: 'Deutsch',
@@ -1904,6 +1940,7 @@ const LANGUAGES = {
             es: 'Alemán',
         },
         status: 'almostready',
+        speakers: 135000000,
     },
     fr: {
         nativeName: 'Français',
@@ -1918,6 +1955,7 @@ const LANGUAGES = {
             es: 'Francés',
         },
         status: 'almostready',
+        speakers: 300000000,
     },
     zh: {
         nativeName: '中文 (Zhōngwén)',
@@ -1932,6 +1970,7 @@ const LANGUAGES = {
             es: 'Chino (Mandarín)',
         },
         status: 'almostready',
+        speakers: 1120000000,
     },
     it: {
         nativeName: 'Italiano',
@@ -1946,6 +1985,7 @@ const LANGUAGES = {
             es: 'Italiano',
         },
         status: 'almostready',
+        speakers: 67000000,
     },
     pt: {
         nativeName: 'Português',
@@ -1960,6 +2000,7 @@ const LANGUAGES = {
             es: 'Portugués',
         },
         status: 'ready',
+        speakers: 258000000,
     },
     ja: {
         nativeName: '日本語 (Nihongo)',
@@ -1974,6 +2015,7 @@ const LANGUAGES = {
             es: 'Japonés',
         },
         status: 'almostready',
+        speakers: 125000000,
     },
     nl: {
         nativeName: 'Nederlands',
@@ -1988,6 +2030,7 @@ const LANGUAGES = {
             es: 'Neerlandés',
         },
         status: 'commingsoon',
+        speakers: 25000000,
     },
     ru: {
         nativeName: 'Русский (Russkiy)',
@@ -2002,6 +2045,7 @@ const LANGUAGES = {
             es: 'Ruso',
         },
         status: 'commingsoon',
+        speakers: 258000000,
     },
     ko: {
         nativeName: '한국어 (Hangugeo)',
@@ -2016,6 +2060,7 @@ const LANGUAGES = {
             es: 'Coreano',
         },
         status: 'almostready',
+        speakers: 82000000,
     },
     pl: {
         nativeName: 'Polski',
@@ -2030,6 +2075,7 @@ const LANGUAGES = {
             es: 'Polaco',
         },
         status: 'commingsoon',
+        speakers: 40000000,
     },
     sv: {
         nativeName: 'Svenska',
@@ -2044,6 +2090,7 @@ const LANGUAGES = {
             es: 'Sueco',
         },
         status: 'commingsoon',
+        speakers: 10000000,
     },
     tr: {
         nativeName: 'Türkçe',
@@ -2058,6 +2105,7 @@ const LANGUAGES = {
             es: 'Turco',
         },
         status: 'commingsoon',
+        speakers: 88000000,
     },
     ar: {
         nativeName: 'العربية (Al-Arabiyyah)',
@@ -2098,6 +2146,7 @@ const LANGUAGES = {
             es: 'Árabe',
         },
         status: 'commingsoon',
+        speakers: 422000000,
     },
     vi: {
         nativeName: 'Tiếng Việt',
@@ -2112,6 +2161,7 @@ const LANGUAGES = {
             es: 'Vietnamita',
         },
         status: 'commingsoon',
+        speakers: 90000000,
     },
     id: {
         nativeName: 'Bahasa Indonesia',
@@ -2126,6 +2176,7 @@ const LANGUAGES = {
             es: 'Indonesio',
         },
         status: 'commingsoon',
+        speakers: 199000000,
     },
     da: {
         nativeName: 'Dansk',
@@ -2140,6 +2191,7 @@ const LANGUAGES = {
             es: 'Danés',
         },
         status: 'commingsoon',
+        speakers: 6000000,
     },
     no: {
         nativeName: 'Norsk',
@@ -2154,6 +2206,7 @@ const LANGUAGES = {
             es: 'Noruego',
         },
         status: 'commingsoon',
+        speakers: 5300000,
     },
     fi: {
         nativeName: 'Suomi',
@@ -2168,6 +2221,7 @@ const LANGUAGES = {
             es: 'Finlandés',
         },
         status: 'commingsoon',
+        speakers: 5400000,
     },
     cs: {
         nativeName: 'Čeština',
@@ -2182,6 +2236,7 @@ const LANGUAGES = {
             es: 'Checo',
         },
         status: 'commingsoon',
+        speakers: 10700000,
     },
     el: {
         nativeName: 'Ελληνικά (Elliniká)',
@@ -2196,6 +2251,7 @@ const LANGUAGES = {
             es: 'Griego',
         },
         status: 'commingsoon',
+        speakers: 13500000,
     },
     hu: {
         nativeName: 'Magyar',
@@ -2210,6 +2266,7 @@ const LANGUAGES = {
             es: 'Húngaro',
         },
         status: 'commingsoon',
+        speakers: 13000000,
     },
     ro: {
         nativeName: 'Română',
@@ -2224,6 +2281,7 @@ const LANGUAGES = {
             es: 'Rumano',
         },
         status: 'commingsoon',
+        speakers: 24000000,
     },
     uk: {
         nativeName: 'Українська (Ukrainska)',
@@ -2238,6 +2296,7 @@ const LANGUAGES = {
             es: 'Ucraniano',
         },
         status: 'commingsoon',
+        speakers: 33000000,
     },
     he: {
         nativeName: 'עברית (Ivrit)',
@@ -2252,6 +2311,7 @@ const LANGUAGES = {
             es: 'Hebreo',
         },
         status: 'commingsoon',
+        speakers: 9000000,
     },
     th: {
         nativeName: 'ภาษาไทย (Phasa Thai)',
@@ -2266,6 +2326,7 @@ const LANGUAGES = {
             es: 'Tailandés',
         },
         status: 'commingsoon',
+        speakers: 69000000,
     },
     hi: {
         nativeName: 'हिन्दी (Hindī)',
@@ -2280,6 +2341,7 @@ const LANGUAGES = {
             es: 'Hindi',
         },
         status: 'commingsoon',
+        speakers: 602000000,
     },
     ca: {
         nativeName: 'Català',
@@ -2294,6 +2356,7 @@ const LANGUAGES = {
             es: 'Catalán',
         },
         status: 'commingsoon',
+        speakers: 10000000,
     },
     bg: {
         nativeName: 'Български (Balgarski)',
@@ -2308,6 +2371,7 @@ const LANGUAGES = {
             es: 'Búlgaro',
         },
         status: 'commingsoon',
+        speakers: 9000000,
     },
     eo: {
         nativeName: 'Esperanto',
@@ -2322,6 +2386,7 @@ const LANGUAGES = {
             es: 'Esperanto',
         },
         status: 'commingsoon',
+        speakers: 2000000,
     },
     ia: {
         nativeName: 'Interlingua',
@@ -2336,6 +2401,7 @@ const LANGUAGES = {
             es: 'Interlingua',
         },
         status: 'commingsoon',
+        speakers: 1500,
     },
     hr: {
         nativeName: 'Hrvatski',
@@ -2350,6 +2416,7 @@ const LANGUAGES = {
             es: 'Croata',
         },
         status: 'commingsoon',
+        speakers: 5700000,
     },
     sk: {
         nativeName: 'Slovenčina',
@@ -2364,6 +2431,7 @@ const LANGUAGES = {
             es: 'Eslovaco',
         },
         status: 'commingsoon',
+        speakers: 5400000,
     },
     fil: {
         nativeName: 'Filipino',
@@ -2378,6 +2446,7 @@ const LANGUAGES = {
             es: 'Filipino',
         },
         status: 'commingsoon',
+        speakers: 109000000,
     },
     tl: {
         // Tagalog often used as base for Filipino, but distinct ISO code
@@ -2393,6 +2462,7 @@ const LANGUAGES = {
             es: 'Tagalo',
         },
         status: 'commingsoon',
+        speakers: 109000000,
     },
     lt: {
         nativeName: 'Lietuvių',
@@ -2407,6 +2477,7 @@ const LANGUAGES = {
             es: 'Lituano',
         },
         status: 'commingsoon',
+        speakers: 2800000,
     },
     lv: {
         nativeName: 'Latviešu',
@@ -2421,6 +2492,7 @@ const LANGUAGES = {
             es: 'Letón',
         },
         status: 'commingsoon',
+        speakers: 1900000,
     },
     sl: {
         nativeName: 'Slovenščina',
@@ -2435,6 +2507,7 @@ const LANGUAGES = {
             es: 'Esloveno',
         },
         status: 'commingsoon',
+        speakers: 2500000,
     },
     et: {
         nativeName: 'Eesti',
@@ -2449,6 +2522,7 @@ const LANGUAGES = {
             es: 'Estonio',
         },
         status: 'commingsoon',
+        speakers: 1100000,
     },
     ms: {
         nativeName: 'Bahasa Melayu',
@@ -2463,6 +2537,7 @@ const LANGUAGES = {
             es: 'Malayo',
         },
         status: 'commingsoon',
+        speakers: 290000000,
     },
     sw: {
         nativeName: 'Kiswahili',
@@ -2477,6 +2552,7 @@ const LANGUAGES = {
             es: 'Suajili',
         },
         status: 'commingsoon',
+        speakers: 200000000,
     },
     fa: {
         nativeName: 'فارسی (Fārsī)',
@@ -2491,6 +2567,7 @@ const LANGUAGES = {
             es: 'Persa',
         },
         status: 'commingsoon',
+        speakers: 110000000,
     },
     bn: {
         nativeName: 'বাংলা (Bangla)',
@@ -2505,6 +2582,7 @@ const LANGUAGES = {
             es: 'Bengalí',
         },
         status: 'commingsoon',
+        speakers: 272000000,
     },
     ur: {
         nativeName: 'اردو (Urdū)',
@@ -2519,6 +2597,7 @@ const LANGUAGES = {
             es: 'Urdu',
         },
         status: 'commingsoon',
+        speakers: 231000000,
     },
     sr: {
         nativeName: 'Српски (Srpski)',
@@ -2533,6 +2612,7 @@ const LANGUAGES = {
             es: 'Serbio',
         },
         status: 'commingsoon',
+        speakers: 9000000,
     },
     is: {
         nativeName: 'Íslenska',
@@ -2547,6 +2627,7 @@ const LANGUAGES = {
             es: 'Islandés',
         },
         status: 'commingsoon',
+        speakers: 314000,
     },
     ta: {
         nativeName: 'தமிழ் (Tamiḻ)',
@@ -2561,6 +2642,7 @@ const LANGUAGES = {
             es: 'Tamil',
         },
         status: 'commingsoon',
+        speakers: 86000000,
     },
     mr: {
         nativeName: 'मराठी (Marāṭhī)',
@@ -2575,6 +2657,7 @@ const LANGUAGES = {
             es: 'Maratí',
         },
         status: 'commingsoon',
+        speakers: 99000000,
     },
     my: {
         nativeName: 'မြန်မာဘာသာ (Myanmar)',
@@ -2589,6 +2672,7 @@ const LANGUAGES = {
             es: 'Birmano',
         },
         status: 'commingsoon',
+        speakers: 43000000,
     },
     cy: {
         nativeName: 'Cymraeg',
@@ -2603,6 +2687,7 @@ const LANGUAGES = {
             es: 'Galés',
         },
         status: 'commingsoon',
+        speakers: 724000,
     },
     ha: {
         nativeName: 'Hausa',
@@ -2617,6 +2702,7 @@ const LANGUAGES = {
             es: 'Hausa',
         },
         status: 'commingsoon',
+        speakers: 130000000,
     },
     eu: {
         nativeName: 'Euskara',
@@ -2631,6 +2717,7 @@ const LANGUAGES = {
             es: 'Vasco',
         },
         status: 'commingsoon',
+        speakers: 750000,
     },
     ga: {
         nativeName: 'Gaeilge',
@@ -2645,6 +2732,7 @@ const LANGUAGES = {
             es: 'Irlandés',
         },
         status: 'commingsoon',
+        speakers: 1900000,
     },
     sd: {
         nativeName: 'سنڌي (Sindhī)',
@@ -2659,6 +2747,7 @@ const LANGUAGES = {
             es: 'Sindi',
         },
         status: 'commingsoon',
+        speakers: 32000000,
     },
     am: {
         nativeName: 'አማርኛ (Amarəñña)',
@@ -2673,6 +2762,7 @@ const LANGUAGES = {
             es: 'Amárico',
         },
         status: 'commingsoon',
+        speakers: 57000000,
     },
     jv: {
         nativeName: 'Basa Jawa',
@@ -2687,6 +2777,7 @@ const LANGUAGES = {
             es: 'Javanés',
         },
         status: 'commingsoon',
+        speakers: 68000000,
     },
     km: {
         nativeName: 'ភាសាខ្មែរ (Phéasa Khmér)',
@@ -2701,6 +2792,7 @@ const LANGUAGES = {
             es: 'Jemer',
         },
         status: 'commingsoon',
+        speakers: 16000000,
     },
     yo: {
         nativeName: 'Yorùbá',
@@ -2715,6 +2807,7 @@ const LANGUAGES = {
             es: 'Yoruba',
         },
         status: 'commingsoon',
+        speakers: 50000000,
     },
     gl: {
         nativeName: 'Galego',
@@ -2729,6 +2822,7 @@ const LANGUAGES = {
             es: 'Gallego',
         },
         status: 'commingsoon',
+        speakers: 2400000,
     },
 };
 function getLangDesc(langCode, lang) {