@3dsource/source-ui-native 2.2.0 → 3.0.1
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/README.md +2 -2
- package/fesm2022/3dsource-source-ui-native.mjs +136 -136
- package/fesm2022/3dsource-source-ui-native.mjs.map +1 -1
- package/package.json +3 -3
- package/styles/elements/_src-button.scss +17 -17
- package/styles/elements/_src-form.scss +0 -4
- package/styles/elements/_src-icon-button.scss +15 -23
- package/styles/elements/_src-input.scss +2 -2
- package/styles/elements/_src-label.scss +0 -8
- package/styles/elements/_src-list.scss +2 -1
- package/styles/elements/_src-modal.scss +1 -10
- package/styles/elements/_src-select.scss +4 -9
- package/styles/elements/_src-textarea.scss +4 -4
- package/styles/source-ui-native.css +137 -147
- package/styles/source-ui-native.css.map +1 -1
- package/styles/source-ui-native.min.css +1 -1
- package/{index.d.ts → types/3dsource-source-ui-native.d.ts} +118 -132
|
@@ -7,17 +7,17 @@ import { HttpClient } from '@angular/common/http';
|
|
|
7
7
|
class SourceBadgeComponent {
|
|
8
8
|
constructor() {
|
|
9
9
|
this.backgroundColor = input('var(--src-color-accent-500)', ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
|
|
10
|
-
this.
|
|
10
|
+
this.context = input(...(ngDevMode ? [undefined, { debugName: "context" }] : []));
|
|
11
11
|
this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
12
12
|
this.textColor = input('var(--src-text-body-main-invert, #f9fafb)', ...(ngDevMode ? [{ debugName: "textColor" }] : []));
|
|
13
13
|
this.customClass = input(...(ngDevMode ? [undefined, { debugName: "customClass" }] : []));
|
|
14
|
-
this.testID = input('', ...(ngDevMode ?
|
|
14
|
+
this.testID = input('', { ...(ngDevMode ? { debugName: "testID" } : {}), alias: 'data-testid' });
|
|
15
15
|
this.classes = computed(() => {
|
|
16
|
-
const
|
|
16
|
+
const context = this.context();
|
|
17
17
|
const size = this.size();
|
|
18
18
|
const customClass = this.customClass();
|
|
19
19
|
return [
|
|
20
|
-
|
|
20
|
+
context ? `src-badge--context-${context}` : '',
|
|
21
21
|
size ? `src-badge--size-${size}` : '',
|
|
22
22
|
customClass && Array.isArray(customClass)
|
|
23
23
|
? [...customClass]
|
|
@@ -25,22 +25,20 @@ class SourceBadgeComponent {
|
|
|
25
25
|
];
|
|
26
26
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
27
27
|
}
|
|
28
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
29
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: SourceBadgeComponent, isStandalone: true, selector: "src-badge", inputs: { backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [ngClass]=\"classes()\"\n [ngStyle]=\"\n context()\n ? {}\n : {\n '--srcBadgeBackgroundColor': backgroundColor(),\n '--srcBadgeTextColor': textColor(),\n }\n \"\n [attr.data-testid]=\"testID()\"\n class=\"src-badge\"\n>\n <div class=\"src-badge__icon\">\n <ng-content select=\"[srcIconPrefix]\"></ng-content>\n </div>\n <ng-content></ng-content>\n <div class=\"src-badge__icon\">\n <ng-content select=\"[srcIconPostfix]\"></ng-content>\n </div>\n</div>\n", styles: [".src-badge{--srcBadgeHeight: auto;--srcBadgePadding: 4px;--srcBadgeBackgroundColor: var( --src-ui-status-light-neutral, rgba(148, 163, 184, .24) );--srcBadgeTextColor: var(--src-text-body-lable, #6b7280);display:inline-flex;gap:var(--src-gap-md, 4px);width:auto;min-width:var(--srcBadgeHeight);height:var(--srcBadgeHeight);padding:var(--srcBadgePadding);border-radius:var(--src-border-rounded-full, 9999px);background:var(--srcBadgeBackgroundColor);color:var(--srcBadgeTextColor);font-family:var(--src-font-family-header, Inter);font-size:var(--src-text-fontSize, 12px);font-style:normal;font-weight:500;line-height:var(--src-text-lineHeight, 16px)}.src-badge .src-badge__icon>*{display:block;width:var(--src-icon-size);height:var(--src-icon-size);color:var(--srcBadgeTextColor)}.src-badge--context-default,.src-badge--context-success,.src-badge--context-warning,.src-badge--context-attention,.src-badge--context-error,.src-badge--context-info{--srcBadgeHeight: auto;--srcBadgeBackgroundColor: var( --src-ui-status-light-neutral, rgba(148, 163, 184, .24) );--srcBadgeTextColor: var(--src-text-body-lable, #6b7280);text-align:center}.src-badge--context-default{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-neutral, rgba(148, 163, 184, .24)) 0%, var(--src-ui-status-light-neutral, rgba(148, 163, 184, .24)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-body-lable, #6b7280)}.src-badge--context-info{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-info, rgba(1, 123, 255, .24)) 0%, var(--src-ui-status-light-info, rgba(1, 123, 255, .24)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-ui-accent-main, #016fe6)}.src-badge--context-success{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-success, rgba(22, 163, 74, .16)) 0%, var(--src-ui-status-light-success, rgba(22, 163, 74, .16)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-ui-success-main, #16a34a)}.src-badge--context-warning{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-warning, rgba(245, 168, 15, .24)) 0%, var(--src-ui-status-light-warning, rgba(245, 168, 15, .24)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-ui-warning-main, #d97706)}.src-badge--context-attention{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-attention, rgba(240, 228, 66, .24)) 0%, var(--src-ui-status-light-attention, rgba(240, 228, 66, .24)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-ui-attention-main, #9e962c)}.src-badge--context-error{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-critical, rgba(239, 68, 68, .16)) 0%, var(--src-ui-status-light-critical, rgba(239, 68, 68, .16)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-ui-distruct-main, #f24122)}\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 }); }
|
|
30
30
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceBadgeComponent, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
|
-
args: [{ selector: 'src-badge', imports: [NgStyle, NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n
|
|
34
|
-
}] });
|
|
33
|
+
args: [{ selector: 'src-badge', imports: [NgStyle, NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [ngClass]=\"classes()\"\n [ngStyle]=\"\n context()\n ? {}\n : {\n '--srcBadgeBackgroundColor': backgroundColor(),\n '--srcBadgeTextColor': textColor(),\n }\n \"\n [attr.data-testid]=\"testID()\"\n class=\"src-badge\"\n>\n <div class=\"src-badge__icon\">\n <ng-content select=\"[srcIconPrefix]\"></ng-content>\n </div>\n <ng-content></ng-content>\n <div class=\"src-badge__icon\">\n <ng-content select=\"[srcIconPostfix]\"></ng-content>\n </div>\n</div>\n", styles: [".src-badge{--srcBadgeHeight: auto;--srcBadgePadding: 4px;--srcBadgeBackgroundColor: var( --src-ui-status-light-neutral, rgba(148, 163, 184, .24) );--srcBadgeTextColor: var(--src-text-body-lable, #6b7280);display:inline-flex;gap:var(--src-gap-md, 4px);width:auto;min-width:var(--srcBadgeHeight);height:var(--srcBadgeHeight);padding:var(--srcBadgePadding);border-radius:var(--src-border-rounded-full, 9999px);background:var(--srcBadgeBackgroundColor);color:var(--srcBadgeTextColor);font-family:var(--src-font-family-header, Inter);font-size:var(--src-text-fontSize, 12px);font-style:normal;font-weight:500;line-height:var(--src-text-lineHeight, 16px)}.src-badge .src-badge__icon>*{display:block;width:var(--src-icon-size);height:var(--src-icon-size);color:var(--srcBadgeTextColor)}.src-badge--context-default,.src-badge--context-success,.src-badge--context-warning,.src-badge--context-attention,.src-badge--context-error,.src-badge--context-info{--srcBadgeHeight: auto;--srcBadgeBackgroundColor: var( --src-ui-status-light-neutral, rgba(148, 163, 184, .24) );--srcBadgeTextColor: var(--src-text-body-lable, #6b7280);text-align:center}.src-badge--context-default{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-neutral, rgba(148, 163, 184, .24)) 0%, var(--src-ui-status-light-neutral, rgba(148, 163, 184, .24)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-body-lable, #6b7280)}.src-badge--context-info{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-info, rgba(1, 123, 255, .24)) 0%, var(--src-ui-status-light-info, rgba(1, 123, 255, .24)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-ui-accent-main, #016fe6)}.src-badge--context-success{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-success, rgba(22, 163, 74, .16)) 0%, var(--src-ui-status-light-success, rgba(22, 163, 74, .16)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-ui-success-main, #16a34a)}.src-badge--context-warning{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-warning, rgba(245, 168, 15, .24)) 0%, var(--src-ui-status-light-warning, rgba(245, 168, 15, .24)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-ui-warning-main, #d97706)}.src-badge--context-attention{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-attention, rgba(240, 228, 66, .24)) 0%, var(--src-ui-status-light-attention, rgba(240, 228, 66, .24)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-ui-attention-main, #9e962c)}.src-badge--context-error{--srcBadgeBackgroundColor: linear-gradient( 0deg, var(--src-ui-status-light-critical, rgba(239, 68, 68, .16)) 0%, var(--src-ui-status-light-critical, rgba(239, 68, 68, .16)) 100% ), var(--src-surface-container-main, #fff);--srcBadgeTextColor: var(--src-text-ui-distruct-main, #f24122)}\n"] }]
|
|
34
|
+
}], propDecorators: { backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }] } });
|
|
35
35
|
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
INFORMATIONAL: 'informational',
|
|
36
|
+
const SourceBadgeContext = {
|
|
37
|
+
DEFAULT: 'default',
|
|
39
38
|
INFO: 'info',
|
|
40
39
|
SUCCESS: 'success',
|
|
41
40
|
WARNING: 'warning',
|
|
42
41
|
ATTENTION: 'attention',
|
|
43
|
-
CRITICAL: 'critical',
|
|
44
42
|
ERROR: 'error',
|
|
45
43
|
};
|
|
46
44
|
|
|
@@ -53,37 +51,35 @@ const SourceBadgeSize = {
|
|
|
53
51
|
|
|
54
52
|
class SourceBannerComponent {
|
|
55
53
|
constructor() {
|
|
56
|
-
this.
|
|
54
|
+
this.context = input('default', ...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
57
55
|
this.size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
58
56
|
this.isFullWidth = input(true, ...(ngDevMode ? [{ debugName: "isFullWidth" }] : []));
|
|
59
|
-
|
|
60
|
-
this.isCompact = input(false, ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
|
|
61
|
-
this.testID = input('', ...(ngDevMode ? [{ debugName: "testID", alias: 'data-testid' }] : [{ alias: 'data-testid' }]));
|
|
57
|
+
this.testID = input('', { ...(ngDevMode ? { debugName: "testID" } : {}), alias: 'data-testid' });
|
|
62
58
|
this.classes = computed(() => {
|
|
63
|
-
const
|
|
59
|
+
const context = this.context();
|
|
64
60
|
const size = this.size();
|
|
65
61
|
return [
|
|
66
|
-
|
|
62
|
+
context ? `src-banner--context-${context}` : '',
|
|
67
63
|
size ? `src-banner--size-${size}` : '',
|
|
68
64
|
];
|
|
69
65
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
70
66
|
}
|
|
71
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
72
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
67
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
68
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: SourceBannerComponent, isStandalone: true, selector: "src-banner", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "isFullWidth() ? \"100%\" : \"auto\"", "style.display": "\"block\"" } }, ngImport: i0, template: "<div [ngClass]=\"classes()\" [attr.data-testid]=\"testID()\" class=\"src-banner\">\n <ng-content select=\"[srcIconPrefix]\"></ng-content>\n <span class=\"src-banner__content\">\n <ng-content select=\"[srcBannerTitle]\"></ng-content>\n\n <ng-content></ng-content>\n </span>\n <ng-content select=\"[srcIconPostfix]\"></ng-content>\n</div>\n", styles: [".src-banner{--srcBannerPadding: var(--src-layout-padding-const-sm, 8px) var(--src-layout-padding-const-md, 12px);--srcBannerBackgroundColor: var( --src-ui-status-light-neutral, rgba(148, 163, 184, .24) );--srcBannerBorderWidth: 1px;--srcBannerBorderColor: var( --src-border-container-light, rgba(148, 163, 184, .16) );--srcBannerTextColor: var(--src-text-body-secondary, #4b5563);--srcBannerIconColor: var(--src-icon-default);--srcBannerBorderRadius: var(--src-layout-radius-const-rounded-sm, 6px);display:flex;gap:var(--src-layout-gap-const-sm, 8px);width:100%;padding:var(--srcBannerPadding);border:var(--srcBannerBorderWidth) solid var(--srcBannerBorderColor);border-radius:var(--srcBannerBorderRadius);background:var(--srcBannerBackgroundColor);color:var(--srcBannerTextColor);font-size:var(--src-font-size-xs, 12px);font-weight:400;line-height:var(--src-font-line-xs, 16px)}.src-banner [srcIconPrefix],.src-banner [srcIconPostfix]{width:var(--src-icon-size);height:var(--src-icon-size);color:var(--srcBannerIconColor);flex-shrink:0}.src-banner [srcIconPrefix]>*,.src-banner [srcIconPostfix]>*{width:100%;height:100%}.src-banner .src-banner__content{flex-grow:1}.src-banner [srcBannerTitle]{color:var(--srcBannerTextColor);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-tech, 9px);font-style:normal;font-weight:600;line-height:var(--src-font-line-xs, 16px);letter-spacing:var(--src-font-spacing-tech, 1.2px);text-transform:uppercase;margin-bottom:var(--src-layout-gap-const-xs, 4px)}.src-banner p{margin:0}.src-banner--context-info{--srcBannerBackgroundColor: var( --src-ui-status-light-info, rgba(1, 123, 255, .24) );--srcBannerBorderColor: var(--src-ui-status-basic-info, #017bff);--srcBannerIconColor: var(--src-icon-info);--srcBannerTextColor: var(--src-text-body-accent, #016fe6)}.src-banner--context-success{--srcBannerBackgroundColor: var( --src-ui-status-light-success, rgba(22, 163, 74, .16) );--srcBannerBorderColor: var(--src-ui-status-basic-success, #22c55e);--srcBannerIconColor: var(--src-icon-success);--srcBannerTextColor: var(--src-text-ui-success-main, #16a34a)}.src-banner--context-critical,.src-banner--context-error{--srcBannerBackgroundColor: var( --src-ui-status-light-critical, rgba(239, 68, 68, .16) );--srcBannerBorderColor: var(--src-ui-status-basic-critical, #f24122);--srcBannerIconColor: var(--src-icon-error);--srcBannerTextColor: var(--src-text-body-destruct, #c5280c)}.src-banner--context-warning{--srcBannerBackgroundColor: var( --src-ui-status-light-warning, rgba(245, 168, 15, .24) );--srcBannerBorderColor: var(--src-ui-status-basic-warning, #f59b18);--srcBannerIconColor: var(--src-icon-warning);--srcBannerTextColor: var(--src-text-ui-warning-main, #d97706)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
73
69
|
}
|
|
74
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceBannerComponent, decorators: [{
|
|
75
71
|
type: Component,
|
|
76
72
|
args: [{ selector: 'src-banner', host: {
|
|
77
73
|
'[style.width]': 'isFullWidth() ? "100%" : "auto"',
|
|
78
74
|
'[style.display]': '"block"',
|
|
79
|
-
}, imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
80
|
-
}] });
|
|
75
|
+
}, imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"classes()\" [attr.data-testid]=\"testID()\" class=\"src-banner\">\n <ng-content select=\"[srcIconPrefix]\"></ng-content>\n <span class=\"src-banner__content\">\n <ng-content select=\"[srcBannerTitle]\"></ng-content>\n\n <ng-content></ng-content>\n </span>\n <ng-content select=\"[srcIconPostfix]\"></ng-content>\n</div>\n", styles: [".src-banner{--srcBannerPadding: var(--src-layout-padding-const-sm, 8px) var(--src-layout-padding-const-md, 12px);--srcBannerBackgroundColor: var( --src-ui-status-light-neutral, rgba(148, 163, 184, .24) );--srcBannerBorderWidth: 1px;--srcBannerBorderColor: var( --src-border-container-light, rgba(148, 163, 184, .16) );--srcBannerTextColor: var(--src-text-body-secondary, #4b5563);--srcBannerIconColor: var(--src-icon-default);--srcBannerBorderRadius: var(--src-layout-radius-const-rounded-sm, 6px);display:flex;gap:var(--src-layout-gap-const-sm, 8px);width:100%;padding:var(--srcBannerPadding);border:var(--srcBannerBorderWidth) solid var(--srcBannerBorderColor);border-radius:var(--srcBannerBorderRadius);background:var(--srcBannerBackgroundColor);color:var(--srcBannerTextColor);font-size:var(--src-font-size-xs, 12px);font-weight:400;line-height:var(--src-font-line-xs, 16px)}.src-banner [srcIconPrefix],.src-banner [srcIconPostfix]{width:var(--src-icon-size);height:var(--src-icon-size);color:var(--srcBannerIconColor);flex-shrink:0}.src-banner [srcIconPrefix]>*,.src-banner [srcIconPostfix]>*{width:100%;height:100%}.src-banner .src-banner__content{flex-grow:1}.src-banner [srcBannerTitle]{color:var(--srcBannerTextColor);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-tech, 9px);font-style:normal;font-weight:600;line-height:var(--src-font-line-xs, 16px);letter-spacing:var(--src-font-spacing-tech, 1.2px);text-transform:uppercase;margin-bottom:var(--src-layout-gap-const-xs, 4px)}.src-banner p{margin:0}.src-banner--context-info{--srcBannerBackgroundColor: var( --src-ui-status-light-info, rgba(1, 123, 255, .24) );--srcBannerBorderColor: var(--src-ui-status-basic-info, #017bff);--srcBannerIconColor: var(--src-icon-info);--srcBannerTextColor: var(--src-text-body-accent, #016fe6)}.src-banner--context-success{--srcBannerBackgroundColor: var( --src-ui-status-light-success, rgba(22, 163, 74, .16) );--srcBannerBorderColor: var(--src-ui-status-basic-success, #22c55e);--srcBannerIconColor: var(--src-icon-success);--srcBannerTextColor: var(--src-text-ui-success-main, #16a34a)}.src-banner--context-critical,.src-banner--context-error{--srcBannerBackgroundColor: var( --src-ui-status-light-critical, rgba(239, 68, 68, .16) );--srcBannerBorderColor: var(--src-ui-status-basic-critical, #f24122);--srcBannerIconColor: var(--src-icon-error);--srcBannerTextColor: var(--src-text-body-destruct, #c5280c)}.src-banner--context-warning{--srcBannerBackgroundColor: var( --src-ui-status-light-warning, rgba(245, 168, 15, .24) );--srcBannerBorderColor: var(--src-ui-status-basic-warning, #f59b18);--srcBannerIconColor: var(--src-icon-warning);--srcBannerTextColor: var(--src-text-ui-warning-main, #d97706)}\n"] }]
|
|
76
|
+
}], propDecorators: { context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullWidth", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }] } });
|
|
81
77
|
|
|
82
78
|
const SourceBannerSize = {
|
|
83
79
|
SM: 'sm',
|
|
84
80
|
};
|
|
85
81
|
|
|
86
|
-
const
|
|
82
|
+
const SourceBannerContext = {
|
|
87
83
|
DEFAULT: 'default',
|
|
88
84
|
INFO: 'info',
|
|
89
85
|
SUCCESS: 'success',
|
|
@@ -92,7 +88,7 @@ const SourceBannerType = {
|
|
|
92
88
|
ERROR: 'error',
|
|
93
89
|
};
|
|
94
90
|
|
|
95
|
-
const
|
|
91
|
+
const SourceButtonWeight = {
|
|
96
92
|
PRIMARY: 'primary',
|
|
97
93
|
SECONDARY: 'secondary',
|
|
98
94
|
GHOST: 'ghost',
|
|
@@ -122,27 +118,28 @@ const SourceButtonAppearance = {
|
|
|
122
118
|
DEFAULT: 'default',
|
|
123
119
|
};
|
|
124
120
|
|
|
125
|
-
const
|
|
121
|
+
const SourceButtonContext = {
|
|
126
122
|
DEFAULT: 'default',
|
|
127
|
-
LOADING: 'loading',
|
|
128
|
-
DESTRUCTIVE: 'destructive',
|
|
123
|
+
// LOADING: 'loading',
|
|
124
|
+
// DESTRUCTIVE: 'destructive',
|
|
129
125
|
ERROR: 'error',
|
|
130
126
|
SUCCESS: 'success',
|
|
131
127
|
INFO: 'info',
|
|
132
|
-
INVERTED: 'inverted',
|
|
128
|
+
// INVERTED: 'inverted',
|
|
133
129
|
};
|
|
134
130
|
|
|
135
131
|
const sourceButtonDefaultConfig = {
|
|
136
132
|
type: SourceButtonType.BUTTON,
|
|
137
133
|
appearance: SourceButtonAppearance.FILLED,
|
|
138
|
-
|
|
134
|
+
weight: SourceButtonWeight.SECONDARY,
|
|
139
135
|
size: SourceButtonSize.MD,
|
|
140
|
-
|
|
136
|
+
context: SourceButtonContext.DEFAULT,
|
|
141
137
|
customClass: '',
|
|
142
138
|
hasDisclosure: false,
|
|
143
139
|
isFullWidth: false,
|
|
144
140
|
iconButton: false,
|
|
145
141
|
isPressed: false,
|
|
142
|
+
isInverted: false,
|
|
146
143
|
isDisabled: false,
|
|
147
144
|
isLoading: false,
|
|
148
145
|
formID: undefined,
|
|
@@ -157,7 +154,7 @@ class SourceLoadingComponent {
|
|
|
157
154
|
this.backgroundStrokeColor = input('transparent', ...(ngDevMode ? [{ debugName: "backgroundStrokeColor" }] : []));
|
|
158
155
|
this.progressStrokeColor = input('var(--src-color-accent-500, rgba(1, 123, 255, 1))', ...(ngDevMode ? [{ debugName: "progressStrokeColor" }] : []));
|
|
159
156
|
this.strokeWidth = input(3, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
|
|
160
|
-
this.testID = input('', ...(ngDevMode ?
|
|
157
|
+
this.testID = input('', { ...(ngDevMode ? { debugName: "testID" } : {}), alias: 'data-testid' });
|
|
161
158
|
this.classes = computed(() => [
|
|
162
159
|
this.progress() !== null
|
|
163
160
|
? 'src-loading--progress'
|
|
@@ -168,61 +165,63 @@ class SourceLoadingComponent {
|
|
|
168
165
|
this.viewBox = computed(() => `0 0 ${this.size()} ${this.size()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : []));
|
|
169
166
|
this.percentage = computed(() => Math.round((this.circumference() * (100 - (this.progress() ?? 0))) / 100), ...(ngDevMode ? [{ debugName: "percentage" }] : []));
|
|
170
167
|
}
|
|
171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
168
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
169
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SourceLoadingComponent, isStandalone: true, selector: "src-loading", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, lineCap: { classPropertyName: "lineCap", publicName: "lineCap", isSignal: true, isRequired: false, transformFunction: null }, backgroundStrokeColor: { classPropertyName: "backgroundStrokeColor", publicName: "backgroundStrokeColor", isSignal: true, isRequired: false, transformFunction: null }, progressStrokeColor: { classPropertyName: "progressStrokeColor", publicName: "progressStrokeColor", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [attr.data-testid]=\"testID()\" class=\"src-loading-container\">\n <svg\n [ngClass]=\"classes()\"\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n [attr.viewBox]=\"viewBox()\"\n [style.--srcLoadingSize]=\"size()\"\n class=\"src-loading\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"transform: rotate(-90deg)\"\n >\n <!-- Background circle -->\n @if (progress()) {\n <circle\n [attr.r]=\"calculateRadius()\"\n [attr.cx]=\"size() / 2\"\n [attr.cy]=\"size() / 2\"\n [attr.stroke]=\"backgroundStrokeColor()\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.stroke-dasharray]=\"circumference()\"\n fill=\"transparent\"\n stroke-dashoffset=\"0\"\n ></circle>\n }\n\n <!-- Filled circle -->\n <circle\n [attr.r]=\"calculateRadius()\"\n [attr.cx]=\"size() / 2\"\n [attr.cy]=\"size() / 2\"\n [attr.stroke]=\"progressStrokeColor()\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.stroke-linecap]=\"lineCap()\"\n [attr.stroke-dashoffset]=\"progress() ? percentage() : 0\"\n [attr.stroke-dasharray]=\"progress() ? circumference() : ''\"\n fill=\"transparent\"\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 }); }
|
|
173
170
|
}
|
|
174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceLoadingComponent, decorators: [{
|
|
175
172
|
type: Component,
|
|
176
|
-
args: [{ selector: 'src-loading', imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
177
|
-
}] });
|
|
173
|
+
args: [{ selector: 'src-loading', imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [attr.data-testid]=\"testID()\" class=\"src-loading-container\">\n <svg\n [ngClass]=\"classes()\"\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n [attr.viewBox]=\"viewBox()\"\n [style.--srcLoadingSize]=\"size()\"\n class=\"src-loading\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style=\"transform: rotate(-90deg)\"\n >\n <!-- Background circle -->\n @if (progress()) {\n <circle\n [attr.r]=\"calculateRadius()\"\n [attr.cx]=\"size() / 2\"\n [attr.cy]=\"size() / 2\"\n [attr.stroke]=\"backgroundStrokeColor()\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.stroke-dasharray]=\"circumference()\"\n fill=\"transparent\"\n stroke-dashoffset=\"0\"\n ></circle>\n }\n\n <!-- Filled circle -->\n <circle\n [attr.r]=\"calculateRadius()\"\n [attr.cx]=\"size() / 2\"\n [attr.cy]=\"size() / 2\"\n [attr.stroke]=\"progressStrokeColor()\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.stroke-linecap]=\"lineCap()\"\n [attr.stroke-dashoffset]=\"progress() ? percentage() : 0\"\n [attr.stroke-dasharray]=\"progress() ? circumference() : ''\"\n fill=\"transparent\"\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"] }]
|
|
174
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], lineCap: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineCap", required: false }] }], backgroundStrokeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundStrokeColor", required: false }] }], progressStrokeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressStrokeColor", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }] } });
|
|
178
175
|
|
|
179
176
|
class SourceButtonComponent {
|
|
180
177
|
constructor() {
|
|
181
178
|
this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
182
179
|
this.appearance = input('filled', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
183
|
-
this.
|
|
180
|
+
this.weight = input('secondary', ...(ngDevMode ? [{ debugName: "weight" }] : []));
|
|
184
181
|
this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
185
|
-
this.
|
|
182
|
+
this.context = input('default', ...(ngDevMode ? [{ debugName: "context" }] : [])); // 'default' | 'error' | 'info' | 'success'
|
|
186
183
|
this.customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : []));
|
|
187
|
-
// hasDisclosure is DEPRECATED, use srcIconPostfix with coorresponding icon instead
|
|
188
|
-
this.hasDisclosure = input(false, ...(ngDevMode ? [{ debugName: "hasDisclosure" }] : []));
|
|
189
184
|
this.isFullWidth = input(false, ...(ngDevMode ? [{ debugName: "isFullWidth" }] : []));
|
|
190
185
|
this.isPressed = input(false, ...(ngDevMode ? [{ debugName: "isPressed" }] : []));
|
|
191
186
|
this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
192
187
|
this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
188
|
+
this.isInverted = input(false, ...(ngDevMode ? [{ debugName: "isInverted" }] : []));
|
|
193
189
|
this.iconButton = input(false, ...(ngDevMode ? [{ debugName: "iconButton" }] : []));
|
|
194
190
|
this.srcButtonConfig = input(...(ngDevMode ? [undefined, { debugName: "srcButtonConfig" }] : []));
|
|
195
191
|
this.formID = input(...(ngDevMode ? [undefined, { debugName: "formID" }] : []));
|
|
196
|
-
this.testID = input('', ...(ngDevMode ?
|
|
192
|
+
this.testID = input('', { ...(ngDevMode ? { debugName: "testID" } : {}), alias: 'data-testid' });
|
|
193
|
+
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
197
194
|
this.onClick = output();
|
|
195
|
+
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
198
196
|
this.onSubmit = output();
|
|
199
197
|
this.classes = computed(() => {
|
|
200
198
|
const config = this.getConfig(this.srcButtonConfig() ?? {
|
|
201
199
|
type: this.type(),
|
|
202
200
|
appearance: this.appearance(),
|
|
203
|
-
|
|
201
|
+
weight: this.weight(),
|
|
204
202
|
size: this.size(),
|
|
205
|
-
|
|
203
|
+
context: this.context(),
|
|
206
204
|
customClass: this.customClass(),
|
|
207
|
-
hasDisclosure: this.hasDisclosure(),
|
|
208
205
|
isFullWidth: this.isFullWidth(),
|
|
209
206
|
formID: this.formID(),
|
|
210
207
|
iconButton: this.iconButton(),
|
|
211
208
|
isPressed: this.isPressed(),
|
|
212
209
|
isDisabled: this.isDisabled(),
|
|
213
210
|
isLoading: this.isLoading(),
|
|
211
|
+
isInverted: this.isInverted(),
|
|
214
212
|
testID: this.testID(),
|
|
215
213
|
});
|
|
216
214
|
return [
|
|
217
215
|
config.appearance ? `src-button--${config.appearance}` : '',
|
|
218
|
-
config.
|
|
216
|
+
config.weight ? `src-button--${config.weight}` : '',
|
|
219
217
|
config.size ? `src-button--size-${config.size}` : '',
|
|
220
|
-
config.
|
|
218
|
+
config.context ? `src-button--context-${config.context}` : '',
|
|
221
219
|
config.hasDisclosure ? 'src-button--disclosure' : '',
|
|
222
220
|
config.isPressed ? 'src-button--pressed' : '',
|
|
223
221
|
config.isFullWidth ? 'src-button--full-width' : '',
|
|
224
222
|
config.iconButton ? 'src-button--icon-button' : '',
|
|
225
223
|
config.isLoading ? 'src-button--loading' : '',
|
|
224
|
+
config.isInverted ? 'src-button--inverted' : '',
|
|
226
225
|
config.customClass && Array.isArray(config.customClass)
|
|
227
226
|
? [...config.customClass]
|
|
228
227
|
: (config.customClass ?? ''),
|
|
@@ -241,9 +240,9 @@ class SourceButtonComponent {
|
|
|
241
240
|
return {
|
|
242
241
|
type: config?.type || sourceButtonDefaultConfig.type,
|
|
243
242
|
appearance: config?.appearance || sourceButtonDefaultConfig.appearance,
|
|
244
|
-
|
|
243
|
+
weight: config?.weight || sourceButtonDefaultConfig.weight,
|
|
245
244
|
size: config?.size || sourceButtonDefaultConfig.size,
|
|
246
|
-
|
|
245
|
+
context: config?.context || sourceButtonDefaultConfig.context,
|
|
247
246
|
customClass: config?.customClass || sourceButtonDefaultConfig.customClass,
|
|
248
247
|
hasDisclosure: config?.hasDisclosure || sourceButtonDefaultConfig.hasDisclosure,
|
|
249
248
|
isFullWidth: config?.isFullWidth || sourceButtonDefaultConfig.isFullWidth,
|
|
@@ -251,59 +250,58 @@ class SourceButtonComponent {
|
|
|
251
250
|
isPressed: config?.isPressed || sourceButtonDefaultConfig.isPressed,
|
|
252
251
|
isDisabled: config?.isDisabled || sourceButtonDefaultConfig.isDisabled,
|
|
253
252
|
isLoading: config?.isLoading || sourceButtonDefaultConfig.isLoading,
|
|
253
|
+
isInverted: config?.isInverted || sourceButtonDefaultConfig.isInverted,
|
|
254
254
|
formID: config?.formID || sourceButtonDefaultConfig.formID,
|
|
255
255
|
testID: config?.testID || sourceButtonDefaultConfig.testID,
|
|
256
256
|
};
|
|
257
257
|
}
|
|
258
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
258
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
259
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SourceButtonComponent, isStandalone: true, selector: "src-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, isPressed: { classPropertyName: "isPressed", publicName: "isPressed", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isInverted: { classPropertyName: "isInverted", publicName: "isInverted", isSignal: true, isRequired: false, transformFunction: null }, iconButton: { classPropertyName: "iconButton", publicName: "iconButton", isSignal: true, isRequired: false, transformFunction: null }, srcButtonConfig: { classPropertyName: "srcButtonConfig", publicName: "srcButtonConfig", isSignal: true, isRequired: false, transformFunction: null }, formID: { classPropertyName: "formID", publicName: "formID", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onSubmit: "onSubmit" }, ngImport: i0, template: "@let config = srcButtonConfig();\n<button\n (click)=\"handleClick($event)\"\n (submit)=\"handleSubmit($event)\"\n [attr.data-testid]=\"!!config ? config?.testID : testID()\"\n [attr.form]=\"!!config ? config?.formID : formID()\"\n [disabled]=\"!!config ? config?.isDisabled : isDisabled()\"\n [ngClass]=\"classes()\"\n [type]=\"!!config ? config?.type : type()\"\n class=\"src-button\"\n>\n <span [style.opacity]=\"(!!config ? config?.isLoading : isLoading()) ? 0 : 1\">\n <ng-content select=\"[srcIconPrefix]\"></ng-content>\n <ng-content></ng-content>\n\n <ng-content select=\"[srcIconPostfix]\"></ng-content>\n </span>\n @if (!!config ? config?.isLoading : isLoading()) {\n <src-loading\n [size]=\"16\"\n [progressStrokeColor]=\"\n weight() === 'primary' ? '#fff' : 'var(--src-icon-default, #374151)'\n \"\n [strokeWidth]=\"2\"\n [data-testid]=\"(!!config ? config?.testID : testID()) + '-loading-state'\"\n ></src-loading>\n }\n</button>\n", styles: ["button.src-button--full-width{--srcButtonWidth: 100%}button.src-button [srcIconPrefix],button.src-button [srcIconPostfix]{flex-shrink:0;width:var(--src-icon-size, 16px);height:var(--src-icon-size, 16px);color:var(--srcButtonIconColor)}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 }); }
|
|
260
260
|
}
|
|
261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceButtonComponent, decorators: [{
|
|
262
262
|
type: Component,
|
|
263
|
-
args: [{ selector: 'src-button', imports: [NgClass, SourceLoadingComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let config = srcButtonConfig();\n<button\n (click)=\"handleClick($event)\"\n (submit)=\"handleSubmit($event)\"\n [attr.data-testid]=\"!!config ? config?.testID : testID()\"\n [attr.form]=\"!!config ? config?.formID : formID()\"\n [disabled]=\"!!config ? config?.isDisabled : isDisabled()\"\n [ngClass]=\"classes()\"\n [type]=\"!!config ? config?.type : type()\"\n class=\"src-button\"\n>\n <span [style.opacity]=\"(!!config ? config?.isLoading : isLoading()) ? 0 : 1\">\n <ng-content select=\"[srcIconPrefix]\"></ng-content>\n <ng-content></ng-content>\n
|
|
264
|
-
}] });
|
|
263
|
+
args: [{ selector: 'src-button', imports: [NgClass, SourceLoadingComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let config = srcButtonConfig();\n<button\n (click)=\"handleClick($event)\"\n (submit)=\"handleSubmit($event)\"\n [attr.data-testid]=\"!!config ? config?.testID : testID()\"\n [attr.form]=\"!!config ? config?.formID : formID()\"\n [disabled]=\"!!config ? config?.isDisabled : isDisabled()\"\n [ngClass]=\"classes()\"\n [type]=\"!!config ? config?.type : type()\"\n class=\"src-button\"\n>\n <span [style.opacity]=\"(!!config ? config?.isLoading : isLoading()) ? 0 : 1\">\n <ng-content select=\"[srcIconPrefix]\"></ng-content>\n <ng-content></ng-content>\n\n <ng-content select=\"[srcIconPostfix]\"></ng-content>\n </span>\n @if (!!config ? config?.isLoading : isLoading()) {\n <src-loading\n [size]=\"16\"\n [progressStrokeColor]=\"\n weight() === 'primary' ? '#fff' : 'var(--src-icon-default, #374151)'\n \"\n [strokeWidth]=\"2\"\n [data-testid]=\"(!!config ? config?.testID : testID()) + '-loading-state'\"\n ></src-loading>\n }\n</button>\n", styles: ["button.src-button--full-width{--srcButtonWidth: 100%}button.src-button [srcIconPrefix],button.src-button [srcIconPostfix]{flex-shrink:0;width:var(--src-icon-size, 16px);height:var(--src-icon-size, 16px);color:var(--srcButtonIconColor)}button.src-button--loading src-loading{position:absolute}\n"] }]
|
|
264
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], isFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullWidth", required: false }] }], isPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPressed", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isInverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInverted", required: false }] }], iconButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconButton", required: false }] }], srcButtonConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcButtonConfig", required: false }] }], formID: [{ type: i0.Input, args: [{ isSignal: true, alias: "formID", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }] } });
|
|
265
265
|
|
|
266
266
|
class SourceCopyrightComponent {
|
|
267
267
|
constructor() {
|
|
268
268
|
this.linkText = input('Powered by 3D Source', ...(ngDevMode ? [{ debugName: "linkText" }] : []));
|
|
269
269
|
this.isCollapsible = input(false, ...(ngDevMode ? [{ debugName: "isCollapsible" }] : []));
|
|
270
270
|
}
|
|
271
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
271
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceCopyrightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
272
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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--collapsible]=\"isCollapsible()\" class=\"src-copyright\">\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 }); }
|
|
273
273
|
}
|
|
274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceCopyrightComponent, decorators: [{
|
|
275
275
|
type: Component,
|
|
276
|
-
args: [{ selector: 'src-copyright', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
277
|
-
}] });
|
|
276
|
+
args: [{ selector: 'src-copyright', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.src-copyright--collapsible]=\"isCollapsible()\" class=\"src-copyright\">\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"] }]
|
|
277
|
+
}], propDecorators: { linkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkText", required: false }] }], isCollapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsible", required: false }] }] } });
|
|
278
278
|
|
|
279
279
|
class SourceDividerComponent {
|
|
280
280
|
constructor() {
|
|
281
281
|
this.color = input('#E5E7EB', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
282
282
|
this.thickness = input('1px', ...(ngDevMode ? [{ debugName: "thickness" }] : []));
|
|
283
283
|
}
|
|
284
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
285
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
284
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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 [style.--srcDividerColor]=\"thickness()\"\n [style.--srcDividerColor]=\"color()\"\n class=\"src-divider\"\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 }); }
|
|
286
286
|
}
|
|
287
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceDividerComponent, decorators: [{
|
|
288
288
|
type: Component,
|
|
289
|
-
args: [{ selector: 'src-divider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr\n
|
|
290
|
-
}] });
|
|
289
|
+
args: [{ selector: 'src-divider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr\n [style.--srcDividerColor]=\"thickness()\"\n [style.--srcDividerColor]=\"color()\"\n class=\"src-divider\"\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"] }]
|
|
290
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }] } });
|
|
291
291
|
|
|
292
292
|
class SourceHintComponent {
|
|
293
293
|
constructor() {
|
|
294
294
|
this.isError = input(false, ...(ngDevMode ? [{ debugName: "isError" }] : []));
|
|
295
|
-
this.
|
|
295
|
+
this.context = input('default', ...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
296
296
|
this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
297
|
-
// DEPRECATED: Use `size` instead
|
|
298
|
-
this.isCompact = input(false, ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
|
|
299
297
|
}
|
|
300
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
298
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
299
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: SourceHintComponent, isStandalone: true, selector: "src-hint", inputs: { isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p\n [ngClass]=\"'src-hint--context-' + context() + ' src-hint--size-' + size()\"\n [class.src-hint--error]=\"isError()\"\n class=\"src-hint\"\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-text-fontSize, 12px);--srcHintLineHeight: var(--src-text-lineHeight, 16px);--srcHintPadding: var(--src-gap-md, 8px) 0 0;--srcHintIconSize: var(--src-icon-size, 16px);position:relative;color:var(--srcHintColor);font-size:var(--srcHintFontSize);font-style:normal;display:flex;font-weight:500;padding:var(--srcHintPadding);margin:0;line-height:var(--srcHintLineHeight)}.src-hint>[srcIconPrefix]{width:var(--srcHintIconSize);height:var(--srcHintIconSize);margin-right:var(--src-gap-md, 4px);color:currentColor}.src-hint--error,.src-hint--context-error{--srcHintColor: var(--src-text-body-destruct, #c5280c)}.src-hint--context-info{--srcHintColor: var(--src-text-body-accent, #016fe6)}.src-hint--context-success{--srcHintColor: var(--src-text-body-success, #16a34a)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
302
300
|
}
|
|
303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
301
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceHintComponent, decorators: [{
|
|
304
302
|
type: Component,
|
|
305
|
-
args: [{ selector: 'src-hint', imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<p\n
|
|
306
|
-
}] });
|
|
303
|
+
args: [{ selector: 'src-hint', imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<p\n [ngClass]=\"'src-hint--context-' + context() + ' src-hint--size-' + size()\"\n [class.src-hint--error]=\"isError()\"\n class=\"src-hint\"\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-text-fontSize, 12px);--srcHintLineHeight: var(--src-text-lineHeight, 16px);--srcHintPadding: var(--src-gap-md, 8px) 0 0;--srcHintIconSize: var(--src-icon-size, 16px);position:relative;color:var(--srcHintColor);font-size:var(--srcHintFontSize);font-style:normal;display:flex;font-weight:500;padding:var(--srcHintPadding);margin:0;line-height:var(--srcHintLineHeight)}.src-hint>[srcIconPrefix]{width:var(--srcHintIconSize);height:var(--srcHintIconSize);margin-right:var(--src-gap-md, 4px);color:currentColor}.src-hint--error,.src-hint--context-error{--srcHintColor: var(--src-text-body-destruct, #c5280c)}.src-hint--context-info{--srcHintColor: var(--src-text-body-accent, #016fe6)}.src-hint--context-success{--srcHintColor: var(--src-text-body-success, #16a34a)}\n"] }]
|
|
304
|
+
}], propDecorators: { isError: [{ type: i0.Input, args: [{ isSignal: true, alias: "isError", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
307
305
|
|
|
308
306
|
const SourceHintSize = {
|
|
309
307
|
SM: 'sm',
|
|
@@ -312,7 +310,7 @@ const SourceHintSize = {
|
|
|
312
310
|
XL: 'xl',
|
|
313
311
|
};
|
|
314
312
|
|
|
315
|
-
const
|
|
313
|
+
const SourceHintContext = {
|
|
316
314
|
DEFAULT: 'default',
|
|
317
315
|
ERROR: 'error',
|
|
318
316
|
SUCCESS: 'success',
|
|
@@ -324,21 +322,22 @@ class SourceIconButtonComponent {
|
|
|
324
322
|
this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
325
323
|
this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
326
324
|
this.appearance = input('filled', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
327
|
-
this.
|
|
325
|
+
this.weight = input('secondary', ...(ngDevMode ? [{ debugName: "weight" }] : []));
|
|
328
326
|
this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
329
327
|
this.shape = input('square', ...(ngDevMode ? [{ debugName: "shape" }] : []));
|
|
330
|
-
this.
|
|
328
|
+
this.context = input('default', ...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
331
329
|
this.counter = input(undefined, ...(ngDevMode ? [{ debugName: "counter" }] : []));
|
|
332
330
|
this.isPressed = input(false, ...(ngDevMode ? [{ debugName: "isPressed" }] : []));
|
|
333
331
|
this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
334
|
-
this.testID = input('', ...(ngDevMode ?
|
|
332
|
+
this.testID = input('', { ...(ngDevMode ? { debugName: "testID" } : {}), alias: 'data-testid' });
|
|
333
|
+
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
335
334
|
this.onClick = output();
|
|
336
335
|
this.classes = computed(() => [
|
|
337
336
|
`src-icon-button--${this.shape()}`,
|
|
338
337
|
`src-icon-button--${this.appearance()}`,
|
|
339
|
-
`src-icon-button--${this.
|
|
338
|
+
`src-icon-button--${this.weight()}`,
|
|
340
339
|
`src-icon-button--size-${this.size()}`,
|
|
341
|
-
`src-icon-button--
|
|
340
|
+
`src-icon-button--context-${this.context()}`,
|
|
342
341
|
this.isPressed() ? 'src-icon-button--pressed' : '',
|
|
343
342
|
].filter(Boolean), ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
344
343
|
}
|
|
@@ -349,13 +348,13 @@ class SourceIconButtonComponent {
|
|
|
349
348
|
}
|
|
350
349
|
this.onClick.emit(event);
|
|
351
350
|
}
|
|
352
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
353
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
351
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
352
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SourceIconButtonComponent, isStandalone: true, selector: "src-icon-button", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", 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 }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, isPressed: { classPropertyName: "isPressed", publicName: "isPressed", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button\n (click)=\"handleClick($event)\"\n [type]=\"type()\"\n [name]=\"name()\"\n [ngClass]=\"classes()\"\n [disabled]=\"isDisabled()\"\n [attr.data-testid]=\"testID()\"\n class=\"src-icon-button\"\n>\n <ng-content></ng-content>\n\n @if (counter()) {\n <src-badge [data-testid]=\"testID() + '-counter'\">{{ counter() }}</src-badge>\n }\n</button>\n", styles: ["button.src-icon-button>src-badge{position:absolute;top:-7px;right:-10px;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SourceBadgeComponent, selector: "src-badge", inputs: ["backgroundColor", "context", "size", "textColor", "customClass", "data-testid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
354
353
|
}
|
|
355
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
354
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceIconButtonComponent, decorators: [{
|
|
356
355
|
type: Component,
|
|
357
|
-
args: [{ selector: 'src-icon-button', imports: [NgClass, SourceBadgeComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n
|
|
358
|
-
}] });
|
|
356
|
+
args: [{ selector: 'src-icon-button', imports: [NgClass, SourceBadgeComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n (click)=\"handleClick($event)\"\n [type]=\"type()\"\n [name]=\"name()\"\n [ngClass]=\"classes()\"\n [disabled]=\"isDisabled()\"\n [attr.data-testid]=\"testID()\"\n class=\"src-icon-button\"\n>\n <ng-content></ng-content>\n\n @if (counter()) {\n <src-badge [data-testid]=\"testID() + '-counter'\">{{ counter() }}</src-badge>\n }\n</button>\n", styles: ["button.src-icon-button>src-badge{position:absolute;top:-7px;right:-10px;z-index:1}\n"] }]
|
|
357
|
+
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "counter", required: false }] }], isPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPressed", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
|
|
359
358
|
|
|
360
359
|
const SourceIconButtonAppearance = {
|
|
361
360
|
FILLED: 'filled',
|
|
@@ -363,7 +362,7 @@ const SourceIconButtonAppearance = {
|
|
|
363
362
|
INLINE: 'inline',
|
|
364
363
|
};
|
|
365
364
|
|
|
366
|
-
const
|
|
365
|
+
const SourceIconButtonWeight = {
|
|
367
366
|
PRIMARY: 'primary',
|
|
368
367
|
SECONDARY: 'secondary',
|
|
369
368
|
GHOST: 'ghost',
|
|
@@ -386,7 +385,7 @@ const SourceIconButtonSize = {
|
|
|
386
385
|
DEFAULT: 'default',
|
|
387
386
|
};
|
|
388
387
|
|
|
389
|
-
const
|
|
388
|
+
const SourceIconButtonContext = {
|
|
390
389
|
DEFAULT: 'default',
|
|
391
390
|
ERROR: 'error',
|
|
392
391
|
SUCCESS: 'success',
|
|
@@ -404,15 +403,15 @@ class SourceLogoLoadingComponent {
|
|
|
404
403
|
constructor() {
|
|
405
404
|
this.size = input(32, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
406
405
|
this.strokeColor = input('var(--src-color-accent-500)', ...(ngDevMode ? [{ debugName: "strokeColor" }] : []));
|
|
407
|
-
this.testID = input('', ...(ngDevMode ?
|
|
406
|
+
this.testID = input('', { ...(ngDevMode ? { debugName: "testID" } : {}), alias: 'data-testid' });
|
|
408
407
|
}
|
|
409
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
410
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
408
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceLogoLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
409
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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 [attr.data-testid]=\"testID()\"\n [ngStyle]=\"{\n '--srcLogoLoadingSize': size() + 'px',\n '--srcLogoLoadingStroke': strokeColor(),\n }\"\n class=\"src-logo-loading\"\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 }); }
|
|
411
410
|
}
|
|
412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
411
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceLogoLoadingComponent, decorators: [{
|
|
413
412
|
type: Component,
|
|
414
|
-
args: [{ selector: 'src-logo-loading', imports: [NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n
|
|
415
|
-
}] });
|
|
413
|
+
args: [{ selector: 'src-logo-loading', imports: [NgStyle], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [attr.data-testid]=\"testID()\"\n [ngStyle]=\"{\n '--srcLogoLoadingSize': size() + 'px',\n '--srcLogoLoadingStroke': strokeColor(),\n }\"\n class=\"src-logo-loading\"\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"] }]
|
|
414
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeColor", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }] } });
|
|
416
415
|
|
|
417
416
|
class SourceSliderComponent {
|
|
418
417
|
constructor() {
|
|
@@ -427,8 +426,10 @@ class SourceSliderComponent {
|
|
|
427
426
|
this.showTicks = input(false, ...(ngDevMode ? [{ debugName: "showTicks" }] : []));
|
|
428
427
|
this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
429
428
|
this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
|
|
430
|
-
this.testID = input('', ...(ngDevMode ?
|
|
429
|
+
this.testID = input('', { ...(ngDevMode ? { debugName: "testID" } : {}), alias: 'data-testid' });
|
|
430
|
+
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
431
431
|
this.onChange = output();
|
|
432
|
+
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
432
433
|
this.onInput = output();
|
|
433
434
|
this.tickPositions = computed(() => {
|
|
434
435
|
if (this.showTicks()) {
|
|
@@ -466,15 +467,13 @@ class SourceSliderComponent {
|
|
|
466
467
|
this.sliderValue.set(calculateValue);
|
|
467
468
|
return newValue;
|
|
468
469
|
}
|
|
469
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
470
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
470
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
471
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SourceSliderComponent, isStandalone: true, selector: "src-slider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, thumbSize: { classPropertyName: "thumbSize", publicName: "thumbSize", isSignal: true, isRequired: false, transformFunction: null }, trackHeight: { classPropertyName: "trackHeight", publicName: "trackHeight", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onInput: "onInput" }, ngImport: i0, template: "<div\n [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 class=\"src-slider\"\n>\n <input\n (change)=\"change($event)\"\n (input)=\"input($event)\"\n [id]=\"id()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [disabled]=\"isDisabled()\"\n [value]=\"sliderValue()\"\n [attr.data-testid]=\"testID() + '-input'\"\n type=\"range\"\n class=\"src-slider__input\"\n />\n <div [style.width]=\"filledWidth()\" class=\"src-slider__filled-track\"></div>\n\n <div [style.left]=\"thumbPosition()\" class=\"src-slider__thumb\">\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 [style.left]=\"tick\" class=\"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--vertical{transform:rotate(-90deg)}.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);-webkit-appearance:none;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);display:flex;align-items:center;justify-content:center;color:var(--srcSliderThumbIconColor);box-shadow:var(--srcSliderThumbShadow);z-index:1;transition:all .35s ease;pointer-events:none}.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 }); }
|
|
471
472
|
}
|
|
472
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
473
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceSliderComponent, decorators: [{
|
|
473
474
|
type: Component,
|
|
474
|
-
args: [{ selector: 'src-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n
|
|
475
|
-
}] });
|
|
476
|
-
|
|
477
|
-
const SOURCE_MODAL_ELEMENT_DATA = new InjectionToken('Source Modal data');
|
|
475
|
+
args: [{ selector: 'src-slider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\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 class=\"src-slider\"\n>\n <input\n (change)=\"change($event)\"\n (input)=\"input($event)\"\n [id]=\"id()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [disabled]=\"isDisabled()\"\n [value]=\"sliderValue()\"\n [attr.data-testid]=\"testID() + '-input'\"\n type=\"range\"\n class=\"src-slider__input\"\n />\n <div [style.width]=\"filledWidth()\" class=\"src-slider__filled-track\"></div>\n\n <div [style.left]=\"thumbPosition()\" class=\"src-slider__thumb\">\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 [style.left]=\"tick\" class=\"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--vertical{transform:rotate(-90deg)}.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);-webkit-appearance:none;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);display:flex;align-items:center;justify-content:center;color:var(--srcSliderThumbIconColor);box-shadow:var(--srcSliderThumbShadow);z-index:1;transition:all .35s ease;pointer-events:none}.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"] }]
|
|
476
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], thumbSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbSize", required: false }] }], trackHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackHeight", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onInput: [{ type: i0.Output, args: ["onInput"] }] } });
|
|
478
477
|
|
|
479
478
|
const svgIcons = {
|
|
480
479
|
info: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M11.1 16.7999H12.9V10.7999H11.1V16.7999ZM11.9947 8.9999C12.2482 8.9999 12.4625 8.91415 12.6375 8.74265C12.8125 8.57115 12.9 8.35865 12.9 8.10515C12.9 7.85165 12.8142 7.6374 12.6427 7.4624C12.4712 7.2874 12.2587 7.1999 12.0052 7.1999C11.7517 7.1999 11.5375 7.28565 11.3625 7.45715C11.1875 7.62865 11.1 7.84115 11.1 8.09465C11.1 8.34815 11.1857 8.5624 11.3572 8.7374C11.5287 8.9124 11.7412 8.9999 11.9947 8.9999ZM12.007 21.5999C10.6857 21.5999 9.44166 21.3499 8.27499 20.8499C7.10833 20.3499 6.08749 19.6624 5.21249 18.7874C4.33749 17.9124 3.64999 16.8919 3.14999 15.7259C2.64999 14.5599 2.39999 13.3141 2.39999 11.9884C2.39999 10.6627 2.64999 9.42074 3.14999 8.2624C3.64999 7.10407 4.33749 6.0874 5.21249 5.2124C6.08749 4.3374 7.10799 3.6499 8.27399 3.1499C9.43999 2.6499 10.6858 2.3999 12.0115 2.3999C13.3372 2.3999 14.5792 2.6499 15.7375 3.1499C16.8958 3.6499 17.9125 4.3374 18.7875 5.2124C19.6625 6.0874 20.35 7.1059 20.85 8.2679C21.35 9.43007 21.6 10.6717 21.6 11.9929C21.6 13.3142 21.35 14.5582 20.85 15.7249C20.35 16.8916 19.6625 17.9124 18.7875 18.7874C17.9125 19.6624 16.894 20.3499 15.732 20.8499C14.5698 21.3499 13.3282 21.5999 12.007 21.5999Z" fill="#017BFF"/></svg>',
|
|
@@ -500,12 +499,22 @@ const sourceModalIcon = [
|
|
|
500
499
|
},
|
|
501
500
|
];
|
|
502
501
|
|
|
502
|
+
const SourceModalContext = {
|
|
503
|
+
DEFAULT: 'default',
|
|
504
|
+
INFO: 'info',
|
|
505
|
+
SUCCESS: 'success',
|
|
506
|
+
WARNING: 'warning',
|
|
507
|
+
ERROR: 'error',
|
|
508
|
+
};
|
|
509
|
+
|
|
510
|
+
const SOURCE_MODAL_ELEMENT_DATA = new InjectionToken('Source Modal data');
|
|
511
|
+
|
|
503
512
|
class SourceModalElementComponent {
|
|
504
513
|
constructor() {
|
|
505
514
|
this.data = inject(SOURCE_MODAL_ELEMENT_DATA);
|
|
506
515
|
this.http = inject(HttpClient);
|
|
507
516
|
this.sanitizer = inject(DomSanitizer);
|
|
508
|
-
this.
|
|
517
|
+
this.context = signal(this.data()?.context || 'default', ...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
509
518
|
this.testID = signal(this.data().testID || 'src-modal-element', ...(ngDevMode ? [{ debugName: "testID" }] : []));
|
|
510
519
|
this.dialogEl = viewChild('dialogEl', ...(ngDevMode ? [{ debugName: "dialogEl" }] : []));
|
|
511
520
|
this.closeEvent = output();
|
|
@@ -536,24 +545,25 @@ class SourceModalElementComponent {
|
|
|
536
545
|
return this.sanitizer.bypassSecurityTrustHtml(svgContent);
|
|
537
546
|
}
|
|
538
547
|
hasIcon() {
|
|
539
|
-
return (this.data().
|
|
540
|
-
!!sourceModalIcon.find((icon) => icon.name === this.data().
|
|
548
|
+
return (this.data().context !== 'default' &&
|
|
549
|
+
!!sourceModalIcon.find((icon) => icon.name === this.data().context));
|
|
541
550
|
}
|
|
542
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
543
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
551
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceModalElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
552
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SourceModalElementComponent, isStandalone: true, selector: "src-modal-element", outputs: { closeEvent: "closeEvent", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog #dialogEl>\n <div [attr.data-testid]=\"testID()\" class=\"src-modal\">\n <div class=\"src-modal__header\">\n @if (data().closeButton) {\n <button\n (click)=\"close()\"\n [attr.data-testid]=\"testID() + '-header-close'\"\n type=\"button\"\n class=\"src-icon-button src-icon-button--plain src-icon-button--round src-icon-button--size-sm src-modal__close\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M10.0001 11.229L6.68618 14.5429C6.51951 14.7096 6.31818 14.7896 6.08218 14.7829C5.84618 14.7756 5.64485 14.6886 5.47818 14.5219C5.31151 14.3553 5.22818 14.1506 5.22818 13.9079C5.22818 13.6646 5.31151 13.4596 5.47818 13.2929L8.77107 10L5.45718 6.68615C5.29051 6.51949 5.21051 6.31482 5.21718 6.07215C5.22451 5.82882 5.31151 5.62382 5.47818 5.45715C5.64485 5.29049 5.84951 5.20715 6.09218 5.20715C6.33551 5.20715 6.54051 5.29049 6.70718 5.45715L10.0001 8.77105L13.314 5.45715C13.4806 5.29049 13.6853 5.20715 13.928 5.20715C14.1713 5.20715 14.3763 5.29049 14.543 5.45715C14.7096 5.62382 14.793 5.82882 14.793 6.07215C14.793 6.31482 14.7096 6.51949 14.543 6.68615L11.2291 10L14.543 13.3139C14.7096 13.4806 14.793 13.6819 14.793 13.9179C14.793 14.1539 14.7096 14.3553 14.543 14.5219C14.3763 14.6886 14.1713 14.7719 13.928 14.7719C13.6853 14.7719 13.4806 14.6886 13.314 14.5219L10.0001 11.229Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n }\n </div>\n\n <div [class.src-modal__body--icon]=\"hasIcon()\" class=\"src-modal__body\">\n @if (hasIcon()) {\n <div\n [innerHTML]=\"getIconSvg(data().context!)\"\n class=\"src-modal__icon\"\n ></div>\n }\n <div\n [attr.data-testid]=\"testID() + '-header-title'\"\n class=\"src-modal__title\"\n >\n {{ data().headerTitle }}\n </div>\n\n <div class=\"src-modal__scroll-box\">\n @if (data().content; as content) {\n <div [innerHTML]=\"content\"></div>\n }\n </div>\n </div>\n\n @if (data().footerButtons) {\n <div class=\"src-modal__footer\">\n @if (isArrayOfArrays(data().footerButtons!)) {\n @for (\n buttonGroup of getButtonGroups(data().footerButtons!);\n track $index\n ) {\n <div class=\"src-modal__footer-group\">\n @for (footerButton of buttonGroup; track footerButton.label) {\n <button\n (click)=\"close(footerButton.action())\"\n [ngClass]=\"footerButton.srcButtonClasses\"\n type=\"button\"\n class=\"src-button\"\n >\n {{ footerButton.label }}\n </button>\n }\n </div>\n }\n } @else {\n <div class=\"src-modal__footer-group\">\n @for (\n footerButton of getSingleButtonArray(data().footerButtons!);\n track footerButton.label\n ) {\n <button\n (click)=\"close(footerButton.action())\"\n [ngClass]=\"footerButton.srcButtonClasses\"\n type=\"button\"\n class=\"src-button\"\n >\n {{ footerButton.label }}\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n</dialog>\n", styles: [".src-modal .src-icon-button svg{width:var(--src-icon-size);height:var(--src-icon-size)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
544
553
|
}
|
|
545
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
554
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceModalElementComponent, decorators: [{
|
|
546
555
|
type: Component,
|
|
547
|
-
args: [{ selector: 'src-modal-element', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<dialog #dialogEl>\n <div
|
|
548
|
-
}] });
|
|
556
|
+
args: [{ selector: 'src-modal-element', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<dialog #dialogEl>\n <div [attr.data-testid]=\"testID()\" class=\"src-modal\">\n <div class=\"src-modal__header\">\n @if (data().closeButton) {\n <button\n (click)=\"close()\"\n [attr.data-testid]=\"testID() + '-header-close'\"\n type=\"button\"\n class=\"src-icon-button src-icon-button--plain src-icon-button--round src-icon-button--size-sm src-modal__close\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M10.0001 11.229L6.68618 14.5429C6.51951 14.7096 6.31818 14.7896 6.08218 14.7829C5.84618 14.7756 5.64485 14.6886 5.47818 14.5219C5.31151 14.3553 5.22818 14.1506 5.22818 13.9079C5.22818 13.6646 5.31151 13.4596 5.47818 13.2929L8.77107 10L5.45718 6.68615C5.29051 6.51949 5.21051 6.31482 5.21718 6.07215C5.22451 5.82882 5.31151 5.62382 5.47818 5.45715C5.64485 5.29049 5.84951 5.20715 6.09218 5.20715C6.33551 5.20715 6.54051 5.29049 6.70718 5.45715L10.0001 8.77105L13.314 5.45715C13.4806 5.29049 13.6853 5.20715 13.928 5.20715C14.1713 5.20715 14.3763 5.29049 14.543 5.45715C14.7096 5.62382 14.793 5.82882 14.793 6.07215C14.793 6.31482 14.7096 6.51949 14.543 6.68615L11.2291 10L14.543 13.3139C14.7096 13.4806 14.793 13.6819 14.793 13.9179C14.793 14.1539 14.7096 14.3553 14.543 14.5219C14.3763 14.6886 14.1713 14.7719 13.928 14.7719C13.6853 14.7719 13.4806 14.6886 13.314 14.5219L10.0001 11.229Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n }\n </div>\n\n <div [class.src-modal__body--icon]=\"hasIcon()\" class=\"src-modal__body\">\n @if (hasIcon()) {\n <div\n [innerHTML]=\"getIconSvg(data().context!)\"\n class=\"src-modal__icon\"\n ></div>\n }\n <div\n [attr.data-testid]=\"testID() + '-header-title'\"\n class=\"src-modal__title\"\n >\n {{ data().headerTitle }}\n </div>\n\n <div class=\"src-modal__scroll-box\">\n @if (data().content; as content) {\n <div [innerHTML]=\"content\"></div>\n }\n </div>\n </div>\n\n @if (data().footerButtons) {\n <div class=\"src-modal__footer\">\n @if (isArrayOfArrays(data().footerButtons!)) {\n @for (\n buttonGroup of getButtonGroups(data().footerButtons!);\n track $index\n ) {\n <div class=\"src-modal__footer-group\">\n @for (footerButton of buttonGroup; track footerButton.label) {\n <button\n (click)=\"close(footerButton.action())\"\n [ngClass]=\"footerButton.srcButtonClasses\"\n type=\"button\"\n class=\"src-button\"\n >\n {{ footerButton.label }}\n </button>\n }\n </div>\n }\n } @else {\n <div class=\"src-modal__footer-group\">\n @for (\n footerButton of getSingleButtonArray(data().footerButtons!);\n track footerButton.label\n ) {\n <button\n (click)=\"close(footerButton.action())\"\n [ngClass]=\"footerButton.srcButtonClasses\"\n type=\"button\"\n class=\"src-button\"\n >\n {{ footerButton.label }}\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n</dialog>\n", styles: [".src-modal .src-icon-button svg{width:var(--src-icon-size);height:var(--src-icon-size)}\n"] }]
|
|
557
|
+
}], propDecorators: { dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], closeEvent: [{ type: i0.Output, args: ["closeEvent"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
549
558
|
|
|
550
559
|
class SourceModalElementService {
|
|
551
560
|
register(viewRef) {
|
|
552
561
|
this.viewRef = viewRef;
|
|
553
562
|
}
|
|
554
563
|
open(data) {
|
|
555
|
-
if (!this.viewRef)
|
|
564
|
+
if (!this.viewRef) {
|
|
556
565
|
throw new Error('Modal container not registered');
|
|
566
|
+
}
|
|
557
567
|
const dataSignal = signal(data, ...(ngDevMode ? [{ debugName: "dataSignal" }] : []));
|
|
558
568
|
const injector = Injector.create({
|
|
559
569
|
providers: [
|
|
@@ -573,48 +583,38 @@ class SourceModalElementService {
|
|
|
573
583
|
});
|
|
574
584
|
return modalRef;
|
|
575
585
|
}
|
|
576
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
577
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
586
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceModalElementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
587
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceModalElementService, providedIn: 'root' }); }
|
|
578
588
|
}
|
|
579
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
589
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceModalElementService, decorators: [{
|
|
580
590
|
type: Injectable,
|
|
581
591
|
args: [{ providedIn: 'root' }]
|
|
582
592
|
}] });
|
|
583
593
|
|
|
584
594
|
class SourceOverlayContainerComponent {
|
|
585
595
|
constructor() {
|
|
586
|
-
this.srcModalContainerRef = viewChild('srcModalContainerRef', ...(ngDevMode ?
|
|
587
|
-
read: ViewContainerRef,
|
|
588
|
-
}]));
|
|
596
|
+
this.srcModalContainerRef = viewChild('srcModalContainerRef', { ...(ngDevMode ? { debugName: "srcModalContainerRef" } : {}), read: ViewContainerRef });
|
|
589
597
|
this.srcModalElementService = inject(SourceModalElementService);
|
|
590
|
-
this.
|
|
591
|
-
this.
|
|
592
|
-
|
|
598
|
+
this._register = effect(() => {
|
|
599
|
+
const ref = this.srcModalContainerRef();
|
|
600
|
+
if (ref) {
|
|
601
|
+
this.srcModalElementService.register(ref);
|
|
602
|
+
}
|
|
603
|
+
}, ...(ngDevMode ? [{ debugName: "_register" }] : []));
|
|
593
604
|
}
|
|
594
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
595
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
605
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceOverlayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
606
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: SourceOverlayContainerComponent, isStandalone: true, selector: "src-overlay-container", viewQueries: [{ propertyName: "srcModalContainerRef", first: true, predicate: ["srcModalContainerRef"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"overlay-container_3dsourcecom\">\n <ng-container #srcModalContainerRef></ng-container>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
596
607
|
}
|
|
597
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SourceOverlayContainerComponent, decorators: [{
|
|
598
609
|
type: Component,
|
|
599
610
|
args: [{ selector: 'src-overlay-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"overlay-container_3dsourcecom\">\n <ng-container #srcModalContainerRef></ng-container>\n</div>\n" }]
|
|
600
|
-
}]
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
DEFAULT: 'default',
|
|
604
|
-
INFO: 'info',
|
|
605
|
-
SUCCESS: 'success',
|
|
606
|
-
WARNING: 'warning',
|
|
607
|
-
ERROR: 'error',
|
|
608
|
-
};
|
|
609
|
-
|
|
610
|
-
const SourceModalSize = {
|
|
611
|
-
SMALL: 'small',
|
|
612
|
-
DEFAULT: 'default',
|
|
613
|
-
};
|
|
611
|
+
}], propDecorators: { srcModalContainerRef: [{ type: i0.ViewChild, args: ['srcModalContainerRef', { ...{
|
|
612
|
+
read: ViewContainerRef,
|
|
613
|
+
}, isSignal: true }] }] } });
|
|
614
614
|
|
|
615
615
|
/**
|
|
616
616
|
* Generated bundle index. Do not edit.
|
|
617
617
|
*/
|
|
618
618
|
|
|
619
|
-
export { SOURCE_MODAL_ELEMENT_DATA, SourceBadgeComponent,
|
|
619
|
+
export { SOURCE_MODAL_ELEMENT_DATA, SourceBadgeComponent, SourceBadgeContext, SourceBadgeSize, SourceBannerComponent, SourceBannerContext, SourceBannerSize, SourceButtonAppearance, SourceButtonComponent, SourceButtonContext, SourceButtonSize, SourceButtonType, SourceButtonWeight, SourceCopyrightComponent, SourceDividerComponent, SourceHintComponent, SourceHintContext, SourceHintSize, SourceIconButtonAppearance, SourceIconButtonComponent, SourceIconButtonContext, SourceIconButtonShape, SourceIconButtonSize, SourceIconButtonType, SourceIconButtonWeight, SourceLoadingComponent, SourceLogoLoadingComponent, SourceModalContext, SourceModalElementComponent, SourceModalElementService, SourceOverlayContainerComponent, SourceSliderComponent, sourceButtonDefaultConfig, sourceModalIcon };
|
|
620
620
|
//# sourceMappingURL=3dsource-source-ui-native.mjs.map
|