bit-ng-library 20.1.6 → 20.1.8

package/README.md

@@ -38,6 +38,11 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
 
 ## changelog
 
+## [20.1.8] -2026-02-04
+
+Se añade flexibilidad a la toolbar, que ahora puede tener otherActions en desplegable y como botón.
+Para que una otherACtion se muestre como botón, otherActionsDropdown debe valer false y la acción correspondiente debe tener displayAsButton a true.
+
 ## [20.1.6] -2026-01-14
 
 Se añade fluid al incluir un p-autoComplete. Es una directiva de PrimeNG que consigue que el campo de autocompletar ocupe todo el ancho disponible en su contenedor.

package/fesm2022/bit-ng-library.mjs

@@ -2312,7 +2312,7 @@ function buildDefaultToolbarForm(formType, saveEnable = true, soloLectura = fals
     }
 }
 /**
-  * Construye la típica toolbar en función del tipo de formulario:
+ * Construye la típica toolbar en función del tipo de formulario:
  *  FormType.Select: botón de print visible y habilitado
  *  FormType.Insert: botónes:
  *      - save visible y habilitado en función de saveEnable.
@@ -2347,22 +2347,21 @@ function addButtonToToolbar(toolbar, buttonName, button) {
  * @param action string con el nombre de la action cuando se pulse el botón
  * @param label string con la etiqueta usada para buscar en el fichero de traducciones
  * @param estilo string con el estilo a aplicar
+ * @param displayAsButton boolean para indicar si la acción (siendo otherAction) se fuerza para mostrar como botón (true)
  * @returns un objeto de tipo ToolbarButtonType
  */
-function buildButtonToolbar(visible, enable, otherAction, action, label, estilo) {
+function buildButtonToolbar(visible, enable, otherAction, action, label, estilo, displayAsButton) {
     let optionToolbar = { visible, enable };
-    if (otherAction) {
+    if (otherAction)
         optionToolbar["otherAction"] = otherAction;
-    }
-    if (action) {
+    if (action)
         optionToolbar["action"] = action;
-    }
-    if (label) {
+    if (label)
         optionToolbar["label"] = label;
-    }
-    if (estilo) {
+    if (estilo)
         optionToolbar["estilo"] = estilo;
-    }
+    if (displayAsButton)
+        optionToolbar["displayAsButton"] = displayAsButton;
     return optionToolbar;
 }
 function makeToolbarChildList(enableDelete) {
@@ -3090,34 +3089,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], propDecorators: { ayuda: [{ type: i0.Input, args: [{ isSignal: true, alias: "ayuda", required: false }] }], boton: [{ type: i0.Input, args: [{ isSignal: true, alias: "boton", required: false }] }], extraClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraClass", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }] } });
 
-/**
- * Convierte un map de acciones del toolbar en un array de acciones pero conteniendo
- * solo aquellas acciones que tengan la propiedad otherAction definida a true
- */
-class OtherToolbarActionPipe {
-    transform(toolbarMap) {
-        let actions = [];
-        for (var key in toolbarMap) {
-            if (toolbarMap[key].otherAction) {
-                actions.push(toolbarMap[key]);
-            }
-        }
-        return actions;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OtherToolbarActionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: OtherToolbarActionPipe, isStandalone: false, name: "otherToolbarAction" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OtherToolbarActionPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: "otherToolbarAction",
-                    standalone: false
-                }]
-        }] });
-
 /**
  * Componenente que muestra una barra de botones.
- **/
+ */
 class BitToolbarComponent extends BaseComponent {
     static { this.FILTER_BUTTON = "filter"; }
     static { this.PRINT_BUTTON = "print"; }
@@ -3131,31 +3105,34 @@ class BitToolbarComponent extends BaseComponent {
         super();
         this.translateService = inject(TranslateService);
         this.mostrar = false;
+        this.translations = {};
         this.toolbar = input(...(ngDevMode ? [undefined, { debugName: "toolbar" }] : []));
         this.ayuda = input(...(ngDevMode ? [undefined, { debugName: "ayuda" }] : [])); // clave de la ayuda contextual que mostrar para su botón
         this.femenino = input(false, ...(ngDevMode ? [{ debugName: "femenino" }] : [])); // género femenino (para los nombres de botones) o no
         this.buttonSize = input(...(ngDevMode ? [undefined, { debugName: "buttonSize" }] : [])); // tamaño de los botones, por defecto normal
-        this.otherActionsDropdown = input(false, ...(ngDevMode ? [{ debugName: "otherActionsDropdown" }] : [])); // determina si las "other actions" deben mostrarse en línea o como un desplegable
+        this.otherActionsDropdown = input(false, ...(ngDevMode ? [{ debugName: "otherActionsDropdown" }] : [])); // determina si todas las "other actions" se muestran en un desplegable o depende del atributo displayAsButton de cada una
         this.onToolbarButtonPressed = output();
-        this.mostrarOtherActionsEnDesplegable = computed(() => {
-            // calcular si las other actions deben mostrarse en desplegable
-            // (se ha pedido asi y hay más de una)
-            let otherActionsVisibles = 0;
-            for (let key in this.toolbar()) {
-                const toolbar = this.toolbar();
-                if (toolbar[key].otherAction && toolbar[key].visible) {
-                    otherActionsVisibles++;
-                }
-            }
-            return this.otherActionsDropdown() && otherActionsVisibles > 1;
-        }, ...(ngDevMode ? [{ debugName: "mostrarOtherActionsEnDesplegable" }] : []));
-        this.itemsOtherActions = computed(() => {
-            if (this.mostrarOtherActionsEnDesplegable()) {
-                return this.getOtherActionsDropdownModel();
-            }
-            return [];
-        }, ...(ngDevMode ? [{ debugName: "itemsOtherActions" }] : []));
-        this.translateService.selectTranslate("toolbar", {}, "bitnglibrary", true)
+        /** Devuelve si hay other actions que deben mostrarse en desplegable (solo cuando hay más de una). */
+        this.itemsOtherActionsEnDesplegable = computed(() => {
+            const toolbar = this.toolbar() || {};
+            const actions = Object.values(toolbar).filter((item) => this.incluirOtherActionEnDropdown(item));
+            if (actions?.length > 1)
+                return actions;
+            else
+                return [];
+        }, ...(ngDevMode ? [{ debugName: "itemsOtherActionsEnDesplegable" }] : []));
+        /** Devuelve si hay other actions que deben mostrarse como botón (incluye la de desplegable si hay solo una). */
+        this.itemsOtherActionsEnBoton = computed(() => {
+            const toolbar = this.toolbar() || {};
+            const actions = Object.values(toolbar).filter((item) => this.incluirOtherActionComoBoton(item));
+            const actionsEnDesplegable = this.itemsOtherActionsEnDesplegable();
+            // Si hay acciones en desplegable y solo es una, la incluimos también como botón
+            if (actionsEnDesplegable?.length === 1)
+                actions.push(actionsEnDesplegable[0]);
+            return actions;
+        }, ...(ngDevMode ? [{ debugName: "itemsOtherActionsEnBoton" }] : []));
+        this.translateService
+            .selectTranslate("toolbar", {}, "bitnglibrary", true)
             .pipe(takeUntil(this.destroy$))
             .subscribe((translations) => {
             this.translations = translations;
@@ -3201,30 +3178,52 @@ class BitToolbarComponent extends BaseComponent {
     otherAction(button) {
         this.onToolbarButtonPressed.emit(button.action);
     }
-    // Recorremos el toolbar y devolvemos un array con las acciones que tengan la propiedad otherAction a true,
-    // transformadas a MenuItem, para poder mostrarlas en el desplegable de SplitButton
+    /**
+     * Recorremos el toolbar y devolvemos un array con las acciones que tienen que incluirse
+     * transformadas a MenuItem, para poder mostrarlas en el desplegable de SplitButton.
+     */
     getOtherActionsDropdownModel() {
         let actions = [];
-        for (let key in this.toolbar()) {
-            const toolbar = this.toolbar();
-            if (toolbar[key].otherAction) {
+        const toolbar = this.toolbar();
+        for (let key in toolbar) {
+            if (this.incluirOtherActionEnDropdown(toolbar[key])) {
                 let toolbarItem = toolbar[key]; // capture the current toolbar item
                 actions.push({
                     label: this.translations[toolbarItem.label],
                     icon: toolbarItem.estilo,
                     visible: toolbarItem.visible,
-                    command: () => { this.otherAction(toolbarItem); } // use the captured toolbar item
+                    command: () => {
+                        this.otherAction(toolbarItem);
+                    } // use the captured toolbar item
                 });
             }
         }
         return actions;
     }
+    /**
+     * Indica si la acción debe incluirse en el desplegable de "other actions":
+     * - Es una otherAction
+     * - Es visible
+     * - Todas se tienen que incluir en desplegable (this.otherActionsDropdown() es true) y esta acción tiene displayAsButton como "no true"
+     */
+    incluirOtherActionEnDropdown(toolbarItem) {
+        return toolbarItem.otherAction && toolbarItem.visible && this.otherActionsDropdown() && toolbarItem.displayAsButton !== true;
+    }
+    /**
+     * Indica si la acción debe incluirse como botón "other actions":
+     * - Es una otherAction
+     * - Es visible
+     * - No todas se tienen que incluir en desplegable (this.otherActionsDropdown() es false) o esta acción tiene displayAsButton como "true"
+     */
+    incluirOtherActionComoBoton(toolbarItem) {
+        return toolbarItem.otherAction && toolbarItem.visible && (!this.otherActionsDropdown() || toolbarItem.displayAsButton === true);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BitToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BitToolbarComponent, isStandalone: false, selector: "bit-toolbar", inputs: { toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, ayuda: { classPropertyName: "ayuda", publicName: "ayuda", isSignal: true, isRequired: false, transformFunction: null }, femenino: { classPropertyName: "femenino", publicName: "femenino", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, otherActionsDropdown: { classPropertyName: "otherActionsDropdown", publicName: "otherActionsDropdown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToolbarButtonPressed: "onToolbarButtonPressed" }, usesInheritance: true, ngImport: i0, template: "<!-- acciones no estandar definidas din\u00E1micamente o muy particulares-->\r\n<!-- si otherActionsDropdown viene a true y hay m\u00E1s de una acci\u00F3n, se muestran como un desplegable, si no, todas las acciones en l\u00EDnea -->\r\n<div class=\"contenedor-toolbar\">\r\n\r\n  @if (mostrarOtherActionsEnDesplegable()) {\r\n    @if (otherActionsDropdown()) {\r\n      <p-splitbutton label=\"{{'bitnglibrary.toolbar.other-actions' | transloco}}\" [model]=\"itemsOtherActions()\" />\r\n    }\r\n  }\r\n\r\n  <!-- si otherActionsDropdown viene a false o solo hay una acci\u00F3n, se muestran una tras otra en l\u00EDnea -->\r\n  @if (!mostrarOtherActionsEnDesplegable()) {\r\n    @for (button of (toolbar() | otherToolbarAction); track button) {\r\n      @if (button.visible) {\r\n        <p-button type=\"button\" [disabled]=\"!button.enable\" (click)=\"otherAction(button)\" [size]=\"buttonSize()\">{{\"bitnglibrary.toolbar.\"+button.label | transloco}}&nbsp;&nbsp;<span [class]=\"button.estilo?button.estilo:'pi pi-angle-right'\"></span></p-button>\r\n      }\r\n    }\r\n  }\r\n  <!-- acciones estandar -->\r\n  @if (visible('new')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('new')\" (click)=\"newElement()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{(femenino() ? \"bitnglibrary.toolbar.new-female\": \"bitnglibrary.toolbar.new\") | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('new', 'pi pi-plus')\"></span></p-button>\r\n  }\r\n  @if (visible('add')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('add')\" (click)=\"add()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.add\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('add', 'pi pi-plus')\"></span></p-button>\r\n  }\r\n\r\n  @if (visible('export')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('export')\" (click)=\"exportData()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.export\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('export', 'pi pi-file')\"></span></p-button>\r\n  }\r\n  @if (visible('save')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('save')\" (click)=\"save()\" [size]=\"buttonSize()\" styleClass=\"p-button-success\">{{\"bitnglibrary.toolbar.save\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('save', 'pi pi-save')\"></span></p-button>\r\n  }\r\n  @if (visible('delete')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('delete')\" (click)=\"delete()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.delete\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('delete', 'pi pi-trash')\"></span></p-button>\r\n  }\r\n  @if (visible('print')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('print')\" (click)=\"print()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.print\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('print', 'pi pi-print')\"></span></p-button>\r\n  }\r\n  @if (ayuda()) {\r\n    <bit-boton-ayuda boton=\"true\" [ayuda]=\"ayuda()\" [buttonSize]=\"buttonSize()\" />\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: i3$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", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$2.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "component", type: BitBotonAyudaComponent, selector: "bit-boton-ayuda", inputs: ["ayuda", "boton", "extraClass", "buttonSize"] }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: OtherToolbarActionPipe, name: "otherToolbarAction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BitToolbarComponent, isStandalone: false, selector: "bit-toolbar", inputs: { toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, ayuda: { classPropertyName: "ayuda", publicName: "ayuda", isSignal: true, isRequired: false, transformFunction: null }, femenino: { classPropertyName: "femenino", publicName: "femenino", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, otherActionsDropdown: { classPropertyName: "otherActionsDropdown", publicName: "otherActionsDropdown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToolbarButtonPressed: "onToolbarButtonPressed" }, usesInheritance: true, ngImport: i0, template: "<div class=\"contenedor-toolbar\">\r\n\r\n  <!-- acciones no estandar definidas din\u00E1micamente o muy particulares que se deben incluir en un desplegable -->\r\n  @if (itemsOtherActionsEnDesplegable().length > 1) {\r\n    <p-splitbutton label=\"{{'bitnglibrary.toolbar.other-actions' | transloco}}\" [model]=\"getOtherActionsDropdownModel()\" />\r\n  }\r\n\r\n  <!-- acciones no estandar definidas din\u00E1micamente o muy particulares que se muestran una tras otra en l\u00EDnea -->\r\n  @for (button of itemsOtherActionsEnBoton(); track button) {\r\n    <p-button type=\"button\" [disabled]=\"!button.enable\" (click)=\"otherAction(button)\" [size]=\"buttonSize()\">{{\"bitnglibrary.toolbar.\"+button.label | transloco}}&nbsp;&nbsp;<span [class]=\"button.estilo?button.estilo:'pi pi-angle-right'\"></span></p-button>\r\n  }\r\n\r\n  <!-- acciones estandar -->\r\n  @if (visible('new')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('new')\" (click)=\"newElement()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{(femenino() ? \"bitnglibrary.toolbar.new-female\": \"bitnglibrary.toolbar.new\") | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('new', 'pi pi-plus')\"></span></p-button>\r\n  }\r\n  @if (visible('add')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('add')\" (click)=\"add()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.add\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('add', 'pi pi-plus')\"></span></p-button>\r\n  }\r\n\r\n  @if (visible('export')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('export')\" (click)=\"exportData()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.export\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('export', 'pi pi-file')\"></span></p-button>\r\n  }\r\n  @if (visible('save')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('save')\" (click)=\"save()\" [size]=\"buttonSize()\" styleClass=\"p-button-success\">{{\"bitnglibrary.toolbar.save\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('save', 'pi pi-save')\"></span></p-button>\r\n  }\r\n  @if (visible('delete')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('delete')\" (click)=\"delete()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.delete\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('delete', 'pi pi-trash')\"></span></p-button>\r\n  }\r\n  @if (visible('print')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('print')\" (click)=\"print()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.print\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('print', 'pi pi-print')\"></span></p-button>\r\n  }\r\n  @if (ayuda()) {\r\n    <bit-boton-ayuda boton=\"true\" [ayuda]=\"ayuda()\" [buttonSize]=\"buttonSize()\" />\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: i3$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", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$2.SplitButton, selector: "p-splitbutton, p-splitButton, p-split-button", inputs: ["model", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "icon", "iconPos", "label", "tooltip", "tooltipOptions", "styleClass", "menuStyle", "menuStyleClass", "dropdownIcon", "appendTo", "dir", "expandAriaLabel", "showTransitionOptions", "hideTransitionOptions", "buttonProps", "menuButtonProps", "autofocus", "disabled", "tabindex", "menuButtonDisabled", "buttonDisabled"], outputs: ["onClick", "onMenuHide", "onMenuShow", "onDropdownClick"] }, { kind: "component", type: BitBotonAyudaComponent, selector: "bit-boton-ayuda", inputs: ["ayuda", "boton", "extraClass", "buttonSize"] }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BitToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "bit-toolbar", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- acciones no estandar definidas din\u00E1micamente o muy particulares-->\r\n<!-- si otherActionsDropdown viene a true y hay m\u00E1s de una acci\u00F3n, se muestran como un desplegable, si no, todas las acciones en l\u00EDnea -->\r\n<div class=\"contenedor-toolbar\">\r\n\r\n  @if (mostrarOtherActionsEnDesplegable()) {\r\n    @if (otherActionsDropdown()) {\r\n      <p-splitbutton label=\"{{'bitnglibrary.toolbar.other-actions' | transloco}}\" [model]=\"itemsOtherActions()\" />\r\n    }\r\n  }\r\n\r\n  <!-- si otherActionsDropdown viene a false o solo hay una acci\u00F3n, se muestran una tras otra en l\u00EDnea -->\r\n  @if (!mostrarOtherActionsEnDesplegable()) {\r\n    @for (button of (toolbar() | otherToolbarAction); track button) {\r\n      @if (button.visible) {\r\n        <p-button type=\"button\" [disabled]=\"!button.enable\" (click)=\"otherAction(button)\" [size]=\"buttonSize()\">{{\"bitnglibrary.toolbar.\"+button.label | transloco}}&nbsp;&nbsp;<span [class]=\"button.estilo?button.estilo:'pi pi-angle-right'\"></span></p-button>\r\n      }\r\n    }\r\n  }\r\n  <!-- acciones estandar -->\r\n  @if (visible('new')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('new')\" (click)=\"newElement()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{(femenino() ? \"bitnglibrary.toolbar.new-female\": \"bitnglibrary.toolbar.new\") | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('new', 'pi pi-plus')\"></span></p-button>\r\n  }\r\n  @if (visible('add')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('add')\" (click)=\"add()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.add\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('add', 'pi pi-plus')\"></span></p-button>\r\n  }\r\n\r\n  @if (visible('export')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('export')\" (click)=\"exportData()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.export\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('export', 'pi pi-file')\"></span></p-button>\r\n  }\r\n  @if (visible('save')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('save')\" (click)=\"save()\" [size]=\"buttonSize()\" styleClass=\"p-button-success\">{{\"bitnglibrary.toolbar.save\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('save', 'pi pi-save')\"></span></p-button>\r\n  }\r\n  @if (visible('delete')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('delete')\" (click)=\"delete()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.delete\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('delete', 'pi pi-trash')\"></span></p-button>\r\n  }\r\n  @if (visible('print')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('print')\" (click)=\"print()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.print\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('print', 'pi pi-print')\"></span></p-button>\r\n  }\r\n  @if (ayuda()) {\r\n    <bit-boton-ayuda boton=\"true\" [ayuda]=\"ayuda()\" [buttonSize]=\"buttonSize()\" />\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: "bit-toolbar", changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"contenedor-toolbar\">\r\n\r\n  <!-- acciones no estandar definidas din\u00E1micamente o muy particulares que se deben incluir en un desplegable -->\r\n  @if (itemsOtherActionsEnDesplegable().length > 1) {\r\n    <p-splitbutton label=\"{{'bitnglibrary.toolbar.other-actions' | transloco}}\" [model]=\"getOtherActionsDropdownModel()\" />\r\n  }\r\n\r\n  <!-- acciones no estandar definidas din\u00E1micamente o muy particulares que se muestran una tras otra en l\u00EDnea -->\r\n  @for (button of itemsOtherActionsEnBoton(); track button) {\r\n    <p-button type=\"button\" [disabled]=\"!button.enable\" (click)=\"otherAction(button)\" [size]=\"buttonSize()\">{{\"bitnglibrary.toolbar.\"+button.label | transloco}}&nbsp;&nbsp;<span [class]=\"button.estilo?button.estilo:'pi pi-angle-right'\"></span></p-button>\r\n  }\r\n\r\n  <!-- acciones estandar -->\r\n  @if (visible('new')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('new')\" (click)=\"newElement()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{(femenino() ? \"bitnglibrary.toolbar.new-female\": \"bitnglibrary.toolbar.new\") | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('new', 'pi pi-plus')\"></span></p-button>\r\n  }\r\n  @if (visible('add')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('add')\" (click)=\"add()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.add\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('add', 'pi pi-plus')\"></span></p-button>\r\n  }\r\n\r\n  @if (visible('export')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('export')\" (click)=\"exportData()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.export\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('export', 'pi pi-file')\"></span></p-button>\r\n  }\r\n  @if (visible('save')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('save')\" (click)=\"save()\" [size]=\"buttonSize()\" styleClass=\"p-button-success\">{{\"bitnglibrary.toolbar.save\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('save', 'pi pi-save')\"></span></p-button>\r\n  }\r\n  @if (visible('delete')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('delete')\" (click)=\"delete()\" [size]=\"buttonSize()\" styleClass=\"p-button-danger\">{{\"bitnglibrary.toolbar.delete\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('delete', 'pi pi-trash')\"></span></p-button>\r\n  }\r\n  @if (visible('print')) {\r\n    <p-button type=\"button\" [disabled]=\"!enable('print')\" (click)=\"print()\" [size]=\"buttonSize()\" styleClass=\"p-button-secondary\">{{\"bitnglibrary.toolbar.print\" | transloco}}&nbsp;&nbsp;<span [class]=\"estilo('print', 'pi pi-print')\"></span></p-button>\r\n  }\r\n  @if (ayuda()) {\r\n    <bit-boton-ayuda boton=\"true\" [ayuda]=\"ayuda()\" [buttonSize]=\"buttonSize()\" />\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], ayuda: [{ type: i0.Input, args: [{ isSignal: true, alias: "ayuda", required: false }] }], femenino: [{ type: i0.Input, args: [{ isSignal: true, alias: "femenino", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }], otherActionsDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "otherActionsDropdown", required: false }] }], onToolbarButtonPressed: [{ type: i0.Output, args: ["onToolbarButtonPressed"] }] } });
 
 /**
@@ -5152,6 +5151,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+/**
+ * Convierte un map de acciones del toolbar en un array de acciones pero conteniendo
+ * solo aquellas acciones que tengan la propiedad otherAction definida a true
+ */
+class OtherToolbarActionPipe {
+    transform(toolbarMap) {
+        let actions = [];
+        for (var key in toolbarMap) {
+            if (toolbarMap[key].otherAction) {
+                actions.push(toolbarMap[key]);
+            }
+        }
+        return actions;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OtherToolbarActionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: OtherToolbarActionPipe, isStandalone: false, name: "otherToolbarAction" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OtherToolbarActionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "otherToolbarAction",
+                    standalone: false
+                }]
+        }] });
+
 /**
  * Acorta un texto con saltos de línea, sustituyendo los saltos por "//" y limitando la cadena final a 200 caracteres
  */