@cauca-911/material 20.0.13 → 20.0.14

package/fesm2022/cauca-911-material.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Output, Input, signal, inject, HostListener, Injector, ElementRef, forwardRef, input, computed, output, ChangeDetectionStrategy, Inject, HostBinding, model, TemplateRef, Optional, Self, ContentChild, ViewChild } from '@angular/core';
+import { Injectable, Component, EventEmitter, Output, Input, signal, inject, HostListener, Injector, ElementRef, forwardRef, input, computed, output, Directive, ChangeDetectionStrategy, Inject, HostBinding, model, TemplateRef, Optional, Self, ContentChild, ViewChild } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe, TranslateService } from '@ngx-translate/core';
 import * as i1$6 from '@angular/material/dialog';
@@ -718,6 +718,47 @@ class CaucaDateTimePickerComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaDateTimePickerComponent, { className: "CaucaDateTimePickerComponent", filePath: "lib/cauca-date-time-picker/cauca-date-time-picker.component.ts", lineNumber: 33 }); })();
 
+class BaseButton {
+    constructor() {
+        this.colorOnHover = input(undefined, ...(ngDevMode ? [{ debugName: "colorOnHover" }] : []));
+        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.iconAlignment = input('left', ...(ngDevMode ? [{ debugName: "iconAlignment" }] : []));
+        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        this.isInProgress = input(false, ...(ngDevMode ? [{ debugName: "isInProgress" }] : []));
+        this.iconColor = computed(() => this.isHovered() ? this.colorOnHover() || this.color() : this.color(), ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+        this.showIcon = computed(() => !!this.icon() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
+        this.iconToShow = computed(() => this.isInProgress() ? 'update' : this.icon(), ...(ngDevMode ? [{ debugName: "iconToShow" }] : []));
+        this.buttonDisabled = computed(() => this.isDisabled() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : []));
+        this.buttonClick = output();
+        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
+    }
+    onMouseEnter() {
+        this.isHovered.set(true);
+    }
+    onMouseLeave() {
+        this.isHovered.set(false);
+    }
+    static { this.ɵfac = function BaseButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseButton)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseButton, inputs: { colorOnHover: [1, "colorOnHover"], color: [1, "color"], icon: [1, "icon"], iconAlignment: [1, "iconAlignment"], isDisabled: [1, "isDisabled"], isInProgress: [1, "isInProgress"] }, outputs: { buttonClick: "buttonClick" } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseButton, [{
+        type: Directive
+    }], null, null); })();
+class BaseButtonWithLabel extends BaseButton {
+    constructor() {
+        super(...arguments);
+        this.translateLabel = input(true, ...(ngDevMode ? [{ debugName: "translateLabel" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵBaseButtonWithLabel_BaseFactory; return function BaseButtonWithLabel_Factory(__ngFactoryType__) { return (ɵBaseButtonWithLabel_BaseFactory || (ɵBaseButtonWithLabel_BaseFactory = i0.ɵɵgetInheritedFactory(BaseButtonWithLabel)))(__ngFactoryType__ || BaseButtonWithLabel); }; })(); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseButtonWithLabel, inputs: { translateLabel: [1, "translateLabel"], label: [1, "label"], small: [1, "small"] }, features: [i0.ɵɵInheritDefinitionFeature] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseButtonWithLabel, [{
+        type: Directive
+    }], null, null); })();
+
 function BasicButtonComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-icon");
     i0.ɵɵtext(1);
@@ -751,32 +792,9 @@ function BasicButtonComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.iconToShow());
 } }
-class BasicButtonComponent {
-    constructor() {
-        this.translateLabel = input(true, ...(ngDevMode ? [{ debugName: "translateLabel" }] : []));
-        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
-        this.colorOnHover = input(undefined, ...(ngDevMode ? [{ debugName: "colorOnHover" }] : []));
-        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
-        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-        this.iconAlignment = input('left', ...(ngDevMode ? [{ debugName: "iconAlignment" }] : []));
-        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.isInProgress = input(false, ...(ngDevMode ? [{ debugName: "isInProgress" }] : []));
-        this.iconColor = computed(() => this.isHovered() ? this.colorOnHover() || this.color() : this.color(), ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
-        this.showIcon = computed(() => !!this.icon() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
-        this.iconToShow = computed(() => this.isInProgress() ? 'update' : this.icon(), ...(ngDevMode ? [{ debugName: "iconToShow" }] : []));
-        this.buttonDisabled = computed(() => this.isDisabled() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : []));
-        this.buttonClick = output();
-        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
-    }
-    onMouseEnter() {
-        this.isHovered.set(true);
-    }
-    onMouseLeave() {
-        this.isHovered.set(false);
-    }
-    static { this.ɵfac = function BasicButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BasicButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BasicButtonComponent, selectors: [["cauca-basic-button"]], inputs: { translateLabel: [1, "translateLabel"], label: [1, "label"], small: [1, "small"], colorOnHover: [1, "colorOnHover"], color: [1, "color"], icon: [1, "icon"], iconAlignment: [1, "iconAlignment"], isDisabled: [1, "isDisabled"], isInProgress: [1, "isInProgress"] }, outputs: { buttonClick: "buttonClick" }, decls: 5, vars: 6, consts: [["mat-button", "", "onclick", "this.blur()", 3, "click", "ngClass", "color", "disabled"], [3, "button-spin"]], template: function BasicButtonComponent_Template(rf, ctx) { if (rf & 1) {
+class BasicButtonComponent extends BaseButtonWithLabel {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵBasicButtonComponent_BaseFactory; return function BasicButtonComponent_Factory(__ngFactoryType__) { return (ɵBasicButtonComponent_BaseFactory || (ɵBasicButtonComponent_BaseFactory = i0.ɵɵgetInheritedFactory(BasicButtonComponent)))(__ngFactoryType__ || BasicButtonComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BasicButtonComponent, selectors: [["cauca-basic-button"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 6, consts: [["mat-button", "", "onclick", "this.blur()", 3, "click", "ngClass", "color", "disabled"], [3, "button-spin"]], template: function BasicButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵlistener("click", function BasicButtonComponent_Template_button_click_0_listener() { return ctx.buttonClick.emit(); });
             i0.ɵɵconditionalCreate(1, BasicButtonComponent_Conditional_1_Template, 2, 3, "mat-icon", 1);
@@ -797,7 +815,7 @@ class BasicButtonComponent {
         type: Component,
         args: [{ selector: 'cauca-basic-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatButton, TranslateModule, NgClass], template: "<button mat-button [ngClass]=\"small() ? 'small-button' : ''\" [color]=\"color()\"  onclick=\"this.blur()\" [disabled]=\"buttonDisabled()\" (click)=\"buttonClick.emit()\">\r\n    @if(showIcon() && iconAlignment() === 'left') { <mat-icon [class.button-spin]=\"isInProgress()\">{{iconToShow()}}</mat-icon> }\r\n    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}\r\n    @if(showIcon() && iconAlignment() === 'right') { <mat-icon [class.button-spin]=\"isInProgress()\">{{iconToShow()}}</mat-icon> }\r\n</button>", styles: [".mdc-button.mat-white,.mat-stroked-button.mat-white{color:#fff;border-color:#fff}.mdc-button.mat-white:hover,.mat-mdc-outlined-button.mat-white:hover{background-color:transparent}mat-icon{color:inherit}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BasicButtonComponent, { className: "BasicButtonComponent", filePath: "lib/buttons/basic-button/basic-button.component.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BasicButtonComponent, { className: "BasicButtonComponent", filePath: "lib/buttons/basic-button/basic-button.component.ts", lineNumber: 16 }); })();
 
 function FabButtonComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-icon");
@@ -810,32 +828,13 @@ function FabButtonComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.iconToShow());
 } }
-class FabButtonComponent {
+class FabButtonComponent extends BaseButtonWithLabel {
     constructor() {
+        super(...arguments);
         this.iconColor = computed(() => this.color() === 'primary' ? 'white' : undefined, ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
-        this.translateLabel = input(true, ...(ngDevMode ? [{ debugName: "translateLabel" }] : []));
-        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
-        this.colorOnHover = input(undefined, ...(ngDevMode ? [{ debugName: "colorOnHover" }] : []));
-        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
-        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-        this.iconAlignment = input('left', ...(ngDevMode ? [{ debugName: "iconAlignment" }] : []));
-        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.isInProgress = input(false, ...(ngDevMode ? [{ debugName: "isInProgress" }] : []));
-        this.showIcon = computed(() => !!this.icon() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
-        this.iconToShow = computed(() => this.isInProgress() ? 'update' : this.icon(), ...(ngDevMode ? [{ debugName: "iconToShow" }] : []));
-        this.buttonDisabled = computed(() => this.isDisabled() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : []));
-        this.buttonClick = output();
-        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
     }
-    onMouseEnter() {
-        this.isHovered.set(true);
-    }
-    onMouseLeave() {
-        this.isHovered.set(false);
-    }
-    static { this.ɵfac = function FabButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FabButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FabButtonComponent, selectors: [["cauca-fab-button"]], inputs: { translateLabel: [1, "translateLabel"], label: [1, "label"], small: [1, "small"], colorOnHover: [1, "colorOnHover"], color: [1, "color"], icon: [1, "icon"], iconAlignment: [1, "iconAlignment"], isDisabled: [1, "isDisabled"], isInProgress: [1, "isInProgress"] }, outputs: { buttonClick: "buttonClick" }, decls: 2, vars: 3, consts: [["mat-fab", "", "onclick", "this.blur()", 3, "click", "color", "disabled"], [3, "color", "button-spin"]], template: function FabButtonComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵFabButtonComponent_BaseFactory; return function FabButtonComponent_Factory(__ngFactoryType__) { return (ɵFabButtonComponent_BaseFactory || (ɵFabButtonComponent_BaseFactory = i0.ɵɵgetInheritedFactory(FabButtonComponent)))(__ngFactoryType__ || FabButtonComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FabButtonComponent, selectors: [["cauca-fab-button"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 3, consts: [["mat-fab", "", "onclick", "this.blur()", 3, "click", "color", "disabled"], [3, "color", "button-spin"]], template: function FabButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵlistener("click", function FabButtonComponent_Template_button_click_0_listener() { return ctx.buttonClick.emit(); });
             i0.ɵɵconditionalCreate(1, FabButtonComponent_Conditional_1_Template, 2, 5, "mat-icon", 1);
@@ -850,7 +849,7 @@ class FabButtonComponent {
         type: Component,
         args: [{ selector: 'cauca-fab-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule], template: "<button mat-fab [color]=\"color()\" onclick=\"this.blur()\" [disabled]=\"buttonDisabled()\" (click)=\"buttonClick.emit()\">\r\n    @if (showIcon()) { <mat-icon [style.color]=\"iconColor()\" [class.button-spin]=\"isInProgress()\">{{iconToShow()}}</mat-icon> }\r\n</button>", styles: [".mdc-button.mat-white,.mat-mdc-fab{color:#fff;border-color:#fff}.mdc-button.mat-white:hover,.mat-mdc-outlined-button.mat-white:hover{background-color:transparent}mat-icon{color:inherit}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FabButtonComponent, { className: "FabButtonComponent", filePath: "lib/buttons/fab-button/fab-button.component.ts", lineNumber: 13 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FabButtonComponent, { className: "FabButtonComponent", filePath: "lib/buttons/fab-button/fab-button.component.ts", lineNumber: 14 }); })();
 
 function FlatButtonComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-icon");
@@ -885,32 +884,9 @@ function FlatButtonComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.iconToShow());
 } }
-class FlatButtonComponent {
-    constructor() {
-        this.translateLabel = input(true, ...(ngDevMode ? [{ debugName: "translateLabel" }] : []));
-        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
-        this.colorOnHover = input(undefined, ...(ngDevMode ? [{ debugName: "colorOnHover" }] : []));
-        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
-        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-        this.iconAlignment = input('left', ...(ngDevMode ? [{ debugName: "iconAlignment" }] : []));
-        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.isInProgress = input(false, ...(ngDevMode ? [{ debugName: "isInProgress" }] : []));
-        this.iconColor = computed(() => this.isHovered() ? this.colorOnHover() || this.color() : this.color(), ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
-        this.showIcon = computed(() => !!this.icon() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
-        this.iconToShow = computed(() => this.isInProgress() ? 'update' : this.icon(), ...(ngDevMode ? [{ debugName: "iconToShow" }] : []));
-        this.buttonDisabled = computed(() => this.isDisabled() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : []));
-        this.buttonClick = output();
-        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
-    }
-    onMouseEnter() {
-        this.isHovered.set(true);
-    }
-    onMouseLeave() {
-        this.isHovered.set(false);
-    }
-    static { this.ɵfac = function FlatButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlatButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlatButtonComponent, selectors: [["cauca-flat-button"]], inputs: { translateLabel: [1, "translateLabel"], label: [1, "label"], small: [1, "small"], colorOnHover: [1, "colorOnHover"], color: [1, "color"], icon: [1, "icon"], iconAlignment: [1, "iconAlignment"], isDisabled: [1, "isDisabled"], isInProgress: [1, "isInProgress"] }, outputs: { buttonClick: "buttonClick" }, decls: 5, vars: 6, consts: [["mat-flat-button", "", "onclick", "this.blur()", 3, "click", "ngClass", "color", "disabled"], [3, "button-spin"]], template: function FlatButtonComponent_Template(rf, ctx) { if (rf & 1) {
+class FlatButtonComponent extends BaseButtonWithLabel {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵFlatButtonComponent_BaseFactory; return function FlatButtonComponent_Factory(__ngFactoryType__) { return (ɵFlatButtonComponent_BaseFactory || (ɵFlatButtonComponent_BaseFactory = i0.ɵɵgetInheritedFactory(FlatButtonComponent)))(__ngFactoryType__ || FlatButtonComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlatButtonComponent, selectors: [["cauca-flat-button"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 6, consts: [["mat-flat-button", "", "onclick", "this.blur()", 3, "click", "ngClass", "color", "disabled"], [3, "button-spin"]], template: function FlatButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵlistener("click", function FlatButtonComponent_Template_button_click_0_listener() { return ctx.buttonClick.emit(); });
             i0.ɵɵconditionalCreate(1, FlatButtonComponent_Conditional_1_Template, 2, 3, "mat-icon", 1);
@@ -931,31 +907,11 @@ class FlatButtonComponent {
         type: Component,
         args: [{ selector: 'cauca-flat-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, MatButton, TranslateModule, NgClass], template: "<button mat-flat-button [ngClass]=\"small() ? 'small-button' : ''\" [color]=\"color()\" onclick=\"this.blur()\"  [disabled]=\"buttonDisabled()\" (click)=\"buttonClick.emit();\">\r\n    @if(showIcon() && iconAlignment() === 'left') { <mat-icon [class.button-spin]=\"isInProgress()\">{{iconToShow()}}</mat-icon> }\r\n    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}\r\n    @if(showIcon() && iconAlignment() === 'right') { <mat-icon [class.button-spin]=\"isInProgress()\">{{iconToShow()}}</mat-icon> }\r\n</button>", styles: [".mdc-button.mat-white,.mat-stroked-button.mat-white{color:#fff;border-color:#fff}.mdc-button.mat-white:hover,.mat-mdc-outlined-button.mat-white:hover{background-color:transparent}mat-icon{color:inherit}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlatButtonComponent, { className: "FlatButtonComponent", filePath: "lib/buttons/flat-button/flat-button.component.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlatButtonComponent, { className: "FlatButtonComponent", filePath: "lib/buttons/flat-button/flat-button.component.ts", lineNumber: 16 }); })();
 
-class IconButtonComponent {
-    constructor() {
-        this.colorOnHover = input(undefined, ...(ngDevMode ? [{ debugName: "colorOnHover" }] : []));
-        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
-        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-        this.iconAlignment = input('left', ...(ngDevMode ? [{ debugName: "iconAlignment" }] : []));
-        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.isInProgress = input(false, ...(ngDevMode ? [{ debugName: "isInProgress" }] : []));
-        this.iconColor = computed(() => this.isHovered() ? this.colorOnHover() || this.color() : this.color(), ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
-        this.showIcon = computed(() => !!this.icon() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
-        this.iconToShow = computed(() => this.isInProgress() ? 'update' : this.icon(), ...(ngDevMode ? [{ debugName: "iconToShow" }] : []));
-        this.buttonDisabled = computed(() => this.isDisabled() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : []));
-        this.buttonClick = output();
-        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
-    }
-    onMouseEnter() {
-        this.isHovered.set(true);
-    }
-    onMouseLeave() {
-        this.isHovered.set(false);
-    }
-    static { this.ɵfac = function IconButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || IconButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: IconButtonComponent, selectors: [["cauca-icon-button"]], inputs: { colorOnHover: [1, "colorOnHover"], color: [1, "color"], icon: [1, "icon"], iconAlignment: [1, "iconAlignment"], isDisabled: [1, "isDisabled"], isInProgress: [1, "isInProgress"] }, outputs: { buttonClick: "buttonClick" }, decls: 3, vars: 6, consts: [["mat-icon-button", "", "onclick", "this.blur()", 3, "mouseenter", "mouseleave", "click", "disabled"]], template: function IconButtonComponent_Template(rf, ctx) { if (rf & 1) {
+class IconButtonComponent extends BaseButton {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵIconButtonComponent_BaseFactory; return function IconButtonComponent_Factory(__ngFactoryType__) { return (ɵIconButtonComponent_BaseFactory || (ɵIconButtonComponent_BaseFactory = i0.ɵɵgetInheritedFactory(IconButtonComponent)))(__ngFactoryType__ || IconButtonComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: IconButtonComponent, selectors: [["cauca-icon-button"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 6, consts: [["mat-icon-button", "", "onclick", "this.blur()", 3, "mouseenter", "mouseleave", "click", "disabled"]], template: function IconButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵlistener("mouseenter", function IconButtonComponent_Template_button_mouseenter_0_listener() { return ctx.onMouseEnter(); })("mouseleave", function IconButtonComponent_Template_button_mouseleave_0_listener() { return ctx.onMouseLeave(); })("click", function IconButtonComponent_Template_button_click_0_listener() { return ctx.buttonClick.emit(); });
             i0.ɵɵelementStart(1, "mat-icon");
@@ -1243,33 +1199,14 @@ function MenuItemComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.iconToShow());
 } }
-class MenuItemComponent {
+class MenuItemComponent extends BaseButtonWithLabel {
     constructor() {
+        super(...arguments);
         this.translateLabel = input(false, ...(ngDevMode ? [{ debugName: "translateLabel" }] : []));
         this.trigger = input(...(ngDevMode ? [undefined, { debugName: "trigger" }] : []));
-        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
-        this.colorOnHover = input(undefined, ...(ngDevMode ? [{ debugName: "colorOnHover" }] : []));
-        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
-        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-        this.iconAlignment = input('left', ...(ngDevMode ? [{ debugName: "iconAlignment" }] : []));
-        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.isInProgress = input(false, ...(ngDevMode ? [{ debugName: "isInProgress" }] : []));
-        this.iconColor = computed(() => this.isHovered() ? this.colorOnHover() || this.color() : this.color(), ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
-        this.showIcon = computed(() => !!this.icon() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
-        this.iconToShow = computed(() => this.isInProgress() ? 'update' : this.icon(), ...(ngDevMode ? [{ debugName: "iconToShow" }] : []));
-        this.buttonDisabled = computed(() => this.isDisabled() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : []));
-        this.buttonClick = output();
-        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
-    }
-    onMouseEnter() {
-        this.isHovered.set(true);
-    }
-    onMouseLeave() {
-        this.isHovered.set(false);
     }
-    static { this.ɵfac = function MenuItemComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemComponent, selectors: [["cauca-menu-item"]], inputs: { translateLabel: [1, "translateLabel"], trigger: [1, "trigger"], label: [1, "label"], small: [1, "small"], colorOnHover: [1, "colorOnHover"], color: [1, "color"], icon: [1, "icon"], iconAlignment: [1, "iconAlignment"], isDisabled: [1, "isDisabled"], isInProgress: [1, "isInProgress"] }, outputs: { buttonClick: "buttonClick" }, decls: 5, vars: 6, consts: [["mat-menu-item", "", 1, "change-password-menu-item", 3, "mouseenter", "mouseleave", "click", "ngClass", "matMenuTriggerFor", "disabled"], [3, "color", "button-spin"]], template: function MenuItemComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMenuItemComponent_BaseFactory; return function MenuItemComponent_Factory(__ngFactoryType__) { return (ɵMenuItemComponent_BaseFactory || (ɵMenuItemComponent_BaseFactory = i0.ɵɵgetInheritedFactory(MenuItemComponent)))(__ngFactoryType__ || MenuItemComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemComponent, selectors: [["cauca-menu-item"]], inputs: { translateLabel: [1, "translateLabel"], trigger: [1, "trigger"] }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 6, consts: [["mat-menu-item", "", 1, "change-password-menu-item", 3, "mouseenter", "mouseleave", "click", "ngClass", "matMenuTriggerFor", "disabled"], [3, "color", "button-spin"]], template: function MenuItemComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵlistener("mouseenter", function MenuItemComponent_Template_button_mouseenter_0_listener() { return ctx.onMouseEnter(); })("mouseleave", function MenuItemComponent_Template_button_mouseleave_0_listener() { return ctx.onMouseLeave(); })("click", function MenuItemComponent_Template_button_click_0_listener() { return ctx.buttonClick.emit(); });
             i0.ɵɵconditionalCreate(1, MenuItemComponent_Conditional_1_Template, 2, 5, "mat-icon", 1);
@@ -1290,7 +1227,7 @@ class MenuItemComponent {
         type: Component,
         args: [{ selector: 'cauca-menu-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuItem, TranslateModule, MatIcon, MatMenuTrigger, NgClass], template: "<button (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" mat-menu-item [ngClass]=\"small() ? 'small-button' : ''\" class=\"change-password-menu-item\" [matMenuTriggerFor]=\"trigger()\" [disabled]=\"buttonDisabled()\" (click)=\"buttonClick.emit()\">\r\n    @if(showIcon() && iconAlignment() === 'left') { <mat-icon [style.color]=\"iconColor()\" [class.button-spin]=\"isInProgress()\">{{iconToShow()}}</mat-icon> }\r\n    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}\r\n    @if(showIcon() && iconAlignment() === 'right') { <mat-icon [style.color]=\"iconColor()\" [class.button-spin]=\"isInProgress()\">{{iconToShow()}}</mat-icon> }\r\n</button>\r\n", styles: [".mat-mdc-menu-item .mat-icon-no-color{color:#0000008f}mat-icon{color:inherit}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemComponent, { className: "MenuItemComponent", filePath: "lib/buttons/menu-item/menu-item.component.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemComponent, { className: "MenuItemComponent", filePath: "lib/buttons/menu-item/menu-item.component.ts", lineNumber: 16 }); })();
 
 function RaisedButtonComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-icon");
@@ -1325,32 +1262,9 @@ function RaisedButtonComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.iconToShow());
 } }
-class RaisedButtonComponent {
-    constructor() {
-        this.translateLabel = input(true, ...(ngDevMode ? [{ debugName: "translateLabel" }] : []));
-        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
-        this.colorOnHover = input(undefined, ...(ngDevMode ? [{ debugName: "colorOnHover" }] : []));
-        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
-        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-        this.iconAlignment = input('left', ...(ngDevMode ? [{ debugName: "iconAlignment" }] : []));
-        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.isInProgress = input(false, ...(ngDevMode ? [{ debugName: "isInProgress" }] : []));
-        this.iconColor = computed(() => this.isHovered() ? this.colorOnHover() || this.color() : this.color(), ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
-        this.showIcon = computed(() => !!this.icon() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
-        this.iconToShow = computed(() => this.isInProgress() ? 'update' : this.icon(), ...(ngDevMode ? [{ debugName: "iconToShow" }] : []));
-        this.buttonDisabled = computed(() => this.isDisabled() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : []));
-        this.buttonClick = output();
-        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
-    }
-    onMouseEnter() {
-        this.isHovered.set(true);
-    }
-    onMouseLeave() {
-        this.isHovered.set(false);
-    }
-    static { this.ɵfac = function RaisedButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RaisedButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RaisedButtonComponent, selectors: [["cauca-raised-button"]], inputs: { translateLabel: [1, "translateLabel"], label: [1, "label"], small: [1, "small"], colorOnHover: [1, "colorOnHover"], color: [1, "color"], icon: [1, "icon"], iconAlignment: [1, "iconAlignment"], isDisabled: [1, "isDisabled"], isInProgress: [1, "isInProgress"] }, outputs: { buttonClick: "buttonClick" }, decls: 5, vars: 6, consts: [["mat-raised-button", "", "onclick", "this.blur()", 3, "click", "ngClass", "color", "disabled"], [3, "button-spin"]], template: function RaisedButtonComponent_Template(rf, ctx) { if (rf & 1) {
+class RaisedButtonComponent extends BaseButtonWithLabel {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵRaisedButtonComponent_BaseFactory; return function RaisedButtonComponent_Factory(__ngFactoryType__) { return (ɵRaisedButtonComponent_BaseFactory || (ɵRaisedButtonComponent_BaseFactory = i0.ɵɵgetInheritedFactory(RaisedButtonComponent)))(__ngFactoryType__ || RaisedButtonComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RaisedButtonComponent, selectors: [["cauca-raised-button"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 6, consts: [["mat-raised-button", "", "onclick", "this.blur()", 3, "click", "ngClass", "color", "disabled"], [3, "button-spin"]], template: function RaisedButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵlistener("click", function RaisedButtonComponent_Template_button_click_0_listener() { return ctx.buttonClick.emit(); });
             i0.ɵɵconditionalCreate(1, RaisedButtonComponent_Conditional_1_Template, 2, 3, "mat-icon", 1);
@@ -1371,7 +1285,7 @@ class RaisedButtonComponent {
         type: Component,
         args: [{ selector: 'cauca-raised-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MatIconModule, TranslateModule, NgClass], template: "<button mat-raised-button [ngClass]=\"small() ? 'small-button' : ''\" [color]=\"color()\" onclick=\"this.blur()\" [disabled]=\"buttonDisabled()\" (click)=\"buttonClick.emit()\">\r\n    @if (showIcon() && iconAlignment() === 'left') { <mat-icon [class.button-spin]=\"isInProgress()\">{{iconToShow()}}</mat-icon> }\r\n    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}\r\n    @if (showIcon() && iconAlignment() === 'right') { <mat-icon [class.button-spin]=\"isInProgress()\">{{iconToShow()}}</mat-icon> }\r\n</button>", styles: [".mdc-button.mat-white,.mat-stroked-button.mat-white{color:#fff;border-color:#fff}.mdc-button.mat-white:hover,.mat-mdc-outlined-button.mat-white:hover{background-color:transparent}mat-icon{color:inherit}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RaisedButtonComponent, { className: "RaisedButtonComponent", filePath: "lib/buttons/raised-button/raised-button.component.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RaisedButtonComponent, { className: "RaisedButtonComponent", filePath: "lib/buttons/raised-button/raised-button.component.ts", lineNumber: 16 }); })();
 
 class RefreshButtonComponent {
     constructor() {
@@ -1414,32 +1328,9 @@ function RoundButtonComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵtextInterpolate(ctx_r0.label());
 } }
-class RoundButtonComponent {
-    constructor() {
-        this.translateLabel = input(true, ...(ngDevMode ? [{ debugName: "translateLabel" }] : []));
-        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
-        this.colorOnHover = input(undefined, ...(ngDevMode ? [{ debugName: "colorOnHover" }] : []));
-        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
-        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-        this.iconAlignment = input('left', ...(ngDevMode ? [{ debugName: "iconAlignment" }] : []));
-        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.isInProgress = input(false, ...(ngDevMode ? [{ debugName: "isInProgress" }] : []));
-        this.iconColor = computed(() => this.isHovered() ? this.colorOnHover() || this.color() : this.color(), ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
-        this.showIcon = computed(() => !!this.icon() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
-        this.iconToShow = computed(() => this.isInProgress() ? 'update' : this.icon(), ...(ngDevMode ? [{ debugName: "iconToShow" }] : []));
-        this.buttonDisabled = computed(() => this.isDisabled() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : []));
-        this.buttonClick = output();
-        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
-    }
-    onMouseEnter() {
-        this.isHovered.set(true);
-    }
-    onMouseLeave() {
-        this.isHovered.set(false);
-    }
-    static { this.ɵfac = function RoundButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RoundButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RoundButtonComponent, selectors: [["cauca-round-button"]], inputs: { translateLabel: [1, "translateLabel"], label: [1, "label"], small: [1, "small"], colorOnHover: [1, "colorOnHover"], color: [1, "color"], icon: [1, "icon"], iconAlignment: [1, "iconAlignment"], isDisabled: [1, "isDisabled"], isInProgress: [1, "isInProgress"] }, outputs: { buttonClick: "buttonClick" }, decls: 3, vars: 2, consts: [["onclick", "this.blur()", 3, "mouseenter", "mouseleave", "click", "disabled"]], template: function RoundButtonComponent_Template(rf, ctx) { if (rf & 1) {
+class RoundButtonComponent extends BaseButtonWithLabel {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵRoundButtonComponent_BaseFactory; return function RoundButtonComponent_Factory(__ngFactoryType__) { return (ɵRoundButtonComponent_BaseFactory || (ɵRoundButtonComponent_BaseFactory = i0.ɵɵgetInheritedFactory(RoundButtonComponent)))(__ngFactoryType__ || RoundButtonComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RoundButtonComponent, selectors: [["cauca-round-button"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [["onclick", "this.blur()", 3, "mouseenter", "mouseleave", "click", "disabled"]], template: function RoundButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "button", 0);
             i0.ɵɵdomListener("mouseenter", function RoundButtonComponent_Template_button_mouseenter_0_listener() { return ctx.onMouseEnter(); })("mouseleave", function RoundButtonComponent_Template_button_mouseleave_0_listener() { return ctx.onMouseLeave(); })("click", function RoundButtonComponent_Template_button_click_0_listener() { return ctx.buttonClick.emit(); });
             i0.ɵɵconditionalCreate(1, RoundButtonComponent_Conditional_1_Template, 2, 3)(2, RoundButtonComponent_Conditional_2_Template, 1, 1);
@@ -1454,7 +1345,7 @@ class RoundButtonComponent {
         type: Component,
         args: [{ selector: 'cauca-round-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<button (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" onclick=\"this.blur()\" (click)=\"buttonClick.emit();\" [disabled]=\"buttonDisabled()\">\r\n    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}\r\n</button>", styles: ["button{border-radius:100px;background-color:inherit;outline:none;border-width:0px;height:40px;width:40px;cursor:pointer}:host{display:flex}.mdc-button.mat-white,.mat-stroked-button.mat-white{color:#fff;border-color:#fff}.mdc-button.mat-white:hover,.mat-mdc-outlined-button.mat-white:hover{background-color:transparent}mat-icon{color:#006496}.mat-mdc-button-disabled .mat-icon{color:#12101461}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RoundButtonComponent, { className: "RoundButtonComponent", filePath: "lib/buttons/round-button/round-button.component.ts", lineNumber: 12 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RoundButtonComponent, { className: "RoundButtonComponent", filePath: "lib/buttons/round-button/round-button.component.ts", lineNumber: 13 }); })();
 
 function StrokedButtonComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-icon");
@@ -1495,32 +1386,9 @@ function StrokedButtonComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.iconToShow());
 } }
-class StrokedButtonComponent {
-    constructor() {
-        this.translateLabel = input(true, ...(ngDevMode ? [{ debugName: "translateLabel" }] : []));
-        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-        this.small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
-        this.colorOnHover = input(undefined, ...(ngDevMode ? [{ debugName: "colorOnHover" }] : []));
-        this.color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
-        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
-        this.iconAlignment = input('left', ...(ngDevMode ? [{ debugName: "iconAlignment" }] : []));
-        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.isInProgress = input(false, ...(ngDevMode ? [{ debugName: "isInProgress" }] : []));
-        this.iconColor = computed(() => this.isHovered() ? this.colorOnHover() || this.color() : this.color(), ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
-        this.showIcon = computed(() => !!this.icon() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
-        this.iconToShow = computed(() => this.isInProgress() ? 'update' : this.icon(), ...(ngDevMode ? [{ debugName: "iconToShow" }] : []));
-        this.buttonDisabled = computed(() => this.isDisabled() || this.isInProgress(), ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : []));
-        this.buttonClick = output();
-        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
-    }
-    onMouseEnter() {
-        this.isHovered.set(true);
-    }
-    onMouseLeave() {
-        this.isHovered.set(false);
-    }
-    static { this.ɵfac = function StrokedButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StrokedButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StrokedButtonComponent, selectors: [["cauca-stroked-button"]], inputs: { translateLabel: [1, "translateLabel"], label: [1, "label"], small: [1, "small"], colorOnHover: [1, "colorOnHover"], color: [1, "color"], icon: [1, "icon"], iconAlignment: [1, "iconAlignment"], isDisabled: [1, "isDisabled"], isInProgress: [1, "isInProgress"] }, outputs: { buttonClick: "buttonClick" }, decls: 4, vars: 8, consts: [["mat-stroked-button", "", "onclick", "this.blur()", 3, "click", "ngClass", "color", "disabled"], [3, "button-spin"]], template: function StrokedButtonComponent_Template(rf, ctx) { if (rf & 1) {
+class StrokedButtonComponent extends BaseButtonWithLabel {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵStrokedButtonComponent_BaseFactory; return function StrokedButtonComponent_Factory(__ngFactoryType__) { return (ɵStrokedButtonComponent_BaseFactory || (ɵStrokedButtonComponent_BaseFactory = i0.ɵɵgetInheritedFactory(StrokedButtonComponent)))(__ngFactoryType__ || StrokedButtonComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StrokedButtonComponent, selectors: [["cauca-stroked-button"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 8, consts: [["mat-stroked-button", "", "onclick", "this.blur()", 3, "click", "ngClass", "color", "disabled"], [3, "button-spin"]], template: function StrokedButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "button", 0);
             i0.ɵɵlistener("click", function StrokedButtonComponent_Template_button_click_0_listener() { return ctx.buttonClick.emit(); });
             i0.ɵɵconditionalCreate(1, StrokedButtonComponent_Conditional_1_Template, 2, 3, "mat-icon", 1);
@@ -1542,7 +1410,7 @@ class StrokedButtonComponent {
         type: Component,
         args: [{ selector: 'cauca-stroked-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MatIconModule, TranslateModule, NgClass], template: "<button mat-stroked-button [ngClass]=\"small() ? 'small-button' : ''\" [color]=\"color()\" onclick=\"this.blur()\" [disabled]=\"buttonDisabled()\" (click)=\"buttonClick.emit()\" [class.icon-only]=\"!label()\">\r\n    @if(showIcon() && iconAlignment() === 'left') { <mat-icon [class.button-spin]=\"isInProgress()\">{{iconToShow()}}</mat-icon> }\r\n    @if (label()) { @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}} }\r\n    @if(showIcon() && iconAlignment() === 'right') { <mat-icon [class.button-spin]=\"isInProgress()\">{{iconToShow()}}</mat-icon> }\r\n</button>", styles: [".mdc-button.mat-white,.mat-stroked-button.mat-white{color:#fff;border-color:#fff}.mdc-button.mat-white:hover,.mat-mdc-outlined-button.mat-white:hover{background-color:transparent}.icon-only{width:36px;height:36px;min-width:38px;padding:0}.icon-only mat-icon{margin:0}mat-icon{color:inherit}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StrokedButtonComponent, { className: "StrokedButtonComponent", filePath: "lib/buttons/stroked-button/stroked-button.component.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StrokedButtonComponent, { className: "StrokedButtonComponent", filePath: "lib/buttons/stroked-button/stroked-button.component.ts", lineNumber: 16 }); })();
 
 class AlertDialogComponent {
     constructor(dialogRef, data, breakdownObserver) {