@i-cell/ids-angular 0.1.11 → 0.1.13

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

@@ -0,0 +1,313 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, Component, output, inject, ElementRef, afterNextRender, Directive, signal, computed } from '@angular/core';
+import { IdsSize, ComponentBaseWithDefaults, ResizeObserverService, createClassList } from '@i-cell/ids-angular/core';
+import { IdsOverlayPanelAppearance, IdsOverlayPanelVariant } from '@i-cell/ids-angular/overlay-panel';
+import { IdsIconComponent } from '@i-cell/ids-angular/icon';
+import * as i1 from '@angular/router';
+import { RouterLink } from '@angular/router';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button';
+import { IdsTooltipDirective } from '@i-cell/ids-angular/tooltip';
+
+const IdsBreadcrumbDivider = {
+    FORESLASH: 'foreslash',
+    ICON: 'icon',
+};
+
+const IdsBreadcrumbVariant = {
+    PRIMARY: 'primary',
+    SURFACE: 'surface',
+    LIGHT: 'light',
+};
+
+const IDS_BREADCRUMB_DEFAULT_CONFIG = new InjectionToken('IDS_BADGE_DEFAULT_CONFIG', {
+    providedIn: 'root',
+    factory: IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY,
+});
+function IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY() {
+    return {
+        hierarchy: [],
+        size: IdsSize.COMPACT,
+        variant: IdsBreadcrumbVariant.SURFACE,
+        dividerType: IdsBreadcrumbDivider.ICON,
+        overlayAppearance: IdsOverlayPanelAppearance.ELEVATED,
+        overlaySize: IdsSize.COMPACT,
+        overlayVariant: IdsOverlayPanelVariant.LIGHT,
+    };
+}
+
+class IdsBreadcrumbDividerComponent {
+    constructor() {
+        this.dividerType = input();
+        this.size = input.required();
+        this._dividerType = IdsBreadcrumbDivider;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsBreadcrumbDividerComponent, isStandalone: true, selector: "li[idsBreadcrumbDivider]", inputs: { dividerType: { classPropertyName: "dividerType", publicName: "dividerType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "presentation" }, properties: { "attr.aria-hidden": "true" }, classAttribute: "ids-breadcrumb-divider" }, providers: [], ngImport: i0, template: `
+    @if (dividerType() === _dividerType.ICON) {
+      <ids-icon aria-hidden="true" fontIcon="chevron-right" [size]="size()" />
+    } @else {
+      <span class="ids-breadcrumb-divider-foreslash">/</span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbDividerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[idsBreadcrumbDivider]',
+                    imports: [IdsIconComponent],
+                    providers: [],
+                    host: {
+                        role: 'presentation',
+                        'class': 'ids-breadcrumb-divider',
+                        '[attr.aria-hidden]': 'true',
+                    },
+                    template: `
+    @if (dividerType() === _dividerType.ICON) {
+      <ids-icon aria-hidden="true" fontIcon="chevron-right" [size]="size()" />
+    } @else {
+      <span class="ids-breadcrumb-divider-foreslash">/</span>
+    }
+  `,
+                }]
+        }] });
+
+class IdsBreadcrumbLinkDirective {
+    constructor() {
+        this.disabled = input(false);
+        this.link = input();
+        this.hasTooltip = output();
+        const host = inject(ElementRef).nativeElement;
+        afterNextRender({
+            read: () => {
+                this.hasTooltip.emit(host.offsetWidth < host.scrollWidth);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.2", type: IdsBreadcrumbLinkDirective, isStandalone: true, selector: "a[idsBreadcrumbLink]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasTooltip: "hasTooltip" }, host: { properties: { "attr.aria-disabled": "this.disabled() ? \"\" : null", "attr.disabled": "this.disabled() ? \"\" : null" }, classAttribute: "ids-breadcrumb-link" }, hostDirectives: [{ directive: i1.RouterLink, inputs: ["routerLink", "link"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[idsBreadcrumbLink]',
+                    hostDirectives: [
+                        {
+                            directive: RouterLink,
+                            inputs: ['routerLink: link'],
+                        },
+                    ],
+                    host: {
+                        class: 'ids-breadcrumb-link',
+                        '[attr.aria-disabled]': 'this.disabled() ? "" : null',
+                        '[attr.disabled]': 'this.disabled() ? "" : null',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class IdsBreadcrumbListDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsBreadcrumbListDirective, isStandalone: true, selector: "ol[idsBreadcrumbList]", host: { classAttribute: "ids-breadcrumb-list" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ol[idsBreadcrumbList]',
+                    host: {
+                        'class': 'ids-breadcrumb-list',
+                    },
+                }]
+        }] });
+
+class IdsBreadcrumbPageDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: IdsBreadcrumbPageDirective, isStandalone: true, selector: "span[idsBreadcrumbPage]", host: { attributes: { "role": "link", "aria-current": "page" }, classAttribute: "ids-breadcrumb-page" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbPageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[idsBreadcrumbPage]',
+                    host: {
+                        role: 'link',
+                        'aria-current': 'page',
+                        'class': 'ids-breadcrumb-page',
+                    },
+                }]
+        }] });
+
+class IdsBreadcrumbTruncationComponent {
+    constructor() {
+        this.overlayClass = input('');
+        this.panelClass = input([], { transform: (value) => value.split(' ') });
+        this.size = input.required();
+        this.variant = input.required();
+        this.isPanelOpen = signal(false);
+    }
+    _toggle() {
+        this.isPanelOpen() ? this._close() : this._open();
+    }
+    _open() {
+        if (!this.isPanelOpen()) {
+            this.isPanelOpen.set(true);
+        }
+    }
+    _close() {
+        if (this.isPanelOpen()) {
+            this.isPanelOpen.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbTruncationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.2", type: IdsBreadcrumbTruncationComponent, isStandalone: true, selector: "li[idsBreadcrumbTruncation]", inputs: { overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <!-- ids-icon-button should have the same size and variant as the parent  -->
+    <button
+      #truncationMenuTrigger="cdkOverlayOrigin"
+      type="button"
+      idsIconButton
+      appearance="standard"
+      cdkOverlayOrigin
+      [size]="size()"
+      [variant]="variant()"
+      (click)="_toggle()"
+    >
+      <ids-icon aria-hidden="true" alt="" fontIcon="more-horizontal" />
+    </button>
+    <ng-template
+      cdkConnectedOverlay
+      cdkConnectedOverlayLockPosition
+      [cdkConnectedOverlayOrigin]="truncationMenuTrigger"
+      [cdkConnectedOverlayOpen]="isPanelOpen()"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayPanelClass]="panelClass()"
+      (overlayOutsideClick)="_close()"
+      (detach)="_close()"
+    >
+      <ol idsBreadcrumbList cdkTrapFocus cdkTrapFocusAutoCapture="true" [ngClass]="overlayClass()">
+        <ng-content />
+      </ol>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: IdsBreadcrumbListDirective, selector: "ol[idsBreadcrumbList]" }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbTruncationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[idsBreadcrumbTruncation]',
+                    imports: [
+                        IdsBreadcrumbListDirective,
+                        IdsIconButtonComponent,
+                        IdsIconComponent,
+                        CdkOverlayOrigin,
+                        CdkConnectedOverlay,
+                        CdkTrapFocus,
+                        NgClass,
+                    ],
+                    template: `
+    <!-- ids-icon-button should have the same size and variant as the parent  -->
+    <button
+      #truncationMenuTrigger="cdkOverlayOrigin"
+      type="button"
+      idsIconButton
+      appearance="standard"
+      cdkOverlayOrigin
+      [size]="size()"
+      [variant]="variant()"
+      (click)="_toggle()"
+    >
+      <ids-icon aria-hidden="true" alt="" fontIcon="more-horizontal" />
+    </button>
+    <ng-template
+      cdkConnectedOverlay
+      cdkConnectedOverlayLockPosition
+      [cdkConnectedOverlayOrigin]="truncationMenuTrigger"
+      [cdkConnectedOverlayOpen]="isPanelOpen()"
+      [cdkConnectedOverlayPush]="true"
+      [cdkConnectedOverlayPanelClass]="panelClass()"
+      (overlayOutsideClick)="_close()"
+      (detach)="_close()"
+    >
+      <ol idsBreadcrumbList cdkTrapFocus cdkTrapFocusAutoCapture="true" [ngClass]="overlayClass()">
+        <ng-content />
+      </ol>
+    </ng-template>
+  `,
+                }]
+        }] });
+
+const defaultConfig = IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY();
+class IdsBreadcrumbComponent extends ComponentBaseWithDefaults {
+    get _hostName() {
+        return 'breadcrumb';
+    }
+    constructor() {
+        super();
+        this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_BREADCRUMB_DEFAULT_CONFIG);
+        this.hierarchy = input([]);
+        this.dividerType = input(this._defaultConfig.dividerType);
+        this.size = input(this._defaultConfig.size);
+        this.variant = input(this._defaultConfig.variant);
+        this.overlayAppearance = input(this._defaultConfig.overlayAppearance);
+        this.overlaySize = input(this._defaultConfig.overlaySize);
+        this.overlayVariant = input(this._defaultConfig.overlayVariant);
+        // The breadcrumbs that are currently visible in the breadcrumb component
+        this._breadcrumbs = computed(() => this.hierarchy().slice(this._truncationIndex()));
+        // The breadcrumbs that are currently truncated and shown on overlay
+        this._truncation = computed(() => this.hierarchy().slice(0, this._truncationIndex()));
+        // The maximum number of breadcrumbs that can be shown (without truncation)
+        this._maxLength = signal(0);
+        // The index at which the breadcrumb truncation starts
+        this._truncationIndex = computed(() => {
+            const hierarchyLength = this.hierarchy().length;
+            const maxLength = this._maxLength();
+            return hierarchyLength > maxLength ? Math.min(hierarchyLength - maxLength, hierarchyLength - 1) : 0;
+        });
+        this._hostElement = inject(ElementRef).nativeElement;
+        this._resizeObserver = inject(ResizeObserverService);
+        this._hostClasses = computed(() => this._getHostClasses([
+            this.size(),
+            this.variant(),
+            this.dividerType(),
+        ]));
+        this._overlayClasses = computed(() => createClassList('ids-overlay-panel', [
+            this.overlayAppearance(),
+            this.overlayVariant(),
+            this.overlaySize(),
+        ]));
+        this._resizeObserver.observe(this._hostElement.parentElement).subscribe(() => this._calcmaxLength());
+    }
+    _calcmaxLength() {
+        const containerElementWidth = this._hostElement.parentElement.clientWidth;
+        const breadcrumbElementMaxWidth = this._getCssVariableValue(`--ids-comp-breadcrumb-navigation-link-size-max-width-${this.size()}`);
+        const dividerWidth = this.dividerType() === IdsBreadcrumbDivider.ICON
+            ? this._getCssVariableValue(`--ids-comp-icon-size-smallcollection-width-${this.size()}`)
+            : { dense: 4, compact: 5, comfortable: 6, spacious: 7 }[this.size()];
+        const gapWidth = this._getCssVariableValue(`--ids-comp-breadcrumb-size-gap-${this.size()}`);
+        const breadcrumbItemMaxWidth = breadcrumbElementMaxWidth + (gapWidth * 2 + dividerWidth) / 2;
+        this._maxLength.set(Math.floor(containerElementWidth / breadcrumbItemMaxWidth));
+    }
+    _getCssVariableValue(variableName) {
+        const host = getComputedStyle(this._hostElement);
+        return parseInt(host.getPropertyValue(variableName).replace('px', ''), 10);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsBreadcrumbComponent, isStandalone: true, selector: "ids-breadcrumb", inputs: { hierarchy: { classPropertyName: "hierarchy", publicName: "hierarchy", isSignal: true, isRequired: false, transformFunction: null }, dividerType: { classPropertyName: "dividerType", publicName: "dividerType", 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 }, overlayAppearance: { classPropertyName: "overlayAppearance", publicName: "overlayAppearance", isSignal: true, isRequired: false, transformFunction: null }, overlaySize: { classPropertyName: "overlaySize", publicName: "overlaySize", isSignal: true, isRequired: false, transformFunction: null }, overlayVariant: { classPropertyName: "overlayVariant", publicName: "overlayVariant", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<nav class=\"ids-breadcrumb\">\n  <ol idsBreadcrumbList>\n    @if (_truncation().length) {\n      <li idsBreadcrumbTruncation [panelClass]=\"_hostClasses()\" [overlayClass]=\"_overlayClasses()\" [size]=\"size()\" [variant]=\"variant()\">\n        @for (breadcrumbItem of _truncation(); track $index; let isLast = $last) {\n          <li>\n            <ng-container *ngTemplateOutlet=\"breadcrumbLink; context: { breadcrumbItem }\" />\n          </li>\n        }\n      </li>\n      <li idsBreadcrumbDivider [dividerType]=\"dividerType()\" [size]=\"size()\"></li>\n    }\n    @for (breadcrumbItem of _breadcrumbs(); track $index; let isLast = $last) {\n      <li>\n        @if (isLast) {\n          <span idsBreadcrumbPage>{{ breadcrumbItem.label }}</span>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"breadcrumbLink; context: { breadcrumbItem }\" />\n        }\n      </li>\n      @if (!isLast) {\n        <li idsBreadcrumbDivider [dividerType]=\"dividerType()\" [size]=\"size()\"></li>\n      }\n    }\n  </ol>\n</nav>\n\n<ng-template #breadcrumbLink let-breadcrumbItem=\"breadcrumbItem\">\n  <a\n    idsBreadcrumbLink\n    [link]=\"!breadcrumbItem.disabled ? breadcrumbItem.path : null\"\n    [idsTooltip]=\"breadcrumbItem.label\"\n    [idsTooltipDisabled]=\"!breadcrumbItem.hasTooltip\"\n    [disabled]=\"!!breadcrumbItem.disabled\"\n    (hasTooltip)=\"breadcrumbItem.hasTooltip = $event\"\n  >\n    {{ breadcrumbItem.label }}\n  </a>\n</ng-template>\n", dependencies: [{ kind: "component", type: IdsBreadcrumbDividerComponent, selector: "li[idsBreadcrumbDivider]", inputs: ["dividerType", "size"] }, { kind: "directive", type: IdsBreadcrumbLinkDirective, selector: "a[idsBreadcrumbLink]", inputs: ["disabled", "link"], outputs: ["hasTooltip"] }, { kind: "directive", type: IdsBreadcrumbPageDirective, selector: "span[idsBreadcrumbPage]" }, { kind: "directive", type: IdsBreadcrumbListDirective, selector: "ol[idsBreadcrumbList]" }, { kind: "component", type: IdsBreadcrumbTruncationComponent, selector: "li[idsBreadcrumbTruncation]", inputs: ["overlayClass", "panelClass", "size", "variant"] }, { kind: "directive", type: IdsTooltipDirective, selector: "[idsTooltip]", inputs: ["idsTooltip", "idsTooltipPosition", "idsTooltipSize", "idsTooltipVariant", "idsTooltipShowDelay", "idsTooltipHideDelay", "idsTooltipDisabled", "idsTooltipTouchGestures", "idsTooltipTextAlign", "idsTooltipClass", "idsTooltipShowPointer"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ids-breadcrumb', standalone: true, imports: [
+                        IdsBreadcrumbDividerComponent,
+                        IdsBreadcrumbLinkDirective,
+                        IdsBreadcrumbPageDirective,
+                        IdsBreadcrumbListDirective,
+                        IdsBreadcrumbTruncationComponent,
+                        IdsTooltipDirective,
+                        NgTemplateOutlet,
+                    ], template: "<nav class=\"ids-breadcrumb\">\n  <ol idsBreadcrumbList>\n    @if (_truncation().length) {\n      <li idsBreadcrumbTruncation [panelClass]=\"_hostClasses()\" [overlayClass]=\"_overlayClasses()\" [size]=\"size()\" [variant]=\"variant()\">\n        @for (breadcrumbItem of _truncation(); track $index; let isLast = $last) {\n          <li>\n            <ng-container *ngTemplateOutlet=\"breadcrumbLink; context: { breadcrumbItem }\" />\n          </li>\n        }\n      </li>\n      <li idsBreadcrumbDivider [dividerType]=\"dividerType()\" [size]=\"size()\"></li>\n    }\n    @for (breadcrumbItem of _breadcrumbs(); track $index; let isLast = $last) {\n      <li>\n        @if (isLast) {\n          <span idsBreadcrumbPage>{{ breadcrumbItem.label }}</span>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"breadcrumbLink; context: { breadcrumbItem }\" />\n        }\n      </li>\n      @if (!isLast) {\n        <li idsBreadcrumbDivider [dividerType]=\"dividerType()\" [size]=\"size()\"></li>\n      }\n    }\n  </ol>\n</nav>\n\n<ng-template #breadcrumbLink let-breadcrumbItem=\"breadcrumbItem\">\n  <a\n    idsBreadcrumbLink\n    [link]=\"!breadcrumbItem.disabled ? breadcrumbItem.path : null\"\n    [idsTooltip]=\"breadcrumbItem.label\"\n    [idsTooltipDisabled]=\"!breadcrumbItem.hasTooltip\"\n    [disabled]=\"!!breadcrumbItem.disabled\"\n    (hasTooltip)=\"breadcrumbItem.hasTooltip = $event\"\n  >\n    {{ breadcrumbItem.label }}\n  </a>\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IDS_BREADCRUMB_DEFAULT_CONFIG, IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY, IdsBreadcrumbComponent, IdsBreadcrumbDivider, IdsBreadcrumbVariant };
+//# sourceMappingURL=i-cell-ids-angular-breadcrumb.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"i-cell-ids-angular-breadcrumb.mjs","sources":["../../../projects/widgets/breadcrumb/types/breadcrumb-divider.type.ts","../../../projects/widgets/breadcrumb/types/breadcrumb-variant.type.ts","../../../projects/widgets/breadcrumb/breadcrumb-defaults.ts","../../../projects/widgets/breadcrumb/libs/breadcrumb-divider.component.ts","../../../projects/widgets/breadcrumb/libs/breadcrumb-link.directive.ts","../../../projects/widgets/breadcrumb/libs/breadcrumb-list.directive.ts","../../../projects/widgets/breadcrumb/libs/breadcrumb-page.directive.ts","../../../projects/widgets/breadcrumb/libs/breadcrumb-truncation.component.ts","../../../projects/widgets/breadcrumb/breadcrumb.component.ts","../../../projects/widgets/breadcrumb/breadcrumb.component.html","../../../projects/widgets/breadcrumb/i-cell-ids-angular-breadcrumb.ts"],"sourcesContent":["export const IdsBreadcrumbDivider = {\n  FORESLASH: 'foreslash',\n  ICON: 'icon',\n} as const;\n\nexport type IdsBreadcrumbDividerType = (typeof IdsBreadcrumbDivider)[keyof typeof IdsBreadcrumbDivider];\n","export const IdsBreadcrumbVariant = {\n  PRIMARY: 'primary',\n  SURFACE: 'surface',\n  LIGHT: 'light',\n} as const;\n\nexport type IdsBreadcrumbVariantType = (typeof IdsBreadcrumbVariant)[keyof typeof IdsBreadcrumbVariant];\n","import { IdsBreadcrumbDividerType, IdsBreadcrumbDivider } from './types/breadcrumb-divider.type';\nimport { IdsBreadcrumbHierarchyType } from './types/breadcrumb-hierarchy.type';\nimport { IdsBreadcrumbVariantType, IdsBreadcrumbVariant } from './types/breadcrumb-variant.type';\n\nimport { InjectionToken } from '@angular/core';\nimport { IdsSizeType, IdsSize } from '@i-cell/ids-angular/core';\nimport { IdsOverlayPanelAppearance, IdsOverlayPanelAppearanceType, IdsOverlayPanelVariant, IdsOverlayPanelVariantType } from '@i-cell/ids-angular/overlay-panel';\n\nexport interface IdsBreadcrumbDefaultConfig {\n  hierarchy: IdsBreadcrumbHierarchyType[];\n  size?: IdsSizeType;\n  variant?: IdsBreadcrumbVariantType;\n  dividerType?: IdsBreadcrumbDividerType;\n  overlayAppearance?: IdsOverlayPanelAppearanceType;\n  overlaySize?: IdsSizeType;\n  overlayVariant?: IdsOverlayPanelVariantType;\n}\n\nexport const IDS_BREADCRUMB_DEFAULT_CONFIG = new InjectionToken<IdsBreadcrumbDefaultConfig>('IDS_BADGE_DEFAULT_CONFIG', {\n  providedIn: 'root',\n  factory: IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY,\n});\n\nexport function IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY(): Required<IdsBreadcrumbDefaultConfig> {\n  return {\n    hierarchy: [],\n    size: IdsSize.COMPACT,\n    variant: IdsBreadcrumbVariant.SURFACE,\n    dividerType: IdsBreadcrumbDivider.ICON,\n    overlayAppearance: IdsOverlayPanelAppearance.ELEVATED,\n    overlaySize: IdsSize.COMPACT,\n    overlayVariant: IdsOverlayPanelVariant.LIGHT,\n  };\n}\n","import { IdsBreadcrumbDivider, IdsBreadcrumbDividerType } from '../public-api';\n\nimport { Component, input } from '@angular/core';\nimport { IdsSizeType } from '@i-cell/ids-angular/core';\nimport { IdsIconComponent } from '@i-cell/ids-angular/icon';\n\n@Component({\n  selector: 'li[idsBreadcrumbDivider]',\n  imports: [IdsIconComponent],\n  providers: [],\n  host: {\n    role: 'presentation',\n    'class': 'ids-breadcrumb-divider',\n    '[attr.aria-hidden]': 'true',\n  },\n  template: `\n    @if (dividerType() === _dividerType.ICON) {\n      <ids-icon aria-hidden=\"true\" fontIcon=\"chevron-right\" [size]=\"size()\" />\n    } @else {\n      <span class=\"ids-breadcrumb-divider-foreslash\">/</span>\n    }\n  `,\n})\nexport class IdsBreadcrumbDividerComponent {\n  public dividerType = input<IdsBreadcrumbDividerType>();\n  public size = input.required<IdsSizeType>();\n  protected _dividerType = IdsBreadcrumbDivider;\n}\n","import { afterNextRender, Directive, ElementRef, inject, input, output } from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\n@Directive({\n  selector: 'a[idsBreadcrumbLink]',\n  hostDirectives: [\n    {\n      directive: RouterLink,\n      inputs: ['routerLink: link'],\n    },\n  ],\n  host: {\n    class: 'ids-breadcrumb-link',\n    '[attr.aria-disabled]': 'this.disabled() ? \"\" : null',\n    '[attr.disabled]': 'this.disabled() ? \"\" : null',\n  },\n})\nexport class IdsBreadcrumbLinkDirective {\n  public readonly disabled = input<boolean>(false);\n  public readonly link = input<RouterLink['routerLink'] | null>();\n  public readonly hasTooltip = output<boolean>();\n\n  constructor() {\n    const host = inject(ElementRef).nativeElement;\n\n    afterNextRender({\n      read: () => {\n        this.hasTooltip.emit(host.offsetWidth < host.scrollWidth);\n      },\n    });\n  }\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: 'ol[idsBreadcrumbList]',\n  host: {\n    'class': 'ids-breadcrumb-list',\n  },\n})\nexport class IdsBreadcrumbListDirective {}\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: 'span[idsBreadcrumbPage]',\n  host: {\n    role: 'link',\n    'aria-current': 'page',\n    'class': 'ids-breadcrumb-page',\n  },\n})\nexport class IdsBreadcrumbPageDirective {}\n","import { IdsBreadcrumbListDirective } from './breadcrumb-list.directive';\n\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport { NgClass } from '@angular/common';\nimport { Component, input, signal } from '@angular/core';\nimport { IdsSizeType } from '@i-cell/ids-angular/core';\nimport { IdsIconComponent } from '@i-cell/ids-angular/icon';\nimport { IdsIconButtonComponent, IdsIconButtonVariantType } from '@i-cell/ids-angular/icon-button';\n\n@Component({\n  selector: 'li[idsBreadcrumbTruncation]',\n  imports: [\n    IdsBreadcrumbListDirective,\n    IdsIconButtonComponent,\n    IdsIconComponent,\n    CdkOverlayOrigin,\n    CdkConnectedOverlay,\n    CdkTrapFocus,\n    NgClass,\n  ],\n  template: `\n    <!-- ids-icon-button should have the same size and variant as the parent  -->\n    <button\n      #truncationMenuTrigger=\"cdkOverlayOrigin\"\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      cdkOverlayOrigin\n      [size]=\"size()\"\n      [variant]=\"variant()\"\n      (click)=\"_toggle()\"\n    >\n      <ids-icon aria-hidden=\"true\" alt=\"\" fontIcon=\"more-horizontal\" />\n    </button>\n    <ng-template\n      cdkConnectedOverlay\n      cdkConnectedOverlayLockPosition\n      [cdkConnectedOverlayOrigin]=\"truncationMenuTrigger\"\n      [cdkConnectedOverlayOpen]=\"isPanelOpen()\"\n      [cdkConnectedOverlayPush]=\"true\"\n      [cdkConnectedOverlayPanelClass]=\"panelClass()\"\n      (overlayOutsideClick)=\"_close()\"\n      (detach)=\"_close()\"\n    >\n      <ol idsBreadcrumbList cdkTrapFocus cdkTrapFocusAutoCapture=\"true\" [ngClass]=\"overlayClass()\">\n        <ng-content />\n      </ol>\n    </ng-template>\n  `,\n})\nexport class IdsBreadcrumbTruncationComponent {\n  public overlayClass = input<string>('');\n  public panelClass = input([], { transform: (value: string) => value.split(' ') });\n\n  public size = input.required<IdsSizeType>();\n  public variant = input.required<IdsIconButtonVariantType>();\n  public isPanelOpen = signal<boolean>(false);\n\n  protected _toggle(): void {\n    this.isPanelOpen() ? this._close() : this._open();\n  }\n\n  protected _open(): void {\n    if (!this.isPanelOpen()) {\n      this.isPanelOpen.set(true);\n    }\n  }\n\n  protected _close(): void {\n    if (this.isPanelOpen()) {\n      this.isPanelOpen.set(false);\n    }\n  }\n}\n","import { IDS_BREADCRUMB_DEFAULT_CONFIG, IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY, IdsBreadcrumbDefaultConfig } from './breadcrumb-defaults';\nimport { IdsBreadcrumbDividerComponent } from './libs/breadcrumb-divider.component';\nimport { IdsBreadcrumbLinkDirective } from './libs/breadcrumb-link.directive';\nimport { IdsBreadcrumbListDirective } from './libs/breadcrumb-list.directive';\nimport { IdsBreadcrumbPageDirective } from './libs/breadcrumb-page.directive';\nimport { IdsBreadcrumbTruncationComponent } from './libs/breadcrumb-truncation.component';\nimport { IdsBreadcrumbDivider, IdsBreadcrumbDividerType } from './types/breadcrumb-divider.type';\nimport { IdsBreadcrumbHierarchyType } from './types/breadcrumb-hierarchy.type';\nimport { IdsBreadcrumbVariantType } from './types/breadcrumb-variant.type';\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, ElementRef, inject, input, signal } from '@angular/core';\nimport { ComponentBaseWithDefaults, createClassList, IdsSizeType, ResizeObserverService } from '@i-cell/ids-angular/core';\nimport { IdsOverlayPanelAppearanceType, IdsOverlayPanelVariantType } from '@i-cell/ids-angular/overlay-panel';\nimport { IdsTooltipDirective } from '@i-cell/ids-angular/tooltip';\n\nconst defaultConfig = IDS_BREADCRUMB_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'ids-breadcrumb',\n  standalone: true,\n  templateUrl: './breadcrumb.component.html',\n  imports: [\n    IdsBreadcrumbDividerComponent,\n    IdsBreadcrumbLinkDirective,\n    IdsBreadcrumbPageDirective,\n    IdsBreadcrumbListDirective,\n    IdsBreadcrumbTruncationComponent,\n    IdsTooltipDirective,\n    NgTemplateOutlet,\n  ],\n})\nexport class IdsBreadcrumbComponent extends ComponentBaseWithDefaults<IdsBreadcrumbDefaultConfig> {\n  protected override get _hostName(): string {\n    return 'breadcrumb';\n  }\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_BREADCRUMB_DEFAULT_CONFIG);\n  public hierarchy = input<IdsBreadcrumbHierarchyType[]>([]);\n  public dividerType = input<IdsBreadcrumbDividerType>(this._defaultConfig.dividerType);\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n  public variant = input<IdsBreadcrumbVariantType>(this._defaultConfig.variant);\n  public overlayAppearance = input<IdsOverlayPanelAppearanceType>(this._defaultConfig.overlayAppearance);\n  public overlaySize = input<IdsSizeType>(this._defaultConfig.overlaySize);\n  public overlayVariant = input<IdsOverlayPanelVariantType>(this._defaultConfig.overlayVariant);\n\n  // The breadcrumbs that are currently visible in the breadcrumb component\n  protected _breadcrumbs = computed<(IdsBreadcrumbHierarchyType & { hasTooltip?: boolean })[]>(() =>\n    this.hierarchy().slice(this._truncationIndex()),\n  );\n\n  // The breadcrumbs that are currently truncated and shown on overlay\n  protected _truncation = computed<(IdsBreadcrumbHierarchyType & { hasTooltip?: boolean })[]>(() =>\n    this.hierarchy().slice(0, this._truncationIndex()),\n  );\n\n  // The maximum number of breadcrumbs that can be shown (without truncation)\n  private _maxLength = signal<number>(0);\n\n  // The index at which the breadcrumb truncation starts\n  private _truncationIndex = computed(() => {\n    const hierarchyLength = this.hierarchy().length;\n    const maxLength = this._maxLength();\n    return hierarchyLength > maxLength ? Math.min(hierarchyLength - maxLength, hierarchyLength - 1) : 0;\n  });\n\n  private _hostElement = inject(ElementRef).nativeElement;\n  private _resizeObserver = inject(ResizeObserverService);\n\n  protected _hostClasses = computed(() => this._getHostClasses([\n    this.size(),\n    this.variant(),\n    this.dividerType(),\n  ]));\n\n  protected _overlayClasses = computed(() =>\n    createClassList('ids-overlay-panel', [\n      this.overlayAppearance(),\n      this.overlayVariant(),\n      this.overlaySize(),\n    ]),\n  );\n\n  constructor() {\n    super();\n    this._resizeObserver.observe(this._hostElement.parentElement).subscribe(() => this._calcmaxLength());\n  }\n\n  private _calcmaxLength(): void {\n    const containerElementWidth = this._hostElement.parentElement.clientWidth;\n    const breadcrumbElementMaxWidth = this._getCssVariableValue(`--ids-comp-breadcrumb-navigation-link-size-max-width-${this.size()}`);\n    const dividerWidth =\n      this.dividerType() === IdsBreadcrumbDivider.ICON\n        ? this._getCssVariableValue(`--ids-comp-icon-size-smallcollection-width-${this.size()}`)\n        : { dense: 4, compact: 5, comfortable: 6, spacious: 7 }[this.size()];\n    const gapWidth = this._getCssVariableValue(`--ids-comp-breadcrumb-size-gap-${this.size()}`);\n    const breadcrumbItemMaxWidth = breadcrumbElementMaxWidth + (gapWidth * 2 + dividerWidth) / 2;\n    this._maxLength.set(Math.floor(containerElementWidth / breadcrumbItemMaxWidth));\n  }\n\n  private _getCssVariableValue(variableName: string): number {\n    const host = getComputedStyle(this._hostElement);\n    return parseInt(host.getPropertyValue(variableName).replace('px', ''), 10);\n  }\n}\n","<nav class=\"ids-breadcrumb\">\n  <ol idsBreadcrumbList>\n    @if (_truncation().length) {\n      <li idsBreadcrumbTruncation [panelClass]=\"_hostClasses()\" [overlayClass]=\"_overlayClasses()\" [size]=\"size()\" [variant]=\"variant()\">\n        @for (breadcrumbItem of _truncation(); track $index; let isLast = $last) {\n          <li>\n            <ng-container *ngTemplateOutlet=\"breadcrumbLink; context: { breadcrumbItem }\" />\n          </li>\n        }\n      </li>\n      <li idsBreadcrumbDivider [dividerType]=\"dividerType()\" [size]=\"size()\"></li>\n    }\n    @for (breadcrumbItem of _breadcrumbs(); track $index; let isLast = $last) {\n      <li>\n        @if (isLast) {\n          <span idsBreadcrumbPage>{{ breadcrumbItem.label }}</span>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"breadcrumbLink; context: { breadcrumbItem }\" />\n        }\n      </li>\n      @if (!isLast) {\n        <li idsBreadcrumbDivider [dividerType]=\"dividerType()\" [size]=\"size()\"></li>\n      }\n    }\n  </ol>\n</nav>\n\n<ng-template #breadcrumbLink let-breadcrumbItem=\"breadcrumbItem\">\n  <a\n    idsBreadcrumbLink\n    [link]=\"!breadcrumbItem.disabled ? breadcrumbItem.path : null\"\n    [idsTooltip]=\"breadcrumbItem.label\"\n    [idsTooltipDisabled]=\"!breadcrumbItem.hasTooltip\"\n    [disabled]=\"!!breadcrumbItem.disabled\"\n    (hasTooltip)=\"breadcrumbItem.hasTooltip = $event\"\n  >\n    {{ breadcrumbItem.label }}\n  </a>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAa,MAAA,oBAAoB,GAAG;AAClC,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,IAAI,EAAE,MAAM;;;ACFD,MAAA,oBAAoB,GAAG;AAClC,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;;;MCeH,6BAA6B,GAAG,IAAI,cAAc,CAA6B,0BAA0B,EAAE;AACtH,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,qCAAqC;AAC/C,CAAA;SAEe,qCAAqC,GAAA;IACnD,OAAO;AACL,QAAA,SAAS,EAAE,EAAE;QACb,IAAI,EAAE,OAAO,CAAC,OAAO;QACrB,OAAO,EAAE,oBAAoB,CAAC,OAAO;QACrC,WAAW,EAAE,oBAAoB,CAAC,IAAI;QACtC,iBAAiB,EAAE,yBAAyB,CAAC,QAAQ;QACrD,WAAW,EAAE,OAAO,CAAC,OAAO;QAC5B,cAAc,EAAE,sBAAsB,CAAC,KAAK;KAC7C;AACH;;MCVa,6BAA6B,CAAA;AAjB1C,IAAA,WAAA,GAAA;QAkBS,IAAW,CAAA,WAAA,GAAG,KAAK,EAA4B;AAC/C,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAe;QACjC,IAAY,CAAA,YAAA,GAAG,oBAAoB;AAC9C;8GAJY,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA7B,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,cAAA,EAAA,EAAA,UAAA,EAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,wBAAA,EAAA,EAAA,SAAA,EAd7B,EAAE,EAMH,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA;;;;;;AAMT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAbS,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAef,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAjBzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,0BAA0B;oBACpC,OAAO,EAAE,CAAC,gBAAgB,CAAC;AAC3B,oBAAA,SAAS,EAAE,EAAE;AACb,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,cAAc;AACpB,wBAAA,OAAO,EAAE,wBAAwB;AACjC,wBAAA,oBAAoB,EAAE,MAAM;AAC7B,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;AAMT,EAAA,CAAA;AACF,iBAAA;;;MCLY,0BAA0B,CAAA;AAKrC,IAAA,WAAA,GAAA;AAJgB,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC;QAChC,IAAI,CAAA,IAAA,GAAG,KAAK,EAAmC;QAC/C,IAAU,CAAA,UAAA,GAAG,MAAM,EAAW;QAG5C,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,aAAa;AAE7C,QAAA,eAAe,CAAC;YACd,IAAI,EAAE,MAAK;AACT,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;aAC1D;AACF,SAAA,CAAC;;8GAZO,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,+BAAA,EAAA,eAAA,EAAA,+BAAA,EAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAdtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AAChC,oBAAA,cAAc,EAAE;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,UAAU;4BACrB,MAAM,EAAE,CAAC,kBAAkB,CAAC;AAC7B,yBAAA;AACF,qBAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EAAE,qBAAqB;AAC5B,wBAAA,sBAAsB,EAAE,6BAA6B;AACrD,wBAAA,iBAAiB,EAAE,6BAA6B;AACjD,qBAAA;AACF,iBAAA;;;MCRY,0BAA0B,CAAA;8GAA1B,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBANtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,IAAI,EAAE;AACJ,wBAAA,OAAO,EAAE,qBAAqB;AAC/B,qBAAA;AACF,iBAAA;;;MCGY,0BAA0B,CAAA;8GAA1B,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,MAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA1B,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBARtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,yBAAyB;AACnC,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,MAAM;AACZ,wBAAA,cAAc,EAAE,MAAM;AACtB,wBAAA,OAAO,EAAE,qBAAqB;AAC/B,qBAAA;AACF,iBAAA;;;MC0CY,gCAAgC,CAAA;AAzC7C,IAAA,WAAA,GAAA;AA0CS,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAS,EAAE,CAAC;QAChC,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,KAAa,KAAK,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;AAE1E,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAe;AACpC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAA4B;AACpD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAU,KAAK,CAAC;AAiB5C;IAfW,OAAO,GAAA;AACf,QAAA,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;;IAGzC,KAAK,GAAA;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;AACvB,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;;;IAIpB,MAAM,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;AACtB,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;;;8GApBpB,gCAAgC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gCAAgC,EA9BjC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EApCC,0BAA0B,EAAA,QAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC1B,sBAAsB,EAAA,QAAA,EAAA,yCAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACtB,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,gBAAgB,EAAA,QAAA,EAAA,4DAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,mBAAmB,EAAA,QAAA,EAAA,qEAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,EAAA,8BAAA,EAAA,qCAAA,EAAA,4BAAA,EAAA,4BAAA,EAAA,0BAAA,EAAA,2BAAA,EAAA,6BAAA,EAAA,8BAAA,EAAA,kCAAA,EAAA,+BAAA,EAAA,mCAAA,EAAA,mCAAA,EAAA,yBAAA,EAAA,iCAAA,EAAA,sCAAA,EAAA,gCAAA,EAAA,iCAAA,EAAA,uCAAA,EAAA,kCAAA,EAAA,yBAAA,EAAA,wCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,YAAY,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,yBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAgCE,gCAAgC,EAAA,UAAA,EAAA,CAAA;kBAzC5C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,6BAA6B;AACvC,oBAAA,OAAO,EAAE;wBACP,0BAA0B;wBAC1B,sBAAsB;wBACtB,gBAAgB;wBAChB,gBAAgB;wBAChB,mBAAmB;wBACnB,YAAY;wBACZ,OAAO;AACR,qBAAA;AACD,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BT,EAAA,CAAA;AACF,iBAAA;;;AClCD,MAAM,aAAa,GAAG,qCAAqC,EAAE;AAgBvD,MAAO,sBAAuB,SAAQ,yBAAqD,CAAA;AAC/F,IAAA,IAAuB,SAAS,GAAA;AAC9B,QAAA,OAAO,YAAY;;AAiDrB,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QA/CU,IAAc,CAAA,cAAA,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,6BAA6B,CAAC;AACjG,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAA+B,EAAE,CAAC;QACnD,IAAW,CAAA,WAAA,GAAG,KAAK,CAA2B,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;QAC9E,IAAI,CAAA,IAAA,GAAG,KAAK,CAAc,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QACnD,IAAO,CAAA,OAAA,GAAG,KAAK,CAA2B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;QACtE,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAgC,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC;QAC/F,IAAW,CAAA,WAAA,GAAG,KAAK,CAAc,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;QACjE,IAAc,CAAA,cAAA,GAAG,KAAK,CAA6B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC;;AAGnF,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAA4D,MAC3F,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAChD;;QAGS,IAAW,CAAA,WAAA,GAAG,QAAQ,CAA4D,MAC1F,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CACnD;;AAGO,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAS,CAAC,CAAC;;AAG9B,QAAA,IAAA,CAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;YACvC,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM;AAC/C,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE;YACnC,OAAO,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,GAAG,SAAS,EAAE,eAAe,GAAG,CAAC,CAAC,GAAG,CAAC;AACrG,SAAC,CAAC;AAEM,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,aAAa;AAC/C,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,qBAAqB,CAAC;QAE7C,IAAY,CAAA,YAAA,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,WAAW,EAAE;AACnB,SAAA,CAAC,CAAC;QAEO,IAAe,CAAA,eAAA,GAAG,QAAQ,CAAC,MACnC,eAAe,CAAC,mBAAmB,EAAE;YACnC,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,WAAW,EAAE;AACnB,SAAA,CAAC,CACH;QAIC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;;IAG9F,cAAc,GAAA;QACpB,MAAM,qBAAqB,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,WAAW;AACzE,QAAA,MAAM,yBAAyB,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAwD,qDAAA,EAAA,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,CAAC;QAClI,MAAM,YAAY,GAChB,IAAI,CAAC,WAAW,EAAE,KAAK,oBAAoB,CAAC;cACxC,IAAI,CAAC,oBAAoB,CAAC,CAA8C,2CAAA,EAAA,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE;cACrF,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AACxE,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAkC,+BAAA,EAAA,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,CAAC;AAC3F,QAAA,MAAM,sBAAsB,GAAG,yBAAyB,GAAG,CAAC,QAAQ,GAAG,CAAC,GAAG,YAAY,IAAI,CAAC;AAC5F,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAqB,GAAG,sBAAsB,CAAC,CAAC;;AAGzE,IAAA,oBAAoB,CAAC,YAAoB,EAAA;QAC/C,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC;AAChD,QAAA,OAAO,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;;8GAtEjE,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EChCnC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,o8CAuCA,EDhBI,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,6BAA6B,sGAC7B,0BAA0B,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC1B,0BAA0B,EAAA,QAAA,EAAA,yBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC1B,0BAA0B,EAC1B,QAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,gCAAgC,EAChC,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,YAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,mBAAmB,gTACnB,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAGP,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAdlC,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EAEP,OAAA,EAAA;wBACP,6BAA6B;wBAC7B,0BAA0B;wBAC1B,0BAA0B;wBAC1B,0BAA0B;wBAC1B,gCAAgC;wBAChC,mBAAmB;wBACnB,gBAAgB;AACjB,qBAAA,EAAA,QAAA,EAAA,o8CAAA,EAAA;;;AE9BH;;AAEG;;;;"}

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

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, inject, computed, contentChildren } from '@angular/core';
+import { InjectionToken, input, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, inject, ElementRef, computed, contentChildren, effect } from '@angular/core';
 import { IdsSize, ComponentBaseWithDefaults, coerceBooleanAttribute } from '@i-cell/ids-angular/core';
+import { RouterLink } from '@angular/router';
 
 class IdsButtonParent {
 }
@@ -76,10 +77,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImpor
 
 const defaultConfig = IDS_BUTTON_DEFAULT_CONFIG_FACTORY();
 class IdsButtonComponent extends ComponentBaseWithDefaults {
+    get _hostName() {
+        return 'button';
+    }
+    get _buttonType() {
+        return this._hostElement.tagName === 'BUTTON' ? 'button' : null;
+    }
     constructor() {
-        super(...arguments);
+        super();
         this._parent = inject(IDS_BUTTON_PARENT, { optional: true });
         this._group = inject(IdsButtonGroupComponent, { optional: true });
+        this._hostElement = inject((ElementRef)).nativeElement;
+        this._routerLink = inject(RouterLink, { optional: true, self: true });
         this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_BUTTON_DEFAULT_CONFIG);
         this.appearance = input(this._defaultConfig.appearance);
         this.size = input(this._defaultConfig.size);
@@ -93,21 +102,44 @@ class IdsButtonComponent extends ComponentBaseWithDefaults {
             this.appearance(),
             this._parentOrSelfSize(),
             this._parentOrSelfVariant(),
+            this.disabled() ? 'disabled' : null,
         ]));
+        effect(() => {
+            if (this._buttonType) {
+                return;
+            }
+            const link = this._hostElement;
+            if (this.disabled()) {
+                this._disableLink(link);
+            }
+            else {
+                this._enableLink(link);
+            }
+        });
     }
-    get _hostName() {
-        return 'button';
+    _disableLink(link) {
+        if (!this._routerLink) {
+            link.setAttribute('data-href', link.href);
+        }
+        link.removeAttribute('href');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsButtonComponent, isStandalone: true, selector: "button[idsButton]", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-disabled": "this.disabled()? \"\" : null", "attr.disabled": "this.disabled() ? \"\" : null" } }, queries: [{ propertyName: "_iconLeading", predicate: ["[icon-leading]"], isSignal: true }, { propertyName: "_iconTrailing", predicate: ["[icon-trailing]"], isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (_iconLeading()) {\n  <ng-content select=\"[icon-leading]\" />\n}\n<span class=\"ids-button-label\"><ng-content /></span>\n@if (_iconTrailing()) {\n  <ng-content select=\"[icon-trailing]\" />\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    _enableLink(link) {
+        const prevHref = this._routerLink?.href ?? link.getAttribute('data-href') ?? '';
+        if (prevHref) {
+            link.href = prevHref;
+            link.removeAttribute('data-href');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: IdsButtonComponent, isStandalone: true, selector: "button[idsButton], a[idsButton]", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-disabled": "this.disabled()? \"\" : null", "attr.disabled": "this.disabled() ? \"\" : null" } }, queries: [{ propertyName: "_iconLeading", predicate: ["[icon-leading]"], isSignal: true }, { propertyName: "_iconTrailing", predicate: ["[icon-trailing]"], isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (_iconLeading()) {\n  <ng-content select=\"[icon-leading]\" />\n}\n<span class=\"ids-button-label\"><ng-content /></span>\n@if (_iconTrailing()) {\n  <ng-content select=\"[icon-trailing]\" />\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: IdsButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[idsButton]', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'button[idsButton], a[idsButton]', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.aria-disabled]': 'this.disabled()? "" : null',
                         '[attr.disabled]': 'this.disabled() ? "" : null',
                     }, template: "@if (_iconLeading()) {\n  <ng-content select=\"[icon-leading]\" />\n}\n<span class=\"ids-button-label\"><ng-content /></span>\n@if (_iconTrailing()) {\n  <ng-content select=\"[icon-trailing]\" />\n}\n" }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"i-cell-ids-angular-button.mjs","sources":["../../../projects/widgets/button/tokens/button-parent.ts","../../../projects/widgets/button/types/button-appearance.type.ts","../../../projects/widgets/button/types/button-variant.type.ts","../../../projects/widgets/button/button-defaults.ts","../../../projects/widgets/button/button-group-defaults.ts","../../../projects/widgets/button/button-group.component.ts","../../../projects/widgets/button/button.component.ts","../../../projects/widgets/button/button.component.html","../../../projects/widgets/button/i-cell-ids-angular-button.ts"],"sourcesContent":["import { IdsButtonVariantType } from '../types/button-variant.type';\n\nimport { InjectionToken, Signal } from '@angular/core';\n\nexport abstract class IdsButtonParent {\n  public readonly embeddedButtonVariant!: Signal<IdsButtonVariantType>;\n};\n\nexport const IDS_BUTTON_PARENT = new InjectionToken<IdsButtonParent>(\n  'IDS_BUTTON_PARENT',\n);\n","export const IdsButtonAppearance = {\n  FILLED: 'filled',\n  OUTLINED: 'outlined',\n  TEXT: 'text',\n} as const;\n\nexport type IdsButtonAppearanceType = (typeof IdsButtonAppearance)[keyof typeof IdsButtonAppearance];\n","export const IdsButtonVariant = {\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  LIGHT_FIXED: 'light-fixed',\n} as const;\n\nexport type IdsButtonVariantType = (typeof IdsButtonVariant)[keyof typeof IdsButtonVariant];\n\n","import { IdsButtonAppearance, IdsButtonAppearanceType } from './types/button-appearance.type';\nimport { IdsButtonVariant, IdsButtonVariantType } from './types/button-variant.type';\n\nimport { InjectionToken } from '@angular/core';\nimport { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';\n\nexport interface IdsButtonDefaultConfig {\n  appearance?: IdsButtonAppearanceType,\n  size?: IdsSizeType,\n  variant?: IdsButtonVariantType,\n}\n\nexport const IDS_BUTTON_DEFAULT_CONFIG = new InjectionToken<IdsButtonDefaultConfig>(\n  'IDS_BUTTON_DEFAULT_CONFIG',\n  {\n    providedIn: 'root',\n    factory: IDS_BUTTON_DEFAULT_CONFIG_FACTORY,\n  },\n);\n\nexport function IDS_BUTTON_DEFAULT_CONFIG_FACTORY(): Required<IdsButtonDefaultConfig> {\n  return {\n    appearance: IdsButtonAppearance.FILLED,\n    size: IdsSize.COMPACT,\n    variant: IdsButtonVariant.PRIMARY,\n  };\n}\n\n","import { InjectionToken } from '@angular/core';\nimport { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';\n\nexport interface IdsButtonGroupDefaultConfig {\n  size?: IdsSizeType,\n}\n\nexport const IDS_BUTTON_GROUP_DEFAULT_CONFIG = new InjectionToken<IdsButtonGroupDefaultConfig>(\n  'IDS_BUTTON_GROUP_DEFAULT_CONFIG',\n  {\n    providedIn: 'root',\n    factory: IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY,\n  },\n);\n\nexport function IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY(): Required<IdsButtonGroupDefaultConfig> {\n  return {\n    size: IdsSize.COMPACT,\n  };\n}\n\n","import { IDS_BUTTON_GROUP_DEFAULT_CONFIG, IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY, IdsButtonGroupDefaultConfig } from './button-group-defaults';\n\nimport { ChangeDetectionStrategy, Component, input, signal, ViewEncapsulation } from '@angular/core';\nimport { ComponentBaseWithDefaults, IdsSizeType } from '@i-cell/ids-angular/core';\n\nconst defaultConfig = IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'ids-button-group',\n  imports: [],\n  template: '<ng-content select=\"button[idsButton], button[idsIconButton]\">',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IdsButtonGroupComponent extends ComponentBaseWithDefaults<IdsButtonGroupDefaultConfig> {\n  protected override get _hostName(): string {\n    return 'button-group';\n  }\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_BUTTON_GROUP_DEFAULT_CONFIG);\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n\n  protected _hostClasses =signal(this._getHostClasses([this.size()]));\n}\n","import { IDS_BUTTON_DEFAULT_CONFIG, IDS_BUTTON_DEFAULT_CONFIG_FACTORY, IdsButtonDefaultConfig } from './button-defaults';\nimport { IdsButtonGroupComponent } from './button-group.component';\nimport { IDS_BUTTON_PARENT } from './tokens/button-parent';\nimport { IdsButtonAppearanceType } from './types/button-appearance.type';\nimport { IdsButtonVariantType } from './types/button-variant.type';\n\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, contentChildren, inject, input } from '@angular/core';\nimport { ComponentBaseWithDefaults, IdsSizeType, coerceBooleanAttribute } from '@i-cell/ids-angular/core';\nimport { IdsIconComponent } from '@i-cell/ids-angular/icon';\n\nconst defaultConfig = IDS_BUTTON_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'button[idsButton]',\n  imports: [],\n  templateUrl: './button.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.aria-disabled]': 'this.disabled()? \"\" : null',\n    '[attr.disabled]': 'this.disabled() ? \"\" : null',\n  },\n})\nexport class IdsButtonComponent extends ComponentBaseWithDefaults<IdsButtonDefaultConfig> {\n  protected override get _hostName(): string {\n    return 'button';\n  }\n\n  private readonly _parent = inject(IDS_BUTTON_PARENT, { optional: true });\n  private readonly _group = inject(IdsButtonGroupComponent, { optional: true });\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_BUTTON_DEFAULT_CONFIG);\n\n  public appearance = input<IdsButtonAppearanceType>(this._defaultConfig.appearance);\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n  public variant = input<IdsButtonVariantType>(this._defaultConfig.variant);\n  public disabled = input(false, { transform: (value: boolean | string) => coerceBooleanAttribute(value) });\n\n  private _parentOrSelfSize = computed(() => this._group?.size() ?? this.size());\n  private _parentOrSelfVariant = computed(() => this._parent?.embeddedButtonVariant() ?? this.variant());\n\n  protected _iconLeading = contentChildren<IdsIconComponent>('[icon-leading]');\n  protected _iconTrailing = contentChildren<IdsIconComponent>('[icon-trailing]');\n\n  protected _hostClasses = computed(() => this._getHostClasses([\n    this.appearance(),\n    this._parentOrSelfSize(),\n    this._parentOrSelfVariant(),\n  ]));\n}\n","@if (_iconLeading()) {\n  <ng-content select=\"[icon-leading]\" />\n}\n<span class=\"ids-button-label\"><ng-content /></span>\n@if (_iconTrailing()) {\n  <ng-content select=\"[icon-trailing]\" />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["defaultConfig"],"mappings":"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"}
+{"version":3,"file":"i-cell-ids-angular-button.mjs","sources":["../../../projects/widgets/button/tokens/button-parent.ts","../../../projects/widgets/button/types/button-appearance.type.ts","../../../projects/widgets/button/types/button-variant.type.ts","../../../projects/widgets/button/button-defaults.ts","../../../projects/widgets/button/button-group-defaults.ts","../../../projects/widgets/button/button-group.component.ts","../../../projects/widgets/button/button.component.ts","../../../projects/widgets/button/button.component.html","../../../projects/widgets/button/i-cell-ids-angular-button.ts"],"sourcesContent":["import { IdsButtonVariantType } from '../types/button-variant.type';\n\nimport { InjectionToken, Signal } from '@angular/core';\n\nexport abstract class IdsButtonParent {\n  public readonly embeddedButtonVariant!: Signal<IdsButtonVariantType>;\n};\n\nexport const IDS_BUTTON_PARENT = new InjectionToken<IdsButtonParent>(\n  'IDS_BUTTON_PARENT',\n);\n","export const IdsButtonAppearance = {\n  FILLED: 'filled',\n  OUTLINED: 'outlined',\n  TEXT: 'text',\n} as const;\n\nexport type IdsButtonAppearanceType = (typeof IdsButtonAppearance)[keyof typeof IdsButtonAppearance];\n","export const IdsButtonVariant = {\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  LIGHT_FIXED: 'light-fixed',\n} as const;\n\nexport type IdsButtonVariantType = (typeof IdsButtonVariant)[keyof typeof IdsButtonVariant];\n\n","import { IdsButtonAppearance, IdsButtonAppearanceType } from './types/button-appearance.type';\nimport { IdsButtonVariant, IdsButtonVariantType } from './types/button-variant.type';\n\nimport { InjectionToken } from '@angular/core';\nimport { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';\n\nexport interface IdsButtonDefaultConfig {\n  appearance?: IdsButtonAppearanceType,\n  size?: IdsSizeType,\n  variant?: IdsButtonVariantType,\n}\n\nexport const IDS_BUTTON_DEFAULT_CONFIG = new InjectionToken<IdsButtonDefaultConfig>(\n  'IDS_BUTTON_DEFAULT_CONFIG',\n  {\n    providedIn: 'root',\n    factory: IDS_BUTTON_DEFAULT_CONFIG_FACTORY,\n  },\n);\n\nexport function IDS_BUTTON_DEFAULT_CONFIG_FACTORY(): Required<IdsButtonDefaultConfig> {\n  return {\n    appearance: IdsButtonAppearance.FILLED,\n    size: IdsSize.COMPACT,\n    variant: IdsButtonVariant.PRIMARY,\n  };\n}\n\n","import { InjectionToken } from '@angular/core';\nimport { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';\n\nexport interface IdsButtonGroupDefaultConfig {\n  size?: IdsSizeType,\n}\n\nexport const IDS_BUTTON_GROUP_DEFAULT_CONFIG = new InjectionToken<IdsButtonGroupDefaultConfig>(\n  'IDS_BUTTON_GROUP_DEFAULT_CONFIG',\n  {\n    providedIn: 'root',\n    factory: IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY,\n  },\n);\n\nexport function IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY(): Required<IdsButtonGroupDefaultConfig> {\n  return {\n    size: IdsSize.COMPACT,\n  };\n}\n\n","import { IDS_BUTTON_GROUP_DEFAULT_CONFIG, IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY, IdsButtonGroupDefaultConfig } from './button-group-defaults';\n\nimport { ChangeDetectionStrategy, Component, input, signal, ViewEncapsulation } from '@angular/core';\nimport { ComponentBaseWithDefaults, IdsSizeType } from '@i-cell/ids-angular/core';\n\nconst defaultConfig = IDS_BUTTON_GROUP_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'ids-button-group',\n  imports: [],\n  template: '<ng-content select=\"button[idsButton], button[idsIconButton]\">',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IdsButtonGroupComponent extends ComponentBaseWithDefaults<IdsButtonGroupDefaultConfig> {\n  protected override get _hostName(): string {\n    return 'button-group';\n  }\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_BUTTON_GROUP_DEFAULT_CONFIG);\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n\n  protected _hostClasses =signal(this._getHostClasses([this.size()]));\n}\n","import { IDS_BUTTON_DEFAULT_CONFIG, IDS_BUTTON_DEFAULT_CONFIG_FACTORY, IdsButtonDefaultConfig } from './button-defaults';\nimport { IdsButtonGroupComponent } from './button-group.component';\nimport { IDS_BUTTON_PARENT } from './tokens/button-parent';\nimport { IdsButtonAppearanceType } from './types/button-appearance.type';\nimport { IdsButtonVariantType } from './types/button-variant.type';\n\nimport { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation, computed, contentChildren, effect, inject, input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { ComponentBaseWithDefaults, IdsSizeType, coerceBooleanAttribute } from '@i-cell/ids-angular/core';\nimport { IdsIconComponent } from '@i-cell/ids-angular/icon';\n\nconst defaultConfig = IDS_BUTTON_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'button[idsButton], a[idsButton]',\n  imports: [],\n  templateUrl: './button.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.aria-disabled]': 'this.disabled()? \"\" : null',\n    '[attr.disabled]': 'this.disabled() ? \"\" : null',\n  },\n})\nexport class IdsButtonComponent extends ComponentBaseWithDefaults<IdsButtonDefaultConfig> {\n  protected override get _hostName(): string {\n    return 'button';\n  }\n\n  private readonly _parent = inject(IDS_BUTTON_PARENT, { optional: true });\n  private readonly _group = inject(IdsButtonGroupComponent, { optional: true });\n  private _hostElement = inject<ElementRef<HTMLElement>>(ElementRef<HTMLElement>).nativeElement;\n  private _routerLink = inject(RouterLink, { optional: true, self: true });\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_BUTTON_DEFAULT_CONFIG);\n\n  public appearance = input<IdsButtonAppearanceType>(this._defaultConfig.appearance);\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n  public variant = input<IdsButtonVariantType>(this._defaultConfig.variant);\n  public disabled = input(false, { transform: (value: boolean | string) => coerceBooleanAttribute(value) });\n\n  private _parentOrSelfSize = computed(() => this._group?.size() ?? this.size());\n  private _parentOrSelfVariant = computed(() => this._parent?.embeddedButtonVariant() ?? this.variant());\n\n  protected _iconLeading = contentChildren<IdsIconComponent>('[icon-leading]');\n  protected _iconTrailing = contentChildren<IdsIconComponent>('[icon-trailing]');\n\n  private get _buttonType(): string | null {\n    return this._hostElement.tagName === 'BUTTON' ? 'button' : null;\n  }\n\n  constructor() {\n    super();\n\n    effect(() => {\n      if (this._buttonType) {\n        return;\n      }\n\n      const link = this._hostElement as HTMLAnchorElement;\n\n      if (this.disabled()) {\n        this._disableLink(link);\n      } else {\n        this._enableLink(link);\n      }\n    });\n  }\n\n  protected _hostClasses = computed(() => this._getHostClasses([\n    this.appearance(),\n    this._parentOrSelfSize(),\n    this._parentOrSelfVariant(),\n    this.disabled() ? 'disabled' : null,\n  ]));\n\n  private _disableLink(link: HTMLAnchorElement): void {\n    if (!this._routerLink) {\n      link.setAttribute('data-href', link.href);\n    }\n    link.removeAttribute('href');\n  }\n\n  private _enableLink(link: HTMLAnchorElement): void {\n    const prevHref = this._routerLink?.href ?? link.getAttribute('data-href') ?? '';\n\n    if (prevHref) {\n      link.href = prevHref;\n      link.removeAttribute('data-href');\n    }\n  }\n}\n","@if (_iconLeading()) {\n  <ng-content select=\"[icon-leading]\" />\n}\n<span class=\"ids-button-label\"><ng-content /></span>\n@if (_iconTrailing()) {\n  <ng-content select=\"[icon-trailing]\" />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["defaultConfig"],"mappings":"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"}

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

@@ -135,7 +135,7 @@ class IdsChipComponent extends ComponentBaseWithDefaults {
                 provide: IDS_AVATAR_PARENT,
                 useExisting: IdsChipComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ids-avatar\" />\n\n<ng-content select=\"[idsLeadingIcon]\" />\n\n<div class=\"ids-chip__label\">\n  <ng-content />\n</div>\n\n@if (_safeRemovable()) {\n  <button type=\"button\" idsIconButton (click)=\"remove()\">\n    <ids-icon fontIcon=\"close\" />\n  </button>\n} @else {\n  <ng-content select=\"button[idsIconButton]\" />\n}\n", dependencies: [{ kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ids-avatar\" />\n\n<ng-content select=\"[idsLeadingIcon]\" />\n\n<div class=\"ids-chip__label\">\n  <ng-content />\n</div>\n\n@if (_safeRemovable()) {\n  <button type=\"button\" idsIconButton (click)=\"remove()\">\n    <ids-icon fontIcon=\"close\" />\n  </button>\n} @else {\n  <ng-content select=\"button[idsIconButton]\" />\n}\n", dependencies: [{ kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { 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: IdsChipComponent, decorators: [{
             type: Component,