@i-cell/ids-angular 0.1.0

package/fesm2022/i-cell-ids-angular-card.mjs

@@ -0,0 +1,222 @@
+import * as i0 from '@angular/core';
+import { input, computed, Directive, InjectionToken, Component, ViewEncapsulation, ChangeDetectionStrategy, EventEmitter, signal, Output } from '@angular/core';
+import { DirectiveBase, IdsSize, IdsOrientation, ComponentBaseWithDefaults, coerceBooleanAttribute } from '@i-cell/ids-angular/core';
+
+const IdsCardAppearance = {
+    FILLED: 'filled',
+    OUTLINED: 'outlined',
+    ELEVATED: 'elevated',
+};
+
+const IdsCardVariant = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    SURFACE: 'surface',
+    BRAND: 'brand',
+    LIGHT: 'light',
+    DARK: 'dark',
+    INFO: 'info',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    ERROR: 'error',
+};
+
+class IdsCardSectionBase extends DirectiveBase {
+    constructor() {
+        super(...arguments);
+        this.stretch = input(false);
+        this._hostClasses = computed(() => this._getHostClasses([this.stretch() ? 'stretched' : 'padded']));
+    }
+    get _hostName() {
+        return 'card-section';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardSectionBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: IdsCardSectionBase, isStandalone: false, inputs: { stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardSectionBase, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: false,
+                }]
+        }] });
+
+class IdsCardBodyDirective extends IdsCardSectionBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardBodyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsCardBodyDirective, isStandalone: true, selector: "ids-card-body", host: { classAttribute: "ids-card-body" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardBodyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ids-card-body',
+                    standalone: true,
+                    host: {
+                        class: 'ids-card-body',
+                    },
+                }]
+        }] });
+
+const IDS_CARD_DEFAULT_CONFIG = new InjectionToken('IDS_CARD_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_CARD_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_CARD_DEFAULT_CONFIG_FACTORY() {
+    return {
+        appearance: IdsCardAppearance.FILLED,
+        size: IdsSize.COMPACT,
+        variant: IdsCardVariant.SURFACE,
+        orientation: IdsOrientation.VERTICAL,
+    };
+}
+
+class IdsCardFooterDirective extends IdsCardSectionBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardFooterDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsCardFooterDirective, isStandalone: true, selector: "ids-card-footer,footer[idsCardFooter]", host: { classAttribute: "ids-card-footer" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ids-card-footer,footer[idsCardFooter]',
+                    standalone: true,
+                    host: {
+                        class: 'ids-card-footer',
+                    },
+                }]
+        }] });
+
+class IdsCardHeaderComponent extends IdsCardSectionBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.2", type: IdsCardHeaderComponent, isStandalone: true, selector: "ids-card-header,header[idsCardHeader]", host: { classAttribute: "ids-card-header" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ids-card-header-headline">
+      <ng-content select="ids-card-title, [idsCardTitle], ids-card-subtitle, [idsCardSubtitle]" />
+    </div>
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ids-card-header,header[idsCardHeader]',
+                    imports: [],
+                    template: `
+    <div class="ids-card-header-headline">
+      <ng-content select="ids-card-title, [idsCardTitle], ids-card-subtitle, [idsCardSubtitle]" />
+    </div>
+    <ng-content />
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'ids-card-header',
+                    },
+                }]
+        }] });
+
+class IdsCardMediaDirective extends IdsCardSectionBase {
+    constructor() {
+        super(...arguments);
+        this.stretch = input(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardMediaDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: IdsCardMediaDirective, isStandalone: true, selector: "[idsCardMedia]", inputs: { stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ids-card-media" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardMediaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsCardMedia]',
+                    standalone: true,
+                    host: {
+                        class: 'ids-card-media',
+                    },
+                }]
+        }] });
+
+class IdsCardSubtitleDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsCardSubtitleDirective, isStandalone: true, selector: "[idsCardSubtitle]", host: { classAttribute: "ids-card-subtitle" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardSubtitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsCardSubtitle]',
+                    standalone: true,
+                    host: {
+                        class: 'ids-card-subtitle',
+                    },
+                }]
+        }] });
+
+class IdsCardTitleDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsCardTitleDirective, isStandalone: true, selector: "[idsCardTitle]", host: { classAttribute: "ids-card-title" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsCardTitle]',
+                    standalone: true,
+                    host: {
+                        class: 'ids-card-title',
+                    },
+                }]
+        }] });
+
+const defaultConfig = IDS_CARD_DEFAULT_CONFIG_FACTORY();
+class IdsCardComponent extends ComponentBaseWithDefaults {
+    constructor() {
+        super(...arguments);
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_CARD_DEFAULT_CONFIG);
+        this.appearance = input(this._defaultConfig.appearance);
+        this.size = input(this._defaultConfig.size);
+        this.variant = input(this._defaultConfig.variant);
+        this.orientation = input(this._defaultConfig.orientation);
+        this.disabled = input(false, { transform: (value) => coerceBooleanAttribute(value) });
+        // Old fashion output for now, signal outputs cannot be queried as of now for subscribers
+        this.click = new EventEmitter();
+        this._hasClickHandler = signal(false);
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.appearance(),
+            this.size(),
+            this.variant(),
+            this.orientation(),
+            this.disabled() && this._hasClickHandler() ? 'disabled' : null,
+            this._hasClickHandler() ? 'clickable' : null,
+        ]));
+    }
+    get _hostName() {
+        return 'card';
+    }
+    ngOnInit() {
+        this._hasClickHandler.set(this.click.observed);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.2", type: IdsCardComponent, isStandalone: true, selector: "ids-card,div[idsCard],article[idsCard],aside[idsCard],section[idsCard]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, host: { properties: { "attr.aria-disabled": "this.disabled()? \"\" : null", "attr.tabindex": " this._hasClickHandler() ? 0 : null" } }, usesInheritance: true, ngImport: i0, template: `
+    <ng-content />
+    <ng-content select="ids-card-footer,footer[idsCardFooter]" />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ids-card,div[idsCard],article[idsCard],aside[idsCard],section[idsCard]',
+                    imports: [],
+                    template: `
+    <ng-content />
+    <ng-content select="ids-card-footer,footer[idsCardFooter]" />
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[attr.aria-disabled]': 'this.disabled()? "" : null',
+                        '[attr.tabindex]': ' this._hasClickHandler() ? 0 : null',
+                    },
+                }]
+        }], propDecorators: { click: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IDS_CARD_DEFAULT_CONFIG, IDS_CARD_DEFAULT_CONFIG_FACTORY, IdsCardAppearance, IdsCardBodyDirective, IdsCardComponent, IdsCardFooterDirective, IdsCardHeaderComponent, IdsCardMediaDirective, IdsCardSubtitleDirective, IdsCardTitleDirective, IdsCardVariant };
+//# sourceMappingURL=i-cell-ids-angular-card.mjs.map

package/fesm2022/i-cell-ids-angular-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"i-cell-ids-angular-card.mjs","sources":["../../../projects/widgets/card/types/card-appearances.type.ts","../../../projects/widgets/card/types/card-variant.type.ts","../../../projects/widgets/card/card-section-base.directive.ts","../../../projects/widgets/card/card-body.directive.ts","../../../projects/widgets/card/card-defaults.ts","../../../projects/widgets/card/card-footer.directive.ts","../../../projects/widgets/card/card-header.component.ts","../../../projects/widgets/card/card-media.directive.ts","../../../projects/widgets/card/card-subtitle.directive.ts","../../../projects/widgets/card/card-title.directive.ts","../../../projects/widgets/card/card.component.ts","../../../projects/widgets/card/i-cell-ids-angular-card.ts"],"sourcesContent":["export const IdsCardAppearance = {\n  FILLED: 'filled',\n  OUTLINED: 'outlined',\n  ELEVATED: 'elevated',\n} as const;\n\nexport type IdsCardAppearanceType = (typeof IdsCardAppearance)[keyof typeof IdsCardAppearance];\n","export const IdsCardVariant = {\n  PRIMARY: 'primary',\n  SECONDARY: 'secondary',\n  SURFACE: 'surface',\n  BRAND: 'brand',\n  LIGHT: 'light',\n  DARK: 'dark',\n  INFO: 'info',\n  SUCCESS: 'success',\n  WARNING: 'warning',\n  ERROR: 'error',\n} as const;\n\nexport type IdsCardVariantType = (typeof IdsCardVariant)[keyof typeof IdsCardVariant];\n\n","import { computed, Directive, input } from '@angular/core';\nimport { DirectiveBase } from '@i-cell/ids-angular/core';\n\n@Directive({\n  standalone: false,\n})\nexport abstract class IdsCardSectionBase extends DirectiveBase {\n  protected override get _hostName(): string {\n    return 'card-section';\n  }\n\n  public stretch = input(false);\n\n  protected _hostClasses = computed(() => this._getHostClasses([this.stretch() ? 'stretched' : 'padded']));\n}\n","import { IdsCardSectionBase } from './card-section-base.directive';\n\nimport { Directive } from '@angular/core';\n\n@Directive({\n  selector: 'ids-card-body',\n  standalone: true,\n  host: {\n    class: 'ids-card-body',\n  },\n})\nexport class IdsCardBodyDirective extends IdsCardSectionBase {}\n","import { IdsCardAppearance, IdsCardAppearanceType } from './types/card-appearances.type';\nimport { IdsCardVariant, IdsCardVariantType } from './types/card-variant.type';\n\nimport { InjectionToken } from '@angular/core';\nimport { IdsSize, IdsSizeType, IdsOrientationType, IdsOrientation } from '@i-cell/ids-angular/core';\n\nexport interface IdsCardDefaultConfig {\n  appearance?: IdsCardAppearanceType,\n  size?: IdsSizeType,\n  variant?: IdsCardVariantType,\n  orientation?: IdsOrientationType,\n}\n\nexport const IDS_CARD_DEFAULT_CONFIG = new InjectionToken<IdsCardDefaultConfig>(\n  'IDS_CARD_DEFAULT_CONFIG',\n  {\n    providedIn: 'root',\n    factory: IDS_CARD_DEFAULT_CONFIG_FACTORY,\n  },\n);\n\nexport function IDS_CARD_DEFAULT_CONFIG_FACTORY(): Required<IdsCardDefaultConfig> {\n  return {\n    appearance: IdsCardAppearance.FILLED,\n    size: IdsSize.COMPACT,\n    variant: IdsCardVariant.SURFACE,\n    orientation: IdsOrientation.VERTICAL,\n  };\n}\n\n","import { IdsCardSectionBase } from './card-section-base.directive';\n\nimport { Directive } from '@angular/core';\n\n@Directive({\n  selector: 'ids-card-footer,footer[idsCardFooter]',\n  standalone: true,\n  host: {\n    class: 'ids-card-footer',\n  },\n})\nexport class IdsCardFooterDirective extends IdsCardSectionBase {}\n","import { IdsCardSectionBase } from './card-section-base.directive';\n\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ids-card-header,header[idsCardHeader]',\n  imports: [],\n  template: `\n    <div class=\"ids-card-header-headline\">\n      <ng-content select=\"ids-card-title, [idsCardTitle], ids-card-subtitle, [idsCardSubtitle]\" />\n    </div>\n    <ng-content />\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'ids-card-header',\n  },\n})\nexport class IdsCardHeaderComponent extends IdsCardSectionBase {}\n","import { IdsCardSectionBase } from './card-section-base.directive';\n\nimport { Directive, input } from '@angular/core';\n\n@Directive({\n  selector: '[idsCardMedia]',\n  standalone: true,\n  host: {\n    class: 'ids-card-media',\n  },\n})\nexport class IdsCardMediaDirective extends IdsCardSectionBase {\n  public override stretch = input(true);\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[idsCardSubtitle]',\n  standalone: true,\n  host: {\n    class: 'ids-card-subtitle',\n  },\n})\nexport class IdsCardSubtitleDirective {}\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[idsCardTitle]',\n  standalone: true,\n  host: {\n    class: 'ids-card-title',\n  },\n})\nexport class IdsCardTitleDirective {}\n","import { IDS_CARD_DEFAULT_CONFIG, IDS_CARD_DEFAULT_CONFIG_FACTORY, IdsCardDefaultConfig } from './card-defaults';\nimport { IdsCardAppearanceType } from './types/card-appearances.type';\nimport { IdsCardVariantType } from './types/card-variant.type';\n\nimport { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output, ViewEncapsulation, computed, input, signal } from '@angular/core';\nimport { ComponentBaseWithDefaults, IdsOrientationType, IdsSizeType, coerceBooleanAttribute } from '@i-cell/ids-angular/core';\n\nconst defaultConfig = IDS_CARD_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'ids-card,div[idsCard],article[idsCard],aside[idsCard],section[idsCard]',\n  imports: [],\n  template: `\n    <ng-content />\n    <ng-content select=\"ids-card-footer,footer[idsCardFooter]\" />\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.aria-disabled]': 'this.disabled()? \"\" : null',\n    '[attr.tabindex]': ' this._hasClickHandler() ? 0 : null',\n  },\n})\nexport class IdsCardComponent extends ComponentBaseWithDefaults<IdsCardDefaultConfig> implements OnInit {\n  protected override get _hostName(): string {\n    return 'card';\n  }\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_CARD_DEFAULT_CONFIG);\n\n  public appearance = input<IdsCardAppearanceType>(this._defaultConfig.appearance);\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n  public variant = input<IdsCardVariantType>(this._defaultConfig.variant);\n  public orientation = input<IdsOrientationType>(this._defaultConfig.orientation);\n  public disabled = input(false, { transform: (value: boolean | string) => coerceBooleanAttribute(value) });\n\n  // Old fashion output for now, signal outputs cannot be queried as of now for subscribers\n  @Output()\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  public click = new EventEmitter();\n\n  private _hasClickHandler = signal(false);\n\n  protected _hostClasses = computed(() => this._getHostClasses([\n    this.appearance(),\n    this.size(),\n    this.variant(),\n    this.orientation(),\n    this.disabled() && this._hasClickHandler() ? 'disabled' : null,\n    this._hasClickHandler() ? 'clickable' : null,\n  ]));\n\n  public ngOnInit(): void {\n    this._hasClickHandler.set(this.click.observed);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/i-cell-ids-angular-checkbox.mjs

@@ -0,0 +1,346 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injector, ChangeDetectorRef, signal, computed, input, model, output, viewChild, contentChildren, Component, ViewEncapsulation, ChangeDetectionStrategy, effect } from '@angular/core';
+import { IdsSize, IdsOrientation, ComponentBaseWithDefaults, coerceBooleanAttribute, coerceNumberAttribute, isString } from '@i-cell/ids-angular/core';
+import { NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { IdsHintMessageComponent, IdsErrorMessageComponent, IdsValidators, IDS_FORM_FIELD_CONTROL } from '@i-cell/ids-angular/forms';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+
+class IdsCheckBoxChangeEvent {
+}
+
+const IdsCheckboxState = {
+    UNCHECKED: 'unchecked',
+    CHECKED: 'checked',
+    INDETERMINATE: 'indeterminate',
+};
+
+const IdsCheckboxVariant = {
+    SURFACE: 'surface',
+    LIGHT: 'light',
+    DARK: 'dark',
+};
+
+const IDS_CHECKBOX_DEFAULT_CONFIG = new InjectionToken('IDS_CHECKBOX_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY() {
+    return {
+        size: IdsSize.COMPACT,
+        variant: IdsCheckboxVariant.SURFACE,
+    };
+}
+
+const IDS_CHECKBOX_GROUP_DEFAULT_CONFIG = new InjectionToken('IDS_CHECKBOX_GROUP_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY() {
+    return {
+        ...IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY(),
+        orientation: IdsOrientation.VERTICAL,
+        allowParent: true,
+    };
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const IDS_CHECKBOX_GROUP_CHILD = new InjectionToken('IDS_CHECKBOX_GROUP_CHILD');
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const IDS_CHECKBOX_PARENT = new InjectionToken('IDS_CHECKBOX_PARENT');
+
+const defaultConfig$1 = IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY();
+class IdsCheckboxComponent extends ComponentBaseWithDefaults {
+    constructor() {
+        super(...arguments);
+        this._injector = inject(Injector);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._defaultConfig = this._getDefaultConfig(defaultConfig$1, IDS_CHECKBOX_DEFAULT_CONFIG);
+        this._checkboxGroup = inject(IDS_CHECKBOX_PARENT, { optional: true });
+        this._checkboxState = signal(IdsCheckboxState.UNCHECKED);
+        this.inputId = computed(() => `${this.id()}-input`);
+        this.name = input();
+        this.required = input(false, { transform: coerceBooleanAttribute });
+        this.readonly = input(false, { transform: coerceBooleanAttribute });
+        this.size = input(this._defaultConfig.size);
+        this.tabIndex = input(0, { transform: coerceNumberAttribute });
+        this.value = input();
+        this.variant = input(this._defaultConfig.variant);
+        this.checked = input(false, { transform: coerceBooleanAttribute });
+        this.indeterminate = input(false, { transform: coerceBooleanAttribute });
+        this.ariaLabel = input('', { alias: 'aria-label' });
+        this.ariaLabelledby = input(null, { alias: 'aria-labelledby' });
+        this.ariaDescribedby = input('', { alias: 'aria-describedby' });
+        this.disabled = model(false);
+        this.isChecked = computed(() => this._checkboxState() === IdsCheckboxState.CHECKED);
+        this.isIndeterminate = computed(() => this._checkboxState() === IdsCheckboxState.INDETERMINATE);
+        this.isFocusable = computed(() => !this.disabled() && !this.readonly());
+        this._hostClasses = computed(() => this._getHostClasses([
+            this._parentOrSelfSize(),
+            this._parentOrSelfVariant(),
+            this.disabled() ? 'disabled' : null,
+        ]));
+        this._nativeValue = computed(() => {
+            const value = this.value();
+            return isString(value) ? value : undefined;
+        });
+        this._parentOrSelfSize = computed(() => this._checkboxGroup?.size() ?? this.size());
+        this._parentOrSelfVariant = computed(() => this._checkboxGroup?.variant() ?? this.variant());
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        this.controlDir = null;
+        this.change = output();
+        this.indeterminateChange = output();
+        this._inputElement = viewChild.required('inputEl');
+        this._hintMessages = contentChildren(IdsHintMessageComponent, { descendants: true });
+        this._errorMessages = contentChildren(IdsErrorMessageComponent, { descendants: true });
+    }
+    get _hostName() {
+        return 'checkbox';
+    }
+    ngOnChanges(changes) {
+        const checkedChange = changes['checked'];
+        const indeterminateChange = changes['indeterminate'];
+        if (indeterminateChange || checkedChange) {
+            const currentChecked = checkedChange?.currentValue;
+            const currentIndeterminate = indeterminateChange?.currentValue;
+            if (currentIndeterminate === true) {
+                this._checkboxState.set(IdsCheckboxState.INDETERMINATE);
+            }
+            else if (currentChecked === true) {
+                this._checkboxState.set(IdsCheckboxState.CHECKED);
+            }
+            else {
+                this._checkboxState.set(IdsCheckboxState.UNCHECKED);
+            }
+        }
+    }
+    ngOnInit() {
+        this.controlDir = this._injector.get(NgControl, null, { self: true, optional: true });
+    }
+    ngAfterViewInit() {
+        if (this.indeterminate !== undefined) {
+            this._syncIndeterminate(this.indeterminate());
+        }
+    }
+    focus() {
+        this._inputElement().nativeElement.focus();
+    }
+    writeValue(value) {
+        if (this.isIndeterminate()) {
+            this._checkboxState.set(IdsCheckboxState.INDETERMINATE);
+        }
+        else {
+            this._checkboxState.set(value ? IdsCheckboxState.CHECKED : IdsCheckboxState.UNCHECKED);
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    _createChangeEvent(isChecked, value) {
+        const event = new IdsCheckBoxChangeEvent();
+        event.source = this;
+        event.checked = isChecked;
+        event.value = value;
+        return event;
+    }
+    _emitChangeEvent() {
+        this._onChange(this.isChecked());
+        this.change.emit(this._createChangeEvent(this.isChecked(), this.value()));
+        this._syncChecked(this.isChecked());
+    }
+    toggle() {
+        if (this.isIndeterminate()) {
+            this._checkboxState.set(IdsCheckboxState.CHECKED);
+        }
+        else {
+            this._checkboxState.set(this._checkboxState() === IdsCheckboxState.CHECKED ? IdsCheckboxState.UNCHECKED : IdsCheckboxState.CHECKED);
+        }
+        this._onChange(this.isChecked());
+    }
+    select() {
+        this._checkboxState.set(IdsCheckboxState.CHECKED);
+        this._onChange(this.isChecked());
+    }
+    deselect() {
+        this._checkboxState.set(IdsCheckboxState.UNCHECKED);
+        this._onChange(this.isChecked());
+    }
+    _handleInputClick() {
+        if (this.isIndeterminate()) {
+            this._checkboxState.set(IdsCheckboxState.CHECKED);
+            this.indeterminateChange.emit(this.isIndeterminate());
+        }
+        else {
+            this._checkboxState.set(this._checkboxState() === IdsCheckboxState.CHECKED ? IdsCheckboxState.UNCHECKED : IdsCheckboxState.CHECKED);
+        }
+        this._emitChangeEvent();
+        this._syncIndeterminate(this.isIndeterminate());
+    }
+    onBlur() {
+        Promise.resolve().then(() => {
+            this._onTouched();
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    _syncChecked(value) {
+        const nativeCheckbox = this._inputElement();
+        nativeCheckbox.nativeElement.checked = value;
+    }
+    _syncIndeterminate(value) {
+        const nativeCheckbox = this._inputElement();
+        nativeCheckbox.nativeElement.indeterminate = value;
+    }
+    onInputClick() {
+        if (!this.readonly() && !this.disabled()) {
+            this._handleInputClick();
+        }
+    }
+    onTouchTargetClick() {
+        if (!this.readonly() && !this.disabled()) {
+            this._handleInputClick();
+        }
+        if (!this.disabled()) {
+            this._inputElement().nativeElement.focus();
+        }
+    }
+    get displayedMessages() {
+        if (this._errorMessages().length > 0 && this.controlDir?.errors) {
+            return 'error';
+        }
+        if (this._hintMessages().length > 0) {
+            return 'hint';
+        }
+        return undefined;
+    }
+    get hasRequiredValidator() {
+        const control = this.controlDir?.control;
+        if (!control) {
+            return this.required();
+        }
+        return control.hasValidator(Validators.required)
+            || control.hasValidator(Validators.requiredTrue)
+            || control.hasValidator(IdsValidators.required)
+            || control.hasValidator(IdsValidators.requiredTrue)
+            || control.hasValidator(IdsValidators.requiredFalse);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsCheckboxComponent, isStandalone: true, selector: "ids-checkbox", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", change: "change", indeterminateChange: "indeterminateChange" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: IdsCheckboxComponent,
+                multi: true,
+            },
+            {
+                provide: IDS_FORM_FIELD_CONTROL,
+                useExisting: IdsCheckboxComponent,
+            },
+            {
+                provide: IDS_CHECKBOX_GROUP_CHILD,
+                useExisting: IdsCheckboxComponent,
+            },
+        ], queries: [{ propertyName: "_hintMessages", predicate: IdsHintMessageComponent, descendants: true, isSignal: true }, { propertyName: "_errorMessages", predicate: IdsErrorMessageComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"ids-checkbox__input-wrapper\">\n  <div class=\"ids-checkbox__touch-target\" (click)=\"onTouchTargetClick()\"></div>\n  <input\n    #inputEl\n    type=\"checkbox\"\n    [class.ids-checkbox--selected]=\"isChecked()\"\n    [id]=\"inputId()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby()\"\n    [attr.aria-describedby]=\"ariaDescribedby()\"\n    [checked]=\"isChecked()\"\n    [indeterminate]=\"isIndeterminate()\"\n    [name]=\"name()\"\n    [required]=\"required()\"\n    [tabIndex]=\"!isFocusable() ? -1 : tabIndex()\"\n    [value]=\"_nativeValue()\"\n    (blur)=\"onBlur()\"\n    (click)=\"onInputClick()\"\n    (change)=\"$event.stopPropagation()\"\n  />\n  <div class=\"ids-checkbox__icon\" aria-hidden=\"true\">\n    @if (isIndeterminate()) {\n      <ids-icon fontIcon=\"minus\" aria-hidden=\"true\" />\n    }\n    @if (isChecked()) {\n      <ids-icon fontIcon=\"check\" aria-hidden=\"true\" />\n    }\n  </div>\n</div>\n\n<div class=\"ids-checkbox__label-wrapper\">\n  <div class=\"ids-checkbox__label-container\">\n    <label class=\"ids-checkbox__label\" [for]=\"inputId()\">\n      <ng-content />\n      @if (hasRequiredValidator) {\n        <span class=\"ids-form-field__required-marker\"></span>\n      }\n    </label>\n  </div>\n  @let messages = displayedMessages;\n  @if (messages) {\n    <div class=\"ids-checkbox__message-container\">\n      @switch (messages) {\n        @case (\"error\") {\n          <ng-content select=\"ids-error-message\" />\n        }\n        @case (\"hint\") {\n          <ng-content select=\"ids-hint-message\" />\n        }\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-checkbox', imports: [IdsIconComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: IdsCheckboxComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: IDS_FORM_FIELD_CONTROL,
+                            useExisting: IdsCheckboxComponent,
+                        },
+                        {
+                            provide: IDS_CHECKBOX_GROUP_CHILD,
+                            useExisting: IdsCheckboxComponent,
+                        },
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-labelledby]': 'null',
+                    }, template: "<div class=\"ids-checkbox__input-wrapper\">\n  <div class=\"ids-checkbox__touch-target\" (click)=\"onTouchTargetClick()\"></div>\n  <input\n    #inputEl\n    type=\"checkbox\"\n    [class.ids-checkbox--selected]=\"isChecked()\"\n    [id]=\"inputId()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby()\"\n    [attr.aria-describedby]=\"ariaDescribedby()\"\n    [checked]=\"isChecked()\"\n    [indeterminate]=\"isIndeterminate()\"\n    [name]=\"name()\"\n    [required]=\"required()\"\n    [tabIndex]=\"!isFocusable() ? -1 : tabIndex()\"\n    [value]=\"_nativeValue()\"\n    (blur)=\"onBlur()\"\n    (click)=\"onInputClick()\"\n    (change)=\"$event.stopPropagation()\"\n  />\n  <div class=\"ids-checkbox__icon\" aria-hidden=\"true\">\n    @if (isIndeterminate()) {\n      <ids-icon fontIcon=\"minus\" aria-hidden=\"true\" />\n    }\n    @if (isChecked()) {\n      <ids-icon fontIcon=\"check\" aria-hidden=\"true\" />\n    }\n  </div>\n</div>\n\n<div class=\"ids-checkbox__label-wrapper\">\n  <div class=\"ids-checkbox__label-container\">\n    <label class=\"ids-checkbox__label\" [for]=\"inputId()\">\n      <ng-content />\n      @if (hasRequiredValidator) {\n        <span class=\"ids-form-field__required-marker\"></span>\n      }\n    </label>\n  </div>\n  @let messages = displayedMessages;\n  @if (messages) {\n    <div class=\"ids-checkbox__message-container\">\n      @switch (messages) {\n        @case (\"error\") {\n          <ng-content select=\"ids-error-message\" />\n        }\n        @case (\"hint\") {\n          <ng-content select=\"ids-hint-message\" />\n        }\n      }\n    </div>\n  }\n</div>\n" }]
+        }] });
+
+const defaultConfig = IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY();
+class IdsCheckboxGroupComponent extends ComponentBaseWithDefaults {
+    constructor() {
+        super(...arguments);
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_CHECKBOX_GROUP_DEFAULT_CONFIG);
+        this._childCheckboxes = contentChildren(IDS_CHECKBOX_GROUP_CHILD);
+        this.groupLabel = input('', { alias: 'label' });
+        this.allowParent = input(this._defaultConfig.allowParent);
+        this.parentCheckboxLabel = input('', { alias: 'parentLabel' });
+        this.name = input();
+        this.size = input(this._defaultConfig.size);
+        this.variant = input(this._defaultConfig.variant);
+        this.orientation = input(this._defaultConfig.orientation);
+        this._groupLabelId = computed(() => `${this.id()}-label`);
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.size(),
+            this.variant(),
+            this.orientation(),
+        ]));
+        this._parentCheckboxChecked = computed(() => this._childCheckboxes().every((child) => child.isChecked()));
+        this._parentCheckboxIndeterminate = computed(() => !this._parentCheckboxChecked() && this._childCheckboxes().some((child) => child.isChecked()));
+        this._invalidParentOrientation = effect(() => {
+            if (this.allowParent() && this.orientation() === IdsOrientation.HORIZONTAL) {
+                throw this._createHostError('Parent checkbox can be used only in vertical orientation');
+            }
+        });
+    }
+    get _hostName() {
+        return 'checkbox-group';
+    }
+    selectAllChild() {
+        this._childCheckboxes().forEach((child) => {
+            child.select();
+        });
+    }
+    deselectAllChild() {
+        this._childCheckboxes().forEach((child) => {
+            child.deselect();
+        });
+    }
+    _handleParentChange(event) {
+        if (event.checked) {
+            this.selectAllChild();
+        }
+        else {
+            this.deselectAllChild();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCheckboxGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsCheckboxGroupComponent, isStandalone: true, selector: "ids-checkbox-group", inputs: { groupLabel: { classPropertyName: "groupLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, allowParent: { classPropertyName: "allowParent", publicName: "allowParent", isSignal: true, isRequired: false, transformFunction: null }, parentCheckboxLabel: { classPropertyName: "parentCheckboxLabel", publicName: "parentLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "_groupLabelId()" } }, providers: [
+            {
+                provide: IDS_CHECKBOX_PARENT,
+                useExisting: IdsCheckboxGroupComponent,
+            },
+        ], queries: [{ propertyName: "_childCheckboxes", predicate: IDS_CHECKBOX_GROUP_CHILD, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"ids-checkbox-group__label\" [for]=\"id()\" [id]=\"_groupLabelId()\">{{ groupLabel() }}</label>\n\n@if (allowParent()) {\n  <ids-checkbox\n    [checked]=\"_parentCheckboxChecked()\"\n    [indeterminate]=\"_parentCheckboxIndeterminate()\"\n    (change)=\"_handleParentChange($event)\"\n    >{{ parentCheckboxLabel() }}</ids-checkbox\n  >\n}\n\n<div class=\"ids-checkbox-group__list\">\n  <ng-content select=\"ids-checkbox\" />\n</div>\n", dependencies: [{ kind: "component", type: IdsCheckboxComponent, selector: "ids-checkbox", inputs: ["name", "required", "readonly", "size", "tabIndex", "value", "variant", "checked", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "disabled"], outputs: ["disabledChange", "change", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsCheckboxGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-checkbox-group', imports: [IdsCheckboxComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'role': 'group',
+                        '[attr.aria-labelledby]': '_groupLabelId()',
+                    }, providers: [
+                        {
+                            provide: IDS_CHECKBOX_PARENT,
+                            useExisting: IdsCheckboxGroupComponent,
+                        },
+                    ], template: "<label class=\"ids-checkbox-group__label\" [for]=\"id()\" [id]=\"_groupLabelId()\">{{ groupLabel() }}</label>\n\n@if (allowParent()) {\n  <ids-checkbox\n    [checked]=\"_parentCheckboxChecked()\"\n    [indeterminate]=\"_parentCheckboxIndeterminate()\"\n    (change)=\"_handleParentChange($event)\"\n    >{{ parentCheckboxLabel() }}</ids-checkbox\n  >\n}\n\n<div class=\"ids-checkbox-group__list\">\n  <ng-content select=\"ids-checkbox\" />\n</div>\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IDS_CHECKBOX_DEFAULT_CONFIG, IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY, IDS_CHECKBOX_GROUP_DEFAULT_CONFIG, IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY, IdsCheckBoxChangeEvent, IdsCheckboxComponent, IdsCheckboxGroupComponent, IdsCheckboxState, IdsCheckboxVariant };
+//# sourceMappingURL=i-cell-ids-angular-checkbox.mjs.map