@3dsource/source-ui-native 0.0.1 → 1.0.0
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.
- package/fesm2022/3dsource-source-ui-native.mjs +662 -0
- package/fesm2022/3dsource-source-ui-native.mjs.map +1 -0
- package/index.d.ts +5 -0
- package/lib/components/source-badge/components/source-badge.component.d.ts +27 -0
- package/lib/components/source-badge/constants/sourceBadgeSize.d.ts +6 -0
- package/lib/components/source-badge/constants/sourceBadgeType.d.ts +9 -0
- package/lib/components/source-banner/components/source-banner.component.d.ts +9 -0
- package/lib/components/source-banner/constants/sourceBannerType.d.ts +8 -0
- package/lib/components/source-button/components/source-button.component.d.ts +86 -0
- package/lib/components/source-button/constants/sourceButtonAppearance.d.ts +5 -0
- package/lib/components/source-button/constants/sourceButtonColorScheme.d.ts +6 -0
- package/lib/components/source-button/constants/sourceButtonSize.d.ts +7 -0
- package/lib/components/source-button/constants/sourceButtonType.d.ts +6 -0
- package/lib/components/source-button/interfaces/defaultSourceButton.config.d.ts +2 -0
- package/lib/components/source-button/interfaces/sourceButton.interface.d.ts +19 -0
- package/lib/components/source-copyright/components/source-copyright.component.d.ts +7 -0
- package/lib/components/source-divider/components/source-divider.component.d.ts +7 -0
- package/lib/components/source-hint/components/source-hint.component.d.ts +7 -0
- package/lib/components/source-icon-button/components/source-icon-button.component.d.ts +40 -0
- package/lib/components/source-icon-button/constants/sourceIconButtonShape.d.ts +5 -0
- package/lib/components/source-icon-button/constants/sourceIconButtonSize.d.ts +8 -0
- package/lib/components/source-icon-button/constants/sourceIconButtonType.d.ts +6 -0
- package/lib/components/source-loading/components/source-loading.component.d.ts +37 -0
- package/lib/components/source-loading/constants/sourceLoadingLineCap.d.ts +6 -0
- package/lib/components/source-logo-loading/components/source-logo-loading.component.d.ts +8 -0
- package/lib/components/source-slider/components/source-slider.component.d.ts +63 -0
- package/package.json +13 -2
- package/eslint.config.js +0 -37
- package/ng-package.json +0 -7
- package/src/lib/components/source-badge/components/source-badge.component.html +0 -20
- package/src/lib/components/source-badge/components/source-badge.component.scss +0 -76
- package/src/lib/components/source-badge/components/source-badge.component.ts +0 -62
- package/src/lib/components/source-badge/constants/sourceBadgeSize.ts +0 -8
- package/src/lib/components/source-badge/constants/sourceBadgeType.ts +0 -11
- package/src/lib/components/source-banner/components/source-banner.component.html +0 -10
- package/src/lib/components/source-banner/components/source-banner.component.scss +0 -75
- package/src/lib/components/source-banner/components/source-banner.component.ts +0 -25
- package/src/lib/components/source-banner/constants/sourceBannerType.ts +0 -10
- package/src/lib/components/source-button/components/source-button.component.html +0 -44
- package/src/lib/components/source-button/components/source-button.component.scss +0 -355
- package/src/lib/components/source-button/components/source-button.component.ts +0 -220
- package/src/lib/components/source-button/constants/sourceButtonAppearance.ts +0 -7
- package/src/lib/components/source-button/constants/sourceButtonColorScheme.ts +0 -8
- package/src/lib/components/source-button/constants/sourceButtonSize.ts +0 -8
- package/src/lib/components/source-button/constants/sourceButtonType.ts +0 -8
- package/src/lib/components/source-button/interfaces/defaultSourceButton.config.ts +0 -24
- package/src/lib/components/source-button/interfaces/sourceButton.interface.ts +0 -26
- package/src/lib/components/source-copyright/components/source-copyright.component.html +0 -20
- package/src/lib/components/source-copyright/components/source-copyright.component.scss +0 -81
- package/src/lib/components/source-copyright/components/source-copyright.component.ts +0 -18
- package/src/lib/components/source-divider/components/source-divider.component.html +0 -5
- package/src/lib/components/source-divider/components/source-divider.component.scss +0 -15
- package/src/lib/components/source-divider/components/source-divider.component.ts +0 -18
- package/src/lib/components/source-hint/components/source-hint.component.html +0 -8
- package/src/lib/components/source-hint/components/source-hint.component.scss +0 -31
- package/src/lib/components/source-hint/components/source-hint.component.ts +0 -18
- package/src/lib/components/source-icon-button/components/source-icon-button.component.html +0 -18
- package/src/lib/components/source-icon-button/components/source-icon-button.component.scss +0 -89
- package/src/lib/components/source-icon-button/components/source-icon-button.component.ts +0 -87
- package/src/lib/components/source-icon-button/constants/sourceIconButtonShape.ts +0 -7
- package/src/lib/components/source-icon-button/constants/sourceIconButtonSize.ts +0 -10
- package/src/lib/components/source-icon-button/constants/sourceIconButtonType.ts +0 -8
- package/src/lib/components/source-loading/components/source-loading.component.html +0 -40
- package/src/lib/components/source-loading/components/source-loading.component.scss +0 -62
- package/src/lib/components/source-loading/components/source-loading.component.ts +0 -79
- package/src/lib/components/source-loading/constants/sourceLoadingLineCap.ts +0 -7
- package/src/lib/components/source-logo-loading/components/source-logo-loading.component.html +0 -23
- package/src/lib/components/source-logo-loading/components/source-logo-loading.component.scss +0 -33
- package/src/lib/components/source-logo-loading/components/source-logo-loading.component.ts +0 -21
- package/src/lib/components/source-slider/components/source-slider.component.html +0 -38
- package/src/lib/components/source-slider/components/source-slider.component.scss +0 -132
- package/src/lib/components/source-slider/components/source-slider.component.ts +0 -122
- package/src/lib/styles/base.scss +0 -68
- package/src/lib/styles/elements/_src-button.scss +0 -235
- package/src/lib/styles/elements/_src-input.scss +0 -83
- package/src/lib/styles/elements/_src-list.scss +0 -82
- package/src/lib/styles/elements/_src-select.scss +0 -71
- package/src/lib/styles/elements/elements.scss +0 -4
- package/src/lib/styles/fonts/Inter-VariableFont_slnt,wght.woff2 +0 -0
- package/src/lib/styles/fonts.scss +0 -18
- package/src/lib/styles/source.ui.scss +0 -23
- package/src/lib/styles/typography.scss +0 -90
- package/src/lib/styles/utils.scss +0 -40
- package/src/lib/styles/variables/_borders.scss +0 -14
- package/src/lib/styles/variables/_colors-aliases.scss +0 -39
- package/src/lib/styles/variables/_colors.scss +0 -64
- package/src/lib/styles/variables/_shadows.scss +0 -9
- package/src/lib/styles/variables/_typography.scss +0 -32
- package/src/lib/styles/variables/index.scss +0 -5
- package/tsconfig.lib.json +0 -13
- package/tsconfig.lib.prod.json +0 -11
- /package/{src/lib/components/source-badge/constants/index.ts → lib/components/source-badge/constants/index.d.ts} +0 -0
- /package/{src/lib/components/source-badge/index.ts → lib/components/source-badge/index.d.ts} +0 -0
- /package/{src/lib/components/source-banner/index.ts → lib/components/source-banner/index.d.ts} +0 -0
- /package/{src/lib/components/source-button/constants/index.ts → lib/components/source-button/constants/index.d.ts} +0 -0
- /package/{src/lib/components/source-button/index.ts → lib/components/source-button/index.d.ts} +0 -0
- /package/{src/lib/components/source-button/interfaces/index.ts → lib/components/source-button/interfaces/index.d.ts} +0 -0
- /package/{src/lib/components/source-copyright/index.ts → lib/components/source-copyright/index.d.ts} +0 -0
- /package/{src/lib/components/source-divider/index.ts → lib/components/source-divider/index.d.ts} +0 -0
- /package/{src/lib/components/source-hint/index.ts → lib/components/source-hint/index.d.ts} +0 -0
- /package/{src/lib/components/source-icon-button/constants/index.ts → lib/components/source-icon-button/constants/index.d.ts} +0 -0
- /package/{src/lib/components/source-icon-button/index.ts → lib/components/source-icon-button/index.d.ts} +0 -0
- /package/{src/lib/components/source-loading/index.ts → lib/components/source-loading/index.d.ts} +0 -0
- /package/{src/lib/components/source-logo-loading/index.ts → lib/components/source-logo-loading/index.d.ts} +0 -0
- /package/{src/lib/components/source-slider/index.ts → lib/components/source-slider/index.d.ts} +0 -0
- /package/{src/public-api.ts → public-api.d.ts} +0 -0
|
@@ -0,0 +1,662 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, Output } from '@angular/core';
|
|
3
|
+
import { NgStyle, NgClass } from '@angular/common';
|
|
4
|
+
|
|
5
|
+
const SourceBadgeType = {
|
|
6
|
+
NEUTRAL: 'neutral',
|
|
7
|
+
INFORMATIONAL: 'informational',
|
|
8
|
+
SUCCESS: 'success',
|
|
9
|
+
WARNING: 'warning',
|
|
10
|
+
ATTENTION: 'attention',
|
|
11
|
+
CRITICAL: 'critical',
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const SourceBadgeSize = {
|
|
15
|
+
SMALL: 'small',
|
|
16
|
+
DEFAULT: 'default',
|
|
17
|
+
LARGE: 'large',
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
class SourceBadgeComponent {
|
|
21
|
+
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)';
|
|
35
|
+
this.testID = input('', { alias: 'data-testid' });
|
|
36
|
+
this.classes = [];
|
|
37
|
+
}
|
|
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 }); }
|
|
56
|
+
}
|
|
57
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceBadgeComponent, decorators: [{
|
|
58
|
+
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
|
+
}] } });
|
|
77
|
+
|
|
78
|
+
const SourceBannerType = {
|
|
79
|
+
DEFAULT: 'default',
|
|
80
|
+
INFO: 'info',
|
|
81
|
+
SUCCESS: 'success',
|
|
82
|
+
WARNING: 'warning',
|
|
83
|
+
CRITICAL: 'critical',
|
|
84
|
+
};
|
|
85
|
+
|
|
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
|
+
const SourceButtonColorScheme = {
|
|
101
|
+
PRIMARY: 'primary',
|
|
102
|
+
SECONDARY: 'secondary',
|
|
103
|
+
DESTRUCTIVE: 'destructive',
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
const SourceButtonSize = {
|
|
107
|
+
SLIM: 'slim',
|
|
108
|
+
SMALL: 'slim',
|
|
109
|
+
MEDIUM: 'medium',
|
|
110
|
+
LARGE: 'large',
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
const SourceButtonType = {
|
|
114
|
+
BUTTON: 'button',
|
|
115
|
+
SUBMIT: 'submit',
|
|
116
|
+
RESET: 'reset',
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
const SourceButtonAppearance = {
|
|
120
|
+
PLAIN: 'plain',
|
|
121
|
+
DEFAULT: 'default',
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
const defaultSourceButtonConfig = {
|
|
125
|
+
type: SourceButtonType.BUTTON,
|
|
126
|
+
appearance: 'default',
|
|
127
|
+
colorScheme: SourceButtonColorScheme.SECONDARY,
|
|
128
|
+
size: SourceButtonSize.MEDIUM,
|
|
129
|
+
customClass: '',
|
|
130
|
+
hasDisclosure: false,
|
|
131
|
+
isFullWidth: false,
|
|
132
|
+
icon: undefined,
|
|
133
|
+
iconPrefix: false,
|
|
134
|
+
iconButton: false,
|
|
135
|
+
isPressed: false,
|
|
136
|
+
isDisabled: false,
|
|
137
|
+
isLoading: false,
|
|
138
|
+
formID: undefined,
|
|
139
|
+
testID: undefined,
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
const SourceLoadingLineCap = {
|
|
143
|
+
ROUND: 'round',
|
|
144
|
+
SQUARE: 'square',
|
|
145
|
+
BUTT: 'butt',
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
class SourceLoadingComponent {
|
|
149
|
+
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
|
+
*/
|
|
174
|
+
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));
|
|
198
|
+
}
|
|
199
|
+
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 }); }
|
|
201
|
+
}
|
|
202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceLoadingComponent, decorators: [{
|
|
203
|
+
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
|
+
}] } });
|
|
218
|
+
|
|
219
|
+
class SourceButtonComponent {
|
|
220
|
+
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
|
+
*/
|
|
268
|
+
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
|
+
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
|
+
};
|
|
373
|
+
}
|
|
374
|
+
handleClick(event) {
|
|
375
|
+
this.onClick.emit(event);
|
|
376
|
+
}
|
|
377
|
+
handleSubmit(event) {
|
|
378
|
+
this.onSubmit.emit(event);
|
|
379
|
+
}
|
|
380
|
+
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 }); }
|
|
382
|
+
}
|
|
383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceButtonComponent, decorators: [{
|
|
384
|
+
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
|
+
}] } });
|
|
421
|
+
|
|
422
|
+
class SourceCopyrightComponent {
|
|
423
|
+
constructor() {
|
|
424
|
+
this.linkText = input('Powered by 3D Source');
|
|
425
|
+
this.isCollapsible = input(false);
|
|
426
|
+
}
|
|
427
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceCopyrightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
428
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: SourceCopyrightComponent, isStandalone: true, selector: "src-copyright", inputs: { linkText: { classPropertyName: "linkText", publicName: "linkText", isSignal: true, isRequired: false, transformFunction: null }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"src-copyright\" [class.src-copyright--collapsible]=\"isCollapsible()\">\n <a href=\"https://www.3dsource.com/\" target=\"_blank\" class=\"src-link\">\n <svg\n class=\"src-link__icon\"\n fill=\"none\"\n height=\"18\"\n viewBox=\"0 0 17 18\"\n width=\"17\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill=\"#016EF8\"\n fill-rule=\"evenodd\"\n d=\"M13 13v1.1a61.8 61.8 0 0 1 .2 1.3l2-1.2c.7-.3 1-.9 1-1.6V10c0-.4-.2-.8-.6-1l-4.4-2.5a9414.7 9414.7 0 0 0-2.8-1.7l-.6-.3c-.2-.1-.3-.3-.3-.5 0-.3.2-.4.4-.5l.6.1 3.7 2.2a4320 4320 0 0 1 4 2V5.3c0-.7-.3-1.1-.9-1.5L9.3.3C8.5 0 7.7 0 7 .3L5.7 1l-1.2.7-.2.4v3.3c0 .5.2 1 .7 1.2l4 2.3 3.2 1.8c.6.3.8.8.8 1.4v1ZM3.2 5V4A164.6 164.6 0 0 1 3 2.6l-1.2.7-1 .5c-.5.4-.8.9-.8 1.6V8c0 .4.2.8.6 1l1 .6.5.3 6.2 3.5c.1.1.3.2.3.4.1.2 0 .4-.1.6-.2.2-.4.2-.7 0l-1.8-1-.5-.3-3.3-1.9-2-1C0 10 0 10 0 10.1a914.3 914.3 0 0 1 0 2.4c0 .7.3 1.3 1 1.6L3.8 16l3 1.7c.8.5 1.6.5 2.4 0l1.1-.6 1.3-.7.2-.3v-3.5c0-.5-.2-.8-.6-1a1118.4 1118.4 0 0 1-4-2.4L3.8 7.2c-.4-.2-.7-.7-.7-1.2V5Z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n <span class=\"src-link__text\">{{ linkText() }}</span>\n </a>\n</div>\n", styles: [".src-copyright{--srcCopyrightFontSize: 12px;--srcCopyrightFontColor: var(--color-text-default, #1f2937)}.src-copyright--collapsible{--srcCopyrightSize: 32px;--srcCopyrightBoxShadow: 0px 8px 20px 0px rgba(23, 24, 24, .12), 0px 3px 6px 0px rgba(23, 24, 24, .08);--srcCopyrightExpandedWidth: 176px}.src-link{display:flex;align-items:center;font-size:var(--srcCopyrightFontSize);font-style:normal;font-weight:400;line-height:1;color:var(--srcCopyrightFontColor);text-decoration:none;transition:all .3s ease-in-out}.src-link:hover{text-decoration:underline}.src-link .src-link__icon{width:16px;height:18px}.src-link .src-link__text{color:inherit;padding-left:8px;padding-top:1px}.src-copyright--collapsible{width:var(--srcCopyrightSize);height:var(--srcCopyrightSize)}.src-copyright--collapsible .src-link{height:100%;width:var(--srcCopyrightSize);border-radius:8px;text-decoration:none;background:#fff;box-shadow:var(--srcCopyrightBoxShadow)}.src-copyright--collapsible .src-link:hover{width:var(--srcCopyrightExpandedWidth)}.src-copyright--collapsible .src-link:hover .src-link__text{width:100%}.src-copyright--collapsible .src-link__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--srcCopyrightSize);height:var(--srcCopyrightSize);padding:7px}.src-copyright--collapsible .src-link__text{flex-shrink:0;overflow:hidden;white-space:nowrap;padding:0;width:0;transition:width .3s ease-in-out}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
429
|
+
}
|
|
430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceCopyrightComponent, decorators: [{
|
|
431
|
+
type: Component,
|
|
432
|
+
args: [{ selector: 'src-copyright', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"src-copyright\" [class.src-copyright--collapsible]=\"isCollapsible()\">\n <a href=\"https://www.3dsource.com/\" target=\"_blank\" class=\"src-link\">\n <svg\n class=\"src-link__icon\"\n fill=\"none\"\n height=\"18\"\n viewBox=\"0 0 17 18\"\n width=\"17\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill=\"#016EF8\"\n fill-rule=\"evenodd\"\n d=\"M13 13v1.1a61.8 61.8 0 0 1 .2 1.3l2-1.2c.7-.3 1-.9 1-1.6V10c0-.4-.2-.8-.6-1l-4.4-2.5a9414.7 9414.7 0 0 0-2.8-1.7l-.6-.3c-.2-.1-.3-.3-.3-.5 0-.3.2-.4.4-.5l.6.1 3.7 2.2a4320 4320 0 0 1 4 2V5.3c0-.7-.3-1.1-.9-1.5L9.3.3C8.5 0 7.7 0 7 .3L5.7 1l-1.2.7-.2.4v3.3c0 .5.2 1 .7 1.2l4 2.3 3.2 1.8c.6.3.8.8.8 1.4v1ZM3.2 5V4A164.6 164.6 0 0 1 3 2.6l-1.2.7-1 .5c-.5.4-.8.9-.8 1.6V8c0 .4.2.8.6 1l1 .6.5.3 6.2 3.5c.1.1.3.2.3.4.1.2 0 .4-.1.6-.2.2-.4.2-.7 0l-1.8-1-.5-.3-3.3-1.9-2-1C0 10 0 10 0 10.1a914.3 914.3 0 0 1 0 2.4c0 .7.3 1.3 1 1.6L3.8 16l3 1.7c.8.5 1.6.5 2.4 0l1.1-.6 1.3-.7.2-.3v-3.5c0-.5-.2-.8-.6-1a1118.4 1118.4 0 0 1-4-2.4L3.8 7.2c-.4-.2-.7-.7-.7-1.2V5Z\"\n clip-rule=\"evenodd\"\n />\n </svg>\n <span class=\"src-link__text\">{{ linkText() }}</span>\n </a>\n</div>\n", styles: [".src-copyright{--srcCopyrightFontSize: 12px;--srcCopyrightFontColor: var(--color-text-default, #1f2937)}.src-copyright--collapsible{--srcCopyrightSize: 32px;--srcCopyrightBoxShadow: 0px 8px 20px 0px rgba(23, 24, 24, .12), 0px 3px 6px 0px rgba(23, 24, 24, .08);--srcCopyrightExpandedWidth: 176px}.src-link{display:flex;align-items:center;font-size:var(--srcCopyrightFontSize);font-style:normal;font-weight:400;line-height:1;color:var(--srcCopyrightFontColor);text-decoration:none;transition:all .3s ease-in-out}.src-link:hover{text-decoration:underline}.src-link .src-link__icon{width:16px;height:18px}.src-link .src-link__text{color:inherit;padding-left:8px;padding-top:1px}.src-copyright--collapsible{width:var(--srcCopyrightSize);height:var(--srcCopyrightSize)}.src-copyright--collapsible .src-link{height:100%;width:var(--srcCopyrightSize);border-radius:8px;text-decoration:none;background:#fff;box-shadow:var(--srcCopyrightBoxShadow)}.src-copyright--collapsible .src-link:hover{width:var(--srcCopyrightExpandedWidth)}.src-copyright--collapsible .src-link:hover .src-link__text{width:100%}.src-copyright--collapsible .src-link__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--srcCopyrightSize);height:var(--srcCopyrightSize);padding:7px}.src-copyright--collapsible .src-link__text{flex-shrink:0;overflow:hidden;white-space:nowrap;padding:0;width:0;transition:width .3s ease-in-out}\n"] }]
|
|
433
|
+
}] });
|
|
434
|
+
|
|
435
|
+
class SourceDividerComponent {
|
|
436
|
+
constructor() {
|
|
437
|
+
this.color = input('#E5E7EB');
|
|
438
|
+
this.thickness = input('1px');
|
|
439
|
+
}
|
|
440
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
441
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: SourceDividerComponent, isStandalone: true, selector: "src-divider", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<hr\n class=\"src-divider\"\n [style.--srcDividerColor]=\"thickness()\"\n [style.--srcDividerColor]=\"color()\"\n/>\n", styles: [".src-divider{--srcDividerColor: var(--src-color-border-default, #e5e7eb);--srcDividerHeight: 1px;--srcDividerOffsetTop: 8px;--srcDividerOffsetBottom: var(--srcDividerOffsetTop);display:block;width:100%;height:var(--srcDividerHeight);margin-top:var(--srcDividerOffsetTop);margin-bottom:var(--srcDividerOffsetBottom);padding:0;background-color:var(--srcDividerColor);border:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
442
|
+
}
|
|
443
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceDividerComponent, decorators: [{
|
|
444
|
+
type: Component,
|
|
445
|
+
args: [{ selector: 'src-divider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr\n class=\"src-divider\"\n [style.--srcDividerColor]=\"thickness()\"\n [style.--srcDividerColor]=\"color()\"\n/>\n", styles: [".src-divider{--srcDividerColor: var(--src-color-border-default, #e5e7eb);--srcDividerHeight: 1px;--srcDividerOffsetTop: 8px;--srcDividerOffsetBottom: var(--srcDividerOffsetTop);display:block;width:100%;height:var(--srcDividerHeight);margin-top:var(--srcDividerOffsetTop);margin-bottom:var(--srcDividerOffsetBottom);padding:0;background-color:var(--srcDividerColor);border:none}\n"] }]
|
|
446
|
+
}] });
|
|
447
|
+
|
|
448
|
+
class SourceHintComponent {
|
|
449
|
+
constructor() {
|
|
450
|
+
this.isError = input(false);
|
|
451
|
+
this.isCompact = input(false);
|
|
452
|
+
}
|
|
453
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
454
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: SourceHintComponent, isStandalone: true, selector: "src-hint", inputs: { isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
455
|
+
}
|
|
456
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceHintComponent, decorators: [{
|
|
457
|
+
type: Component,
|
|
458
|
+
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
|
+
}] });
|
|
460
|
+
|
|
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
|
+
class SourceIconButtonComponent {
|
|
481
|
+
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
|
+
*/
|
|
495
|
+
this.counter = input(undefined);
|
|
496
|
+
/**
|
|
497
|
+
* Standard active state for the button
|
|
498
|
+
*/
|
|
499
|
+
this.isActive = input(false);
|
|
500
|
+
/**
|
|
501
|
+
* Standard disabled state for button
|
|
502
|
+
*/
|
|
503
|
+
this.isDisabled = input(false);
|
|
504
|
+
/**
|
|
505
|
+
* Test ID for the component. Provide descriptive uniq id in kebab-case.
|
|
506
|
+
*/
|
|
507
|
+
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;
|
|
520
|
+
}
|
|
521
|
+
handleClick(event) {
|
|
522
|
+
event.preventDefault();
|
|
523
|
+
if (event.currentTarget instanceof HTMLButtonElement) {
|
|
524
|
+
event.currentTarget.blur();
|
|
525
|
+
}
|
|
526
|
+
this.onClick.emit(event);
|
|
527
|
+
}
|
|
528
|
+
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 }); }
|
|
530
|
+
}
|
|
531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceIconButtonComponent, decorators: [{
|
|
532
|
+
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
|
+
}] } });
|
|
537
|
+
|
|
538
|
+
class SourceLogoLoadingComponent {
|
|
539
|
+
constructor() {
|
|
540
|
+
this.size = input(32);
|
|
541
|
+
this.strokeColor = input('var(--src-color-brand-500)');
|
|
542
|
+
this.testID = input('', { alias: 'data-testid' });
|
|
543
|
+
}
|
|
544
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceLogoLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
545
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: SourceLogoLoadingComponent, isStandalone: true, selector: "src-logo-loading", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", 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-logo-loading\"\n [attr.data-testid]=\"testID()\"\n [ngStyle]=\"{\n '--srcLogoLoadingSize': size() + 'px',\n '--srcLogoLoadingStroke': strokeColor(),\n }\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"40\"\n height=\"40\"\n fill=\"none\"\n viewBox=\"0 0 40 40\"\n >\n <path\n d=\"M36.482 12.662v4.466c-1.092-.61-4.316-2.42-7.512-4.213l-5.236-2.938-1.717-.964-.48-.27-.126-.07-.033-.019-.008-.004-.002-.001-.245.435.244-.436a2.552 2.552 0 0 0-.71-.29 2.162 2.162 0 0 0-.758-.015l-.024.003-.024.005c-.49.113-.837.345-1.057.638a1.354 1.354 0 0 0-.275.838c.015.527.4 1.002.988 1.313.643.388 4.642 2.71 8.484 4.937l5.25 3.042 1.703.986.475.275.125.072.032.018.008.005.002.001.25-.432-.25.433.01.005c.477.262.868.868.868 1.673v5.681c-.039 1.216-.675 2.086-1.478 2.553l-.002.001-4.222 2.482v-6.197c.043-.907-.147-1.642-.525-2.236-.375-.589-.909-.998-1.489-1.3l-15.143-8.783c-.324-.195-.572-.42-.74-.689-.167-.266-.272-.6-.272-1.045V5.395a.511.511 0 0 1 .014-.206.122.122 0 0 1 .025-.04.332.332 0 0 1 .087-.064l.006-.004 4.791-2.78.008-.004c.874-.528 1.675-.758 2.433-.762.758-.005 1.512.217 2.293.652l12.45 7.22.003.002c.623.356 1.077.785 1.37 1.301.293.515.445 1.15.41 1.952Z\"\n />\n <path\n d=\"M3.518 27.338v-4.466c1.092.61 4.316 2.42 7.512 4.213l5.236 2.938 1.717.964.48.27.126.07.033.018.008.005.002.001.245-.435-.244.436c.24.134.464.238.71.29.253.055.494.05.758.015l.024-.003.024-.005c.49-.113.837-.345 1.057-.638.213-.286.281-.598.275-.838-.015-.527-.4-1.002-.988-1.313-.643-.388-4.642-2.71-8.484-4.937l-5.25-3.042-1.703-.986-.475-.275-.125-.072-.032-.018-.008-.005-.002-.001-.25.432.25-.433-.01-.005c-.477-.262-.868-.868-.868-1.673v-5.681c.04-1.216.675-2.086 1.478-2.553l.002-.001 4.222-2.482v6.197c-.043.907.147 1.642.525 2.236.375.589.909.998 1.489 1.3l15.143 8.783c.324.195.572.42.74.689.166.266.272.6.272 1.045v7.227a.511.511 0 0 1-.015.206.122.122 0 0 1-.024.04.334.334 0 0 1-.086.064l-.007.004-4.791 2.78-.008.004c-.874.528-1.675.758-2.433.762-.758.005-1.512-.217-2.293-.652L5.3 30.593l-.003-.002c-.623-.356-1.077-.785-1.37-1.301-.293-.515-.445-1.15-.41-1.952Z\"\n />\n </svg>\n</div>\n", styles: [".src-logo-loading{--srcLogoLoadingSize: 40px;--srcLogoLoadingStroke: var(--color-brand-500, #016ef8);width:var(--srcLogoLoadingSize);height:var(--srcLogoLoadingSize)}.src-logo-loading svg{width:100%;height:100%}.src-logo-loading path{stroke:var(--srcLogoLoadingStroke);stroke-width:1;fill:none;stroke-dasharray:180;stroke-dashoffset:180;animation:draw 3s linear infinite}@keyframes draw{0%{stroke-dashoffset:180}50%{stroke-dashoffset:0}to{stroke-dashoffset:180}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
546
|
+
}
|
|
547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceLogoLoadingComponent, decorators: [{
|
|
548
|
+
type: Component,
|
|
549
|
+
args: [{ selector: 'src-logo-loading', imports: [NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"src-logo-loading\"\n [attr.data-testid]=\"testID()\"\n [ngStyle]=\"{\n '--srcLogoLoadingSize': size() + 'px',\n '--srcLogoLoadingStroke': strokeColor(),\n }\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"40\"\n height=\"40\"\n fill=\"none\"\n viewBox=\"0 0 40 40\"\n >\n <path\n d=\"M36.482 12.662v4.466c-1.092-.61-4.316-2.42-7.512-4.213l-5.236-2.938-1.717-.964-.48-.27-.126-.07-.033-.019-.008-.004-.002-.001-.245.435.244-.436a2.552 2.552 0 0 0-.71-.29 2.162 2.162 0 0 0-.758-.015l-.024.003-.024.005c-.49.113-.837.345-1.057.638a1.354 1.354 0 0 0-.275.838c.015.527.4 1.002.988 1.313.643.388 4.642 2.71 8.484 4.937l5.25 3.042 1.703.986.475.275.125.072.032.018.008.005.002.001.25-.432-.25.433.01.005c.477.262.868.868.868 1.673v5.681c-.039 1.216-.675 2.086-1.478 2.553l-.002.001-4.222 2.482v-6.197c.043-.907-.147-1.642-.525-2.236-.375-.589-.909-.998-1.489-1.3l-15.143-8.783c-.324-.195-.572-.42-.74-.689-.167-.266-.272-.6-.272-1.045V5.395a.511.511 0 0 1 .014-.206.122.122 0 0 1 .025-.04.332.332 0 0 1 .087-.064l.006-.004 4.791-2.78.008-.004c.874-.528 1.675-.758 2.433-.762.758-.005 1.512.217 2.293.652l12.45 7.22.003.002c.623.356 1.077.785 1.37 1.301.293.515.445 1.15.41 1.952Z\"\n />\n <path\n d=\"M3.518 27.338v-4.466c1.092.61 4.316 2.42 7.512 4.213l5.236 2.938 1.717.964.48.27.126.07.033.018.008.005.002.001.245-.435-.244.436c.24.134.464.238.71.29.253.055.494.05.758.015l.024-.003.024-.005c.49-.113.837-.345 1.057-.638.213-.286.281-.598.275-.838-.015-.527-.4-1.002-.988-1.313-.643-.388-4.642-2.71-8.484-4.937l-5.25-3.042-1.703-.986-.475-.275-.125-.072-.032-.018-.008-.005-.002-.001-.25.432.25-.433-.01-.005c-.477-.262-.868-.868-.868-1.673v-5.681c.04-1.216.675-2.086 1.478-2.553l.002-.001 4.222-2.482v6.197c-.043.907.147 1.642.525 2.236.375.589.909.998 1.489 1.3l15.143 8.783c.324.195.572.42.74.689.166.266.272.6.272 1.045v7.227a.511.511 0 0 1-.015.206.122.122 0 0 1-.024.04.334.334 0 0 1-.086.064l-.007.004-4.791 2.78-.008.004c-.874.528-1.675.758-2.433.762-.758.005-1.512-.217-2.293-.652L5.3 30.593l-.003-.002c-.623-.356-1.077-.785-1.37-1.301-.293-.515-.445-1.15-.41-1.952Z\"\n />\n </svg>\n</div>\n", styles: [".src-logo-loading{--srcLogoLoadingSize: 40px;--srcLogoLoadingStroke: var(--color-brand-500, #016ef8);width:var(--srcLogoLoadingSize);height:var(--srcLogoLoadingSize)}.src-logo-loading svg{width:100%;height:100%}.src-logo-loading path{stroke:var(--srcLogoLoadingStroke);stroke-width:1;fill:none;stroke-dasharray:180;stroke-dashoffset:180;animation:draw 3s linear infinite}@keyframes draw{0%{stroke-dashoffset:180}50%{stroke-dashoffset:0}to{stroke-dashoffset:180}}\n"] }]
|
|
550
|
+
}] });
|
|
551
|
+
|
|
552
|
+
class SourceSliderComponent {
|
|
553
|
+
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
|
+
*/
|
|
582
|
+
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
|
+
}
|
|
593
|
+
}
|
|
594
|
+
input(valueEvent) {
|
|
595
|
+
if (valueEvent.target instanceof HTMLInputElement) {
|
|
596
|
+
this.onInput.emit(this.getValue(valueEvent.target));
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
change(valueEvent) {
|
|
600
|
+
if (valueEvent.target instanceof HTMLInputElement) {
|
|
601
|
+
this.onChange.emit(this.getValue(valueEvent.target));
|
|
602
|
+
}
|
|
603
|
+
}
|
|
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
|
+
getValue(value) {
|
|
613
|
+
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);
|
|
616
|
+
return newValue;
|
|
617
|
+
}
|
|
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
|
+
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 }); }
|
|
627
|
+
}
|
|
628
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SourceSliderComponent, decorators: [{
|
|
629
|
+
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
|
+
}] } });
|
|
656
|
+
|
|
657
|
+
/**
|
|
658
|
+
* Generated bundle index. Do not edit.
|
|
659
|
+
*/
|
|
660
|
+
|
|
661
|
+
export { SourceBadgeComponent, SourceBadgeSize, SourceBadgeType, SourceBannerComponent, SourceBannerType, SourceButtonAppearance, SourceButtonColorScheme, SourceButtonComponent, SourceButtonSize, SourceButtonType, SourceCopyrightComponent, SourceDividerComponent, SourceHintComponent, SourceIconButtonComponent, SourceIconButtonShape, SourceIconButtonSize, SourceIconButtonType, SourceLoadingComponent, SourceLogoLoadingComponent, SourceSliderComponent, defaultSourceButtonConfig };
|
|
662
|
+
//# sourceMappingURL=3dsource-source-ui-native.mjs.map
|