@agorapulse/ui-components 17.4.5 → 18.0.0-beta.2

package/esm2022/directives/equal-validator.directive.mjs

@@ -40,8 +40,8 @@ export class EqualValidatorDirective {
         }
         return this.validateEqualReference === 'true';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: EqualValidatorDirective, deps: [{ token: 'validateEqual', attribute: true }, { token: 'validateEqualReference', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: EqualValidatorDirective, isStandalone: true, selector: "[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: EqualValidatorDirective, deps: [{ token: 'validateEqual', attribute: true }, { token: 'validateEqualReference', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: EqualValidatorDirective, isStandalone: true, selector: "[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]", providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => EqualValidatorDirective),
@@ -49,7 +49,7 @@ export class EqualValidatorDirective {
             },
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: EqualValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: EqualValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/esm2022/directives/frozen-gif.directive.mjs

@@ -99,10 +99,10 @@ export class FrozenGifDirective {
         this.element.style.visibility = 'inherit';
         this.element.style.display = 'inherit';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FrozenGifDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: FrozenGifDirective, isStandalone: true, selector: "img[apFrozenGif]", inputs: { src: "src", apFrozen: "apFrozen", apGifEvents: "apGifEvents" }, host: { properties: { "src": "src" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FrozenGifDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: FrozenGifDirective, isStandalone: true, selector: "img[apFrozenGif]", inputs: { src: "src", apFrozen: "apFrozen", apGifEvents: "apGifEvents" }, host: { properties: { "src": "src" } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FrozenGifDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FrozenGifDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img[apFrozenGif]',

package/esm2022/directives/multi-style-text.directive.mjs

@@ -43,10 +43,10 @@ export class MultiStyleTextDirective {
         this.elRef = elRef;
         this.renderer = renderer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MultiStyleTextDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: MultiStyleTextDirective, isStandalone: true, selector: "[multiStyleText]", inputs: { multiStyleText: "multiStyleText" }, outputs: { partEvent: "partEvent" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MultiStyleTextDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: MultiStyleTextDirective, isStandalone: true, selector: "[multiStyleText]", inputs: { multiStyleText: "multiStyleText" }, outputs: { partEvent: "partEvent" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MultiStyleTextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MultiStyleTextDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/esm2022/dot-stepper/dot-stepper.component.mjs

@@ -25,10 +25,10 @@ export class DotStepperComponent {
         this.index = index;
         this.dotClick.emit(this.index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DotStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DotStepperComponent, isStandalone: true, selector: "ap-dot-stepper", inputs: { interactive: ["interactive", "interactive", booleanAttribute], index: "index", items: "items" }, outputs: { dotClick: "dotClick" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"dots\">\n    @for (item of items; track item; let i = $index) {\n        <div\n            class=\"dot\"\n            tabindex=\"-1\"\n            [ngClass]=\"{\n                active: item === currentItem,\n                disabled: !interactive\n            }\"\n            (click)=\"onDotClick($event, item, i)\"\n            (keydown)=\"onDotClick($event, item, i)\"></div>\n    }\n</div>\n", styles: [".dots{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--comp-dot-stepper-spacing);place-content:stretch center;width:100%}.dots .dot{position:relative;transition:all .2s ease-in-out;border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--comp-dot-stepper-dot-inactive-border-color);border-radius:50%;height:var(--comp-dot-stepper-dot-size);width:var(--comp-dot-stepper-dot-size);cursor:pointer}.dots .dot:hover{border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-60);background:var(--comp-dot-stepper-dot-inactive-focused-background-color)}.dots .dot:focus{background:var(--comp-dot-stepper-dot-inactive-hovered-background-color)}.dots .dot:focus:after{content:\"\";width:calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));height:calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));top:calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));left:calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));position:absolute;border-radius:50%;border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-100)}.dots .dot.active{background:var(--comp-dot-stepper-dot-active-background-color);border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-150);cursor:initial}.dots .dot.disabled{cursor:initial;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DotStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: DotStepperComponent, isStandalone: true, selector: "ap-dot-stepper", inputs: { interactive: ["interactive", "interactive", booleanAttribute], index: "index", items: "items" }, outputs: { dotClick: "dotClick" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"dots\">\n    @for (item of items; track item; let i = $index) {\n        <div\n            class=\"dot\"\n            tabindex=\"-1\"\n            [ngClass]=\"{\n                active: item === currentItem,\n                disabled: !interactive\n            }\"\n            (click)=\"onDotClick($event, item, i)\"\n            (keydown)=\"onDotClick($event, item, i)\"></div>\n    }\n</div>\n", styles: [".dots{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--comp-dot-stepper-spacing);place-content:stretch center;width:100%}.dots .dot{position:relative;transition:all .2s ease-in-out;border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--comp-dot-stepper-dot-inactive-border-color);border-radius:50%;height:var(--comp-dot-stepper-dot-size);width:var(--comp-dot-stepper-dot-size);cursor:pointer}.dots .dot:hover{border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-60);background:var(--comp-dot-stepper-dot-inactive-focused-background-color)}.dots .dot:focus{background:var(--comp-dot-stepper-dot-inactive-hovered-background-color)}.dots .dot:focus:after{content:\"\";width:calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));height:calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));top:calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));left:calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));position:absolute;border-radius:50%;border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-100)}.dots .dot.active{background:var(--comp-dot-stepper-dot-active-background-color);border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-150);cursor:initial}.dots .dot.disabled{cursor:initial;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DotStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DotStepperComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-dot-stepper', standalone: true, imports: [NgClass], template: "<div\n    class=\"dots\">\n    @for (item of items; track item; let i = $index) {\n        <div\n            class=\"dot\"\n            tabindex=\"-1\"\n            [ngClass]=\"{\n                active: item === currentItem,\n                disabled: !interactive\n            }\"\n            (click)=\"onDotClick($event, item, i)\"\n            (keydown)=\"onDotClick($event, item, i)\"></div>\n    }\n</div>\n", styles: [".dots{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--comp-dot-stepper-spacing);place-content:stretch center;width:100%}.dots .dot{position:relative;transition:all .2s ease-in-out;border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--comp-dot-stepper-dot-inactive-border-color);border-radius:50%;height:var(--comp-dot-stepper-dot-size);width:var(--comp-dot-stepper-dot-size);cursor:pointer}.dots .dot:hover{border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-60);background:var(--comp-dot-stepper-dot-inactive-focused-background-color)}.dots .dot:focus{background:var(--comp-dot-stepper-dot-inactive-hovered-background-color)}.dots .dot:focus:after{content:\"\";width:calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));height:calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));top:calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));left:calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));position:absolute;border-radius:50%;border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-100)}.dots .dot.active{background:var(--comp-dot-stepper-dot-active-background-color);border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-150);cursor:initial}.dots .dot.disabled{cursor:initial;pointer-events:none}\n"] }]
         }], propDecorators: { interactive: [{

package/esm2022/form-field/form-field.component.mjs

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 export class FormFieldComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: FormFieldComponent, isStandalone: true, selector: "ap-form-field", ngImport: i0, template: "<div class=\"ap-form-field\">\n    <ng-content select=\"label\"></ng-content>\n    <ng-content></ng-content>\n    <ng-content select=\"ap-form-message\"></ng-content>\n</div>\n", styles: ["ap-form-field{display:block}.ap-form-field{display:inline-flex;flex-direction:column;gap:var(--comp-input-spacing-horizontal);width:100%}.ap-form-field label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}.ap-form-field label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FormFieldComponent, isStandalone: true, selector: "ap-form-field", ngImport: i0, template: "<div class=\"ap-form-field\">\n    <ng-content select=\"label\"></ng-content>\n    <ng-content></ng-content>\n    <ng-content select=\"ap-form-message\"></ng-content>\n</div>\n", styles: ["ap-form-field{display:block}.ap-form-field{display:inline-flex;flex-direction:column;gap:var(--comp-input-spacing-horizontal);width:100%}.ap-form-field label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}.ap-form-field label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-form-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ap-form-field\">\n    <ng-content select=\"label\"></ng-content>\n    <ng-content></ng-content>\n    <ng-content select=\"ap-form-message\"></ng-content>\n</div>\n", styles: ["ap-form-field{display:block}.ap-form-field{display:inline-flex;flex-direction:column;gap:var(--comp-input-spacing-horizontal);width:100%}.ap-form-field label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}.ap-form-field label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}\n"] }]
         }] });

package/esm2022/form-message/form-message.component.mjs

@@ -14,10 +14,10 @@ export class FormMessageComponent {
     constructor() {
         this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: FormMessageComponent, isStandalone: true, selector: "ap-form-message", inputs: { messageType: "messageType", message: "message" }, host: { properties: { "class.error": "messageTypeSignal() === 'error'", "class.success": "messageTypeSignal() === 'success'" }, classAttribute: "ap-form-message" }, ngImport: i0, template: "<ap-symbol\n    size=\"sm\"\n    [symbolId]=\"symbolIdSignal()\" />\n<span>\n    {{ message }}\n</span>\n", styles: [".ap-form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ap-form-message.error{color:var(--comp-forms-status-text-error-color)}.ap-form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.ap-form-message.success{color:var(--comp-forms-status-text-success-color)}.ap-form-message.success ap-symbol{color:var(--ref-color-green-150)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FormMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: FormMessageComponent, isStandalone: true, selector: "ap-form-message", inputs: { messageType: "messageType", message: "message" }, host: { properties: { "class.error": "messageTypeSignal() === 'error'", "class.success": "messageTypeSignal() === 'success'" }, classAttribute: "ap-form-message" }, ngImport: i0, template: "<ap-symbol\n    size=\"sm\"\n    [symbolId]=\"symbolIdSignal()\" />\n<span>\n    {{ message }}\n</span>\n", styles: [".ap-form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ap-form-message.error{color:var(--comp-forms-status-text-error-color)}.ap-form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.ap-form-message.success{color:var(--comp-forms-status-text-success-color)}.ap-form-message.success ap-symbol{color:var(--ref-color-green-150)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: FormMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-form-message', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent], host: {
                         class: 'ap-form-message',

package/esm2022/icon-button/icon-button.component.mjs

@@ -72,10 +72,10 @@ export class IconButtonComponent {
             this.buttonElement.nativeElement.click();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: ["disabled", "disabled", booleanAttribute], menuTrigger: "menuTrigger", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" } }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    class=\"icon-button\"\n    type=\"button\"\n    [name]=\"name\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.data-test]=\"hostDataTest ?? name\"\n    [disabled]=\"disabled\"\n    [class.blue]=\"color === 'blue'\"\n    [class.green]=\"color === 'green'\"\n    [class.red]=\"color === 'red'\"\n    [class.flat]=\"type === 'flat'\"\n    [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n    [class.transparent]=\"type === 'stroked-transparent'\"\n    [class.loading]=\"loading\"\n    [class.locked]=\"locked\"\n    (click)=\"onClickHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    @if (!loading) {\n        <ng-content />\n    }\n    @if (loading) {\n        <ap-loader\n            color=\"white\"\n            [diameter]=\"16\" />\n    }\n    @if (locked) {\n        <div class=\"locked-symbol\">\n            <ap-symbol\n                symbolId=\"premium-star\"\n                size=\"sm\" />\n        </div>\n    }\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button[disabled]{pointer-events:none}ap-icon-button button.icon-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-icon-button-padding)}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%;padding:0;margin:0;color:var(--ref-color-grey-60);min-width:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2);min-height:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2)}ap-icon-button button.icon-button ap-symbol .svg{display:inline-flex!important;justify-content:center;align-items:center}ap-icon-button button.icon-button ap-symbol .svg svg{height:100%;width:100%}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:#fff}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: ["disabled", "disabled", booleanAttribute], menuTrigger: "menuTrigger", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" } }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    class=\"icon-button\"\n    type=\"button\"\n    [name]=\"name\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.data-test]=\"hostDataTest ?? name\"\n    [disabled]=\"disabled\"\n    [class.blue]=\"color === 'blue'\"\n    [class.green]=\"color === 'green'\"\n    [class.red]=\"color === 'red'\"\n    [class.flat]=\"type === 'flat'\"\n    [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n    [class.transparent]=\"type === 'stroked-transparent'\"\n    [class.loading]=\"loading\"\n    [class.locked]=\"locked\"\n    (click)=\"onClickHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    @if (!loading) {\n        <ng-content />\n    }\n    @if (loading) {\n        <ap-loader\n            color=\"white\"\n            [diameter]=\"16\" />\n    }\n    @if (locked) {\n        <div class=\"locked-symbol\">\n            <ap-symbol\n                symbolId=\"premium-star\"\n                size=\"sm\" />\n        </div>\n    }\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button[disabled]{pointer-events:none}ap-icon-button button.icon-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-icon-button-padding)}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%;padding:0;margin:0;color:var(--ref-color-grey-60);min-width:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2);min-height:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2)}ap-icon-button button.icon-button ap-symbol .svg{display:inline-flex!important;justify-content:center;align-items:center}ap-icon-button button.icon-button ap-symbol .svg svg{height:100%;width:100%}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:#fff}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: IconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IconButtonComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-icon-button', standalone: true, imports: [SymbolComponent, LoaderComponent, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    class=\"icon-button\"\n    type=\"button\"\n    [name]=\"name\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.data-test]=\"hostDataTest ?? name\"\n    [disabled]=\"disabled\"\n    [class.blue]=\"color === 'blue'\"\n    [class.green]=\"color === 'green'\"\n    [class.red]=\"color === 'red'\"\n    [class.flat]=\"type === 'flat'\"\n    [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n    [class.transparent]=\"type === 'stroked-transparent'\"\n    [class.loading]=\"loading\"\n    [class.locked]=\"locked\"\n    (click)=\"onClickHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    @if (!loading) {\n        <ng-content />\n    }\n    @if (loading) {\n        <ap-loader\n            color=\"white\"\n            [diameter]=\"16\" />\n    }\n    @if (locked) {\n        <div class=\"locked-symbol\">\n            <ap-symbol\n                symbolId=\"premium-star\"\n                size=\"sm\" />\n        </div>\n    }\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button[disabled]{pointer-events:none}ap-icon-button button.icon-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-icon-button-padding)}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%;padding:0;margin:0;color:var(--ref-color-grey-60);min-width:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2);min-height:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2)}ap-icon-button button.icon-button ap-symbol .svg{display:inline-flex!important;justify-content:center;align-items:center}ap-icon-button button.icon-button ap-symbol .svg svg{height:100%;width:100%}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:#fff}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"] }]
         }], ctorParameters: () => [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }], propDecorators: { ariaLabel: [{

package/esm2022/infobox/infobox.component.mjs

@@ -44,10 +44,10 @@ export class InfoboxComponent {
         this.elementRef.nativeElement.remove();
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonId: "buttonId", buttonLabel: "buttonLabel", buttonDataTrack: "buttonDataTrack", closable: ["closable", "closable", booleanAttribute], title: "title", type: "type", width: "width" }, outputs: { buttonClicked: "buttonClicked", closed: "closed" }, host: { properties: { "class.full-width": "this.fullWidth" } }, ngImport: i0, template: "<div\n    class=\"main\"\n    [class.info]=\"type === 'info'\"\n    [class.warning]=\"type === 'warning'\"\n    [class.error]=\"type === 'error'\"\n    [class.success]=\"type === 'success'\"\n    [class.has-title]=\"!!title\">\n    <div class=\"status-banner\"></div>\n    <div class=\"wrapper\">\n        <div class=\"symbol-content\">\n            <div class=\"symbol-wrapper\">\n                <ap-symbol\n                    class=\"status\"\n                    size=\"sm\"\n                    [symbolId]=\"symbolIds[type]\" />\n            </div>\n            <div class=\"content\">\n                <div class=\"texts\">\n                    @if (title) {\n                        <span class=\"title\">\n                            {{ title }}\n                        </span>\n                    }\n                    <span class=\"text\">\n                        <ng-content />\n                    </span>\n                </div>\n                @if (buttonLabel) {\n                    <ap-button\n                        name=\"infobox-button\"\n                        [id]=\"buttonId ?? defaultButtonId\"\n                        [attr.data-track]=\"buttonDataTrack\"\n                        [config]=\"{\n                            style: 'stroked',\n                            color: 'grey'\n                        }\"\n                        (click)=\"onClickButton()\">\n                        {{ buttonLabel }}\n                    </ap-button>\n                }\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"closable-button\"\n                (click)=\"onCloseInfobox()\">\n                <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"delete-no-circle\"\n                size=\"xs\"/>\n            </button>\n        }\n    </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 20px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:center}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items:flex-start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:flex-start;flex:1}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items:flex-start;flex:1;justify-content:space-between;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content .content ap-button button{width:unset}ap-infobox .main .wrapper .symbol-content .content .texts{display:flex;flex-direction:column;overflow-wrap:anywhere}ap-infobox .main .wrapper .symbol-content .content .texts .title{font-weight:var(--comp-infobox-text-title-weight);font-family:var(--comp-infobox-text-title-font-family);font-size:var(--comp-infobox-text-title-size);line-height:var(--comp-infobox-text-title-line-height)}ap-infobox .main.info{background-color:var(--comp-infobox-info-background-color)}ap-infobox .main.info ap-symbol.status{align-self:baseline;color:var(--comp-infobox-info-icon-color)}ap-infobox .main.info .status-banner{background-color:var(--comp-infobox-info-border-left-color)}ap-infobox .main.warning{background-color:var(--comp-infobox-warning-background-color)}ap-infobox .main.warning ap-symbol.status{color:var(--comp-infobox-warning-icon-color)}ap-infobox .main.warning .status-banner{background-color:var(--comp-infobox-warning-border-left-color)}ap-infobox .main.error{background-color:var(--comp-infobox-error-background-color)}ap-infobox .main.error ap-symbol.status{color:var(--comp-infobox-error-icon-color)}ap-infobox .main.error .status-banner{background-color:var(--comp-infobox-error-border-left-color)}ap-infobox .main.success{background-color:var(--comp-infobox-success-background-color)}ap-infobox .main.success ap-symbol.status{color:var(--comp-infobox-success-icon-color)}ap-infobox .main.success .status-banner{background-color:var(--comp-infobox-success-border-left-color)}@container infobox (min-width: 588px){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "ionicModalEnabled"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonId: "buttonId", buttonLabel: "buttonLabel", buttonDataTrack: "buttonDataTrack", closable: ["closable", "closable", booleanAttribute], title: "title", type: "type", width: "width" }, outputs: { buttonClicked: "buttonClicked", closed: "closed" }, host: { properties: { "class.full-width": "this.fullWidth" } }, ngImport: i0, template: "<div\n    class=\"main\"\n    [class.info]=\"type === 'info'\"\n    [class.warning]=\"type === 'warning'\"\n    [class.error]=\"type === 'error'\"\n    [class.success]=\"type === 'success'\"\n    [class.has-title]=\"!!title\">\n    <div class=\"status-banner\"></div>\n    <div class=\"wrapper\">\n        <div class=\"symbol-content\">\n            <div class=\"symbol-wrapper\">\n                <ap-symbol\n                    class=\"status\"\n                    size=\"sm\"\n                    [symbolId]=\"symbolIds[type]\" />\n            </div>\n            <div class=\"content\">\n                <div class=\"texts\">\n                    @if (title) {\n                        <span class=\"title\">\n                            {{ title }}\n                        </span>\n                    }\n                    <span class=\"text\">\n                        <ng-content />\n                    </span>\n                </div>\n                @if (buttonLabel) {\n                    <ap-button\n                        name=\"infobox-button\"\n                        [id]=\"buttonId ?? defaultButtonId\"\n                        [attr.data-track]=\"buttonDataTrack\"\n                        [config]=\"{\n                            style: 'stroked',\n                            color: 'grey'\n                        }\"\n                        (click)=\"onClickButton()\">\n                        {{ buttonLabel }}\n                    </ap-button>\n                }\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"closable-button\"\n                (click)=\"onCloseInfobox()\">\n                <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"delete-no-circle\"\n                size=\"xs\"/>\n            </button>\n        }\n    </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 20px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:center}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items:flex-start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:flex-start;flex:1}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items:flex-start;flex:1;justify-content:space-between;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content .content ap-button button{width:unset}ap-infobox .main .wrapper .symbol-content .content .texts{display:flex;flex-direction:column;overflow-wrap:anywhere}ap-infobox .main .wrapper .symbol-content .content .texts .title{font-weight:var(--comp-infobox-text-title-weight);font-family:var(--comp-infobox-text-title-font-family);font-size:var(--comp-infobox-text-title-size);line-height:var(--comp-infobox-text-title-line-height)}ap-infobox .main.info{background-color:var(--comp-infobox-info-background-color)}ap-infobox .main.info ap-symbol.status{align-self:baseline;color:var(--comp-infobox-info-icon-color)}ap-infobox .main.info .status-banner{background-color:var(--comp-infobox-info-border-left-color)}ap-infobox .main.warning{background-color:var(--comp-infobox-warning-background-color)}ap-infobox .main.warning ap-symbol.status{color:var(--comp-infobox-warning-icon-color)}ap-infobox .main.warning .status-banner{background-color:var(--comp-infobox-warning-border-left-color)}ap-infobox .main.error{background-color:var(--comp-infobox-error-background-color)}ap-infobox .main.error ap-symbol.status{color:var(--comp-infobox-error-icon-color)}ap-infobox .main.error .status-banner{background-color:var(--comp-infobox-error-border-left-color)}ap-infobox .main.success{background-color:var(--comp-infobox-success-background-color)}ap-infobox .main.success ap-symbol.status{color:var(--comp-infobox-success-icon-color)}ap-infobox .main.success .status-banner{background-color:var(--comp-infobox-success-border-left-color)}@container infobox (min-width: 588px){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "ionicModalEnabled"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InfoboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InfoboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-infobox', standalone: true, imports: [SymbolComponent, NgClass, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"main\"\n    [class.info]=\"type === 'info'\"\n    [class.warning]=\"type === 'warning'\"\n    [class.error]=\"type === 'error'\"\n    [class.success]=\"type === 'success'\"\n    [class.has-title]=\"!!title\">\n    <div class=\"status-banner\"></div>\n    <div class=\"wrapper\">\n        <div class=\"symbol-content\">\n            <div class=\"symbol-wrapper\">\n                <ap-symbol\n                    class=\"status\"\n                    size=\"sm\"\n                    [symbolId]=\"symbolIds[type]\" />\n            </div>\n            <div class=\"content\">\n                <div class=\"texts\">\n                    @if (title) {\n                        <span class=\"title\">\n                            {{ title }}\n                        </span>\n                    }\n                    <span class=\"text\">\n                        <ng-content />\n                    </span>\n                </div>\n                @if (buttonLabel) {\n                    <ap-button\n                        name=\"infobox-button\"\n                        [id]=\"buttonId ?? defaultButtonId\"\n                        [attr.data-track]=\"buttonDataTrack\"\n                        [config]=\"{\n                            style: 'stroked',\n                            color: 'grey'\n                        }\"\n                        (click)=\"onClickButton()\">\n                        {{ buttonLabel }}\n                    </ap-button>\n                }\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"closable-button\"\n                (click)=\"onCloseInfobox()\">\n                <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"delete-no-circle\"\n                size=\"xs\"/>\n            </button>\n        }\n    </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 20px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:center}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items:flex-start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:flex-start;flex:1}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items:flex-start;flex:1;justify-content:space-between;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content .content ap-button button{width:unset}ap-infobox .main .wrapper .symbol-content .content .texts{display:flex;flex-direction:column;overflow-wrap:anywhere}ap-infobox .main .wrapper .symbol-content .content .texts .title{font-weight:var(--comp-infobox-text-title-weight);font-family:var(--comp-infobox-text-title-font-family);font-size:var(--comp-infobox-text-title-size);line-height:var(--comp-infobox-text-title-line-height)}ap-infobox .main.info{background-color:var(--comp-infobox-info-background-color)}ap-infobox .main.info ap-symbol.status{align-self:baseline;color:var(--comp-infobox-info-icon-color)}ap-infobox .main.info .status-banner{background-color:var(--comp-infobox-info-border-left-color)}ap-infobox .main.warning{background-color:var(--comp-infobox-warning-background-color)}ap-infobox .main.warning ap-symbol.status{color:var(--comp-infobox-warning-icon-color)}ap-infobox .main.warning .status-banner{background-color:var(--comp-infobox-warning-border-left-color)}ap-infobox .main.error{background-color:var(--comp-infobox-error-background-color)}ap-infobox .main.error ap-symbol.status{color:var(--comp-infobox-error-icon-color)}ap-infobox .main.error .status-banner{background-color:var(--comp-infobox-error-border-left-color)}ap-infobox .main.success{background-color:var(--comp-infobox-success-background-color)}ap-infobox .main.success ap-symbol.status{color:var(--comp-infobox-success-icon-color)}ap-infobox .main.success .status-banner{background-color:var(--comp-infobox-success-border-left-color)}@container infobox (min-width: 588px){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fullWidth: [{

package/esm2022/input/input.directive.mjs

@@ -3,10 +3,10 @@ import * as i0 from "@angular/core";
 export class InputDirective {
     elementRef = inject(ElementRef);
     input = this.elementRef.nativeElement;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: InputDirective, isStandalone: true, selector: "[apInput]", host: { classAttribute: "ap-input" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: InputDirective, isStandalone: true, selector: "[apInput]", host: { classAttribute: "ap-input" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[apInput]',

package/esm2022/input-group/input-group.component.mjs

@@ -2,10 +2,10 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
 import * as i0 from "@angular/core";
 export class InputGroupComponent {
     symbolPosition = 'left';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: InputGroupComponent, isStandalone: true, selector: "ap-input-group", inputs: { symbolPosition: "symbolPosition" }, ngImport: i0, template: "<div\n    class=\"ap-input-group\"\n    [class.inverse]=\"symbolPosition === 'right'\">\n    <ng-content select=\"ap-input-prefix\" />\n    <ng-content select=\"ap-symbol\" />\n    <ng-content />\n</div>\n", styles: ["ap-input-group.valid .ap-input-group{border-color:var(--comp-input-border-success-color)}ap-input-group.invalid .ap-input-group{border-color:var(--comp-input-border-error-color)}ap-input-group .ap-input-group{width:100%;display:inline-flex;align-items:center;height:var(--comp-input-height);border:1px solid var(--comp-input-border-default-color);box-sizing:border-box;border-radius:var(--comp-input-border-radius);overflow:hidden;background-color:var(--comp-input-fill-color);gap:var(--ref-spacing-xxs);padding:0 var(--ref-spacing-xs)}ap-input-group .ap-input-group:has(input[disabled]){background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input-group .ap-input-group:has(input.valid){border-color:var(--comp-input-border-success-color)}ap-input-group .ap-input-group:has(input.invalid),ap-input-group .ap-input-group:has(input.ng-invalid.ng-dirty.ng-touched){border-color:var(--comp-input-border-error-color)}ap-input-group .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-hover-color)}ap-input-group .ap-input-group:focus-within:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}ap-input-group .ap-input-group:focus-visible:not(.disabled):not(:has(input[disabled])){outline:none}ap-input-group .ap-input-group:active:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}ap-input-group .ap-input-group.disabled{background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input-group .ap-input-group.inverse{flex-direction:row-reverse}ap-input-group .ap-input-group input.ap-input{flex:1;padding-left:0;padding-right:0}ap-input-group .ap-input-group input.ap-input.valid:not([disabled]):not(:focus):not(:hover){border:none}ap-input-group .ap-input-group input.ap-input.invalid:not([disabled]):not(:focus):not(:hover),ap-input-group .ap-input-group input.ap-input.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(:focus):not(:hover){border:none}ap-input-group .ap-input-group ap-symbol{max-height:var(--comp-input-icon-size);max-width:var(--comp-input-icon-size);color:var(--comp-input-icon-color);pointer-events:none;box-sizing:content-box}ap-input-group .ap-input-group ap-symbol:hover{cursor:text}ap-input-group .ap-input-group .ap-input{border:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: InputGroupComponent, isStandalone: true, selector: "ap-input-group", inputs: { symbolPosition: "symbolPosition" }, ngImport: i0, template: "<div\n    class=\"ap-input-group\"\n    [class.inverse]=\"symbolPosition === 'right'\">\n    <ng-content select=\"ap-input-prefix\" />\n    <ng-content select=\"ap-symbol\" />\n    <ng-content />\n</div>\n", styles: ["ap-input-group.valid .ap-input-group{border-color:var(--comp-input-border-success-color)}ap-input-group.invalid .ap-input-group{border-color:var(--comp-input-border-error-color)}ap-input-group .ap-input-group{width:100%;display:inline-flex;align-items:center;height:var(--comp-input-height);border:1px solid var(--comp-input-border-default-color);box-sizing:border-box;border-radius:var(--comp-input-border-radius);overflow:hidden;background-color:var(--comp-input-fill-color);gap:var(--ref-spacing-xxs);padding:0 var(--ref-spacing-xs)}ap-input-group .ap-input-group:has(input[disabled]){background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input-group .ap-input-group:has(input.valid){border-color:var(--comp-input-border-success-color)}ap-input-group .ap-input-group:has(input.invalid),ap-input-group .ap-input-group:has(input.ng-invalid.ng-dirty.ng-touched){border-color:var(--comp-input-border-error-color)}ap-input-group .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-hover-color)}ap-input-group .ap-input-group:focus-within:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}ap-input-group .ap-input-group:focus-visible:not(.disabled):not(:has(input[disabled])){outline:none}ap-input-group .ap-input-group:active:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}ap-input-group .ap-input-group.disabled{background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input-group .ap-input-group.inverse{flex-direction:row-reverse}ap-input-group .ap-input-group input.ap-input{flex:1;padding-left:0;padding-right:0}ap-input-group .ap-input-group input.ap-input.valid:not([disabled]):not(:focus):not(:hover){border:none}ap-input-group .ap-input-group input.ap-input.invalid:not([disabled]):not(:focus):not(:hover),ap-input-group .ap-input-group input.ap-input.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(:focus):not(:hover){border:none}ap-input-group .ap-input-group ap-symbol{max-height:var(--comp-input-icon-size);max-width:var(--comp-input-icon-size);color:var(--comp-input-icon-color);pointer-events:none;box-sizing:content-box}ap-input-group .ap-input-group ap-symbol:hover{cursor:text}ap-input-group .ap-input-group .ap-input{border:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-input-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"ap-input-group\"\n    [class.inverse]=\"symbolPosition === 'right'\">\n    <ng-content select=\"ap-input-prefix\" />\n    <ng-content select=\"ap-symbol\" />\n    <ng-content />\n</div>\n", styles: ["ap-input-group.valid .ap-input-group{border-color:var(--comp-input-border-success-color)}ap-input-group.invalid .ap-input-group{border-color:var(--comp-input-border-error-color)}ap-input-group .ap-input-group{width:100%;display:inline-flex;align-items:center;height:var(--comp-input-height);border:1px solid var(--comp-input-border-default-color);box-sizing:border-box;border-radius:var(--comp-input-border-radius);overflow:hidden;background-color:var(--comp-input-fill-color);gap:var(--ref-spacing-xxs);padding:0 var(--ref-spacing-xs)}ap-input-group .ap-input-group:has(input[disabled]){background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input-group .ap-input-group:has(input.valid){border-color:var(--comp-input-border-success-color)}ap-input-group .ap-input-group:has(input.invalid),ap-input-group .ap-input-group:has(input.ng-invalid.ng-dirty.ng-touched){border-color:var(--comp-input-border-error-color)}ap-input-group .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-hover-color)}ap-input-group .ap-input-group:focus-within:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}ap-input-group .ap-input-group:focus-visible:not(.disabled):not(:has(input[disabled])){outline:none}ap-input-group .ap-input-group:active:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}ap-input-group .ap-input-group.disabled{background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input-group .ap-input-group.inverse{flex-direction:row-reverse}ap-input-group .ap-input-group input.ap-input{flex:1;padding-left:0;padding-right:0}ap-input-group .ap-input-group input.ap-input.valid:not([disabled]):not(:focus):not(:hover){border:none}ap-input-group .ap-input-group input.ap-input.invalid:not([disabled]):not(:focus):not(:hover),ap-input-group .ap-input-group input.ap-input.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(:focus):not(:hover){border:none}ap-input-group .ap-input-group ap-symbol{max-height:var(--comp-input-icon-size);max-width:var(--comp-input-icon-size);color:var(--comp-input-icon-color);pointer-events:none;box-sizing:content-box}ap-input-group .ap-input-group ap-symbol:hover{cursor:text}ap-input-group .ap-input-group .ap-input{border:none;outline:none}\n"] }]
         }], propDecorators: { symbolPosition: [{

package/esm2022/input-group/input-prefix/input-prefix.component.mjs

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 export class InputPrefixComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: InputPrefixComponent, isStandalone: true, selector: "ap-input-prefix", ngImport: i0, template: "<ng-content/>\n", styles: ["ap-input-prefix{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-right:var(--ref-spacing-xxs);border-right:1px solid var(--ref-color-grey-20);color:var(--comp-input-text-default-color);font-family:var(--comp-input-text-font-family);font-size:var(--comp-input-text-size);font-weight:var(--comp-input-text-font-weight)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: InputPrefixComponent, isStandalone: true, selector: "ap-input-prefix", ngImport: i0, template: "<ng-content/>\n", styles: ["ap-input-prefix{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-right:var(--ref-spacing-xxs);border-right:1px solid var(--ref-color-grey-20);color:var(--comp-input-text-default-color);font-family:var(--comp-input-text-font-family);font-size:var(--comp-input-text-size);font-weight:var(--comp-input-text-font-weight)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputPrefixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputPrefixComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-input-prefix', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content/>\n", styles: ["ap-input-prefix{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-right:var(--ref-spacing-xxs);border-right:1px solid var(--ref-color-grey-20);color:var(--comp-input-text-default-color);font-family:var(--comp-input-text-font-family);font-size:var(--comp-input-text-size);font-weight:var(--comp-input-text-font-weight)}\n"] }]
         }] });

package/esm2022/input-search/input-search.component.mjs

@@ -55,8 +55,8 @@ export class InputSearchComponent {
     onKeyup($event) {
         this.keyup.emit($event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: InputSearchComponent, isStandalone: true, selector: "ap-input-search", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focus: "focus", blur: "blur", keyup: "keyup" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: InputSearchComponent, isStandalone: true, selector: "ap-input-search", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focus: "focus", blur: "blur", keyup: "keyup" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputSearchComponent),
@@ -64,7 +64,7 @@ export class InputSearchComponent {
             },
         ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<ap-input-group>\n    <ap-symbol symbolId=\"search\" />\n    <input\n        #input\n        apInput\n        [id]=\"inputId()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"value()\"\n        (blur)=\"onBlurHandle($event)\"\n        (focus)=\"onFocusHandle($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (ngModelChange)=\"onValueChange($event)\" />\n    @if (clearable() && value()) {\n        <div\n            class=\"close\"\n            tabindex=\"0\"\n            (click)=\"onClear()\"\n            (keyup)=\"onClear()\">\n            <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"delete-no-circle\"\n                size=\"xs\"\n                 />\n        </div>\n    }\n</ap-input-group>\n", styles: ["ap-input-search ap-input-group .ap-input-group .close{height:20px;width:20px;display:flex;justify-content:center;align-items:center;border-radius:50%}ap-input-search ap-input-group .ap-input-group .close ap-symbol{color:var(--ref-color-grey-100);align-self:center}ap-input-search ap-input-group .ap-input-group .close:hover{background:#3445631a;border-radius:50%;cursor:pointer}ap-input-search ap-input-group .ap-input-group input{width:100%}\n"], dependencies: [{ kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-input-search', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [InputGroupComponent, InputDirective, FormsModule, SymbolComponent], providers: [
                         {

package/esm2022/labels/label-list.component.mjs

@@ -86,10 +86,10 @@ export class LabelListComponent {
         this.responsiveLabels = this.labels.slice(0, currentIndex + 1);
         this.changeDetectorRef.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: LabelListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TextMeasurementService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: LabelListComponent, isStandalone: true, selector: "ap-label-list", inputs: { labels: "labels", removeLabelsEnabled: "removeLabelsEnabled", responsive: "responsive", seeLessTranslation: "seeLessTranslation", hiddenLabelsTranslation: "hiddenLabelsTranslation" }, outputs: { removeLabel: "removeLabel" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"labels-list\"\n    (window:resize)=\"onResize()\">\n    @if (responsive) {\n        @for (label of expanded ? labels : responsiveLabels; track label) {\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n        @if (!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                +{{ howManyItemsLeft }} {{ hiddenLabelsTranslation }}\n            </a>\n        }\n        @if (expanded) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                {{ seeLessTranslation }}\n            </a>\n        }\n    } @else {\n        @for (label of labels; track trackByLabelContent($index, label)) {\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.labels-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px;max-width:100%;padding:9px 16px;margin:0}.labels-list>*{max-width:100%}.label-expand{box-sizing:border-box;padding:0 8px;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand:hover{cursor:pointer;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LabelListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TextMeasurementService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: LabelListComponent, isStandalone: true, selector: "ap-label-list", inputs: { labels: "labels", removeLabelsEnabled: "removeLabelsEnabled", responsive: "responsive", seeLessTranslation: "seeLessTranslation", hiddenLabelsTranslation: "hiddenLabelsTranslation" }, outputs: { removeLabel: "removeLabel" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"labels-list\"\n    (window:resize)=\"onResize()\">\n    @if (responsive) {\n        @for (label of expanded ? labels : responsiveLabels; track label) {\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n        @if (!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                +{{ howManyItemsLeft }} {{ hiddenLabelsTranslation }}\n            </a>\n        }\n        @if (expanded) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                {{ seeLessTranslation }}\n            </a>\n        }\n    } @else {\n        @for (label of labels; track trackByLabelContent($index, label)) {\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.labels-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px;max-width:100%;padding:9px 16px;margin:0}.labels-list>*{max-width:100%}.label-expand{box-sizing:border-box;padding:0 8px;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand:hover{cursor:pointer;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: LabelListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LabelListComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label-list', standalone: true, imports: [LabelComponent], template: "<div\n    class=\"labels-list\"\n    (window:resize)=\"onResize()\">\n    @if (responsive) {\n        @for (label of expanded ? labels : responsiveLabels; track label) {\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n        @if (!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                +{{ howManyItemsLeft }} {{ hiddenLabelsTranslation }}\n            </a>\n        }\n        @if (expanded) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                {{ seeLessTranslation }}\n            </a>\n        }\n    } @else {\n        @for (label of labels; track trackByLabelContent($index, label)) {\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.labels-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px;max-width:100%;padding:9px 16px;margin:0}.labels-list>*{max-width:100%}.label-expand{box-sizing:border-box;padding:0 8px;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand:hover{cursor:pointer;text-decoration:underline}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.TextMeasurementService }, { type: i0.NgZone }], propDecorators: { labels: [{

package/esm2022/labels/label.component.mjs

@@ -34,10 +34,10 @@ export class LabelComponent {
         this.elementRef.nativeElement.remove();
         this.remove.emit({ content: this.content, $event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: LabelComponent, isStandalone: true, selector: "ap-label", inputs: { content: "content", selectorWidth: "selectorWidth", removable: ["removable", "removable", booleanAttribute] }, outputs: { remove: "remove" }, ngImport: i0, template: "<div\n    class=\"label\"\n    [class.removable]=\"removable\"\n    [apTooltip]=\"tooltipEnabled ? content : ''\">\n    <span class=\"label-content\">{{ content }}</span>\n    @if (removable) {\n        <button\n            type=\"button\"\n            class=\"delete-button\"\n            (click)=\"onClearLabel($event)\">\n            <ap-symbol\n                symbolId=\"remove-bold\"\n                size=\"xs\" />\n        </button>\n    }\n</div>\n", styles: ["ap-label{display:flex;--button-size: calc(var(--comp-label-height) - 4px);--max-width: 180px}ap-label .label{padding:0 var(--ref-spacing-xxs);color:var(--comp-label-text-color);align-self:center;background:var(--comp-label-background-color);border-radius:var(--comp-label-border-radius);text-wrap:none;display:flex;align-items:center;border:none;padding:0 var(--comp-label-padding-right) 0 var(--comp-label-padding-left);height:var(--comp-label-height);box-sizing:border-box;text-overflow:ellipsis}ap-label .label.removable{gap:var(--comp-label-closable-spacing);padding:0 var(--comp-label-closable-padding-right) 0 var(--ref-spacing-xxs)}ap-label .label .label-content{max-width:var(--max-width);color:var(--comp-label-text-color);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--comp-label-text-style-font-family);font-size:var(--comp-label-text-style-size);line-height:var(--comp-label-text-style-line-height);font-weight:var(--comp-label-text-style-font-weight)}ap-label .label .delete-button{display:flex;align-items:center;justify-content:center;border:none;background:transparent;align-self:center;cursor:pointer;max-width:var(--button-size);width:var(--button-size);height:var(--button-size);max-height:var(--button-size);border-radius:100%}ap-label .label .delete-button ap-symbol{color:var(--ref-color-grey-80)}ap-label .label .delete-button:hover{background-color:#3445631a}ap-label .label .delete-button:hover ap-symbol{color:var(--ref-color-grey-100)}ap-label .label .delete-button:focus{-webkit-box-shadow:0px 0px 0px 1px var(--ref-color-white),0px 0px 0px 3px var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}ap-label .label .delete-button:active{background-color:#34456333}ap-label .label .delete-button:active ap-symbol{color:var(--ref-color-grey-100)}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: LabelComponent, isStandalone: true, selector: "ap-label", inputs: { content: "content", selectorWidth: "selectorWidth", removable: ["removable", "removable", booleanAttribute] }, outputs: { remove: "remove" }, ngImport: i0, template: "<div\n    class=\"label\"\n    [class.removable]=\"removable\"\n    [apTooltip]=\"tooltipEnabled ? content : ''\">\n    <span class=\"label-content\">{{ content }}</span>\n    @if (removable) {\n        <button\n            type=\"button\"\n            class=\"delete-button\"\n            (click)=\"onClearLabel($event)\">\n            <ap-symbol\n                symbolId=\"remove-bold\"\n                size=\"xs\" />\n        </button>\n    }\n</div>\n", styles: ["ap-label{display:flex;--button-size: calc(var(--comp-label-height) - 4px);--max-width: 180px}ap-label .label{padding:0 var(--ref-spacing-xxs);color:var(--comp-label-text-color);align-self:center;background:var(--comp-label-background-color);border-radius:var(--comp-label-border-radius);text-wrap:none;display:flex;align-items:center;border:none;padding:0 var(--comp-label-padding-right) 0 var(--comp-label-padding-left);height:var(--comp-label-height);box-sizing:border-box;text-overflow:ellipsis}ap-label .label.removable{gap:var(--comp-label-closable-spacing);padding:0 var(--comp-label-closable-padding-right) 0 var(--ref-spacing-xxs)}ap-label .label .label-content{max-width:var(--max-width);color:var(--comp-label-text-color);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--comp-label-text-style-font-family);font-size:var(--comp-label-text-style-size);line-height:var(--comp-label-text-style-line-height);font-weight:var(--comp-label-text-style-font-weight)}ap-label .label .delete-button{display:flex;align-items:center;justify-content:center;border:none;background:transparent;align-self:center;cursor:pointer;max-width:var(--button-size);width:var(--button-size);height:var(--button-size);max-height:var(--button-size);border-radius:100%}ap-label .label .delete-button ap-symbol{color:var(--ref-color-grey-80)}ap-label .label .delete-button:hover{background-color:#3445631a}ap-label .label .delete-button:hover ap-symbol{color:var(--ref-color-grey-100)}ap-label .label .delete-button:focus{-webkit-box-shadow:0px 0px 0px 1px var(--ref-color-white),0px 0px 0px 3px var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}ap-label .label .delete-button:active{background-color:#34456333}ap-label .label .delete-button:active ap-symbol{color:var(--ref-color-grey-100)}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: LabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label', standalone: true, imports: [NgClass, TooltipDirective, SymbolComponent], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"label\"\n    [class.removable]=\"removable\"\n    [apTooltip]=\"tooltipEnabled ? content : ''\">\n    <span class=\"label-content\">{{ content }}</span>\n    @if (removable) {\n        <button\n            type=\"button\"\n            class=\"delete-button\"\n            (click)=\"onClearLabel($event)\">\n            <ap-symbol\n                symbolId=\"remove-bold\"\n                size=\"xs\" />\n        </button>\n    }\n</div>\n", styles: ["ap-label{display:flex;--button-size: calc(var(--comp-label-height) - 4px);--max-width: 180px}ap-label .label{padding:0 var(--ref-spacing-xxs);color:var(--comp-label-text-color);align-self:center;background:var(--comp-label-background-color);border-radius:var(--comp-label-border-radius);text-wrap:none;display:flex;align-items:center;border:none;padding:0 var(--comp-label-padding-right) 0 var(--comp-label-padding-left);height:var(--comp-label-height);box-sizing:border-box;text-overflow:ellipsis}ap-label .label.removable{gap:var(--comp-label-closable-spacing);padding:0 var(--comp-label-closable-padding-right) 0 var(--ref-spacing-xxs)}ap-label .label .label-content{max-width:var(--max-width);color:var(--comp-label-text-color);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--comp-label-text-style-font-family);font-size:var(--comp-label-text-style-size);line-height:var(--comp-label-text-style-line-height);font-weight:var(--comp-label-text-style-font-weight)}ap-label .label .delete-button{display:flex;align-items:center;justify-content:center;border:none;background:transparent;align-self:center;cursor:pointer;max-width:var(--button-size);width:var(--button-size);height:var(--button-size);max-height:var(--button-size);border-radius:100%}ap-label .label .delete-button ap-symbol{color:var(--ref-color-grey-80)}ap-label .label .delete-button:hover{background-color:#3445631a}ap-label .label .delete-button:hover ap-symbol{color:var(--ref-color-grey-100)}ap-label .label .delete-button:focus{-webkit-box-shadow:0px 0px 0px 1px var(--ref-color-white),0px 0px 0px 3px var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}ap-label .label .delete-button:active{background-color:#34456333}ap-label .label .delete-button:active ap-symbol{color:var(--ref-color-grey-100)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { content: [{