ud-components 0.3.5 → 0.3.6
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.
|
@@ -2478,16 +2478,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2478
2478
|
type: Input
|
|
2479
2479
|
}] } });
|
|
2480
2480
|
|
|
2481
|
+
/**
|
|
2482
|
+
* Styled button that wraps Angular Material with the library's design tokens.
|
|
2483
|
+
*
|
|
2484
|
+
* Usage:
|
|
2485
|
+
* <ud-button>Save</ud-button>
|
|
2486
|
+
* <ud-button variant="stroked" color="secondary">Cancel</ud-button>
|
|
2487
|
+
* <ud-button [loading]="isSaving" icon="save">Save</ud-button>
|
|
2488
|
+
* <ud-button color="danger" variant="stroked">Delete</ud-button>
|
|
2489
|
+
*/
|
|
2490
|
+
class UdButtonComponent {
|
|
2491
|
+
/** Visual style of the button */
|
|
2492
|
+
variant = 'flat';
|
|
2493
|
+
/** Colour role */
|
|
2494
|
+
color = 'primary';
|
|
2495
|
+
/** Size preset */
|
|
2496
|
+
size = 'md';
|
|
2497
|
+
/** Native button type */
|
|
2498
|
+
type = 'button';
|
|
2499
|
+
/** Material icon name. Shows a spinner when loading is true instead. */
|
|
2500
|
+
icon;
|
|
2501
|
+
/** Which side the icon appears on */
|
|
2502
|
+
iconPosition = 'left';
|
|
2503
|
+
/** Font set for the icon (default: material-icons-outlined) */
|
|
2504
|
+
iconFontSet = 'material-icons-outlined';
|
|
2505
|
+
/** Shows a spinner and disables the button */
|
|
2506
|
+
loading = false;
|
|
2507
|
+
/** Explicitly disable the button */
|
|
2508
|
+
disabled = false;
|
|
2509
|
+
/** Stretch to fill the container width */
|
|
2510
|
+
fullWidth = false;
|
|
2511
|
+
get isDisabled() {
|
|
2512
|
+
return this.disabled || this.loading;
|
|
2513
|
+
}
|
|
2514
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2515
|
+
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$6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.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"] }] });
|
|
2516
|
+
}
|
|
2517
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdButtonComponent, decorators: [{
|
|
2518
|
+
type: Component,
|
|
2519
|
+
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"] }]
|
|
2520
|
+
}], propDecorators: { variant: [{
|
|
2521
|
+
type: Input
|
|
2522
|
+
}], color: [{
|
|
2523
|
+
type: Input
|
|
2524
|
+
}], size: [{
|
|
2525
|
+
type: Input
|
|
2526
|
+
}], type: [{
|
|
2527
|
+
type: Input
|
|
2528
|
+
}], icon: [{
|
|
2529
|
+
type: Input
|
|
2530
|
+
}], iconPosition: [{
|
|
2531
|
+
type: Input
|
|
2532
|
+
}], iconFontSet: [{
|
|
2533
|
+
type: Input
|
|
2534
|
+
}], loading: [{
|
|
2535
|
+
type: Input
|
|
2536
|
+
}], disabled: [{
|
|
2537
|
+
type: Input
|
|
2538
|
+
}], fullWidth: [{
|
|
2539
|
+
type: Input
|
|
2540
|
+
}] } });
|
|
2541
|
+
|
|
2481
2542
|
class SummaryViewComponent {
|
|
2482
2543
|
title = '';
|
|
2483
|
-
|
|
2544
|
+
actions = [];
|
|
2484
2545
|
summaryFields = [];
|
|
2485
2546
|
loading = false;
|
|
2486
2547
|
layout = 'text-left';
|
|
2487
2548
|
skeletonTitleHeight = '20px';
|
|
2488
2549
|
skeletonBodyHeight = '150px';
|
|
2489
2550
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SummaryViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2490
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SummaryViewComponent, isStandalone: true, selector: "ud-summary-view", inputs: { title: "title",
|
|
2551
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SummaryViewComponent, isStandalone: true, selector: "ud-summary-view", inputs: { title: "title", actions: "actions", summaryFields: "summaryFields", loading: "loading", layout: "layout", skeletonTitleHeight: "skeletonTitleHeight", skeletonBodyHeight: "skeletonBodyHeight" }, ngImport: i0, template: "<div class=\"summary-view-container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h5 class=\"header-title\">{{ title }}</h5>\n }\n <div class=\"header-actions\">\n @for (action of actions; track action.label) {\n @if (action.isAuthorized) {\n @if (action.path) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n [routerLink]=\"action.path\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n } @else if (action.onClick) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n (click)=\"action.onClick!()\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n }\n }\n }\n <ng-content select=\"[header-actions]\" />\n </div>\n </div>\n <div\n class=\"content\"\n [ngClass]=\"{\n reverse: layout === 'text-right',\n 'flex-column': layout === 'text-top',\n }\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"col\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonBodyHeight }\" />\n } @else {\n @if (layout !== 'text-none') {\n <div [ngClass]=\"layout === 'text-top' ? 'col-12' : 'col-6'\">\n <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' }\">\n @for (summaryField of summaryFields; track $index) {\n <div class=\"summary-field\">\n @if (summaryField.label) {\n <span>{{ summaryField.label | capitalize }}</span>\n }\n <div class=\"summary-row\">\n <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n {{ summaryField.icon }}\n </mat-icon>\n <mat-label>{{ summaryField.value }}</mat-label>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n class=\"px-0\"\n [ngClass]=\"{\n 'col-12': layout === 'text-none' || layout === 'text-top',\n 'col-6': layout !== 'text-none' && layout !== 'text-top',\n }\">\n <ng-content></ng-content>\n </div>\n }\n </div>\n</div>\n", styles: [".summary-view-container{justify-self:center;width:90%;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #373f4c14;border:1px solid rgba(0,0,0,.07)}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#dddde8;border-bottom:1px solid rgba(0,0,0,.08);min-height:52px}.header .header-title{margin:0;font-size:.9375rem;font-weight:600;color:#373f4c;letter-spacing:.01em}.header .header-actions{display:flex;align-items:center;gap:8px}.header .loading{padding:.5rem;border-radius:4px}.content{display:flex;flex-wrap:wrap;padding:1.2rem .8rem;margin:0;background-color:#fff}.content.reverse{flex-direction:row-reverse}.content.flex-column{flex-direction:column}.summary{display:flex;flex-direction:column;gap:1rem}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:1rem 2.5rem}.summary .summary-field{display:flex;flex-direction:column;gap:.1rem}.summary .summary-field span{font-size:14px;font-weight:300;color:var(--text-color)}.summary .summary-row{display:flex;align-items:flex-start;gap:.5rem}.summary .summary-row mat-icon{height:18px;width:18px;min-width:18px;margin-top:2px;font-size:20px;color:var(--text-color)}mat-label{font-weight:300}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
|
|
2491
2552
|
}
|
|
2492
2553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SummaryViewComponent, decorators: [{
|
|
2493
2554
|
type: Component,
|
|
@@ -2497,16 +2558,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2497
2558
|
TranslatePipe,
|
|
2498
2559
|
NgxSkeletonLoaderModule,
|
|
2499
2560
|
MatIconModule,
|
|
2500
|
-
MatButtonModule,
|
|
2501
2561
|
MatLabel,
|
|
2502
2562
|
RouterLink,
|
|
2503
|
-
MatTooltip,
|
|
2504
2563
|
CapitalizePipe,
|
|
2505
2564
|
MatPrefix,
|
|
2506
|
-
|
|
2565
|
+
UdButtonComponent,
|
|
2566
|
+
], template: "<div class=\"summary-view-container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h5 class=\"header-title\">{{ title }}</h5>\n }\n <div class=\"header-actions\">\n @for (action of actions; track action.label) {\n @if (action.isAuthorized) {\n @if (action.path) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n [routerLink]=\"action.path\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n } @else if (action.onClick) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n (click)=\"action.onClick!()\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n }\n }\n }\n <ng-content select=\"[header-actions]\" />\n </div>\n </div>\n <div\n class=\"content\"\n [ngClass]=\"{\n reverse: layout === 'text-right',\n 'flex-column': layout === 'text-top',\n }\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"col\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonBodyHeight }\" />\n } @else {\n @if (layout !== 'text-none') {\n <div [ngClass]=\"layout === 'text-top' ? 'col-12' : 'col-6'\">\n <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' }\">\n @for (summaryField of summaryFields; track $index) {\n <div class=\"summary-field\">\n @if (summaryField.label) {\n <span>{{ summaryField.label | capitalize }}</span>\n }\n <div class=\"summary-row\">\n <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n {{ summaryField.icon }}\n </mat-icon>\n <mat-label>{{ summaryField.value }}</mat-label>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n class=\"px-0\"\n [ngClass]=\"{\n 'col-12': layout === 'text-none' || layout === 'text-top',\n 'col-6': layout !== 'text-none' && layout !== 'text-top',\n }\">\n <ng-content></ng-content>\n </div>\n }\n </div>\n</div>\n", styles: [".summary-view-container{justify-self:center;width:90%;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #373f4c14;border:1px solid rgba(0,0,0,.07)}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#dddde8;border-bottom:1px solid rgba(0,0,0,.08);min-height:52px}.header .header-title{margin:0;font-size:.9375rem;font-weight:600;color:#373f4c;letter-spacing:.01em}.header .header-actions{display:flex;align-items:center;gap:8px}.header .loading{padding:.5rem;border-radius:4px}.content{display:flex;flex-wrap:wrap;padding:1.2rem .8rem;margin:0;background-color:#fff}.content.reverse{flex-direction:row-reverse}.content.flex-column{flex-direction:column}.summary{display:flex;flex-direction:column;gap:1rem}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:1rem 2.5rem}.summary .summary-field{display:flex;flex-direction:column;gap:.1rem}.summary .summary-field span{font-size:14px;font-weight:300;color:var(--text-color)}.summary .summary-row{display:flex;align-items:flex-start;gap:.5rem}.summary .summary-row mat-icon{height:18px;width:18px;min-width:18px;margin-top:2px;font-size:20px;color:var(--text-color)}mat-label{font-weight:300}\n"] }]
|
|
2507
2567
|
}], propDecorators: { title: [{
|
|
2508
2568
|
type: Input
|
|
2509
|
-
}],
|
|
2569
|
+
}], actions: [{
|
|
2510
2570
|
type: Input
|
|
2511
2571
|
}], summaryFields: [{
|
|
2512
2572
|
type: Input
|
|
@@ -2667,67 +2727,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2667
2727
|
type: Input
|
|
2668
2728
|
}] } });
|
|
2669
2729
|
|
|
2670
|
-
/**
|
|
2671
|
-
* Styled button that wraps Angular Material with the library's design tokens.
|
|
2672
|
-
*
|
|
2673
|
-
* Usage:
|
|
2674
|
-
* <ud-button>Save</ud-button>
|
|
2675
|
-
* <ud-button variant="stroked" color="secondary">Cancel</ud-button>
|
|
2676
|
-
* <ud-button [loading]="isSaving" icon="save">Save</ud-button>
|
|
2677
|
-
* <ud-button color="danger" variant="stroked">Delete</ud-button>
|
|
2678
|
-
*/
|
|
2679
|
-
class UdButtonComponent {
|
|
2680
|
-
/** Visual style of the button */
|
|
2681
|
-
variant = 'flat';
|
|
2682
|
-
/** Colour role */
|
|
2683
|
-
color = 'primary';
|
|
2684
|
-
/** Size preset */
|
|
2685
|
-
size = 'md';
|
|
2686
|
-
/** Native button type */
|
|
2687
|
-
type = 'button';
|
|
2688
|
-
/** Material icon name. Shows a spinner when loading is true instead. */
|
|
2689
|
-
icon;
|
|
2690
|
-
/** Which side the icon appears on */
|
|
2691
|
-
iconPosition = 'left';
|
|
2692
|
-
/** Font set for the icon (default: material-icons-outlined) */
|
|
2693
|
-
iconFontSet = 'material-icons-outlined';
|
|
2694
|
-
/** Shows a spinner and disables the button */
|
|
2695
|
-
loading = false;
|
|
2696
|
-
/** Explicitly disable the button */
|
|
2697
|
-
disabled = false;
|
|
2698
|
-
/** Stretch to fill the container width */
|
|
2699
|
-
fullWidth = false;
|
|
2700
|
-
get isDisabled() {
|
|
2701
|
-
return this.disabled || this.loading;
|
|
2702
|
-
}
|
|
2703
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2704
|
-
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$6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.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"] }] });
|
|
2705
|
-
}
|
|
2706
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: UdButtonComponent, decorators: [{
|
|
2707
|
-
type: Component,
|
|
2708
|
-
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"] }]
|
|
2709
|
-
}], propDecorators: { variant: [{
|
|
2710
|
-
type: Input
|
|
2711
|
-
}], color: [{
|
|
2712
|
-
type: Input
|
|
2713
|
-
}], size: [{
|
|
2714
|
-
type: Input
|
|
2715
|
-
}], type: [{
|
|
2716
|
-
type: Input
|
|
2717
|
-
}], icon: [{
|
|
2718
|
-
type: Input
|
|
2719
|
-
}], iconPosition: [{
|
|
2720
|
-
type: Input
|
|
2721
|
-
}], iconFontSet: [{
|
|
2722
|
-
type: Input
|
|
2723
|
-
}], loading: [{
|
|
2724
|
-
type: Input
|
|
2725
|
-
}], disabled: [{
|
|
2726
|
-
type: Input
|
|
2727
|
-
}], fullWidth: [{
|
|
2728
|
-
type: Input
|
|
2729
|
-
}] } });
|
|
2730
|
-
|
|
2731
2730
|
class ToggleComponent {
|
|
2732
2731
|
/** Key of the control inside the parent FormGroup (alternative to ngModel/formControl) */
|
|
2733
2732
|
controlName;
|