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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/fesm2022/3dsource-source-ui-native.mjs +196 -463
  2. package/fesm2022/3dsource-source-ui-native.mjs.map +1 -1
  3. package/lib/components/source-badge/components/source-badge.component.d.ts +12 -23
  4. package/lib/components/source-badge/constants/sourceBadgeSize.d.ts +1 -1
  5. package/lib/components/source-badge/constants/sourceBadgeType.d.ts +1 -1
  6. package/lib/components/source-banner/components/source-banner.component.d.ts +2 -2
  7. package/lib/components/source-banner/constants/sourceBannerType.d.ts +1 -1
  8. package/lib/components/source-button/components/source-button.component.d.ts +20 -77
  9. package/lib/components/source-button/constants/sourceButtonAppearance.d.ts +1 -1
  10. package/lib/components/source-button/constants/sourceButtonColorScheme.d.ts +1 -1
  11. package/lib/components/source-button/constants/sourceButtonSize.d.ts +1 -1
  12. package/lib/components/source-button/constants/sourceButtonType.d.ts +1 -1
  13. package/lib/components/source-button/interfaces/sourceButton.interface.d.ts +5 -6
  14. package/lib/components/source-icon-button/components/source-icon-button.component.d.ts +8 -31
  15. package/lib/components/source-icon-button/constants/sourceIconButtonShape.d.ts +1 -1
  16. package/lib/components/source-icon-button/constants/sourceIconButtonSize.d.ts +1 -1
  17. package/lib/components/source-icon-button/constants/sourceIconButtonType.d.ts +1 -1
  18. package/lib/components/source-loading/components/source-loading.component.d.ts +13 -32
  19. package/lib/components/source-loading/constants/sourceLoadingLineCap.d.ts +1 -1
  20. package/lib/components/source-slider/components/source-slider.component.d.ts +18 -56
  21. package/package.json +1 -1
  22. /package/styles/{source.ui.scss → source.ui.native.scss} +0 -0
package/fesm2022/3dsource-source-ui-native.mjs CHANGED
@@ -1,7 +1,39 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, Output } from '@angular/core';
2
+ import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, output, linkedSignal } from '@angular/core';
3
3
  import { NgStyle, NgClass } from '@angular/common';
4
4
 
5
+ class SourceBadgeComponent {
6
+ constructor() {
7
+ this.number = input(0);
8
+ this.backgroundColor = input('var(--src-color-icon-critical, #B91C1C)');
9
+ this.type = input();
10
+ this.size = input('default');
11
+ this.borderColor = input('var(--src-color-bg-default, #FFFFFF)');
12
+ this.borderWidth = input('2px');
13
+ this.textColor = input('var(--src-color-text-inverse, #FFFFFF)');
14
+ this.customClass = input();
15
+ this.testID = input('', { alias: 'data-testid' });
16
+ this.classes = computed(() => {
17
+ const type = this.type();
18
+ const size = this.size();
19
+ const customClass = this.customClass();
20
+ return [
21
+ type ? `src-badge--${type}` : '',
22
+ size && !type ? `src-badge--${size}` : '',
23
+ customClass && Array.isArray(customClass)
24
+ ? [...customClass]
25
+ : (customClass ?? ''),
26
+ ];
27
+ });
28
+ }
29
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
30
+ 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 }); }
31
+ }
32
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBadgeComponent, decorators: [{
33
+ type: Component,
34
+ 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"] }]
35
+ }] });
36
+
5
37
  const SourceBadgeType = {
6
38
  NEUTRAL: 'neutral',
7
39
  INFORMATIONAL: 'informational',
@@ -17,63 +49,19 @@ const SourceBadgeSize = {
17
49
  LARGE: 'large',
18
50
  };
19
51
 
20
- class SourceBadgeComponent {
52
+ class SourceBannerComponent {
21
53
  constructor() {
22
- this.number = 0;
23
- this.backgroundColor = 'var(--src-color-icon-critical, #B91C1C)';
24
- this.type = null;
25
- this.size = SourceBadgeSize.DEFAULT;
26
- /**
27
- * 2 px border around the badge to increase visibility.
28
- */
29
- this.borderColor = 'var(--src-color-bg-default, #FFFFFF)';
30
- /**
31
- * 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.
32
- * */
33
- this.borderWidth = '2px';
34
- this.textColor = 'var(--src-color-text-inverse, #FFFFFF)';
54
+ this.type = input('default');
55
+ this.isCompact = input(false);
35
56
  this.testID = input('', { alias: 'data-testid' });
36
- this.classes = [];
37
57
  }
38
- ngOnInit() {
39
- this.classes = [
40
- this.type ? `src-badge--${this.type}` : '',
41
- this.size && !this.type ? `src-badge--${this.size}` : '',
42
- ];
43
- if (this.customClass) {
44
- if (Array.isArray(this.customClass)) {
45
- this.classes.forEach((customClass) => {
46
- this.classes.push(customClass);
47
- });
48
- }
49
- else {
50
- this.classes.push(this.customClass);
51
- }
52
- }
53
- }
54
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
55
- 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 }); }
58
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
59
+ 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 }); }
56
60
  }
57
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBadgeComponent, decorators: [{
61
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBannerComponent, decorators: [{
58
62
  type: Component,
59
- 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"] }]
60
- }], propDecorators: { number: [{
61
- type: Input
62
- }], backgroundColor: [{
63
- type: Input
64
- }], type: [{
65
- type: Input
66
- }], size: [{
67
- type: Input
68
- }], customClass: [{
69
- type: Input
70
- }], borderColor: [{
71
- type: Input
72
- }], borderWidth: [{
73
- type: Input
74
- }], textColor: [{
75
- type: Input
76
- }] } });
63
+ 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"] }]
64
+ }] });
77
65
 
78
66
  const SourceBannerType = {
79
67
  DEFAULT: 'default',
@@ -83,20 +71,6 @@ const SourceBannerType = {
83
71
  CRITICAL: 'critical',
84
72
  };
85
73
 
86
- class SourceBannerComponent {
87
- constructor() {
88
- this.type = input(SourceBannerType.DEFAULT);
89
- this.isCompact = input(false);
90
- this.testID = input('', { alias: 'data-testid' });
91
- }
92
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
93
- 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 }); }
94
- }
95
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBannerComponent, decorators: [{
96
- type: Component,
97
- 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"] }]
98
- }] });
99
-
100
74
  const SourceButtonColorScheme = {
101
75
  PRIMARY: 'primary',
102
76
  SECONDARY: 'secondary',
@@ -130,7 +104,6 @@ const defaultSourceButtonConfig = {
130
104
  hasDisclosure: false,
131
105
  isFullWidth: false,
132
106
  icon: undefined,
133
- iconPrefix: false,
134
107
  iconButton: false,
135
108
  isPressed: false,
136
109
  isDisabled: false,
@@ -139,237 +112,84 @@ const defaultSourceButtonConfig = {
139
112
  testID: undefined,
140
113
  };
141
114
 
142
- const SourceLoadingLineCap = {
143
- ROUND: 'round',
144
- SQUARE: 'square',
145
- BUTT: 'butt',
146
- };
147
-
148
115
  class SourceLoadingComponent {
149
116
  constructor() {
150
- /**
151
- * Size of the loading circle
152
- */
153
- this.size = 32;
154
- /**
155
- * If it just an animated circle or circular progressbar
156
- */
157
- this.progress = null;
158
- /**
159
- * The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
160
- */
161
- this.lineCap = SourceLoadingLineCap.ROUND;
162
- /**
163
- * Color of the strokes
164
- */
165
- this.backgroundStrokeColor = 'transparent';
166
- this.progressStrokeColor = 'var(--src-color-brand-500, #017BFF)';
167
- /**
168
- * Width of the line
169
- */
170
- this.strokeWidth = 3;
171
- /**
172
- * Test ID for the component. Provide descriptive uniq id in kebab-case.
173
- */
117
+ this.size = input(32);
118
+ this.progress = input(null);
119
+ this.lineCap = input('round');
120
+ this.backgroundStrokeColor = input('transparent');
121
+ this.progressStrokeColor = input('var(--src-color-brand-500, #017BFF)');
122
+ this.strokeWidth = input(3);
174
123
  this.testID = input('', { alias: 'data-testid' });
175
- this.compiledClassesList = [];
176
- }
177
- get classes() {
178
- this.compiledClassesList = [];
179
- if (this.progress !== null) {
180
- this.compiledClassesList.push(`src-loading--progress`);
181
- }
182
- else {
183
- this.compiledClassesList.push(`src-loading--animation`);
184
- }
185
- return this.compiledClassesList;
186
- }
187
- calculateRadius() {
188
- return this.size / 2 - this.strokeWidth / 2;
189
- }
190
- getCircumference() {
191
- return 2 * Math.PI * this.calculateRadius();
192
- }
193
- getViewBox() {
194
- return `0 0 ${this.size} ${this.size}`;
195
- }
196
- getPercentage() {
197
- return Math.round(this.getCircumference() * ((100 - this.progress) / 100));
124
+ this.classes = computed(() => [
125
+ this.progress() !== null
126
+ ? 'src-loading--progress'
127
+ : 'src-loading--animation',
128
+ ]);
129
+ this.calculateRadius = computed(() => this.size() / 2 - this.strokeWidth() / 2);
130
+ this.circumference = computed(() => 2 * Math.PI * this.calculateRadius());
131
+ this.viewBox = computed(() => `0 0 ${this.size()} ${this.size()}`);
132
+ this.percentage = computed(() => Math.round((this.circumference() * (100 - (this.progress() ?? 0))) / 100));
198
133
  }
199
134
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
200
- 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 }); }
135
+ 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 }); }
201
136
  }
202
137
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceLoadingComponent, decorators: [{
203
138
  type: Component,
204
- 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"] }]
205
- }], propDecorators: { size: [{
206
- type: Input
207
- }], progress: [{
208
- type: Input
209
- }], lineCap: [{
210
- type: Input
211
- }], backgroundStrokeColor: [{
212
- type: Input
213
- }], progressStrokeColor: [{
214
- type: Input
215
- }], strokeWidth: [{
216
- type: Input
217
- }] } });
139
+ 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"] }]
140
+ }] });
218
141
 
219
142
  class SourceButtonComponent {
220
143
  constructor() {
221
- /**
222
- * Type of button
223
- */
224
- this.type = SourceButtonType.BUTTON;
225
- /**
226
- * Is this the principal call to action on the page?
227
- */
228
- this.appearance = SourceButtonAppearance.DEFAULT;
229
- /**
230
- * Is this the principal call to action on the page?
231
- */
232
- this.colorScheme = SourceButtonColorScheme.SECONDARY;
233
- /**
234
- * How big it should be?
235
- */
236
- this.size = SourceButtonSize.MEDIUM;
237
- /**
238
- * Is this button a trigger for some kind of menu?
239
- */
240
- this.hasDisclosure = false;
241
- /**
242
- * Is this button should fill all available width of the container?
243
- */
244
- this.isFullWidth = false;
245
- /**
246
- * Is this button having icon before label?
247
- */
248
- this.iconPrefix = false;
249
- /**
250
- * Square button with only icon inside
251
- */
252
- this.iconButton = false;
253
- /**
254
- * Pressed state for button
255
- */
256
- this.isPressed = false;
257
- /**
258
- * Standard disabled state for button
259
- */
260
- this.isDisabled = false;
261
- /**
262
- * Set true if your button has a show loading process after pressing
263
- */
264
- this.isLoading = false;
265
- /**
266
- * Test ID for the component. Provide descriptive uniq id in kebab-case.
267
- */
144
+ this.type = input('button');
145
+ this.appearance = input('default');
146
+ this.colorScheme = input('secondary');
147
+ this.size = input('medium');
148
+ this.customClass = input();
149
+ this.hasDisclosure = input(false);
150
+ this.isFullWidth = input(false);
151
+ this.isPressed = input(false);
152
+ this.isDisabled = input(false);
153
+ this.isLoading = input(false);
154
+ this.iconButton = input(false);
155
+ this.icon = input();
156
+ this.formID = input();
157
+ this.srcButtonConfig = input();
268
158
  this.testID = input('', { alias: 'data-testid' });
269
- /**
270
- * Optional click handler
271
- */
272
- this.onClick = new EventEmitter();
273
- /**
274
- * Optional submit handler
275
- */
276
- this.onSubmit = new EventEmitter();
277
- this.compiledClassesList = [];
278
159
  this.defaultConfig = defaultSourceButtonConfig;
279
- }
280
- get classes() {
281
- // Reset the compiledClassesList
282
- this.compiledClassesList = [];
283
- const config = {
284
- type: this.type,
285
- appearance: this.appearance,
286
- colorScheme: this.colorScheme,
287
- size: this.size,
288
- customClass: this.customClass,
289
- hasDisclosure: this.hasDisclosure,
290
- isFullWidth: this.isFullWidth,
291
- icon: this.icon,
292
- iconPrefix: this.iconPrefix,
293
- iconButton: this.iconButton,
294
- isPressed: this.isPressed,
295
- isDisabled: this.isDisabled,
296
- isLoading: this.isLoading,
297
- testID: this.testID(),
298
- };
299
- // Find a new overridden config object depending on the presence of srcButtonConfig
300
- let updatedConfig;
301
- if (this.srcButtonConfig) {
302
- updatedConfig = this.getUpdatedConfig(this.srcButtonConfig);
303
- }
304
- else {
305
- updatedConfig = this.getUpdatedConfig(config);
306
- }
307
- if (updatedConfig.type) {
308
- this.type = updatedConfig.type;
309
- }
310
- if (updatedConfig.formID) {
311
- this.formID = updatedConfig.formID;
312
- }
313
- if (updatedConfig.icon) {
314
- this.icon = updatedConfig.icon;
315
- }
316
- if (updatedConfig.appearance) {
317
- this.compiledClassesList.push(`src-button--${updatedConfig.appearance}`);
318
- }
319
- if (updatedConfig.colorScheme) {
320
- this.compiledClassesList.push(`src-button--${updatedConfig.colorScheme}`);
321
- }
322
- if (updatedConfig.size) {
323
- this.compiledClassesList.push(`src-button--${updatedConfig.size}`);
324
- }
325
- if (updatedConfig.hasDisclosure) {
326
- this.compiledClassesList.push(`src-button--disclosure`);
327
- }
328
- if (updatedConfig.isPressed) {
329
- this.compiledClassesList.push(`src-button--pressed`);
330
- }
331
- if (updatedConfig.isFullWidth) {
332
- this.compiledClassesList.push(`src-button--full-width`);
333
- }
334
- if (updatedConfig.iconPrefix) {
335
- this.compiledClassesList.push(`src-button--icon-prefix`);
336
- }
337
- if (updatedConfig.iconButton) {
338
- this.compiledClassesList.push(`src-button--icon-button`);
339
- }
340
- if (updatedConfig.isLoading) {
341
- this.compiledClassesList.push(`src-button--loading`);
342
- }
343
- if (updatedConfig.customClass) {
344
- if (Array.isArray(updatedConfig.customClass)) {
345
- updatedConfig.customClass.forEach((customClass) => {
346
- this.compiledClassesList.push(customClass);
347
- });
348
- }
349
- else {
350
- this.compiledClassesList.push(updatedConfig.customClass);
351
- }
352
- }
353
- return this.compiledClassesList;
354
- }
355
- getUpdatedConfig(config) {
356
- return {
357
- type: config.type || this.defaultConfig.type,
358
- appearance: config.appearance || this.defaultConfig.appearance,
359
- colorScheme: config.colorScheme || this.defaultConfig.colorScheme,
360
- size: config.size || this.defaultConfig.size,
361
- customClass: config.customClass || this.defaultConfig.customClass,
362
- hasDisclosure: config.hasDisclosure || this.defaultConfig.hasDisclosure,
363
- isFullWidth: config.isFullWidth || this.defaultConfig.isFullWidth,
364
- icon: config.icon || this.defaultConfig.icon,
365
- iconPrefix: config.iconPrefix || this.defaultConfig.iconPrefix,
366
- iconButton: config.iconButton || this.defaultConfig.iconButton,
367
- isPressed: config.isPressed || this.defaultConfig.isPressed,
368
- isDisabled: config.isDisabled || this.defaultConfig.isDisabled,
369
- isLoading: config.isLoading || this.defaultConfig.isLoading,
370
- formID: config.formID || this.defaultConfig.formID,
371
- testID: config.testID || this.defaultConfig.testID,
372
- };
160
+ this.onClick = output();
161
+ this.onSubmit = output();
162
+ this.classes = computed(() => {
163
+ const config = this.getConfig(this.srcButtonConfig() ?? {
164
+ type: this.type(),
165
+ appearance: this.appearance(),
166
+ colorScheme: this.colorScheme(),
167
+ size: this.size(),
168
+ customClass: this.customClass(),
169
+ hasDisclosure: this.hasDisclosure(),
170
+ isFullWidth: this.isFullWidth(),
171
+ icon: this.icon(),
172
+ formID: this.formID(),
173
+ iconButton: this.iconButton(),
174
+ isPressed: this.isPressed(),
175
+ isDisabled: this.isDisabled(),
176
+ isLoading: this.isLoading(),
177
+ testID: this.testID(),
178
+ });
179
+ return [
180
+ config.appearance ? `src-button--${config.appearance}` : '',
181
+ config.colorScheme ? `src-button--${config.colorScheme}` : '',
182
+ config.size ? `src-button--${config.size}` : '',
183
+ config.hasDisclosure ? 'src-button--disclosure' : '',
184
+ config.isPressed ? 'src-button--icon-pressed' : '',
185
+ config.isFullWidth ? 'src-button--full-width' : '',
186
+ config.iconButton ? 'src-button--icon-button' : '',
187
+ config.isLoading ? 'src-button--loading' : '',
188
+ config.customClass && Array.isArray(config.customClass)
189
+ ? [...config.customClass]
190
+ : (config.customClass ?? ''),
191
+ ].filter(Boolean);
192
+ });
373
193
  }
374
194
  handleClick(event) {
375
195
  this.onClick.emit(event);
@@ -377,47 +197,31 @@ class SourceButtonComponent {
377
197
  handleSubmit(event) {
378
198
  this.onSubmit.emit(event);
379
199
  }
200
+ getConfig(config) {
201
+ return {
202
+ type: config?.type || this.defaultConfig.type,
203
+ appearance: config?.appearance || this.defaultConfig.appearance,
204
+ colorScheme: config?.colorScheme || this.defaultConfig.colorScheme,
205
+ size: config?.size || this.defaultConfig.size,
206
+ customClass: config?.customClass || this.defaultConfig.customClass,
207
+ hasDisclosure: config?.hasDisclosure || this.defaultConfig.hasDisclosure,
208
+ isFullWidth: config?.isFullWidth || this.defaultConfig.isFullWidth,
209
+ icon: config?.icon || this.defaultConfig.icon,
210
+ iconButton: config?.iconButton || this.defaultConfig.iconButton,
211
+ isPressed: config?.isPressed || this.defaultConfig.isPressed,
212
+ isDisabled: config?.isDisabled || this.defaultConfig.isDisabled,
213
+ isLoading: config?.isLoading || this.defaultConfig.isLoading,
214
+ formID: config?.formID || this.defaultConfig.formID,
215
+ testID: config?.testID || this.defaultConfig.testID,
216
+ };
217
+ }
380
218
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
381
- 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 }); }
219
+ 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 }); }
382
220
  }
383
221
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceButtonComponent, decorators: [{
384
222
  type: Component,
385
- 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"] }]
386
- }], propDecorators: { type: [{
387
- type: Input
388
- }], appearance: [{
389
- type: Input
390
- }], colorScheme: [{
391
- type: Input
392
- }], size: [{
393
- type: Input
394
- }], customClass: [{
395
- type: Input
396
- }], hasDisclosure: [{
397
- type: Input
398
- }], isFullWidth: [{
399
- type: Input
400
- }], iconPrefix: [{
401
- type: Input
402
- }], iconButton: [{
403
- type: Input
404
- }], icon: [{
405
- type: Input
406
- }], isPressed: [{
407
- type: Input
408
- }], isDisabled: [{
409
- type: Input
410
- }], isLoading: [{
411
- type: Input
412
- }], formID: [{
413
- type: Input
414
- }], srcButtonConfig: [{
415
- type: Input
416
- }], onClick: [{
417
- type: Output
418
- }], onSubmit: [{
419
- type: Output
420
- }] } });
223
+ 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"] }]
224
+ }] });
421
225
 
422
226
  class SourceCopyrightComponent {
423
227
  constructor() {
@@ -458,65 +262,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
458
262
  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"] }]
459
263
  }] });
460
264
 
461
- const SourceIconButtonSize = {
462
- XSMALL: 'xs',
463
- SMALL: 'sm',
464
- MEDIUM: 'md',
465
- LARGE: 'lg',
466
- DEFAULT: 'default',
467
- };
468
-
469
- const SourceIconButtonType = {
470
- BUTTON: 'button',
471
- SUBMIT: 'submit',
472
- RESET: 'reset',
473
- };
474
-
475
- const SourceIconButtonShape = {
476
- SQUARE: 'square',
477
- ROUND: 'round',
478
- };
479
-
480
265
  class SourceIconButtonComponent {
481
266
  constructor() {
482
- this.type = input(SourceIconButtonType.BUTTON);
483
- this.name = input(undefined);
484
- /**
485
- * How big should it be?
486
- */
487
- this.size = input(SourceIconButtonSize.DEFAULT);
488
- /**
489
- * Shape of a button
490
- */
491
- this.shape = input(SourceIconButtonShape.SQUARE);
492
- /**
493
- * Use counter-attribute to display the counter in the top right corner of the button.
494
- */
267
+ this.name = input();
268
+ this.type = input('button');
269
+ this.size = input('default');
270
+ this.shape = input('square');
495
271
  this.counter = input(undefined);
496
- /**
497
- * Standard active state for the button
498
- */
499
272
  this.isActive = input(false);
500
- /**
501
- * Standard disabled state for button
502
- */
503
273
  this.isDisabled = input(false);
504
- /**
505
- * Test ID for the component. Provide descriptive uniq id in kebab-case.
506
- */
507
274
  this.testID = input('', { alias: 'data-testid' });
508
- /**
509
- * Optional click handler
510
- */
511
- this.onClick = new EventEmitter();
512
- this.compiledClassesList = [];
513
- }
514
- get classes() {
515
- this.compiledClassesList = [];
516
- this.compiledClassesList.push(`src-icon-button--${this.shape()}`);
517
- this.compiledClassesList.push(`src-icon-button--${this.size()}`);
518
- this.compiledClassesList.push(this.isActive() ? 'src-icon-button--active' : '');
519
- return this.compiledClassesList;
275
+ this.onClick = output();
276
+ this.classes = computed(() => [
277
+ `src-icon-button--${this.shape()}`,
278
+ `src-icon-button--${this.size()}`,
279
+ this.isActive() ? 'src-icon-button--active' : '',
280
+ ].filter(Boolean));
520
281
  }
521
282
  handleClick(event) {
522
283
  event.preventDefault();
@@ -526,14 +287,31 @@ class SourceIconButtonComponent {
526
287
  this.onClick.emit(event);
527
288
  }
528
289
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
529
- 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 }); }
290
+ 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 }); }
530
291
  }
531
292
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceIconButtonComponent, decorators: [{
532
293
  type: Component,
533
- 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"] }]
534
- }], propDecorators: { onClick: [{
535
- type: Output
536
- }] } });
294
+ 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"] }]
295
+ }] });
296
+
297
+ const SourceIconButtonSize = {
298
+ XSMALL: 'xs',
299
+ SMALL: 'sm',
300
+ MEDIUM: 'md',
301
+ LARGE: 'lg',
302
+ DEFAULT: 'default',
303
+ };
304
+
305
+ const SourceIconButtonType = {
306
+ BUTTON: 'button',
307
+ SUBMIT: 'submit',
308
+ RESET: 'reset',
309
+ };
310
+
311
+ const SourceIconButtonShape = {
312
+ SQUARE: 'square',
313
+ ROUND: 'round',
314
+ };
537
315
 
538
316
  class SourceLogoLoadingComponent {
539
317
  constructor() {
@@ -551,45 +329,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
551
329
 
552
330
  class SourceSliderComponent {
553
331
  constructor() {
554
- /**
555
- * The size of the thumb
556
- */
557
- this.thumbSize = 12;
558
- /**
559
- * The height of the visual track. Height of the input won't be affected
560
- */
561
- this.trackHeight = 2;
562
- /**
563
- * The step length of the slider
564
- */
565
- this.step = 1;
566
- /**
567
- * Whether to show the ticks on each step
568
- */
569
- this.showTicks = false;
570
- /**
571
- * If slider is disabled
572
- */
573
- this.isDisabled = false;
574
- /**
575
- * Slider orientation - WIP
576
- */
577
- this.orientation = 'horizontal';
578
- this.tickPositions = [];
579
- /**
580
- * Test ID for the component. Provide descriptive uniq id in kebab-case.
581
- */
332
+ this.id = input();
333
+ this.value = input.required();
334
+ this.sliderValue = linkedSignal(() => this.value());
335
+ this.min = input.required();
336
+ this.max = input.required();
337
+ this.thumbSize = input(12);
338
+ this.trackHeight = input(2);
339
+ this.step = input(1);
340
+ this.showTicks = input(false);
341
+ this.isDisabled = input(false);
342
+ this.orientation = input('horizontal');
582
343
  this.testID = input('', { alias: 'data-testid' });
583
- /**
584
- * Emits the value of the slider when it changes
585
- */
586
- this.onChange = new EventEmitter();
587
- this.onInput = new EventEmitter();
588
- }
589
- ngAfterViewInit() {
590
- if (this.showTicks) {
591
- this.calculateTickPositions();
592
- }
344
+ this.onChange = output();
345
+ this.onInput = output();
346
+ this.tickPositions = computed(() => {
347
+ if (this.showTicks()) {
348
+ const numberOfTicks = (this.max() - this.min()) / this.step();
349
+ return Array.from({ length: numberOfTicks + 1 }, (_, index) => {
350
+ const percent = (index / numberOfTicks) * 100;
351
+ return isNaN(percent) ? '0%' : `${percent}%`;
352
+ });
353
+ }
354
+ return [];
355
+ });
356
+ this.thumbPosition = computed(() => {
357
+ const percent = ((this.value() - this.min()) * 100) / (this.max() - this.min());
358
+ return isNaN(percent) ? '0%' : `${percent}%`;
359
+ });
360
+ this.filledWidth = computed(() => {
361
+ const percent = ((this.value() - this.min()) / (this.max() - this.min())) * 100;
362
+ return isNaN(percent) ? '0%' : `${percent}%`;
363
+ });
593
364
  }
594
365
  input(valueEvent) {
595
366
  if (valueEvent.target instanceof HTMLInputElement) {
@@ -601,58 +372,20 @@ class SourceSliderComponent {
601
372
  this.onChange.emit(this.getValue(valueEvent.target));
602
373
  }
603
374
  }
604
- calculateThumbPosition() {
605
- const percent = ((this.value - this.min) * 100) / (this.max - this.min);
606
- return isNaN(percent) ? '0%' : `${percent}%`;
607
- }
608
- calculateFilledWidth() {
609
- const percent = ((this.value - this.min) / (this.max - this.min)) * 100;
610
- return isNaN(percent) ? '0%' : `${percent}%`;
611
- }
612
375
  getValue(value) {
613
376
  const newValue = value.valueAsNumber;
614
- const steppedValue = Math.round(newValue / this.step) * this.step;
615
- this.value = Math.min(Math.max(steppedValue, this.min), this.max);
377
+ const steppedValue = Math.round(newValue / this.step()) * this.step();
378
+ const calculateValue = Math.min(Math.max(steppedValue, this.min()), this.max());
379
+ this.sliderValue.set(calculateValue);
616
380
  return newValue;
617
381
  }
618
- calculateTickPositions() {
619
- const numberOfTicks = (this.max - this.min) / this.step;
620
- this.tickPositions = Array.from({ length: numberOfTicks + 1 }, (_, index) => {
621
- const percent = (index / numberOfTicks) * 100;
622
- return isNaN(percent) ? '0%' : `${percent}%`;
623
- });
624
- }
625
382
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
626
- 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 }); }
383
+ 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 }); }
627
384
  }
628
385
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceSliderComponent, decorators: [{
629
386
  type: Component,
630
- 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"] }]
631
- }], propDecorators: { id: [{
632
- type: Input
633
- }], min: [{
634
- type: Input
635
- }], max: [{
636
- type: Input
637
- }], thumbSize: [{
638
- type: Input
639
- }], trackHeight: [{
640
- type: Input
641
- }], step: [{
642
- type: Input
643
- }], showTicks: [{
644
- type: Input
645
- }], isDisabled: [{
646
- type: Input
647
- }], orientation: [{
648
- type: Input
649
- }], value: [{
650
- type: Input
651
- }], onChange: [{
652
- type: Output
653
- }], onInput: [{
654
- type: Output
655
- }] } });
387
+ 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"] }]
388
+ }] });
656
389
 
657
390
  /**
658
391
  * Generated bundle index. Do not edit.