@fundamental-ngx/core 0.64.2-rc.1 → 0.64.2-rc.2
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.
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, inject, ElementRef, linkedSignal, Directive, InjectionToken, effect, isDevMode, computed, signal,
|
|
2
|
+
import { input, booleanAttribute, inject, ElementRef, linkedSignal, Directive, InjectionToken, effect, isDevMode, computed, signal, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
|
|
3
3
|
import { FD_DEFAULT_ICON_FONT_FAMILY, IconComponent } from '@fundamental-ngx/core/icon';
|
|
4
4
|
import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
|
|
5
|
+
import { resolveTranslationSignalFn } from '@fundamental-ngx/i18n';
|
|
5
6
|
|
|
6
7
|
const defaultButtonType = 'standard';
|
|
7
8
|
class BaseButton {
|
|
@@ -101,6 +102,22 @@ class BaseButton {
|
|
|
101
102
|
*/
|
|
102
103
|
this.ariaDescription = input(/* @ts-ignore */
|
|
103
104
|
...(ngDevMode ? [undefined, { debugName: "ariaDescription" }] : /* istanbul ignore next */ []));
|
|
105
|
+
/**
|
|
106
|
+
* Override the default type description for special button types.
|
|
107
|
+
* Provides a custom description for screen readers.
|
|
108
|
+
* If not provided, defaults to the i18n-translated type description.
|
|
109
|
+
*/
|
|
110
|
+
this.ariaTypeDescription = input(/* @ts-ignore */
|
|
111
|
+
...(ngDevMode ? [undefined, { debugName: "ariaTypeDescription" }] : /* istanbul ignore next */ []));
|
|
112
|
+
/**
|
|
113
|
+
* Custom aria-describedby value.
|
|
114
|
+
* When provided, bypasses the component's auto-generated aria-describedby
|
|
115
|
+
* (which references the hidden description spans) and uses this value directly.
|
|
116
|
+
* Use this when you need to reference external elements as the description source.
|
|
117
|
+
* Native aria-describedby attributes are captured automatically via ngOnInit.
|
|
118
|
+
*/
|
|
119
|
+
this.ariaDescribedBy = input(/* @ts-ignore */
|
|
120
|
+
...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
104
121
|
/** @hidden */
|
|
105
122
|
this.elementRef = inject(ElementRef);
|
|
106
123
|
/**
|
|
@@ -252,7 +269,7 @@ class BaseButton {
|
|
|
252
269
|
return this.toggledState();
|
|
253
270
|
}
|
|
254
271
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
255
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: BaseButton, isStandalone: true, inputs: { toggled: { classPropertyName: "toggled", publicName: "toggled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, glyphPosition: { classPropertyName: "glyphPosition", publicName: "glyphPosition", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, glyphFont: { classPropertyName: "glyphFont", publicName: "glyphFont", isSignal: true, isRequired: false, transformFunction: null }, fdType: { classPropertyName: "fdType", publicName: "fdType", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fdMenu: { classPropertyName: "fdMenu", publicName: "fdMenu", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaDisabled: { classPropertyName: "ariaDisabled", publicName: "aria-disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescription: { classPropertyName: "ariaDescription", publicName: "ariaDescription", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fd-button--toggled": "toggledState()", "attr.aria-pressed": "toggledState() || null", "attr.aria-selected": "selectedState() || null" } }, ngImport: i0 }); }
|
|
272
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: BaseButton, isStandalone: true, inputs: { toggled: { classPropertyName: "toggled", publicName: "toggled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, glyphPosition: { classPropertyName: "glyphPosition", publicName: "glyphPosition", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, glyphFont: { classPropertyName: "glyphFont", publicName: "glyphFont", isSignal: true, isRequired: false, transformFunction: null }, fdType: { classPropertyName: "fdType", publicName: "fdType", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fdMenu: { classPropertyName: "fdMenu", publicName: "fdMenu", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaDisabled: { classPropertyName: "ariaDisabled", publicName: "aria-disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescription: { classPropertyName: "ariaDescription", publicName: "ariaDescription", isSignal: true, isRequired: false, transformFunction: null }, ariaTypeDescription: { classPropertyName: "ariaTypeDescription", publicName: "ariaTypeDescription", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fd-button--toggled": "toggledState()", "attr.aria-pressed": "toggledState() || null", "attr.aria-selected": "selectedState() || null" } }, ngImport: i0 }); }
|
|
256
273
|
}
|
|
257
274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BaseButton, decorators: [{
|
|
258
275
|
type: Directive,
|
|
@@ -263,7 +280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
263
280
|
'[attr.aria-selected]': 'selectedState() || null'
|
|
264
281
|
}
|
|
265
282
|
}]
|
|
266
|
-
}], propDecorators: { toggled: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], glyphPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyphPosition", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], glyphFont: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyphFont", required: false }] }], fdType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fdType", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fdMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "fdMenu", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescription", required: false }] }] } });
|
|
283
|
+
}], propDecorators: { toggled: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], glyphPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyphPosition", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], glyphFont: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyphFont", required: false }] }], fdType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fdType", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fdMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "fdMenu", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescription", required: false }] }], ariaTypeDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaTypeDescription", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }] } });
|
|
267
284
|
|
|
268
285
|
const FD_BUTTON_COMPONENT = new InjectionToken('FdButtonComponent');
|
|
269
286
|
|
|
@@ -361,6 +378,59 @@ class ButtonComponent extends BaseButton {
|
|
|
361
378
|
this.elementRef = inject(ElementRef);
|
|
362
379
|
/** @hidden */
|
|
363
380
|
this.contentDensityObserver = inject(ContentDensityObserver);
|
|
381
|
+
/**
|
|
382
|
+
* Check if button has a special type (emphasized, positive, negative, attention)
|
|
383
|
+
* @hidden
|
|
384
|
+
*/
|
|
385
|
+
this.isSpecialButtonType = computed(() => SPECIAL_BUTTON_TYPES.has(this.fdTypeState()), /* @ts-ignore */
|
|
386
|
+
...(ngDevMode ? [{ debugName: "isSpecialButtonType" }] : /* istanbul ignore next */ []));
|
|
387
|
+
/**
|
|
388
|
+
* Calculate aria-describedby attribute value.
|
|
389
|
+
* If the user explicitly provides aria-describedby (via input or native attribute),
|
|
390
|
+
* that value is used as-is. Otherwise, auto-generates IDs referencing hidden description spans.
|
|
391
|
+
* Returns null if no descriptions apply (attribute not set).
|
|
392
|
+
* @hidden
|
|
393
|
+
*/
|
|
394
|
+
this.ariaDescribedby = computed(() => {
|
|
395
|
+
// User-provided value takes full precedence — bypass the auto-generated spans
|
|
396
|
+
const userProvided = this.ariaDescribedBy() ?? this.nativeAriaDescribedBy();
|
|
397
|
+
if (userProvided != null) {
|
|
398
|
+
return userProvided || null;
|
|
399
|
+
}
|
|
400
|
+
const ids = [];
|
|
401
|
+
if (this.effectiveAriaDescription()) {
|
|
402
|
+
ids.push(this.id() + '-description');
|
|
403
|
+
}
|
|
404
|
+
if (this.isSpecialButtonType()) {
|
|
405
|
+
ids.push(this.id() + '-type-description');
|
|
406
|
+
}
|
|
407
|
+
return ids.length > 0 ? ids.join(' ') : null;
|
|
408
|
+
}, /* @ts-ignore */
|
|
409
|
+
...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
|
|
410
|
+
/**
|
|
411
|
+
* Native aria-describedby attribute read from the DOM element.
|
|
412
|
+
* Captured once during init; signals user intent to manage describedby manually.
|
|
413
|
+
* @hidden
|
|
414
|
+
*/
|
|
415
|
+
this.nativeAriaDescribedBy = signal(null, /* @ts-ignore */
|
|
416
|
+
...(ngDevMode ? [{ debugName: "nativeAriaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
417
|
+
/**
|
|
418
|
+
* Effective aria description: explicit input takes precedence over native attribute.
|
|
419
|
+
* Prioritizes ariaDescription input, falls back to native attribute.
|
|
420
|
+
* Empty string from ariaDescription is preserved (clears description).
|
|
421
|
+
* @hidden
|
|
422
|
+
*/
|
|
423
|
+
this.effectiveAriaDescription = computed(() => this.ariaDescription() ?? this._nativeAriaDescription(), /* @ts-ignore */
|
|
424
|
+
...(ngDevMode ? [{ debugName: "effectiveAriaDescription" }] : /* istanbul ignore next */ []));
|
|
425
|
+
/**
|
|
426
|
+
* Translated aria description for the current special button type, or null if not special.
|
|
427
|
+
* @hidden
|
|
428
|
+
*/
|
|
429
|
+
this.defaultButtonTypeDescription = computed(() => {
|
|
430
|
+
const type = this.fdTypeState();
|
|
431
|
+
return this._typeDescriptions[type]?.() ?? null;
|
|
432
|
+
}, /* @ts-ignore */
|
|
433
|
+
...(ngDevMode ? [{ debugName: "defaultButtonTypeDescription" }] : /* istanbul ignore next */ []));
|
|
364
434
|
/**
|
|
365
435
|
* Calculate aria-label attribute
|
|
366
436
|
* @hidden
|
|
@@ -373,26 +443,12 @@ class ButtonComponent extends BaseButton {
|
|
|
373
443
|
if (nativeLabel) {
|
|
374
444
|
return nativeLabel; // return the native attribute aria-label
|
|
375
445
|
}
|
|
376
|
-
if (
|
|
446
|
+
if (this.isSpecialButtonType()) {
|
|
377
447
|
return this.label() ?? this._glyphLabel() ?? null;
|
|
378
448
|
}
|
|
379
449
|
return null;
|
|
380
450
|
}, /* @ts-ignore */
|
|
381
451
|
...(ngDevMode ? [{ debugName: "buttonArialabel" }] : /* istanbul ignore next */ []));
|
|
382
|
-
/**
|
|
383
|
-
* Calculate aria-description attribute
|
|
384
|
-
* @hidden
|
|
385
|
-
*/
|
|
386
|
-
this.buttonAriaDescription = computed(() => {
|
|
387
|
-
if (this.ariaDescription()) {
|
|
388
|
-
return this.ariaDescription();
|
|
389
|
-
}
|
|
390
|
-
if (SPECIAL_BUTTON_TYPES.has(this.fdTypeState())) {
|
|
391
|
-
return this.fdTypeState();
|
|
392
|
-
}
|
|
393
|
-
return null;
|
|
394
|
-
}, /* @ts-ignore */
|
|
395
|
-
...(ngDevMode ? [{ debugName: "buttonAriaDescription" }] : /* istanbul ignore next */ []));
|
|
396
452
|
/**
|
|
397
453
|
* Computed CSS classes for the button.
|
|
398
454
|
* Built as a string to avoid array allocation overhead.
|
|
@@ -433,13 +489,44 @@ class ButtonComponent extends BaseButton {
|
|
|
433
489
|
*/
|
|
434
490
|
this._nativeAriaLabel = signal(null, /* @ts-ignore */
|
|
435
491
|
...(ngDevMode ? [{ debugName: "_nativeAriaLabel" }] : /* istanbul ignore next */ []));
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
});
|
|
492
|
+
/**
|
|
493
|
+
* Native aria-description attribute read from the DOM element.
|
|
494
|
+
* Captured once after render for use in aria-description computation.
|
|
495
|
+
* @hidden
|
|
496
|
+
*/
|
|
497
|
+
this._nativeAriaDescription = signal(null, /* @ts-ignore */
|
|
498
|
+
...(ngDevMode ? [{ debugName: "_nativeAriaDescription" }] : /* istanbul ignore next */ []));
|
|
499
|
+
/** @hidden Resolves per-key translation signals */
|
|
500
|
+
this._translate = resolveTranslationSignalFn();
|
|
501
|
+
/** @hidden Translated aria descriptions for each special button type */
|
|
502
|
+
this._typeDescriptions = {
|
|
503
|
+
attention: this._translate('coreButton.attentionTypeDescription'),
|
|
504
|
+
emphasized: this._translate('coreButton.emphasizedTypeDescription'),
|
|
505
|
+
negative: this._translate('coreButton.negativeTypeDescription'),
|
|
506
|
+
positive: this._translate('coreButton.positiveTypeDescription')
|
|
507
|
+
};
|
|
508
|
+
}
|
|
509
|
+
/**
|
|
510
|
+
* Capture native aria-label and aria-description attributes during initialization.
|
|
511
|
+
* Runs during ngOnInit to ensure attributes are captured before rendering the template.
|
|
512
|
+
* The native aria-description is removed from the DOM after capture to prevent
|
|
513
|
+
* duplicate accessibility attributes (ACC-264.1).
|
|
514
|
+
*/
|
|
515
|
+
ngOnInit() {
|
|
516
|
+
const nativeLabel = this.elementRef.nativeElement.getAttribute('aria-label');
|
|
517
|
+
if (nativeLabel) {
|
|
518
|
+
this._nativeAriaLabel.set(nativeLabel);
|
|
519
|
+
}
|
|
520
|
+
const nativeDescription = this.elementRef.nativeElement.getAttribute('aria-description');
|
|
521
|
+
if (nativeDescription) {
|
|
522
|
+
this._nativeAriaDescription.set(nativeDescription);
|
|
523
|
+
// Remove native attribute to prevent ACC-264.1 (duplicate aria-description)
|
|
524
|
+
this.elementRef.nativeElement.removeAttribute('aria-description');
|
|
525
|
+
}
|
|
526
|
+
const nativeDescribedBy = this.elementRef.nativeElement.getAttribute('aria-describedby');
|
|
527
|
+
if (nativeDescribedBy) {
|
|
528
|
+
this.nativeAriaDescribedBy.set(nativeDescribedBy);
|
|
529
|
+
}
|
|
443
530
|
}
|
|
444
531
|
/** Forces the focus outline around the button, which is not default behavior in Safari. */
|
|
445
532
|
clicked(event) {
|
|
@@ -450,13 +537,13 @@ class ButtonComponent extends BaseButton {
|
|
|
450
537
|
}
|
|
451
538
|
}
|
|
452
539
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
453
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ButtonComponent, isStandalone: true, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "clicked($event)" }, properties: { "attr.type": "type()", "attr.disabled": "_disabledState() || null", "attr.aria-disabled": "ariaDisabled() || null", "attr.aria-label": "buttonArialabel()", "attr.aria-
|
|
540
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ButtonComponent, isStandalone: true, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "clicked($event)" }, properties: { "attr.type": "type()", "attr.disabled": "_disabledState() || null", "attr.aria-disabled": "ariaDisabled() || null", "attr.aria-label": "buttonArialabel()", "attr.aria-describedby": "ariaDescribedby() || null", "attr.id": "id()", "class": "cssClass()" } }, providers: [
|
|
454
541
|
contentDensityObserverProviders(),
|
|
455
542
|
{
|
|
456
543
|
provide: FD_BUTTON_COMPONENT,
|
|
457
544
|
useExisting: ButtonComponent
|
|
458
545
|
}
|
|
459
|
-
], exportAs: ["fd-button"], usesInheritance: true, ngImport: i0, template: "@if (glyph() && glyphPosition() === 'before') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (label()) {\n <span class=\"fd-button__text\">\n {{ label() }}\n </span>\n}\n<ng-content></ng-content>\n<ng-content select=\"fd-button-badge\"></ng-content>\n@if (glyph() && glyphPosition() === 'after') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (fdMenu()) {\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n}\n", styles: [".fd-button{--fdButton_Clickable_Height:2.75rem;--fdButton_Padding_X:.625rem;--fdButton_Min_Width:2.25rem;--fdButton_Badge_Offset:-.3125rem;--fdButton_Badge_Margin:.25rem;--fdButton_Badge_Margin_Inline_Start:0;--fdButton_Badge_Width:auto;--fdButton_Badge_Height:1rem;--fdButton_Badge_Position:absolute;--fdButton_Badge_Position_Attention:absolute;--fdButton_Badge_Padding_Inline:.3125rem;--fdButton_Badge_Size_Attention:.75rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;outline:0;padding-block:0;padding-inline:0;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-style:solid;border-width:var(--sapButton_BorderWidth);height:var(--fdButton_Height,var(--sapElement_Height));max-height:var(--fdButton_Height,var(--sapElement_Height));min-width:var(--fdButton_Min_Width);padding-inline:calc(var(--fdButton_Padding_X) - var(--sapButton_BorderWidth));position:relative;text-align:center;text-shadow:var(--fdButton_Text_Shadow);--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button:after,.fd-button:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button::-moz-focus-inner{border:0}.fd-button:before{content:\"\";display:block;height:auto;inset:calc((var(--fdButton_Clickable_Height) - var(--fdButton_Height, var(--sapElement_Height)))*-.5) 0;position:absolute;width:100%}.fd-button__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:inherit;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;font-weight:inherit;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap}.fd-button__text:after,.fd-button__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button,.fd-button__text{font-family:var(--fdButton_Font_Family,var(--sapButton_FontFamily))}.fd-button :not(:first-child):not(.fd-button__badge){-webkit-margin-start:.375rem;margin-inline-start:.375rem}.fd-button>[class*=sap-icon]{color:inherit;font-size:1rem;font-style:normal;height:1rem;line-height:1rem;min-width:1rem;vertical-align:text-bottom;width:1rem}.fd-button>[class*=sap-icon]:after,.fd-button>[class*=sap-icon]:before{font-size:inherit;height:inherit;line-height:inherit;width:inherit}.fd-button__badge{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--sapContent_BadgeBackground);border:.0625rem solid var(--sapContent_BadgeBorderColor);border-radius:.5rem;color:var(--sapContent_BadgeTextColor);font-size:var(--sapFontSmallSize);height:var(--fdButton_Badge_Height);padding-block:0;padding-inline:var(--fdButton_Badge_Padding_Inline);position:var(--fdButton_Badge_Position);right:var(--fdButton_Badge_Offset);top:var(--fdButton_Badge_Offset);width:var(--fdButton_Badge_Width);z-index:1;-webkit-margin-start:var(--fdButton_Badge_Margin_Inline_Start);margin-inline-start:var(--fdButton_Badge_Margin_Inline_Start)}.fd-button__badge:after,.fd-button__badge:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button__badge[dir=rtl],[dir=rtl] .fd-button__badge{left:var(--fdButton_Badge_Offset);right:auto}.fd-button__badge--attention{--fdButton_Badge_Padding_Inline:0;--fdButton_Badge_Offset:-.1875rem;--fdButton_Badge_Width:var(--fdButton_Badge_Size_Attention);--fdButton_Badge_Height:var(--fdButton_Badge_Size_Attention);--fdButton_Badge_Position:var(--fdButton_Badge_Position_Attention)}.fd-button[class*=-compact],.fd-button[class*=-condensed],[class*=-compact] .fd-button:not([class*=-cozy]),[class*=-condensed] .fd-button:not([class*=-cozy]){--fdButton_Height:var(--fdButton_Compact_Height,var(--sapElement_Compact_Height));--fdButton_Clickable_Height:2rem;--fdButton_Padding_X:.5rem;--fdButton_Min_Width:2rem;--fdButton_Badge_Position:static;--fdButton_Badge_Margin_Inline_Start:.25rem;--fdButton_Badge_Size_Attention:.625rem}.fd-button[class*=-compact]:not(.fd-button--tool-header):has(.fd-button__badge),.fd-button[class*=-condensed]:not(.fd-button--tool-header):has(.fd-button__badge),[class*=-compact] .fd-button:not([class*=-cozy]):not(.fd-button--tool-header):has(.fd-button__badge),[class*=-condensed] .fd-button:not([class*=-cozy]):not(.fd-button--tool-header):has(.fd-button__badge){padding-inline:calc(.5rem - var(--sapButton_BorderWidth)) calc(.25rem - var(--sapButton_BorderWidth))}.fd-button--menu{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-button--menu-fixed-width{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.fd-button--menu .fd-button__text{line-height:1rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:start}.fd-button--full-width{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:100%;width:100%}.fd-button--text-alignment-left{text-align:left;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-button--text-alignment-right{text-align:right;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-button--decisive{min-width:4rem}.fd-button__instructions{position:absolute;clip:rect(0 0 0 0);border:0;height:1px;margin-block:-1px;margin-inline:-1px;overflow:hidden;padding-block:0;padding-inline:0;white-space:nowrap;width:1px}.fd-button.is-focus,.fd-button:focus{-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-button.is-focus:after,.fd-button:focus:after{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--fdButton_Focus_Border_Radius);content:\"\";display:block;inset:var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset);position:absolute}.fd-button.is-focus.fd-button--toggled:after,.fd-button.is-focus.is-selected:after,.fd-button:focus.fd-button--toggled:after,.fd-button:focus.is-selected:after{border-color:var(--fdButton_Outline_Contrast)}.fd-button.is-active,.fd-button.is-selected,.fd-button:active,.fd-button[aria-selected=true]{-webkit-box-shadow:none;box-shadow:none;outline:none}.fd-button.is-disabled,.fd-button:disabled,.fd-button[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:var(--sapContent_DisabledOpacity)}.fd-button.is-selected,.fd-button[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button.is-hover,.fd-button:hover{--fdButtonColor:var(--sapButton_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Hover_Background))}.fd-button.is-active,.fd-button:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button.is-active .fd-button__icon,.fd-button:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button.is-disabled,.fd-button:disabled,.fd-button[aria-disabled=true]{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Background))}.fd-button.is-disabled.is-selected,.fd-button.is-disabled[aria-selected=true],.fd-button:disabled.is-selected,.fd-button:disabled[aria-selected=true],.fd-button[aria-disabled=true].is-selected,.fd-button[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button.fd-button--toggled.is-hover,.fd-button.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button.fd-button--toggled.is-active,.fd-button.fd-button--toggled.is-selected,.fd-button.fd-button--toggled:active,.fd-button.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button.fd-button--toggled.is-active .fd-button__icon,.fd-button.fd-button--toggled.is-selected .fd-button__icon,.fd-button.fd-button--toggled:active .fd-button__icon,.fd-button.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button.fd-button--toggled.is-disabled,.fd-button.fd-button--toggled:disabled,.fd-button.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--emphasized,.fd-button--emphasized .fd-button__text{--fdButton_Font_Family:var(--sapButton_Emphasized_FontFamily)}.fd-button--emphasized{--fdButtonColor:var(--sapButton_Emphasized_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Emphasized_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Emphasized_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);border-width:var(--sapButton_Emphasized_BorderWidth);color:var(--fdButtonColor)}.fd-button--emphasized.is-selected,.fd-button--emphasized[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--emphasized.is-hover,.fd-button--emphasized:hover{--fdButtonColor:var(--sapButton_Emphasized_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Emphasized_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Emphasized_Hover_Background))}.fd-button--emphasized.is-active,.fd-button--emphasized:active{--fdButtonColor:var(--sapButton_Emphasized_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Emphasized_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Emphasized_Active_Background));--fdElementTextColor:var(--sapButton_Emphasized_Active_TextColor);--fdElementIconColor:var(--sapButton_Emphasized_Active_TextColor)}.fd-button--emphasized.is-active .fd-button__icon,.fd-button--emphasized:active .fd-button__icon{color:var(--sapButton_Emphasized_Active_TextColor);text-shadow:none}.fd-button--emphasized.is-disabled,.fd-button--emphasized:disabled,.fd-button--emphasized[aria-disabled=true]{--fdButtonColor:var(--sapButton_Emphasized_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Emphasized_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Emphasized_Background))}.fd-button--emphasized.is-disabled.is-selected,.fd-button--emphasized.is-disabled[aria-selected=true],.fd-button--emphasized:disabled.is-selected,.fd-button--emphasized:disabled[aria-selected=true],.fd-button--emphasized[aria-disabled=true].is-selected,.fd-button--emphasized[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--emphasized.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--emphasized.fd-button--toggled.is-hover,.fd-button--emphasized.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--emphasized.fd-button--toggled.is-active .fd-button__icon,.fd-button--emphasized.fd-button--toggled.is-selected .fd-button__icon,.fd-button--emphasized.fd-button--toggled:active .fd-button__icon,.fd-button--emphasized.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Emphasized_Active_TextColor);text-shadow:none}.fd-button--emphasized.fd-button--toggled.is-disabled,.fd-button--emphasized.fd-button--toggled:disabled,.fd-button--emphasized.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--emphasized.is-focus,.fd-button--emphasized:focus{z-index:5}.fd-button--emphasized.is-focus:after,.fd-button--emphasized:focus:after{border-color:var(--sapContent_ContrastFocusColor)}.fd-button--emphasized.is-focus.is-active:after,.fd-button--emphasized.is-focus:active:after,.fd-button--emphasized:focus.is-active:after,.fd-button--emphasized:focus:active:after{border-color:var(--sapContent_FocusColor)}.fd-button--emphasized[class*=-compact].is-focus,.fd-button--emphasized[class*=-compact]:focus,.fd-button--emphasized[class*=-condensed].is-focus,.fd-button--emphasized[class*=-condensed]:focus,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus{z-index:5}.fd-button--emphasized[class*=-compact].is-focus.is-active:after,.fd-button--emphasized[class*=-compact].is-focus:active:after,.fd-button--emphasized[class*=-compact]:focus.is-active:after,.fd-button--emphasized[class*=-compact]:focus:active:after,.fd-button--emphasized[class*=-condensed].is-focus.is-active:after,.fd-button--emphasized[class*=-condensed].is-focus:active:after,.fd-button--emphasized[class*=-condensed]:focus.is-active:after,.fd-button--emphasized[class*=-condensed]:focus:active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus.is-active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus:active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus.is-active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus:active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus.is-active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus:active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus.is-active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus:active:after{border-color:transparent}.fd-button--emphasized.is-active,.fd-button--emphasized.is-selected,.fd-button--emphasized:active,.fd-button--emphasized[aria-selected=true]{outline:none}.fd-button--emphasized.fd-button--toggled.is-focus,.fd-button--emphasized.fd-button--toggled:focus{outline-color:var(--fdButton_Emphasized_Active_Outline);z-index:5}.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled[aria-selected=true]{outline:none}.fd-button--attention{--fdButtonColor:var(--sapButton_Attention_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--attention.is-selected,.fd-button--attention[aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background))}.fd-button--attention.is-hover,.fd-button--attention:hover{--fdButtonColor:var(--sapButton_Attention_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Attention_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Attention_Hover_Background))}.fd-button--attention.is-active,.fd-button--attention:active{--fdButtonColor:var(--sapButton_Attention_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Attention_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Attention_Active_Background));--fdElementTextColor:var(--sapButton_Attention_Active_TextColor);--fdElementIconColor:var(--sapButton_Attention_Active_TextColor)}.fd-button--attention.is-active .fd-button__icon,.fd-button--attention:active .fd-button__icon{color:var(--sapButton_Attention_Active_TextColor);text-shadow:none}.fd-button--attention.is-disabled,.fd-button--attention:disabled,.fd-button--attention[aria-disabled=true]{--fdButtonColor:var(--sapButton_Attention_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Background))}.fd-button--attention.is-disabled.is-selected,.fd-button--attention.is-disabled[aria-selected=true],.fd-button--attention:disabled.is-selected,.fd-button--attention:disabled[aria-selected=true],.fd-button--attention[aria-disabled=true].is-selected,.fd-button--attention[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background))}.fd-button--attention.fd-button--toggled{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Attention_Selected_Background)}.fd-button--attention.fd-button--toggled.is-hover,.fd-button--attention.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Attention_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Attention_Selected_Hover_Background)}.fd-button--attention.fd-button--toggled.is-active,.fd-button--attention.fd-button--toggled.is-selected,.fd-button--attention.fd-button--toggled:active,.fd-button--attention.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Attention_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Hover_Background))}.fd-button--attention.fd-button--toggled.is-active .fd-button__icon,.fd-button--attention.fd-button--toggled.is-selected .fd-button__icon,.fd-button--attention.fd-button--toggled:active .fd-button__icon,.fd-button--attention.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Attention_Active_TextColor);text-shadow:none}.fd-button--attention.fd-button--toggled.is-disabled,.fd-button--attention.fd-button--toggled:disabled,.fd-button--attention.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--negative{--fdButtonColor:var(--sapButton_Reject_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--negative.is-selected,.fd-button--negative[aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background))}.fd-button--negative.is-hover,.fd-button--negative:hover{--fdButtonColor:var(--sapButton_Reject_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Reject_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Reject_Hover_Background))}.fd-button--negative.is-active,.fd-button--negative:active{--fdButtonColor:var(--sapButton_Reject_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Reject_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Reject_Active_Background));--fdElementTextColor:var(--sapButton_Reject_Active_TextColor);--fdElementIconColor:var(--sapButton_Reject_Active_TextColor)}.fd-button--negative.is-active .fd-button__icon,.fd-button--negative:active .fd-button__icon{color:var(--sapButton_Reject_Active_TextColor);text-shadow:none}.fd-button--negative.is-disabled,.fd-button--negative:disabled,.fd-button--negative[aria-disabled=true]{--fdButtonColor:var(--sapButton_Reject_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Background))}.fd-button--negative.is-disabled.is-selected,.fd-button--negative.is-disabled[aria-selected=true],.fd-button--negative:disabled.is-selected,.fd-button--negative:disabled[aria-selected=true],.fd-button--negative[aria-disabled=true].is-selected,.fd-button--negative[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background))}.fd-button--negative.fd-button--toggled{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Reject_Selected_Background)}.fd-button--negative.fd-button--toggled.is-hover,.fd-button--negative.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Reject_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Reject_Selected_Hover_Background)}.fd-button--negative.fd-button--toggled.is-active,.fd-button--negative.fd-button--toggled.is-selected,.fd-button--negative.fd-button--toggled:active,.fd-button--negative.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Reject_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Hover_Background))}.fd-button--negative.fd-button--toggled.is-active .fd-button__icon,.fd-button--negative.fd-button--toggled.is-selected .fd-button__icon,.fd-button--negative.fd-button--toggled:active .fd-button__icon,.fd-button--negative.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Reject_Active_TextColor);text-shadow:none}.fd-button--negative.fd-button--toggled.is-disabled,.fd-button--negative.fd-button--toggled:disabled,.fd-button--negative.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--positive{--fdButtonColor:var(--sapButton_Accept_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--positive.is-selected,.fd-button--positive[aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background))}.fd-button--positive.is-hover,.fd-button--positive:hover{--fdButtonColor:var(--sapButton_Accept_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Accept_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Accept_Hover_Background))}.fd-button--positive.is-active,.fd-button--positive:active{--fdButtonColor:var(--sapButton_Accept_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Accept_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Accept_Active_Background));--fdElementTextColor:var(--sapButton_Accept_Active_TextColor);--fdElementIconColor:var(--sapButton_Accept_Active_TextColor)}.fd-button--positive.is-active .fd-button__icon,.fd-button--positive:active .fd-button__icon{color:var(--sapButton_Accept_Active_TextColor);text-shadow:none}.fd-button--positive.is-disabled,.fd-button--positive:disabled,.fd-button--positive[aria-disabled=true]{--fdButtonColor:var(--sapButton_Accept_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Background))}.fd-button--positive.is-disabled.is-selected,.fd-button--positive.is-disabled[aria-selected=true],.fd-button--positive:disabled.is-selected,.fd-button--positive:disabled[aria-selected=true],.fd-button--positive[aria-disabled=true].is-selected,.fd-button--positive[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background))}.fd-button--positive.fd-button--toggled{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Accept_Selected_Background)}.fd-button--positive.fd-button--toggled.is-hover,.fd-button--positive.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Accept_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Accept_Selected_Hover_Background)}.fd-button--positive.fd-button--toggled.is-active,.fd-button--positive.fd-button--toggled.is-selected,.fd-button--positive.fd-button--toggled:active,.fd-button--positive.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Accept_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Hover_Background))}.fd-button--positive.fd-button--toggled.is-active .fd-button__icon,.fd-button--positive.fd-button--toggled.is-selected .fd-button__icon,.fd-button--positive.fd-button--toggled:active .fd-button__icon,.fd-button--positive.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Accept_Active_TextColor);text-shadow:none}.fd-button--positive.fd-button--toggled.is-disabled,.fd-button--positive.fd-button--toggled:disabled,.fd-button--positive.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--transparent{--fdButtonColor:var(--sapButton_Lite_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Lite_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Lite_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--transparent.is-selected,.fd-button--transparent[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--transparent.is-hover,.fd-button--transparent:hover{--fdButtonColor:var(--sapButton_Lite_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Lite_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Lite_Hover_Background))}.fd-button--transparent.is-active,.fd-button--transparent:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Lite_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Lite_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button--transparent.is-active .fd-button__icon,.fd-button--transparent:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--transparent.is-disabled,.fd-button--transparent:disabled,.fd-button--transparent[aria-disabled=true]{--fdButtonColor:var(--sapButton_Lite_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Lite_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Lite_Background))}.fd-button--transparent.is-disabled.is-selected,.fd-button--transparent.is-disabled[aria-selected=true],.fd-button--transparent:disabled.is-selected,.fd-button--transparent:disabled[aria-selected=true],.fd-button--transparent[aria-disabled=true].is-selected,.fd-button--transparent[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--transparent.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--transparent.fd-button--toggled.is-hover,.fd-button--transparent.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--transparent.fd-button--toggled.is-active,.fd-button--transparent.fd-button--toggled.is-selected,.fd-button--transparent.fd-button--toggled:active,.fd-button--transparent.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--transparent.fd-button--toggled.is-active .fd-button__icon,.fd-button--transparent.fd-button--toggled.is-selected .fd-button__icon,.fd-button--transparent.fd-button--toggled:active .fd-button__icon,.fd-button--transparent.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--transparent.fd-button--toggled.is-disabled,.fd-button--transparent.fd-button--toggled:disabled,.fd-button--transparent.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--ghost{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--fdButton_Ghost_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--ghost.is-selected,.fd-button--ghost[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--ghost.is-hover,.fd-button--ghost:hover{--fdButtonColor:var(--sapButton_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Hover_Background))}.fd-button--ghost.is-active,.fd-button--ghost:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button--ghost.is-active .fd-button__icon,.fd-button--ghost:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--ghost.is-disabled,.fd-button--ghost:disabled,.fd-button--ghost[aria-disabled=true]{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--fdButton_Ghost_Background))}.fd-button--ghost.is-disabled.is-selected,.fd-button--ghost.is-disabled[aria-selected=true],.fd-button--ghost:disabled.is-selected,.fd-button--ghost:disabled[aria-selected=true],.fd-button--ghost[aria-disabled=true].is-selected,.fd-button--ghost[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--ghost.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--ghost.fd-button--toggled.is-hover,.fd-button--ghost.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--ghost.fd-button--toggled.is-active,.fd-button--ghost.fd-button--toggled.is-selected,.fd-button--ghost.fd-button--toggled:active,.fd-button--ghost.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--ghost.fd-button--toggled.is-active .fd-button__icon,.fd-button--ghost.fd-button--toggled.is-selected .fd-button__icon,.fd-button--ghost.fd-button--toggled:active .fd-button__icon,.fd-button--ghost.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--ghost.fd-button--toggled.is-disabled,.fd-button--ghost.fd-button--toggled:disabled,.fd-button--ghost.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--tool-header{--fdButton_ToolHeader_Icon_Size:1rem;--fdButton_ToolHeader_Padding:.75rem;--fdButton_ToolHeader_Size:var(--fdButton_ToolHeader_Button_Size);--fdButton_ToolHeader_Background:var(--sapButton_Lite_Background);--fdButton_ToolHeader_Color:var(--fdButton_ToolHeader_Color_Normal);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Normal);--fdButton_ToolHeader_Border_Radius:var(--fdButton_ToolHeader_Button_Border_Radius);background:var(--fdButton_ToolHeader_Background);border:var(--sapButton_BorderWidth) solid var(--fdButton_ToolHeader_Border_Color);border-radius:var(--fdButton_ToolHeader_Border_Radius);color:var(--fdButton_ToolHeader_Color);height:var(--fdButton_ToolHeader_Size);max-height:var(--fdButton_ToolHeader_Size);max-width:var(--fdButton_ToolHeader_Size);min-height:var(--fdButton_ToolHeader_Size);min-width:var(--fdButton_ToolHeader_Size);padding-block:var(--fdButton_ToolHeader_Padding);padding-inline:var(--fdButton_ToolHeader_Padding);width:var(--fdButton_ToolHeader_Size)}.fd-button--tool-header [class*=sap-icon],.fd-button--tool-header[class*=sap-icon]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;font-size:var(--fdButton_ToolHeader_Icon_Size);height:var(--fdButton_ToolHeader_Icon_Size);width:var(--fdButton_ToolHeader_Icon_Size)}.fd-button--tool-header.is-hover,.fd-button--tool-header:hover{--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Hover);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Hover);--fdButton_Hover_Shadow:none}.fd-button--tool-header.is-active,.fd-button--tool-header:active{--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Active);--fdButton_ToolHeader_Color:var(--fdButton_ToolHeader_Color_Active);outline:none}.fd-button--tool-header.is-active.is-focus,.fd-button--tool-header.is-active:focus,.fd-button--tool-header:active.is-focus,.fd-button--tool-header:active:focus{z-index:5;--fdButton_ToolHeader_Border_Radius:.375rem;--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Active);outline:none}.fd-button--tool-header.is-active.is-focus:after,.fd-button--tool-header.is-active:focus:after,.fd-button--tool-header:active.is-focus:after,.fd-button--tool-header:active:focus:after{border:none}.fd-button--tool-header.is-focus,.fd-button--tool-header:focus{z-index:5;--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Focus);--fdButton_ToolHeader_Border_Radius:var(--fdButton_ToolHeader_Border_Radius_Focus);outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--fdButton_ToolHeader_Outline_Color)}.fd-button--tool-header.is-focus:after,.fd-button--tool-header:focus:after{border:none}.fd-button--tool-header.is-disabled,.fd-button--tool-header:disabled,.fd-button--tool-header[aria-disabled=true]{--fdButton_ToolHeader_Background:var(--sapButton_Lite_Background);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Disabled);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-button--tool-header[class*=-compact],[class*=-compact] .fd-button--tool-header:not([class*=-cozy]){--fdButton_ToolHeader_Padding:.5rem;--fdButton_ToolHeader_Size:var(--fdButton_ToolHeader_Button_Size_Compact)}.fd-button--tool-header .fd-button__badge{background:var(--sapContent_BadgeBackground);border:0;border:.0625rem solid var(--fdButton_ToolHeader_Badge_Border_Color);border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_BadgeBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.625rem;line-height:normal;margin-block:0;margin-inline:0;max-height:.625rem;max-width:.625rem;min-height:.625rem;min-width:.625rem;overflow:hidden;padding-block:0;padding-inline:0;position:absolute;right:-.125rem;top:-.125rem;width:.625rem}.fd-button--tool-header .fd-button__badge:after,.fd-button--tool-header .fd-button__badge:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button--tool-header .fd-button__badge[dir=rtl],[dir=rtl] .fd-button--tool-header .fd-button__badge{left:-.125rem;right:auto}.fd-button--nested,.fd-button--nested-square{--fdButton_Nested_Size:1.5rem;--fdButton_Nested_Icon_Size:.75rem;--fdButton_Nested_Click_Area:2rem;--fdButton_Nested_Color:var(--sapContent_IconColor);--fdButton_Nested_Background:var(--sapButton_Lite_Background);--fdButton_Nested_Border_Color:var(--fdButton_ToolHeader_Border_Color_Normal);--fdButton_Nested_Border_Radius:1rem;background:var(--fdButton_Nested_Background);border:var(--sapButton_BorderWidth) solid var(--fdButton_Nested_Border_Color);border-radius:var(--fdButton_Nested_Border_Radius);color:var(--fdButton_Nested_Color);height:var(--fdButton_Nested_Size);max-height:var(--fdButton_Nested_Size);max-width:var(--fdButton_Nested_Size);min-height:var(--fdButton_Nested_Size);min-width:var(--fdButton_Nested_Size);padding-block:0;padding-inline:0;width:var(--fdButton_Nested_Size)}.fd-button--nested [class*=sap-icon],.fd-button--nested-square [class*=sap-icon],.fd-button--nested-square[class*=sap-icon],.fd-button--nested[class*=sap-icon]{color:inherit;font-size:var(--fdButton_Nested_Icon_Size)}.fd-button--nested-square:before,.fd-button--nested:before{height:var(--fdButton_Nested_Click_Area);inset:auto;max-height:var(--fdButton_Nested_Click_Area);max-width:var(--fdButton_Nested_Click_Area);min-height:var(--fdButton_Nested_Click_Area);min-width:var(--fdButton_Nested_Click_Area);width:var(--fdButton_Nested_Click_Area)}.fd-button--nested-square.is-hover,.fd-button--nested-square:hover,.fd-button--nested.is-hover,.fd-button--nested:hover{--fdButton_Nested_Background:var(--sapButton_Lite_Hover_Background);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Hover);--fdButton_Hover_Shadow:none}.fd-button--nested-square.is-active,.fd-button--nested-square:active,.fd-button--nested.is-active,.fd-button--nested:active{--fdButton_Nested_Background:var(--fdButton_Nested_Background_Active);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Active);--fdButton_Nested_Color:var(--fdButton_Nested_Color_Active);outline:none}.fd-button--nested-square.is-active.is-focus,.fd-button--nested-square.is-active:focus,.fd-button--nested-square:active.is-focus,.fd-button--nested-square:active:focus,.fd-button--nested.is-active.is-focus,.fd-button--nested.is-active:focus,.fd-button--nested:active.is-focus,.fd-button--nested:active:focus{z-index:5;--fdButton_Nested_Border_Radius:.75rem;--fdButton_Nested_Background:var(--fdButton_Nested_Background_Active);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Active);outline:none}.fd-button--nested-square.is-active.is-focus:after,.fd-button--nested-square.is-active:focus:after,.fd-button--nested-square:active.is-focus:after,.fd-button--nested-square:active:focus:after,.fd-button--nested.is-active.is-focus:after,.fd-button--nested.is-active:focus:after,.fd-button--nested:active.is-focus:after,.fd-button--nested:active:focus:after{border:none}.fd-button--nested-square.is-focus,.fd-button--nested-square:focus,.fd-button--nested.is-focus,.fd-button--nested:focus{z-index:5;--fdButton_Nested_Background:var(--fdButton_Nested_Background_Focus);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Focus);--fdButton_Nested_Border_Radius:var(--fdButton_Nested_Border_Radius_Focus);outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor)}.fd-button--nested-square.is-focus:after,.fd-button--nested-square:focus:after,.fd-button--nested.is-focus:after,.fd-button--nested:focus:after{border:none}.fd-button--nested-square.is-disabled,.fd-button--nested-square:disabled,.fd-button--nested-square[aria-disabled=true],.fd-button--nested.is-disabled,.fd-button--nested:disabled,.fd-button--nested[aria-disabled=true]{--fdButton_Nested_Background:var(--sapButton_Lite_Background);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Disabled);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-button--nested-square[class*=-compact],.fd-button--nested[class*=-compact],[class*=-compact] .fd-button--nested-square:not([class*=-cozy]),[class*=-compact] .fd-button--nested:not([class*=-cozy]){--fdButton_Nested_Size:1.375rem;--fdButton_Nested_Click_Area:1.625rem}.fd-button--nested-square,.fd-button--nested-square.is-active,.fd-button--nested-square:active{--fdButton_Nested_Border_Radius:.1875rem}.fd-button--nested-square.is-active.is-focus,.fd-button--nested-square.is-active:focus,.fd-button--nested-square.is-focus,.fd-button--nested-square:active.is-focus,.fd-button--nested-square:active:focus,.fd-button--nested-square:focus{z-index:5;--fdButton_Nested_Border_Radius:.1875rem}.fd-button.fd-button--emphasized{font-weight:400}\n/*! Bundled license information:\n\nfundamental-styles/dist/button.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
546
|
+
], exportAs: ["fd-button"], usesInheritance: true, ngImport: i0, template: "@if (glyph() && glyphPosition() === 'before') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (label()) {\n <span class=\"fd-button__text\">\n {{ label() }}\n </span>\n}\n<ng-content></ng-content>\n<ng-content select=\"fd-button-badge\"></ng-content>\n@if (glyph() && glyphPosition() === 'after') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (fdMenu()) {\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n}\n\n<!-- Custom description (ariaDescription input or native attribute).\n Skipped when user provides aria-describedby \u2014 they manage their own description references. -->\n@if (!ariaDescribedBy() && !nativeAriaDescribedBy() && effectiveAriaDescription()) {\n <span class=\"fd-button__sr-only\" [attr.id]=\"id() + '-description'\">{{ effectiveAriaDescription() }}</span>\n}\n\n<!-- Type description (special button types: emphasized, positive, negative, attention).\n Skipped when user provides aria-describedby \u2014 they manage their own description references. -->\n@if (!ariaDescribedBy() && !nativeAriaDescribedBy() && isSpecialButtonType()) {\n <span class=\"fd-button__sr-only\" [attr.id]=\"id() + '-type-description'\">{{\n ariaTypeDescription() || defaultButtonTypeDescription()\n }}</span>\n}\n", styles: [".fd-button{--fdButton_Clickable_Height:2.75rem;--fdButton_Padding_X:.625rem;--fdButton_Min_Width:2.25rem;--fdButton_Badge_Offset:-.3125rem;--fdButton_Badge_Margin:.25rem;--fdButton_Badge_Margin_Inline_Start:0;--fdButton_Badge_Width:auto;--fdButton_Badge_Height:1rem;--fdButton_Badge_Position:absolute;--fdButton_Badge_Position_Attention:absolute;--fdButton_Badge_Padding_Inline:.3125rem;--fdButton_Badge_Size_Attention:.75rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;outline:0;padding-block:0;padding-inline:0;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-style:solid;border-width:var(--sapButton_BorderWidth);height:var(--fdButton_Height,var(--sapElement_Height));max-height:var(--fdButton_Height,var(--sapElement_Height));min-width:var(--fdButton_Min_Width);padding-inline:calc(var(--fdButton_Padding_X) - var(--sapButton_BorderWidth));position:relative;text-align:center;text-shadow:var(--fdButton_Text_Shadow);--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button:after,.fd-button:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button::-moz-focus-inner{border:0}.fd-button:before{content:\"\";display:block;height:auto;inset:calc((var(--fdButton_Clickable_Height) - var(--fdButton_Height, var(--sapElement_Height)))*-.5) 0;position:absolute;width:100%}.fd-button__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:inherit;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;font-weight:inherit;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap}.fd-button__text:after,.fd-button__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button,.fd-button__text{font-family:var(--fdButton_Font_Family,var(--sapButton_FontFamily))}.fd-button :not(:first-child):not(.fd-button__badge){-webkit-margin-start:.375rem;margin-inline-start:.375rem}.fd-button>[class*=sap-icon]{color:inherit;font-size:1rem;font-style:normal;height:1rem;line-height:1rem;min-width:1rem;vertical-align:text-bottom;width:1rem}.fd-button>[class*=sap-icon]:after,.fd-button>[class*=sap-icon]:before{font-size:inherit;height:inherit;line-height:inherit;width:inherit}.fd-button__badge{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--sapContent_BadgeBackground);border:.0625rem solid var(--sapContent_BadgeBorderColor);border-radius:.5rem;color:var(--sapContent_BadgeTextColor);font-size:var(--sapFontSmallSize);height:var(--fdButton_Badge_Height);padding-block:0;padding-inline:var(--fdButton_Badge_Padding_Inline);position:var(--fdButton_Badge_Position);right:var(--fdButton_Badge_Offset);top:var(--fdButton_Badge_Offset);width:var(--fdButton_Badge_Width);z-index:1;-webkit-margin-start:var(--fdButton_Badge_Margin_Inline_Start);margin-inline-start:var(--fdButton_Badge_Margin_Inline_Start)}.fd-button__badge:after,.fd-button__badge:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button__badge[dir=rtl],[dir=rtl] .fd-button__badge{left:var(--fdButton_Badge_Offset);right:auto}.fd-button__badge--attention{--fdButton_Badge_Padding_Inline:0;--fdButton_Badge_Offset:-.1875rem;--fdButton_Badge_Width:var(--fdButton_Badge_Size_Attention);--fdButton_Badge_Height:var(--fdButton_Badge_Size_Attention);--fdButton_Badge_Position:var(--fdButton_Badge_Position_Attention)}.fd-button[class*=-compact],.fd-button[class*=-condensed],[class*=-compact] .fd-button:not([class*=-cozy]),[class*=-condensed] .fd-button:not([class*=-cozy]){--fdButton_Height:var(--fdButton_Compact_Height,var(--sapElement_Compact_Height));--fdButton_Clickable_Height:2rem;--fdButton_Padding_X:.5rem;--fdButton_Min_Width:2rem;--fdButton_Badge_Position:static;--fdButton_Badge_Margin_Inline_Start:.25rem;--fdButton_Badge_Size_Attention:.625rem}.fd-button[class*=-compact]:not(.fd-button--tool-header):has(.fd-button__badge),.fd-button[class*=-condensed]:not(.fd-button--tool-header):has(.fd-button__badge),[class*=-compact] .fd-button:not([class*=-cozy]):not(.fd-button--tool-header):has(.fd-button__badge),[class*=-condensed] .fd-button:not([class*=-cozy]):not(.fd-button--tool-header):has(.fd-button__badge){padding-inline:calc(.5rem - var(--sapButton_BorderWidth)) calc(.25rem - var(--sapButton_BorderWidth))}.fd-button--menu{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-button--menu-fixed-width{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.fd-button--menu .fd-button__text{line-height:1rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:start}.fd-button--full-width{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:100%;width:100%}.fd-button--text-alignment-left{text-align:left;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-button--text-alignment-right{text-align:right;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-button--decisive{min-width:4rem}.fd-button__instructions{position:absolute;clip:rect(0 0 0 0);border:0;height:1px;margin-block:-1px;margin-inline:-1px;overflow:hidden;padding-block:0;padding-inline:0;white-space:nowrap;width:1px}.fd-button.is-focus,.fd-button:focus{-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-button.is-focus:after,.fd-button:focus:after{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--fdButton_Focus_Border_Radius);content:\"\";display:block;inset:var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset);position:absolute}.fd-button.is-focus.fd-button--toggled:after,.fd-button.is-focus.is-selected:after,.fd-button:focus.fd-button--toggled:after,.fd-button:focus.is-selected:after{border-color:var(--fdButton_Outline_Contrast)}.fd-button.is-active,.fd-button.is-selected,.fd-button:active,.fd-button[aria-selected=true]{-webkit-box-shadow:none;box-shadow:none;outline:none}.fd-button.is-disabled,.fd-button:disabled,.fd-button[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:var(--sapContent_DisabledOpacity)}.fd-button.is-selected,.fd-button[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button.is-hover,.fd-button:hover{--fdButtonColor:var(--sapButton_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Hover_Background))}.fd-button.is-active,.fd-button:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button.is-active .fd-button__icon,.fd-button:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button.is-disabled,.fd-button:disabled,.fd-button[aria-disabled=true]{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Background))}.fd-button.is-disabled.is-selected,.fd-button.is-disabled[aria-selected=true],.fd-button:disabled.is-selected,.fd-button:disabled[aria-selected=true],.fd-button[aria-disabled=true].is-selected,.fd-button[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button.fd-button--toggled.is-hover,.fd-button.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button.fd-button--toggled.is-active,.fd-button.fd-button--toggled.is-selected,.fd-button.fd-button--toggled:active,.fd-button.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button.fd-button--toggled.is-active .fd-button__icon,.fd-button.fd-button--toggled.is-selected .fd-button__icon,.fd-button.fd-button--toggled:active .fd-button__icon,.fd-button.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button.fd-button--toggled.is-disabled,.fd-button.fd-button--toggled:disabled,.fd-button.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--emphasized,.fd-button--emphasized .fd-button__text{--fdButton_Font_Family:var(--sapButton_Emphasized_FontFamily)}.fd-button--emphasized{--fdButtonColor:var(--sapButton_Emphasized_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Emphasized_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Emphasized_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);border-width:var(--sapButton_Emphasized_BorderWidth);color:var(--fdButtonColor)}.fd-button--emphasized.is-selected,.fd-button--emphasized[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--emphasized.is-hover,.fd-button--emphasized:hover{--fdButtonColor:var(--sapButton_Emphasized_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Emphasized_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Emphasized_Hover_Background))}.fd-button--emphasized.is-active,.fd-button--emphasized:active{--fdButtonColor:var(--sapButton_Emphasized_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Emphasized_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Emphasized_Active_Background));--fdElementTextColor:var(--sapButton_Emphasized_Active_TextColor);--fdElementIconColor:var(--sapButton_Emphasized_Active_TextColor)}.fd-button--emphasized.is-active .fd-button__icon,.fd-button--emphasized:active .fd-button__icon{color:var(--sapButton_Emphasized_Active_TextColor);text-shadow:none}.fd-button--emphasized.is-disabled,.fd-button--emphasized:disabled,.fd-button--emphasized[aria-disabled=true]{--fdButtonColor:var(--sapButton_Emphasized_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Emphasized_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Emphasized_Background))}.fd-button--emphasized.is-disabled.is-selected,.fd-button--emphasized.is-disabled[aria-selected=true],.fd-button--emphasized:disabled.is-selected,.fd-button--emphasized:disabled[aria-selected=true],.fd-button--emphasized[aria-disabled=true].is-selected,.fd-button--emphasized[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--emphasized.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--emphasized.fd-button--toggled.is-hover,.fd-button--emphasized.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--emphasized.fd-button--toggled.is-active .fd-button__icon,.fd-button--emphasized.fd-button--toggled.is-selected .fd-button__icon,.fd-button--emphasized.fd-button--toggled:active .fd-button__icon,.fd-button--emphasized.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Emphasized_Active_TextColor);text-shadow:none}.fd-button--emphasized.fd-button--toggled.is-disabled,.fd-button--emphasized.fd-button--toggled:disabled,.fd-button--emphasized.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--emphasized.is-focus,.fd-button--emphasized:focus{z-index:5}.fd-button--emphasized.is-focus:after,.fd-button--emphasized:focus:after{border-color:var(--sapContent_ContrastFocusColor)}.fd-button--emphasized.is-focus.is-active:after,.fd-button--emphasized.is-focus:active:after,.fd-button--emphasized:focus.is-active:after,.fd-button--emphasized:focus:active:after{border-color:var(--sapContent_FocusColor)}.fd-button--emphasized[class*=-compact].is-focus,.fd-button--emphasized[class*=-compact]:focus,.fd-button--emphasized[class*=-condensed].is-focus,.fd-button--emphasized[class*=-condensed]:focus,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus{z-index:5}.fd-button--emphasized[class*=-compact].is-focus.is-active:after,.fd-button--emphasized[class*=-compact].is-focus:active:after,.fd-button--emphasized[class*=-compact]:focus.is-active:after,.fd-button--emphasized[class*=-compact]:focus:active:after,.fd-button--emphasized[class*=-condensed].is-focus.is-active:after,.fd-button--emphasized[class*=-condensed].is-focus:active:after,.fd-button--emphasized[class*=-condensed]:focus.is-active:after,.fd-button--emphasized[class*=-condensed]:focus:active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus.is-active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus:active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus.is-active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus:active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus.is-active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus:active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus.is-active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus:active:after{border-color:transparent}.fd-button--emphasized.is-active,.fd-button--emphasized.is-selected,.fd-button--emphasized:active,.fd-button--emphasized[aria-selected=true]{outline:none}.fd-button--emphasized.fd-button--toggled.is-focus,.fd-button--emphasized.fd-button--toggled:focus{outline-color:var(--fdButton_Emphasized_Active_Outline);z-index:5}.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled[aria-selected=true]{outline:none}.fd-button--attention{--fdButtonColor:var(--sapButton_Attention_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--attention.is-selected,.fd-button--attention[aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background))}.fd-button--attention.is-hover,.fd-button--attention:hover{--fdButtonColor:var(--sapButton_Attention_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Attention_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Attention_Hover_Background))}.fd-button--attention.is-active,.fd-button--attention:active{--fdButtonColor:var(--sapButton_Attention_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Attention_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Attention_Active_Background));--fdElementTextColor:var(--sapButton_Attention_Active_TextColor);--fdElementIconColor:var(--sapButton_Attention_Active_TextColor)}.fd-button--attention.is-active .fd-button__icon,.fd-button--attention:active .fd-button__icon{color:var(--sapButton_Attention_Active_TextColor);text-shadow:none}.fd-button--attention.is-disabled,.fd-button--attention:disabled,.fd-button--attention[aria-disabled=true]{--fdButtonColor:var(--sapButton_Attention_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Background))}.fd-button--attention.is-disabled.is-selected,.fd-button--attention.is-disabled[aria-selected=true],.fd-button--attention:disabled.is-selected,.fd-button--attention:disabled[aria-selected=true],.fd-button--attention[aria-disabled=true].is-selected,.fd-button--attention[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background))}.fd-button--attention.fd-button--toggled{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Attention_Selected_Background)}.fd-button--attention.fd-button--toggled.is-hover,.fd-button--attention.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Attention_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Attention_Selected_Hover_Background)}.fd-button--attention.fd-button--toggled.is-active,.fd-button--attention.fd-button--toggled.is-selected,.fd-button--attention.fd-button--toggled:active,.fd-button--attention.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Attention_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Hover_Background))}.fd-button--attention.fd-button--toggled.is-active .fd-button__icon,.fd-button--attention.fd-button--toggled.is-selected .fd-button__icon,.fd-button--attention.fd-button--toggled:active .fd-button__icon,.fd-button--attention.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Attention_Active_TextColor);text-shadow:none}.fd-button--attention.fd-button--toggled.is-disabled,.fd-button--attention.fd-button--toggled:disabled,.fd-button--attention.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--negative{--fdButtonColor:var(--sapButton_Reject_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--negative.is-selected,.fd-button--negative[aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background))}.fd-button--negative.is-hover,.fd-button--negative:hover{--fdButtonColor:var(--sapButton_Reject_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Reject_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Reject_Hover_Background))}.fd-button--negative.is-active,.fd-button--negative:active{--fdButtonColor:var(--sapButton_Reject_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Reject_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Reject_Active_Background));--fdElementTextColor:var(--sapButton_Reject_Active_TextColor);--fdElementIconColor:var(--sapButton_Reject_Active_TextColor)}.fd-button--negative.is-active .fd-button__icon,.fd-button--negative:active .fd-button__icon{color:var(--sapButton_Reject_Active_TextColor);text-shadow:none}.fd-button--negative.is-disabled,.fd-button--negative:disabled,.fd-button--negative[aria-disabled=true]{--fdButtonColor:var(--sapButton_Reject_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Background))}.fd-button--negative.is-disabled.is-selected,.fd-button--negative.is-disabled[aria-selected=true],.fd-button--negative:disabled.is-selected,.fd-button--negative:disabled[aria-selected=true],.fd-button--negative[aria-disabled=true].is-selected,.fd-button--negative[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background))}.fd-button--negative.fd-button--toggled{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Reject_Selected_Background)}.fd-button--negative.fd-button--toggled.is-hover,.fd-button--negative.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Reject_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Reject_Selected_Hover_Background)}.fd-button--negative.fd-button--toggled.is-active,.fd-button--negative.fd-button--toggled.is-selected,.fd-button--negative.fd-button--toggled:active,.fd-button--negative.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Reject_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Hover_Background))}.fd-button--negative.fd-button--toggled.is-active .fd-button__icon,.fd-button--negative.fd-button--toggled.is-selected .fd-button__icon,.fd-button--negative.fd-button--toggled:active .fd-button__icon,.fd-button--negative.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Reject_Active_TextColor);text-shadow:none}.fd-button--negative.fd-button--toggled.is-disabled,.fd-button--negative.fd-button--toggled:disabled,.fd-button--negative.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--positive{--fdButtonColor:var(--sapButton_Accept_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--positive.is-selected,.fd-button--positive[aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background))}.fd-button--positive.is-hover,.fd-button--positive:hover{--fdButtonColor:var(--sapButton_Accept_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Accept_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Accept_Hover_Background))}.fd-button--positive.is-active,.fd-button--positive:active{--fdButtonColor:var(--sapButton_Accept_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Accept_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Accept_Active_Background));--fdElementTextColor:var(--sapButton_Accept_Active_TextColor);--fdElementIconColor:var(--sapButton_Accept_Active_TextColor)}.fd-button--positive.is-active .fd-button__icon,.fd-button--positive:active .fd-button__icon{color:var(--sapButton_Accept_Active_TextColor);text-shadow:none}.fd-button--positive.is-disabled,.fd-button--positive:disabled,.fd-button--positive[aria-disabled=true]{--fdButtonColor:var(--sapButton_Accept_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Background))}.fd-button--positive.is-disabled.is-selected,.fd-button--positive.is-disabled[aria-selected=true],.fd-button--positive:disabled.is-selected,.fd-button--positive:disabled[aria-selected=true],.fd-button--positive[aria-disabled=true].is-selected,.fd-button--positive[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background))}.fd-button--positive.fd-button--toggled{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Accept_Selected_Background)}.fd-button--positive.fd-button--toggled.is-hover,.fd-button--positive.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Accept_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Accept_Selected_Hover_Background)}.fd-button--positive.fd-button--toggled.is-active,.fd-button--positive.fd-button--toggled.is-selected,.fd-button--positive.fd-button--toggled:active,.fd-button--positive.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Accept_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Hover_Background))}.fd-button--positive.fd-button--toggled.is-active .fd-button__icon,.fd-button--positive.fd-button--toggled.is-selected .fd-button__icon,.fd-button--positive.fd-button--toggled:active .fd-button__icon,.fd-button--positive.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Accept_Active_TextColor);text-shadow:none}.fd-button--positive.fd-button--toggled.is-disabled,.fd-button--positive.fd-button--toggled:disabled,.fd-button--positive.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--transparent{--fdButtonColor:var(--sapButton_Lite_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Lite_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Lite_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--transparent.is-selected,.fd-button--transparent[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--transparent.is-hover,.fd-button--transparent:hover{--fdButtonColor:var(--sapButton_Lite_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Lite_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Lite_Hover_Background))}.fd-button--transparent.is-active,.fd-button--transparent:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Lite_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Lite_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button--transparent.is-active .fd-button__icon,.fd-button--transparent:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--transparent.is-disabled,.fd-button--transparent:disabled,.fd-button--transparent[aria-disabled=true]{--fdButtonColor:var(--sapButton_Lite_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Lite_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Lite_Background))}.fd-button--transparent.is-disabled.is-selected,.fd-button--transparent.is-disabled[aria-selected=true],.fd-button--transparent:disabled.is-selected,.fd-button--transparent:disabled[aria-selected=true],.fd-button--transparent[aria-disabled=true].is-selected,.fd-button--transparent[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--transparent.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--transparent.fd-button--toggled.is-hover,.fd-button--transparent.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--transparent.fd-button--toggled.is-active,.fd-button--transparent.fd-button--toggled.is-selected,.fd-button--transparent.fd-button--toggled:active,.fd-button--transparent.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--transparent.fd-button--toggled.is-active .fd-button__icon,.fd-button--transparent.fd-button--toggled.is-selected .fd-button__icon,.fd-button--transparent.fd-button--toggled:active .fd-button__icon,.fd-button--transparent.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--transparent.fd-button--toggled.is-disabled,.fd-button--transparent.fd-button--toggled:disabled,.fd-button--transparent.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--ghost{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--fdButton_Ghost_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--ghost.is-selected,.fd-button--ghost[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--ghost.is-hover,.fd-button--ghost:hover{--fdButtonColor:var(--sapButton_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Hover_Background))}.fd-button--ghost.is-active,.fd-button--ghost:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button--ghost.is-active .fd-button__icon,.fd-button--ghost:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--ghost.is-disabled,.fd-button--ghost:disabled,.fd-button--ghost[aria-disabled=true]{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--fdButton_Ghost_Background))}.fd-button--ghost.is-disabled.is-selected,.fd-button--ghost.is-disabled[aria-selected=true],.fd-button--ghost:disabled.is-selected,.fd-button--ghost:disabled[aria-selected=true],.fd-button--ghost[aria-disabled=true].is-selected,.fd-button--ghost[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--ghost.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--ghost.fd-button--toggled.is-hover,.fd-button--ghost.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--ghost.fd-button--toggled.is-active,.fd-button--ghost.fd-button--toggled.is-selected,.fd-button--ghost.fd-button--toggled:active,.fd-button--ghost.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--ghost.fd-button--toggled.is-active .fd-button__icon,.fd-button--ghost.fd-button--toggled.is-selected .fd-button__icon,.fd-button--ghost.fd-button--toggled:active .fd-button__icon,.fd-button--ghost.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--ghost.fd-button--toggled.is-disabled,.fd-button--ghost.fd-button--toggled:disabled,.fd-button--ghost.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--tool-header{--fdButton_ToolHeader_Icon_Size:1rem;--fdButton_ToolHeader_Padding:.75rem;--fdButton_ToolHeader_Size:var(--fdButton_ToolHeader_Button_Size);--fdButton_ToolHeader_Background:var(--sapButton_Lite_Background);--fdButton_ToolHeader_Color:var(--fdButton_ToolHeader_Color_Normal);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Normal);--fdButton_ToolHeader_Border_Radius:var(--fdButton_ToolHeader_Button_Border_Radius);background:var(--fdButton_ToolHeader_Background);border:var(--sapButton_BorderWidth) solid var(--fdButton_ToolHeader_Border_Color);border-radius:var(--fdButton_ToolHeader_Border_Radius);color:var(--fdButton_ToolHeader_Color);height:var(--fdButton_ToolHeader_Size);max-height:var(--fdButton_ToolHeader_Size);max-width:var(--fdButton_ToolHeader_Size);min-height:var(--fdButton_ToolHeader_Size);min-width:var(--fdButton_ToolHeader_Size);padding-block:var(--fdButton_ToolHeader_Padding);padding-inline:var(--fdButton_ToolHeader_Padding);width:var(--fdButton_ToolHeader_Size)}.fd-button--tool-header [class*=sap-icon],.fd-button--tool-header[class*=sap-icon]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;font-size:var(--fdButton_ToolHeader_Icon_Size);height:var(--fdButton_ToolHeader_Icon_Size);width:var(--fdButton_ToolHeader_Icon_Size)}.fd-button--tool-header.is-hover,.fd-button--tool-header:hover{--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Hover);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Hover);--fdButton_Hover_Shadow:none}.fd-button--tool-header.is-active,.fd-button--tool-header:active{--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Active);--fdButton_ToolHeader_Color:var(--fdButton_ToolHeader_Color_Active);outline:none}.fd-button--tool-header.is-active.is-focus,.fd-button--tool-header.is-active:focus,.fd-button--tool-header:active.is-focus,.fd-button--tool-header:active:focus{z-index:5;--fdButton_ToolHeader_Border_Radius:.375rem;--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Active);outline:none}.fd-button--tool-header.is-active.is-focus:after,.fd-button--tool-header.is-active:focus:after,.fd-button--tool-header:active.is-focus:after,.fd-button--tool-header:active:focus:after{border:none}.fd-button--tool-header.is-focus,.fd-button--tool-header:focus{z-index:5;--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Focus);--fdButton_ToolHeader_Border_Radius:var(--fdButton_ToolHeader_Border_Radius_Focus);outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--fdButton_ToolHeader_Outline_Color)}.fd-button--tool-header.is-focus:after,.fd-button--tool-header:focus:after{border:none}.fd-button--tool-header.is-disabled,.fd-button--tool-header:disabled,.fd-button--tool-header[aria-disabled=true]{--fdButton_ToolHeader_Background:var(--sapButton_Lite_Background);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Disabled);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-button--tool-header[class*=-compact],[class*=-compact] .fd-button--tool-header:not([class*=-cozy]){--fdButton_ToolHeader_Padding:.5rem;--fdButton_ToolHeader_Size:var(--fdButton_ToolHeader_Button_Size_Compact)}.fd-button--tool-header .fd-button__badge{background:var(--sapContent_BadgeBackground);border:0;border:.0625rem solid var(--fdButton_ToolHeader_Badge_Border_Color);border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_BadgeBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.625rem;line-height:normal;margin-block:0;margin-inline:0;max-height:.625rem;max-width:.625rem;min-height:.625rem;min-width:.625rem;overflow:hidden;padding-block:0;padding-inline:0;position:absolute;right:-.125rem;top:-.125rem;width:.625rem}.fd-button--tool-header .fd-button__badge:after,.fd-button--tool-header .fd-button__badge:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button--tool-header .fd-button__badge[dir=rtl],[dir=rtl] .fd-button--tool-header .fd-button__badge{left:-.125rem;right:auto}.fd-button--nested,.fd-button--nested-square{--fdButton_Nested_Size:1.5rem;--fdButton_Nested_Icon_Size:.75rem;--fdButton_Nested_Click_Area:2rem;--fdButton_Nested_Color:var(--sapContent_IconColor);--fdButton_Nested_Background:var(--sapButton_Lite_Background);--fdButton_Nested_Border_Color:var(--fdButton_ToolHeader_Border_Color_Normal);--fdButton_Nested_Border_Radius:1rem;background:var(--fdButton_Nested_Background);border:var(--sapButton_BorderWidth) solid var(--fdButton_Nested_Border_Color);border-radius:var(--fdButton_Nested_Border_Radius);color:var(--fdButton_Nested_Color);height:var(--fdButton_Nested_Size);max-height:var(--fdButton_Nested_Size);max-width:var(--fdButton_Nested_Size);min-height:var(--fdButton_Nested_Size);min-width:var(--fdButton_Nested_Size);padding-block:0;padding-inline:0;width:var(--fdButton_Nested_Size)}.fd-button--nested [class*=sap-icon],.fd-button--nested-square [class*=sap-icon],.fd-button--nested-square[class*=sap-icon],.fd-button--nested[class*=sap-icon]{color:inherit;font-size:var(--fdButton_Nested_Icon_Size)}.fd-button--nested-square:before,.fd-button--nested:before{height:var(--fdButton_Nested_Click_Area);inset:auto;max-height:var(--fdButton_Nested_Click_Area);max-width:var(--fdButton_Nested_Click_Area);min-height:var(--fdButton_Nested_Click_Area);min-width:var(--fdButton_Nested_Click_Area);width:var(--fdButton_Nested_Click_Area)}.fd-button--nested-square.is-hover,.fd-button--nested-square:hover,.fd-button--nested.is-hover,.fd-button--nested:hover{--fdButton_Nested_Background:var(--sapButton_Lite_Hover_Background);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Hover);--fdButton_Hover_Shadow:none}.fd-button--nested-square.is-active,.fd-button--nested-square:active,.fd-button--nested.is-active,.fd-button--nested:active{--fdButton_Nested_Background:var(--fdButton_Nested_Background_Active);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Active);--fdButton_Nested_Color:var(--fdButton_Nested_Color_Active);outline:none}.fd-button--nested-square.is-active.is-focus,.fd-button--nested-square.is-active:focus,.fd-button--nested-square:active.is-focus,.fd-button--nested-square:active:focus,.fd-button--nested.is-active.is-focus,.fd-button--nested.is-active:focus,.fd-button--nested:active.is-focus,.fd-button--nested:active:focus{z-index:5;--fdButton_Nested_Border_Radius:.75rem;--fdButton_Nested_Background:var(--fdButton_Nested_Background_Active);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Active);outline:none}.fd-button--nested-square.is-active.is-focus:after,.fd-button--nested-square.is-active:focus:after,.fd-button--nested-square:active.is-focus:after,.fd-button--nested-square:active:focus:after,.fd-button--nested.is-active.is-focus:after,.fd-button--nested.is-active:focus:after,.fd-button--nested:active.is-focus:after,.fd-button--nested:active:focus:after{border:none}.fd-button--nested-square.is-focus,.fd-button--nested-square:focus,.fd-button--nested.is-focus,.fd-button--nested:focus{z-index:5;--fdButton_Nested_Background:var(--fdButton_Nested_Background_Focus);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Focus);--fdButton_Nested_Border_Radius:var(--fdButton_Nested_Border_Radius_Focus);outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor)}.fd-button--nested-square.is-focus:after,.fd-button--nested-square:focus:after,.fd-button--nested.is-focus:after,.fd-button--nested:focus:after{border:none}.fd-button--nested-square.is-disabled,.fd-button--nested-square:disabled,.fd-button--nested-square[aria-disabled=true],.fd-button--nested.is-disabled,.fd-button--nested:disabled,.fd-button--nested[aria-disabled=true]{--fdButton_Nested_Background:var(--sapButton_Lite_Background);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Disabled);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-button--nested-square[class*=-compact],.fd-button--nested[class*=-compact],[class*=-compact] .fd-button--nested-square:not([class*=-cozy]),[class*=-compact] .fd-button--nested:not([class*=-cozy]){--fdButton_Nested_Size:1.375rem;--fdButton_Nested_Click_Area:1.625rem}.fd-button--nested-square,.fd-button--nested-square.is-active,.fd-button--nested-square:active{--fdButton_Nested_Border_Radius:.1875rem}.fd-button--nested-square.is-active.is-focus,.fd-button--nested-square.is-active:focus,.fd-button--nested-square.is-focus,.fd-button--nested-square:active.is-focus,.fd-button--nested-square:active:focus,.fd-button--nested-square:focus{z-index:5;--fdButton_Nested_Border_Radius:.1875rem}.fd-button.fd-button--emphasized{font-weight:400}.fd-button__sr-only{position:absolute;clip:rect(0 0 0 0);height:1px;width:1px;border:0;margin-inline:-1px;margin-block:-1px;padding-inline:0;padding-block:0;overflow:hidden;white-space:nowrap}\n/*! Bundled license information:\n\nfundamental-styles/dist/button.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
460
547
|
}
|
|
461
548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
462
549
|
type: Component,
|
|
@@ -465,7 +552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
465
552
|
'[attr.disabled]': '_disabledState() || null',
|
|
466
553
|
'[attr.aria-disabled]': 'ariaDisabled() || null',
|
|
467
554
|
'[attr.aria-label]': 'buttonArialabel()',
|
|
468
|
-
'[attr.aria-
|
|
555
|
+
'[attr.aria-describedby]': 'ariaDescribedby() || null',
|
|
469
556
|
'[attr.id]': 'id()',
|
|
470
557
|
'[class]': 'cssClass()',
|
|
471
558
|
'(click)': 'clicked($event)'
|
|
@@ -475,7 +562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
475
562
|
provide: FD_BUTTON_COMPONENT,
|
|
476
563
|
useExisting: ButtonComponent
|
|
477
564
|
}
|
|
478
|
-
], imports: [IconComponent], template: "@if (glyph() && glyphPosition() === 'before') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (label()) {\n <span class=\"fd-button__text\">\n {{ label() }}\n </span>\n}\n<ng-content></ng-content>\n<ng-content select=\"fd-button-badge\"></ng-content>\n@if (glyph() && glyphPosition() === 'after') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (fdMenu()) {\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n}\n", styles: [".fd-button{--fdButton_Clickable_Height:2.75rem;--fdButton_Padding_X:.625rem;--fdButton_Min_Width:2.25rem;--fdButton_Badge_Offset:-.3125rem;--fdButton_Badge_Margin:.25rem;--fdButton_Badge_Margin_Inline_Start:0;--fdButton_Badge_Width:auto;--fdButton_Badge_Height:1rem;--fdButton_Badge_Position:absolute;--fdButton_Badge_Position_Attention:absolute;--fdButton_Badge_Padding_Inline:.3125rem;--fdButton_Badge_Size_Attention:.75rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;outline:0;padding-block:0;padding-inline:0;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-style:solid;border-width:var(--sapButton_BorderWidth);height:var(--fdButton_Height,var(--sapElement_Height));max-height:var(--fdButton_Height,var(--sapElement_Height));min-width:var(--fdButton_Min_Width);padding-inline:calc(var(--fdButton_Padding_X) - var(--sapButton_BorderWidth));position:relative;text-align:center;text-shadow:var(--fdButton_Text_Shadow);--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button:after,.fd-button:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button::-moz-focus-inner{border:0}.fd-button:before{content:\"\";display:block;height:auto;inset:calc((var(--fdButton_Clickable_Height) - var(--fdButton_Height, var(--sapElement_Height)))*-.5) 0;position:absolute;width:100%}.fd-button__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:inherit;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;font-weight:inherit;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap}.fd-button__text:after,.fd-button__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button,.fd-button__text{font-family:var(--fdButton_Font_Family,var(--sapButton_FontFamily))}.fd-button :not(:first-child):not(.fd-button__badge){-webkit-margin-start:.375rem;margin-inline-start:.375rem}.fd-button>[class*=sap-icon]{color:inherit;font-size:1rem;font-style:normal;height:1rem;line-height:1rem;min-width:1rem;vertical-align:text-bottom;width:1rem}.fd-button>[class*=sap-icon]:after,.fd-button>[class*=sap-icon]:before{font-size:inherit;height:inherit;line-height:inherit;width:inherit}.fd-button__badge{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--sapContent_BadgeBackground);border:.0625rem solid var(--sapContent_BadgeBorderColor);border-radius:.5rem;color:var(--sapContent_BadgeTextColor);font-size:var(--sapFontSmallSize);height:var(--fdButton_Badge_Height);padding-block:0;padding-inline:var(--fdButton_Badge_Padding_Inline);position:var(--fdButton_Badge_Position);right:var(--fdButton_Badge_Offset);top:var(--fdButton_Badge_Offset);width:var(--fdButton_Badge_Width);z-index:1;-webkit-margin-start:var(--fdButton_Badge_Margin_Inline_Start);margin-inline-start:var(--fdButton_Badge_Margin_Inline_Start)}.fd-button__badge:after,.fd-button__badge:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button__badge[dir=rtl],[dir=rtl] .fd-button__badge{left:var(--fdButton_Badge_Offset);right:auto}.fd-button__badge--attention{--fdButton_Badge_Padding_Inline:0;--fdButton_Badge_Offset:-.1875rem;--fdButton_Badge_Width:var(--fdButton_Badge_Size_Attention);--fdButton_Badge_Height:var(--fdButton_Badge_Size_Attention);--fdButton_Badge_Position:var(--fdButton_Badge_Position_Attention)}.fd-button[class*=-compact],.fd-button[class*=-condensed],[class*=-compact] .fd-button:not([class*=-cozy]),[class*=-condensed] .fd-button:not([class*=-cozy]){--fdButton_Height:var(--fdButton_Compact_Height,var(--sapElement_Compact_Height));--fdButton_Clickable_Height:2rem;--fdButton_Padding_X:.5rem;--fdButton_Min_Width:2rem;--fdButton_Badge_Position:static;--fdButton_Badge_Margin_Inline_Start:.25rem;--fdButton_Badge_Size_Attention:.625rem}.fd-button[class*=-compact]:not(.fd-button--tool-header):has(.fd-button__badge),.fd-button[class*=-condensed]:not(.fd-button--tool-header):has(.fd-button__badge),[class*=-compact] .fd-button:not([class*=-cozy]):not(.fd-button--tool-header):has(.fd-button__badge),[class*=-condensed] .fd-button:not([class*=-cozy]):not(.fd-button--tool-header):has(.fd-button__badge){padding-inline:calc(.5rem - var(--sapButton_BorderWidth)) calc(.25rem - var(--sapButton_BorderWidth))}.fd-button--menu{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-button--menu-fixed-width{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.fd-button--menu .fd-button__text{line-height:1rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:start}.fd-button--full-width{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:100%;width:100%}.fd-button--text-alignment-left{text-align:left;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-button--text-alignment-right{text-align:right;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-button--decisive{min-width:4rem}.fd-button__instructions{position:absolute;clip:rect(0 0 0 0);border:0;height:1px;margin-block:-1px;margin-inline:-1px;overflow:hidden;padding-block:0;padding-inline:0;white-space:nowrap;width:1px}.fd-button.is-focus,.fd-button:focus{-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-button.is-focus:after,.fd-button:focus:after{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--fdButton_Focus_Border_Radius);content:\"\";display:block;inset:var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset);position:absolute}.fd-button.is-focus.fd-button--toggled:after,.fd-button.is-focus.is-selected:after,.fd-button:focus.fd-button--toggled:after,.fd-button:focus.is-selected:after{border-color:var(--fdButton_Outline_Contrast)}.fd-button.is-active,.fd-button.is-selected,.fd-button:active,.fd-button[aria-selected=true]{-webkit-box-shadow:none;box-shadow:none;outline:none}.fd-button.is-disabled,.fd-button:disabled,.fd-button[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:var(--sapContent_DisabledOpacity)}.fd-button.is-selected,.fd-button[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button.is-hover,.fd-button:hover{--fdButtonColor:var(--sapButton_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Hover_Background))}.fd-button.is-active,.fd-button:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button.is-active .fd-button__icon,.fd-button:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button.is-disabled,.fd-button:disabled,.fd-button[aria-disabled=true]{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Background))}.fd-button.is-disabled.is-selected,.fd-button.is-disabled[aria-selected=true],.fd-button:disabled.is-selected,.fd-button:disabled[aria-selected=true],.fd-button[aria-disabled=true].is-selected,.fd-button[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button.fd-button--toggled.is-hover,.fd-button.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button.fd-button--toggled.is-active,.fd-button.fd-button--toggled.is-selected,.fd-button.fd-button--toggled:active,.fd-button.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button.fd-button--toggled.is-active .fd-button__icon,.fd-button.fd-button--toggled.is-selected .fd-button__icon,.fd-button.fd-button--toggled:active .fd-button__icon,.fd-button.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button.fd-button--toggled.is-disabled,.fd-button.fd-button--toggled:disabled,.fd-button.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--emphasized,.fd-button--emphasized .fd-button__text{--fdButton_Font_Family:var(--sapButton_Emphasized_FontFamily)}.fd-button--emphasized{--fdButtonColor:var(--sapButton_Emphasized_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Emphasized_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Emphasized_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);border-width:var(--sapButton_Emphasized_BorderWidth);color:var(--fdButtonColor)}.fd-button--emphasized.is-selected,.fd-button--emphasized[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--emphasized.is-hover,.fd-button--emphasized:hover{--fdButtonColor:var(--sapButton_Emphasized_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Emphasized_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Emphasized_Hover_Background))}.fd-button--emphasized.is-active,.fd-button--emphasized:active{--fdButtonColor:var(--sapButton_Emphasized_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Emphasized_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Emphasized_Active_Background));--fdElementTextColor:var(--sapButton_Emphasized_Active_TextColor);--fdElementIconColor:var(--sapButton_Emphasized_Active_TextColor)}.fd-button--emphasized.is-active .fd-button__icon,.fd-button--emphasized:active .fd-button__icon{color:var(--sapButton_Emphasized_Active_TextColor);text-shadow:none}.fd-button--emphasized.is-disabled,.fd-button--emphasized:disabled,.fd-button--emphasized[aria-disabled=true]{--fdButtonColor:var(--sapButton_Emphasized_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Emphasized_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Emphasized_Background))}.fd-button--emphasized.is-disabled.is-selected,.fd-button--emphasized.is-disabled[aria-selected=true],.fd-button--emphasized:disabled.is-selected,.fd-button--emphasized:disabled[aria-selected=true],.fd-button--emphasized[aria-disabled=true].is-selected,.fd-button--emphasized[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--emphasized.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--emphasized.fd-button--toggled.is-hover,.fd-button--emphasized.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--emphasized.fd-button--toggled.is-active .fd-button__icon,.fd-button--emphasized.fd-button--toggled.is-selected .fd-button__icon,.fd-button--emphasized.fd-button--toggled:active .fd-button__icon,.fd-button--emphasized.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Emphasized_Active_TextColor);text-shadow:none}.fd-button--emphasized.fd-button--toggled.is-disabled,.fd-button--emphasized.fd-button--toggled:disabled,.fd-button--emphasized.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--emphasized.is-focus,.fd-button--emphasized:focus{z-index:5}.fd-button--emphasized.is-focus:after,.fd-button--emphasized:focus:after{border-color:var(--sapContent_ContrastFocusColor)}.fd-button--emphasized.is-focus.is-active:after,.fd-button--emphasized.is-focus:active:after,.fd-button--emphasized:focus.is-active:after,.fd-button--emphasized:focus:active:after{border-color:var(--sapContent_FocusColor)}.fd-button--emphasized[class*=-compact].is-focus,.fd-button--emphasized[class*=-compact]:focus,.fd-button--emphasized[class*=-condensed].is-focus,.fd-button--emphasized[class*=-condensed]:focus,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus{z-index:5}.fd-button--emphasized[class*=-compact].is-focus.is-active:after,.fd-button--emphasized[class*=-compact].is-focus:active:after,.fd-button--emphasized[class*=-compact]:focus.is-active:after,.fd-button--emphasized[class*=-compact]:focus:active:after,.fd-button--emphasized[class*=-condensed].is-focus.is-active:after,.fd-button--emphasized[class*=-condensed].is-focus:active:after,.fd-button--emphasized[class*=-condensed]:focus.is-active:after,.fd-button--emphasized[class*=-condensed]:focus:active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus.is-active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus:active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus.is-active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus:active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus.is-active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus:active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus.is-active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus:active:after{border-color:transparent}.fd-button--emphasized.is-active,.fd-button--emphasized.is-selected,.fd-button--emphasized:active,.fd-button--emphasized[aria-selected=true]{outline:none}.fd-button--emphasized.fd-button--toggled.is-focus,.fd-button--emphasized.fd-button--toggled:focus{outline-color:var(--fdButton_Emphasized_Active_Outline);z-index:5}.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled[aria-selected=true]{outline:none}.fd-button--attention{--fdButtonColor:var(--sapButton_Attention_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--attention.is-selected,.fd-button--attention[aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background))}.fd-button--attention.is-hover,.fd-button--attention:hover{--fdButtonColor:var(--sapButton_Attention_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Attention_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Attention_Hover_Background))}.fd-button--attention.is-active,.fd-button--attention:active{--fdButtonColor:var(--sapButton_Attention_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Attention_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Attention_Active_Background));--fdElementTextColor:var(--sapButton_Attention_Active_TextColor);--fdElementIconColor:var(--sapButton_Attention_Active_TextColor)}.fd-button--attention.is-active .fd-button__icon,.fd-button--attention:active .fd-button__icon{color:var(--sapButton_Attention_Active_TextColor);text-shadow:none}.fd-button--attention.is-disabled,.fd-button--attention:disabled,.fd-button--attention[aria-disabled=true]{--fdButtonColor:var(--sapButton_Attention_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Background))}.fd-button--attention.is-disabled.is-selected,.fd-button--attention.is-disabled[aria-selected=true],.fd-button--attention:disabled.is-selected,.fd-button--attention:disabled[aria-selected=true],.fd-button--attention[aria-disabled=true].is-selected,.fd-button--attention[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background))}.fd-button--attention.fd-button--toggled{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Attention_Selected_Background)}.fd-button--attention.fd-button--toggled.is-hover,.fd-button--attention.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Attention_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Attention_Selected_Hover_Background)}.fd-button--attention.fd-button--toggled.is-active,.fd-button--attention.fd-button--toggled.is-selected,.fd-button--attention.fd-button--toggled:active,.fd-button--attention.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Attention_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Hover_Background))}.fd-button--attention.fd-button--toggled.is-active .fd-button__icon,.fd-button--attention.fd-button--toggled.is-selected .fd-button__icon,.fd-button--attention.fd-button--toggled:active .fd-button__icon,.fd-button--attention.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Attention_Active_TextColor);text-shadow:none}.fd-button--attention.fd-button--toggled.is-disabled,.fd-button--attention.fd-button--toggled:disabled,.fd-button--attention.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--negative{--fdButtonColor:var(--sapButton_Reject_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--negative.is-selected,.fd-button--negative[aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background))}.fd-button--negative.is-hover,.fd-button--negative:hover{--fdButtonColor:var(--sapButton_Reject_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Reject_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Reject_Hover_Background))}.fd-button--negative.is-active,.fd-button--negative:active{--fdButtonColor:var(--sapButton_Reject_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Reject_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Reject_Active_Background));--fdElementTextColor:var(--sapButton_Reject_Active_TextColor);--fdElementIconColor:var(--sapButton_Reject_Active_TextColor)}.fd-button--negative.is-active .fd-button__icon,.fd-button--negative:active .fd-button__icon{color:var(--sapButton_Reject_Active_TextColor);text-shadow:none}.fd-button--negative.is-disabled,.fd-button--negative:disabled,.fd-button--negative[aria-disabled=true]{--fdButtonColor:var(--sapButton_Reject_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Background))}.fd-button--negative.is-disabled.is-selected,.fd-button--negative.is-disabled[aria-selected=true],.fd-button--negative:disabled.is-selected,.fd-button--negative:disabled[aria-selected=true],.fd-button--negative[aria-disabled=true].is-selected,.fd-button--negative[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background))}.fd-button--negative.fd-button--toggled{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Reject_Selected_Background)}.fd-button--negative.fd-button--toggled.is-hover,.fd-button--negative.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Reject_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Reject_Selected_Hover_Background)}.fd-button--negative.fd-button--toggled.is-active,.fd-button--negative.fd-button--toggled.is-selected,.fd-button--negative.fd-button--toggled:active,.fd-button--negative.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Reject_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Hover_Background))}.fd-button--negative.fd-button--toggled.is-active .fd-button__icon,.fd-button--negative.fd-button--toggled.is-selected .fd-button__icon,.fd-button--negative.fd-button--toggled:active .fd-button__icon,.fd-button--negative.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Reject_Active_TextColor);text-shadow:none}.fd-button--negative.fd-button--toggled.is-disabled,.fd-button--negative.fd-button--toggled:disabled,.fd-button--negative.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--positive{--fdButtonColor:var(--sapButton_Accept_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--positive.is-selected,.fd-button--positive[aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background))}.fd-button--positive.is-hover,.fd-button--positive:hover{--fdButtonColor:var(--sapButton_Accept_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Accept_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Accept_Hover_Background))}.fd-button--positive.is-active,.fd-button--positive:active{--fdButtonColor:var(--sapButton_Accept_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Accept_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Accept_Active_Background));--fdElementTextColor:var(--sapButton_Accept_Active_TextColor);--fdElementIconColor:var(--sapButton_Accept_Active_TextColor)}.fd-button--positive.is-active .fd-button__icon,.fd-button--positive:active .fd-button__icon{color:var(--sapButton_Accept_Active_TextColor);text-shadow:none}.fd-button--positive.is-disabled,.fd-button--positive:disabled,.fd-button--positive[aria-disabled=true]{--fdButtonColor:var(--sapButton_Accept_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Background))}.fd-button--positive.is-disabled.is-selected,.fd-button--positive.is-disabled[aria-selected=true],.fd-button--positive:disabled.is-selected,.fd-button--positive:disabled[aria-selected=true],.fd-button--positive[aria-disabled=true].is-selected,.fd-button--positive[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background))}.fd-button--positive.fd-button--toggled{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Accept_Selected_Background)}.fd-button--positive.fd-button--toggled.is-hover,.fd-button--positive.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Accept_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Accept_Selected_Hover_Background)}.fd-button--positive.fd-button--toggled.is-active,.fd-button--positive.fd-button--toggled.is-selected,.fd-button--positive.fd-button--toggled:active,.fd-button--positive.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Accept_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Hover_Background))}.fd-button--positive.fd-button--toggled.is-active .fd-button__icon,.fd-button--positive.fd-button--toggled.is-selected .fd-button__icon,.fd-button--positive.fd-button--toggled:active .fd-button__icon,.fd-button--positive.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Accept_Active_TextColor);text-shadow:none}.fd-button--positive.fd-button--toggled.is-disabled,.fd-button--positive.fd-button--toggled:disabled,.fd-button--positive.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--transparent{--fdButtonColor:var(--sapButton_Lite_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Lite_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Lite_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--transparent.is-selected,.fd-button--transparent[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--transparent.is-hover,.fd-button--transparent:hover{--fdButtonColor:var(--sapButton_Lite_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Lite_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Lite_Hover_Background))}.fd-button--transparent.is-active,.fd-button--transparent:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Lite_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Lite_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button--transparent.is-active .fd-button__icon,.fd-button--transparent:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--transparent.is-disabled,.fd-button--transparent:disabled,.fd-button--transparent[aria-disabled=true]{--fdButtonColor:var(--sapButton_Lite_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Lite_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Lite_Background))}.fd-button--transparent.is-disabled.is-selected,.fd-button--transparent.is-disabled[aria-selected=true],.fd-button--transparent:disabled.is-selected,.fd-button--transparent:disabled[aria-selected=true],.fd-button--transparent[aria-disabled=true].is-selected,.fd-button--transparent[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--transparent.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--transparent.fd-button--toggled.is-hover,.fd-button--transparent.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--transparent.fd-button--toggled.is-active,.fd-button--transparent.fd-button--toggled.is-selected,.fd-button--transparent.fd-button--toggled:active,.fd-button--transparent.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--transparent.fd-button--toggled.is-active .fd-button__icon,.fd-button--transparent.fd-button--toggled.is-selected .fd-button__icon,.fd-button--transparent.fd-button--toggled:active .fd-button__icon,.fd-button--transparent.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--transparent.fd-button--toggled.is-disabled,.fd-button--transparent.fd-button--toggled:disabled,.fd-button--transparent.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--ghost{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--fdButton_Ghost_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--ghost.is-selected,.fd-button--ghost[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--ghost.is-hover,.fd-button--ghost:hover{--fdButtonColor:var(--sapButton_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Hover_Background))}.fd-button--ghost.is-active,.fd-button--ghost:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button--ghost.is-active .fd-button__icon,.fd-button--ghost:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--ghost.is-disabled,.fd-button--ghost:disabled,.fd-button--ghost[aria-disabled=true]{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--fdButton_Ghost_Background))}.fd-button--ghost.is-disabled.is-selected,.fd-button--ghost.is-disabled[aria-selected=true],.fd-button--ghost:disabled.is-selected,.fd-button--ghost:disabled[aria-selected=true],.fd-button--ghost[aria-disabled=true].is-selected,.fd-button--ghost[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--ghost.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--ghost.fd-button--toggled.is-hover,.fd-button--ghost.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--ghost.fd-button--toggled.is-active,.fd-button--ghost.fd-button--toggled.is-selected,.fd-button--ghost.fd-button--toggled:active,.fd-button--ghost.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--ghost.fd-button--toggled.is-active .fd-button__icon,.fd-button--ghost.fd-button--toggled.is-selected .fd-button__icon,.fd-button--ghost.fd-button--toggled:active .fd-button__icon,.fd-button--ghost.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--ghost.fd-button--toggled.is-disabled,.fd-button--ghost.fd-button--toggled:disabled,.fd-button--ghost.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--tool-header{--fdButton_ToolHeader_Icon_Size:1rem;--fdButton_ToolHeader_Padding:.75rem;--fdButton_ToolHeader_Size:var(--fdButton_ToolHeader_Button_Size);--fdButton_ToolHeader_Background:var(--sapButton_Lite_Background);--fdButton_ToolHeader_Color:var(--fdButton_ToolHeader_Color_Normal);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Normal);--fdButton_ToolHeader_Border_Radius:var(--fdButton_ToolHeader_Button_Border_Radius);background:var(--fdButton_ToolHeader_Background);border:var(--sapButton_BorderWidth) solid var(--fdButton_ToolHeader_Border_Color);border-radius:var(--fdButton_ToolHeader_Border_Radius);color:var(--fdButton_ToolHeader_Color);height:var(--fdButton_ToolHeader_Size);max-height:var(--fdButton_ToolHeader_Size);max-width:var(--fdButton_ToolHeader_Size);min-height:var(--fdButton_ToolHeader_Size);min-width:var(--fdButton_ToolHeader_Size);padding-block:var(--fdButton_ToolHeader_Padding);padding-inline:var(--fdButton_ToolHeader_Padding);width:var(--fdButton_ToolHeader_Size)}.fd-button--tool-header [class*=sap-icon],.fd-button--tool-header[class*=sap-icon]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;font-size:var(--fdButton_ToolHeader_Icon_Size);height:var(--fdButton_ToolHeader_Icon_Size);width:var(--fdButton_ToolHeader_Icon_Size)}.fd-button--tool-header.is-hover,.fd-button--tool-header:hover{--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Hover);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Hover);--fdButton_Hover_Shadow:none}.fd-button--tool-header.is-active,.fd-button--tool-header:active{--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Active);--fdButton_ToolHeader_Color:var(--fdButton_ToolHeader_Color_Active);outline:none}.fd-button--tool-header.is-active.is-focus,.fd-button--tool-header.is-active:focus,.fd-button--tool-header:active.is-focus,.fd-button--tool-header:active:focus{z-index:5;--fdButton_ToolHeader_Border_Radius:.375rem;--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Active);outline:none}.fd-button--tool-header.is-active.is-focus:after,.fd-button--tool-header.is-active:focus:after,.fd-button--tool-header:active.is-focus:after,.fd-button--tool-header:active:focus:after{border:none}.fd-button--tool-header.is-focus,.fd-button--tool-header:focus{z-index:5;--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Focus);--fdButton_ToolHeader_Border_Radius:var(--fdButton_ToolHeader_Border_Radius_Focus);outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--fdButton_ToolHeader_Outline_Color)}.fd-button--tool-header.is-focus:after,.fd-button--tool-header:focus:after{border:none}.fd-button--tool-header.is-disabled,.fd-button--tool-header:disabled,.fd-button--tool-header[aria-disabled=true]{--fdButton_ToolHeader_Background:var(--sapButton_Lite_Background);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Disabled);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-button--tool-header[class*=-compact],[class*=-compact] .fd-button--tool-header:not([class*=-cozy]){--fdButton_ToolHeader_Padding:.5rem;--fdButton_ToolHeader_Size:var(--fdButton_ToolHeader_Button_Size_Compact)}.fd-button--tool-header .fd-button__badge{background:var(--sapContent_BadgeBackground);border:0;border:.0625rem solid var(--fdButton_ToolHeader_Badge_Border_Color);border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_BadgeBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.625rem;line-height:normal;margin-block:0;margin-inline:0;max-height:.625rem;max-width:.625rem;min-height:.625rem;min-width:.625rem;overflow:hidden;padding-block:0;padding-inline:0;position:absolute;right:-.125rem;top:-.125rem;width:.625rem}.fd-button--tool-header .fd-button__badge:after,.fd-button--tool-header .fd-button__badge:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button--tool-header .fd-button__badge[dir=rtl],[dir=rtl] .fd-button--tool-header .fd-button__badge{left:-.125rem;right:auto}.fd-button--nested,.fd-button--nested-square{--fdButton_Nested_Size:1.5rem;--fdButton_Nested_Icon_Size:.75rem;--fdButton_Nested_Click_Area:2rem;--fdButton_Nested_Color:var(--sapContent_IconColor);--fdButton_Nested_Background:var(--sapButton_Lite_Background);--fdButton_Nested_Border_Color:var(--fdButton_ToolHeader_Border_Color_Normal);--fdButton_Nested_Border_Radius:1rem;background:var(--fdButton_Nested_Background);border:var(--sapButton_BorderWidth) solid var(--fdButton_Nested_Border_Color);border-radius:var(--fdButton_Nested_Border_Radius);color:var(--fdButton_Nested_Color);height:var(--fdButton_Nested_Size);max-height:var(--fdButton_Nested_Size);max-width:var(--fdButton_Nested_Size);min-height:var(--fdButton_Nested_Size);min-width:var(--fdButton_Nested_Size);padding-block:0;padding-inline:0;width:var(--fdButton_Nested_Size)}.fd-button--nested [class*=sap-icon],.fd-button--nested-square [class*=sap-icon],.fd-button--nested-square[class*=sap-icon],.fd-button--nested[class*=sap-icon]{color:inherit;font-size:var(--fdButton_Nested_Icon_Size)}.fd-button--nested-square:before,.fd-button--nested:before{height:var(--fdButton_Nested_Click_Area);inset:auto;max-height:var(--fdButton_Nested_Click_Area);max-width:var(--fdButton_Nested_Click_Area);min-height:var(--fdButton_Nested_Click_Area);min-width:var(--fdButton_Nested_Click_Area);width:var(--fdButton_Nested_Click_Area)}.fd-button--nested-square.is-hover,.fd-button--nested-square:hover,.fd-button--nested.is-hover,.fd-button--nested:hover{--fdButton_Nested_Background:var(--sapButton_Lite_Hover_Background);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Hover);--fdButton_Hover_Shadow:none}.fd-button--nested-square.is-active,.fd-button--nested-square:active,.fd-button--nested.is-active,.fd-button--nested:active{--fdButton_Nested_Background:var(--fdButton_Nested_Background_Active);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Active);--fdButton_Nested_Color:var(--fdButton_Nested_Color_Active);outline:none}.fd-button--nested-square.is-active.is-focus,.fd-button--nested-square.is-active:focus,.fd-button--nested-square:active.is-focus,.fd-button--nested-square:active:focus,.fd-button--nested.is-active.is-focus,.fd-button--nested.is-active:focus,.fd-button--nested:active.is-focus,.fd-button--nested:active:focus{z-index:5;--fdButton_Nested_Border_Radius:.75rem;--fdButton_Nested_Background:var(--fdButton_Nested_Background_Active);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Active);outline:none}.fd-button--nested-square.is-active.is-focus:after,.fd-button--nested-square.is-active:focus:after,.fd-button--nested-square:active.is-focus:after,.fd-button--nested-square:active:focus:after,.fd-button--nested.is-active.is-focus:after,.fd-button--nested.is-active:focus:after,.fd-button--nested:active.is-focus:after,.fd-button--nested:active:focus:after{border:none}.fd-button--nested-square.is-focus,.fd-button--nested-square:focus,.fd-button--nested.is-focus,.fd-button--nested:focus{z-index:5;--fdButton_Nested_Background:var(--fdButton_Nested_Background_Focus);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Focus);--fdButton_Nested_Border_Radius:var(--fdButton_Nested_Border_Radius_Focus);outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor)}.fd-button--nested-square.is-focus:after,.fd-button--nested-square:focus:after,.fd-button--nested.is-focus:after,.fd-button--nested:focus:after{border:none}.fd-button--nested-square.is-disabled,.fd-button--nested-square:disabled,.fd-button--nested-square[aria-disabled=true],.fd-button--nested.is-disabled,.fd-button--nested:disabled,.fd-button--nested[aria-disabled=true]{--fdButton_Nested_Background:var(--sapButton_Lite_Background);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Disabled);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-button--nested-square[class*=-compact],.fd-button--nested[class*=-compact],[class*=-compact] .fd-button--nested-square:not([class*=-cozy]),[class*=-compact] .fd-button--nested:not([class*=-cozy]){--fdButton_Nested_Size:1.375rem;--fdButton_Nested_Click_Area:1.625rem}.fd-button--nested-square,.fd-button--nested-square.is-active,.fd-button--nested-square:active{--fdButton_Nested_Border_Radius:.1875rem}.fd-button--nested-square.is-active.is-focus,.fd-button--nested-square.is-active:focus,.fd-button--nested-square.is-focus,.fd-button--nested-square:active.is-focus,.fd-button--nested-square:active:focus,.fd-button--nested-square:focus{z-index:5;--fdButton_Nested_Border_Radius:.1875rem}.fd-button.fd-button--emphasized{font-weight:400}\n/*! Bundled license information:\n\nfundamental-styles/dist/button.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
565
|
+
], imports: [IconComponent], template: "@if (glyph() && glyphPosition() === 'before') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (label()) {\n <span class=\"fd-button__text\">\n {{ label() }}\n </span>\n}\n<ng-content></ng-content>\n<ng-content select=\"fd-button-badge\"></ng-content>\n@if (glyph() && glyphPosition() === 'after') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (fdMenu()) {\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n}\n\n<!-- Custom description (ariaDescription input or native attribute).\n Skipped when user provides aria-describedby \u2014 they manage their own description references. -->\n@if (!ariaDescribedBy() && !nativeAriaDescribedBy() && effectiveAriaDescription()) {\n <span class=\"fd-button__sr-only\" [attr.id]=\"id() + '-description'\">{{ effectiveAriaDescription() }}</span>\n}\n\n<!-- Type description (special button types: emphasized, positive, negative, attention).\n Skipped when user provides aria-describedby \u2014 they manage their own description references. -->\n@if (!ariaDescribedBy() && !nativeAriaDescribedBy() && isSpecialButtonType()) {\n <span class=\"fd-button__sr-only\" [attr.id]=\"id() + '-type-description'\">{{\n ariaTypeDescription() || defaultButtonTypeDescription()\n }}</span>\n}\n", styles: [".fd-button{--fdButton_Clickable_Height:2.75rem;--fdButton_Padding_X:.625rem;--fdButton_Min_Width:2.25rem;--fdButton_Badge_Offset:-.3125rem;--fdButton_Badge_Margin:.25rem;--fdButton_Badge_Margin_Inline_Start:0;--fdButton_Badge_Width:auto;--fdButton_Badge_Height:1rem;--fdButton_Badge_Position:absolute;--fdButton_Badge_Position_Attention:absolute;--fdButton_Badge_Padding_Inline:.3125rem;--fdButton_Badge_Size_Attention:.75rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;outline:0;padding-block:0;padding-inline:0;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-style:solid;border-width:var(--sapButton_BorderWidth);height:var(--fdButton_Height,var(--sapElement_Height));max-height:var(--fdButton_Height,var(--sapElement_Height));min-width:var(--fdButton_Min_Width);padding-inline:calc(var(--fdButton_Padding_X) - var(--sapButton_BorderWidth));position:relative;text-align:center;text-shadow:var(--fdButton_Text_Shadow);--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button:after,.fd-button:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button::-moz-focus-inner{border:0}.fd-button:before{content:\"\";display:block;height:auto;inset:calc((var(--fdButton_Clickable_Height) - var(--fdButton_Height, var(--sapElement_Height)))*-.5) 0;position:absolute;width:100%}.fd-button__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:inherit;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;font-weight:inherit;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap}.fd-button__text:after,.fd-button__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button,.fd-button__text{font-family:var(--fdButton_Font_Family,var(--sapButton_FontFamily))}.fd-button :not(:first-child):not(.fd-button__badge){-webkit-margin-start:.375rem;margin-inline-start:.375rem}.fd-button>[class*=sap-icon]{color:inherit;font-size:1rem;font-style:normal;height:1rem;line-height:1rem;min-width:1rem;vertical-align:text-bottom;width:1rem}.fd-button>[class*=sap-icon]:after,.fd-button>[class*=sap-icon]:before{font-size:inherit;height:inherit;line-height:inherit;width:inherit}.fd-button__badge{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--sapContent_BadgeBackground);border:.0625rem solid var(--sapContent_BadgeBorderColor);border-radius:.5rem;color:var(--sapContent_BadgeTextColor);font-size:var(--sapFontSmallSize);height:var(--fdButton_Badge_Height);padding-block:0;padding-inline:var(--fdButton_Badge_Padding_Inline);position:var(--fdButton_Badge_Position);right:var(--fdButton_Badge_Offset);top:var(--fdButton_Badge_Offset);width:var(--fdButton_Badge_Width);z-index:1;-webkit-margin-start:var(--fdButton_Badge_Margin_Inline_Start);margin-inline-start:var(--fdButton_Badge_Margin_Inline_Start)}.fd-button__badge:after,.fd-button__badge:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button__badge[dir=rtl],[dir=rtl] .fd-button__badge{left:var(--fdButton_Badge_Offset);right:auto}.fd-button__badge--attention{--fdButton_Badge_Padding_Inline:0;--fdButton_Badge_Offset:-.1875rem;--fdButton_Badge_Width:var(--fdButton_Badge_Size_Attention);--fdButton_Badge_Height:var(--fdButton_Badge_Size_Attention);--fdButton_Badge_Position:var(--fdButton_Badge_Position_Attention)}.fd-button[class*=-compact],.fd-button[class*=-condensed],[class*=-compact] .fd-button:not([class*=-cozy]),[class*=-condensed] .fd-button:not([class*=-cozy]){--fdButton_Height:var(--fdButton_Compact_Height,var(--sapElement_Compact_Height));--fdButton_Clickable_Height:2rem;--fdButton_Padding_X:.5rem;--fdButton_Min_Width:2rem;--fdButton_Badge_Position:static;--fdButton_Badge_Margin_Inline_Start:.25rem;--fdButton_Badge_Size_Attention:.625rem}.fd-button[class*=-compact]:not(.fd-button--tool-header):has(.fd-button__badge),.fd-button[class*=-condensed]:not(.fd-button--tool-header):has(.fd-button__badge),[class*=-compact] .fd-button:not([class*=-cozy]):not(.fd-button--tool-header):has(.fd-button__badge),[class*=-condensed] .fd-button:not([class*=-cozy]):not(.fd-button--tool-header):has(.fd-button__badge){padding-inline:calc(.5rem - var(--sapButton_BorderWidth)) calc(.25rem - var(--sapButton_BorderWidth))}.fd-button--menu{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-button--menu-fixed-width{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.fd-button--menu .fd-button__text{line-height:1rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:start}.fd-button--full-width{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:100%;width:100%}.fd-button--text-alignment-left{text-align:left;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-button--text-alignment-right{text-align:right;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-button--decisive{min-width:4rem}.fd-button__instructions{position:absolute;clip:rect(0 0 0 0);border:0;height:1px;margin-block:-1px;margin-inline:-1px;overflow:hidden;padding-block:0;padding-inline:0;white-space:nowrap;width:1px}.fd-button.is-focus,.fd-button:focus{-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-button.is-focus:after,.fd-button:focus:after{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--fdButton_Focus_Border_Radius);content:\"\";display:block;inset:var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset) var(--fdButton_Outline_Offset);position:absolute}.fd-button.is-focus.fd-button--toggled:after,.fd-button.is-focus.is-selected:after,.fd-button:focus.fd-button--toggled:after,.fd-button:focus.is-selected:after{border-color:var(--fdButton_Outline_Contrast)}.fd-button.is-active,.fd-button.is-selected,.fd-button:active,.fd-button[aria-selected=true]{-webkit-box-shadow:none;box-shadow:none;outline:none}.fd-button.is-disabled,.fd-button:disabled,.fd-button[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:var(--sapContent_DisabledOpacity)}.fd-button.is-selected,.fd-button[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button.is-hover,.fd-button:hover{--fdButtonColor:var(--sapButton_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Hover_Background))}.fd-button.is-active,.fd-button:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button.is-active .fd-button__icon,.fd-button:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button.is-disabled,.fd-button:disabled,.fd-button[aria-disabled=true]{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Background))}.fd-button.is-disabled.is-selected,.fd-button.is-disabled[aria-selected=true],.fd-button:disabled.is-selected,.fd-button:disabled[aria-selected=true],.fd-button[aria-disabled=true].is-selected,.fd-button[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button.fd-button--toggled.is-hover,.fd-button.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button.fd-button--toggled.is-active,.fd-button.fd-button--toggled.is-selected,.fd-button.fd-button--toggled:active,.fd-button.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button.fd-button--toggled.is-active .fd-button__icon,.fd-button.fd-button--toggled.is-selected .fd-button__icon,.fd-button.fd-button--toggled:active .fd-button__icon,.fd-button.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button.fd-button--toggled.is-disabled,.fd-button.fd-button--toggled:disabled,.fd-button.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--emphasized,.fd-button--emphasized .fd-button__text{--fdButton_Font_Family:var(--sapButton_Emphasized_FontFamily)}.fd-button--emphasized{--fdButtonColor:var(--sapButton_Emphasized_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Emphasized_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Emphasized_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);border-width:var(--sapButton_Emphasized_BorderWidth);color:var(--fdButtonColor)}.fd-button--emphasized.is-selected,.fd-button--emphasized[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--emphasized.is-hover,.fd-button--emphasized:hover{--fdButtonColor:var(--sapButton_Emphasized_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Emphasized_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Emphasized_Hover_Background))}.fd-button--emphasized.is-active,.fd-button--emphasized:active{--fdButtonColor:var(--sapButton_Emphasized_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Emphasized_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Emphasized_Active_Background));--fdElementTextColor:var(--sapButton_Emphasized_Active_TextColor);--fdElementIconColor:var(--sapButton_Emphasized_Active_TextColor)}.fd-button--emphasized.is-active .fd-button__icon,.fd-button--emphasized:active .fd-button__icon{color:var(--sapButton_Emphasized_Active_TextColor);text-shadow:none}.fd-button--emphasized.is-disabled,.fd-button--emphasized:disabled,.fd-button--emphasized[aria-disabled=true]{--fdButtonColor:var(--sapButton_Emphasized_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Emphasized_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Emphasized_Background))}.fd-button--emphasized.is-disabled.is-selected,.fd-button--emphasized.is-disabled[aria-selected=true],.fd-button--emphasized:disabled.is-selected,.fd-button--emphasized:disabled[aria-selected=true],.fd-button--emphasized[aria-disabled=true].is-selected,.fd-button--emphasized[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--emphasized.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--emphasized.fd-button--toggled.is-hover,.fd-button--emphasized.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--emphasized.fd-button--toggled.is-active .fd-button__icon,.fd-button--emphasized.fd-button--toggled.is-selected .fd-button__icon,.fd-button--emphasized.fd-button--toggled:active .fd-button__icon,.fd-button--emphasized.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Emphasized_Active_TextColor);text-shadow:none}.fd-button--emphasized.fd-button--toggled.is-disabled,.fd-button--emphasized.fd-button--toggled:disabled,.fd-button--emphasized.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--emphasized.is-focus,.fd-button--emphasized:focus{z-index:5}.fd-button--emphasized.is-focus:after,.fd-button--emphasized:focus:after{border-color:var(--sapContent_ContrastFocusColor)}.fd-button--emphasized.is-focus.is-active:after,.fd-button--emphasized.is-focus:active:after,.fd-button--emphasized:focus.is-active:after,.fd-button--emphasized:focus:active:after{border-color:var(--sapContent_FocusColor)}.fd-button--emphasized[class*=-compact].is-focus,.fd-button--emphasized[class*=-compact]:focus,.fd-button--emphasized[class*=-condensed].is-focus,.fd-button--emphasized[class*=-condensed]:focus,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus{z-index:5}.fd-button--emphasized[class*=-compact].is-focus.is-active:after,.fd-button--emphasized[class*=-compact].is-focus:active:after,.fd-button--emphasized[class*=-compact]:focus.is-active:after,.fd-button--emphasized[class*=-compact]:focus:active:after,.fd-button--emphasized[class*=-condensed].is-focus.is-active:after,.fd-button--emphasized[class*=-condensed].is-focus:active:after,.fd-button--emphasized[class*=-condensed]:focus.is-active:after,.fd-button--emphasized[class*=-condensed]:focus:active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus.is-active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]).is-focus:active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus.is-active:after,[class*=-compact] .fd-button--emphasized:not([class*=-cozy]):focus:active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus.is-active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]).is-focus:active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus.is-active:after,[class*=-condensed] .fd-button--emphasized:not([class*=-cozy]):focus:active:after{border-color:transparent}.fd-button--emphasized.is-active,.fd-button--emphasized.is-selected,.fd-button--emphasized:active,.fd-button--emphasized[aria-selected=true]{outline:none}.fd-button--emphasized.fd-button--toggled.is-focus,.fd-button--emphasized.fd-button--toggled:focus{outline-color:var(--fdButton_Emphasized_Active_Outline);z-index:5}.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled[aria-selected=true]{outline:none}.fd-button--attention{--fdButtonColor:var(--sapButton_Attention_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--attention.is-selected,.fd-button--attention[aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background))}.fd-button--attention.is-hover,.fd-button--attention:hover{--fdButtonColor:var(--sapButton_Attention_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Attention_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Attention_Hover_Background))}.fd-button--attention.is-active,.fd-button--attention:active{--fdButtonColor:var(--sapButton_Attention_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Attention_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Attention_Active_Background));--fdElementTextColor:var(--sapButton_Attention_Active_TextColor);--fdElementIconColor:var(--sapButton_Attention_Active_TextColor)}.fd-button--attention.is-active .fd-button__icon,.fd-button--attention:active .fd-button__icon{color:var(--sapButton_Attention_Active_TextColor);text-shadow:none}.fd-button--attention.is-disabled,.fd-button--attention:disabled,.fd-button--attention[aria-disabled=true]{--fdButtonColor:var(--sapButton_Attention_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Background))}.fd-button--attention.is-disabled.is-selected,.fd-button--attention.is-disabled[aria-selected=true],.fd-button--attention:disabled.is-selected,.fd-button--attention:disabled[aria-selected=true],.fd-button--attention[aria-disabled=true].is-selected,.fd-button--attention[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background))}.fd-button--attention.fd-button--toggled{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Attention_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Attention_Selected_Background)}.fd-button--attention.fd-button--toggled.is-hover,.fd-button--attention.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Attention_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Attention_Selected_Hover_Background)}.fd-button--attention.fd-button--toggled.is-active,.fd-button--attention.fd-button--toggled.is-selected,.fd-button--attention.fd-button--toggled:active,.fd-button--attention.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Attention_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Attention_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Attention_Selected_Hover_Background))}.fd-button--attention.fd-button--toggled.is-active .fd-button__icon,.fd-button--attention.fd-button--toggled.is-selected .fd-button__icon,.fd-button--attention.fd-button--toggled:active .fd-button__icon,.fd-button--attention.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Attention_Active_TextColor);text-shadow:none}.fd-button--attention.fd-button--toggled.is-disabled,.fd-button--attention.fd-button--toggled:disabled,.fd-button--attention.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--negative{--fdButtonColor:var(--sapButton_Reject_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--negative.is-selected,.fd-button--negative[aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background))}.fd-button--negative.is-hover,.fd-button--negative:hover{--fdButtonColor:var(--sapButton_Reject_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Reject_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Reject_Hover_Background))}.fd-button--negative.is-active,.fd-button--negative:active{--fdButtonColor:var(--sapButton_Reject_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Reject_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Reject_Active_Background));--fdElementTextColor:var(--sapButton_Reject_Active_TextColor);--fdElementIconColor:var(--sapButton_Reject_Active_TextColor)}.fd-button--negative.is-active .fd-button__icon,.fd-button--negative:active .fd-button__icon{color:var(--sapButton_Reject_Active_TextColor);text-shadow:none}.fd-button--negative.is-disabled,.fd-button--negative:disabled,.fd-button--negative[aria-disabled=true]{--fdButtonColor:var(--sapButton_Reject_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Background))}.fd-button--negative.is-disabled.is-selected,.fd-button--negative.is-disabled[aria-selected=true],.fd-button--negative:disabled.is-selected,.fd-button--negative:disabled[aria-selected=true],.fd-button--negative[aria-disabled=true].is-selected,.fd-button--negative[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background))}.fd-button--negative.fd-button--toggled{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Reject_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Reject_Selected_Background)}.fd-button--negative.fd-button--toggled.is-hover,.fd-button--negative.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Reject_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Reject_Selected_Hover_Background)}.fd-button--negative.fd-button--toggled.is-active,.fd-button--negative.fd-button--toggled.is-selected,.fd-button--negative.fd-button--toggled:active,.fd-button--negative.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Reject_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Reject_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Reject_Selected_Hover_Background))}.fd-button--negative.fd-button--toggled.is-active .fd-button__icon,.fd-button--negative.fd-button--toggled.is-selected .fd-button__icon,.fd-button--negative.fd-button--toggled:active .fd-button__icon,.fd-button--negative.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Reject_Active_TextColor);text-shadow:none}.fd-button--negative.fd-button--toggled.is-disabled,.fd-button--negative.fd-button--toggled:disabled,.fd-button--negative.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--positive{--fdButtonColor:var(--sapButton_Accept_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--positive.is-selected,.fd-button--positive[aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background))}.fd-button--positive.is-hover,.fd-button--positive:hover{--fdButtonColor:var(--sapButton_Accept_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Accept_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Accept_Hover_Background))}.fd-button--positive.is-active,.fd-button--positive:active{--fdButtonColor:var(--sapButton_Accept_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Accept_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Accept_Active_Background));--fdElementTextColor:var(--sapButton_Accept_Active_TextColor);--fdElementIconColor:var(--sapButton_Accept_Active_TextColor)}.fd-button--positive.is-active .fd-button__icon,.fd-button--positive:active .fd-button__icon{color:var(--sapButton_Accept_Active_TextColor);text-shadow:none}.fd-button--positive.is-disabled,.fd-button--positive:disabled,.fd-button--positive[aria-disabled=true]{--fdButtonColor:var(--sapButton_Accept_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Background))}.fd-button--positive.is-disabled.is-selected,.fd-button--positive.is-disabled[aria-selected=true],.fd-button--positive:disabled.is-selected,.fd-button--positive:disabled[aria-selected=true],.fd-button--positive[aria-disabled=true].is-selected,.fd-button--positive[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background))}.fd-button--positive.fd-button--toggled{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Accept_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Accept_Selected_Background)}.fd-button--positive.fd-button--toggled.is-hover,.fd-button--positive.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Accept_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Accept_Selected_Hover_Background)}.fd-button--positive.fd-button--toggled.is-active,.fd-button--positive.fd-button--toggled.is-selected,.fd-button--positive.fd-button--toggled:active,.fd-button--positive.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Accept_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Accept_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Accept_Selected_Hover_Background))}.fd-button--positive.fd-button--toggled.is-active .fd-button__icon,.fd-button--positive.fd-button--toggled.is-selected .fd-button__icon,.fd-button--positive.fd-button--toggled:active .fd-button__icon,.fd-button--positive.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Accept_Active_TextColor);text-shadow:none}.fd-button--positive.fd-button--toggled.is-disabled,.fd-button--positive.fd-button--toggled:disabled,.fd-button--positive.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--transparent{--fdButtonColor:var(--sapButton_Lite_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Lite_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Lite_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--transparent.is-selected,.fd-button--transparent[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--transparent.is-hover,.fd-button--transparent:hover{--fdButtonColor:var(--sapButton_Lite_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Lite_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Lite_Hover_Background))}.fd-button--transparent.is-active,.fd-button--transparent:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Lite_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Lite_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button--transparent.is-active .fd-button__icon,.fd-button--transparent:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--transparent.is-disabled,.fd-button--transparent:disabled,.fd-button--transparent[aria-disabled=true]{--fdButtonColor:var(--sapButton_Lite_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Lite_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Lite_Background))}.fd-button--transparent.is-disabled.is-selected,.fd-button--transparent.is-disabled[aria-selected=true],.fd-button--transparent:disabled.is-selected,.fd-button--transparent:disabled[aria-selected=true],.fd-button--transparent[aria-disabled=true].is-selected,.fd-button--transparent[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--transparent.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--transparent.fd-button--toggled.is-hover,.fd-button--transparent.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--transparent.fd-button--toggled.is-active,.fd-button--transparent.fd-button--toggled.is-selected,.fd-button--transparent.fd-button--toggled:active,.fd-button--transparent.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--transparent.fd-button--toggled.is-active .fd-button__icon,.fd-button--transparent.fd-button--toggled.is-selected .fd-button__icon,.fd-button--transparent.fd-button--toggled:active .fd-button__icon,.fd-button--transparent.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--transparent.fd-button--toggled.is-disabled,.fd-button--transparent.fd-button--toggled:disabled,.fd-button--transparent.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--ghost{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--fdButton_Ghost_Background));background-color:var(--fdButtonBackgroundColor);border-color:var(--fdButtonBorderColor);color:var(--fdButtonColor)}.fd-button--ghost.is-selected,.fd-button--ghost[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonSelectedPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonSelectedPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--ghost.is-hover,.fd-button--ghost:hover{--fdButtonColor:var(--sapButton_Hover_TextColor);--fdButtonBorderColor:var(--fdButtonHoverPrioritizedBorderColor,var(--sapButton_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonHoverPrioritizedBackgroundColor,var(--sapButton_Hover_Background))}.fd-button--ghost.is-active,.fd-button--ghost:active{--fdButtonColor:var(--sapButton_Active_TextColor);--fdButtonBorderColor:var(--fdButtonActivePrioritizedBorderColor,var(--sapButton_Active_BorderColor));--fdButtonBackgroundColor:var(--fdButtonActivePrioritizedBackgroundColor,var(--sapButton_Active_Background));--fdElementTextColor:var(--sapButton_Active_TextColor);--fdElementIconColor:var(--sapButton_Active_TextColor)}.fd-button--ghost.is-active .fd-button__icon,.fd-button--ghost:active .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--ghost.is-disabled,.fd-button--ghost:disabled,.fd-button--ghost[aria-disabled=true]{--fdButtonColor:var(--sapButton_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--fdButton_Ghost_Background))}.fd-button--ghost.is-disabled.is-selected,.fd-button--ghost.is-disabled[aria-selected=true],.fd-button--ghost:disabled.is-selected,.fd-button--ghost:disabled[aria-selected=true],.fd-button--ghost[aria-disabled=true].is-selected,.fd-button--ghost[aria-disabled=true][aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Background))}.fd-button--ghost.fd-button--toggled{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledPrioritizedBorderColor,var(--sapButton_Selected_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledPrioritizedBackgroundColor,var(--sapButton_Selected_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Background)}.fd-button--ghost.fd-button--toggled.is-hover,.fd-button--ghost.fd-button--toggled:hover{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(--fdButtonToggledActivePrioritizedBorderColor,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonToggledActivePrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background));--fdButtonPrioritizedBackgroundColor:var(--sapButton_Selected_Hover_Background)}.fd-button--ghost.fd-button--toggled.is-active,.fd-button--ghost.fd-button--toggled.is-selected,.fd-button--ghost.fd-button--toggled:active,.fd-button--ghost.fd-button--toggled[aria-selected=true]{--fdButtonColor:var(--sapButton_Selected_TextColor);--fdButtonBorderColor:var(true,var(--sapButton_Selected_Hover_BorderColor));--fdButtonBackgroundColor:var(--fdButtonPrioritizedBackgroundColor,var(--sapButton_Selected_Hover_Background))}.fd-button--ghost.fd-button--toggled.is-active .fd-button__icon,.fd-button--ghost.fd-button--toggled.is-selected .fd-button__icon,.fd-button--ghost.fd-button--toggled:active .fd-button__icon,.fd-button--ghost.fd-button--toggled[aria-selected=true] .fd-button__icon{color:var(--sapButton_Active_TextColor);text-shadow:none}.fd-button--ghost.fd-button--toggled.is-disabled,.fd-button--ghost.fd-button--toggled:disabled,.fd-button--ghost.fd-button--toggled[aria-disabled=true]{-webkit-box-shadow:none;box-shadow:none}.fd-button--tool-header{--fdButton_ToolHeader_Icon_Size:1rem;--fdButton_ToolHeader_Padding:.75rem;--fdButton_ToolHeader_Size:var(--fdButton_ToolHeader_Button_Size);--fdButton_ToolHeader_Background:var(--sapButton_Lite_Background);--fdButton_ToolHeader_Color:var(--fdButton_ToolHeader_Color_Normal);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Normal);--fdButton_ToolHeader_Border_Radius:var(--fdButton_ToolHeader_Button_Border_Radius);background:var(--fdButton_ToolHeader_Background);border:var(--sapButton_BorderWidth) solid var(--fdButton_ToolHeader_Border_Color);border-radius:var(--fdButton_ToolHeader_Border_Radius);color:var(--fdButton_ToolHeader_Color);height:var(--fdButton_ToolHeader_Size);max-height:var(--fdButton_ToolHeader_Size);max-width:var(--fdButton_ToolHeader_Size);min-height:var(--fdButton_ToolHeader_Size);min-width:var(--fdButton_ToolHeader_Size);padding-block:var(--fdButton_ToolHeader_Padding);padding-inline:var(--fdButton_ToolHeader_Padding);width:var(--fdButton_ToolHeader_Size)}.fd-button--tool-header [class*=sap-icon],.fd-button--tool-header[class*=sap-icon]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;font-size:var(--fdButton_ToolHeader_Icon_Size);height:var(--fdButton_ToolHeader_Icon_Size);width:var(--fdButton_ToolHeader_Icon_Size)}.fd-button--tool-header.is-hover,.fd-button--tool-header:hover{--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Hover);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Hover);--fdButton_Hover_Shadow:none}.fd-button--tool-header.is-active,.fd-button--tool-header:active{--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Active);--fdButton_ToolHeader_Color:var(--fdButton_ToolHeader_Color_Active);outline:none}.fd-button--tool-header.is-active.is-focus,.fd-button--tool-header.is-active:focus,.fd-button--tool-header:active.is-focus,.fd-button--tool-header:active:focus{z-index:5;--fdButton_ToolHeader_Border_Radius:.375rem;--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Active);outline:none}.fd-button--tool-header.is-active.is-focus:after,.fd-button--tool-header.is-active:focus:after,.fd-button--tool-header:active.is-focus:after,.fd-button--tool-header:active:focus:after{border:none}.fd-button--tool-header.is-focus,.fd-button--tool-header:focus{z-index:5;--fdButton_ToolHeader_Background:var(--fdButton_ToolHeader_Background_Active);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Focus);--fdButton_ToolHeader_Border_Radius:var(--fdButton_ToolHeader_Border_Radius_Focus);outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--fdButton_ToolHeader_Outline_Color)}.fd-button--tool-header.is-focus:after,.fd-button--tool-header:focus:after{border:none}.fd-button--tool-header.is-disabled,.fd-button--tool-header:disabled,.fd-button--tool-header[aria-disabled=true]{--fdButton_ToolHeader_Background:var(--sapButton_Lite_Background);--fdButton_ToolHeader_Border_Color:var(--fdButton_ToolHeader_Border_Color_Disabled);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-button--tool-header[class*=-compact],[class*=-compact] .fd-button--tool-header:not([class*=-cozy]){--fdButton_ToolHeader_Padding:.5rem;--fdButton_ToolHeader_Size:var(--fdButton_ToolHeader_Button_Size_Compact)}.fd-button--tool-header .fd-button__badge{background:var(--sapContent_BadgeBackground);border:0;border:.0625rem solid var(--fdButton_ToolHeader_Badge_Border_Color);border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_BadgeBackground);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.625rem;line-height:normal;margin-block:0;margin-inline:0;max-height:.625rem;max-width:.625rem;min-height:.625rem;min-width:.625rem;overflow:hidden;padding-block:0;padding-inline:0;position:absolute;right:-.125rem;top:-.125rem;width:.625rem}.fd-button--tool-header .fd-button__badge:after,.fd-button--tool-header .fd-button__badge:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-button--tool-header .fd-button__badge[dir=rtl],[dir=rtl] .fd-button--tool-header .fd-button__badge{left:-.125rem;right:auto}.fd-button--nested,.fd-button--nested-square{--fdButton_Nested_Size:1.5rem;--fdButton_Nested_Icon_Size:.75rem;--fdButton_Nested_Click_Area:2rem;--fdButton_Nested_Color:var(--sapContent_IconColor);--fdButton_Nested_Background:var(--sapButton_Lite_Background);--fdButton_Nested_Border_Color:var(--fdButton_ToolHeader_Border_Color_Normal);--fdButton_Nested_Border_Radius:1rem;background:var(--fdButton_Nested_Background);border:var(--sapButton_BorderWidth) solid var(--fdButton_Nested_Border_Color);border-radius:var(--fdButton_Nested_Border_Radius);color:var(--fdButton_Nested_Color);height:var(--fdButton_Nested_Size);max-height:var(--fdButton_Nested_Size);max-width:var(--fdButton_Nested_Size);min-height:var(--fdButton_Nested_Size);min-width:var(--fdButton_Nested_Size);padding-block:0;padding-inline:0;width:var(--fdButton_Nested_Size)}.fd-button--nested [class*=sap-icon],.fd-button--nested-square [class*=sap-icon],.fd-button--nested-square[class*=sap-icon],.fd-button--nested[class*=sap-icon]{color:inherit;font-size:var(--fdButton_Nested_Icon_Size)}.fd-button--nested-square:before,.fd-button--nested:before{height:var(--fdButton_Nested_Click_Area);inset:auto;max-height:var(--fdButton_Nested_Click_Area);max-width:var(--fdButton_Nested_Click_Area);min-height:var(--fdButton_Nested_Click_Area);min-width:var(--fdButton_Nested_Click_Area);width:var(--fdButton_Nested_Click_Area)}.fd-button--nested-square.is-hover,.fd-button--nested-square:hover,.fd-button--nested.is-hover,.fd-button--nested:hover{--fdButton_Nested_Background:var(--sapButton_Lite_Hover_Background);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Hover);--fdButton_Hover_Shadow:none}.fd-button--nested-square.is-active,.fd-button--nested-square:active,.fd-button--nested.is-active,.fd-button--nested:active{--fdButton_Nested_Background:var(--fdButton_Nested_Background_Active);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Active);--fdButton_Nested_Color:var(--fdButton_Nested_Color_Active);outline:none}.fd-button--nested-square.is-active.is-focus,.fd-button--nested-square.is-active:focus,.fd-button--nested-square:active.is-focus,.fd-button--nested-square:active:focus,.fd-button--nested.is-active.is-focus,.fd-button--nested.is-active:focus,.fd-button--nested:active.is-focus,.fd-button--nested:active:focus{z-index:5;--fdButton_Nested_Border_Radius:.75rem;--fdButton_Nested_Background:var(--fdButton_Nested_Background_Active);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Active);outline:none}.fd-button--nested-square.is-active.is-focus:after,.fd-button--nested-square.is-active:focus:after,.fd-button--nested-square:active.is-focus:after,.fd-button--nested-square:active:focus:after,.fd-button--nested.is-active.is-focus:after,.fd-button--nested.is-active:focus:after,.fd-button--nested:active.is-focus:after,.fd-button--nested:active:focus:after{border:none}.fd-button--nested-square.is-focus,.fd-button--nested-square:focus,.fd-button--nested.is-focus,.fd-button--nested:focus{z-index:5;--fdButton_Nested_Background:var(--fdButton_Nested_Background_Focus);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Focus);--fdButton_Nested_Border_Radius:var(--fdButton_Nested_Border_Radius_Focus);outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor)}.fd-button--nested-square.is-focus:after,.fd-button--nested-square:focus:after,.fd-button--nested.is-focus:after,.fd-button--nested:focus:after{border:none}.fd-button--nested-square.is-disabled,.fd-button--nested-square:disabled,.fd-button--nested-square[aria-disabled=true],.fd-button--nested.is-disabled,.fd-button--nested:disabled,.fd-button--nested[aria-disabled=true]{--fdButton_Nested_Background:var(--sapButton_Lite_Background);--fdButton_Nested_Border_Color:var(--fdButton_Nested_Border_Color_Disabled);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-button--nested-square[class*=-compact],.fd-button--nested[class*=-compact],[class*=-compact] .fd-button--nested-square:not([class*=-cozy]),[class*=-compact] .fd-button--nested:not([class*=-cozy]){--fdButton_Nested_Size:1.375rem;--fdButton_Nested_Click_Area:1.625rem}.fd-button--nested-square,.fd-button--nested-square.is-active,.fd-button--nested-square:active{--fdButton_Nested_Border_Radius:.1875rem}.fd-button--nested-square.is-active.is-focus,.fd-button--nested-square.is-active:focus,.fd-button--nested-square.is-focus,.fd-button--nested-square:active.is-focus,.fd-button--nested-square:active:focus,.fd-button--nested-square:focus{z-index:5;--fdButton_Nested_Border_Radius:.1875rem}.fd-button.fd-button--emphasized{font-weight:400}.fd-button__sr-only{position:absolute;clip:rect(0 0 0 0);height:1px;width:1px;border:0;margin-inline:-1px;margin-block:-1px;padding-inline:0;padding-block:0;overflow:hidden;white-space:nowrap}\n/*! Bundled license information:\n\nfundamental-styles/dist/button.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
479
566
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
480
567
|
|
|
481
568
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-core-button.mjs","sources":["../../../../libs/core/button/base-button.ts","../../../../libs/core/button/tokens.ts","../../../../libs/core/button/button-badge.directive.ts","../../../../libs/core/button/button.component.ts","../../../../libs/core/button/button.component.html","../../../../libs/core/button/button.module.ts","../../../../libs/core/button/fundamental-ngx-core-button.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { Directive, ElementRef, booleanAttribute, inject, input, linkedSignal } from '@angular/core';\n\nimport { HasElementRef } from '@fundamental-ngx/cdk/utils';\nimport { FD_DEFAULT_ICON_FONT_FAMILY, IconFont } from '@fundamental-ngx/core/icon';\nimport { ButtonModel } from './button.model';\n\nexport type GlyphPosition = 'before' | 'after';\n\nexport type ButtonType =\n | ''\n | 'standard'\n | 'positive'\n | 'negative'\n | 'attention'\n | 'half'\n | 'ghost'\n | 'transparent'\n | 'emphasized'\n | 'menu';\n\nexport const defaultButtonType = 'standard' as ButtonType;\n\n@Directive({\n host: {\n '[class.fd-button--toggled]': 'toggledState()',\n '[attr.aria-pressed]': 'toggledState() || null',\n '[attr.aria-selected]': 'selectedState() || null'\n }\n})\nexport class BaseButton implements HasElementRef, ButtonModel {\n /**\n * Whether the button is in a toggled state.\n * Used for toggle buttons that maintain an on/off state.\n * When true, adds the toggled class and sets aria-pressed=\"true\".\n */\n readonly toggled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /**\n * Whether the button is selected.\n * Used in button groups or toolbars to indicate the currently selected option.\n * When true, sets aria-selected=\"true\".\n */\n readonly selected = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /**\n * Native type attribute of the button element.\n * Defaults to 'button' to prevent form submission.\n * Set to 'submit' for form submission buttons or 'reset' for form reset buttons.\n */\n readonly type = input<string | null | undefined>('button');\n\n /**\n * Position of the icon relative to the button text.\n * - 'before': Icon appears before the text (default)\n * - 'after': Icon appears after the text\n */\n readonly glyphPosition = input<GlyphPosition>('before');\n\n /**\n * The icon to display in the button.\n * See the icon documentation for the list of available icons.\n * Example values: 'add', 'edit', 'delete', 'accept', 'decline'\n */\n readonly glyph = input<string | null | undefined>();\n\n /**\n * Font family for the icon.\n * Defaults to the SAP icon font.\n * Override when using custom icon fonts.\n */\n readonly glyphFont = input<IconFont>(FD_DEFAULT_ICON_FONT_FAMILY);\n\n /**\n * Visual style of the button.\n * Available types:\n * - 'standard': Default button style (blue)\n * - 'emphasized': High emphasis action (darker blue)\n * - 'positive': Successful/positive action (green)\n * - 'negative': Destructive/negative action (red)\n * - 'attention': Warning action (orange)\n * - 'transparent': No background, minimal style\n * - 'ghost': Subtle button with border on hover\n * - 'half': Split button style\n * - 'menu': Menu trigger button\n */\n readonly fdType = input<ButtonType>(defaultButtonType);\n\n /**\n * Text label displayed inside the button.\n * Can be used alone or combined with an icon.\n */\n readonly label = input<string | undefined>();\n\n /**\n * Whether to apply menu mode styling to the button.\n * When true, adds a dropdown arrow icon and menu-specific styling.\n */\n readonly fdMenu = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /**\n * Whether the button is disabled.\n * When true, the button cannot be interacted with and displays a disabled state.\n * This sets the native 'disabled' attribute on button elements.\n */\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /**\n * ARIA disabled attribute for accessibility.\n * Use this when you want to indicate a disabled state to screen readers\n * without preventing interaction (e.g., for showing tooltips on disabled buttons).\n * Unlike the 'disabled' attribute, this does not prevent click events.\n */\n readonly ariaDisabled = input<boolean, BooleanInput>(false, {\n alias: 'aria-disabled',\n transform: booleanAttribute\n });\n\n /**\n * ARIA label for the button.\n * Provides an accessible name for screen readers.\n * If not provided, special button types will auto-generate from label or glyph.\n */\n readonly ariaLabel = input<string | null | undefined>();\n\n /**\n * ARIA description for the button.\n * Provides additional context for screen readers beyond the label.\n * Special button types (emphasized, positive, negative, attention) will\n * auto-generate a description from their type if not provided.\n */\n readonly ariaDescription = input<string | null | undefined>();\n\n /** @hidden */\n readonly elementRef = inject(ElementRef);\n\n /**\n * Internal toggled state that can be mutated programmatically.\n * Syncs with the toggled input but allows internal modification.\n * @hidden\n */\n protected readonly toggledState = linkedSignal(() => this.toggled());\n\n /**\n * Internal selected state that can be mutated programmatically.\n * Syncs with the selected input but allows internal modification.\n * @hidden\n */\n protected readonly selectedState = linkedSignal(() => this.selected());\n\n /**\n * Internal button type state that can be mutated programmatically.\n * Syncs with the fdType input but allows internal modification.\n * @hidden\n */\n protected readonly fdTypeState = linkedSignal(() => this.fdType());\n\n /**\n * Internal disabled state that can be mutated programmatically.\n * Syncs with the disabled input but allows internal modification.\n * @hidden\n */\n protected readonly _disabledState = linkedSignal(() => this.disabled());\n\n /**\n * No-op for ButtonModel interface compatibility.\n * Signals automatically notify Angular when they change.\n * @deprecated Signals eliminate the need for manual change detection.\n */\n markForCheck(): void {\n // No-op: Signals automatically trigger change detection\n }\n\n /**\n * Programmatically set the disabled state.\n * This allows parent components or directives to update the button's disabled state.\n *\n * @param value - Whether the button should be disabled\n *\n * @example\n * ```typescript\n * // In a form component that needs to disable all buttons\n * this.submitButton.setDisabled(this.form.invalid);\n * ```\n */\n setDisabled(value: boolean): void {\n this._disabledState.set(value);\n }\n\n /**\n * Get the current disabled state.\n * Returns the internal disabled state which may have been modified programmatically.\n *\n * @returns True if the button is currently disabled\n *\n * @example\n * ```typescript\n * if (!this.button.isDisabled()) {\n * this.button.setDisabled(true);\n * }\n * ```\n */\n isDisabled(): boolean {\n return this._disabledState();\n }\n\n /**\n * Programmatically set the button type.\n * This allows directives to override the button's visual style.\n *\n * @param value - The button type to apply\n *\n * @example\n * ```typescript\n * // A directive that changes button style based on validation state\n * if (this.validationFailed) {\n * this.button.setFdType('negative');\n * }\n * ```\n */\n setFdType(value: ButtonType): void {\n this.fdTypeState.set(value);\n }\n\n /**\n * Get the current button type.\n * Returns the internal button type which may have been modified programmatically.\n *\n * @returns The current button type\n */\n getFdType(): ButtonType {\n return this.fdTypeState();\n }\n\n /**\n * Programmatically set the selected state.\n * This allows parent components to update the button's selected state.\n * Used in button groups or toolbars to indicate active selection.\n *\n * @param value - Whether the button should be selected\n *\n * @example\n * ```typescript\n * // In a button group component managing selection\n * this.buttons.forEach(btn => btn.setSelected(false));\n * this.activeButton.setSelected(true);\n * ```\n */\n setSelected(value: boolean): void {\n this.selectedState.set(value);\n }\n\n /**\n * Get the current selected state.\n * Returns the internal selected state which may have been modified programmatically.\n *\n * @returns True if the button is currently selected\n */\n isSelected(): boolean {\n return this.selectedState();\n }\n\n /**\n * Programmatically set the toggled state.\n * This allows parent components to update the button's toggled state.\n * Used for toggle buttons that maintain an on/off state.\n *\n * @param value - Whether the button should be toggled on\n *\n * @example\n * ```typescript\n * // In a toolbar with toggle buttons\n * handleBoldClick(): void {\n * const isActive = !this.boldButton.isToggled();\n * this.boldButton.setToggled(isActive);\n * }\n * ```\n */\n setToggled(value: boolean): void {\n this.toggledState.set(value);\n }\n\n /**\n * Get the current toggled state.\n * Returns the internal toggled state which may have been modified programmatically.\n *\n * @returns True if the button is currently toggled\n */\n isToggled(): boolean {\n return this.toggledState();\n }\n}\n","import { InjectionToken } from '@angular/core';\nimport { BaseButton } from './base-button';\n\nexport const FD_BUTTON_COMPONENT = new InjectionToken<BaseButton>('FdButtonComponent');\n","import { Directive, ElementRef, effect, inject, input, isDevMode } from '@angular/core';\nimport { HasElementRef } from '@fundamental-ngx/cdk/utils';\nimport { BaseButton, ButtonType } from './base-button';\nimport { FD_BUTTON_COMPONENT } from './tokens';\n\nexport const badgeEnabledButtonTypes: ButtonType[] = ['emphasized', 'standard', 'ghost', 'transparent'];\n\n/**\n * Directive to display a badge on a button.\n *\n * Badges are small status indicators that can be added to buttons to show\n * notifications, counts, or other supplementary information.\n *\n * Usage:\n * ```html\n * <button fd-button>\n * Button Text\n * <fd-button-badge [content]=\"5\" />\n * </button>\n * ```\n *\n * @note Badge content should not exceed 4 characters for optimal display.\n * @note Badges are only supported on emphasized, standard, ghost, and transparent button types.\n */\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'fd-button-badge',\n host: {\n class: 'fd-button__badge'\n }\n})\nexport class ButtonBadgeDirective implements HasElementRef {\n /**\n * Content to display inside the badge.\n * Should not exceed 4 characters for optimal display.\n * Supports both string and numeric values.\n */\n readonly content = input<string | number>();\n\n /** @hidden */\n readonly elementRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n /** @hidden */\n protected readonly buttonComponent = inject<BaseButton>(FD_BUTTON_COMPONENT, { host: true });\n\n /** @hidden */\n constructor() {\n // Single-purpose effect: Sync badge content to DOM\n effect(() => {\n this.elementRef.nativeElement.textContent = String(this.content() ?? '');\n });\n\n // Validation effect only in development mode (zero overhead in production)\n if (isDevMode()) {\n effect(() => {\n this._validateBadge();\n });\n }\n }\n\n /**\n * Validates badge configuration in development mode.\n * Checks content length and button type compatibility.\n * @hidden\n */\n private _validateBadge(): void {\n const contentValue = this.content();\n if (contentValue && contentValue.toString().length > 4) {\n console.warn('Badge content should not be longer than 4 characters');\n }\n\n if (!badgeEnabledButtonTypes.includes(this.buttonComponent.getFdType())) {\n console.warn(\n `Currently the ${JSON.stringify(\n badgeEnabledButtonTypes\n )} type of buttons are required for Badge enablement`\n );\n }\n }\n}\n","import {\n afterNextRender,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport { HasElementRef } from '@fundamental-ngx/cdk/utils';\nimport { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';\nimport { BaseButton } from './base-button';\n\nimport { IconComponent } from '@fundamental-ngx/core/icon';\nimport { FD_BUTTON_COMPONENT } from './tokens';\n\nlet buttonId = 0;\n\nconst SPECIAL_BUTTON_TYPES = new Set(['emphasized', 'positive', 'negative', 'attention']);\n\n/**\n * Button directive, used to enhance standard HTML buttons.\n *\n * ``` selector: button[fd-button], a[fd-button] ```\n *\n * ```html\n * <button fd-button label=\"Button Text\"></button>\n * <a fd-button label=\"Button Text\"></a>\n * ```\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[fd-button], a[fd-button], span[fd-button]',\n exportAs: 'fd-button',\n templateUrl: './button.component.html',\n styleUrl: './button.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.type]': 'type()',\n '[attr.disabled]': '_disabledState() || null',\n '[attr.aria-disabled]': 'ariaDisabled() || null',\n '[attr.aria-label]': 'buttonArialabel()',\n '[attr.aria-description]': 'buttonAriaDescription()',\n '[attr.id]': 'id()',\n '[class]': 'cssClass()',\n '(click)': 'clicked($event)'\n },\n providers: [\n contentDensityObserverProviders(),\n {\n provide: FD_BUTTON_COMPONENT,\n useExisting: ButtonComponent\n }\n ],\n imports: [IconComponent]\n})\nexport class ButtonComponent extends BaseButton implements HasElementRef {\n /** Button ID - default value is provided if not set */\n readonly id = input(`fd-button-${++buttonId}`);\n\n /** @hidden */\n readonly elementRef = inject(ElementRef);\n\n /** @hidden */\n protected readonly contentDensityObserver = inject(ContentDensityObserver);\n\n /**\n * Calculate aria-label attribute\n * @hidden\n */\n protected readonly buttonArialabel = computed(() => {\n if (this.ariaLabel()) {\n return this.ariaLabel(); // return the input aria-label\n }\n\n const nativeLabel = this._nativeAriaLabel();\n\n if (nativeLabel) {\n return nativeLabel; // return the native attribute aria-label\n }\n\n if (SPECIAL_BUTTON_TYPES.has(this.fdTypeState())) {\n return this.label() ?? this._glyphLabel() ?? null;\n }\n\n return null;\n });\n\n /**\n * Calculate aria-description attribute\n * @hidden\n */\n protected readonly buttonAriaDescription = computed(() => {\n if (this.ariaDescription()) {\n return this.ariaDescription();\n }\n\n if (SPECIAL_BUTTON_TYPES.has(this.fdTypeState())) {\n return this.fdTypeState();\n }\n\n return null;\n });\n\n /**\n * Computed CSS classes for the button.\n * Built as a string to avoid array allocation overhead.\n * @hidden\n */\n protected readonly cssClass = computed(() => {\n let classes = 'fd-button';\n\n const type = this.fdTypeState();\n if (type) {\n classes += ` fd-button--${type}`;\n }\n\n if (this.fdMenu()) {\n classes += ' fd-button--menu';\n }\n\n if (this._disabledState() || this.ariaDisabled()) {\n classes += ' is-disabled';\n }\n\n if (this.toggledState()) {\n classes += ' fd-button--toggled';\n }\n\n return classes;\n });\n\n /**\n * Memoized glyph label for aria-label fallback.\n * Transforms glyph name (e.g., \"slim-arrow-down\") to readable text (e.g., \"slim arrow down\").\n * @hidden\n */\n private readonly _glyphLabel = computed(() => {\n const glyph = this.glyph();\n return glyph ? glyph.replace(/-/g, ' ') : null;\n });\n\n /**\n * Native aria-label attribute read from the DOM element.\n * Captured once after render for use in aria-label computation.\n * @hidden\n */\n private readonly _nativeAriaLabel = signal<string | null>(null);\n\n /** @hidden */\n constructor() {\n super();\n\n // Read native aria-label attribute once after render\n afterNextRender(() => {\n const nativeLabel = this.elementRef.nativeElement.getAttribute('aria-label');\n if (nativeLabel) {\n this._nativeAriaLabel.set(nativeLabel);\n }\n });\n }\n\n /** Forces the focus outline around the button, which is not default behavior in Safari. */\n protected clicked(event: Event): void {\n const target = event?.target as HTMLElement;\n // Target can be empty during unit tests execution.\n if (target && document.activeElement !== target) {\n target.focus();\n }\n }\n}\n","@if (glyph() && glyphPosition() === 'before') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (label()) {\n <span class=\"fd-button__text\">\n {{ label() }}\n </span>\n}\n<ng-content></ng-content>\n<ng-content select=\"fd-button-badge\"></ng-content>\n@if (glyph() && glyphPosition() === 'after') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (fdMenu()) {\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n}\n","import { NgModule } from '@angular/core';\n\nimport { ButtonComponent } from './button.component';\n\n/**\n * @deprecated\n * Use `ButtonComponent` import instead\n */\n@NgModule({\n imports: [ButtonComponent],\n exports: [ButtonComponent]\n})\nexport class ButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-core-button.mjs","sources":["../../../../libs/core/button/base-button.ts","../../../../libs/core/button/tokens.ts","../../../../libs/core/button/button-badge.directive.ts","../../../../libs/core/button/button.component.ts","../../../../libs/core/button/button.component.html","../../../../libs/core/button/button.module.ts","../../../../libs/core/button/fundamental-ngx-core-button.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { Directive, ElementRef, booleanAttribute, inject, input, linkedSignal } from '@angular/core';\n\nimport { HasElementRef } from '@fundamental-ngx/cdk/utils';\nimport { FD_DEFAULT_ICON_FONT_FAMILY, IconFont } from '@fundamental-ngx/core/icon';\nimport { ButtonModel } from './button.model';\n\nexport type GlyphPosition = 'before' | 'after';\n\nexport type ButtonType =\n | ''\n | 'standard'\n | 'positive'\n | 'negative'\n | 'attention'\n | 'half'\n | 'ghost'\n | 'transparent'\n | 'emphasized'\n | 'menu';\n\nexport const defaultButtonType = 'standard' as ButtonType;\n\n@Directive({\n host: {\n '[class.fd-button--toggled]': 'toggledState()',\n '[attr.aria-pressed]': 'toggledState() || null',\n '[attr.aria-selected]': 'selectedState() || null'\n }\n})\nexport class BaseButton implements HasElementRef, ButtonModel {\n /**\n * Whether the button is in a toggled state.\n * Used for toggle buttons that maintain an on/off state.\n * When true, adds the toggled class and sets aria-pressed=\"true\".\n */\n readonly toggled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /**\n * Whether the button is selected.\n * Used in button groups or toolbars to indicate the currently selected option.\n * When true, sets aria-selected=\"true\".\n */\n readonly selected = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /**\n * Native type attribute of the button element.\n * Defaults to 'button' to prevent form submission.\n * Set to 'submit' for form submission buttons or 'reset' for form reset buttons.\n */\n readonly type = input<string | null | undefined>('button');\n\n /**\n * Position of the icon relative to the button text.\n * - 'before': Icon appears before the text (default)\n * - 'after': Icon appears after the text\n */\n readonly glyphPosition = input<GlyphPosition>('before');\n\n /**\n * The icon to display in the button.\n * See the icon documentation for the list of available icons.\n * Example values: 'add', 'edit', 'delete', 'accept', 'decline'\n */\n readonly glyph = input<string | null | undefined>();\n\n /**\n * Font family for the icon.\n * Defaults to the SAP icon font.\n * Override when using custom icon fonts.\n */\n readonly glyphFont = input<IconFont>(FD_DEFAULT_ICON_FONT_FAMILY);\n\n /**\n * Visual style of the button.\n * Available types:\n * - 'standard': Default button style (blue)\n * - 'emphasized': High emphasis action (darker blue)\n * - 'positive': Successful/positive action (green)\n * - 'negative': Destructive/negative action (red)\n * - 'attention': Warning action (orange)\n * - 'transparent': No background, minimal style\n * - 'ghost': Subtle button with border on hover\n * - 'half': Split button style\n * - 'menu': Menu trigger button\n */\n readonly fdType = input<ButtonType>(defaultButtonType);\n\n /**\n * Text label displayed inside the button.\n * Can be used alone or combined with an icon.\n */\n readonly label = input<string | undefined>();\n\n /**\n * Whether to apply menu mode styling to the button.\n * When true, adds a dropdown arrow icon and menu-specific styling.\n */\n readonly fdMenu = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /**\n * Whether the button is disabled.\n * When true, the button cannot be interacted with and displays a disabled state.\n * This sets the native 'disabled' attribute on button elements.\n */\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /**\n * ARIA disabled attribute for accessibility.\n * Use this when you want to indicate a disabled state to screen readers\n * without preventing interaction (e.g., for showing tooltips on disabled buttons).\n * Unlike the 'disabled' attribute, this does not prevent click events.\n */\n readonly ariaDisabled = input<boolean, BooleanInput>(false, {\n alias: 'aria-disabled',\n transform: booleanAttribute\n });\n\n /**\n * ARIA label for the button.\n * Provides an accessible name for screen readers.\n * If not provided, special button types will auto-generate from label or glyph.\n */\n readonly ariaLabel = input<string | null | undefined>();\n\n /**\n * ARIA description for the button.\n * Provides additional context for screen readers beyond the label.\n * Special button types (emphasized, positive, negative, attention) will\n * auto-generate a description from their type if not provided.\n */\n readonly ariaDescription = input<string | null | undefined>();\n\n /**\n * Override the default type description for special button types.\n * Provides a custom description for screen readers.\n * If not provided, defaults to the i18n-translated type description.\n */\n readonly ariaTypeDescription = input<string | null | undefined>();\n\n /**\n * Custom aria-describedby value.\n * When provided, bypasses the component's auto-generated aria-describedby\n * (which references the hidden description spans) and uses this value directly.\n * Use this when you need to reference external elements as the description source.\n * Native aria-describedby attributes are captured automatically via ngOnInit.\n */\n readonly ariaDescribedBy = input<string | null | undefined>();\n\n /** @hidden */\n readonly elementRef = inject(ElementRef);\n\n /**\n * Internal toggled state that can be mutated programmatically.\n * Syncs with the toggled input but allows internal modification.\n * @hidden\n */\n protected readonly toggledState = linkedSignal(() => this.toggled());\n\n /**\n * Internal selected state that can be mutated programmatically.\n * Syncs with the selected input but allows internal modification.\n * @hidden\n */\n protected readonly selectedState = linkedSignal(() => this.selected());\n\n /**\n * Internal button type state that can be mutated programmatically.\n * Syncs with the fdType input but allows internal modification.\n * @hidden\n */\n protected readonly fdTypeState = linkedSignal(() => this.fdType());\n\n /**\n * Internal disabled state that can be mutated programmatically.\n * Syncs with the disabled input but allows internal modification.\n * @hidden\n */\n protected readonly _disabledState = linkedSignal(() => this.disabled());\n\n /**\n * No-op for ButtonModel interface compatibility.\n * Signals automatically notify Angular when they change.\n * @deprecated Signals eliminate the need for manual change detection.\n */\n markForCheck(): void {\n // No-op: Signals automatically trigger change detection\n }\n\n /**\n * Programmatically set the disabled state.\n * This allows parent components or directives to update the button's disabled state.\n *\n * @param value - Whether the button should be disabled\n *\n * @example\n * ```typescript\n * // In a form component that needs to disable all buttons\n * this.submitButton.setDisabled(this.form.invalid);\n * ```\n */\n setDisabled(value: boolean): void {\n this._disabledState.set(value);\n }\n\n /**\n * Get the current disabled state.\n * Returns the internal disabled state which may have been modified programmatically.\n *\n * @returns True if the button is currently disabled\n *\n * @example\n * ```typescript\n * if (!this.button.isDisabled()) {\n * this.button.setDisabled(true);\n * }\n * ```\n */\n isDisabled(): boolean {\n return this._disabledState();\n }\n\n /**\n * Programmatically set the button type.\n * This allows directives to override the button's visual style.\n *\n * @param value - The button type to apply\n *\n * @example\n * ```typescript\n * // A directive that changes button style based on validation state\n * if (this.validationFailed) {\n * this.button.setFdType('negative');\n * }\n * ```\n */\n setFdType(value: ButtonType): void {\n this.fdTypeState.set(value);\n }\n\n /**\n * Get the current button type.\n * Returns the internal button type which may have been modified programmatically.\n *\n * @returns The current button type\n */\n getFdType(): ButtonType {\n return this.fdTypeState();\n }\n\n /**\n * Programmatically set the selected state.\n * This allows parent components to update the button's selected state.\n * Used in button groups or toolbars to indicate active selection.\n *\n * @param value - Whether the button should be selected\n *\n * @example\n * ```typescript\n * // In a button group component managing selection\n * this.buttons.forEach(btn => btn.setSelected(false));\n * this.activeButton.setSelected(true);\n * ```\n */\n setSelected(value: boolean): void {\n this.selectedState.set(value);\n }\n\n /**\n * Get the current selected state.\n * Returns the internal selected state which may have been modified programmatically.\n *\n * @returns True if the button is currently selected\n */\n isSelected(): boolean {\n return this.selectedState();\n }\n\n /**\n * Programmatically set the toggled state.\n * This allows parent components to update the button's toggled state.\n * Used for toggle buttons that maintain an on/off state.\n *\n * @param value - Whether the button should be toggled on\n *\n * @example\n * ```typescript\n * // In a toolbar with toggle buttons\n * handleBoldClick(): void {\n * const isActive = !this.boldButton.isToggled();\n * this.boldButton.setToggled(isActive);\n * }\n * ```\n */\n setToggled(value: boolean): void {\n this.toggledState.set(value);\n }\n\n /**\n * Get the current toggled state.\n * Returns the internal toggled state which may have been modified programmatically.\n *\n * @returns True if the button is currently toggled\n */\n isToggled(): boolean {\n return this.toggledState();\n }\n}\n","import { InjectionToken } from '@angular/core';\nimport { BaseButton } from './base-button';\n\nexport const FD_BUTTON_COMPONENT = new InjectionToken<BaseButton>('FdButtonComponent');\n","import { Directive, ElementRef, effect, inject, input, isDevMode } from '@angular/core';\nimport { HasElementRef } from '@fundamental-ngx/cdk/utils';\nimport { BaseButton, ButtonType } from './base-button';\nimport { FD_BUTTON_COMPONENT } from './tokens';\n\nexport const badgeEnabledButtonTypes: ButtonType[] = ['emphasized', 'standard', 'ghost', 'transparent'];\n\n/**\n * Directive to display a badge on a button.\n *\n * Badges are small status indicators that can be added to buttons to show\n * notifications, counts, or other supplementary information.\n *\n * Usage:\n * ```html\n * <button fd-button>\n * Button Text\n * <fd-button-badge [content]=\"5\" />\n * </button>\n * ```\n *\n * @note Badge content should not exceed 4 characters for optimal display.\n * @note Badges are only supported on emphasized, standard, ghost, and transparent button types.\n */\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'fd-button-badge',\n host: {\n class: 'fd-button__badge'\n }\n})\nexport class ButtonBadgeDirective implements HasElementRef {\n /**\n * Content to display inside the badge.\n * Should not exceed 4 characters for optimal display.\n * Supports both string and numeric values.\n */\n readonly content = input<string | number>();\n\n /** @hidden */\n readonly elementRef: ElementRef<HTMLElement> = inject(ElementRef);\n\n /** @hidden */\n protected readonly buttonComponent = inject<BaseButton>(FD_BUTTON_COMPONENT, { host: true });\n\n /** @hidden */\n constructor() {\n // Single-purpose effect: Sync badge content to DOM\n effect(() => {\n this.elementRef.nativeElement.textContent = String(this.content() ?? '');\n });\n\n // Validation effect only in development mode (zero overhead in production)\n if (isDevMode()) {\n effect(() => {\n this._validateBadge();\n });\n }\n }\n\n /**\n * Validates badge configuration in development mode.\n * Checks content length and button type compatibility.\n * @hidden\n */\n private _validateBadge(): void {\n const contentValue = this.content();\n if (contentValue && contentValue.toString().length > 4) {\n console.warn('Badge content should not be longer than 4 characters');\n }\n\n if (!badgeEnabledButtonTypes.includes(this.buttonComponent.getFdType())) {\n console.warn(\n `Currently the ${JSON.stringify(\n badgeEnabledButtonTypes\n )} type of buttons are required for Badge enablement`\n );\n }\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n OnInit,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport { HasElementRef } from '@fundamental-ngx/cdk/utils';\nimport { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';\nimport { resolveTranslationSignalFn } from '@fundamental-ngx/i18n';\nimport { BaseButton } from './base-button';\n\nimport { IconComponent } from '@fundamental-ngx/core/icon';\nimport { FD_BUTTON_COMPONENT } from './tokens';\n\nlet buttonId = 0;\n\nconst SPECIAL_BUTTON_TYPES = new Set(['emphasized', 'positive', 'negative', 'attention']);\n\n/**\n * Button directive, used to enhance standard HTML buttons.\n *\n * ``` selector: button[fd-button], a[fd-button] ```\n *\n * ```html\n * <button fd-button label=\"Button Text\"></button>\n * <a fd-button label=\"Button Text\"></a>\n * ```\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[fd-button], a[fd-button], span[fd-button]',\n exportAs: 'fd-button',\n templateUrl: './button.component.html',\n styleUrl: './button.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.type]': 'type()',\n '[attr.disabled]': '_disabledState() || null',\n '[attr.aria-disabled]': 'ariaDisabled() || null',\n '[attr.aria-label]': 'buttonArialabel()',\n '[attr.aria-describedby]': 'ariaDescribedby() || null',\n '[attr.id]': 'id()',\n '[class]': 'cssClass()',\n '(click)': 'clicked($event)'\n },\n providers: [\n contentDensityObserverProviders(),\n {\n provide: FD_BUTTON_COMPONENT,\n useExisting: ButtonComponent\n }\n ],\n imports: [IconComponent]\n})\nexport class ButtonComponent extends BaseButton implements HasElementRef, OnInit {\n /** Button ID - default value is provided if not set */\n readonly id = input(`fd-button-${++buttonId}`);\n\n /** @hidden */\n readonly elementRef = inject(ElementRef);\n\n /** @hidden */\n protected readonly contentDensityObserver = inject(ContentDensityObserver);\n\n /**\n * Check if button has a special type (emphasized, positive, negative, attention)\n * @hidden\n */\n protected readonly isSpecialButtonType = computed(() => SPECIAL_BUTTON_TYPES.has(this.fdTypeState()));\n\n /**\n * Calculate aria-describedby attribute value.\n * If the user explicitly provides aria-describedby (via input or native attribute),\n * that value is used as-is. Otherwise, auto-generates IDs referencing hidden description spans.\n * Returns null if no descriptions apply (attribute not set).\n * @hidden\n */\n protected readonly ariaDescribedby = computed(() => {\n // User-provided value takes full precedence — bypass the auto-generated spans\n const userProvided = this.ariaDescribedBy() ?? this.nativeAriaDescribedBy();\n if (userProvided != null) {\n return userProvided || null;\n }\n\n const ids: string[] = [];\n\n if (this.effectiveAriaDescription()) {\n ids.push(this.id() + '-description');\n }\n\n if (this.isSpecialButtonType()) {\n ids.push(this.id() + '-type-description');\n }\n\n return ids.length > 0 ? ids.join(' ') : null;\n });\n\n /**\n * Native aria-describedby attribute read from the DOM element.\n * Captured once during init; signals user intent to manage describedby manually.\n * @hidden\n */\n protected readonly nativeAriaDescribedBy = signal<string | null>(null);\n\n /**\n * Effective aria description: explicit input takes precedence over native attribute.\n * Prioritizes ariaDescription input, falls back to native attribute.\n * Empty string from ariaDescription is preserved (clears description).\n * @hidden\n */\n protected readonly effectiveAriaDescription = computed(\n () => this.ariaDescription() ?? this._nativeAriaDescription()\n );\n\n /**\n * Translated aria description for the current special button type, or null if not special.\n * @hidden\n */\n protected readonly defaultButtonTypeDescription = computed(() => {\n const type = this.fdTypeState() as keyof typeof this._typeDescriptions;\n return this._typeDescriptions[type]?.() ?? null;\n });\n\n /**\n * Calculate aria-label attribute\n * @hidden\n */\n protected readonly buttonArialabel = computed(() => {\n if (this.ariaLabel()) {\n return this.ariaLabel(); // return the input aria-label\n }\n\n const nativeLabel = this._nativeAriaLabel();\n\n if (nativeLabel) {\n return nativeLabel; // return the native attribute aria-label\n }\n\n if (this.isSpecialButtonType()) {\n return this.label() ?? this._glyphLabel() ?? null;\n }\n\n return null;\n });\n\n /**\n * Computed CSS classes for the button.\n * Built as a string to avoid array allocation overhead.\n * @hidden\n */\n protected readonly cssClass = computed(() => {\n let classes = 'fd-button';\n\n const type = this.fdTypeState();\n if (type) {\n classes += ` fd-button--${type}`;\n }\n\n if (this.fdMenu()) {\n classes += ' fd-button--menu';\n }\n\n if (this._disabledState() || this.ariaDisabled()) {\n classes += ' is-disabled';\n }\n\n if (this.toggledState()) {\n classes += ' fd-button--toggled';\n }\n\n return classes;\n });\n\n /**\n * Memoized glyph label for aria-label fallback.\n * Transforms glyph name (e.g., \"slim-arrow-down\") to readable text (e.g., \"slim arrow down\").\n * @hidden\n */\n private readonly _glyphLabel = computed(() => {\n const glyph = this.glyph();\n return glyph ? glyph.replace(/-/g, ' ') : null;\n });\n\n /**\n * Native aria-label attribute read from the DOM element.\n * Captured once after render for use in aria-label computation.\n * @hidden\n */\n private readonly _nativeAriaLabel = signal<string | null>(null);\n\n /**\n * Native aria-description attribute read from the DOM element.\n * Captured once after render for use in aria-description computation.\n * @hidden\n */\n private readonly _nativeAriaDescription = signal<string | null>(null);\n\n /** @hidden Resolves per-key translation signals */\n private readonly _translate = resolveTranslationSignalFn();\n\n /** @hidden Translated aria descriptions for each special button type */\n private readonly _typeDescriptions = {\n attention: this._translate('coreButton.attentionTypeDescription'),\n emphasized: this._translate('coreButton.emphasizedTypeDescription'),\n negative: this._translate('coreButton.negativeTypeDescription'),\n positive: this._translate('coreButton.positiveTypeDescription')\n } as const;\n\n /** @hidden */\n constructor() {\n super();\n }\n\n /**\n * Capture native aria-label and aria-description attributes during initialization.\n * Runs during ngOnInit to ensure attributes are captured before rendering the template.\n * The native aria-description is removed from the DOM after capture to prevent\n * duplicate accessibility attributes (ACC-264.1).\n */\n ngOnInit(): void {\n const nativeLabel = this.elementRef.nativeElement.getAttribute('aria-label');\n if (nativeLabel) {\n this._nativeAriaLabel.set(nativeLabel);\n }\n\n const nativeDescription = this.elementRef.nativeElement.getAttribute('aria-description');\n if (nativeDescription) {\n this._nativeAriaDescription.set(nativeDescription);\n // Remove native attribute to prevent ACC-264.1 (duplicate aria-description)\n this.elementRef.nativeElement.removeAttribute('aria-description');\n }\n\n const nativeDescribedBy = this.elementRef.nativeElement.getAttribute('aria-describedby');\n if (nativeDescribedBy) {\n this.nativeAriaDescribedBy.set(nativeDescribedBy);\n }\n }\n\n /** Forces the focus outline around the button, which is not default behavior in Safari. */\n protected clicked(event: Event): void {\n const target = event?.target as HTMLElement;\n // Target can be empty during unit tests execution.\n if (target && document.activeElement !== target) {\n target.focus();\n }\n }\n}\n","@if (glyph() && glyphPosition() === 'before') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (label()) {\n <span class=\"fd-button__text\">\n {{ label() }}\n </span>\n}\n<ng-content></ng-content>\n<ng-content select=\"fd-button-badge\"></ng-content>\n@if (glyph() && glyphPosition() === 'after') {\n <fd-icon [glyph]=\"glyph()\" [font]=\"glyphFont()\"></fd-icon>\n}\n@if (fdMenu()) {\n <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n}\n\n<!-- Custom description (ariaDescription input or native attribute).\n Skipped when user provides aria-describedby — they manage their own description references. -->\n@if (!ariaDescribedBy() && !nativeAriaDescribedBy() && effectiveAriaDescription()) {\n <span class=\"fd-button__sr-only\" [attr.id]=\"id() + '-description'\">{{ effectiveAriaDescription() }}</span>\n}\n\n<!-- Type description (special button types: emphasized, positive, negative, attention).\n Skipped when user provides aria-describedby — they manage their own description references. -->\n@if (!ariaDescribedBy() && !nativeAriaDescribedBy() && isSpecialButtonType()) {\n <span class=\"fd-button__sr-only\" [attr.id]=\"id() + '-type-description'\">{{\n ariaTypeDescription() || defaultButtonTypeDescription()\n }}</span>\n}\n","import { NgModule } from '@angular/core';\n\nimport { ButtonComponent } from './button.component';\n\n/**\n * @deprecated\n * Use `ButtonComponent` import instead\n */\n@NgModule({\n imports: [ButtonComponent],\n exports: [ButtonComponent]\n})\nexport class ButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fundamental-ngx/core",
|
|
3
|
-
"version": "0.64.2-rc.
|
|
3
|
+
"version": "0.64.2-rc.2",
|
|
4
4
|
"schematics": "./schematics/collection.json",
|
|
5
5
|
"ng-update": {
|
|
6
6
|
"packageGroupName": "@fundamental-ngx/core",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"@angular/forms": "^22.0.0",
|
|
38
38
|
"@angular/platform-browser": "^22.0.0",
|
|
39
39
|
"@angular/router": "^22.0.0",
|
|
40
|
-
"@fundamental-ngx/cdk": "0.64.2-rc.
|
|
41
|
-
"@fundamental-ngx/i18n": "0.64.2-rc.
|
|
40
|
+
"@fundamental-ngx/cdk": "0.64.2-rc.2",
|
|
41
|
+
"@fundamental-ngx/i18n": "0.64.2-rc.2",
|
|
42
42
|
"@sap-theming/theming-base-content": "^11.36.0",
|
|
43
43
|
"fundamental-styles": "0.41.8",
|
|
44
44
|
"rxjs": "^7.8.0"
|
package/schematics/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { ElementRef, InjectionToken } from '@angular/core';
|
|
2
|
+
import { ElementRef, OnInit, InjectionToken } from '@angular/core';
|
|
3
3
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
4
4
|
import { HasElementRef } from '@fundamental-ngx/cdk/utils';
|
|
5
5
|
import { IconFont } from '@fundamental-ngx/core/icon';
|
|
@@ -103,6 +103,20 @@ declare class BaseButton implements HasElementRef, ButtonModel {
|
|
|
103
103
|
* auto-generate a description from their type if not provided.
|
|
104
104
|
*/
|
|
105
105
|
readonly ariaDescription: _angular_core.InputSignal<string | null | undefined>;
|
|
106
|
+
/**
|
|
107
|
+
* Override the default type description for special button types.
|
|
108
|
+
* Provides a custom description for screen readers.
|
|
109
|
+
* If not provided, defaults to the i18n-translated type description.
|
|
110
|
+
*/
|
|
111
|
+
readonly ariaTypeDescription: _angular_core.InputSignal<string | null | undefined>;
|
|
112
|
+
/**
|
|
113
|
+
* Custom aria-describedby value.
|
|
114
|
+
* When provided, bypasses the component's auto-generated aria-describedby
|
|
115
|
+
* (which references the hidden description spans) and uses this value directly.
|
|
116
|
+
* Use this when you need to reference external elements as the description source.
|
|
117
|
+
* Native aria-describedby attributes are captured automatically via ngOnInit.
|
|
118
|
+
*/
|
|
119
|
+
readonly ariaDescribedBy: _angular_core.InputSignal<string | null | undefined>;
|
|
106
120
|
/** @hidden */
|
|
107
121
|
readonly elementRef: ElementRef<any>;
|
|
108
122
|
/**
|
|
@@ -231,7 +245,7 @@ declare class BaseButton implements HasElementRef, ButtonModel {
|
|
|
231
245
|
*/
|
|
232
246
|
isToggled(): boolean;
|
|
233
247
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseButton, never>;
|
|
234
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseButton, never, never, { "toggled": { "alias": "toggled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "glyphPosition": { "alias": "glyphPosition"; "required": false; "isSignal": true; }; "glyph": { "alias": "glyph"; "required": false; "isSignal": true; }; "glyphFont": { "alias": "glyphFont"; "required": false; "isSignal": true; }; "fdType": { "alias": "fdType"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fdMenu": { "alias": "fdMenu"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescription": { "alias": "ariaDescription"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
248
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseButton, never, never, { "toggled": { "alias": "toggled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "glyphPosition": { "alias": "glyphPosition"; "required": false; "isSignal": true; }; "glyph": { "alias": "glyph"; "required": false; "isSignal": true; }; "glyphFont": { "alias": "glyphFont"; "required": false; "isSignal": true; }; "fdType": { "alias": "fdType"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fdMenu": { "alias": "fdMenu"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescription": { "alias": "ariaDescription"; "required": false; "isSignal": true; }; "ariaTypeDescription": { "alias": "ariaTypeDescription"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
235
249
|
}
|
|
236
250
|
|
|
237
251
|
declare const badgeEnabledButtonTypes: ButtonType[];
|
|
@@ -285,7 +299,7 @@ declare class ButtonBadgeDirective implements HasElementRef {
|
|
|
285
299
|
* <a fd-button label="Button Text"></a>
|
|
286
300
|
* ```
|
|
287
301
|
*/
|
|
288
|
-
declare class ButtonComponent extends BaseButton implements HasElementRef {
|
|
302
|
+
declare class ButtonComponent extends BaseButton implements HasElementRef, OnInit {
|
|
289
303
|
/** Button ID - default value is provided if not set */
|
|
290
304
|
readonly id: _angular_core.InputSignal<string>;
|
|
291
305
|
/** @hidden */
|
|
@@ -293,15 +307,41 @@ declare class ButtonComponent extends BaseButton implements HasElementRef {
|
|
|
293
307
|
/** @hidden */
|
|
294
308
|
protected readonly contentDensityObserver: ContentDensityObserver;
|
|
295
309
|
/**
|
|
296
|
-
*
|
|
310
|
+
* Check if button has a special type (emphasized, positive, negative, attention)
|
|
297
311
|
* @hidden
|
|
298
312
|
*/
|
|
299
|
-
protected readonly
|
|
313
|
+
protected readonly isSpecialButtonType: _angular_core.Signal<boolean>;
|
|
300
314
|
/**
|
|
301
|
-
* Calculate aria-
|
|
315
|
+
* Calculate aria-describedby attribute value.
|
|
316
|
+
* If the user explicitly provides aria-describedby (via input or native attribute),
|
|
317
|
+
* that value is used as-is. Otherwise, auto-generates IDs referencing hidden description spans.
|
|
318
|
+
* Returns null if no descriptions apply (attribute not set).
|
|
302
319
|
* @hidden
|
|
303
320
|
*/
|
|
304
|
-
protected readonly
|
|
321
|
+
protected readonly ariaDescribedby: _angular_core.Signal<string | null>;
|
|
322
|
+
/**
|
|
323
|
+
* Native aria-describedby attribute read from the DOM element.
|
|
324
|
+
* Captured once during init; signals user intent to manage describedby manually.
|
|
325
|
+
* @hidden
|
|
326
|
+
*/
|
|
327
|
+
protected readonly nativeAriaDescribedBy: _angular_core.WritableSignal<string | null>;
|
|
328
|
+
/**
|
|
329
|
+
* Effective aria description: explicit input takes precedence over native attribute.
|
|
330
|
+
* Prioritizes ariaDescription input, falls back to native attribute.
|
|
331
|
+
* Empty string from ariaDescription is preserved (clears description).
|
|
332
|
+
* @hidden
|
|
333
|
+
*/
|
|
334
|
+
protected readonly effectiveAriaDescription: _angular_core.Signal<string | null>;
|
|
335
|
+
/**
|
|
336
|
+
* Translated aria description for the current special button type, or null if not special.
|
|
337
|
+
* @hidden
|
|
338
|
+
*/
|
|
339
|
+
protected readonly defaultButtonTypeDescription: _angular_core.Signal<string>;
|
|
340
|
+
/**
|
|
341
|
+
* Calculate aria-label attribute
|
|
342
|
+
* @hidden
|
|
343
|
+
*/
|
|
344
|
+
protected readonly buttonArialabel: _angular_core.Signal<string | null | undefined>;
|
|
305
345
|
/**
|
|
306
346
|
* Computed CSS classes for the button.
|
|
307
347
|
* Built as a string to avoid array allocation overhead.
|
|
@@ -320,8 +360,25 @@ declare class ButtonComponent extends BaseButton implements HasElementRef {
|
|
|
320
360
|
* @hidden
|
|
321
361
|
*/
|
|
322
362
|
private readonly _nativeAriaLabel;
|
|
363
|
+
/**
|
|
364
|
+
* Native aria-description attribute read from the DOM element.
|
|
365
|
+
* Captured once after render for use in aria-description computation.
|
|
366
|
+
* @hidden
|
|
367
|
+
*/
|
|
368
|
+
private readonly _nativeAriaDescription;
|
|
369
|
+
/** @hidden Resolves per-key translation signals */
|
|
370
|
+
private readonly _translate;
|
|
371
|
+
/** @hidden Translated aria descriptions for each special button type */
|
|
372
|
+
private readonly _typeDescriptions;
|
|
323
373
|
/** @hidden */
|
|
324
374
|
constructor();
|
|
375
|
+
/**
|
|
376
|
+
* Capture native aria-label and aria-description attributes during initialization.
|
|
377
|
+
* Runs during ngOnInit to ensure attributes are captured before rendering the template.
|
|
378
|
+
* The native aria-description is removed from the DOM after capture to prevent
|
|
379
|
+
* duplicate accessibility attributes (ACC-264.1).
|
|
380
|
+
*/
|
|
381
|
+
ngOnInit(): void;
|
|
325
382
|
/** Forces the focus outline around the button, which is not default behavior in Safari. */
|
|
326
383
|
protected clicked(event: Event): void;
|
|
327
384
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
|