@i-cell/ids-angular 0.0.0-watch

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

@@ -0,0 +1,223 @@
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, contentChildren, input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild } from '@angular/core';
+import { IdsButtonVariant, IdsButtonAppearance, IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsSize, ComponentBaseWithDefaults, coerceBooleanAttribute, coerceStringAttribute, ComponentBase } from '@i-cell/ids-angular/core';
+import * as i1 from '@angular/cdk/accordion';
+import { CdkAccordion, CdkAccordionItem } from '@angular/cdk/accordion';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+
+const accordionAnimations = trigger('accordionAnimations', [
+    state('expanded', style({
+        height: '*',
+        opacity: 1,
+        transform: 'scaleY(1)',
+        visibility: '',
+    })),
+    state('collapsed', style({
+        height: '0',
+        opacity: 0,
+        transform: 'scaleY(0.3)',
+        padding: 0,
+        visibility: 'hidden',
+    })),
+    transition('expanded => collapsed', [animate('0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000)')]),
+    transition('collapsed => expanded', [animate('0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940)')]),
+]);
+
+const IdsAccordionAppearance = {
+    FILLED: 'filled',
+    TEXT: 'text',
+};
+
+const IDS_ACCORDION_DEFAULT_CONFIG = new InjectionToken('IDS_ACCORDION_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_ACCORDION_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_ACCORDION_DEFAULT_CONFIG_FACTORY() {
+    return {
+        size: IdsSize.COMPACT,
+        appearance: IdsAccordionAppearance.FILLED,
+        multi: false,
+        btnSize: IdsSize.COMPACT,
+        btnAppearance: IdsButtonAppearance.FILLED,
+        btnVariant: IdsButtonVariant.SURFACE,
+        expandBtnLabel: 'Expand all',
+        collapseBtnLabel: 'Collapse all',
+        hasLeadingIcon: false,
+        hasTrailingIcon: true,
+    };
+}
+
+const defaultConfig = IDS_ACCORDION_DEFAULT_CONFIG_FACTORY();
+class IdsAccordionComponent extends ComponentBaseWithDefaults {
+    constructor() {
+        super(...arguments);
+        this._cdkAccordion = inject(CdkAccordion);
+        this._items = contentChildren(IdsAccordionItemComponent, ...(ngDevMode ? [{ debugName: "_items" }] : []));
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_ACCORDION_DEFAULT_CONFIG);
+        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.appearance = input(this._defaultConfig.appearance, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
+        this.hasLeadingIcon = input(this._defaultConfig.hasLeadingIcon, ...(ngDevMode ? [{ debugName: "hasLeadingIcon", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
+        this.hasTrailingIcon = input(this._defaultConfig.hasTrailingIcon, ...(ngDevMode ? [{ debugName: "hasTrailingIcon", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
+        this.multi = input(this._defaultConfig.multi, ...(ngDevMode ? [{ debugName: "multi" }] : []));
+        this.btnSize = input(this._defaultConfig.btnSize, ...(ngDevMode ? [{ debugName: "btnSize" }] : []));
+        this.btnAppearance = input(this._defaultConfig.btnAppearance, ...(ngDevMode ? [{ debugName: "btnAppearance" }] : []));
+        this.btnVariant = input(this._defaultConfig.btnVariant, ...(ngDevMode ? [{ debugName: "btnVariant" }] : []));
+        this.expandBtnLabel = input(this._defaultConfig.expandBtnLabel, ...(ngDevMode ? [{ debugName: "expandBtnLabel", transform: coerceStringAttribute }] : [{ transform: coerceStringAttribute }]));
+        this.collapseBtnLabel = input(this._defaultConfig.collapseBtnLabel, ...(ngDevMode ? [{ debugName: "collapseBtnLabel", transform: coerceStringAttribute }] : [{ transform: coerceStringAttribute }]));
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.size(),
+            this.appearance(),
+            this.disabled() ? 'disabled' : null,
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+    }
+    get _hostName() {
+        return 'accordion';
+    }
+    openAll() {
+        if (!this.disabled()) {
+            this._cdkAccordion.openAll();
+        }
+    }
+    closeAll() {
+        if (!this.disabled()) {
+            this._cdkAccordion.closeAll();
+        }
+    }
+    _handleKeyDown(event) {
+        const navigationKeys = [
+            'Enter',
+            ' ',
+            'ArrowUp',
+            'ArrowDown',
+            'Home',
+            'End',
+        ];
+        if (!navigationKeys.includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        const items = this._items();
+        const target = event.target;
+        const accordionId = target.parentElement.id;
+        const index = items.findIndex((item) => item.id() === accordionId);
+        switch (event.key) {
+            case 'ArrowUp': {
+                if (index > 0) {
+                    const prevItem = items[index - 1];
+                    prevItem.focus();
+                }
+                break;
+            }
+            case 'ArrowDown': {
+                if (index < items.length - 1) {
+                    const nextItem = items[index + 1];
+                    nextItem.focus();
+                }
+                break;
+            }
+            case 'Enter':
+            case ' ': {
+                items[index].toggle();
+                break;
+            }
+            case 'Home': {
+                items[0].focus();
+                break;
+            }
+            case 'End': {
+                items[items.length - 1].focus();
+                break;
+            }
+            default:
+                return;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsAccordionComponent, isStandalone: true, selector: "ids-accordion", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasLeadingIcon: { classPropertyName: "hasLeadingIcon", publicName: "hasLeadingIcon", isSignal: true, isRequired: false, transformFunction: null }, hasTrailingIcon: { classPropertyName: "hasTrailingIcon", publicName: "hasTrailingIcon", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, btnSize: { classPropertyName: "btnSize", publicName: "btnSize", isSignal: true, isRequired: false, transformFunction: null }, btnAppearance: { classPropertyName: "btnAppearance", publicName: "btnAppearance", isSignal: true, isRequired: false, transformFunction: null }, btnVariant: { classPropertyName: "btnVariant", publicName: "btnVariant", isSignal: true, isRequired: false, transformFunction: null }, expandBtnLabel: { classPropertyName: "expandBtnLabel", publicName: "expandBtnLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseBtnLabel: { classPropertyName: "collapseBtnLabel", publicName: "collapseBtnLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "_handleKeyDown($event)" } }, queries: [{ propertyName: "_items", predicate: IdsAccordionItemComponent, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.CdkAccordion, inputs: ["multi", "multi"] }], ngImport: i0, template: "@if (multi()) {\n  <div class=\"ids-accordion-controls\">\n    <button\n      type=\"button\"\n      idsButton\n      [appearance]=\"btnAppearance()\"\n      [disabled]=\"disabled()\"\n      [variant]=\"btnVariant()\"\n      [size]=\"btnSize()\"\n      (click)=\"openAll()\"\n    >\n      {{ expandBtnLabel() }}\n    </button>\n    <button\n      type=\"button\"\n      idsButton\n      [appearance]=\"btnAppearance()\"\n      [disabled]=\"disabled()\"\n      [variant]=\"btnVariant()\"\n      [size]=\"btnSize()\"\n      (click)=\"closeAll()\"\n    >\n      {{ collapseBtnLabel() }}\n    </button>\n  </div>\n}\n<ng-content />\n", dependencies: [{ kind: "component", type: IdsButtonComponent, selector: "button[idsButton], a[idsButton]", inputs: ["appearance", "size", "variant", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-accordion', imports: [IdsButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(keydown)': '_handleKeyDown($event)',
+                    }, hostDirectives: [
+                        {
+                            directive: CdkAccordion,
+                            inputs: ['multi'],
+                        },
+                    ], template: "@if (multi()) {\n  <div class=\"ids-accordion-controls\">\n    <button\n      type=\"button\"\n      idsButton\n      [appearance]=\"btnAppearance()\"\n      [disabled]=\"disabled()\"\n      [variant]=\"btnVariant()\"\n      [size]=\"btnSize()\"\n      (click)=\"openAll()\"\n    >\n      {{ expandBtnLabel() }}\n    </button>\n    <button\n      type=\"button\"\n      idsButton\n      [appearance]=\"btnAppearance()\"\n      [disabled]=\"disabled()\"\n      [variant]=\"btnVariant()\"\n      [size]=\"btnSize()\"\n      (click)=\"closeAll()\"\n    >\n      {{ collapseBtnLabel() }}\n    </button>\n  </div>\n}\n<ng-content />\n" }]
+        }] });
+
+class IdsAccordionItemComponent extends ComponentBase {
+    constructor() {
+        super(...arguments);
+        this._accordion = inject(IdsAccordionComponent, { skipSelf: true });
+        this._accordionItem = inject(CdkAccordionItem);
+        this._accordionHeader = viewChild.required('header');
+        this.summary = input(...(ngDevMode ? [undefined, { debugName: "summary" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.hasLeadingIcon = input(false, ...(ngDevMode ? [{ debugName: "hasLeadingIcon", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
+        this.hasTrailingIcon = input(this._accordion.hasTrailingIcon(), ...(ngDevMode ? [{ debugName: "hasTrailingIcon", transform: coerceBooleanAttribute }] : [{ transform: coerceBooleanAttribute }]));
+        this._headerId = computed(() => `${this.id()}-header`, ...(ngDevMode ? [{ debugName: "_headerId" }] : []));
+        this._contentId = computed(() => `${this.id()}-content`, ...(ngDevMode ? [{ debugName: "_contentId" }] : []));
+        this._parentOrSelfHasLeadingIcon = computed(() => this._accordion.hasLeadingIcon() ?? this.hasLeadingIcon(), ...(ngDevMode ? [{ debugName: "_parentOrSelfHasLeadingIcon" }] : []));
+        this._parentOrSelfHasTrailingIcon = computed(() => this._accordion.hasTrailingIcon() ?? this.hasTrailingIcon(), ...(ngDevMode ? [{ debugName: "_parentOrSelfHasTrailingIcon" }] : []));
+        this._parentOrSelfDisabled = computed(() => this._accordion.disabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_parentOrSelfDisabled" }] : []));
+        this._hostClasses = computed(() => this._getHostClasses([this._parentOrSelfDisabled() ? 'disabled' : null]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+    }
+    get _hostName() {
+        return 'accordion-item';
+    }
+    get _icon() {
+        return this.isExpanded ? 'chevron-up' : 'chevron-down';
+    }
+    get isExpanded() {
+        return this._accordionItem.expanded;
+    }
+    open() {
+        if (!this._parentOrSelfDisabled()) {
+            this._accordionItem.open();
+        }
+    }
+    close() {
+        if (!this._parentOrSelfDisabled()) {
+            this._accordionItem.close();
+        }
+    }
+    toggle() {
+        if (!this._parentOrSelfDisabled()) {
+            this._accordionItem.toggle();
+        }
+    }
+    focus(options) {
+        this._accordionHeader().nativeElement.focus(options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAccordionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsAccordionItemComponent, isStandalone: true, selector: "ids-accordion-item", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasLeadingIcon: { classPropertyName: "hasLeadingIcon", publicName: "hasLeadingIcon", isSignal: true, isRequired: false, transformFunction: null }, hasTrailingIcon: { classPropertyName: "hasTrailingIcon", publicName: "hasTrailingIcon", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_accordionHeader", first: true, predicate: ["header"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.CdkAccordionItem, inputs: ["expanded", "expanded", "disabled", "disabled"], outputs: ["closed", "closed", "destroyed", "destroyed", "opened", "opened"] }], ngImport: i0, template: "<div\n  #header\n  role=\"button\"\n  class=\"ids-accordion-item-summary\"\n  [id]=\"_headerId()\"\n  [attr.aria-expanded]=\"isExpanded ? 'true' : 'false'\"\n  [attr.aria-controls]=\"_contentId()\"\n  [attr.tabindex]=\"_parentOrSelfDisabled() ? -1 : 0\"\n  [attr.aria-disabled]=\"_parentOrSelfDisabled()\"\n  (click)=\"toggle()\"\n>\n  @if (_parentOrSelfHasLeadingIcon()) {\n    <ids-icon icon-leading [fontIcon]=\"_icon\" />\n  }\n  <span class=\"ids-accordion-item-title\">{{ summary() }}</span>\n  @if (_parentOrSelfHasTrailingIcon()) {\n    <ids-icon icon-trailing [fontIcon]=\"_icon\" />\n  }\n</div>\n<div\n  role=\"region\"\n  class=\"ids-accordion-item-content\"\n  [id]=\"_contentId()\"\n  [attr.aria-labelledby]=\"_headerId()\"\n  [@accordionAnimations]=\"isExpanded ? 'expanded' : 'collapsed'\"\n>\n  <ng-content />\n</div>\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], animations: [accordionAnimations], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-accordion-item', imports: [IdsIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [accordionAnimations], hostDirectives: [
+                        {
+                            directive: CdkAccordionItem,
+                            inputs: [
+                                'expanded',
+                                'disabled',
+                            ],
+                            outputs: [
+                                'closed',
+                                'destroyed',
+                                'opened',
+                            ],
+                        },
+                    ], template: "<div\n  #header\n  role=\"button\"\n  class=\"ids-accordion-item-summary\"\n  [id]=\"_headerId()\"\n  [attr.aria-expanded]=\"isExpanded ? 'true' : 'false'\"\n  [attr.aria-controls]=\"_contentId()\"\n  [attr.tabindex]=\"_parentOrSelfDisabled() ? -1 : 0\"\n  [attr.aria-disabled]=\"_parentOrSelfDisabled()\"\n  (click)=\"toggle()\"\n>\n  @if (_parentOrSelfHasLeadingIcon()) {\n    <ids-icon icon-leading [fontIcon]=\"_icon\" />\n  }\n  <span class=\"ids-accordion-item-title\">{{ summary() }}</span>\n  @if (_parentOrSelfHasTrailingIcon()) {\n    <ids-icon icon-trailing [fontIcon]=\"_icon\" />\n  }\n</div>\n<div\n  role=\"region\"\n  class=\"ids-accordion-item-content\"\n  [id]=\"_contentId()\"\n  [attr.aria-labelledby]=\"_headerId()\"\n  [@accordionAnimations]=\"isExpanded ? 'expanded' : 'collapsed'\"\n>\n  <ng-content />\n</div>\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IDS_ACCORDION_DEFAULT_CONFIG, IDS_ACCORDION_DEFAULT_CONFIG_FACTORY, IdsAccordionAppearance, IdsAccordionComponent, IdsAccordionItemComponent, accordionAnimations };
+//# sourceMappingURL=i-cell-ids-angular-accordion.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"i-cell-ids-angular-accordion.mjs","sources":["../../../projects/widgets/accordion/accordion-animations.ts","../../../projects/widgets/accordion/types/accordion-appearance.type.ts","../../../projects/widgets/accordion/accordion-defaults.ts","../../../projects/widgets/accordion/accordion.component.ts","../../../projects/widgets/accordion/accordion.component.html","../../../projects/widgets/accordion/accordion-item/accordion-item.component.ts","../../../projects/widgets/accordion/accordion-item/accordion-item.component.html","../../../projects/widgets/accordion/i-cell-ids-angular-accordion.ts"],"sourcesContent":["import { trigger, state, style, transition, animate } from '@angular/animations';\n\nexport const accordionAnimations = trigger('accordionAnimations', [\n  state('expanded', style({\n    height: '*',\n    opacity: 1,\n    transform: 'scaleY(1)',\n    visibility: '',\n  })),\n  state('collapsed', style({\n    height: '0',\n    opacity: 0,\n    transform: 'scaleY(0.3)',\n    padding: 0,\n    visibility: 'hidden',\n  })),\n  transition('expanded => collapsed', [animate('0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000)')]),\n  transition('collapsed => expanded', [animate('0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940)')]),\n]);\n","export const IdsAccordionAppearance = {\n  FILLED: 'filled',\n  TEXT: 'text',\n} as const;\n\nexport type IdsAccordionAppearanceType = (typeof IdsAccordionAppearance)[keyof typeof IdsAccordionAppearance];\n","import { IdsAccordionAppearance, IdsAccordionAppearanceType } from './types/accordion-appearance.type';\n\nimport { InjectionToken } from '@angular/core';\nimport { IdsButtonAppearance, IdsButtonAppearanceType, IdsButtonVariant, IdsButtonVariantType } from '@i-cell/ids-angular/button';\nimport { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';\n\nexport interface IdsAccordionDefaultConfig {\n  size?: IdsSizeType\n  appearance?: IdsAccordionAppearanceType\n  multi?: boolean,\n  btnSize?: IdsSizeType,\n  btnAppearance?: IdsButtonAppearanceType,\n  btnVariant?: IdsButtonVariantType,\n  expandBtnLabel?: string,\n  collapseBtnLabel?: string,\n  hasLeadingIcon?: boolean,\n  hasTrailingIcon?: boolean,\n}\n\nexport const IDS_ACCORDION_DEFAULT_CONFIG = new InjectionToken<IdsAccordionDefaultConfig>(\n  'IDS_ACCORDION_DEFAULT_CONFIG',\n  {\n    providedIn: 'root',\n    factory: IDS_ACCORDION_DEFAULT_CONFIG_FACTORY,\n  },\n);\n\nexport function IDS_ACCORDION_DEFAULT_CONFIG_FACTORY(): Required<IdsAccordionDefaultConfig> {\n  return {\n    size: IdsSize.COMPACT,\n    appearance: IdsAccordionAppearance.FILLED,\n    multi: false,\n    btnSize: IdsSize.COMPACT,\n    btnAppearance: IdsButtonAppearance.FILLED,\n    btnVariant: IdsButtonVariant.SURFACE,\n    expandBtnLabel: 'Expand all',\n    collapseBtnLabel: 'Collapse all',\n    hasLeadingIcon: false,\n    hasTrailingIcon: true,\n  };\n}\n","import { IDS_ACCORDION_DEFAULT_CONFIG, IDS_ACCORDION_DEFAULT_CONFIG_FACTORY, IdsAccordionDefaultConfig } from './accordion-defaults';\nimport { IdsAccordionItemComponent } from './accordion-item/accordion-item.component';\nimport { IdsAccordionAppearanceType } from './types/accordion-appearance.type';\n\nimport { CdkAccordion } from '@angular/cdk/accordion';\nimport { ChangeDetectionStrategy, Component, computed, contentChildren, inject, input, ViewEncapsulation } from '@angular/core';\nimport { IdsButtonAppearanceType, IdsButtonComponent, IdsButtonVariantType } from '@i-cell/ids-angular/button';\nimport { coerceBooleanAttribute, coerceStringAttribute, ComponentBaseWithDefaults, IdsSizeType } from '@i-cell/ids-angular/core';\n\nconst defaultConfig = IDS_ACCORDION_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'ids-accordion',\n  imports: [IdsButtonComponent],\n  templateUrl: './accordion.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '(keydown)': '_handleKeyDown($event)',\n  },\n  hostDirectives: [\n    {\n      directive: CdkAccordion,\n      inputs: ['multi'],\n    },\n  ],\n})\nexport class IdsAccordionComponent extends ComponentBaseWithDefaults<IdsAccordionDefaultConfig> {\n  protected override get _hostName(): string {\n    return 'accordion';\n  }\n\n  private _cdkAccordion = inject(CdkAccordion);\n  private _items = contentChildren<IdsAccordionItemComponent>(IdsAccordionItemComponent);\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_ACCORDION_DEFAULT_CONFIG);\n\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n  public appearance = input<IdsAccordionAppearanceType>(this._defaultConfig.appearance);\n  public disabled = input(false, { transform: coerceBooleanAttribute });\n  public hasLeadingIcon = input(this._defaultConfig.hasLeadingIcon, { transform: coerceBooleanAttribute });\n  public hasTrailingIcon = input(this._defaultConfig.hasTrailingIcon, { transform: coerceBooleanAttribute });\n  public multi = input<boolean>(this._defaultConfig.multi);\n  public btnSize = input<IdsSizeType>(this._defaultConfig.btnSize);\n  public btnAppearance = input<IdsButtonAppearanceType>(this._defaultConfig.btnAppearance);\n  public btnVariant = input<IdsButtonVariantType>(this._defaultConfig.btnVariant);\n  public expandBtnLabel = input<string, string>(this._defaultConfig.expandBtnLabel, { transform: coerceStringAttribute });\n  public collapseBtnLabel = input<string, string>(this._defaultConfig.collapseBtnLabel, { transform: coerceStringAttribute });\n\n  protected _hostClasses = computed(() => this._getHostClasses([\n    this.size(),\n    this.appearance(),\n    this.disabled() ? 'disabled' : null,\n  ]));\n\n  public openAll(): void {\n    if (!this.disabled()) {\n      this._cdkAccordion.openAll();\n    }\n  }\n\n  public closeAll(): void {\n    if (!this.disabled()) {\n      this._cdkAccordion.closeAll();\n    }\n  }\n\n  private _handleKeyDown(event: KeyboardEvent): void {\n    const navigationKeys = [\n      'Enter',\n      ' ',\n      'ArrowUp',\n      'ArrowDown',\n      'Home',\n      'End',\n    ];\n\n    if (!navigationKeys.includes(event.key)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const items = this._items();\n    const target = event.target as HTMLButtonElement;\n    const accordionId = target.parentElement!.id;\n    const index = items.findIndex((item) => item.id() === accordionId);\n\n    switch (event.key) {\n      case 'ArrowUp': {\n        if (index > 0) {\n          const prevItem = items[index - 1];\n          prevItem.focus();\n        }\n        break;\n      }\n      case 'ArrowDown': {\n        if (index < items.length - 1) {\n          const nextItem = items[index + 1];\n          nextItem.focus();\n        }\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        items[index].toggle();\n        break;\n      }\n      case 'Home': {\n        items[0].focus();\n        break;\n      }\n      case 'End': {\n        items[items.length - 1].focus();\n        break;\n      }\n      default:\n        return;\n    }\n  }\n}\n","@if (multi()) {\n  <div class=\"ids-accordion-controls\">\n    <button\n      type=\"button\"\n      idsButton\n      [appearance]=\"btnAppearance()\"\n      [disabled]=\"disabled()\"\n      [variant]=\"btnVariant()\"\n      [size]=\"btnSize()\"\n      (click)=\"openAll()\"\n    >\n      {{ expandBtnLabel() }}\n    </button>\n    <button\n      type=\"button\"\n      idsButton\n      [appearance]=\"btnAppearance()\"\n      [disabled]=\"disabled()\"\n      [variant]=\"btnVariant()\"\n      [size]=\"btnSize()\"\n      (click)=\"closeAll()\"\n    >\n      {{ collapseBtnLabel() }}\n    </button>\n  </div>\n}\n<ng-content />\n","import { accordionAnimations } from '../accordion-animations';\nimport { IdsAccordionComponent } from '../accordion.component';\n\nimport { CdkAccordionItem } from '@angular/cdk/accordion';\nimport { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input, viewChild, ViewEncapsulation } from '@angular/core';\nimport { coerceBooleanAttribute, ComponentBase } from '@i-cell/ids-angular/core';\nimport { IdsIconComponent } from '@i-cell/ids-angular/icon';\n\n@Component({\n  selector: 'ids-accordion-item',\n  imports: [IdsIconComponent],\n  templateUrl: './accordion-item.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [accordionAnimations],\n  hostDirectives: [\n    {\n      directive: CdkAccordionItem,\n      inputs: [\n        'expanded',\n        'disabled',\n      ],\n      outputs: [\n        'closed',\n        'destroyed',\n        'opened',\n      ],\n    },\n  ],\n})\nexport class IdsAccordionItemComponent extends ComponentBase {\n  protected override get _hostName(): string {\n    return 'accordion-item';\n  }\n\n  private _accordion = inject(IdsAccordionComponent, { skipSelf: true });\n  private _accordionItem = inject(CdkAccordionItem);\n  private _accordionHeader = viewChild.required<ElementRef<HTMLElement>>('header');\n\n  public summary = input<string | null>();\n  public disabled = input<boolean>(false);\n  public hasLeadingIcon = input(false, { transform: coerceBooleanAttribute });\n  public hasTrailingIcon = input(this._accordion.hasTrailingIcon(), { transform: coerceBooleanAttribute });\n\n  protected _headerId = computed(() => `${this.id()}-header`);\n  protected _contentId = computed(() => `${this.id()}-content`);\n  protected _parentOrSelfHasLeadingIcon = computed(() => this._accordion.hasLeadingIcon() ?? this.hasLeadingIcon());\n  protected _parentOrSelfHasTrailingIcon = computed(() => this._accordion.hasTrailingIcon() ?? this.hasTrailingIcon());\n  protected _parentOrSelfDisabled = computed(() => this._accordion.disabled() || this.disabled());\n\n  protected _hostClasses = computed(() => this._getHostClasses(\n    [this._parentOrSelfDisabled() ? 'disabled' : null],\n  ));\n\n  protected get _icon(): string {\n    return this.isExpanded ? 'chevron-up' : 'chevron-down';\n  }\n\n  public get isExpanded(): boolean {\n    return this._accordionItem.expanded;\n  }\n\n  public open(): void {\n    if (!this._parentOrSelfDisabled()) {\n      this._accordionItem.open();\n    }\n  }\n\n  public close(): void {\n    if (!this._parentOrSelfDisabled()) {\n      this._accordionItem.close();\n    }\n  }\n\n  public toggle(): void {\n    if (!this._parentOrSelfDisabled()) {\n      this._accordionItem.toggle();\n    }\n  }\n\n  public focus(options?: FocusOptions): void {\n    this._accordionHeader().nativeElement.focus(options);\n  }\n}\n","<div\n  #header\n  role=\"button\"\n  class=\"ids-accordion-item-summary\"\n  [id]=\"_headerId()\"\n  [attr.aria-expanded]=\"isExpanded ? 'true' : 'false'\"\n  [attr.aria-controls]=\"_contentId()\"\n  [attr.tabindex]=\"_parentOrSelfDisabled() ? -1 : 0\"\n  [attr.aria-disabled]=\"_parentOrSelfDisabled()\"\n  (click)=\"toggle()\"\n>\n  @if (_parentOrSelfHasLeadingIcon()) {\n    <ids-icon icon-leading [fontIcon]=\"_icon\" />\n  }\n  <span class=\"ids-accordion-item-title\">{{ summary() }}</span>\n  @if (_parentOrSelfHasTrailingIcon()) {\n    <ids-icon icon-trailing [fontIcon]=\"_icon\" />\n  }\n</div>\n<div\n  role=\"region\"\n  class=\"ids-accordion-item-content\"\n  [id]=\"_contentId()\"\n  [attr.aria-labelledby]=\"_headerId()\"\n  [@accordionAnimations]=\"isExpanded ? 'expanded' : 'collapsed'\"\n>\n  <ng-content />\n</div>\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-avatar.mjs

@@ -0,0 +1,125 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, inject, contentChild, input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { IdsSizeCollection, IdsSize, ComponentBaseWithDefaults } from '@i-cell/ids-angular/core';
+import { IdsIconComponent, IdsIconVariant, IDS_ICON_PARENT } from '@i-cell/ids-angular/icon';
+
+class IdsAvatarParent {
+}
+;
+const IDS_AVATAR_PARENT = new InjectionToken('IDS_AVATAR_PARENT');
+
+const IdsAvatarType = {
+    INITIALS: 'initials',
+    ICON: 'icon',
+    IMAGE: 'image',
+};
+
+const IdsAvatarVariant = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    SURFACE: 'surface',
+    LIGHT: 'light',
+    DARK: 'dark',
+};
+
+const IDS_AVATAR_DEFAULT_CONFIG = new InjectionToken('IDS_AVATAR_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_AVATAR_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_AVATAR_DEFAULT_CONFIG_FACTORY() {
+    return {
+        type: IdsAvatarType.INITIALS,
+        size: IdsSize.COMPACT,
+        sizeCollection: IdsSizeCollection.SMALL,
+        variant: IdsAvatarVariant.PRIMARY,
+    };
+}
+
+class IdsAvatarImageDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAvatarImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: IdsAvatarImageDirective, isStandalone: true, selector: "img[idsAvatarImage]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAvatarImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[idsAvatarImage]',
+                    standalone: true,
+                }]
+        }] });
+
+const defaultConfig = IDS_AVATAR_DEFAULT_CONFIG_FACTORY();
+class IdsAvatarComponent extends ComponentBaseWithDefaults {
+    constructor() {
+        super(...arguments);
+        this._parent = inject(IDS_AVATAR_PARENT, { optional: true });
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_AVATAR_DEFAULT_CONFIG);
+        this._avatarType = IdsAvatarType;
+        this._iconChild = contentChild(IdsIconComponent, ...(ngDevMode ? [{ debugName: "_iconChild" }] : []));
+        this._imageChild = contentChild(IdsAvatarImageDirective, ...(ngDevMode ? [{ debugName: "_imageChild" }] : []));
+        this.initials = input(null, ...(ngDevMode ? [{ debugName: "initials" }] : []));
+        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.sizeCollection = input(this._defaultConfig.sizeCollection, ...(ngDevMode ? [{ debugName: "sizeCollection" }] : []));
+        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
+        this._implicitAvatarType = computed(() => {
+            if (this._iconChild() && !this._imageChild()) {
+                return IdsAvatarType.ICON;
+            }
+            if (this._imageChild() && !this._iconChild()) {
+                return IdsAvatarType.IMAGE;
+            }
+            return IdsAvatarType.INITIALS;
+        }, ...(ngDevMode ? [{ debugName: "_implicitAvatarType" }] : []));
+        this._currentAvatarType = computed(() => this._implicitAvatarType() ?? this._defaultConfig.type, ...(ngDevMode ? [{ debugName: "_currentAvatarType" }] : []));
+        this._parentOrSelfVariant = computed(() => this._parent?.embeddedAvatarVariant() ?? this.variant(), ...(ngDevMode ? [{ debugName: "_parentOrSelfVariant" }] : []));
+        this._hostClasses = computed(() => this._getHostClasses([
+            [
+                'type',
+                this._currentAvatarType(),
+            ],
+            [
+                `${this.sizeCollection()}collection`,
+                this.size(),
+            ],
+            this._parentOrSelfVariant(),
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+        this.embeddedIconVariant = computed(() => {
+            const avatarVariant = this._parentOrSelfVariant();
+            switch (avatarVariant) {
+                case IdsAvatarVariant.PRIMARY:
+                case IdsAvatarVariant.SECONDARY:
+                case IdsAvatarVariant.DARK:
+                    return IdsIconVariant.LIGHT;
+                case IdsAvatarVariant.SURFACE:
+                    return IdsIconVariant.SURFACE;
+                case IdsAvatarVariant.LIGHT:
+                    return IdsIconVariant.SURFACE;
+            }
+        }, ...(ngDevMode ? [{ debugName: "embeddedIconVariant" }] : []));
+    }
+    get _hostName() {
+        return 'avatar';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAvatarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsAvatarComponent, isStandalone: true, selector: "ids-avatar", inputs: { initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sizeCollection: { classPropertyName: "sizeCollection", publicName: "sizeCollection", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: IDS_ICON_PARENT,
+                useExisting: IdsAvatarComponent,
+            },
+        ], queries: [{ propertyName: "_iconChild", first: true, predicate: IdsIconComponent, descendants: true, isSignal: true }, { propertyName: "_imageChild", first: true, predicate: IdsAvatarImageDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let type = _currentAvatarType();\n@switch (type) {\n  @case (_avatarType.INITIALS) {\n    <span>{{ initials() }}</span>\n  }\n  @case (_avatarType.ICON) {\n    <ng-content select=\"ids-icon\">\n      <ids-icon fontIcon=\"user\" />\n    </ng-content>\n  }\n  @case (_avatarType.IMAGE) {\n    <ng-content select=\"img[src]\" />\n  }\n}\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: "20.1.7", ngImport: i0, type: IdsAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-avatar', imports: [IdsIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: IDS_ICON_PARENT,
+                            useExisting: IdsAvatarComponent,
+                        },
+                    ], template: "@let type = _currentAvatarType();\n@switch (type) {\n  @case (_avatarType.INITIALS) {\n    <span>{{ initials() }}</span>\n  }\n  @case (_avatarType.ICON) {\n    <ng-content select=\"ids-icon\">\n      <ids-icon fontIcon=\"user\" />\n    </ng-content>\n  }\n  @case (_avatarType.IMAGE) {\n    <ng-content select=\"img[src]\" />\n  }\n}\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IDS_AVATAR_DEFAULT_CONFIG, IDS_AVATAR_DEFAULT_CONFIG_FACTORY, IDS_AVATAR_PARENT, IdsAvatarComponent, IdsAvatarImageDirective, IdsAvatarParent, IdsAvatarType, IdsAvatarVariant };
+//# sourceMappingURL=i-cell-ids-angular-avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"i-cell-ids-angular-avatar.mjs","sources":["../../../projects/widgets/avatar/tokens/avatar-parent.ts","../../../projects/widgets/avatar/types/avatar-type.type.ts","../../../projects/widgets/avatar/types/avatar-variant.type.ts","../../../projects/widgets/avatar/avatar-defaults.ts","../../../projects/widgets/avatar/avatar-image.directive.ts","../../../projects/widgets/avatar/avatar.component.ts","../../../projects/widgets/avatar/avatar.component.html","../../../projects/widgets/avatar/i-cell-ids-angular-avatar.ts"],"sourcesContent":["import { IdsAvatarVariantType } from '../types/avatar-variant.type';\n\nimport { InjectionToken, Signal } from '@angular/core';\n\nexport abstract class IdsAvatarParent {\n  public readonly embeddedAvatarVariant!: Signal<IdsAvatarVariantType>;\n};\n\nexport const IDS_AVATAR_PARENT = new InjectionToken<IdsAvatarParent>(\n  'IDS_AVATAR_PARENT',\n);\n","export const IdsAvatarType = {\n  INITIALS: 'initials',\n  ICON: 'icon',\n  IMAGE: 'image',\n} as const;\n\nexport type IdsAvatarTypeType = (typeof IdsAvatarType)[keyof typeof IdsAvatarType];\n","export const IdsAvatarVariant = {\n  PRIMARY: 'primary',\n  SECONDARY: 'secondary',\n  SURFACE: 'surface',\n  LIGHT: 'light',\n  DARK: 'dark',\n} as const;\n\nexport type IdsAvatarVariantType = (typeof IdsAvatarVariant)[keyof typeof IdsAvatarVariant];\n","import { IdsAvatarType, IdsAvatarTypeType } from './types/avatar-type.type';\nimport { IdsAvatarVariant, IdsAvatarVariantType } from './types/avatar-variant.type';\n\nimport { InjectionToken } from '@angular/core';\nimport { IdsSize, IdsSizeCollection, IdsSizeCollectionType, IdsSizeType } from '@i-cell/ids-angular/core';\n\nexport interface IdsAvatarDefaultConfig {\n  type: IdsAvatarTypeType\n  size?: IdsSizeType\n  sizeCollection?: IdsSizeCollectionType\n  variant?: IdsAvatarVariantType,\n}\n\nexport const IDS_AVATAR_DEFAULT_CONFIG = new InjectionToken<IdsAvatarDefaultConfig>(\n  'IDS_AVATAR_DEFAULT_CONFIG',\n  {\n    providedIn: 'root',\n    factory: IDS_AVATAR_DEFAULT_CONFIG_FACTORY,\n  },\n);\n\nexport function IDS_AVATAR_DEFAULT_CONFIG_FACTORY(): Required<IdsAvatarDefaultConfig> {\n  return {\n    type: IdsAvatarType.INITIALS,\n    size: IdsSize.COMPACT,\n    sizeCollection: IdsSizeCollection.SMALL,\n    variant: IdsAvatarVariant.PRIMARY,\n  };\n}\n\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: 'img[idsAvatarImage]',\n  standalone: true,\n})\nexport class IdsAvatarImageDirective {}\n","import { IDS_AVATAR_DEFAULT_CONFIG, IDS_AVATAR_DEFAULT_CONFIG_FACTORY, IdsAvatarDefaultConfig } from './avatar-defaults';\nimport { IdsAvatarImageDirective } from './avatar-image.directive';\nimport { IDS_AVATAR_PARENT } from './tokens/avatar-parent';\nimport { IdsAvatarType } from './types/avatar-type.type';\nimport { IdsAvatarVariant, IdsAvatarVariantType } from './types/avatar-variant.type';\n\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, contentChild, inject, input } from '@angular/core';\nimport { ComponentBaseWithDefaults, IdsSizeCollectionType, IdsSizeType } from '@i-cell/ids-angular/core';\nimport { IDS_ICON_PARENT, IdsIconComponent, IdsIconParent, IdsIconVariant, IdsIconVariantType } from '@i-cell/ids-angular/icon';\n\nconst defaultConfig = IDS_AVATAR_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'ids-avatar',\n  imports: [IdsIconComponent],\n  templateUrl: './avatar.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: IDS_ICON_PARENT,\n      useExisting: IdsAvatarComponent,\n    },\n  ],\n})\nexport class IdsAvatarComponent extends ComponentBaseWithDefaults<IdsAvatarDefaultConfig> implements IdsIconParent {\n  protected override get _hostName(): string {\n    return 'avatar';\n  }\n\n  private readonly _parent = inject(IDS_AVATAR_PARENT, { optional: true });\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_AVATAR_DEFAULT_CONFIG);\n\n  protected readonly _avatarType = IdsAvatarType;\n\n  private _iconChild = contentChild(IdsIconComponent);\n  private _imageChild = contentChild(IdsAvatarImageDirective);\n\n  public initials = input<string | null>(null);\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n  public sizeCollection = input<IdsSizeCollectionType>(this._defaultConfig.sizeCollection);\n  public variant = input<IdsAvatarVariantType>(this._defaultConfig.variant);\n\n  private _implicitAvatarType = computed(() => {\n    if (this._iconChild() && !this._imageChild()) {\n      return IdsAvatarType.ICON;\n    }\n    if (this._imageChild() && !this._iconChild()) {\n      return IdsAvatarType.IMAGE;\n    }\n    return IdsAvatarType.INITIALS;\n  });\n\n  protected _currentAvatarType = computed(() => this._implicitAvatarType() ?? this._defaultConfig.type);\n\n  private _parentOrSelfVariant = computed(() => this._parent?.embeddedAvatarVariant() ?? this.variant());\n\n  protected _hostClasses = computed(() => this._getHostClasses([\n    [\n      'type',\n      this._currentAvatarType(),\n    ],\n    [\n      `${this.sizeCollection()}collection`,\n      this.size(),\n    ],\n    this._parentOrSelfVariant(),\n  ]));\n\n  public embeddedIconVariant = computed<IdsIconVariantType>(() => {\n    const avatarVariant = this._parentOrSelfVariant();\n    switch (avatarVariant) {\n      case IdsAvatarVariant.PRIMARY:\n      case IdsAvatarVariant.SECONDARY:\n      case IdsAvatarVariant.DARK:\n        return IdsIconVariant.LIGHT;\n\n      case IdsAvatarVariant.SURFACE:\n        return IdsIconVariant.SURFACE;\n\n      case IdsAvatarVariant.LIGHT:\n        return IdsIconVariant.SURFACE;\n    }\n  });\n}\n","@let type = _currentAvatarType();\n@switch (type) {\n  @case (_avatarType.INITIALS) {\n    <span>{{ initials() }}</span>\n  }\n  @case (_avatarType.ICON) {\n    <ng-content select=\"ids-icon\">\n      <ids-icon fontIcon=\"user\" />\n    </ng-content>\n  }\n  @case (_avatarType.IMAGE) {\n    <ng-content select=\"img[src]\" />\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-badge.mjs

@@ -0,0 +1,172 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Pipe, input, contentChildren, computed, Component, inject, ElementRef, ViewContainerRef, Injector, runInInjectionContext, effect, Directive } from '@angular/core';
+import { IdsSize, ComponentBase, DirectiveBaseWithDefaults } from '@i-cell/ids-angular/core';
+import { NgClass } from '@angular/common';
+
+const IdsBadgeAppearance = {
+    FILLED: 'filled',
+};
+
+const IdsBadgeVariant = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    SURFACE: 'surface',
+    BRAND: 'brand',
+    ERROR: 'error',
+    WARNING: 'warning',
+    SUCCESS: 'success',
+    LIGHT: 'light',
+    DARK: 'dark',
+};
+
+const IDS_BADGE_DEFAULT_CONFIG = new InjectionToken('IDS_BADGE_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_BADGE_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_BADGE_DEFAULT_CONFIG_FACTORY() {
+    return {
+        appearance: IdsBadgeAppearance.FILLED,
+        size: IdsSize.COMPACT,
+        variant: IdsBadgeVariant.SURFACE,
+        showLeadingElement: false,
+        label: '',
+    };
+}
+
+class BadgeLimitPipe {
+    transform(value, max) {
+        if (value === null || value === undefined || value === '') {
+            return '';
+        }
+        if (max === null || max === undefined || max === '') {
+            return String(value);
+        }
+        const num = Number(value);
+        const maxNum = Number(max);
+        if (!isNaN(num) && !isNaN(maxNum)) {
+            return num > maxNum ? `${maxNum}+` : `${num}`;
+        }
+        return String(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BadgeLimitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: BadgeLimitPipe, isStandalone: true, name: "badgeLimit", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BadgeLimitPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'badgeLimit',
+                    standalone: true,
+                    pure: false,
+                }]
+        }] });
+
+class IdsBadgeComponent extends ComponentBase {
+    constructor() {
+        super(...arguments);
+        this.appearance = input(...(ngDevMode ? [undefined, { debugName: "appearance" }] : []));
+        this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+        this.limit = input(null, ...(ngDevMode ? [{ debugName: "limit" }] : []));
+        this.showLeadingElement = input(false, ...(ngDevMode ? [{ debugName: "showLeadingElement" }] : []));
+        this._iconLeading = contentChildren('ids-icon[icon-leading]', ...(ngDevMode ? [{ debugName: "_iconLeading" }] : []));
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.size(),
+            this.variant(),
+        ]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+    }
+    get _hostName() {
+        return 'badge';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsBadgeComponent, isStandalone: true, selector: "ids-badge", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, showLeadingElement: { classPropertyName: "showLeadingElement", publicName: "showLeadingElement", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_iconLeading", predicate: ["ids-icon[icon-leading]"], isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"!showLeadingElement() && !label() ? 'ids-badge__container-no-element' : 'ids-badge__container'\">\n  @if (_iconLeading()) {\n    <ng-content select=\"ids-icon[icon-leading]\"/>\n  }\n  <span class=\"ids-badge__label\" aria-live=\"polite\">{{ label() | badgeLimit:limit() }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: BadgeLimitPipe, name: "badgeLimit" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-badge', standalone: true, imports: [
+                        BadgeLimitPipe,
+                        NgClass,
+                    ], template: "<div [ngClass]=\"!showLeadingElement() && !label() ? 'ids-badge__container-no-element' : 'ids-badge__container'\">\n  @if (_iconLeading()) {\n    <ng-content select=\"ids-icon[icon-leading]\"/>\n  }\n  <span class=\"ids-badge__label\" aria-live=\"polite\">{{ label() | badgeLimit:limit() }}</span>\n</div>\n" }]
+        }] });
+
+const defaultConfig = IDS_BADGE_DEFAULT_CONFIG_FACTORY();
+class IdsBadgeDirective extends DirectiveBaseWithDefaults {
+    constructor() {
+        super(...arguments);
+        this._elementRef = inject((ElementRef));
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._injector = inject(Injector);
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_BADGE_DEFAULT_CONFIG);
+        this.appearance = input(this._defaultConfig.appearance, ...(ngDevMode ? [{ debugName: "appearance", alias: 'badgeAppearance' }] : [{ alias: 'badgeAppearance' }]));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label", alias: 'badgeLabel' }] : [{ alias: 'badgeLabel' }]));
+        this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size", alias: 'badgeSize' }] : [{ alias: 'badgeSize' }]));
+        this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant", alias: 'badgeVariant' }] : [{ alias: 'badgeVariant' }]));
+        this.limit = input(null, ...(ngDevMode ? [{ debugName: "limit", alias: 'badgeLimit' }] : [{ alias: 'badgeLimit' }]));
+        this.showLeadingElement = input(this._defaultConfig.showLeadingElement, ...(ngDevMode ? [{ debugName: "showLeadingElement", alias: 'badgeShowLeadingElement' }] : [{ alias: 'badgeShowLeadingElement' }]));
+        this._hostClasses = computed(() => this._getHostClasses([]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
+    }
+    ngOnInit() {
+        const originalEl = this._elementRef.nativeElement;
+        runInInjectionContext(this._injector, () => {
+            this._badgeRef = this._viewContainerRef.createComponent(IdsBadgeComponent, {
+                injector: this._injector,
+            });
+            const badgeEl = this._badgeRef.location.nativeElement;
+            const parent = originalEl.parentElement;
+            if (!parent) {
+                return;
+            }
+            const placeholder = document.createComment('ids-badge-wrapper');
+            parent.replaceChild(placeholder, originalEl);
+            badgeEl.appendChild(originalEl);
+            parent.replaceChild(badgeEl, placeholder);
+            effect(() => {
+                this._badgeRef.setInput('appearance', this.appearance());
+                this._badgeRef.setInput('variant', this.variant());
+                this._badgeRef.setInput('label', this.label());
+                this._badgeRef.setInput('size', this.size());
+                this._badgeRef.setInput('limit', this.limit());
+                this._badgeRef.setInput('showLeadingElement', this.showLeadingElement());
+            });
+            this._iconEffectRef = effect(() => {
+                if (this.showLeadingElement()) {
+                    queueMicrotask(() => this._moveIconIfNeeded());
+                }
+            }, ...(ngDevMode ? [{ debugName: "_iconEffectRef" }] : []));
+            this._moveIconIfNeeded();
+        });
+    }
+    _moveIconIfNeeded() {
+        const host = this._elementRef.nativeElement;
+        const icon = host.querySelector('ids-icon[icon-leading]');
+        const badgeEl = this._badgeRef?.location.nativeElement;
+        if (!icon || !badgeEl) {
+            return;
+        }
+        const container = badgeEl.querySelector('.ids-badge__container') ||
+            badgeEl.querySelector('.ids-badge__container-no-element');
+        if (container && !container.contains(icon)) {
+            container.prepend(icon);
+        }
+    }
+    ngOnDestroy() {
+        this._iconEffectRef?.destroy();
+        this._badgeRef?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsBadgeDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: IdsBadgeDirective, isStandalone: true, selector: "[idsBadge]", inputs: { appearance: { classPropertyName: "appearance", publicName: "badgeAppearance", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "badgeLimit", isSignal: true, isRequired: false, transformFunction: null }, showLeadingElement: { classPropertyName: "showLeadingElement", publicName: "badgeShowLeadingElement", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[idsBadge]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BadgeLimitPipe, IDS_BADGE_DEFAULT_CONFIG, IDS_BADGE_DEFAULT_CONFIG_FACTORY, IdsBadgeAppearance, IdsBadgeDirective, IdsBadgeVariant };
+//# sourceMappingURL=i-cell-ids-angular-badge.mjs.map