ud-components 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2246,11 +2246,11 @@ class UdButtonComponent {
|
|
|
2246
2246
|
return this.disabled || this.loading;
|
|
2247
2247
|
}
|
|
2248
2248
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2249
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: UdButtonComponent, isStandalone: true, selector: "ud-button", inputs: { variant: "variant", color: "color", size: "size", type: "type", icon: "icon", iconPosition: "iconPosition", iconFontSet: "iconFontSet", loading: "loading", disabled: "disabled", fullWidth: "fullWidth" }, ngImport: i0, template: "@if (variant === 'flat') {\n <button\n mat-flat-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--flat ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'stroked') {\n <button\n mat-stroked-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--stroked ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'icon-only') {\n <button\n mat-icon-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--icon-only ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--loading]=\"loading\">\n @if (loading) {\n <mat-spinner diameter=\"16\" />\n } @else if (icon) {\n <mat-icon class=\"ud-btn__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n </button>\n}\n\n<ng-template #btnContent>\n @if (loading) {\n <mat-spinner class=\"ud-btn__spinner\" diameter=\"16\" />\n } @else if (icon && iconPosition === 'left') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--left\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <span class=\"ud-btn__label\"><ng-content /></span>\n @if (!loading && icon && iconPosition === 'right') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--right\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n</ng-template>\n", styles: [":host{display:inline-block}:host.full-width,:host .ud-btn--full-width{width:100%}.ud-btn{font-family:DM Sans,system-ui,sans-serif!important;font-weight:500!important;letter-spacing:0!important;border-radius:var(--eu-radius-sm, 6px)!important;transition:background .2s ease,box-shadow .2s ease,transform .15s ease,border-color .2s ease,color .2s ease!important;display:inline-flex!important;align-items:center;gap:.4rem}.ud-btn--full-width{width:100%}.ud-btn--sm{height:32px!important;font-size:.8rem!important;padding:0 .875rem!important}.ud-btn--md{height:40px!important;font-size:.875rem!important;padding:0 1.25rem!important}.ud-btn--lg{height:48px!important;font-size:.95rem!important;padding:0 1.75rem!important}.ud-btn--flat.ud-btn--primary{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:0 4px 14px #1b253538!important}.ud-btn--flat.ud-btn--primary:hover:not(:disabled){background:var(--eu-navy-soft, #253347)!important;box-shadow:0 6px 18px #1b25354d!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--primary:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--secondary{background:var(--eu-bg, #f4f5f7)!important;color:var(--eu-navy, #1b2535)!important;box-shadow:none!important;border:1px solid var(--eu-border-mid, #c9cdd6)!important}.ud-btn--flat.ud-btn--secondary:hover:not(:disabled){background:var(--eu-bg-hover, #eff1f5)!important;border-color:var(--eu-navy, #1b2535)!important}.ud-btn--flat.ud-btn--danger{background:#e53935!important;color:#fff!important;box-shadow:0 4px 14px #e539354d!important}.ud-btn--flat.ud-btn--danger:hover:not(:disabled){background:#c62828!important;box-shadow:0 6px 18px #e5393566!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--danger:active:not(:disabled){transform:translateY(0)!important}.ud-btn--stroked.ud-btn--primary{color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--primary:hover:not(:disabled){background:#1b25350d!important}.ud-btn--stroked.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important;border-color:var(--eu-border-mid, #c9cdd6)!important;background:transparent!important}.ud-btn--stroked.ud-btn--secondary:hover:not(:disabled){color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger{color:#e53935!important;border-color:#e53935!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger:hover:not(:disabled){background:#e539350d!important}.ud-btn--icon-only{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__content,.ud-btn--icon-only ::ng-deep .mat-mdc-button-base{display:inline-flex!important;align-items:center!important;justify-content:center!important}.ud-btn--icon-only .ud-btn__icon{font-size:1.35em!important;width:1.35em!important;height:1.35em!important}.ud-btn--icon-only.ud-btn--icon-only--sm{width:32px!important;height:32px!important}.ud-btn--icon-only.ud-btn--icon-only--md{width:40px!important;height:40px!important}.ud-btn--icon-only.ud-btn--icon-only--lg{width:48px!important;height:48px!important}.ud-btn--icon-only.ud-btn--primary{color:var(--eu-navy, #1b2535)!important}.ud-btn--icon-only.ud-btn--primary:hover:not(:disabled){background:#1b25350f!important}.ud-btn--icon-only.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important}.ud-btn--icon-only.ud-btn--secondary:hover:not(:disabled){background:#1b25350a!important}.ud-btn--icon-only.ud-btn--danger{color:#e53935!important}.ud-btn--icon-only.ud-btn--danger:hover:not(:disabled){background:#e539350f!important}.ud-btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}.ud-btn--loading{cursor:wait!important}.ud-btn__label{line-height:1}.ud-btn__icon{flex-shrink:0;overflow:visible!important;font-size:1.15em!important;width:1.15em!important;height:1.15em!important;line-height:1!important;display:inline-flex!important;align-items:center;justify-content:center}.ud-btn__icon--left{margin-right:2px}.ud-btn__icon--right{margin-left:2px}.ud-btn__spinner{flex-shrink:0}.ud-btn__spinner ::ng-deep circle{stroke:currentColor!important}::ng-deep .ud-btn .mdc-button__label{display:inline-flex!important;align-items:center!important;gap:6px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
|
|
2249
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: UdButtonComponent, isStandalone: true, selector: "ud-button", inputs: { variant: "variant", color: "color", size: "size", type: "type", icon: "icon", iconPosition: "iconPosition", iconFontSet: "iconFontSet", loading: "loading", disabled: "disabled", fullWidth: "fullWidth" }, ngImport: i0, template: "@if (variant === 'flat') {\n <button\n mat-flat-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--flat ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'stroked') {\n <button\n mat-stroked-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--stroked ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'icon-only') {\n <button\n mat-icon-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--icon-only ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--loading]=\"loading\">\n @if (loading) {\n <mat-spinner diameter=\"16\" />\n } @else if (icon) {\n <mat-icon class=\"ud-btn__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n </button>\n}\n\n<ng-template #btnContent>\n @if (loading) {\n <mat-spinner class=\"ud-btn__spinner\" diameter=\"16\" />\n } @else if (icon && iconPosition === 'left') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--left\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <span class=\"ud-btn__label\"><ng-content /></span>\n @if (!loading && icon && iconPosition === 'right') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--right\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n</ng-template>\n", styles: [":host{display:inline-block}:host.full-width,:host .ud-btn--full-width{width:100%}.ud-btn{font-family:DM Sans,system-ui,sans-serif!important;font-weight:500!important;letter-spacing:0!important;border-radius:var(--eu-radius-sm, 6px)!important;transition:background .2s ease,box-shadow .2s ease,transform .15s ease,border-color .2s ease,color .2s ease!important;display:inline-flex!important;align-items:center;gap:.4rem}.ud-btn--full-width{width:100%}.ud-btn--sm{height:32px!important;font-size:.8rem!important;padding:0 .875rem!important}.ud-btn--md{height:40px!important;font-size:.875rem!important;padding:0 1.25rem!important}.ud-btn--lg{height:48px!important;font-size:.95rem!important;padding:0 1.75rem!important}.ud-btn--flat.ud-btn--primary{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:0 4px 14px #1b253538!important}.ud-btn--flat.ud-btn--primary:hover:not(:disabled){background:var(--eu-navy-soft, #253347)!important;box-shadow:0 6px 18px #1b25354d!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--primary:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--secondary{background:var(--eu-bg, #f4f5f7)!important;color:var(--eu-navy, #1b2535)!important;box-shadow:none!important;border:1px solid var(--eu-border-mid, #c9cdd6)!important}.ud-btn--flat.ud-btn--secondary:hover:not(:disabled){background:var(--eu-bg-hover, #eff1f5)!important;border-color:var(--eu-navy, #1b2535)!important}.ud-btn--flat.ud-btn--danger{background:#e53935!important;color:#fff!important;box-shadow:0 4px 14px #e539354d!important}.ud-btn--flat.ud-btn--danger:hover:not(:disabled){background:#c62828!important;box-shadow:0 6px 18px #e5393566!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--danger:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--success{background:#24a821!important;color:#fff!important;box-shadow:0 4px 14px #24a8214d!important}.ud-btn--flat.ud-btn--success:hover:not(:disabled){background:#1c881a!important;box-shadow:0 6px 18px #24a82166!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--success:active:not(:disabled){transform:translateY(0)!important}.ud-btn--stroked.ud-btn--primary{color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--primary:hover:not(:disabled){background:#1b25350d!important}.ud-btn--stroked.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important;border-color:var(--eu-border-mid, #c9cdd6)!important;background:transparent!important}.ud-btn--stroked.ud-btn--secondary:hover:not(:disabled){color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger{color:#e53935!important;border-color:#e53935!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger:hover:not(:disabled){background:#e539350d!important}.ud-btn--stroked.ud-btn--success{color:#24a821!important;border-color:#24a821!important;background:transparent!important}.ud-btn--stroked.ud-btn--success:hover:not(:disabled){background:#1c881a0f!important}.ud-btn--icon-only{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__content,.ud-btn--icon-only ::ng-deep .mat-mdc-button-base{display:inline-flex!important;align-items:center!important;justify-content:center!important}.ud-btn--icon-only .ud-btn__icon{font-size:1.35em!important;width:1.35em!important;height:1.35em!important}.ud-btn--icon-only.ud-btn--icon-only--sm{width:32px!important;height:32px!important}.ud-btn--icon-only.ud-btn--icon-only--md{width:40px!important;height:40px!important}.ud-btn--icon-only.ud-btn--icon-only--lg{width:48px!important;height:48px!important}.ud-btn--icon-only.ud-btn--primary{color:var(--eu-navy, #1b2535)!important}.ud-btn--icon-only.ud-btn--primary:hover:not(:disabled){background:#1b25350f!important}.ud-btn--icon-only.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important}.ud-btn--icon-only.ud-btn--secondary:hover:not(:disabled){background:#1b25350a!important}.ud-btn--icon-only.ud-btn--danger{color:#e53935!important}.ud-btn--icon-only.ud-btn--danger:hover:not(:disabled){background:#e539350f!important}.ud-btn--icon-only.ud-btn--success{color:#24a821!important}.ud-btn--icon-only.ud-btn--success:hover:not(:disabled){background:#24a8210f!important}.ud-btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}.ud-btn--loading{cursor:wait!important}.ud-btn__label{line-height:1}.ud-btn__icon{flex-shrink:0;overflow:visible!important;font-size:1.15em!important;width:1.15em!important;height:1.15em!important;line-height:1!important;display:inline-flex!important;align-items:center;justify-content:center}.ud-btn__icon--left{margin-right:2px}.ud-btn__icon--right{margin-left:2px}.ud-btn__spinner{flex-shrink:0}.ud-btn__spinner ::ng-deep circle{stroke:currentColor!important}::ng-deep .ud-btn .mdc-button__label{display:inline-flex!important;align-items:center!important;gap:6px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
|
|
2250
2250
|
}
|
|
2251
2251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdButtonComponent, decorators: [{
|
|
2252
2252
|
type: Component,
|
|
2253
|
-
args: [{ selector: 'ud-button', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], template: "@if (variant === 'flat') {\n <button\n mat-flat-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--flat ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'stroked') {\n <button\n mat-stroked-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--stroked ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'icon-only') {\n <button\n mat-icon-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--icon-only ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--loading]=\"loading\">\n @if (loading) {\n <mat-spinner diameter=\"16\" />\n } @else if (icon) {\n <mat-icon class=\"ud-btn__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n </button>\n}\n\n<ng-template #btnContent>\n @if (loading) {\n <mat-spinner class=\"ud-btn__spinner\" diameter=\"16\" />\n } @else if (icon && iconPosition === 'left') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--left\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <span class=\"ud-btn__label\"><ng-content /></span>\n @if (!loading && icon && iconPosition === 'right') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--right\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n</ng-template>\n", styles: [":host{display:inline-block}:host.full-width,:host .ud-btn--full-width{width:100%}.ud-btn{font-family:DM Sans,system-ui,sans-serif!important;font-weight:500!important;letter-spacing:0!important;border-radius:var(--eu-radius-sm, 6px)!important;transition:background .2s ease,box-shadow .2s ease,transform .15s ease,border-color .2s ease,color .2s ease!important;display:inline-flex!important;align-items:center;gap:.4rem}.ud-btn--full-width{width:100%}.ud-btn--sm{height:32px!important;font-size:.8rem!important;padding:0 .875rem!important}.ud-btn--md{height:40px!important;font-size:.875rem!important;padding:0 1.25rem!important}.ud-btn--lg{height:48px!important;font-size:.95rem!important;padding:0 1.75rem!important}.ud-btn--flat.ud-btn--primary{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:0 4px 14px #1b253538!important}.ud-btn--flat.ud-btn--primary:hover:not(:disabled){background:var(--eu-navy-soft, #253347)!important;box-shadow:0 6px 18px #1b25354d!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--primary:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--secondary{background:var(--eu-bg, #f4f5f7)!important;color:var(--eu-navy, #1b2535)!important;box-shadow:none!important;border:1px solid var(--eu-border-mid, #c9cdd6)!important}.ud-btn--flat.ud-btn--secondary:hover:not(:disabled){background:var(--eu-bg-hover, #eff1f5)!important;border-color:var(--eu-navy, #1b2535)!important}.ud-btn--flat.ud-btn--danger{background:#e53935!important;color:#fff!important;box-shadow:0 4px 14px #e539354d!important}.ud-btn--flat.ud-btn--danger:hover:not(:disabled){background:#c62828!important;box-shadow:0 6px 18px #e5393566!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--danger:active:not(:disabled){transform:translateY(0)!important}.ud-btn--stroked.ud-btn--primary{color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--primary:hover:not(:disabled){background:#1b25350d!important}.ud-btn--stroked.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important;border-color:var(--eu-border-mid, #c9cdd6)!important;background:transparent!important}.ud-btn--stroked.ud-btn--secondary:hover:not(:disabled){color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger{color:#e53935!important;border-color:#e53935!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger:hover:not(:disabled){background:#e539350d!important}.ud-btn--icon-only{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__content,.ud-btn--icon-only ::ng-deep .mat-mdc-button-base{display:inline-flex!important;align-items:center!important;justify-content:center!important}.ud-btn--icon-only .ud-btn__icon{font-size:1.35em!important;width:1.35em!important;height:1.35em!important}.ud-btn--icon-only.ud-btn--icon-only--sm{width:32px!important;height:32px!important}.ud-btn--icon-only.ud-btn--icon-only--md{width:40px!important;height:40px!important}.ud-btn--icon-only.ud-btn--icon-only--lg{width:48px!important;height:48px!important}.ud-btn--icon-only.ud-btn--primary{color:var(--eu-navy, #1b2535)!important}.ud-btn--icon-only.ud-btn--primary:hover:not(:disabled){background:#1b25350f!important}.ud-btn--icon-only.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important}.ud-btn--icon-only.ud-btn--secondary:hover:not(:disabled){background:#1b25350a!important}.ud-btn--icon-only.ud-btn--danger{color:#e53935!important}.ud-btn--icon-only.ud-btn--danger:hover:not(:disabled){background:#e539350f!important}.ud-btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}.ud-btn--loading{cursor:wait!important}.ud-btn__label{line-height:1}.ud-btn__icon{flex-shrink:0;overflow:visible!important;font-size:1.15em!important;width:1.15em!important;height:1.15em!important;line-height:1!important;display:inline-flex!important;align-items:center;justify-content:center}.ud-btn__icon--left{margin-right:2px}.ud-btn__icon--right{margin-left:2px}.ud-btn__spinner{flex-shrink:0}.ud-btn__spinner ::ng-deep circle{stroke:currentColor!important}::ng-deep .ud-btn .mdc-button__label{display:inline-flex!important;align-items:center!important;gap:6px!important}\n"] }]
|
|
2253
|
+
args: [{ selector: 'ud-button', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], template: "@if (variant === 'flat') {\n <button\n mat-flat-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--flat ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'stroked') {\n <button\n mat-stroked-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--stroked ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'icon-only') {\n <button\n mat-icon-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--icon-only ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--loading]=\"loading\">\n @if (loading) {\n <mat-spinner diameter=\"16\" />\n } @else if (icon) {\n <mat-icon class=\"ud-btn__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n </button>\n}\n\n<ng-template #btnContent>\n @if (loading) {\n <mat-spinner class=\"ud-btn__spinner\" diameter=\"16\" />\n } @else if (icon && iconPosition === 'left') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--left\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <span class=\"ud-btn__label\"><ng-content /></span>\n @if (!loading && icon && iconPosition === 'right') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--right\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n</ng-template>\n", styles: [":host{display:inline-block}:host.full-width,:host .ud-btn--full-width{width:100%}.ud-btn{font-family:DM Sans,system-ui,sans-serif!important;font-weight:500!important;letter-spacing:0!important;border-radius:var(--eu-radius-sm, 6px)!important;transition:background .2s ease,box-shadow .2s ease,transform .15s ease,border-color .2s ease,color .2s ease!important;display:inline-flex!important;align-items:center;gap:.4rem}.ud-btn--full-width{width:100%}.ud-btn--sm{height:32px!important;font-size:.8rem!important;padding:0 .875rem!important}.ud-btn--md{height:40px!important;font-size:.875rem!important;padding:0 1.25rem!important}.ud-btn--lg{height:48px!important;font-size:.95rem!important;padding:0 1.75rem!important}.ud-btn--flat.ud-btn--primary{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:0 4px 14px #1b253538!important}.ud-btn--flat.ud-btn--primary:hover:not(:disabled){background:var(--eu-navy-soft, #253347)!important;box-shadow:0 6px 18px #1b25354d!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--primary:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--secondary{background:var(--eu-bg, #f4f5f7)!important;color:var(--eu-navy, #1b2535)!important;box-shadow:none!important;border:1px solid var(--eu-border-mid, #c9cdd6)!important}.ud-btn--flat.ud-btn--secondary:hover:not(:disabled){background:var(--eu-bg-hover, #eff1f5)!important;border-color:var(--eu-navy, #1b2535)!important}.ud-btn--flat.ud-btn--danger{background:#e53935!important;color:#fff!important;box-shadow:0 4px 14px #e539354d!important}.ud-btn--flat.ud-btn--danger:hover:not(:disabled){background:#c62828!important;box-shadow:0 6px 18px #e5393566!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--danger:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--success{background:#24a821!important;color:#fff!important;box-shadow:0 4px 14px #24a8214d!important}.ud-btn--flat.ud-btn--success:hover:not(:disabled){background:#1c881a!important;box-shadow:0 6px 18px #24a82166!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--success:active:not(:disabled){transform:translateY(0)!important}.ud-btn--stroked.ud-btn--primary{color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--primary:hover:not(:disabled){background:#1b25350d!important}.ud-btn--stroked.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important;border-color:var(--eu-border-mid, #c9cdd6)!important;background:transparent!important}.ud-btn--stroked.ud-btn--secondary:hover:not(:disabled){color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger{color:#e53935!important;border-color:#e53935!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger:hover:not(:disabled){background:#e539350d!important}.ud-btn--stroked.ud-btn--success{color:#24a821!important;border-color:#24a821!important;background:transparent!important}.ud-btn--stroked.ud-btn--success:hover:not(:disabled){background:#1c881a0f!important}.ud-btn--icon-only{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__content,.ud-btn--icon-only ::ng-deep .mat-mdc-button-base{display:inline-flex!important;align-items:center!important;justify-content:center!important}.ud-btn--icon-only .ud-btn__icon{font-size:1.35em!important;width:1.35em!important;height:1.35em!important}.ud-btn--icon-only.ud-btn--icon-only--sm{width:32px!important;height:32px!important}.ud-btn--icon-only.ud-btn--icon-only--md{width:40px!important;height:40px!important}.ud-btn--icon-only.ud-btn--icon-only--lg{width:48px!important;height:48px!important}.ud-btn--icon-only.ud-btn--primary{color:var(--eu-navy, #1b2535)!important}.ud-btn--icon-only.ud-btn--primary:hover:not(:disabled){background:#1b25350f!important}.ud-btn--icon-only.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important}.ud-btn--icon-only.ud-btn--secondary:hover:not(:disabled){background:#1b25350a!important}.ud-btn--icon-only.ud-btn--danger{color:#e53935!important}.ud-btn--icon-only.ud-btn--danger:hover:not(:disabled){background:#e539350f!important}.ud-btn--icon-only.ud-btn--success{color:#24a821!important}.ud-btn--icon-only.ud-btn--success:hover:not(:disabled){background:#24a8210f!important}.ud-btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}.ud-btn--loading{cursor:wait!important}.ud-btn__label{line-height:1}.ud-btn__icon{flex-shrink:0;overflow:visible!important;font-size:1.15em!important;width:1.15em!important;height:1.15em!important;line-height:1!important;display:inline-flex!important;align-items:center;justify-content:center}.ud-btn__icon--left{margin-right:2px}.ud-btn__icon--right{margin-left:2px}.ud-btn__spinner{flex-shrink:0}.ud-btn__spinner ::ng-deep circle{stroke:currentColor!important}::ng-deep .ud-btn .mdc-button__label{display:inline-flex!important;align-items:center!important;gap:6px!important}\n"] }]
|
|
2254
2254
|
}], propDecorators: { variant: [{
|
|
2255
2255
|
type: Input
|
|
2256
2256
|
}], color: [{
|