@fundamental-ngx/core 0.33.4-rc.6 → 0.33.4

package/fesm2020/fundamental-ngx-core-avatar.mjs

@@ -142,6 +142,10 @@ class AvatarComponent {
         if (!label || this._image) {
             return null;
         }
+        return this._generateAbbreviation(label);
+    }
+    /** @hidden Get the abbrevation string */
+    _generateAbbreviation(label) {
         const maxLettersCount = 3;
         const firstLetters = label.split(' ').map((word) => word.charAt(0));
         const abbreviate = firstLetters.join('');
@@ -182,10 +186,9 @@ class AvatarComponent {
             for (let i = 0; i < options.length; i++) {
                 const option = options[i];
                 if (option === ALTER_ICON_OPTIONS.CONTENT) {
-                    const contentEl = this._content.nativeElement;
-                    const contentValue = contentEl.innerText.trim()[0];
+                    const contentValue = this._content.nativeElement.innerText;
                     if (contentValue && contentValue !== '') {
-                        this.abbreviate = contentEl.innerText.trim()[0];
+                        this.abbreviate = this._generateAbbreviation(contentValue);
                         break;
                     }
                     continue;
@@ -193,7 +196,7 @@ class AvatarComponent {
                 if (option === ALTER_ICON_OPTIONS.ALT) {
                     const altValue = this.elementRef().nativeElement.getAttribute('alt');
                     if (altValue && altValue !== '') {
-                        this.abbreviate = altValue.trim()[0];
+                        this.abbreviate = this._generateAbbreviation(altValue);
                         break;
                     }
                     continue;

package/fesm2020/fundamental-ngx-core-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-avatar.mjs","sources":["../../../../libs/core/src/lib/avatar/avatar.component.ts","../../../../libs/core/src/lib/avatar/avatar.component.html","../../../../libs/core/src/lib/avatar/avatar.module.ts","../../../../libs/core/src/lib/avatar/fundamental-ngx-core-avatar.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnInit,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport {\n    ANY_LANGUAGE_LETTERS_REGEX,\n    ColorAccent,\n    Size,\n    applyCssClass,\n    getRandomColorAccent,\n    CssClassBuilder\n} from '@fundamental-ngx/core/utils';\n\nlet avatarUniqueId = 0;\n\nconst ALTER_ICON_OPTIONS = {\n    CONTENT: 'content',\n    ALT: 'alt',\n    BACKUP: 'backup',\n    DEFAULT_ICON: 'default-icon'\n};\n\n@Component({\n    // TODO to be discussed\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'fd-avatar',\n    templateUrl: './avatar.component.html',\n    styleUrls: ['./avatar.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class AvatarComponent implements OnChanges, OnInit, CssClassBuilder {\n    /** User's custom classes */\n    @Input()\n    class: string;\n\n    /** Id of the Avatar. */\n    @Input()\n    @HostBinding('attr.id')\n    id = `fd-avatar-${avatarUniqueId++}`;\n\n    /** Aria-label for Avatar. */\n    @Input()\n    @HostBinding('attr.aria-label')\n    ariaLabel: string = null;\n\n    /** Aria-Labelledby for element describing Avatar. */\n    @Input()\n    @HostBinding('attr.aria-labelledby')\n    ariaLabelledby: string = null;\n\n    /** Localized text for label */\n    @Input()\n    set label(value: string) {\n        this.ariaLabel = value || null;\n        this.abbreviate = this._getAbbreviate(value);\n    }\n\n    /** The size of the Avatar. Options include: *xs*, *s*, *m*, *l* and *xl*. */\n    @Input() size: Size = 'l';\n\n    /** The glyph name. */\n    @Input() glyph: string = null;\n\n    /** The glyph name for zoom icon. */\n    @Input() zoomGlyph: string = null;\n\n    /** Whether or not to apply a circle style to the Avatar. */\n    @Input() circle = false;\n\n    /** Whether or not to apply a transparent style to the Avatar. */\n    @Input() transparent = false;\n\n    /** Whether or not to apply background size contain style to the Avatar */\n    @Input() contain = false;\n\n    /** Whether or not to apply a placeholder background style to the Avatar. */\n    @Input() placeholder = false;\n\n    /** Whether or not to apply a tile background style to the Avatar. */\n    @Input() tile = false;\n\n    /** Whether or not to apply a border to the Avatar. */\n    @Input() border = false;\n\n    /** A number from 1 to 10 representing the background color of the Avatar. */\n    @Input() colorAccent: ColorAccent = null;\n\n    /** Whether or not to apply random background color to the Avatar. */\n    @Input() random = false;\n\n    /**\n     * @deprecated\n     * Deprecated according to Rename `backgroundImage` to `image`\n     * */\n    /** Background image url. */\n    @Input()\n    set backgroundImage(value: string) {\n        this._setImage(value);\n    }\n\n    /** Background image resource: url or base64. */\n    @Input()\n    set image(value: string) {\n        this._setImage(value);\n    }\n    get image(): string {\n        return this._image;\n    }\n\n    @Input()\n    set alterIcon(value: string) {\n        this._alterIcon = value;\n    }\n    get alterIcon(): string {\n        return this._alterIcon;\n    }\n\n    @Input()\n    set backupImage(value: string) {\n        this._backupImage = value;\n    }\n    get backupImage(): string {\n        return this._backupImage;\n    }\n\n    /** @hidden */\n    @HostBinding('style.background-image')\n    get bgImage(): string {\n        return this._bgImage;\n    }\n\n    /** @hidden */\n    @HostBinding('attr.role')\n    get role(): string {\n        return this.zoomGlyph ? 'button' : 'img';\n    }\n\n    /** @hidden */\n    @ViewChild('content')\n    set content(value: ElementRef) {\n        this._content = value;\n    }\n\n    /** @hidden */\n    abbreviate: string = null;\n\n    /** @hidden */\n    private _image: string = null;\n\n    /** @hidden */\n    private _alterIcon: string = null;\n\n    /** @hidden */\n    private _content: ElementRef = null;\n\n    /** @hidden */\n    private _backupImage: string = null;\n\n    /** @hidden */\n    private _bgImage: string = null;\n\n    /** If a default placeholder should be displayed */\n    get showDefault(): boolean {\n        return !this.abbreviate && !this._image && !this.glyph;\n    }\n\n    /** @hidden */\n    constructor(private _elementRef: ElementRef, private _cdr: ChangeDetectorRef) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return [\n            'fd-avatar',\n            this.size ? `fd-avatar--${this.size}` : '',\n            this.colorAccent && !this.random ? `fd-avatar--accent-color-${this.colorAccent}` : '',\n            this.random ? `fd-avatar--accent-color-${getRandomColorAccent()}` : '',\n            this.circle ? 'fd-avatar--circle' : '',\n            this.border ? 'fd-avatar--border' : '',\n            this.transparent ? 'fd-avatar--transparent' : '',\n            this.contain ? 'fd-avatar--background-contain' : '',\n            this.placeholder ? 'fd-avatar--placeholder' : '',\n            this.tile ? 'fd-avatar--tile' : '',\n            this.class\n        ];\n    }\n\n    /** @hidden */\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n\n    /** @hidden Get an abbreviate from the label or return null if not fit requirements */\n    private _getAbbreviate(label: string): string | null {\n        if (!label || this._image) {\n            return null;\n        }\n\n        const maxLettersCount = 3;\n        const firstLetters = label.split(' ').map((word) => word.charAt(0));\n        const abbreviate = firstLetters.join('');\n\n        if (firstLetters.length > maxLettersCount || !abbreviate.match(ANY_LANGUAGE_LETTERS_REGEX)) {\n            return null;\n        }\n\n        return abbreviate;\n    }\n\n    /** @hidden */\n    private _setImage(value: string): void {\n        this._image = value;\n\n        if (value) {\n            this._verifyImageUrl(value, (): void => {}, this._onErrorCallback);\n        } else {\n            this._bgImage = null;\n        }\n    }\n\n    /** @hidden */\n    private _verifyImageUrl(srcValue: string, onLoadCallback: () => void, onErrorCallback: () => void): void {\n        const img = new Image();\n        img.onload = onLoadCallback.bind(this);\n        img.onerror = onErrorCallback.bind(this);\n        img.src = srcValue;\n        this._assignBgImage(srcValue);\n    }\n\n    /** @hidden */\n    private _assignBgImage(srcValue: string): void {\n        this._bgImage = `url(${srcValue})`;\n    }\n\n    /** @hidden */\n    private _onErrorCallback(): void {\n        if (!this._alterIcon) {\n            this._showDefaultIcon();\n        } else {\n            const options = this._alterIcon.split('|');\n            for (let i = 0; i < options.length; i++) {\n                const option = options[i];\n\n                if (option === ALTER_ICON_OPTIONS.CONTENT) {\n                    const contentEl = this._content.nativeElement;\n                    const contentValue = contentEl.innerText.trim()[0];\n                    if (contentValue && contentValue !== '') {\n                        this.abbreviate = contentEl.innerText.trim()[0];\n                        break;\n                    }\n\n                    continue;\n                }\n\n                if (option === ALTER_ICON_OPTIONS.ALT) {\n                    const altValue = this.elementRef().nativeElement.getAttribute('alt');\n                    if (altValue && altValue !== '') {\n                        this.abbreviate = altValue.trim()[0];\n                        break;\n                    }\n\n                    continue;\n                }\n\n                if (option === ALTER_ICON_OPTIONS.BACKUP) {\n                    if (this._backupImage && this._backupImage !== '') {\n                        // Check if backupImage can be loaded successfully\n                        // If not, set default user icon\n                        this._verifyImageUrl(\n                            this._backupImage,\n                            () => {\n                                this._assignBgImage(this._backupImage);\n                                this._cdr.detectChanges();\n                            },\n                            () => {\n                                this._showDefaultIcon();\n                                this._cdr.detectChanges();\n                            }\n                        );\n                        break;\n                    }\n\n                    continue;\n                }\n\n                if (option === ALTER_ICON_OPTIONS.DEFAULT_ICON) {\n                    this._showDefaultIcon();\n                    break;\n                }\n\n                this._showDefaultIcon();\n            }\n        }\n\n        this._cdr.detectChanges();\n    }\n\n    /** @hidden */\n    private _showDefaultIcon(): void {\n        this.abbreviate = null;\n        this._image = null;\n        this.glyph = null;\n    }\n}\n","{{ abbreviate }}\n\n<i\n    *ngIf=\"zoomGlyph\"\n    role=\"presentation\"\n    class=\"fd-avatar__zoom-icon\"\n    [class]=\"zoomGlyph ? 'sap-icon--' + zoomGlyph : ''\"\n>\n</i>\n<i *ngIf=\"glyph\" class=\"fd-avatar__icon\" [class]=\"glyph ? ' sap-icon--' + glyph : ''\" role=\"presentation\"> </i>\n<i *ngIf=\"showDefault\" class=\"fd-avatar__icon sap-icon--person-placeholder\" role=\"presentation\"> </i>\n<div #content style=\"display: none\">\n    <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { AvatarComponent } from './avatar.component';\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [AvatarComponent],\n    declarations: [AvatarComponent]\n})\nexport class AvatarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-avatar.mjs","sources":["../../../../libs/core/src/lib/avatar/avatar.component.ts","../../../../libs/core/src/lib/avatar/avatar.component.html","../../../../libs/core/src/lib/avatar/avatar.module.ts","../../../../libs/core/src/lib/avatar/fundamental-ngx-core-avatar.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnInit,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport {\n    ANY_LANGUAGE_LETTERS_REGEX,\n    ColorAccent,\n    Size,\n    applyCssClass,\n    getRandomColorAccent,\n    CssClassBuilder\n} from '@fundamental-ngx/core/utils';\n\nlet avatarUniqueId = 0;\n\nconst ALTER_ICON_OPTIONS = {\n    CONTENT: 'content',\n    ALT: 'alt',\n    BACKUP: 'backup',\n    DEFAULT_ICON: 'default-icon'\n};\n\n@Component({\n    // TODO to be discussed\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'fd-avatar',\n    templateUrl: './avatar.component.html',\n    styleUrls: ['./avatar.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class AvatarComponent implements OnChanges, OnInit, CssClassBuilder {\n    /** User's custom classes */\n    @Input()\n    class: string;\n\n    /** Id of the Avatar. */\n    @Input()\n    @HostBinding('attr.id')\n    id = `fd-avatar-${avatarUniqueId++}`;\n\n    /** Aria-label for Avatar. */\n    @Input()\n    @HostBinding('attr.aria-label')\n    ariaLabel: string = null;\n\n    /** Aria-Labelledby for element describing Avatar. */\n    @Input()\n    @HostBinding('attr.aria-labelledby')\n    ariaLabelledby: string = null;\n\n    /** Localized text for label */\n    @Input()\n    set label(value: string) {\n        this.ariaLabel = value || null;\n        this.abbreviate = this._getAbbreviate(value);\n    }\n\n    /** The size of the Avatar. Options include: *xs*, *s*, *m*, *l* and *xl*. */\n    @Input() size: Size = 'l';\n\n    /** The glyph name. */\n    @Input() glyph: string = null;\n\n    /** The glyph name for zoom icon. */\n    @Input() zoomGlyph: string = null;\n\n    /** Whether or not to apply a circle style to the Avatar. */\n    @Input() circle = false;\n\n    /** Whether or not to apply a transparent style to the Avatar. */\n    @Input() transparent = false;\n\n    /** Whether or not to apply background size contain style to the Avatar */\n    @Input() contain = false;\n\n    /** Whether or not to apply a placeholder background style to the Avatar. */\n    @Input() placeholder = false;\n\n    /** Whether or not to apply a tile background style to the Avatar. */\n    @Input() tile = false;\n\n    /** Whether or not to apply a border to the Avatar. */\n    @Input() border = false;\n\n    /** A number from 1 to 10 representing the background color of the Avatar. */\n    @Input() colorAccent: ColorAccent = null;\n\n    /** Whether or not to apply random background color to the Avatar. */\n    @Input() random = false;\n\n    /**\n     * @deprecated\n     * Deprecated according to Rename `backgroundImage` to `image`\n     * */\n    /** Background image url. */\n    @Input()\n    set backgroundImage(value: string) {\n        this._setImage(value);\n    }\n\n    /** Background image resource: url or base64. */\n    @Input()\n    set image(value: string) {\n        this._setImage(value);\n    }\n    get image(): string {\n        return this._image;\n    }\n\n    @Input()\n    set alterIcon(value: string) {\n        this._alterIcon = value;\n    }\n    get alterIcon(): string {\n        return this._alterIcon;\n    }\n\n    @Input()\n    set backupImage(value: string) {\n        this._backupImage = value;\n    }\n    get backupImage(): string {\n        return this._backupImage;\n    }\n\n    /** @hidden */\n    @HostBinding('style.background-image')\n    get bgImage(): string {\n        return this._bgImage;\n    }\n\n    /** @hidden */\n    @HostBinding('attr.role')\n    get role(): string {\n        return this.zoomGlyph ? 'button' : 'img';\n    }\n\n    /** @hidden */\n    @ViewChild('content')\n    set content(value: ElementRef) {\n        this._content = value;\n    }\n\n    /** @hidden */\n    abbreviate: string = null;\n\n    /** @hidden */\n    private _image: string = null;\n\n    /** @hidden */\n    private _alterIcon: string = null;\n\n    /** @hidden */\n    private _content: ElementRef = null;\n\n    /** @hidden */\n    private _backupImage: string = null;\n\n    /** @hidden */\n    private _bgImage: string = null;\n\n    /** If a default placeholder should be displayed */\n    get showDefault(): boolean {\n        return !this.abbreviate && !this._image && !this.glyph;\n    }\n\n    /** @hidden */\n    constructor(private _elementRef: ElementRef, private _cdr: ChangeDetectorRef) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return [\n            'fd-avatar',\n            this.size ? `fd-avatar--${this.size}` : '',\n            this.colorAccent && !this.random ? `fd-avatar--accent-color-${this.colorAccent}` : '',\n            this.random ? `fd-avatar--accent-color-${getRandomColorAccent()}` : '',\n            this.circle ? 'fd-avatar--circle' : '',\n            this.border ? 'fd-avatar--border' : '',\n            this.transparent ? 'fd-avatar--transparent' : '',\n            this.contain ? 'fd-avatar--background-contain' : '',\n            this.placeholder ? 'fd-avatar--placeholder' : '',\n            this.tile ? 'fd-avatar--tile' : '',\n            this.class\n        ];\n    }\n\n    /** @hidden */\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n\n    /** @hidden Get an abbreviate from the label or return null if not fit requirements */\n    private _getAbbreviate(label: string): string | null {\n        if (!label || this._image) {\n            return null;\n        }\n\n        return this._generateAbbreviation(label);\n    }\n\n    /** @hidden Get the abbrevation string */\n    private _generateAbbreviation(label: string): string | null {\n        const maxLettersCount = 3;\n        const firstLetters = label.split(' ').map((word) => word.charAt(0));\n        const abbreviate = firstLetters.join('');\n\n        if (firstLetters.length > maxLettersCount || !abbreviate.match(ANY_LANGUAGE_LETTERS_REGEX)) {\n            return null;\n        }\n\n        return abbreviate;\n    }\n\n    /** @hidden */\n    private _setImage(value: string): void {\n        this._image = value;\n\n        if (value) {\n            this._verifyImageUrl(value, (): void => {}, this._onErrorCallback);\n        } else {\n            this._bgImage = null;\n        }\n    }\n\n    /** @hidden */\n    private _verifyImageUrl(srcValue: string, onLoadCallback: () => void, onErrorCallback: () => void): void {\n        const img = new Image();\n        img.onload = onLoadCallback.bind(this);\n        img.onerror = onErrorCallback.bind(this);\n        img.src = srcValue;\n        this._assignBgImage(srcValue);\n    }\n\n    /** @hidden */\n    private _assignBgImage(srcValue: string): void {\n        this._bgImage = `url(${srcValue})`;\n    }\n\n    /** @hidden */\n    private _onErrorCallback(): void {\n        if (!this._alterIcon) {\n            this._showDefaultIcon();\n        } else {\n            const options = this._alterIcon.split('|');\n            for (let i = 0; i < options.length; i++) {\n                const option = options[i];\n\n                if (option === ALTER_ICON_OPTIONS.CONTENT) {\n                    const contentValue = this._content.nativeElement.innerText;\n                    if (contentValue && contentValue !== '') {\n                        this.abbreviate = this._generateAbbreviation(contentValue);\n                        break;\n                    }\n\n                    continue;\n                }\n\n                if (option === ALTER_ICON_OPTIONS.ALT) {\n                    const altValue = this.elementRef().nativeElement.getAttribute('alt');\n                    if (altValue && altValue !== '') {\n                        this.abbreviate = this._generateAbbreviation(altValue);\n                        break;\n                    }\n\n                    continue;\n                }\n\n                if (option === ALTER_ICON_OPTIONS.BACKUP) {\n                    if (this._backupImage && this._backupImage !== '') {\n                        // Check if backupImage can be loaded successfully\n                        // If not, set default user icon\n                        this._verifyImageUrl(\n                            this._backupImage,\n                            () => {\n                                this._assignBgImage(this._backupImage);\n                                this._cdr.detectChanges();\n                            },\n                            () => {\n                                this._showDefaultIcon();\n                                this._cdr.detectChanges();\n                            }\n                        );\n                        break;\n                    }\n\n                    continue;\n                }\n\n                if (option === ALTER_ICON_OPTIONS.DEFAULT_ICON) {\n                    this._showDefaultIcon();\n                    break;\n                }\n\n                this._showDefaultIcon();\n            }\n        }\n\n        this._cdr.detectChanges();\n    }\n\n    /** @hidden */\n    private _showDefaultIcon(): void {\n        this.abbreviate = null;\n        this._image = null;\n        this.glyph = null;\n    }\n}\n","{{ abbreviate }}\n\n<i\n    *ngIf=\"zoomGlyph\"\n    role=\"presentation\"\n    class=\"fd-avatar__zoom-icon\"\n    [class]=\"zoomGlyph ? 'sap-icon--' + zoomGlyph : ''\"\n>\n</i>\n<i *ngIf=\"glyph\" class=\"fd-avatar__icon\" [class]=\"glyph ? ' sap-icon--' + glyph : ''\" role=\"presentation\"> </i>\n<i *ngIf=\"showDefault\" class=\"fd-avatar__icon sap-icon--person-placeholder\" role=\"presentation\"> </i>\n<div #content style=\"display: none\">\n    <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { AvatarComponent } from './avatar.component';\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [AvatarComponent],\n    declarations: [AvatarComponent]\n})\nexport class AvatarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/fundamental-ngx-core-checkbox.mjs

@@ -1,24 +1,21 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Attribute, Optional, Inject, ViewChild, Input, HostBinding, Output, NgModule } from '@angular/core';
-import * as i4 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i1 from '@angular/cdk/platform';
-import * as i2 from '@fundamental-ngx/core/utils';
-import { KeyUtil, LIST_ITEM_COMPONENT } from '@fundamental-ngx/core/utils';
+import * as i1 from '@fundamental-ngx/core/utils';
+import { LIST_ITEM_COMPONENT } from '@fundamental-ngx/core/utils';
 import equal from 'fast-deep-equal';
-import { SPACE } from '@angular/cdk/keycodes';
 import { Subscription } from 'rxjs';
 
 let checkboxUniqueId = 0;
 class CheckboxComponent {
     /** @hidden */
-    constructor(elementRef, tabIndexValue = 0, _platform, _changeDetectorRef, _contentDensityService, _listItemComponent) {
+    constructor(elementRef, tabIndexValue = 0, _changeDetectorRef, renderer, _contentDensityService, _listItemComponent) {
         this.elementRef = elementRef;
         this.tabIndexValue = tabIndexValue;
-        this._platform = _platform;
         this._changeDetectorRef = _changeDetectorRef;
+        this.renderer = renderer;
         this._contentDensityService = _contentDensityService;
         this._listItemComponent = _listItemComponent;
         /** Sets the `aria-label` attribute to the element. */
@@ -27,8 +24,10 @@ class CheckboxComponent {
         this.ariaLabelledBy = null;
         /** Sets [id] property of input, binds input with input label using [for] property. */
         this.inputId = `fd-checkbox-${checkboxUniqueId++}`;
+        /** Enables controls third state. */
+        this.tristate = false;
         /** Allows to prevent user from manually selecting controls third state. */
-        this.tristateSelectable = true;
+        this.tristateSelectable = false;
         /** If it is mandatory field */
         this.required = false;
         /** @hidden */
@@ -47,11 +46,26 @@ class CheckboxComponent {
         this.onValueChange = () => { };
         this.tabIndexValue = tabIndexValue;
     }
+    /** Current selection state of the checkbox component */
+    set value(value) {
+        this.writeValue(value);
+    }
+    get value() {
+        return this.checkboxValue;
+    }
     /** Sets values returned by control. */
     // eslint-disable-next-line @angular-eslint/no-input-rename
     set _values(checkboxValues) {
         this.values = { ...this.values, ...checkboxValues };
     }
+    /** @hidden Used to define if control is in 'indeterminate' state.*/
+    get isIndeterminate() {
+        return this.checkboxState === 'indeterminate';
+    }
+    /** @hidden Used to define if control is in 'checked' / 'unchecked' state. */
+    get isChecked() {
+        return this.checkboxState === 'checked' || this.checkboxState === 'force-checked';
+    }
     /** @hidden */
     ngOnInit() {
         if (this.compact === undefined && this._contentDensityService) {
@@ -65,18 +79,11 @@ class CheckboxComponent {
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
     }
-    /** @hidden Used to define if control is in 'indeterminate' state.*/
-    get isIndeterminate() {
-        return this.checkboxState === 'indeterminate';
-    }
-    /** @hidden Used to define if control is in 'checked' / 'unchecked' state. */
-    get isChecked() {
-        return this.checkboxState === 'checked' || this.checkboxState === 'force-checked';
-    }
-    /** @hidden ControlValueAccessor interface
+    /**
+     * @hidden ControlValueAccessor interface
      * - sets new control value
      * - updates control state
-     * */
+     */
     writeValue(value) {
         this.checkboxValue = value;
         this._setState();
@@ -86,10 +93,6 @@ class CheckboxComponent {
     registerOnChange(fn) {
         this.onValueChange = fn;
     }
-    /** @hidden prevent event from propagating */
-    muteKey(event) {
-        event.stopPropagation();
-    }
     /** @hidden ControlValueAccessor interface method - sets onTouched callback.*/
     registerOnTouched(fn) {
         this.onTouched = fn;
@@ -99,19 +102,9 @@ class CheckboxComponent {
         this.disabled = disabled;
         this._detectChanges();
     }
-    /** @hidden Updates checkbox Indeterminate state on mouse click on IE11 */
-    checkByClick(event) {
-        this._nextValueEvent(true, event);
-        this.muteKey(event);
-    }
-    /** @hidden Updates checkbox Indeterminate state on space bar key on IE11 */
-    checkByKey(event) {
-        if (this._isSpaceBarEvent(event) && this._platform.TRIDENT) {
-            this._nextValueEvent();
-            this.muteKey(event);
-        }
-    }
-    /** @hidden Based on current control state:
+    /**
+     * @hidden
+     * Based on current control state:
      * - sets next control value
      * - emits new control value
      * - updates control state based on new control value
@@ -128,7 +121,7 @@ class CheckboxComponent {
             case 'indeterminate':
             case 'force-checked':
                 this.checkboxValue = this.values.trueValue;
-                this.inputLabel.nativeElement.checked = true;
+                this.renderer.setProperty(this.inputElement.nativeElement, 'checked', 'true');
                 break;
             default:
                 this.checkboxValue =
@@ -139,24 +132,33 @@ class CheckboxComponent {
         this.onValueChange(this.checkboxValue);
         this._detectChanges();
     }
-    /** Space event should be handled separately, when used inside list component and in firefox browser */
-    handleInputKeyUp(event) {
-        event.stopPropagation();
-        if (this._listItemComponent && this._platform.FIREFOX && KeyUtil.isKeyCode(event, SPACE)) {
-            event.preventDefault();
-        }
-    }
-    /** Handles blur event */
-    onBlur() {
+    /** @hidden handles blur event */
+    _onBlur() {
         if (typeof this.onTouched === 'function') {
             this.onTouched();
         }
         this.focusChange.emit(false);
     }
-    /** Handles focus event */
-    onFocus() {
+    /** @hidden handles focus event */
+    _onFocus() {
         this.focusChange.emit(true);
     }
+    /** @hidden handles click on the label associated with native checkbox input */
+    _onLabelClick(event) {
+        // We have to stop propagation for click events on the input label.
+        // By default, when a user clicks on a label element, a generated click event will be
+        // dispatched on the associated input element. This will lead to duplicated "click" event dispatched from the component
+        event.stopPropagation();
+    }
+    /** @hidden handles click on the native checkbox input */
+    _onInputClick(event) {
+        // When there's a click event dispatched from the input, we have to catch it, process and then re-dispatch it further.
+        // This is needed in order to set the value to the component before any external listeners will receive it.
+        // Otherwise checkbox might be out of sync.
+        event.stopPropagation();
+        this.nextValue();
+        this.elementRef.nativeElement.dispatchEvent(new PointerEvent(event.type, event));
+    }
     /** @hidden Based on current control value sets new control state. */
     _setState() {
         if (equal(this.checkboxValue, this.values.trueValue)) {
@@ -171,28 +173,6 @@ class CheckboxComponent {
         else if (!this.checkboxValue) {
             this.checkboxState = 'unchecked';
         }
-        this._previousState = this.checkboxState;
-    }
-    /** @hidden */
-    _nextValueEvent(triggeredByClick, event) {
-        if (this._platform.TRIDENT &&
-            this._previousState === 'indeterminate' &&
-            this.checkboxState === 'indeterminate') {
-            this.checkboxState = 'force-checked';
-            this._detectChanges();
-            /** Prevents from keeping the old value */
-            if (triggeredByClick) {
-                this.nextValue('force-checked');
-                if (event) {
-                    this.muteKey(event);
-                    event.preventDefault();
-                }
-            }
-        }
-    }
-    /** @hidden Determines event source based on key code */
-    _isSpaceBarEvent(event) {
-        return KeyUtil.isKeyCode(event, SPACE);
     }
     /** Method to trigger change detection in component */
     _detectChanges() {
@@ -201,14 +181,14 @@ class CheckboxComponent {
         }
     }
 }
-CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ElementRef }, { token: 'tabIndexValue', attribute: true }, { token: i1.Platform }, { token: i0.ChangeDetectorRef }, { token: i2.ContentDensityService, optional: true }, { token: LIST_ITEM_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CheckboxComponent, selector: "fd-checkbox", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", title: "title", inputId: "inputId", state: "state", name: "name", label: "label", disabled: "disabled", compact: "compact", tristate: "tristate", tristateSelectable: "tristateSelectable", labelClass: "labelClass", required: "required", _values: ["values", "_values"] }, outputs: { focusChange: "focusChange" }, host: { properties: { "attr.tabindex": "-1", "style.position": "this.position", "style.outline": "this.outline" } }, providers: [
+CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ElementRef }, { token: 'tabIndexValue', attribute: true }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.ContentDensityService, optional: true }, { token: LIST_ITEM_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CheckboxComponent, selector: "fd-checkbox", inputs: { ariaLabel: "ariaLabel", value: "value", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", title: "title", inputId: "inputId", state: "state", name: "name", label: "label", disabled: "disabled", compact: "compact", tristate: "tristate", tristateSelectable: "tristateSelectable", labelClass: "labelClass", required: "required", _values: ["values", "_values"] }, outputs: { focusChange: "focusChange" }, host: { properties: { "attr.tabindex": "-1", "style.position": "this.position", "style.outline": "this.outline" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => CheckboxComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "inputLabel", first: true, predicate: ["inputLabel"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<input\n    #inputLabel\n    type=\"checkbox\"\n    class=\"fd-checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"isIndeterminate\"\n    [attr.tabindex]=\"tabIndexValue\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-required]=\"required\"\n    [class.fd-checkbox--compact]=\"compact\"\n    [class]=\"state ? 'is-' + state : ''\"\n    [ngModel]=\"isChecked\"\n    (ngModelChange)=\"nextValue()\"\n    (keydown)=\"checkByKey($event)\"\n    (keyup)=\"handleInputKeyUp($event)\"\n    (click)=\"$event.stopPropagation()\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n/>\n\n<label\n    class=\"fd-checkbox__label\"\n    #labelElement\n    [for]=\"inputId\"\n    [class]=\"labelClass\"\n    [attr.title]=\"title\"\n    [class.fd-checkbox__label--compact]=\"compact\"\n    [class.fd-checkbox__label--required]=\"required\"\n    (click)=\"checkByClick($event)\"\n>\n    <div class=\"fd-checkbox__label-container\">\n        <ng-container *ngIf=\"label\">\n            <span class=\"fd-checkbox__text\">\n                {{ label }}\n            </span>\n        </ng-container>\n\n        <ng-container *ngIf=\"!label\">\n            <span class=\"fd-checkbox__text\">\n                <ng-content></ng-content>\n            </span>\n        </ng-container>\n    </div>\n</label>\n", styles: ["/*!\n * Fundamental Library Styles v0.21.0-rc.92\n * Copyright (c) 2022 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.fd-checkbox\n*/.fd-checkbox{position:absolute;opacity:.0001}.fd-checkbox{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#32363a;color:var(--sapField_TextColor, #32363a);background-color:#fff;background-color:var(--sapField_Background, #fff);border-style:solid;border-width:.0625rem;border-width:var(--sapField_BorderWidth, .0625rem);border-color:#89919a;border-color:var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem);outline:0;appearance:none;-webkit-appearance:none;-moz-appearance:none}.fd-checkbox:after,.fd-checkbox:before{box-sizing:inherit;font-size:inherit}.fd-checkbox::placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor, #74777a)}.fd-checkbox::selection{color:#fff;color:var(--sapContent_ContrastTextColor, #fff);background-color:#0854a0;background-color:var(--sapSelectedColor, #0854a0)}.fd-checkbox.is-hover,.fd-checkbox:hover{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-checkbox.is-success{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e);border-width:.0625rem;border-width:var(--sapField_SuccessBorderWidth, .0625rem);border-style:solid;border-style:var(--sapField_SuccessBorderStyle, solid)}.fd-checkbox.is-success.is-hover,.fd-checkbox.is-success:hover{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-error{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00);border-width:.125rem;border-width:var(--sapField_InvalidBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InvalidBorderStyle, solid)}.fd-checkbox.is-error.is-hover,.fd-checkbox.is-error:hover{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-alert,.fd-checkbox.is-warning{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c);border-width:.125rem;border-width:var(--sapField_WarningBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_WarningBorderStyle, solid)}.fd-checkbox.is-alert.is-hover,.fd-checkbox.is-alert:hover,.fd-checkbox.is-warning.is-hover,.fd-checkbox.is-warning:hover{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-checkbox.is-information{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1);border-width:.125rem;border-width:var(--sapField_InformationBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InformationBorderStyle, solid)}.fd-checkbox.is-information.is-hover,.fd-checkbox.is-information:hover{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5;box-shadow:none;outline-offset:-.1875rem;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth, .0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor, #000);outline-style:dotted;outline-style:var(--sapContent_FocusStyle, dotted)}.fd-checkbox.is-alert,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-warning{border-width:.125rem;border-style:solid;border-style:var(--fdInput_State_Border_Type, solid)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus,.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus,.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus,.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{z-index:5;box-shadow:none;outline-offset:-.25rem}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{pointer-events:none;opacity:.4;opacity:var(--sapContent_DisabledOpacity, .4)}.fd-checkbox.is-disabled::placeholder,.fd-checkbox:disabled::placeholder,.fd-checkbox[aria-disabled=true]::placeholder{color:transparent}.fd-checkbox.is-readonly,.fd-checkbox[aria-readonly=true],.fd-checkbox[readonly]{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-checkbox.is-readonly::placeholder,.fd-checkbox[aria-readonly=true]::placeholder,.fd-checkbox[readonly]::placeholder{color:transparent}.fd-checkbox,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-success,.fd-checkbox.is-warning{border-style:initial}.fd-checkbox__label{line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:-moz-fit-content;width:fit-content;position:relative;max-width:100%;font-size:.875rem;font-size:var(--sapFontSize, .875rem);color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin-right:.5rem;cursor:text;align-self:flex-start;cursor:pointer;line-height:1rem;padding:.6875rem;display:flex;align-items:center}.fd-checkbox__label:after,.fd-checkbox__label:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__label[dir=rtl],[dir=rtl] .fd-checkbox__label{margin-left:.5rem;margin-right:0}.fd-checkbox__label:before{content:\"\";height:1.375rem;width:1.375rem;min-width:1.375rem;font-size:1rem;font-size:var(--sapFontLargeSize, 1rem);display:inline-flex;justify-content:center;align-items:center;font-family:SAP-icons;background-color:#fff;background-color:var(--sapField_Background, #fff);color:#0854a0;color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));border:.0625rem solid #89919a;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem)}.fd-checkbox__label:after{padding-left:.125rem;position:relative}.fd-checkbox__label[dir=rtl]:after,[dir=rtl] .fd-checkbox__label:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label.is-hover:before,.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-checkbox__label:focus{outline:0}.fd-checkbox__label--required .fd-checkbox__text,.fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:.5rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl],.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:0;padding-left:.5rem}.fd-checkbox__label--required .fd-checkbox__text:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{content:\"*\";font-size:.875rem;font-size:var(--sapFontSize, .875rem);font-weight:700;color:#ce3b3b;color:var(--sapField_RequiredColor, #ce3b3b);position:absolute;padding-left:.125rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl]:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl]:after,[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text:after,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label-container{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:100%;height:1rem;pointer-events:none}.fd-checkbox__label-container:after,.fd-checkbox__label-container:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:.6875rem;margin-right:0}.fd-checkbox__text:after,.fd-checkbox__text:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__text{margin-right:.6875rem;margin-left:0}.fd-checkbox:checked+.fd-checkbox__label:before{content:\"\\e05b\"}.fd-checkbox:indeterminate+.fd-checkbox__label:after{content:\"\";width:.75rem;height:.75rem;background-color:#0854a0;background-color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));position:absolute;margin-left:.3125rem}.fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{content:\"\";width:.5rem;height:.5rem;background-color:#0854a0;background-color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));position:absolute;margin-left:.25rem}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label:after{margin-left:0;margin-right:.3125rem}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label--compact:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{margin-left:0;margin-right:.25rem}.fd-checkbox.is-alert+.fd-checkbox__label:before,.fd-checkbox.is-warning+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border:.125rem solid #df6e0c;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_WarningColor, #df6e0c);color:#32363a;color:var(--sapField_TextColor, #32363a)}.fd-checkbox.is-alert+.fd-checkbox__label:after,.fd-checkbox.is-warning+.fd-checkbox__label:after{background-color:#32363a;background-color:var(--sapField_TextColor, #32363a)}.fd-checkbox.is-alert+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-alert+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-alert+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-alert+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-alert+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-alert+.fd-checkbox__label:hover[aria-disabled=true],.fd-checkbox.is-warning+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-warning+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-warning+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-warning+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-checkbox.is-alert+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-alert+.fd-checkbox__label:hover:before,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-warning+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-error+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border:.125rem solid #b00;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_InvalidColor, #b00);color:#b00;color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label:after{background-color:#b00;background-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-error+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-error+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-error+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-error+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-error+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-error+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-success+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border:.0625rem solid #107e3e;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_SuccessColor, #107e3e);color:#107e3e;color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label:after{background-color:#107e3e;background-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-success+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-success+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-success+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-success+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-success+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-success+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-information+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border:.125rem solid #0a6ed1;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_InformationColor, #0a6ed1);color:#0a6ed1;color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label:after{background-color:#0a6ed1;background-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-information+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-information+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-information+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-information+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-information+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-information+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-readonly+.fd-checkbox__label:before,.fd-checkbox[readonly]+.fd-checkbox__label:before{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border:.0625rem solid #89919a;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_ReadOnly_BorderColor, #89919a);color:#6a6d70;color:var(--sapContent_NonInteractiveIconColor, #6a6d70)}.fd-checkbox.is-readonly+.fd-checkbox__label:after,.fd-checkbox[readonly]+.fd-checkbox__label:after{background-color:#6a6d70;background-color:var(--sapContent_NonInteractiveIconColor, #6a6d70)}.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-readonly+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-readonly+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-readonly+.fd-checkbox__label:hover[aria-disabled=true],.fd-checkbox[readonly]+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover:disabled,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox[readonly]+.fd-checkbox__label:hover.is-disabled,.fd-checkbox[readonly]+.fd-checkbox__label:hover:disabled,.fd-checkbox[readonly]+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-readonly+.fd-checkbox__label:hover:before,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover:before,.fd-checkbox[readonly]+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5}.fd-checkbox.is-focus+.fd-checkbox__label,.fd-checkbox:focus+.fd-checkbox__label{outline:.0625rem dotted #000;outline:var(--sapContent_FocusWidth, .0625rem) var(--sapContent_FocusStyle, dotted) var(--sapContent_FocusColor, #000);outline-offset:-.5625rem}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:.0001}.fd-checkbox.is-disabled+.fd-checkbox__label,.fd-checkbox:disabled+.fd-checkbox__label,.fd-checkbox[aria-disabled=true]+.fd-checkbox__label{pointer-events:none;opacity:.4}.fd-checkbox--compact>.fd-checkbox__text{margin-left:.5rem}.fd-checkbox--compact>.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox--compact>.fd-checkbox__text{margin-left:0;margin-right:.5rem}.fd-checkbox--compact+.fd-checkbox__label{padding:.5rem}.fd-checkbox--compact+.fd-checkbox__label:before{font-size:.75rem;font-size:var(--sapFontSmallSize, .75rem);height:1rem;width:1rem;min-width:1rem;margin-left:0}.fd-checkbox--compact+.fd-checkbox__label.is-empty,.fd-checkbox--compact+.fd-checkbox__label:empty{padding:.5rem;margin:0}.fd-checkbox--compact+.fd-checkbox__label.is-empty:after,.fd-checkbox--compact+.fd-checkbox__label.is-empty:before,.fd-checkbox--compact+.fd-checkbox__label:empty:after,.fd-checkbox--compact+.fd-checkbox__label:empty:before{margin-right:0;margin-left:0}.fd-checkbox--compact.is-focus,.fd-checkbox--compact:focus{z-index:5}.fd-checkbox--compact.is-focus+.fd-checkbox__label,.fd-checkbox--compact:focus+.fd-checkbox__label{outline:.0625rem dotted #000;outline:var(--sapContent_FocusWidth, .0625rem) var(--sapContent_FocusStyle, dotted) var(--sapContent_FocusColor, #000);outline-offset:-.375rem}.fd-checkbox__text:empty{margin:0}\n"], directives: [{ type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<input\n    #inputElement\n    type=\"checkbox\"\n    class=\"fd-checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"isIndeterminate\"\n    [checked]=\"isChecked\"\n    [attr.tabindex]=\"tabIndexValue\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-required]=\"required\"\n    [class.fd-checkbox--compact]=\"compact\"\n    [class]=\"state ? 'is-' + state : ''\"\n    (click)=\"_onInputClick($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n/>\n\n<label\n    class=\"fd-checkbox__label\"\n    #labelElement\n    [for]=\"inputId\"\n    [class]=\"labelClass\"\n    [attr.title]=\"title\"\n    [class.fd-checkbox__label--compact]=\"compact\"\n    [class.fd-checkbox__label--required]=\"required\"\n    (click)=\"_onLabelClick($event)\"\n>\n    <div class=\"fd-checkbox__label-container\">\n        <ng-container *ngIf=\"label\">\n            <span class=\"fd-checkbox__text\">\n                {{ label }}\n            </span>\n        </ng-container>\n\n        <ng-container *ngIf=\"!label\">\n            <span class=\"fd-checkbox__text\">\n                <ng-content></ng-content>\n            </span>\n        </ng-container>\n    </div>\n</label>\n", styles: ["/*!\n * Fundamental Library Styles v0.21.0-rc.92\n * Copyright (c) 2022 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.fd-checkbox\n*/.fd-checkbox{position:absolute;opacity:.0001}.fd-checkbox{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#32363a;color:var(--sapField_TextColor, #32363a);background-color:#fff;background-color:var(--sapField_Background, #fff);border-style:solid;border-width:.0625rem;border-width:var(--sapField_BorderWidth, .0625rem);border-color:#89919a;border-color:var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem);outline:0;appearance:none;-webkit-appearance:none;-moz-appearance:none}.fd-checkbox:after,.fd-checkbox:before{box-sizing:inherit;font-size:inherit}.fd-checkbox::placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor, #74777a)}.fd-checkbox::selection{color:#fff;color:var(--sapContent_ContrastTextColor, #fff);background-color:#0854a0;background-color:var(--sapSelectedColor, #0854a0)}.fd-checkbox.is-hover,.fd-checkbox:hover{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-checkbox.is-success{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e);border-width:.0625rem;border-width:var(--sapField_SuccessBorderWidth, .0625rem);border-style:solid;border-style:var(--sapField_SuccessBorderStyle, solid)}.fd-checkbox.is-success.is-hover,.fd-checkbox.is-success:hover{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-error{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00);border-width:.125rem;border-width:var(--sapField_InvalidBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InvalidBorderStyle, solid)}.fd-checkbox.is-error.is-hover,.fd-checkbox.is-error:hover{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-alert,.fd-checkbox.is-warning{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c);border-width:.125rem;border-width:var(--sapField_WarningBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_WarningBorderStyle, solid)}.fd-checkbox.is-alert.is-hover,.fd-checkbox.is-alert:hover,.fd-checkbox.is-warning.is-hover,.fd-checkbox.is-warning:hover{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-checkbox.is-information{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1);border-width:.125rem;border-width:var(--sapField_InformationBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InformationBorderStyle, solid)}.fd-checkbox.is-information.is-hover,.fd-checkbox.is-information:hover{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5;box-shadow:none;outline-offset:-.1875rem;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth, .0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor, #000);outline-style:dotted;outline-style:var(--sapContent_FocusStyle, dotted)}.fd-checkbox.is-alert,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-warning{border-width:.125rem;border-style:solid;border-style:var(--fdInput_State_Border_Type, solid)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus,.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus,.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus,.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{z-index:5;box-shadow:none;outline-offset:-.25rem}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{pointer-events:none;opacity:.4;opacity:var(--sapContent_DisabledOpacity, .4)}.fd-checkbox.is-disabled::placeholder,.fd-checkbox:disabled::placeholder,.fd-checkbox[aria-disabled=true]::placeholder{color:transparent}.fd-checkbox.is-readonly,.fd-checkbox[aria-readonly=true],.fd-checkbox[readonly]{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-checkbox.is-readonly::placeholder,.fd-checkbox[aria-readonly=true]::placeholder,.fd-checkbox[readonly]::placeholder{color:transparent}.fd-checkbox,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-success,.fd-checkbox.is-warning{border-style:initial}.fd-checkbox__label{line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:-moz-fit-content;width:fit-content;position:relative;max-width:100%;font-size:.875rem;font-size:var(--sapFontSize, .875rem);color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin-right:.5rem;cursor:text;align-self:flex-start;cursor:pointer;line-height:1rem;padding:.6875rem;display:flex;align-items:center}.fd-checkbox__label:after,.fd-checkbox__label:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__label[dir=rtl],[dir=rtl] .fd-checkbox__label{margin-left:.5rem;margin-right:0}.fd-checkbox__label:before{content:\"\";height:1.375rem;width:1.375rem;min-width:1.375rem;font-size:1rem;font-size:var(--sapFontLargeSize, 1rem);display:inline-flex;justify-content:center;align-items:center;font-family:SAP-icons;background-color:#fff;background-color:var(--sapField_Background, #fff);color:#0854a0;color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));border:.0625rem solid #89919a;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem)}.fd-checkbox__label:after{padding-left:.125rem;position:relative}.fd-checkbox__label[dir=rtl]:after,[dir=rtl] .fd-checkbox__label:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label.is-hover:before,.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-checkbox__label:focus{outline:0}.fd-checkbox__label--required .fd-checkbox__text,.fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:.5rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl],.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:0;padding-left:.5rem}.fd-checkbox__label--required .fd-checkbox__text:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{content:\"*\";font-size:.875rem;font-size:var(--sapFontSize, .875rem);font-weight:700;color:#ce3b3b;color:var(--sapField_RequiredColor, #ce3b3b);position:absolute;padding-left:.125rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl]:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl]:after,[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text:after,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label-container{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:100%;height:1rem;pointer-events:none}.fd-checkbox__label-container:after,.fd-checkbox__label-container:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:.6875rem;margin-right:0}.fd-checkbox__text:after,.fd-checkbox__text:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__text{margin-right:.6875rem;margin-left:0}.fd-checkbox:checked+.fd-checkbox__label:before{content:\"\\e05b\"}.fd-checkbox:indeterminate+.fd-checkbox__label:after{content:\"\";width:.75rem;height:.75rem;background-color:#0854a0;background-color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));position:absolute;margin-left:.3125rem}.fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{content:\"\";width:.5rem;height:.5rem;background-color:#0854a0;background-color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));position:absolute;margin-left:.25rem}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label:after{margin-left:0;margin-right:.3125rem}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label--compact:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{margin-left:0;margin-right:.25rem}.fd-checkbox.is-alert+.fd-checkbox__label:before,.fd-checkbox.is-warning+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border:.125rem solid #df6e0c;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_WarningColor, #df6e0c);color:#32363a;color:var(--sapField_TextColor, #32363a)}.fd-checkbox.is-alert+.fd-checkbox__label:after,.fd-checkbox.is-warning+.fd-checkbox__label:after{background-color:#32363a;background-color:var(--sapField_TextColor, #32363a)}.fd-checkbox.is-alert+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-alert+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-alert+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-alert+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-alert+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-alert+.fd-checkbox__label:hover[aria-disabled=true],.fd-checkbox.is-warning+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-warning+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-warning+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-warning+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-checkbox.is-alert+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-alert+.fd-checkbox__label:hover:before,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-warning+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-error+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border:.125rem solid #b00;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_InvalidColor, #b00);color:#b00;color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label:after{background-color:#b00;background-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-error+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-error+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-error+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-error+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-error+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-error+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-success+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border:.0625rem solid #107e3e;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_SuccessColor, #107e3e);color:#107e3e;color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label:after{background-color:#107e3e;background-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-success+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-success+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-success+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-success+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-success+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-success+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-information+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border:.125rem solid #0a6ed1;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_InformationColor, #0a6ed1);color:#0a6ed1;color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label:after{background-color:#0a6ed1;background-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-information+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-information+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-information+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-information+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-information+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-information+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-readonly+.fd-checkbox__label:before,.fd-checkbox[readonly]+.fd-checkbox__label:before{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border:.0625rem solid #89919a;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_ReadOnly_BorderColor, #89919a);color:#6a6d70;color:var(--sapContent_NonInteractiveIconColor, #6a6d70)}.fd-checkbox.is-readonly+.fd-checkbox__label:after,.fd-checkbox[readonly]+.fd-checkbox__label:after{background-color:#6a6d70;background-color:var(--sapContent_NonInteractiveIconColor, #6a6d70)}.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-readonly+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-readonly+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-readonly+.fd-checkbox__label:hover[aria-disabled=true],.fd-checkbox[readonly]+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover:disabled,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox[readonly]+.fd-checkbox__label:hover.is-disabled,.fd-checkbox[readonly]+.fd-checkbox__label:hover:disabled,.fd-checkbox[readonly]+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-readonly+.fd-checkbox__label:hover:before,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover:before,.fd-checkbox[readonly]+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5}.fd-checkbox.is-focus+.fd-checkbox__label,.fd-checkbox:focus+.fd-checkbox__label{outline:.0625rem dotted #000;outline:var(--sapContent_FocusWidth, .0625rem) var(--sapContent_FocusStyle, dotted) var(--sapContent_FocusColor, #000);outline-offset:-.5625rem}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:.0001}.fd-checkbox.is-disabled+.fd-checkbox__label,.fd-checkbox:disabled+.fd-checkbox__label,.fd-checkbox[aria-disabled=true]+.fd-checkbox__label{pointer-events:none;opacity:.4}.fd-checkbox--compact>.fd-checkbox__text{margin-left:.5rem}.fd-checkbox--compact>.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox--compact>.fd-checkbox__text{margin-left:0;margin-right:.5rem}.fd-checkbox--compact+.fd-checkbox__label{padding:.5rem}.fd-checkbox--compact+.fd-checkbox__label:before{font-size:.75rem;font-size:var(--sapFontSmallSize, .75rem);height:1rem;width:1rem;min-width:1rem;margin-left:0}.fd-checkbox--compact+.fd-checkbox__label.is-empty,.fd-checkbox--compact+.fd-checkbox__label:empty{padding:.5rem;margin:0}.fd-checkbox--compact+.fd-checkbox__label.is-empty:after,.fd-checkbox--compact+.fd-checkbox__label.is-empty:before,.fd-checkbox--compact+.fd-checkbox__label:empty:after,.fd-checkbox--compact+.fd-checkbox__label:empty:before{margin-right:0;margin-left:0}.fd-checkbox--compact.is-focus,.fd-checkbox--compact:focus{z-index:5}.fd-checkbox--compact.is-focus+.fd-checkbox__label,.fd-checkbox--compact:focus+.fd-checkbox__label{outline:.0625rem dotted #000;outline:var(--sapContent_FocusWidth, .0625rem) var(--sapContent_FocusStyle, dotted) var(--sapContent_FocusColor, #000);outline-offset:-.375rem}.fd-checkbox__text:empty{margin:0}.fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-checkbox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -217,25 +197,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true
                         }
-                    ], host: { '[attr.tabindex]': '-1' }, template: "<input\n    #inputLabel\n    type=\"checkbox\"\n    class=\"fd-checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"isIndeterminate\"\n    [attr.tabindex]=\"tabIndexValue\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-required]=\"required\"\n    [class.fd-checkbox--compact]=\"compact\"\n    [class]=\"state ? 'is-' + state : ''\"\n    [ngModel]=\"isChecked\"\n    (ngModelChange)=\"nextValue()\"\n    (keydown)=\"checkByKey($event)\"\n    (keyup)=\"handleInputKeyUp($event)\"\n    (click)=\"$event.stopPropagation()\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n/>\n\n<label\n    class=\"fd-checkbox__label\"\n    #labelElement\n    [for]=\"inputId\"\n    [class]=\"labelClass\"\n    [attr.title]=\"title\"\n    [class.fd-checkbox__label--compact]=\"compact\"\n    [class.fd-checkbox__label--required]=\"required\"\n    (click)=\"checkByClick($event)\"\n>\n    <div class=\"fd-checkbox__label-container\">\n        <ng-container *ngIf=\"label\">\n            <span class=\"fd-checkbox__text\">\n                {{ label }}\n            </span>\n        </ng-container>\n\n        <ng-container *ngIf=\"!label\">\n            <span class=\"fd-checkbox__text\">\n                <ng-content></ng-content>\n            </span>\n        </ng-container>\n    </div>\n</label>\n", styles: ["/*!\n * Fundamental Library Styles v0.21.0-rc.92\n * Copyright (c) 2022 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.fd-checkbox\n*/.fd-checkbox{position:absolute;opacity:.0001}.fd-checkbox{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#32363a;color:var(--sapField_TextColor, #32363a);background-color:#fff;background-color:var(--sapField_Background, #fff);border-style:solid;border-width:.0625rem;border-width:var(--sapField_BorderWidth, .0625rem);border-color:#89919a;border-color:var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem);outline:0;appearance:none;-webkit-appearance:none;-moz-appearance:none}.fd-checkbox:after,.fd-checkbox:before{box-sizing:inherit;font-size:inherit}.fd-checkbox::placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor, #74777a)}.fd-checkbox::selection{color:#fff;color:var(--sapContent_ContrastTextColor, #fff);background-color:#0854a0;background-color:var(--sapSelectedColor, #0854a0)}.fd-checkbox.is-hover,.fd-checkbox:hover{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-checkbox.is-success{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e);border-width:.0625rem;border-width:var(--sapField_SuccessBorderWidth, .0625rem);border-style:solid;border-style:var(--sapField_SuccessBorderStyle, solid)}.fd-checkbox.is-success.is-hover,.fd-checkbox.is-success:hover{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-error{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00);border-width:.125rem;border-width:var(--sapField_InvalidBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InvalidBorderStyle, solid)}.fd-checkbox.is-error.is-hover,.fd-checkbox.is-error:hover{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-alert,.fd-checkbox.is-warning{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c);border-width:.125rem;border-width:var(--sapField_WarningBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_WarningBorderStyle, solid)}.fd-checkbox.is-alert.is-hover,.fd-checkbox.is-alert:hover,.fd-checkbox.is-warning.is-hover,.fd-checkbox.is-warning:hover{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-checkbox.is-information{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1);border-width:.125rem;border-width:var(--sapField_InformationBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InformationBorderStyle, solid)}.fd-checkbox.is-information.is-hover,.fd-checkbox.is-information:hover{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5;box-shadow:none;outline-offset:-.1875rem;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth, .0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor, #000);outline-style:dotted;outline-style:var(--sapContent_FocusStyle, dotted)}.fd-checkbox.is-alert,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-warning{border-width:.125rem;border-style:solid;border-style:var(--fdInput_State_Border_Type, solid)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus,.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus,.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus,.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{z-index:5;box-shadow:none;outline-offset:-.25rem}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{pointer-events:none;opacity:.4;opacity:var(--sapContent_DisabledOpacity, .4)}.fd-checkbox.is-disabled::placeholder,.fd-checkbox:disabled::placeholder,.fd-checkbox[aria-disabled=true]::placeholder{color:transparent}.fd-checkbox.is-readonly,.fd-checkbox[aria-readonly=true],.fd-checkbox[readonly]{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-checkbox.is-readonly::placeholder,.fd-checkbox[aria-readonly=true]::placeholder,.fd-checkbox[readonly]::placeholder{color:transparent}.fd-checkbox,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-success,.fd-checkbox.is-warning{border-style:initial}.fd-checkbox__label{line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:-moz-fit-content;width:fit-content;position:relative;max-width:100%;font-size:.875rem;font-size:var(--sapFontSize, .875rem);color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin-right:.5rem;cursor:text;align-self:flex-start;cursor:pointer;line-height:1rem;padding:.6875rem;display:flex;align-items:center}.fd-checkbox__label:after,.fd-checkbox__label:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__label[dir=rtl],[dir=rtl] .fd-checkbox__label{margin-left:.5rem;margin-right:0}.fd-checkbox__label:before{content:\"\";height:1.375rem;width:1.375rem;min-width:1.375rem;font-size:1rem;font-size:var(--sapFontLargeSize, 1rem);display:inline-flex;justify-content:center;align-items:center;font-family:SAP-icons;background-color:#fff;background-color:var(--sapField_Background, #fff);color:#0854a0;color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));border:.0625rem solid #89919a;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem)}.fd-checkbox__label:after{padding-left:.125rem;position:relative}.fd-checkbox__label[dir=rtl]:after,[dir=rtl] .fd-checkbox__label:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label.is-hover:before,.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-checkbox__label:focus{outline:0}.fd-checkbox__label--required .fd-checkbox__text,.fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:.5rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl],.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:0;padding-left:.5rem}.fd-checkbox__label--required .fd-checkbox__text:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{content:\"*\";font-size:.875rem;font-size:var(--sapFontSize, .875rem);font-weight:700;color:#ce3b3b;color:var(--sapField_RequiredColor, #ce3b3b);position:absolute;padding-left:.125rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl]:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl]:after,[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text:after,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label-container{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:100%;height:1rem;pointer-events:none}.fd-checkbox__label-container:after,.fd-checkbox__label-container:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:.6875rem;margin-right:0}.fd-checkbox__text:after,.fd-checkbox__text:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__text{margin-right:.6875rem;margin-left:0}.fd-checkbox:checked+.fd-checkbox__label:before{content:\"\\e05b\"}.fd-checkbox:indeterminate+.fd-checkbox__label:after{content:\"\";width:.75rem;height:.75rem;background-color:#0854a0;background-color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));position:absolute;margin-left:.3125rem}.fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{content:\"\";width:.5rem;height:.5rem;background-color:#0854a0;background-color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));position:absolute;margin-left:.25rem}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label:after{margin-left:0;margin-right:.3125rem}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label--compact:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{margin-left:0;margin-right:.25rem}.fd-checkbox.is-alert+.fd-checkbox__label:before,.fd-checkbox.is-warning+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border:.125rem solid #df6e0c;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_WarningColor, #df6e0c);color:#32363a;color:var(--sapField_TextColor, #32363a)}.fd-checkbox.is-alert+.fd-checkbox__label:after,.fd-checkbox.is-warning+.fd-checkbox__label:after{background-color:#32363a;background-color:var(--sapField_TextColor, #32363a)}.fd-checkbox.is-alert+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-alert+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-alert+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-alert+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-alert+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-alert+.fd-checkbox__label:hover[aria-disabled=true],.fd-checkbox.is-warning+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-warning+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-warning+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-warning+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-checkbox.is-alert+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-alert+.fd-checkbox__label:hover:before,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-warning+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-error+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border:.125rem solid #b00;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_InvalidColor, #b00);color:#b00;color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label:after{background-color:#b00;background-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-error+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-error+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-error+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-error+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-error+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-error+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-success+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border:.0625rem solid #107e3e;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_SuccessColor, #107e3e);color:#107e3e;color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label:after{background-color:#107e3e;background-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-success+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-success+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-success+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-success+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-success+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-success+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-information+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border:.125rem solid #0a6ed1;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_InformationColor, #0a6ed1);color:#0a6ed1;color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label:after{background-color:#0a6ed1;background-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-information+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-information+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-information+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-information+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-information+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-information+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-readonly+.fd-checkbox__label:before,.fd-checkbox[readonly]+.fd-checkbox__label:before{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border:.0625rem solid #89919a;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_ReadOnly_BorderColor, #89919a);color:#6a6d70;color:var(--sapContent_NonInteractiveIconColor, #6a6d70)}.fd-checkbox.is-readonly+.fd-checkbox__label:after,.fd-checkbox[readonly]+.fd-checkbox__label:after{background-color:#6a6d70;background-color:var(--sapContent_NonInteractiveIconColor, #6a6d70)}.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-readonly+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-readonly+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-readonly+.fd-checkbox__label:hover[aria-disabled=true],.fd-checkbox[readonly]+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover:disabled,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox[readonly]+.fd-checkbox__label:hover.is-disabled,.fd-checkbox[readonly]+.fd-checkbox__label:hover:disabled,.fd-checkbox[readonly]+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-readonly+.fd-checkbox__label:hover:before,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover:before,.fd-checkbox[readonly]+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5}.fd-checkbox.is-focus+.fd-checkbox__label,.fd-checkbox:focus+.fd-checkbox__label{outline:.0625rem dotted #000;outline:var(--sapContent_FocusWidth, .0625rem) var(--sapContent_FocusStyle, dotted) var(--sapContent_FocusColor, #000);outline-offset:-.5625rem}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:.0001}.fd-checkbox.is-disabled+.fd-checkbox__label,.fd-checkbox:disabled+.fd-checkbox__label,.fd-checkbox[aria-disabled=true]+.fd-checkbox__label{pointer-events:none;opacity:.4}.fd-checkbox--compact>.fd-checkbox__text{margin-left:.5rem}.fd-checkbox--compact>.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox--compact>.fd-checkbox__text{margin-left:0;margin-right:.5rem}.fd-checkbox--compact+.fd-checkbox__label{padding:.5rem}.fd-checkbox--compact+.fd-checkbox__label:before{font-size:.75rem;font-size:var(--sapFontSmallSize, .75rem);height:1rem;width:1rem;min-width:1rem;margin-left:0}.fd-checkbox--compact+.fd-checkbox__label.is-empty,.fd-checkbox--compact+.fd-checkbox__label:empty{padding:.5rem;margin:0}.fd-checkbox--compact+.fd-checkbox__label.is-empty:after,.fd-checkbox--compact+.fd-checkbox__label.is-empty:before,.fd-checkbox--compact+.fd-checkbox__label:empty:after,.fd-checkbox--compact+.fd-checkbox__label:empty:before{margin-right:0;margin-left:0}.fd-checkbox--compact.is-focus,.fd-checkbox--compact:focus{z-index:5}.fd-checkbox--compact.is-focus+.fd-checkbox__label,.fd-checkbox--compact:focus+.fd-checkbox__label{outline:.0625rem dotted #000;outline:var(--sapContent_FocusWidth, .0625rem) var(--sapContent_FocusStyle, dotted) var(--sapContent_FocusColor, #000);outline-offset:-.375rem}.fd-checkbox__text:empty{margin:0}\n"] }]
+                    ], host: { '[attr.tabindex]': '-1' }, template: "<input\n    #inputElement\n    type=\"checkbox\"\n    class=\"fd-checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"isIndeterminate\"\n    [checked]=\"isChecked\"\n    [attr.tabindex]=\"tabIndexValue\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-required]=\"required\"\n    [class.fd-checkbox--compact]=\"compact\"\n    [class]=\"state ? 'is-' + state : ''\"\n    (click)=\"_onInputClick($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n/>\n\n<label\n    class=\"fd-checkbox__label\"\n    #labelElement\n    [for]=\"inputId\"\n    [class]=\"labelClass\"\n    [attr.title]=\"title\"\n    [class.fd-checkbox__label--compact]=\"compact\"\n    [class.fd-checkbox__label--required]=\"required\"\n    (click)=\"_onLabelClick($event)\"\n>\n    <div class=\"fd-checkbox__label-container\">\n        <ng-container *ngIf=\"label\">\n            <span class=\"fd-checkbox__text\">\n                {{ label }}\n            </span>\n        </ng-container>\n\n        <ng-container *ngIf=\"!label\">\n            <span class=\"fd-checkbox__text\">\n                <ng-content></ng-content>\n            </span>\n        </ng-container>\n    </div>\n</label>\n", styles: ["/*!\n * Fundamental Library Styles v0.21.0-rc.92\n * Copyright (c) 2022 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.fd-checkbox\n*/.fd-checkbox{position:absolute;opacity:.0001}.fd-checkbox{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#32363a;color:var(--sapField_TextColor, #32363a);background-color:#fff;background-color:var(--sapField_Background, #fff);border-style:solid;border-width:.0625rem;border-width:var(--sapField_BorderWidth, .0625rem);border-color:#89919a;border-color:var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem);outline:0;appearance:none;-webkit-appearance:none;-moz-appearance:none}.fd-checkbox:after,.fd-checkbox:before{box-sizing:inherit;font-size:inherit}.fd-checkbox::placeholder{font-style:italic;color:#74777a;color:var(--sapField_PlaceholderTextColor, #74777a)}.fd-checkbox::selection{color:#fff;color:var(--sapContent_ContrastTextColor, #fff);background-color:#0854a0;background-color:var(--sapSelectedColor, #0854a0)}.fd-checkbox.is-hover,.fd-checkbox:hover{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-checkbox.is-success{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e);border-width:.0625rem;border-width:var(--sapField_SuccessBorderWidth, .0625rem);border-style:solid;border-style:var(--sapField_SuccessBorderStyle, solid)}.fd-checkbox.is-success.is-hover,.fd-checkbox.is-success:hover{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-error{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00);border-width:.125rem;border-width:var(--sapField_InvalidBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InvalidBorderStyle, solid)}.fd-checkbox.is-error.is-hover,.fd-checkbox.is-error:hover{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-alert,.fd-checkbox.is-warning{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);font-style:normal;font-style:var(--fdInput_State_Text_Style, normal);font-weight:400;font-weight:var(--fdInput_State_Font_Weight, normal);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c);border-width:.125rem;border-width:var(--sapField_WarningBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_WarningBorderStyle, solid)}.fd-checkbox.is-alert.is-hover,.fd-checkbox.is-alert:hover,.fd-checkbox.is-warning.is-hover,.fd-checkbox.is-warning:hover{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-checkbox.is-information{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1);border-width:.125rem;border-width:var(--sapField_InformationBorderWidth, .125rem);border-style:solid;border-style:var(--sapField_InformationBorderStyle, solid)}.fd-checkbox.is-information.is-hover,.fd-checkbox.is-information:hover{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5;box-shadow:none;outline-offset:-.1875rem;outline-width:.0625rem;outline-width:var(--sapContent_FocusWidth, .0625rem);outline-color:#000;outline-color:var(--sapContent_FocusColor, #000);outline-style:dotted;outline-style:var(--sapContent_FocusStyle, dotted)}.fd-checkbox.is-alert,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-warning{border-width:.125rem;border-style:solid;border-style:var(--fdInput_State_Border_Type, solid)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus,.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus,.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus,.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{z-index:5;box-shadow:none;outline-offset:-.25rem}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{pointer-events:none;opacity:.4;opacity:var(--sapContent_DisabledOpacity, .4)}.fd-checkbox.is-disabled::placeholder,.fd-checkbox:disabled::placeholder,.fd-checkbox[aria-disabled=true]::placeholder{color:transparent}.fd-checkbox.is-readonly,.fd-checkbox[aria-readonly=true],.fd-checkbox[readonly]{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-checkbox.is-readonly::placeholder,.fd-checkbox[aria-readonly=true]::placeholder,.fd-checkbox[readonly]::placeholder{color:transparent}.fd-checkbox,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-success,.fd-checkbox.is-warning{border-style:initial}.fd-checkbox__label{line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:-moz-fit-content;width:fit-content;position:relative;max-width:100%;font-size:.875rem;font-size:var(--sapFontSize, .875rem);color:#6a6d70;color:var(--sapContent_LabelColor, #6a6d70);margin-right:.5rem;cursor:text;align-self:flex-start;cursor:pointer;line-height:1rem;padding:.6875rem;display:flex;align-items:center}.fd-checkbox__label:after,.fd-checkbox__label:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__label[dir=rtl],[dir=rtl] .fd-checkbox__label{margin-left:.5rem;margin-right:0}.fd-checkbox__label:before{content:\"\";height:1.375rem;width:1.375rem;min-width:1.375rem;font-size:1rem;font-size:var(--sapFontLargeSize, 1rem);display:inline-flex;justify-content:center;align-items:center;font-family:SAP-icons;background-color:#fff;background-color:var(--sapField_Background, #fff);color:#0854a0;color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));border:.0625rem solid #89919a;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_BorderColor, #89919a);border-radius:.125rem;border-radius:var(--sapField_BorderCornerRadius, .125rem)}.fd-checkbox__label:after{padding-left:.125rem;position:relative}.fd-checkbox__label[dir=rtl]:after,[dir=rtl] .fd-checkbox__label:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label.is-hover:before,.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff);border-color:#0854a0;border-color:var(--sapField_Hover_BorderColor, #0854a0)}.fd-checkbox__label:focus{outline:0}.fd-checkbox__label--required .fd-checkbox__text,.fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:.5rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl],.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:0;padding-left:.5rem}.fd-checkbox__label--required .fd-checkbox__text:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{content:\"*\";font-size:.875rem;font-size:var(--sapFontSize, .875rem);font-weight:700;color:#ce3b3b;color:var(--sapField_RequiredColor, #ce3b3b);position:absolute;padding-left:.125rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl]:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl]:after,[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text:after,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label-container{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:100%;height:1rem;pointer-events:none}.fd-checkbox__label-container:after,.fd-checkbox__label-container:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:.6875rem;margin-right:0}.fd-checkbox__text:after,.fd-checkbox__text:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__text{margin-right:.6875rem;margin-left:0}.fd-checkbox:checked+.fd-checkbox__label:before{content:\"\\e05b\"}.fd-checkbox:indeterminate+.fd-checkbox__label:after{content:\"\";width:.75rem;height:.75rem;background-color:#0854a0;background-color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));position:absolute;margin-left:.3125rem}.fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{content:\"\";width:.5rem;height:.5rem;background-color:#0854a0;background-color:var(--fdCheckbox_Selected_Color, var(--sapSelectedColor, #0854a0));position:absolute;margin-left:.25rem}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label:after{margin-left:0;margin-right:.3125rem}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label--compact:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{margin-left:0;margin-right:.25rem}.fd-checkbox.is-alert+.fd-checkbox__label:before,.fd-checkbox.is-warning+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_WarningBackground, #fff);border:.125rem solid #df6e0c;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_WarningColor, #df6e0c);color:#32363a;color:var(--sapField_TextColor, #32363a)}.fd-checkbox.is-alert+.fd-checkbox__label:after,.fd-checkbox.is-warning+.fd-checkbox__label:after{background-color:#32363a;background-color:var(--sapField_TextColor, #32363a)}.fd-checkbox.is-alert+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-alert+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-alert+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-alert+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-alert+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-alert+.fd-checkbox__label:hover[aria-disabled=true],.fd-checkbox.is-warning+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-warning+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-warning+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-warning+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#df6e0c;border-color:var(--sapField_WarningColor, #df6e0c)}.fd-checkbox.is-alert+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-alert+.fd-checkbox__label:hover:before,.fd-checkbox.is-warning+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-warning+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-error+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_InvalidBackground, #fff);border:.125rem solid #b00;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_InvalidColor, #b00);color:#b00;color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label:after{background-color:#b00;background-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-error+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-error+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-error+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-error+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-error+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#b00;border-color:var(--sapField_InvalidColor, #b00)}.fd-checkbox.is-error+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-error+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-success+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_SuccessBackground, #fff);border:.0625rem solid #107e3e;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_SuccessColor, #107e3e);color:#107e3e;color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label:after{background-color:#107e3e;background-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-success+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-success+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-success+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-success+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-success+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#107e3e;border-color:var(--sapField_SuccessColor, #107e3e)}.fd-checkbox.is-success+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-success+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-information+.fd-checkbox__label:before{background-color:#fff;background-color:var(--sapField_InformationBackground, #fff);border:.125rem solid #0a6ed1;border:.125rem var(--fdCheckbox_State_Border_Type, solid) var(--sapField_InformationColor, #0a6ed1);color:#0a6ed1;color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label:after{background-color:#0a6ed1;background-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-information+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-information+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-information+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-information+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-information+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#0a6ed1;border-color:var(--sapField_InformationColor, #0a6ed1)}.fd-checkbox.is-information+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-information+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-readonly+.fd-checkbox__label:before,.fd-checkbox[readonly]+.fd-checkbox__label:before{background-color:#f2f2f280;background-color:var(--sapField_ReadOnly_Background, rgba(242, 242, 242, .5));border:.0625rem solid #89919a;border:var(--sapField_BorderWidth, .0625rem) solid var(--sapField_ReadOnly_BorderColor, #89919a);color:#6a6d70;color:var(--sapContent_NonInteractiveIconColor, #6a6d70)}.fd-checkbox.is-readonly+.fd-checkbox__label:after,.fd-checkbox[readonly]+.fd-checkbox__label:after{background-color:#6a6d70;background-color:var(--sapContent_NonInteractiveIconColor, #6a6d70)}.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover:disabled,.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox.is-readonly+.fd-checkbox__label:hover.is-disabled,.fd-checkbox.is-readonly+.fd-checkbox__label:hover:disabled,.fd-checkbox.is-readonly+.fd-checkbox__label:hover[aria-disabled=true],.fd-checkbox[readonly]+.fd-checkbox__label.is-hover.is-disabled,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover:disabled,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover[aria-disabled=true],.fd-checkbox[readonly]+.fd-checkbox__label:hover.is-disabled,.fd-checkbox[readonly]+.fd-checkbox__label:hover:disabled,.fd-checkbox[readonly]+.fd-checkbox__label:hover[aria-disabled=true]{border-color:#89919a;border-color:var(--sapField_ReadOnly_BorderColor, #89919a)}.fd-checkbox.is-readonly+.fd-checkbox__label.is-hover:before,.fd-checkbox.is-readonly+.fd-checkbox__label:hover:before,.fd-checkbox[readonly]+.fd-checkbox__label.is-hover:before,.fd-checkbox[readonly]+.fd-checkbox__label:hover:before{background-color:#fff;background-color:var(--sapField_Hover_Background, #fff)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5}.fd-checkbox.is-focus+.fd-checkbox__label,.fd-checkbox:focus+.fd-checkbox__label{outline:.0625rem dotted #000;outline:var(--sapContent_FocusWidth, .0625rem) var(--sapContent_FocusStyle, dotted) var(--sapContent_FocusColor, #000);outline-offset:-.5625rem}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:.0001}.fd-checkbox.is-disabled+.fd-checkbox__label,.fd-checkbox:disabled+.fd-checkbox__label,.fd-checkbox[aria-disabled=true]+.fd-checkbox__label{pointer-events:none;opacity:.4}.fd-checkbox--compact>.fd-checkbox__text{margin-left:.5rem}.fd-checkbox--compact>.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox--compact>.fd-checkbox__text{margin-left:0;margin-right:.5rem}.fd-checkbox--compact+.fd-checkbox__label{padding:.5rem}.fd-checkbox--compact+.fd-checkbox__label:before{font-size:.75rem;font-size:var(--sapFontSmallSize, .75rem);height:1rem;width:1rem;min-width:1rem;margin-left:0}.fd-checkbox--compact+.fd-checkbox__label.is-empty,.fd-checkbox--compact+.fd-checkbox__label:empty{padding:.5rem;margin:0}.fd-checkbox--compact+.fd-checkbox__label.is-empty:after,.fd-checkbox--compact+.fd-checkbox__label.is-empty:before,.fd-checkbox--compact+.fd-checkbox__label:empty:after,.fd-checkbox--compact+.fd-checkbox__label:empty:before{margin-right:0;margin-left:0}.fd-checkbox--compact.is-focus,.fd-checkbox--compact:focus{z-index:5}.fd-checkbox--compact.is-focus+.fd-checkbox__label,.fd-checkbox--compact:focus+.fd-checkbox__label{outline:.0625rem dotted #000;outline:var(--sapContent_FocusWidth, .0625rem) var(--sapContent_FocusStyle, dotted) var(--sapContent_FocusColor, #000);outline-offset:-.375rem}.fd-checkbox__text:empty{margin:0}.fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabIndexValue']
-                }] }, { type: i1.Platform }, { type: i0.ChangeDetectorRef }, { type: i2.ContentDensityService, decorators: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i1.ContentDensityService, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [LIST_ITEM_COMPONENT]
-                }] }]; }, propDecorators: { inputLabel: [{
+                }] }]; }, propDecorators: { inputElement: [{
                 type: ViewChild,
-                args: ['inputLabel']
+                args: ['inputElement']
             }], labelElement: [{
                 type: ViewChild,
                 args: ['labelElement']
             }], ariaLabel: [{
                 type: Input
+            }], value: [{
+                type: Input
             }], ariaLabelledBy: [{
                 type: Input
             }], ariaDescribedBy: [{