@3dsource/source-ui-native 1.0.2 → 1.0.5

package/fesm2022/3dsource-source-ui-native.mjs

@@ -1,7 +1,39 @@
 import * as i0 from '@angular/core';
-import { input, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, Output } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, output, linkedSignal } from '@angular/core';
 import { NgStyle, NgClass } from '@angular/common';
 
+class SourceBadgeComponent {
+    constructor() {
+        this.number = input(0);
+        this.backgroundColor = input('var(--src-color-icon-critical, #B91C1C)');
+        this.type = input();
+        this.size = input('default');
+        this.borderColor = input('var(--src-color-bg-default, #FFFFFF)');
+        this.borderWidth = input('2px');
+        this.textColor = input('var(--src-color-text-inverse, #FFFFFF)');
+        this.customClass = input();
+        this.testID = input('', { alias: 'data-testid' });
+        this.classes = computed(() => {
+            const type = this.type();
+            const size = this.size();
+            const customClass = this.customClass();
+            return [
+                type ? `src-badge--${type}` : '',
+                size && !type ? `src-badge--${size}` : '',
+                customClass && Array.isArray(customClass)
+                    ? [...customClass]
+                    : (customClass ?? ''),
+            ];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SourceBadgeComponent, isStandalone: true, selector: "src-badge", inputs: { number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"src-badge\"\n  [ngClass]=\"classes()\"\n  [ngStyle]=\"\n    type()\n      ? {}\n      : {\n          '--srcBadgeBorderColor': borderColor(),\n          '--srcBadgeBackgroundColor': backgroundColor(),\n          '--srcBadgeBorderWidth': borderWidth(),\n          '--srcBadgeTextColor': textColor(),\n        }\n  \"\n  [attr.data-testid]=\"testID()\"\n>\n  @if (number()) {\n    {{ number() }}\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [".src-badge{--srcBadgeHeight: 18px;--srcBadgeBorderWidth: 2px;--srcBadgePadding: 2px 4px;--srcBadgeBackgroundColor: var(--src-color-brand-500, darkgreen);--srcBadgeBorderColor: var(--src-color-bg-default, #fff);--srcBadgeTextColor: var(--src-color-text-inverse, #fff);display:inline-block;width:auto;min-width:var(--srcBadgeHeight);height:var(--srcBadgeHeight);padding:var(--srcBadgePadding);vertical-align:top;text-align:center;border-radius:99px;border:var(--srcBadgeBorderWidth) solid var(--srcBadgeBorderColor, #fff);background:var(--srcBadgeBackgroundColor);color:var(--srcBadgeTextColor);font-size:9px;font-weight:700;line-height:1}.src-badge--small{--srcBadgeHeight: 16px;font-size:8px}.src-badge--large{--srcBadgeHeight: 20px;font-size:10px}.src-badge--neutral,.src-badge--informational,.src-badge--success,.src-badge--warning,.src-badge--attention,.src-badge--critical{--srcBadgeHeight: 20px;--srcBadgeBorderWidth: 0px;--srcBadgePadding: 2px 8px;--srcBadgeBackgroundColor: var(--src-color-bg-strong);--srcBadgeTextColor: var(--src-color-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-sans);font-size:var(--src-fs-small);font-style:normal;font-weight:var(--src-fw-medium, 500);line-height:var(--src-lh-small)}.src-badge--neutral{--srcBadgeBackgroundColor: var(--src-color-bg-strong)}.src-badge--informational{--srcBadgeBackgroundColor: #a4e8f2}.src-badge--success{--srcBadgeBackgroundColor: #aee9d1}.src-badge--warning{--srcBadgeBackgroundColor: #ffd79d}.src-badge--attention{--srcBadgeBackgroundColor: #ffea8a}.src-badge--critical{--srcBadgeBackgroundColor: #ffb7b7}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'src-badge', imports: [NgStyle, NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"src-badge\"\n  [ngClass]=\"classes()\"\n  [ngStyle]=\"\n    type()\n      ? {}\n      : {\n          '--srcBadgeBorderColor': borderColor(),\n          '--srcBadgeBackgroundColor': backgroundColor(),\n          '--srcBadgeBorderWidth': borderWidth(),\n          '--srcBadgeTextColor': textColor(),\n        }\n  \"\n  [attr.data-testid]=\"testID()\"\n>\n  @if (number()) {\n    {{ number() }}\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [".src-badge{--srcBadgeHeight: 18px;--srcBadgeBorderWidth: 2px;--srcBadgePadding: 2px 4px;--srcBadgeBackgroundColor: var(--src-color-brand-500, darkgreen);--srcBadgeBorderColor: var(--src-color-bg-default, #fff);--srcBadgeTextColor: var(--src-color-text-inverse, #fff);display:inline-block;width:auto;min-width:var(--srcBadgeHeight);height:var(--srcBadgeHeight);padding:var(--srcBadgePadding);vertical-align:top;text-align:center;border-radius:99px;border:var(--srcBadgeBorderWidth) solid var(--srcBadgeBorderColor, #fff);background:var(--srcBadgeBackgroundColor);color:var(--srcBadgeTextColor);font-size:9px;font-weight:700;line-height:1}.src-badge--small{--srcBadgeHeight: 16px;font-size:8px}.src-badge--large{--srcBadgeHeight: 20px;font-size:10px}.src-badge--neutral,.src-badge--informational,.src-badge--success,.src-badge--warning,.src-badge--attention,.src-badge--critical{--srcBadgeHeight: 20px;--srcBadgeBorderWidth: 0px;--srcBadgePadding: 2px 8px;--srcBadgeBackgroundColor: var(--src-color-bg-strong);--srcBadgeTextColor: var(--src-color-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-sans);font-size:var(--src-fs-small);font-style:normal;font-weight:var(--src-fw-medium, 500);line-height:var(--src-lh-small)}.src-badge--neutral{--srcBadgeBackgroundColor: var(--src-color-bg-strong)}.src-badge--informational{--srcBadgeBackgroundColor: #a4e8f2}.src-badge--success{--srcBadgeBackgroundColor: #aee9d1}.src-badge--warning{--srcBadgeBackgroundColor: #ffd79d}.src-badge--attention{--srcBadgeBackgroundColor: #ffea8a}.src-badge--critical{--srcBadgeBackgroundColor: #ffb7b7}\n"] }]
+        }] });
+
 const SourceBadgeType = {
     NEUTRAL: 'neutral',
     INFORMATIONAL: 'informational',
@@ -17,63 +49,19 @@ const SourceBadgeSize = {
     LARGE: 'large',
 };
 
-class SourceBadgeComponent {
+class SourceBannerComponent {
     constructor() {
-        this.number = 0;
-        this.backgroundColor = 'var(--src-color-icon-critical, #B91C1C)';
-        this.type = null;
-        this.size = SourceBadgeSize.DEFAULT;
-        /**
-         * 2 px border around the badge to increase visibility.
-         */
-        this.borderColor = 'var(--src-color-bg-default, #FFFFFF)';
-        /**
-         * It's not recommended to change the border width. If you're changing the width of the border, you should also change the size of the badge manually through scss.
-         * */
-        this.borderWidth = '2px';
-        this.textColor = 'var(--src-color-text-inverse, #FFFFFF)';
+        this.type = input('default');
+        this.isCompact = input(false);
         this.testID = input('', { alias: 'data-testid' });
-        this.classes = [];
     }
-    ngOnInit() {
-        this.classes = [
-            this.type ? `src-badge--${this.type}` : '',
-            this.size && !this.type ? `src-badge--${this.size}` : '',
-        ];
-        if (this.customClass) {
-            if (Array.isArray(this.customClass)) {
-                this.classes.forEach((customClass) => {
-                    this.classes.push(customClass);
-                });
-            }
-            else {
-                this.classes.push(this.customClass);
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SourceBadgeComponent, isStandalone: true, selector: "src-badge", inputs: { number: { classPropertyName: "number", publicName: "number", isSignal: false, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: false, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: false, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: false, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: false, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"src-badge\"\n  [ngClass]=\"classes\"\n  [ngStyle]=\"\n    type\n      ? {}\n      : {\n          '--srcBadgeBorderColor': borderColor,\n          '--srcBadgeBackgroundColor': backgroundColor,\n          '--srcBadgeBorderWidth': borderWidth,\n          '--srcBadgeTextColor': textColor,\n        }\n  \"\n  [attr.data-testid]=\"testID\"\n>\n  @if (number) {\n    {{ number }}\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [".src-badge{--srcBadgeHeight: 18px;--srcBadgeBorderWidth: 2px;--srcBadgePadding: 2px 4px;--srcBadgeBackgroundColor: var(--src-color-brand-500, darkgreen);--srcBadgeBorderColor: var(--src-color-bg-default, #fff);--srcBadgeTextColor: var(--src-color-text-inverse, #fff);display:inline-block;width:auto;min-width:var(--srcBadgeHeight);height:var(--srcBadgeHeight);padding:var(--srcBadgePadding);vertical-align:top;text-align:center;border-radius:99px;border:var(--srcBadgeBorderWidth) solid var(--srcBadgeBorderColor, #fff);background:var(--srcBadgeBackgroundColor);color:var(--srcBadgeTextColor);font-size:9px;font-weight:700;line-height:1}.src-badge--small{--srcBadgeHeight: 16px;font-size:8px}.src-badge--large{--srcBadgeHeight: 20px;font-size:10px}.src-badge--neutral,.src-badge--informational,.src-badge--success,.src-badge--warning,.src-badge--attention,.src-badge--critical{--srcBadgeHeight: 20px;--srcBadgeBorderWidth: 0px;--srcBadgePadding: 2px 8px;--srcBadgeBackgroundColor: var(--src-color-bg-strong);--srcBadgeTextColor: var(--src-color-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-sans);font-size:var(--src-fs-small);font-style:normal;font-weight:var(--src-fw-medium, 500);line-height:var(--src-lh-small)}.src-badge--neutral{--srcBadgeBackgroundColor: var(--src-color-bg-strong)}.src-badge--informational{--srcBadgeBackgroundColor: #a4e8f2}.src-badge--success{--srcBadgeBackgroundColor: #aee9d1}.src-badge--warning{--srcBadgeBackgroundColor: #ffd79d}.src-badge--attention{--srcBadgeBackgroundColor: #ffea8a}.src-badge--critical{--srcBadgeBackgroundColor: #ffb7b7}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: SourceBannerComponent, isStandalone: true, selector: "src-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"src-banner\"\n  [class.src-banner--compact]=\"isCompact()\"\n  [ngClass]=\"type() !== 'default' ? 'src-banner--' + type() : ''\"\n  [attr.data-testid]=\"testID\"\n>\n  <ng-content select=\"[srcIconPrefix]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"[srcIconPostfix]\"></ng-content>\n</div>\n", styles: [".src-banner{--srcBannerPadding: 20px;--srcBannerBackgroundColor: var(--src-color-bg-default-subdued, #f9fafb);--srcBannerBorderWidth: 1px;--srcBannerBorderColor: var(--src-color-border-default, #e5e7eb);--srcBannerTextColor: var(--src-color-text-default, #1f2937);--srcBannerIconColor: var(--src-color-icon-default, #6b7280);--srcBannerBorderRadius: var(--src-br-small, 4px);--srcBannerIconMargin: 16px;display:flex;gap:8px;width:100%;padding:var(--srcBannerPadding, 20px);border:var(--srcBannerBorderWidth) solid var(--srcBannerBorderColor, #fff);border-radius:var(--srcBannerBorderRadius);background:var(--srcBannerBackgroundColor);color:var(--srcBannerTextColor);font-size:var(--src-fs-base, 14px);font-weight:400;line-height:var(--src-lh-base)}.src-banner [srcIconPrefix]{color:var(--srcBannerIconColor)}.src-banner p{margin:0}.src-banner--compact{--srcBannerPadding: 16px;--srcBannerIconMargin: 8px}.src-banner--info{--srcBannerBackgroundColor: #e8f0fd;--srcBannerBorderColor: transparent;--srcBannerIconColor: #2463bc}.src-banner--success{--srcBannerBackgroundColor: var(--src-color-green-50);--srcBannerBorderColor: var(--src-color-green-500);--srcBannerIconColor: var(--src-color-green-500)}.src-banner--critical{--srcBannerBackgroundColor: var(--src-color-bg-critical-subdued);--srcBannerBorderColor: var(--src-color-border-critical-strong);--srcBannerIconColor: var(--src-color-icon-critical)}.src-banner--warning{--srcBannerBackgroundColor: var(--src-color-yellow-50);--srcBannerBorderColor: var(--src-color-yellow-700);--srcBannerIconColor: var(--src-color-yellow-700)}.src-banner__icon{margin-right:var(--srcBannerIconMargin, 8px);color:var(--srcBannerIconColor)}.src-banner__close{position:absolute;top:16px;right:16px;margin-left:auto}.src-banner__close button.src-icon-button{--srcButtonBgColor: transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'src-badge', imports: [NgStyle, NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"src-badge\"\n  [ngClass]=\"classes\"\n  [ngStyle]=\"\n    type\n      ? {}\n      : {\n          '--srcBadgeBorderColor': borderColor,\n          '--srcBadgeBackgroundColor': backgroundColor,\n          '--srcBadgeBorderWidth': borderWidth,\n          '--srcBadgeTextColor': textColor,\n        }\n  \"\n  [attr.data-testid]=\"testID\"\n>\n  @if (number) {\n    {{ number }}\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [".src-badge{--srcBadgeHeight: 18px;--srcBadgeBorderWidth: 2px;--srcBadgePadding: 2px 4px;--srcBadgeBackgroundColor: var(--src-color-brand-500, darkgreen);--srcBadgeBorderColor: var(--src-color-bg-default, #fff);--srcBadgeTextColor: var(--src-color-text-inverse, #fff);display:inline-block;width:auto;min-width:var(--srcBadgeHeight);height:var(--srcBadgeHeight);padding:var(--srcBadgePadding);vertical-align:top;text-align:center;border-radius:99px;border:var(--srcBadgeBorderWidth) solid var(--srcBadgeBorderColor, #fff);background:var(--srcBadgeBackgroundColor);color:var(--srcBadgeTextColor);font-size:9px;font-weight:700;line-height:1}.src-badge--small{--srcBadgeHeight: 16px;font-size:8px}.src-badge--large{--srcBadgeHeight: 20px;font-size:10px}.src-badge--neutral,.src-badge--informational,.src-badge--success,.src-badge--warning,.src-badge--attention,.src-badge--critical{--srcBadgeHeight: 20px;--srcBadgeBorderWidth: 0px;--srcBadgePadding: 2px 8px;--srcBadgeBackgroundColor: var(--src-color-bg-strong);--srcBadgeTextColor: var(--src-color-text-default, #1f2937);text-align:center;font-family:var(--src-font-family-sans);font-size:var(--src-fs-small);font-style:normal;font-weight:var(--src-fw-medium, 500);line-height:var(--src-lh-small)}.src-badge--neutral{--srcBadgeBackgroundColor: var(--src-color-bg-strong)}.src-badge--informational{--srcBadgeBackgroundColor: #a4e8f2}.src-badge--success{--srcBadgeBackgroundColor: #aee9d1}.src-badge--warning{--srcBadgeBackgroundColor: #ffd79d}.src-badge--attention{--srcBadgeBackgroundColor: #ffea8a}.src-badge--critical{--srcBadgeBackgroundColor: #ffb7b7}\n"] }]
-        }], propDecorators: { number: [{
-                type: Input
-            }], backgroundColor: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], borderColor: [{
-                type: Input
-            }], borderWidth: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'src-banner', imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"src-banner\"\n  [class.src-banner--compact]=\"isCompact()\"\n  [ngClass]=\"type() !== 'default' ? 'src-banner--' + type() : ''\"\n  [attr.data-testid]=\"testID\"\n>\n  <ng-content select=\"[srcIconPrefix]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"[srcIconPostfix]\"></ng-content>\n</div>\n", styles: [".src-banner{--srcBannerPadding: 20px;--srcBannerBackgroundColor: var(--src-color-bg-default-subdued, #f9fafb);--srcBannerBorderWidth: 1px;--srcBannerBorderColor: var(--src-color-border-default, #e5e7eb);--srcBannerTextColor: var(--src-color-text-default, #1f2937);--srcBannerIconColor: var(--src-color-icon-default, #6b7280);--srcBannerBorderRadius: var(--src-br-small, 4px);--srcBannerIconMargin: 16px;display:flex;gap:8px;width:100%;padding:var(--srcBannerPadding, 20px);border:var(--srcBannerBorderWidth) solid var(--srcBannerBorderColor, #fff);border-radius:var(--srcBannerBorderRadius);background:var(--srcBannerBackgroundColor);color:var(--srcBannerTextColor);font-size:var(--src-fs-base, 14px);font-weight:400;line-height:var(--src-lh-base)}.src-banner [srcIconPrefix]{color:var(--srcBannerIconColor)}.src-banner p{margin:0}.src-banner--compact{--srcBannerPadding: 16px;--srcBannerIconMargin: 8px}.src-banner--info{--srcBannerBackgroundColor: #e8f0fd;--srcBannerBorderColor: transparent;--srcBannerIconColor: #2463bc}.src-banner--success{--srcBannerBackgroundColor: var(--src-color-green-50);--srcBannerBorderColor: var(--src-color-green-500);--srcBannerIconColor: var(--src-color-green-500)}.src-banner--critical{--srcBannerBackgroundColor: var(--src-color-bg-critical-subdued);--srcBannerBorderColor: var(--src-color-border-critical-strong);--srcBannerIconColor: var(--src-color-icon-critical)}.src-banner--warning{--srcBannerBackgroundColor: var(--src-color-yellow-50);--srcBannerBorderColor: var(--src-color-yellow-700);--srcBannerIconColor: var(--src-color-yellow-700)}.src-banner__icon{margin-right:var(--srcBannerIconMargin, 8px);color:var(--srcBannerIconColor)}.src-banner__close{position:absolute;top:16px;right:16px;margin-left:auto}.src-banner__close button.src-icon-button{--srcButtonBgColor: transparent}\n"] }]
+        }] });
 
 const SourceBannerType = {
     DEFAULT: 'default',
@@ -83,20 +71,6 @@ const SourceBannerType = {
     CRITICAL: 'critical',
 };
 
-class SourceBannerComponent {
-    constructor() {
-        this.type = input(SourceBannerType.DEFAULT);
-        this.isCompact = input(false);
-        this.testID = input('', { alias: 'data-testid' });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: SourceBannerComponent, isStandalone: true, selector: "src-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"src-banner\"\n  [class.src-banner--compact]=\"isCompact()\"\n  [ngClass]=\"type() !== 'default' ? 'src-banner--' + type() : ''\"\n  [attr.data-testid]=\"testID\"\n>\n  <ng-content select=\"[srcIconPrefix]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"[srcIconPostfix]\"></ng-content>\n</div>\n", styles: [".src-banner{--srcBannerPadding: 20px;--srcBannerBackgroundColor: var(--src-color-bg-default-subdued, #f9fafb);--srcBannerBorderWidth: 1px;--srcBannerBorderColor: var(--src-color-border-default, #e5e7eb);--srcBannerTextColor: var(--src-color-text-default, #1f2937);--srcBannerIconColor: var(--src-color-icon-default, #6b7280);--srcBannerBorderRadius: var(--src-br-small, 4px);--srcBannerIconMargin: 16px;display:flex;gap:8px;width:100%;padding:var(--srcBannerPadding, 20px);border:var(--srcBannerBorderWidth) solid var(--srcBannerBorderColor, #fff);border-radius:var(--srcBannerBorderRadius);background:var(--srcBannerBackgroundColor);color:var(--srcBannerTextColor);font-size:var(--src-fs-base, 14px);font-weight:400;line-height:var(--src-lh-base)}.src-banner [srcIconPrefix]{color:var(--srcBannerIconColor)}.src-banner p{margin:0}.src-banner--compact{--srcBannerPadding: 16px;--srcBannerIconMargin: 8px}.src-banner--info{--srcBannerBackgroundColor: #e8f0fd;--srcBannerBorderColor: transparent;--srcBannerIconColor: #2463bc}.src-banner--success{--srcBannerBackgroundColor: var(--src-color-green-50);--srcBannerBorderColor: var(--src-color-green-500);--srcBannerIconColor: var(--src-color-green-500)}.src-banner--critical{--srcBannerBackgroundColor: var(--src-color-bg-critical-subdued);--srcBannerBorderColor: var(--src-color-border-critical-strong);--srcBannerIconColor: var(--src-color-icon-critical)}.src-banner--warning{--srcBannerBackgroundColor: var(--src-color-yellow-50);--srcBannerBorderColor: var(--src-color-yellow-700);--srcBannerIconColor: var(--src-color-yellow-700)}.src-banner__icon{margin-right:var(--srcBannerIconMargin, 8px);color:var(--srcBannerIconColor)}.src-banner__close{position:absolute;top:16px;right:16px;margin-left:auto}.src-banner__close button.src-icon-button{--srcButtonBgColor: transparent}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'src-banner', imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"src-banner\"\n  [class.src-banner--compact]=\"isCompact()\"\n  [ngClass]=\"type() !== 'default' ? 'src-banner--' + type() : ''\"\n  [attr.data-testid]=\"testID\"\n>\n  <ng-content select=\"[srcIconPrefix]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"[srcIconPostfix]\"></ng-content>\n</div>\n", styles: [".src-banner{--srcBannerPadding: 20px;--srcBannerBackgroundColor: var(--src-color-bg-default-subdued, #f9fafb);--srcBannerBorderWidth: 1px;--srcBannerBorderColor: var(--src-color-border-default, #e5e7eb);--srcBannerTextColor: var(--src-color-text-default, #1f2937);--srcBannerIconColor: var(--src-color-icon-default, #6b7280);--srcBannerBorderRadius: var(--src-br-small, 4px);--srcBannerIconMargin: 16px;display:flex;gap:8px;width:100%;padding:var(--srcBannerPadding, 20px);border:var(--srcBannerBorderWidth) solid var(--srcBannerBorderColor, #fff);border-radius:var(--srcBannerBorderRadius);background:var(--srcBannerBackgroundColor);color:var(--srcBannerTextColor);font-size:var(--src-fs-base, 14px);font-weight:400;line-height:var(--src-lh-base)}.src-banner [srcIconPrefix]{color:var(--srcBannerIconColor)}.src-banner p{margin:0}.src-banner--compact{--srcBannerPadding: 16px;--srcBannerIconMargin: 8px}.src-banner--info{--srcBannerBackgroundColor: #e8f0fd;--srcBannerBorderColor: transparent;--srcBannerIconColor: #2463bc}.src-banner--success{--srcBannerBackgroundColor: var(--src-color-green-50);--srcBannerBorderColor: var(--src-color-green-500);--srcBannerIconColor: var(--src-color-green-500)}.src-banner--critical{--srcBannerBackgroundColor: var(--src-color-bg-critical-subdued);--srcBannerBorderColor: var(--src-color-border-critical-strong);--srcBannerIconColor: var(--src-color-icon-critical)}.src-banner--warning{--srcBannerBackgroundColor: var(--src-color-yellow-50);--srcBannerBorderColor: var(--src-color-yellow-700);--srcBannerIconColor: var(--src-color-yellow-700)}.src-banner__icon{margin-right:var(--srcBannerIconMargin, 8px);color:var(--srcBannerIconColor)}.src-banner__close{position:absolute;top:16px;right:16px;margin-left:auto}.src-banner__close button.src-icon-button{--srcButtonBgColor: transparent}\n"] }]
-        }] });
-
 const SourceButtonColorScheme = {
     PRIMARY: 'primary',
     SECONDARY: 'secondary',
@@ -130,7 +104,6 @@ const defaultSourceButtonConfig = {
     hasDisclosure: false,
     isFullWidth: false,
     icon: undefined,
-    iconPrefix: false,
     iconButton: false,
     isPressed: false,
     isDisabled: false,
@@ -139,237 +112,84 @@ const defaultSourceButtonConfig = {
     testID: undefined,
 };
 
-const SourceLoadingLineCap = {
-    ROUND: 'round',
-    SQUARE: 'square',
-    BUTT: 'butt',
-};
-
 class SourceLoadingComponent {
     constructor() {
-        /**
-         * Size of the loading circle
-         */
-        this.size = 32;
-        /**
-         * If it just an animated circle or circular progressbar
-         */
-        this.progress = null;
-        /**
-         * The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
-         */
-        this.lineCap = SourceLoadingLineCap.ROUND;
-        /**
-         * Color of the strokes
-         */
-        this.backgroundStrokeColor = 'transparent';
-        this.progressStrokeColor = 'var(--src-color-brand-500, #017BFF)';
-        /**
-         * Width of the line
-         */
-        this.strokeWidth = 3;
-        /**
-         * Test ID for the component. Provide descriptive uniq id in kebab-case.
-         */
+        this.size = input(32);
+        this.progress = input(null);
+        this.lineCap = input('round');
+        this.backgroundStrokeColor = input('transparent');
+        this.progressStrokeColor = input('var(--src-color-brand-500, #017BFF)');
+        this.strokeWidth = input(3);
         this.testID = input('', { alias: 'data-testid' });
-        this.compiledClassesList = [];
-    }
-    get classes() {
-        this.compiledClassesList = [];
-        if (this.progress !== null) {
-            this.compiledClassesList.push(`src-loading--progress`);
-        }
-        else {
-            this.compiledClassesList.push(`src-loading--animation`);
-        }
-        return this.compiledClassesList;
-    }
-    calculateRadius() {
-        return this.size / 2 - this.strokeWidth / 2;
-    }
-    getCircumference() {
-        return 2 * Math.PI * this.calculateRadius();
-    }
-    getViewBox() {
-        return `0 0 ${this.size} ${this.size}`;
-    }
-    getPercentage() {
-        return Math.round(this.getCircumference() * ((100 - this.progress) / 100));
+        this.classes = computed(() => [
+            this.progress() !== null
+                ? 'src-loading--progress'
+                : 'src-loading--animation',
+        ]);
+        this.calculateRadius = computed(() => this.size() / 2 - this.strokeWidth() / 2);
+        this.circumference = computed(() => 2 * Math.PI * this.calculateRadius());
+        this.viewBox = computed(() => `0 0 ${this.size()} ${this.size()}`);
+        this.percentage = computed(() => Math.round((this.circumference() * (100 - (this.progress() ?? 0))) / 100));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SourceLoadingComponent, isStandalone: true, selector: "src-loading", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: false, isRequired: false, transformFunction: null }, lineCap: { classPropertyName: "lineCap", publicName: "lineCap", isSignal: false, isRequired: false, transformFunction: null }, backgroundStrokeColor: { classPropertyName: "backgroundStrokeColor", publicName: "backgroundStrokeColor", isSignal: false, isRequired: false, transformFunction: null }, progressStrokeColor: { classPropertyName: "progressStrokeColor", publicName: "progressStrokeColor", isSignal: false, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: false, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"src-loading-container\" [attr.data-testid]=\"testID()\">\n  <svg\n    [ngClass]=\"classes\"\n    class=\"src-loading\"\n    [attr.width]=\"size\"\n    [attr.height]=\"size\"\n    [attr.viewBox]=\"getViewBox()\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style=\"transform: rotate(-90deg)\"\n    [style.--srcLoadingSize]=\"size\"\n  >\n    <!-- Background circle -->\n    @if (progress) {\n      <circle\n        [attr.r]=\"calculateRadius()\"\n        [attr.cx]=\"size / 2\"\n        [attr.cy]=\"size / 2\"\n        fill=\"transparent\"\n        [attr.stroke]=\"backgroundStrokeColor\"\n        [attr.stroke-width]=\"strokeWidth\"\n        [attr.stroke-dasharray]=\"getCircumference()\"\n        stroke-dashoffset=\"0\"\n      ></circle>\n    }\n\n    <!-- Filled circle -->\n    <circle\n      [attr.r]=\"calculateRadius()\"\n      [attr.cx]=\"size / 2\"\n      [attr.cy]=\"size / 2\"\n      [attr.stroke]=\"progressStrokeColor\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke-linecap]=\"lineCap\"\n      [attr.stroke-dashoffset]=\"progress ? getPercentage() : 0\"\n      fill=\"transparent\"\n      [attr.stroke-dasharray]=\"progress ? getCircumference() : ''\"\n    ></circle>\n  </svg>\n</div>\n", styles: [":host{display:block}.src-loading-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.src-loading{position:relative;display:inline-block}.src-loading--animation{animation:1.4s linear 0s infinite normal none running rotate}.src-loading--animation circle{transform-origin:50% 50%;stroke-dasharray:calc(var(--srcLoadingSize) * 2 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:0;animation:1.6s ease-in-out 0s infinite normal none running spinner}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinner{0%{stroke-dasharray:1px,calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:0}50%{stroke-dasharray:calc(var(--srcLoadingSize) * 2.5 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:calc(var(--srcLoadingSize) * .4 * -1px)}to{stroke-dasharray:calc(var(--srcLoadingSize) * 2.5 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:calc(var(--srcLoadingSize) * 3 * -1px)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SourceLoadingComponent, isStandalone: true, selector: "src-loading", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, lineCap: { classPropertyName: "lineCap", publicName: "lineCap", isSignal: true, isRequired: false, transformFunction: null }, backgroundStrokeColor: { classPropertyName: "backgroundStrokeColor", publicName: "backgroundStrokeColor", isSignal: true, isRequired: false, transformFunction: null }, progressStrokeColor: { classPropertyName: "progressStrokeColor", publicName: "progressStrokeColor", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"src-loading-container\" [attr.data-testid]=\"testID()\">\n  <svg\n    [ngClass]=\"classes()\"\n    class=\"src-loading\"\n    [attr.width]=\"size()\"\n    [attr.height]=\"size()\"\n    [attr.viewBox]=\"viewBox()\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style=\"transform: rotate(-90deg)\"\n    [style.--srcLoadingSize]=\"size()\"\n  >\n    <!-- Background circle -->\n    @if (progress()) {\n      <circle\n        [attr.r]=\"calculateRadius()\"\n        [attr.cx]=\"size() / 2\"\n        [attr.cy]=\"size() / 2\"\n        fill=\"transparent\"\n        [attr.stroke]=\"backgroundStrokeColor()\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        [attr.stroke-dasharray]=\"circumference()\"\n        stroke-dashoffset=\"0\"\n      ></circle>\n    }\n\n    <!-- Filled circle -->\n    <circle\n      [attr.r]=\"calculateRadius()\"\n      [attr.cx]=\"size() / 2\"\n      [attr.cy]=\"size() / 2\"\n      [attr.stroke]=\"progressStrokeColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      [attr.stroke-linecap]=\"lineCap()\"\n      [attr.stroke-dashoffset]=\"progress() ? percentage() : 0\"\n      fill=\"transparent\"\n      [attr.stroke-dasharray]=\"progress() ? circumference() : ''\"\n    ></circle>\n  </svg>\n</div>\n", styles: [":host{display:block}.src-loading-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.src-loading{position:relative;display:inline-block}.src-loading--animation{animation:1.4s linear 0s infinite normal none running rotate}.src-loading--animation circle{transform-origin:50% 50%;stroke-dasharray:calc(var(--srcLoadingSize) * 2 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:0;animation:1.6s ease-in-out 0s infinite normal none running spinner}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinner{0%{stroke-dasharray:1px,calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:0}50%{stroke-dasharray:calc(var(--srcLoadingSize) * 2.5 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:calc(var(--srcLoadingSize) * .4 * -1px)}to{stroke-dasharray:calc(var(--srcLoadingSize) * 2.5 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:calc(var(--srcLoadingSize) * 3 * -1px)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'src-loading', imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"src-loading-container\" [attr.data-testid]=\"testID()\">\n  <svg\n    [ngClass]=\"classes\"\n    class=\"src-loading\"\n    [attr.width]=\"size\"\n    [attr.height]=\"size\"\n    [attr.viewBox]=\"getViewBox()\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style=\"transform: rotate(-90deg)\"\n    [style.--srcLoadingSize]=\"size\"\n  >\n    <!-- Background circle -->\n    @if (progress) {\n      <circle\n        [attr.r]=\"calculateRadius()\"\n        [attr.cx]=\"size / 2\"\n        [attr.cy]=\"size / 2\"\n        fill=\"transparent\"\n        [attr.stroke]=\"backgroundStrokeColor\"\n        [attr.stroke-width]=\"strokeWidth\"\n        [attr.stroke-dasharray]=\"getCircumference()\"\n        stroke-dashoffset=\"0\"\n      ></circle>\n    }\n\n    <!-- Filled circle -->\n    <circle\n      [attr.r]=\"calculateRadius()\"\n      [attr.cx]=\"size / 2\"\n      [attr.cy]=\"size / 2\"\n      [attr.stroke]=\"progressStrokeColor\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke-linecap]=\"lineCap\"\n      [attr.stroke-dashoffset]=\"progress ? getPercentage() : 0\"\n      fill=\"transparent\"\n      [attr.stroke-dasharray]=\"progress ? getCircumference() : ''\"\n    ></circle>\n  </svg>\n</div>\n", styles: [":host{display:block}.src-loading-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.src-loading{position:relative;display:inline-block}.src-loading--animation{animation:1.4s linear 0s infinite normal none running rotate}.src-loading--animation circle{transform-origin:50% 50%;stroke-dasharray:calc(var(--srcLoadingSize) * 2 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:0;animation:1.6s ease-in-out 0s infinite normal none running spinner}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinner{0%{stroke-dasharray:1px,calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:0}50%{stroke-dasharray:calc(var(--srcLoadingSize) * 2.5 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:calc(var(--srcLoadingSize) * .4 * -1px)}to{stroke-dasharray:calc(var(--srcLoadingSize) * 2.5 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:calc(var(--srcLoadingSize) * 3 * -1px)}}\n"] }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], progress: [{
-                type: Input
-            }], lineCap: [{
-                type: Input
-            }], backgroundStrokeColor: [{
-                type: Input
-            }], progressStrokeColor: [{
-                type: Input
-            }], strokeWidth: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'src-loading', imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"src-loading-container\" [attr.data-testid]=\"testID()\">\n  <svg\n    [ngClass]=\"classes()\"\n    class=\"src-loading\"\n    [attr.width]=\"size()\"\n    [attr.height]=\"size()\"\n    [attr.viewBox]=\"viewBox()\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style=\"transform: rotate(-90deg)\"\n    [style.--srcLoadingSize]=\"size()\"\n  >\n    <!-- Background circle -->\n    @if (progress()) {\n      <circle\n        [attr.r]=\"calculateRadius()\"\n        [attr.cx]=\"size() / 2\"\n        [attr.cy]=\"size() / 2\"\n        fill=\"transparent\"\n        [attr.stroke]=\"backgroundStrokeColor()\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        [attr.stroke-dasharray]=\"circumference()\"\n        stroke-dashoffset=\"0\"\n      ></circle>\n    }\n\n    <!-- Filled circle -->\n    <circle\n      [attr.r]=\"calculateRadius()\"\n      [attr.cx]=\"size() / 2\"\n      [attr.cy]=\"size() / 2\"\n      [attr.stroke]=\"progressStrokeColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      [attr.stroke-linecap]=\"lineCap()\"\n      [attr.stroke-dashoffset]=\"progress() ? percentage() : 0\"\n      fill=\"transparent\"\n      [attr.stroke-dasharray]=\"progress() ? circumference() : ''\"\n    ></circle>\n  </svg>\n</div>\n", styles: [":host{display:block}.src-loading-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.src-loading{position:relative;display:inline-block}.src-loading--animation{animation:1.4s linear 0s infinite normal none running rotate}.src-loading--animation circle{transform-origin:50% 50%;stroke-dasharray:calc(var(--srcLoadingSize) * 2 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:0;animation:1.6s ease-in-out 0s infinite normal none running spinner}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinner{0%{stroke-dasharray:1px,calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:0}50%{stroke-dasharray:calc(var(--srcLoadingSize) * 2.5 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:calc(var(--srcLoadingSize) * .4 * -1px)}to{stroke-dasharray:calc(var(--srcLoadingSize) * 2.5 * 1px),calc(var(--srcLoadingSize) * 5 * 1px);stroke-dashoffset:calc(var(--srcLoadingSize) * 3 * -1px)}}\n"] }]
+        }] });
 
 class SourceButtonComponent {
     constructor() {
-        /**
-         * Type of button
-         */
-        this.type = SourceButtonType.BUTTON;
-        /**
-         * Is this the principal call to action on the page?
-         */
-        this.appearance = SourceButtonAppearance.DEFAULT;
-        /**
-         * Is this the principal call to action on the page?
-         */
-        this.colorScheme = SourceButtonColorScheme.SECONDARY;
-        /**
-         * How big it should be?
-         */
-        this.size = SourceButtonSize.MEDIUM;
-        /**
-         * Is this button a trigger for some kind of menu?
-         */
-        this.hasDisclosure = false;
-        /**
-         * Is this button should fill all available width of the container?
-         */
-        this.isFullWidth = false;
-        /**
-         * Is this button having icon before label?
-         */
-        this.iconPrefix = false;
-        /**
-         * Square button with only icon inside
-         */
-        this.iconButton = false;
-        /**
-         * Pressed state for button
-         */
-        this.isPressed = false;
-        /**
-         * Standard disabled state for button
-         */
-        this.isDisabled = false;
-        /**
-         * Set true if your button has a show loading process after pressing
-         */
-        this.isLoading = false;
-        /**
-         * Test ID for the component. Provide descriptive uniq id in kebab-case.
-         */
+        this.type = input('button');
+        this.appearance = input('default');
+        this.colorScheme = input('secondary');
+        this.size = input('medium');
+        this.customClass = input();
+        this.hasDisclosure = input(false);
+        this.isFullWidth = input(false);
+        this.isPressed = input(false);
+        this.isDisabled = input(false);
+        this.isLoading = input(false);
+        this.iconButton = input(false);
+        this.icon = input();
+        this.formID = input();
+        this.srcButtonConfig = input();
         this.testID = input('', { alias: 'data-testid' });
-        /**
-         * Optional click handler
-         */
-        this.onClick = new EventEmitter();
-        /**
-         * Optional submit handler
-         */
-        this.onSubmit = new EventEmitter();
-        this.compiledClassesList = [];
         this.defaultConfig = defaultSourceButtonConfig;
-    }
-    get classes() {
-        // Reset the compiledClassesList
-        this.compiledClassesList = [];
-        const config = {
-            type: this.type,
-            appearance: this.appearance,
-            colorScheme: this.colorScheme,
-            size: this.size,
-            customClass: this.customClass,
-            hasDisclosure: this.hasDisclosure,
-            isFullWidth: this.isFullWidth,
-            icon: this.icon,
-            iconPrefix: this.iconPrefix,
-            iconButton: this.iconButton,
-            isPressed: this.isPressed,
-            isDisabled: this.isDisabled,
-            isLoading: this.isLoading,
-            testID: this.testID(),
-        };
-        // Find a new overridden config object depending on the presence of srcButtonConfig
-        let updatedConfig;
-        if (this.srcButtonConfig) {
-            updatedConfig = this.getUpdatedConfig(this.srcButtonConfig);
-        }
-        else {
-            updatedConfig = this.getUpdatedConfig(config);
-        }
-        if (updatedConfig.type) {
-            this.type = updatedConfig.type;
-        }
-        if (updatedConfig.formID) {
-            this.formID = updatedConfig.formID;
-        }
-        if (updatedConfig.icon) {
-            this.icon = updatedConfig.icon;
-        }
-        if (updatedConfig.appearance) {
-            this.compiledClassesList.push(`src-button--${updatedConfig.appearance}`);
-        }
-        if (updatedConfig.colorScheme) {
-            this.compiledClassesList.push(`src-button--${updatedConfig.colorScheme}`);
-        }
-        if (updatedConfig.size) {
-            this.compiledClassesList.push(`src-button--${updatedConfig.size}`);
-        }
-        if (updatedConfig.hasDisclosure) {
-            this.compiledClassesList.push(`src-button--disclosure`);
-        }
-        if (updatedConfig.isPressed) {
-            this.compiledClassesList.push(`src-button--pressed`);
-        }
-        if (updatedConfig.isFullWidth) {
-            this.compiledClassesList.push(`src-button--full-width`);
-        }
-        if (updatedConfig.iconPrefix) {
-            this.compiledClassesList.push(`src-button--icon-prefix`);
-        }
-        if (updatedConfig.iconButton) {
-            this.compiledClassesList.push(`src-button--icon-button`);
-        }
-        if (updatedConfig.isLoading) {
-            this.compiledClassesList.push(`src-button--loading`);
-        }
-        if (updatedConfig.customClass) {
-            if (Array.isArray(updatedConfig.customClass)) {
-                updatedConfig.customClass.forEach((customClass) => {
-                    this.compiledClassesList.push(customClass);
-                });
-            }
-            else {
-                this.compiledClassesList.push(updatedConfig.customClass);
-            }
-        }
-        return this.compiledClassesList;
-    }
-    getUpdatedConfig(config) {
-        return {
-            type: config.type || this.defaultConfig.type,
-            appearance: config.appearance || this.defaultConfig.appearance,
-            colorScheme: config.colorScheme || this.defaultConfig.colorScheme,
-            size: config.size || this.defaultConfig.size,
-            customClass: config.customClass || this.defaultConfig.customClass,
-            hasDisclosure: config.hasDisclosure || this.defaultConfig.hasDisclosure,
-            isFullWidth: config.isFullWidth || this.defaultConfig.isFullWidth,
-            icon: config.icon || this.defaultConfig.icon,
-            iconPrefix: config.iconPrefix || this.defaultConfig.iconPrefix,
-            iconButton: config.iconButton || this.defaultConfig.iconButton,
-            isPressed: config.isPressed || this.defaultConfig.isPressed,
-            isDisabled: config.isDisabled || this.defaultConfig.isDisabled,
-            isLoading: config.isLoading || this.defaultConfig.isLoading,
-            formID: config.formID || this.defaultConfig.formID,
-            testID: config.testID || this.defaultConfig.testID,
-        };
+        this.onClick = output();
+        this.onSubmit = output();
+        this.classes = computed(() => {
+            const config = this.getConfig(this.srcButtonConfig() ?? {
+                type: this.type(),
+                appearance: this.appearance(),
+                colorScheme: this.colorScheme(),
+                size: this.size(),
+                customClass: this.customClass(),
+                hasDisclosure: this.hasDisclosure(),
+                isFullWidth: this.isFullWidth(),
+                icon: this.icon(),
+                formID: this.formID(),
+                iconButton: this.iconButton(),
+                isPressed: this.isPressed(),
+                isDisabled: this.isDisabled(),
+                isLoading: this.isLoading(),
+                testID: this.testID(),
+            });
+            return [
+                config.appearance ? `src-button--${config.appearance}` : '',
+                config.colorScheme ? `src-button--${config.colorScheme}` : '',
+                config.size ? `src-button--${config.size}` : '',
+                config.hasDisclosure ? 'src-button--disclosure' : '',
+                config.isPressed ? 'src-button--icon-pressed' : '',
+                config.isFullWidth ? 'src-button--full-width' : '',
+                config.iconButton ? 'src-button--icon-button' : '',
+                config.isLoading ? 'src-button--loading' : '',
+                config.customClass && Array.isArray(config.customClass)
+                    ? [...config.customClass]
+                    : (config.customClass ?? ''),
+            ].filter(Boolean);
+        });
     }
     handleClick(event) {
         this.onClick.emit(event);
@@ -377,47 +197,31 @@ class SourceButtonComponent {
     handleSubmit(event) {
         this.onSubmit.emit(event);
     }
+    getConfig(config) {
+        return {
+            type: config?.type || this.defaultConfig.type,
+            appearance: config?.appearance || this.defaultConfig.appearance,
+            colorScheme: config?.colorScheme || this.defaultConfig.colorScheme,
+            size: config?.size || this.defaultConfig.size,
+            customClass: config?.customClass || this.defaultConfig.customClass,
+            hasDisclosure: config?.hasDisclosure || this.defaultConfig.hasDisclosure,
+            isFullWidth: config?.isFullWidth || this.defaultConfig.isFullWidth,
+            icon: config?.icon || this.defaultConfig.icon,
+            iconButton: config?.iconButton || this.defaultConfig.iconButton,
+            isPressed: config?.isPressed || this.defaultConfig.isPressed,
+            isDisabled: config?.isDisabled || this.defaultConfig.isDisabled,
+            isLoading: config?.isLoading || this.defaultConfig.isLoading,
+            formID: config?.formID || this.defaultConfig.formID,
+            testID: config?.testID || this.defaultConfig.testID,
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SourceButtonComponent, isStandalone: true, selector: "src-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: false, isRequired: false, transformFunction: null }, hasDisclosure: { classPropertyName: "hasDisclosure", publicName: "hasDisclosure", isSignal: false, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: false, isRequired: false, transformFunction: null }, iconPrefix: { classPropertyName: "iconPrefix", publicName: "iconPrefix", isSignal: false, isRequired: false, transformFunction: null }, iconButton: { classPropertyName: "iconButton", publicName: "iconButton", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, isPressed: { classPropertyName: "isPressed", publicName: "isPressed", isSignal: false, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: false, isRequired: false, transformFunction: null }, formID: { classPropertyName: "formID", publicName: "formID", isSignal: false, isRequired: false, transformFunction: null }, srcButtonConfig: { classPropertyName: "srcButtonConfig", publicName: "srcButtonConfig", isSignal: false, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onSubmit: "onSubmit" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  class=\"src-button\"\n  [ngClass]=\"classes\"\n  [attr.form]=\"formID\"\n  (click)=\"handleClick($event)\"\n  (submit)=\"handleSubmit($event)\"\n  [disabled]=\"isDisabled\"\n  [attr.data-testid]=\"testID()\"\n>\n  <span [style.opacity]=\"isLoading ? 0 : 1\">\n    @if (iconPrefix) {\n      <span class=\"src-button__icon\">\n        <ng-content select=\"[srcIconPrefix]\"></ng-content>\n      </span>\n    }\n\n    <ng-content></ng-content>\n\n    @if (hasDisclosure) {\n      <svg\n        class=\"disclosure-icon\"\n        width=\"8\"\n        height=\"5\"\n        viewBox=\"0 0 8 5\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M3.40573 4.3L0.805725 1.7C0.489058 1.38333 0.418392 1.021 0.593725 0.613C0.768392 0.204333 1.08073 0 1.53073 0H6.68072C7.13072 0 7.44306 0.204333 7.61772 0.613C7.79306 1.021 7.72239 1.38333 7.40573 1.7L4.80572 4.3C4.70572 4.4 4.59739 4.475 4.48073 4.525C4.36406 4.575 4.23906 4.6 4.10573 4.6C3.97239 4.6 3.84739 4.575 3.73073 4.525C3.61406 4.475 3.50573 4.4 3.40573 4.3Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    }\n  </span>\n  @if (isLoading) {\n    <src-loading\n      [size]=\"16\"\n      [progressStrokeColor]=\"'#6B7280'\"\n      [strokeWidth]=\"2\"\n      [data-testid]=\"testID() + '-loading-state'\"\n    ></src-loading>\n  }\n</button>\n", styles: ["button.src-button{--srcButtonBgColor: var(--src-color-bg-default);--srcButtonBgHoverColor: var(--src-color-bg-default-hover);--srcButtonBorderRadius: var(--src-br-small, 4px);--srcButtonBoxShadow: 0px 0px 0px 1px var(--src-color-border-strong, #abb2be) inset, 0px 1px 0px 0px rgba(0, 0, 0, .05);--srcButtonFontColor: var(--src-color-text-default);--srcButtonFontSize: var(--src-fs-base);--srcButtonFontWeight: var(--src-fw-medium, 500);--srcButtonLineHeight: var(--src-lh-base);--srcButtonPaddings: 8px 16px;--srcButtonTextTransform: default;--srcButtonWidth: auto;display:flex;justify-content:center;align-items:center;width:var(--srcButtonWidth);padding:var(--srcButtonPaddings);font-weight:var(--srcButtonFontWeight);font-size:var(--srcButtonFontSize);font-style:normal;line-height:var(--srcButtonLineHeight);text-align:center;color:var(--srcButtonFontColor);text-transform:var(--srcButtonTextTransform);letter-spacing:0;white-space:nowrap;background-color:var(--srcButtonBgColor);border:none;border-radius:var(--srcButtonBorderRadius);box-shadow:var(--srcButtonBoxShadow);cursor:pointer}button.src-button>div,button.src-button>span{display:flex;justify-content:center;align-items:center;width:auto}button.src-button:active,button.src-button--pressed{background-color:var(--srcButtonBgHoverColor)}@media (pointer: fine){button.src-button:hover,button.src-button:focus-visible{background-color:var(--srcButtonBgHoverColor)}}button.src-button:disabled,button.src-button[disabled],button.src-button.disabled{cursor:default;pointer-events:none}button.src-button--slim{--srcButtonPaddings: 6px 12px}button.src-button--slim.src-button--icon-prefix{--srcButtonPaddings: 6px 12px 6px 8px}button.src-button--medium{--srcButtonPaddings: 8px 16px}button.src-button--medium.src-button--icon-prefix{--srcButtonPaddings: 8px 16px 8px 12px}button.src-button--large{--srcButtonPaddings: 12px 24px}button.src-button--large.src-button--icon-prefix{--srcButtonPaddings: 12px 24px 12px 20px}button.src-button--primary{--srcButtonBgColor: var(--src-color-bg-primary);--srcButtonBgHoverColor: var(--src-color-bg-primary-hover);--srcButtonBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, .08), 0px -1px 0px 0px rgba(0, 0, 0, .2) inset;--srcButtonFontColor: var(--src-color-text-inverse)}button.src-button--primary:disabled,button.src-button--primary[disabled]{--srcButtonBgColor: var(--src-color-bg-primary-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--secondary{--srcButtonFontColor: var(--src-color-text-default)}button.src-button--secondary:disabled,button.src-button--secondary[disabled]{--srcButtonBgColor: var(--src-color-bg-default-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--destructive{--srcButtonBgColor: var(--src-color-bg-critical);--srcButtonBgHoverColor: var(--src-color-bg-critical-strong);--srcButtonBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, .08), 0px -1px 0px 0px rgba(0, 0, 0, .2) inset;--srcButtonFontColor: var(--src-color-text-inverse)}button.src-button--destructive:disabled,button.src-button--destructive[disabled]{--srcButtonBgColor: var(--src-color-bg-primary-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--plain{padding:0;--srcButtonBgColor: transparent;--srcButtonBgHoverColor: transparent;--srcButtonBoxShadow: none}button.src-button--plain:active,button.src-button--plain.src-button--pressed{text-decoration:underline}@media (pointer: fine){button.src-button--plain:hover,button.src-button--plain:focus{text-decoration:underline}}button.src-button--plain:disabled,button.src-button--plain[disabled]{--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--plain.src-button--primary,button.src-button--plain.src-button--primary:active,button.src-button--plain.src-button--primary--pressed{--srcButtonFontColor: var(--src-color-text-primary)}@media (pointer: fine){button.src-button--plain.src-button--primary:hover,button.src-button--plain.src-button--primary:focus{--srcButtonFontColor: var(--src-color-text-primary)}}button.src-button--plain.src-button--destructive,button.src-button--plain.src-button--destructive:active,button.src-button--plain.src-button--destructive--pressed{--srcButtonFontColor: var(--src-color-text-critical)}@media (pointer: fine){button.src-button--plain.src-button--destructive:hover,button.src-button--plain.src-button--destructive:focus{--srcButtonFontColor: var(--src-color-text-critical)}}button.src-button--plain.src-button--secondary{--srcButtonFontColor: var(--src-color-text-default)}button.src-button--plain.src-button--primary:disabled,button.src-button--plain.src-button--primary[disabled],button.src-button--plain.src-button--destructive:disabled,button.src-button--plain.src-button--destructive[disabled],button.src-button--plain.src-button--secondary:disabled,button.src-button--plain.src-button--secondary[disabled]{--srcButtonBgColor: transparent;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--full-width{--srcButtonWidth: 100%}button.src-button--disclosure{position:relative;--srcButtonDisclosureIconColor: var(--src-color-icon-default)}button.src-button--disclosure span{display:flex;align-items:center}button.src-button--disclosure:disabled,button.src-button--disclosure[disabled]{--srcButtonDisclosureIconColor: var(--src-color-icon-default-disabled)}button.src-button--disclosure .disclosure-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px;padding:6px;color:var(--srcButtonDisclosureIconColor)}button.src-button--disclosure.src-button--plain.src-button--primary{--srcButtonDisclosureIconColor: var(--src-color-icon-primary)}button.src-button--disclosure.src-button--plain.src-button--destructive{--srcButtonDisclosureIconColor: var(--src-color-icon-critical)}button.src-button--disclosure.src-button--plain.src-button--primary:disabled,button.src-button--disclosure.src-button--plain.src-button--primary[disabled],button.src-button--disclosure.src-button--plain.src-button--destructive:disabled,button.src-button--disclosure.src-button--plain.src-button--destructive[disabled]{--srcButtonDisclosureIconColor: var( --src-color-icon-default-disabled )}button.src-button--disclosure.src-button--primary,button.src-button--disclosure.src-button--destructive{--srcButtonDisclosureIconColor: var(--src-color-text-inverse)}button.src-button--disclosure.src-button--primary:disabled,button.src-button--disclosure.src-button--primary[disabled],button.src-button--disclosure.src-button--destructive:disabled,button.src-button--disclosure.src-button--destructive[disabled]{--srcButtonDisclosureIconColor: var(--src-color-text-inverse)}button.src-button--disclosure.src-button--secondary{--srcButtonDisclosureIconColor: var(--src-color-icon-default)}button.src-button--disclosure.src-button--secondary:disabled,button.src-button--disclosure.src-button--secondary[disabled]{--srcButtonDisclosureIconColor: var(--src-color-icon-default-disabled)}button.src-button--icon-prefix{--srcButtonPrefixIconColor: var(--src-color-icon-default)}button.src-button--icon-prefix .src-button__icon{display:inline-flex;margin-right:4px;flex-shrink:0;vertical-align:middle;color:var(--srcButtonPrefixIconColor)}button.src-button--icon-prefix.src-button--plain.src-button--primary{--srcButtonPrefixIconColor: var(--src-color-icon-primary)}button.src-button--icon-prefix.src-button--plain.src-button--primary:disabled,button.src-button--icon-prefix.src-button--plain.src-button--primary[disabled]{--srcButtonPrefixIconColor: var(--src-color-icon-default-disabled)}button.src-button--icon-prefix.src-button--plain.src-button--destructive{--srcButtonPrefixIconColor: var(--src-color-icon-critical)}button.src-button--icon-prefix.src-button--plain.src-button--destructive:disabled,button.src-button--icon-prefix.src-button--plain.src-button--destructive[disabled]{--srcButtonPrefixIconColor: var(--src-color-icon-default-disabled)}button.src-button--icon-prefix.src-button--primary,button.src-button--icon-prefix.src-button--destructive{--srcButtonPrefixIconColor: var(--src-color-text-inverse)}button.src-button--icon-prefix.src-button--primary:disabled,button.src-button--icon-prefix.src-button--primary[disabled],button.src-button--icon-prefix.src-button--destructive:disabled,button.src-button--icon-prefix.src-button--destructive[disabled]{--srcButtonPrefixIconColor: var(--src-color-icon-default-disabled)}button.src-button--icon-prefix.src-button--secondary{--srcButtonPrefixIconColor: var(--src-color-icon-default)}button.src-button--icon-prefix.src-button--secondary:disabled,button.src-button--icon-prefix.src-button--secondary[disabled]{--srcButtonPrefixIconColor: var(--src-color-icon-default-disabled)}button.src-button--icon-button{--srcButtonIconColor: var(--src-color-icon-default)}button.src-button--icon-button .src-button__icon{flex-shrink:0;color:var(--srcButtonIconColor)}button.src-button--icon-button.src-button--primary,button.src-button--icon-button.src-button--destructive{--srcButtonIconColor: var(--src-color-text-inverse)}button.src-button--icon-button.src-button--secondary{--srcButtonIconColor: var(--src-color-icon-default)}button.src-button--icon-button.src-button--slim{--srcButtonPaddings: 6px}button.src-button--icon-button.src-button--medium{--srcButtonPaddings: 8px}button.src-button--icon-button.src-button--large{--srcButtonPaddings: 12px}button.src-button--loading src-loading{position:absolute}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SourceLoadingComponent, selector: "src-loading", inputs: ["size", "progress", "lineCap", "backgroundStrokeColor", "progressStrokeColor", "strokeWidth", "data-testid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SourceButtonComponent, isStandalone: true, selector: "src-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, colorScheme: { classPropertyName: "colorScheme", publicName: "colorScheme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, hasDisclosure: { classPropertyName: "hasDisclosure", publicName: "hasDisclosure", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, isPressed: { classPropertyName: "isPressed", publicName: "isPressed", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, iconButton: { classPropertyName: "iconButton", publicName: "iconButton", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, formID: { classPropertyName: "formID", publicName: "formID", isSignal: true, isRequired: false, transformFunction: null }, srcButtonConfig: { classPropertyName: "srcButtonConfig", publicName: "srcButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onSubmit: "onSubmit" }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  class=\"src-button\"\n  [ngClass]=\"classes()\"\n  [attr.form]=\"formID()\"\n  (click)=\"handleClick($event)\"\n  (submit)=\"handleSubmit($event)\"\n  [disabled]=\"isDisabled()\"\n  [attr.data-testid]=\"testID()\"\n>\n  <span [style.opacity]=\"isLoading() ? 0 : 1\">\n    <ng-content select=\"[srcIconPrefix]\"></ng-content>\n\n    <ng-content></ng-content>\n\n    @if (hasDisclosure()) {\n      <svg\n        class=\"disclosure-icon\"\n        width=\"8\"\n        height=\"5\"\n        viewBox=\"0 0 8 5\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M3.40573 4.3L0.805725 1.7C0.489058 1.38333 0.418392 1.021 0.593725 0.613C0.768392 0.204333 1.08073 0 1.53073 0H6.68072C7.13072 0 7.44306 0.204333 7.61772 0.613C7.79306 1.021 7.72239 1.38333 7.40573 1.7L4.80572 4.3C4.70572 4.4 4.59739 4.475 4.48073 4.525C4.36406 4.575 4.23906 4.6 4.10573 4.6C3.97239 4.6 3.84739 4.575 3.73073 4.525C3.61406 4.475 3.50573 4.4 3.40573 4.3Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    }\n  </span>\n  @if (isLoading()) {\n    <src-loading\n      [size]=\"16\"\n      [progressStrokeColor]=\"'#6B7280'\"\n      [strokeWidth]=\"2\"\n      [data-testid]=\"testID() + '-loading-state'\"\n    ></src-loading>\n  }\n</button>\n", styles: ["button.src-button{--srcButtonBgColor: var(--src-color-bg-default);--srcButtonBgHoverColor: var(--src-color-bg-default-hover);--srcButtonBorderRadius: var(--src-br-small, 4px);--srcButtonBoxShadow: 0px 0px 0px 1px var(--src-color-border-strong, #abb2be) inset, 0px 1px 0px 0px rgba(0, 0, 0, .05);--srcButtonFontColor: var(--src-color-text-default);--srcButtonFontSize: var(--src-fs-base);--srcButtonFontWeight: var(--src-fw-medium, 500);--srcButtonLineHeight: var(--src-lh-base);--srcButtonPaddings: 8px 16px;--srcButtonTextTransform: default;--srcButtonWidth: auto;display:flex;justify-content:center;align-items:center;width:var(--srcButtonWidth);padding:var(--srcButtonPaddings);font-weight:var(--srcButtonFontWeight);font-size:var(--srcButtonFontSize);font-style:normal;line-height:var(--srcButtonLineHeight);text-align:center;color:var(--srcButtonFontColor);text-transform:var(--srcButtonTextTransform);letter-spacing:0;white-space:nowrap;background-color:var(--srcButtonBgColor);border:none;border-radius:var(--srcButtonBorderRadius);box-shadow:var(--srcButtonBoxShadow);cursor:pointer}button.src-button>div,button.src-button>span{display:flex;justify-content:center;align-items:center;gap:4px;width:auto}button.src-button:active,button.src-button--pressed{background-color:var(--srcButtonBgHoverColor)}@media (pointer: fine){button.src-button:hover,button.src-button:focus-visible{background-color:var(--srcButtonBgHoverColor)}}button.src-button:disabled,button.src-button[disabled],button.src-button.disabled{cursor:default;pointer-events:none}button.src-button--slim{--srcButtonPaddings: 6px 12px}button.src-button--slim.src-button--icon-prefix{--srcButtonPaddings: 6px 12px 6px 8px}button.src-button--medium{--srcButtonPaddings: 8px 16px}button.src-button--medium.src-button--icon-prefix{--srcButtonPaddings: 8px 16px 8px 12px}button.src-button--large{--srcButtonPaddings: 12px 24px}button.src-button--large.src-button--icon-prefix{--srcButtonPaddings: 12px 24px 12px 20px}button.src-button--primary{--srcButtonBgColor: var(--src-color-bg-primary);--srcButtonBgHoverColor: var(--src-color-bg-primary-hover);--srcButtonBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, .08), 0px -1px 0px 0px rgba(0, 0, 0, .2) inset;--srcButtonFontColor: var(--src-color-text-inverse)}button.src-button--primary:disabled,button.src-button--primary[disabled]{--srcButtonBgColor: var(--src-color-bg-primary-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--secondary{--srcButtonFontColor: var(--src-color-text-default)}button.src-button--secondary:disabled,button.src-button--secondary[disabled]{--srcButtonBgColor: var(--src-color-bg-default-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--destructive{--srcButtonBgColor: var(--src-color-bg-critical);--srcButtonBgHoverColor: var(--src-color-bg-critical-strong);--srcButtonBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, .08), 0px -1px 0px 0px rgba(0, 0, 0, .2) inset;--srcButtonFontColor: var(--src-color-text-inverse)}button.src-button--destructive:disabled,button.src-button--destructive[disabled]{--srcButtonBgColor: var(--src-color-bg-primary-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--plain{padding:0;--srcButtonBgColor: transparent;--srcButtonBgHoverColor: transparent;--srcButtonBoxShadow: none}button.src-button--plain:active,button.src-button--plain.src-button--pressed{text-decoration:underline}@media (pointer: fine){button.src-button--plain:hover,button.src-button--plain:focus{text-decoration:underline}}button.src-button--plain:disabled,button.src-button--plain[disabled]{--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--plain.src-button--primary,button.src-button--plain.src-button--primary:active,button.src-button--plain.src-button--primary--pressed{--srcButtonFontColor: var(--src-color-text-primary)}@media (pointer: fine){button.src-button--plain.src-button--primary:hover,button.src-button--plain.src-button--primary:focus{--srcButtonFontColor: var(--src-color-text-primary)}}button.src-button--plain.src-button--destructive,button.src-button--plain.src-button--destructive:active,button.src-button--plain.src-button--destructive--pressed{--srcButtonFontColor: var(--src-color-text-critical)}@media (pointer: fine){button.src-button--plain.src-button--destructive:hover,button.src-button--plain.src-button--destructive:focus{--srcButtonFontColor: var(--src-color-text-critical)}}button.src-button--plain.src-button--secondary{--srcButtonFontColor: var(--src-color-text-default)}button.src-button--plain.src-button--primary:disabled,button.src-button--plain.src-button--primary[disabled],button.src-button--plain.src-button--destructive:disabled,button.src-button--plain.src-button--destructive[disabled],button.src-button--plain.src-button--secondary:disabled,button.src-button--plain.src-button--secondary[disabled]{--srcButtonBgColor: transparent;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--full-width{--srcButtonWidth: 100%}button.src-button--disclosure{position:relative;--srcButtonDisclosureIconColor: var(--src-color-icon-default)}button.src-button--disclosure span{display:flex;align-items:center}button.src-button--disclosure:disabled,button.src-button--disclosure[disabled]{--srcButtonDisclosureIconColor: var(--src-color-icon-default-disabled)}button.src-button--disclosure .disclosure-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px;padding:6px;color:var(--srcButtonDisclosureIconColor)}button.src-button--disclosure.src-button--plain.src-button--primary{--srcButtonDisclosureIconColor: var(--src-color-icon-primary)}button.src-button--disclosure.src-button--plain.src-button--destructive{--srcButtonDisclosureIconColor: var(--src-color-icon-critical)}button.src-button--disclosure.src-button--plain.src-button--primary:disabled,button.src-button--disclosure.src-button--plain.src-button--primary[disabled],button.src-button--disclosure.src-button--plain.src-button--destructive:disabled,button.src-button--disclosure.src-button--plain.src-button--destructive[disabled]{--srcButtonDisclosureIconColor: var( --src-color-icon-default-disabled )}button.src-button--disclosure.src-button--primary,button.src-button--disclosure.src-button--destructive{--srcButtonDisclosureIconColor: var(--src-color-text-inverse)}button.src-button--disclosure.src-button--primary:disabled,button.src-button--disclosure.src-button--primary[disabled],button.src-button--disclosure.src-button--destructive:disabled,button.src-button--disclosure.src-button--destructive[disabled]{--srcButtonDisclosureIconColor: var(--src-color-text-inverse)}button.src-button--disclosure.src-button--secondary{--srcButtonDisclosureIconColor: var(--src-color-icon-default)}button.src-button--disclosure.src-button--secondary:disabled,button.src-button--disclosure.src-button--secondary[disabled]{--srcButtonDisclosureIconColor: var(--src-color-icon-default-disabled)}button.src-button [srcIconPrefix]{flex-shrink:0}button.src-button--icon-button.src-button--slim{--srcButtonPaddings: 6px}button.src-button--icon-button.src-button--medium{--srcButtonPaddings: 8px}button.src-button--icon-button.src-button--large{--srcButtonPaddings: 12px}button.src-button--loading src-loading{position:absolute}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SourceLoadingComponent, selector: "src-loading", inputs: ["size", "progress", "lineCap", "backgroundStrokeColor", "progressStrokeColor", "strokeWidth", "data-testid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'src-button', imports: [NgClass, SourceLoadingComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type\"\n  class=\"src-button\"\n  [ngClass]=\"classes\"\n  [attr.form]=\"formID\"\n  (click)=\"handleClick($event)\"\n  (submit)=\"handleSubmit($event)\"\n  [disabled]=\"isDisabled\"\n  [attr.data-testid]=\"testID()\"\n>\n  <span [style.opacity]=\"isLoading ? 0 : 1\">\n    @if (iconPrefix) {\n      <span class=\"src-button__icon\">\n        <ng-content select=\"[srcIconPrefix]\"></ng-content>\n      </span>\n    }\n\n    <ng-content></ng-content>\n\n    @if (hasDisclosure) {\n      <svg\n        class=\"disclosure-icon\"\n        width=\"8\"\n        height=\"5\"\n        viewBox=\"0 0 8 5\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M3.40573 4.3L0.805725 1.7C0.489058 1.38333 0.418392 1.021 0.593725 0.613C0.768392 0.204333 1.08073 0 1.53073 0H6.68072C7.13072 0 7.44306 0.204333 7.61772 0.613C7.79306 1.021 7.72239 1.38333 7.40573 1.7L4.80572 4.3C4.70572 4.4 4.59739 4.475 4.48073 4.525C4.36406 4.575 4.23906 4.6 4.10573 4.6C3.97239 4.6 3.84739 4.575 3.73073 4.525C3.61406 4.475 3.50573 4.4 3.40573 4.3Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    }\n  </span>\n  @if (isLoading) {\n    <src-loading\n      [size]=\"16\"\n      [progressStrokeColor]=\"'#6B7280'\"\n      [strokeWidth]=\"2\"\n      [data-testid]=\"testID() + '-loading-state'\"\n    ></src-loading>\n  }\n</button>\n", styles: ["button.src-button{--srcButtonBgColor: var(--src-color-bg-default);--srcButtonBgHoverColor: var(--src-color-bg-default-hover);--srcButtonBorderRadius: var(--src-br-small, 4px);--srcButtonBoxShadow: 0px 0px 0px 1px var(--src-color-border-strong, #abb2be) inset, 0px 1px 0px 0px rgba(0, 0, 0, .05);--srcButtonFontColor: var(--src-color-text-default);--srcButtonFontSize: var(--src-fs-base);--srcButtonFontWeight: var(--src-fw-medium, 500);--srcButtonLineHeight: var(--src-lh-base);--srcButtonPaddings: 8px 16px;--srcButtonTextTransform: default;--srcButtonWidth: auto;display:flex;justify-content:center;align-items:center;width:var(--srcButtonWidth);padding:var(--srcButtonPaddings);font-weight:var(--srcButtonFontWeight);font-size:var(--srcButtonFontSize);font-style:normal;line-height:var(--srcButtonLineHeight);text-align:center;color:var(--srcButtonFontColor);text-transform:var(--srcButtonTextTransform);letter-spacing:0;white-space:nowrap;background-color:var(--srcButtonBgColor);border:none;border-radius:var(--srcButtonBorderRadius);box-shadow:var(--srcButtonBoxShadow);cursor:pointer}button.src-button>div,button.src-button>span{display:flex;justify-content:center;align-items:center;width:auto}button.src-button:active,button.src-button--pressed{background-color:var(--srcButtonBgHoverColor)}@media (pointer: fine){button.src-button:hover,button.src-button:focus-visible{background-color:var(--srcButtonBgHoverColor)}}button.src-button:disabled,button.src-button[disabled],button.src-button.disabled{cursor:default;pointer-events:none}button.src-button--slim{--srcButtonPaddings: 6px 12px}button.src-button--slim.src-button--icon-prefix{--srcButtonPaddings: 6px 12px 6px 8px}button.src-button--medium{--srcButtonPaddings: 8px 16px}button.src-button--medium.src-button--icon-prefix{--srcButtonPaddings: 8px 16px 8px 12px}button.src-button--large{--srcButtonPaddings: 12px 24px}button.src-button--large.src-button--icon-prefix{--srcButtonPaddings: 12px 24px 12px 20px}button.src-button--primary{--srcButtonBgColor: var(--src-color-bg-primary);--srcButtonBgHoverColor: var(--src-color-bg-primary-hover);--srcButtonBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, .08), 0px -1px 0px 0px rgba(0, 0, 0, .2) inset;--srcButtonFontColor: var(--src-color-text-inverse)}button.src-button--primary:disabled,button.src-button--primary[disabled]{--srcButtonBgColor: var(--src-color-bg-primary-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--secondary{--srcButtonFontColor: var(--src-color-text-default)}button.src-button--secondary:disabled,button.src-button--secondary[disabled]{--srcButtonBgColor: var(--src-color-bg-default-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--destructive{--srcButtonBgColor: var(--src-color-bg-critical);--srcButtonBgHoverColor: var(--src-color-bg-critical-strong);--srcButtonBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, .08), 0px -1px 0px 0px rgba(0, 0, 0, .2) inset;--srcButtonFontColor: var(--src-color-text-inverse)}button.src-button--destructive:disabled,button.src-button--destructive[disabled]{--srcButtonBgColor: var(--src-color-bg-primary-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--plain{padding:0;--srcButtonBgColor: transparent;--srcButtonBgHoverColor: transparent;--srcButtonBoxShadow: none}button.src-button--plain:active,button.src-button--plain.src-button--pressed{text-decoration:underline}@media (pointer: fine){button.src-button--plain:hover,button.src-button--plain:focus{text-decoration:underline}}button.src-button--plain:disabled,button.src-button--plain[disabled]{--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--plain.src-button--primary,button.src-button--plain.src-button--primary:active,button.src-button--plain.src-button--primary--pressed{--srcButtonFontColor: var(--src-color-text-primary)}@media (pointer: fine){button.src-button--plain.src-button--primary:hover,button.src-button--plain.src-button--primary:focus{--srcButtonFontColor: var(--src-color-text-primary)}}button.src-button--plain.src-button--destructive,button.src-button--plain.src-button--destructive:active,button.src-button--plain.src-button--destructive--pressed{--srcButtonFontColor: var(--src-color-text-critical)}@media (pointer: fine){button.src-button--plain.src-button--destructive:hover,button.src-button--plain.src-button--destructive:focus{--srcButtonFontColor: var(--src-color-text-critical)}}button.src-button--plain.src-button--secondary{--srcButtonFontColor: var(--src-color-text-default)}button.src-button--plain.src-button--primary:disabled,button.src-button--plain.src-button--primary[disabled],button.src-button--plain.src-button--destructive:disabled,button.src-button--plain.src-button--destructive[disabled],button.src-button--plain.src-button--secondary:disabled,button.src-button--plain.src-button--secondary[disabled]{--srcButtonBgColor: transparent;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--full-width{--srcButtonWidth: 100%}button.src-button--disclosure{position:relative;--srcButtonDisclosureIconColor: var(--src-color-icon-default)}button.src-button--disclosure span{display:flex;align-items:center}button.src-button--disclosure:disabled,button.src-button--disclosure[disabled]{--srcButtonDisclosureIconColor: var(--src-color-icon-default-disabled)}button.src-button--disclosure .disclosure-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px;padding:6px;color:var(--srcButtonDisclosureIconColor)}button.src-button--disclosure.src-button--plain.src-button--primary{--srcButtonDisclosureIconColor: var(--src-color-icon-primary)}button.src-button--disclosure.src-button--plain.src-button--destructive{--srcButtonDisclosureIconColor: var(--src-color-icon-critical)}button.src-button--disclosure.src-button--plain.src-button--primary:disabled,button.src-button--disclosure.src-button--plain.src-button--primary[disabled],button.src-button--disclosure.src-button--plain.src-button--destructive:disabled,button.src-button--disclosure.src-button--plain.src-button--destructive[disabled]{--srcButtonDisclosureIconColor: var( --src-color-icon-default-disabled )}button.src-button--disclosure.src-button--primary,button.src-button--disclosure.src-button--destructive{--srcButtonDisclosureIconColor: var(--src-color-text-inverse)}button.src-button--disclosure.src-button--primary:disabled,button.src-button--disclosure.src-button--primary[disabled],button.src-button--disclosure.src-button--destructive:disabled,button.src-button--disclosure.src-button--destructive[disabled]{--srcButtonDisclosureIconColor: var(--src-color-text-inverse)}button.src-button--disclosure.src-button--secondary{--srcButtonDisclosureIconColor: var(--src-color-icon-default)}button.src-button--disclosure.src-button--secondary:disabled,button.src-button--disclosure.src-button--secondary[disabled]{--srcButtonDisclosureIconColor: var(--src-color-icon-default-disabled)}button.src-button--icon-prefix{--srcButtonPrefixIconColor: var(--src-color-icon-default)}button.src-button--icon-prefix .src-button__icon{display:inline-flex;margin-right:4px;flex-shrink:0;vertical-align:middle;color:var(--srcButtonPrefixIconColor)}button.src-button--icon-prefix.src-button--plain.src-button--primary{--srcButtonPrefixIconColor: var(--src-color-icon-primary)}button.src-button--icon-prefix.src-button--plain.src-button--primary:disabled,button.src-button--icon-prefix.src-button--plain.src-button--primary[disabled]{--srcButtonPrefixIconColor: var(--src-color-icon-default-disabled)}button.src-button--icon-prefix.src-button--plain.src-button--destructive{--srcButtonPrefixIconColor: var(--src-color-icon-critical)}button.src-button--icon-prefix.src-button--plain.src-button--destructive:disabled,button.src-button--icon-prefix.src-button--plain.src-button--destructive[disabled]{--srcButtonPrefixIconColor: var(--src-color-icon-default-disabled)}button.src-button--icon-prefix.src-button--primary,button.src-button--icon-prefix.src-button--destructive{--srcButtonPrefixIconColor: var(--src-color-text-inverse)}button.src-button--icon-prefix.src-button--primary:disabled,button.src-button--icon-prefix.src-button--primary[disabled],button.src-button--icon-prefix.src-button--destructive:disabled,button.src-button--icon-prefix.src-button--destructive[disabled]{--srcButtonPrefixIconColor: var(--src-color-icon-default-disabled)}button.src-button--icon-prefix.src-button--secondary{--srcButtonPrefixIconColor: var(--src-color-icon-default)}button.src-button--icon-prefix.src-button--secondary:disabled,button.src-button--icon-prefix.src-button--secondary[disabled]{--srcButtonPrefixIconColor: var(--src-color-icon-default-disabled)}button.src-button--icon-button{--srcButtonIconColor: var(--src-color-icon-default)}button.src-button--icon-button .src-button__icon{flex-shrink:0;color:var(--srcButtonIconColor)}button.src-button--icon-button.src-button--primary,button.src-button--icon-button.src-button--destructive{--srcButtonIconColor: var(--src-color-text-inverse)}button.src-button--icon-button.src-button--secondary{--srcButtonIconColor: var(--src-color-icon-default)}button.src-button--icon-button.src-button--slim{--srcButtonPaddings: 6px}button.src-button--icon-button.src-button--medium{--srcButtonPaddings: 8px}button.src-button--icon-button.src-button--large{--srcButtonPaddings: 12px}button.src-button--loading src-loading{position:absolute}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }], colorScheme: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], hasDisclosure: [{
-                type: Input
-            }], isFullWidth: [{
-                type: Input
-            }], iconPrefix: [{
-                type: Input
-            }], iconButton: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], isPressed: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], formID: [{
-                type: Input
-            }], srcButtonConfig: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }], onSubmit: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'src-button', imports: [NgClass, SourceLoadingComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type()\"\n  class=\"src-button\"\n  [ngClass]=\"classes()\"\n  [attr.form]=\"formID()\"\n  (click)=\"handleClick($event)\"\n  (submit)=\"handleSubmit($event)\"\n  [disabled]=\"isDisabled()\"\n  [attr.data-testid]=\"testID()\"\n>\n  <span [style.opacity]=\"isLoading() ? 0 : 1\">\n    <ng-content select=\"[srcIconPrefix]\"></ng-content>\n\n    <ng-content></ng-content>\n\n    @if (hasDisclosure()) {\n      <svg\n        class=\"disclosure-icon\"\n        width=\"8\"\n        height=\"5\"\n        viewBox=\"0 0 8 5\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M3.40573 4.3L0.805725 1.7C0.489058 1.38333 0.418392 1.021 0.593725 0.613C0.768392 0.204333 1.08073 0 1.53073 0H6.68072C7.13072 0 7.44306 0.204333 7.61772 0.613C7.79306 1.021 7.72239 1.38333 7.40573 1.7L4.80572 4.3C4.70572 4.4 4.59739 4.475 4.48073 4.525C4.36406 4.575 4.23906 4.6 4.10573 4.6C3.97239 4.6 3.84739 4.575 3.73073 4.525C3.61406 4.475 3.50573 4.4 3.40573 4.3Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    }\n  </span>\n  @if (isLoading()) {\n    <src-loading\n      [size]=\"16\"\n      [progressStrokeColor]=\"'#6B7280'\"\n      [strokeWidth]=\"2\"\n      [data-testid]=\"testID() + '-loading-state'\"\n    ></src-loading>\n  }\n</button>\n", styles: ["button.src-button{--srcButtonBgColor: var(--src-color-bg-default);--srcButtonBgHoverColor: var(--src-color-bg-default-hover);--srcButtonBorderRadius: var(--src-br-small, 4px);--srcButtonBoxShadow: 0px 0px 0px 1px var(--src-color-border-strong, #abb2be) inset, 0px 1px 0px 0px rgba(0, 0, 0, .05);--srcButtonFontColor: var(--src-color-text-default);--srcButtonFontSize: var(--src-fs-base);--srcButtonFontWeight: var(--src-fw-medium, 500);--srcButtonLineHeight: var(--src-lh-base);--srcButtonPaddings: 8px 16px;--srcButtonTextTransform: default;--srcButtonWidth: auto;display:flex;justify-content:center;align-items:center;width:var(--srcButtonWidth);padding:var(--srcButtonPaddings);font-weight:var(--srcButtonFontWeight);font-size:var(--srcButtonFontSize);font-style:normal;line-height:var(--srcButtonLineHeight);text-align:center;color:var(--srcButtonFontColor);text-transform:var(--srcButtonTextTransform);letter-spacing:0;white-space:nowrap;background-color:var(--srcButtonBgColor);border:none;border-radius:var(--srcButtonBorderRadius);box-shadow:var(--srcButtonBoxShadow);cursor:pointer}button.src-button>div,button.src-button>span{display:flex;justify-content:center;align-items:center;gap:4px;width:auto}button.src-button:active,button.src-button--pressed{background-color:var(--srcButtonBgHoverColor)}@media (pointer: fine){button.src-button:hover,button.src-button:focus-visible{background-color:var(--srcButtonBgHoverColor)}}button.src-button:disabled,button.src-button[disabled],button.src-button.disabled{cursor:default;pointer-events:none}button.src-button--slim{--srcButtonPaddings: 6px 12px}button.src-button--slim.src-button--icon-prefix{--srcButtonPaddings: 6px 12px 6px 8px}button.src-button--medium{--srcButtonPaddings: 8px 16px}button.src-button--medium.src-button--icon-prefix{--srcButtonPaddings: 8px 16px 8px 12px}button.src-button--large{--srcButtonPaddings: 12px 24px}button.src-button--large.src-button--icon-prefix{--srcButtonPaddings: 12px 24px 12px 20px}button.src-button--primary{--srcButtonBgColor: var(--src-color-bg-primary);--srcButtonBgHoverColor: var(--src-color-bg-primary-hover);--srcButtonBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, .08), 0px -1px 0px 0px rgba(0, 0, 0, .2) inset;--srcButtonFontColor: var(--src-color-text-inverse)}button.src-button--primary:disabled,button.src-button--primary[disabled]{--srcButtonBgColor: var(--src-color-bg-primary-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--secondary{--srcButtonFontColor: var(--src-color-text-default)}button.src-button--secondary:disabled,button.src-button--secondary[disabled]{--srcButtonBgColor: var(--src-color-bg-default-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--destructive{--srcButtonBgColor: var(--src-color-bg-critical);--srcButtonBgHoverColor: var(--src-color-bg-critical-strong);--srcButtonBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, .08), 0px -1px 0px 0px rgba(0, 0, 0, .2) inset;--srcButtonFontColor: var(--src-color-text-inverse)}button.src-button--destructive:disabled,button.src-button--destructive[disabled]{--srcButtonBgColor: var(--src-color-bg-primary-disabled);--srcButtonBoxShadow: none;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--plain{padding:0;--srcButtonBgColor: transparent;--srcButtonBgHoverColor: transparent;--srcButtonBoxShadow: none}button.src-button--plain:active,button.src-button--plain.src-button--pressed{text-decoration:underline}@media (pointer: fine){button.src-button--plain:hover,button.src-button--plain:focus{text-decoration:underline}}button.src-button--plain:disabled,button.src-button--plain[disabled]{--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--plain.src-button--primary,button.src-button--plain.src-button--primary:active,button.src-button--plain.src-button--primary--pressed{--srcButtonFontColor: var(--src-color-text-primary)}@media (pointer: fine){button.src-button--plain.src-button--primary:hover,button.src-button--plain.src-button--primary:focus{--srcButtonFontColor: var(--src-color-text-primary)}}button.src-button--plain.src-button--destructive,button.src-button--plain.src-button--destructive:active,button.src-button--plain.src-button--destructive--pressed{--srcButtonFontColor: var(--src-color-text-critical)}@media (pointer: fine){button.src-button--plain.src-button--destructive:hover,button.src-button--plain.src-button--destructive:focus{--srcButtonFontColor: var(--src-color-text-critical)}}button.src-button--plain.src-button--secondary{--srcButtonFontColor: var(--src-color-text-default)}button.src-button--plain.src-button--primary:disabled,button.src-button--plain.src-button--primary[disabled],button.src-button--plain.src-button--destructive:disabled,button.src-button--plain.src-button--destructive[disabled],button.src-button--plain.src-button--secondary:disabled,button.src-button--plain.src-button--secondary[disabled]{--srcButtonBgColor: transparent;--srcButtonFontColor: var(--src-color-text-default-disabled)}button.src-button--full-width{--srcButtonWidth: 100%}button.src-button--disclosure{position:relative;--srcButtonDisclosureIconColor: var(--src-color-icon-default)}button.src-button--disclosure span{display:flex;align-items:center}button.src-button--disclosure:disabled,button.src-button--disclosure[disabled]{--srcButtonDisclosureIconColor: var(--src-color-icon-default-disabled)}button.src-button--disclosure .disclosure-icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:20px;height:20px;padding:6px;color:var(--srcButtonDisclosureIconColor)}button.src-button--disclosure.src-button--plain.src-button--primary{--srcButtonDisclosureIconColor: var(--src-color-icon-primary)}button.src-button--disclosure.src-button--plain.src-button--destructive{--srcButtonDisclosureIconColor: var(--src-color-icon-critical)}button.src-button--disclosure.src-button--plain.src-button--primary:disabled,button.src-button--disclosure.src-button--plain.src-button--primary[disabled],button.src-button--disclosure.src-button--plain.src-button--destructive:disabled,button.src-button--disclosure.src-button--plain.src-button--destructive[disabled]{--srcButtonDisclosureIconColor: var( --src-color-icon-default-disabled )}button.src-button--disclosure.src-button--primary,button.src-button--disclosure.src-button--destructive{--srcButtonDisclosureIconColor: var(--src-color-text-inverse)}button.src-button--disclosure.src-button--primary:disabled,button.src-button--disclosure.src-button--primary[disabled],button.src-button--disclosure.src-button--destructive:disabled,button.src-button--disclosure.src-button--destructive[disabled]{--srcButtonDisclosureIconColor: var(--src-color-text-inverse)}button.src-button--disclosure.src-button--secondary{--srcButtonDisclosureIconColor: var(--src-color-icon-default)}button.src-button--disclosure.src-button--secondary:disabled,button.src-button--disclosure.src-button--secondary[disabled]{--srcButtonDisclosureIconColor: var(--src-color-icon-default-disabled)}button.src-button [srcIconPrefix]{flex-shrink:0}button.src-button--icon-button.src-button--slim{--srcButtonPaddings: 6px}button.src-button--icon-button.src-button--medium{--srcButtonPaddings: 8px}button.src-button--icon-button.src-button--large{--srcButtonPaddings: 12px}button.src-button--loading src-loading{position:absolute}\n"] }]
+        }] });
 
 class SourceCopyrightComponent {
     constructor() {
@@ -458,65 +262,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             args: [{ selector: 'src-hint', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<p\n  class=\"src-hint\"\n  [class.src-hint--error]=\"isError()\"\n  [class.src-hint--compact]=\"isCompact()\"\n>\n  <ng-content select=\"[srcIconPrefix]\"></ng-content>\n  <ng-content></ng-content>\n</p>\n", styles: [".src-hint{--srcHintColor: var(--src-color-icon-default, #6b7280);--srcHintFontSize: var(--src-fs-base, 14px);--srcHintLineHeight: var(--src-lh-base, 1.43);--srcHintMargin: 4px 0 0;--srcHintIconSize: 20px;color:var(--srcHintColor);font-size:var(--srcHintFontSize);font-style:normal;display:flex;margin:var(--srcHintMargin);font-weight:var(--src-fw-regular, 400);line-height:var(--srcHintLineHeight)}.src-hint>[srcIconPrefix]{width:var(--srcHintIconSize);height:var(--srcHintIconSize);margin-right:4px;color:currentColor}.src-hint--error{--srcHintColor: var(--src-color-text-critical, #9f200a)}.src-hint--compact{--srcHintFontSize: var(--src-fs-small, 12px);--srcHintMargin: 2px 0 0}\n"] }]
         }] });
 
-const SourceIconButtonSize = {
-    XSMALL: 'xs',
-    SMALL: 'sm',
-    MEDIUM: 'md',
-    LARGE: 'lg',
-    DEFAULT: 'default',
-};
-
-const SourceIconButtonType = {
-    BUTTON: 'button',
-    SUBMIT: 'submit',
-    RESET: 'reset',
-};
-
-const SourceIconButtonShape = {
-    SQUARE: 'square',
-    ROUND: 'round',
-};
-
 class SourceIconButtonComponent {
     constructor() {
-        this.type = input(SourceIconButtonType.BUTTON);
-        this.name = input(undefined);
-        /**
-         * How big should it be?
-         */
-        this.size = input(SourceIconButtonSize.DEFAULT);
-        /**
-         * Shape of a button
-         */
-        this.shape = input(SourceIconButtonShape.SQUARE);
-        /**
-         * Use counter-attribute to display the counter in the top right corner of the button.
-         */
+        this.name = input();
+        this.type = input('button');
+        this.size = input('default');
+        this.shape = input('square');
         this.counter = input(undefined);
-        /**
-         * Standard active state for the button
-         */
         this.isActive = input(false);
-        /**
-         * Standard disabled state for button
-         */
         this.isDisabled = input(false);
-        /**
-         * Test ID for the component. Provide descriptive uniq id in kebab-case.
-         */
         this.testID = input('', { alias: 'data-testid' });
-        /**
-         * Optional click handler
-         */
-        this.onClick = new EventEmitter();
-        this.compiledClassesList = [];
-    }
-    get classes() {
-        this.compiledClassesList = [];
-        this.compiledClassesList.push(`src-icon-button--${this.shape()}`);
-        this.compiledClassesList.push(`src-icon-button--${this.size()}`);
-        this.compiledClassesList.push(this.isActive() ? 'src-icon-button--active' : '');
-        return this.compiledClassesList;
+        this.onClick = output();
+        this.classes = computed(() => [
+            `src-icon-button--${this.shape()}`,
+            `src-icon-button--${this.size()}`,
+            this.isActive() ? 'src-icon-button--active' : '',
+        ].filter(Boolean));
     }
     handleClick(event) {
         event.preventDefault();
@@ -526,14 +287,31 @@ class SourceIconButtonComponent {
         this.onClick.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SourceIconButtonComponent, isStandalone: true, selector: "src-icon-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [name]=\"name()\"\n  class=\"src-icon-button\"\n  [ngClass]=\"classes\"\n  [disabled]=\"isDisabled()\"\n  [attr.data-testid]=\"testID()\"\n  (click)=\"handleClick($event)\"\n>\n  <ng-content></ng-content>\n\n  @if (counter()) {\n    <src-badge\n      [number]=\"counter()!\"\n      [data-testid]=\"testID() + '-counter'\"\n    ></src-badge>\n  }\n</button>\n", styles: ["button.src-icon-button{--srcButtonBgColor: transparent;--srcButtonBgHoverColor: var(--src-color-bg-default-hover);--srcButtonIconColor: var(--src-color-icon-default);--srcButtonBorderRadius: var(--src-br-small);--srcButtonPaddings: 6px;--srcButtonIconSize: 20px;position:relative;display:flex;justify-content:center;align-items:center;width:auto;padding:var(--srcButtonPaddings);color:var(--srcButtonIconColor);background-color:var(--srcButtonBgColor);border:none;box-shadow:none;border-radius:var(--srcButtonBorderRadius);cursor:pointer}button.src-icon-button>src-badge{position:absolute;top:-7px;right:-10px}@media (hover: hover) and (pointer: fine){button.src-icon-button:hover,button.src-icon-button:focus-visible{--srcButtonBgColor: var(--srcButtonBgHoverColor);--srcButtonIconColor: var(--src-color-icon-default-hover)}}button.src-icon-button:disabled,button.src-icon-button[disabled],button.src-icon-button.disabled{cursor:default;pointer-events:none;--srcButtonBgColor: var(--src-color-bg-default);--srcButtonIconColor: var(--src-color-icon-default-disabled)}button.src-icon-button--round{--srcButtonBgColor: var(--src-color-bg-strong-subdued);--srcButtonBgHoverColor: var(--src-color-bg-strong-subdued-hover);--srcButtonBorderRadius: 50%}button.src-icon-button--active{--srcButtonBgColor: var(--src-color-bg-default-active);--srcButtonIconColor: var(--src-color-icon-primary)}@media (hover: hover) and (pointer: fine){button.src-icon-button--active:hover,button.src-icon-button--active:focus-visible{--srcButtonBgColor: var(--src-color-bg-default-active);--srcButtonIconColor: var(--src-color-icon-primary)}}button.src-icon-button--xs{--srcButtonPaddings: 1px}button.src-icon-button--xs>:not(src-badge){width:18px;height:18px}button.src-icon-button--sm{--srcButtonPaddings: 2px}button.src-icon-button--default{--srcButtonPaddings: 6px}button.src-icon-button--md{--srcButtonPaddings: 8px}button.src-icon-button--lg{--srcButtonPaddings: 12px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SourceBadgeComponent, selector: "src-badge", inputs: ["number", "backgroundColor", "type", "size", "customClass", "borderColor", "borderWidth", "textColor", "data-testid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SourceIconButtonComponent, isStandalone: true, selector: "src-icon-button", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [name]=\"name()\"\n  class=\"src-icon-button\"\n  [ngClass]=\"classes()\"\n  [disabled]=\"isDisabled()\"\n  [attr.data-testid]=\"testID()\"\n  (click)=\"handleClick($event)\"\n>\n  <ng-content></ng-content>\n\n  @if (counter()) {\n    <src-badge\n      [number]=\"counter()!\"\n      [data-testid]=\"testID() + '-counter'\"\n    ></src-badge>\n  }\n</button>\n", styles: ["button.src-icon-button{--srcButtonBgColor: transparent;--srcButtonBgHoverColor: var(--src-color-bg-default-hover);--srcButtonIconColor: var(--src-color-icon-default);--srcButtonBorderRadius: var(--src-br-small);--srcButtonPaddings: 6px;--srcButtonIconSize: 20px;position:relative;display:flex;justify-content:center;align-items:center;width:auto;padding:var(--srcButtonPaddings);color:var(--srcButtonIconColor);background-color:var(--srcButtonBgColor);border:none;box-shadow:none;border-radius:var(--srcButtonBorderRadius);cursor:pointer}button.src-icon-button>src-badge{position:absolute;top:-7px;right:-10px}@media (hover: hover) and (pointer: fine){button.src-icon-button:hover,button.src-icon-button:focus-visible{--srcButtonBgColor: var(--srcButtonBgHoverColor);--srcButtonIconColor: var(--src-color-icon-default-hover)}}button.src-icon-button:disabled,button.src-icon-button[disabled],button.src-icon-button.disabled{cursor:default;pointer-events:none;--srcButtonBgColor: var(--src-color-bg-default);--srcButtonIconColor: var(--src-color-icon-default-disabled)}button.src-icon-button--round{--srcButtonBgColor: var(--src-color-bg-strong-subdued);--srcButtonBgHoverColor: var(--src-color-bg-strong-subdued-hover);--srcButtonBorderRadius: 50%}button.src-icon-button--active{--srcButtonBgColor: var(--src-color-bg-default-active);--srcButtonIconColor: var(--src-color-icon-primary)}@media (hover: hover) and (pointer: fine){button.src-icon-button--active:hover,button.src-icon-button--active:focus-visible{--srcButtonBgColor: var(--src-color-bg-default-active);--srcButtonIconColor: var(--src-color-icon-primary)}}button.src-icon-button--xs{--srcButtonPaddings: 1px}button.src-icon-button--xs>:not(src-badge){width:18px;height:18px}button.src-icon-button--sm{--srcButtonPaddings: 2px}button.src-icon-button--default{--srcButtonPaddings: 6px}button.src-icon-button--md{--srcButtonPaddings: 8px}button.src-icon-button--lg{--srcButtonPaddings: 12px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SourceBadgeComponent, selector: "src-badge", inputs: ["number", "backgroundColor", "type", "size", "borderColor", "borderWidth", "textColor", "customClass", "data-testid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'src-icon-button', imports: [NgClass, SourceBadgeComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type\"\n  [name]=\"name()\"\n  class=\"src-icon-button\"\n  [ngClass]=\"classes\"\n  [disabled]=\"isDisabled()\"\n  [attr.data-testid]=\"testID()\"\n  (click)=\"handleClick($event)\"\n>\n  <ng-content></ng-content>\n\n  @if (counter()) {\n    <src-badge\n      [number]=\"counter()!\"\n      [data-testid]=\"testID() + '-counter'\"\n    ></src-badge>\n  }\n</button>\n", styles: ["button.src-icon-button{--srcButtonBgColor: transparent;--srcButtonBgHoverColor: var(--src-color-bg-default-hover);--srcButtonIconColor: var(--src-color-icon-default);--srcButtonBorderRadius: var(--src-br-small);--srcButtonPaddings: 6px;--srcButtonIconSize: 20px;position:relative;display:flex;justify-content:center;align-items:center;width:auto;padding:var(--srcButtonPaddings);color:var(--srcButtonIconColor);background-color:var(--srcButtonBgColor);border:none;box-shadow:none;border-radius:var(--srcButtonBorderRadius);cursor:pointer}button.src-icon-button>src-badge{position:absolute;top:-7px;right:-10px}@media (hover: hover) and (pointer: fine){button.src-icon-button:hover,button.src-icon-button:focus-visible{--srcButtonBgColor: var(--srcButtonBgHoverColor);--srcButtonIconColor: var(--src-color-icon-default-hover)}}button.src-icon-button:disabled,button.src-icon-button[disabled],button.src-icon-button.disabled{cursor:default;pointer-events:none;--srcButtonBgColor: var(--src-color-bg-default);--srcButtonIconColor: var(--src-color-icon-default-disabled)}button.src-icon-button--round{--srcButtonBgColor: var(--src-color-bg-strong-subdued);--srcButtonBgHoverColor: var(--src-color-bg-strong-subdued-hover);--srcButtonBorderRadius: 50%}button.src-icon-button--active{--srcButtonBgColor: var(--src-color-bg-default-active);--srcButtonIconColor: var(--src-color-icon-primary)}@media (hover: hover) and (pointer: fine){button.src-icon-button--active:hover,button.src-icon-button--active:focus-visible{--srcButtonBgColor: var(--src-color-bg-default-active);--srcButtonIconColor: var(--src-color-icon-primary)}}button.src-icon-button--xs{--srcButtonPaddings: 1px}button.src-icon-button--xs>:not(src-badge){width:18px;height:18px}button.src-icon-button--sm{--srcButtonPaddings: 2px}button.src-icon-button--default{--srcButtonPaddings: 6px}button.src-icon-button--md{--srcButtonPaddings: 8px}button.src-icon-button--lg{--srcButtonPaddings: 12px}\n"] }]
-        }], propDecorators: { onClick: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'src-icon-button', imports: [NgClass, SourceBadgeComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type()\"\n  [name]=\"name()\"\n  class=\"src-icon-button\"\n  [ngClass]=\"classes()\"\n  [disabled]=\"isDisabled()\"\n  [attr.data-testid]=\"testID()\"\n  (click)=\"handleClick($event)\"\n>\n  <ng-content></ng-content>\n\n  @if (counter()) {\n    <src-badge\n      [number]=\"counter()!\"\n      [data-testid]=\"testID() + '-counter'\"\n    ></src-badge>\n  }\n</button>\n", styles: ["button.src-icon-button{--srcButtonBgColor: transparent;--srcButtonBgHoverColor: var(--src-color-bg-default-hover);--srcButtonIconColor: var(--src-color-icon-default);--srcButtonBorderRadius: var(--src-br-small);--srcButtonPaddings: 6px;--srcButtonIconSize: 20px;position:relative;display:flex;justify-content:center;align-items:center;width:auto;padding:var(--srcButtonPaddings);color:var(--srcButtonIconColor);background-color:var(--srcButtonBgColor);border:none;box-shadow:none;border-radius:var(--srcButtonBorderRadius);cursor:pointer}button.src-icon-button>src-badge{position:absolute;top:-7px;right:-10px}@media (hover: hover) and (pointer: fine){button.src-icon-button:hover,button.src-icon-button:focus-visible{--srcButtonBgColor: var(--srcButtonBgHoverColor);--srcButtonIconColor: var(--src-color-icon-default-hover)}}button.src-icon-button:disabled,button.src-icon-button[disabled],button.src-icon-button.disabled{cursor:default;pointer-events:none;--srcButtonBgColor: var(--src-color-bg-default);--srcButtonIconColor: var(--src-color-icon-default-disabled)}button.src-icon-button--round{--srcButtonBgColor: var(--src-color-bg-strong-subdued);--srcButtonBgHoverColor: var(--src-color-bg-strong-subdued-hover);--srcButtonBorderRadius: 50%}button.src-icon-button--active{--srcButtonBgColor: var(--src-color-bg-default-active);--srcButtonIconColor: var(--src-color-icon-primary)}@media (hover: hover) and (pointer: fine){button.src-icon-button--active:hover,button.src-icon-button--active:focus-visible{--srcButtonBgColor: var(--src-color-bg-default-active);--srcButtonIconColor: var(--src-color-icon-primary)}}button.src-icon-button--xs{--srcButtonPaddings: 1px}button.src-icon-button--xs>:not(src-badge){width:18px;height:18px}button.src-icon-button--sm{--srcButtonPaddings: 2px}button.src-icon-button--default{--srcButtonPaddings: 6px}button.src-icon-button--md{--srcButtonPaddings: 8px}button.src-icon-button--lg{--srcButtonPaddings: 12px}\n"] }]
+        }] });
+
+const SourceIconButtonSize = {
+    XSMALL: 'xs',
+    SMALL: 'sm',
+    MEDIUM: 'md',
+    LARGE: 'lg',
+    DEFAULT: 'default',
+};
+
+const SourceIconButtonType = {
+    BUTTON: 'button',
+    SUBMIT: 'submit',
+    RESET: 'reset',
+};
+
+const SourceIconButtonShape = {
+    SQUARE: 'square',
+    ROUND: 'round',
+};
 
 class SourceLogoLoadingComponent {
     constructor() {
@@ -551,45 +329,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 
 class SourceSliderComponent {
     constructor() {
-        /**
-         * The size of the thumb
-         */
-        this.thumbSize = 12;
-        /**
-         * The height of the visual track. Height of the input won't be affected
-         */
-        this.trackHeight = 2;
-        /**
-         * The step length of the slider
-         */
-        this.step = 1;
-        /**
-         * Whether to show the ticks on each step
-         */
-        this.showTicks = false;
-        /**
-         * If slider is disabled
-         */
-        this.isDisabled = false;
-        /**
-         * Slider orientation - WIP
-         */
-        this.orientation = 'horizontal';
-        this.tickPositions = [];
-        /**
-         * Test ID for the component. Provide descriptive uniq id in kebab-case.
-         */
+        this.id = input();
+        this.value = input.required();
+        this.sliderValue = linkedSignal(() => this.value());
+        this.min = input.required();
+        this.max = input.required();
+        this.thumbSize = input(12);
+        this.trackHeight = input(2);
+        this.step = input(1);
+        this.showTicks = input(false);
+        this.isDisabled = input(false);
+        this.orientation = input('horizontal');
         this.testID = input('', { alias: 'data-testid' });
-        /**
-         * Emits the value of the slider when it changes
-         */
-        this.onChange = new EventEmitter();
-        this.onInput = new EventEmitter();
-    }
-    ngAfterViewInit() {
-        if (this.showTicks) {
-            this.calculateTickPositions();
-        }
+        this.onChange = output();
+        this.onInput = output();
+        this.tickPositions = computed(() => {
+            if (this.showTicks()) {
+                const numberOfTicks = (this.max() - this.min()) / this.step();
+                return Array.from({ length: numberOfTicks + 1 }, (_, index) => {
+                    const percent = (index / numberOfTicks) * 100;
+                    return isNaN(percent) ? '0%' : `${percent}%`;
+                });
+            }
+            return [];
+        });
+        this.thumbPosition = computed(() => {
+            const percent = ((this.value() - this.min()) * 100) / (this.max() - this.min());
+            return isNaN(percent) ? '0%' : `${percent}%`;
+        });
+        this.filledWidth = computed(() => {
+            const percent = ((this.value() - this.min()) / (this.max() - this.min())) * 100;
+            return isNaN(percent) ? '0%' : `${percent}%`;
+        });
     }
     input(valueEvent) {
         if (valueEvent.target instanceof HTMLInputElement) {
@@ -601,58 +372,20 @@ class SourceSliderComponent {
             this.onChange.emit(this.getValue(valueEvent.target));
         }
     }
-    calculateThumbPosition() {
-        const percent = ((this.value - this.min) * 100) / (this.max - this.min);
-        return isNaN(percent) ? '0%' : `${percent}%`;
-    }
-    calculateFilledWidth() {
-        const percent = ((this.value - this.min) / (this.max - this.min)) * 100;
-        return isNaN(percent) ? '0%' : `${percent}%`;
-    }
     getValue(value) {
         const newValue = value.valueAsNumber;
-        const steppedValue = Math.round(newValue / this.step) * this.step;
-        this.value = Math.min(Math.max(steppedValue, this.min), this.max);
+        const steppedValue = Math.round(newValue / this.step()) * this.step();
+        const calculateValue = Math.min(Math.max(steppedValue, this.min()), this.max());
+        this.sliderValue.set(calculateValue);
         return newValue;
     }
-    calculateTickPositions() {
-        const numberOfTicks = (this.max - this.min) / this.step;
-        this.tickPositions = Array.from({ length: numberOfTicks + 1 }, (_, index) => {
-            const percent = (index / numberOfTicks) * 100;
-            return isNaN(percent) ? '0%' : `${percent}%`;
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SourceSliderComponent, isStandalone: true, selector: "src-slider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, thumbSize: { classPropertyName: "thumbSize", publicName: "thumbSize", isSignal: false, isRequired: false, transformFunction: null }, trackHeight: { classPropertyName: "trackHeight", publicName: "trackHeight", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: false, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: false, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onInput: "onInput" }, ngImport: i0, template: "<div\n  class=\"src-slider\"\n  [style.--srcSliderThumbSize.px]=\"thumbSize\"\n  [style.--srcSliderTrackHeight.px]=\"trackHeight\"\n  [class.src-slider--disabled]=\"isDisabled\"\n  [class.src-slider--vertical]=\"orientation === 'vertical'\"\n  [attr.data-testid]=\"testID()\"\n>\n  <input\n    type=\"range\"\n    class=\"src-slider__input\"\n    [id]=\"id\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [disabled]=\"isDisabled\"\n    [value]=\"value\"\n    [attr.data-testid]=\"testID() + '-input'\"\n    (change)=\"change($event)\"\n    (input)=\"input($event)\"\n  />\n  <div\n    class=\"src-slider__filled-track\"\n    [style.width]=\"calculateFilledWidth()\"\n  ></div>\n\n  <div class=\"src-slider__thumb\" [style.left]=\"calculateThumbPosition()\">\n    <ng-content select=\"[srcIconThumb]\"></ng-content>\n  </div>\n\n  @if (showTicks) {\n    <div class=\"src-slider__ticks-container\">\n      @for (tick of tickPositions; track tick) {\n        <div class=\"tick\" [style.left]=\"tick\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".src-slider{position:relative;--srcSliderThumbBackground: #fff;--srcSliderThumbShadow: 0 0 0 2px #abb2be, 0 2px 0 2px #e6e7e7, 0 0 0 4px #fff;--srcSliderThumbIconColor: var(--src-color-icon-default);--srcSliderClickableTrackHeight: var(--srcSliderThumbSize);--srcSliderTrackShape: 0px;--srcSliderTrackBg: var(--src-color-border-default, #e5e7eb);--srcSliderTrackFilledBg: transparent;--srcSliderTickBg: var(--src-color-border-default, #e5e7eb);--srcSliderTickWidth: 2px;--srcSliderTickHeight: 10px;--srcSliderTickShape: 50%;display:flex;align-items:center}.src-slider--disabled{pointer-events:none;--srcSliderThumbShadow: 0 0 0 2px #d1d5db, 0 0 0 4px #fff;--srcSliderTrackBg: #f1f2f3}.src-slider:hover{--srcSliderThumbShadow: 0 0 0 2px #6b7280, 0 2px 0 2px #e6e7e7, 0 0 0 4px #fff}.src-slider input.src-slider__input{width:100%;height:var(--srcSliderClickableTrackHeight);appearance:none;background:transparent;cursor:pointer}.src-slider input.src-slider__input::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;border:0;background:transparent}.src-slider input.src-slider__input::-moz-range-thumb{width:0;height:0;border:0;background:transparent}.src-slider input.src-slider__input::-webkit-slider-runnable-track{width:100%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackBg);border-radius:var(--srcSliderTrackShape)}.src-slider input.src-slider__input::-moz-range-track{width:100%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackBg);border-radius:var(--srcSliderTrackShape)}.src-slider input.src-slider__input::-ms-fill-lower{background:var(--srcSliderTrackFilledBg);border-radius:var(--srcSliderTrackShape)}.src-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--srcSliderThumbBackground);transform:translate(-50%,-50%);width:var(--srcSliderThumbSize);height:var(--srcSliderThumbSize);pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--srcSliderThumbIconColor);cursor:pointer;box-shadow:var(--srcSliderThumbShadow);z-index:1;transition:all .35s ease}.src-slider__thumb>[srcIconThumb]{width:100%;height:100%;object-fit:contain;pointer-events:none}.src-slider__filled-track{position:absolute;top:50%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackFilledBg);border-radius:var(--srcSliderTrackShape);left:0;transform:translateY(-50%);pointer-events:none}.src-slider__ticks-container{width:100%;position:absolute;top:50%;height:0}.src-slider__ticks-container .tick{width:var(--srcSliderTickWidth);height:var(--srcSliderTickHeight);transform:translate(-50%,-50%);position:absolute;background:var(--srcSliderTickBg);border-radius:var(--srcSliderTickShape);top:0;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SourceSliderComponent, isStandalone: true, selector: "src-slider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, thumbSize: { classPropertyName: "thumbSize", publicName: "thumbSize", isSignal: true, isRequired: false, transformFunction: null }, trackHeight: { classPropertyName: "trackHeight", publicName: "trackHeight", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onInput: "onInput" }, ngImport: i0, template: "<div\n  class=\"src-slider\"\n  [style.--srcSliderThumbSize.px]=\"thumbSize()\"\n  [style.--srcSliderTrackHeight.px]=\"trackHeight()\"\n  [class.src-slider--disabled]=\"isDisabled()\"\n  [class.src-slider--vertical]=\"orientation() === 'vertical'\"\n  [attr.data-testid]=\"testID()\"\n>\n  <input\n    type=\"range\"\n    class=\"src-slider__input\"\n    [id]=\"id()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [step]=\"step()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"sliderValue()\"\n    [attr.data-testid]=\"testID() + '-input'\"\n    (change)=\"change($event)\"\n    (input)=\"input($event)\"\n  />\n  <div class=\"src-slider__filled-track\" [style.width]=\"filledWidth()\"></div>\n\n  <div class=\"src-slider__thumb\" [style.left]=\"thumbPosition()\">\n    <ng-content select=\"[srcIconThumb]\"></ng-content>\n  </div>\n\n  @if (showTicks()) {\n    <div class=\"src-slider__ticks-container\">\n      @for (tick of tickPositions(); track tick) {\n        <div class=\"tick\" [style.left]=\"tick\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".src-slider{position:relative;--srcSliderThumbBackground: #fff;--srcSliderThumbShadow: 0 0 0 2px #abb2be, 0 2px 0 2px #e6e7e7, 0 0 0 4px #fff;--srcSliderThumbIconColor: var(--src-color-icon-default);--srcSliderClickableTrackHeight: var(--srcSliderThumbSize);--srcSliderTrackShape: 0px;--srcSliderTrackBg: var(--src-color-border-default, #e5e7eb);--srcSliderTrackFilledBg: transparent;--srcSliderTickBg: var(--src-color-border-default, #e5e7eb);--srcSliderTickWidth: 2px;--srcSliderTickHeight: 10px;--srcSliderTickShape: 50%;display:flex;align-items:center}.src-slider--disabled{pointer-events:none;--srcSliderThumbShadow: 0 0 0 2px #d1d5db, 0 0 0 4px #fff;--srcSliderTrackBg: #f1f2f3}.src-slider:hover{--srcSliderThumbShadow: 0 0 0 2px #6b7280, 0 2px 0 2px #e6e7e7, 0 0 0 4px #fff}.src-slider input.src-slider__input{width:100%;height:var(--srcSliderClickableTrackHeight);appearance:none;background:transparent;cursor:pointer}.src-slider input.src-slider__input::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;border:0;background:transparent}.src-slider input.src-slider__input::-moz-range-thumb{width:0;height:0;border:0;background:transparent}.src-slider input.src-slider__input::-webkit-slider-runnable-track{width:100%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackBg);border-radius:var(--srcSliderTrackShape)}.src-slider input.src-slider__input::-moz-range-track{width:100%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackBg);border-radius:var(--srcSliderTrackShape)}.src-slider input.src-slider__input::-ms-fill-lower{background:var(--srcSliderTrackFilledBg);border-radius:var(--srcSliderTrackShape)}.src-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--srcSliderThumbBackground);transform:translate(-50%,-50%);width:var(--srcSliderThumbSize);height:var(--srcSliderThumbSize);pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--srcSliderThumbIconColor);cursor:pointer;box-shadow:var(--srcSliderThumbShadow);z-index:1;transition:all .35s ease}.src-slider__thumb>[srcIconThumb]{width:100%;height:100%;object-fit:contain;pointer-events:none}.src-slider__filled-track{position:absolute;top:50%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackFilledBg);border-radius:var(--srcSliderTrackShape);left:0;transform:translateY(-50%);pointer-events:none}.src-slider__ticks-container{width:100%;position:absolute;top:50%;height:0}.src-slider__ticks-container .tick{width:var(--srcSliderTickWidth);height:var(--srcSliderTickHeight);transform:translate(-50%,-50%);position:absolute;background:var(--srcSliderTickBg);border-radius:var(--srcSliderTickShape);top:0;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'src-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"src-slider\"\n  [style.--srcSliderThumbSize.px]=\"thumbSize\"\n  [style.--srcSliderTrackHeight.px]=\"trackHeight\"\n  [class.src-slider--disabled]=\"isDisabled\"\n  [class.src-slider--vertical]=\"orientation === 'vertical'\"\n  [attr.data-testid]=\"testID()\"\n>\n  <input\n    type=\"range\"\n    class=\"src-slider__input\"\n    [id]=\"id\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [disabled]=\"isDisabled\"\n    [value]=\"value\"\n    [attr.data-testid]=\"testID() + '-input'\"\n    (change)=\"change($event)\"\n    (input)=\"input($event)\"\n  />\n  <div\n    class=\"src-slider__filled-track\"\n    [style.width]=\"calculateFilledWidth()\"\n  ></div>\n\n  <div class=\"src-slider__thumb\" [style.left]=\"calculateThumbPosition()\">\n    <ng-content select=\"[srcIconThumb]\"></ng-content>\n  </div>\n\n  @if (showTicks) {\n    <div class=\"src-slider__ticks-container\">\n      @for (tick of tickPositions; track tick) {\n        <div class=\"tick\" [style.left]=\"tick\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".src-slider{position:relative;--srcSliderThumbBackground: #fff;--srcSliderThumbShadow: 0 0 0 2px #abb2be, 0 2px 0 2px #e6e7e7, 0 0 0 4px #fff;--srcSliderThumbIconColor: var(--src-color-icon-default);--srcSliderClickableTrackHeight: var(--srcSliderThumbSize);--srcSliderTrackShape: 0px;--srcSliderTrackBg: var(--src-color-border-default, #e5e7eb);--srcSliderTrackFilledBg: transparent;--srcSliderTickBg: var(--src-color-border-default, #e5e7eb);--srcSliderTickWidth: 2px;--srcSliderTickHeight: 10px;--srcSliderTickShape: 50%;display:flex;align-items:center}.src-slider--disabled{pointer-events:none;--srcSliderThumbShadow: 0 0 0 2px #d1d5db, 0 0 0 4px #fff;--srcSliderTrackBg: #f1f2f3}.src-slider:hover{--srcSliderThumbShadow: 0 0 0 2px #6b7280, 0 2px 0 2px #e6e7e7, 0 0 0 4px #fff}.src-slider input.src-slider__input{width:100%;height:var(--srcSliderClickableTrackHeight);appearance:none;background:transparent;cursor:pointer}.src-slider input.src-slider__input::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;border:0;background:transparent}.src-slider input.src-slider__input::-moz-range-thumb{width:0;height:0;border:0;background:transparent}.src-slider input.src-slider__input::-webkit-slider-runnable-track{width:100%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackBg);border-radius:var(--srcSliderTrackShape)}.src-slider input.src-slider__input::-moz-range-track{width:100%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackBg);border-radius:var(--srcSliderTrackShape)}.src-slider input.src-slider__input::-ms-fill-lower{background:var(--srcSliderTrackFilledBg);border-radius:var(--srcSliderTrackShape)}.src-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--srcSliderThumbBackground);transform:translate(-50%,-50%);width:var(--srcSliderThumbSize);height:var(--srcSliderThumbSize);pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--srcSliderThumbIconColor);cursor:pointer;box-shadow:var(--srcSliderThumbShadow);z-index:1;transition:all .35s ease}.src-slider__thumb>[srcIconThumb]{width:100%;height:100%;object-fit:contain;pointer-events:none}.src-slider__filled-track{position:absolute;top:50%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackFilledBg);border-radius:var(--srcSliderTrackShape);left:0;transform:translateY(-50%);pointer-events:none}.src-slider__ticks-container{width:100%;position:absolute;top:50%;height:0}.src-slider__ticks-container .tick{width:var(--srcSliderTickWidth);height:var(--srcSliderTickHeight);transform:translate(-50%,-50%);position:absolute;background:var(--srcSliderTickBg);border-radius:var(--srcSliderTickShape);top:0;pointer-events:none}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], thumbSize: [{
-                type: Input
-            }], trackHeight: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], showTicks: [{
-                type: Input
-            }], isDisabled: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], onChange: [{
-                type: Output
-            }], onInput: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'src-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"src-slider\"\n  [style.--srcSliderThumbSize.px]=\"thumbSize()\"\n  [style.--srcSliderTrackHeight.px]=\"trackHeight()\"\n  [class.src-slider--disabled]=\"isDisabled()\"\n  [class.src-slider--vertical]=\"orientation() === 'vertical'\"\n  [attr.data-testid]=\"testID()\"\n>\n  <input\n    type=\"range\"\n    class=\"src-slider__input\"\n    [id]=\"id()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [step]=\"step()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"sliderValue()\"\n    [attr.data-testid]=\"testID() + '-input'\"\n    (change)=\"change($event)\"\n    (input)=\"input($event)\"\n  />\n  <div class=\"src-slider__filled-track\" [style.width]=\"filledWidth()\"></div>\n\n  <div class=\"src-slider__thumb\" [style.left]=\"thumbPosition()\">\n    <ng-content select=\"[srcIconThumb]\"></ng-content>\n  </div>\n\n  @if (showTicks()) {\n    <div class=\"src-slider__ticks-container\">\n      @for (tick of tickPositions(); track tick) {\n        <div class=\"tick\" [style.left]=\"tick\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".src-slider{position:relative;--srcSliderThumbBackground: #fff;--srcSliderThumbShadow: 0 0 0 2px #abb2be, 0 2px 0 2px #e6e7e7, 0 0 0 4px #fff;--srcSliderThumbIconColor: var(--src-color-icon-default);--srcSliderClickableTrackHeight: var(--srcSliderThumbSize);--srcSliderTrackShape: 0px;--srcSliderTrackBg: var(--src-color-border-default, #e5e7eb);--srcSliderTrackFilledBg: transparent;--srcSliderTickBg: var(--src-color-border-default, #e5e7eb);--srcSliderTickWidth: 2px;--srcSliderTickHeight: 10px;--srcSliderTickShape: 50%;display:flex;align-items:center}.src-slider--disabled{pointer-events:none;--srcSliderThumbShadow: 0 0 0 2px #d1d5db, 0 0 0 4px #fff;--srcSliderTrackBg: #f1f2f3}.src-slider:hover{--srcSliderThumbShadow: 0 0 0 2px #6b7280, 0 2px 0 2px #e6e7e7, 0 0 0 4px #fff}.src-slider input.src-slider__input{width:100%;height:var(--srcSliderClickableTrackHeight);appearance:none;background:transparent;cursor:pointer}.src-slider input.src-slider__input::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;border:0;background:transparent}.src-slider input.src-slider__input::-moz-range-thumb{width:0;height:0;border:0;background:transparent}.src-slider input.src-slider__input::-webkit-slider-runnable-track{width:100%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackBg);border-radius:var(--srcSliderTrackShape)}.src-slider input.src-slider__input::-moz-range-track{width:100%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackBg);border-radius:var(--srcSliderTrackShape)}.src-slider input.src-slider__input::-ms-fill-lower{background:var(--srcSliderTrackFilledBg);border-radius:var(--srcSliderTrackShape)}.src-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--srcSliderThumbBackground);transform:translate(-50%,-50%);width:var(--srcSliderThumbSize);height:var(--srcSliderThumbSize);pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--srcSliderThumbIconColor);cursor:pointer;box-shadow:var(--srcSliderThumbShadow);z-index:1;transition:all .35s ease}.src-slider__thumb>[srcIconThumb]{width:100%;height:100%;object-fit:contain;pointer-events:none}.src-slider__filled-track{position:absolute;top:50%;height:var(--srcSliderTrackHeight);background:var(--srcSliderTrackFilledBg);border-radius:var(--srcSliderTrackShape);left:0;transform:translateY(-50%);pointer-events:none}.src-slider__ticks-container{width:100%;position:absolute;top:50%;height:0}.src-slider__ticks-container .tick{width:var(--srcSliderTickWidth);height:var(--srcSliderTickHeight);transform:translate(-50%,-50%);position:absolute;background:var(--srcSliderTickBg);border-radius:var(--srcSliderTickShape);top:0;pointer-events:none}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.