@3dsource/source-ui-native 2.0.4 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/fesm2022/3dsource-source-ui-native.mjs +53 -62
- package/fesm2022/3dsource-source-ui-native.mjs.map +1 -1
- package/index.d.ts +44 -58
- package/index.d.ts.map +1 -0
- package/package.json +1 -1
- 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 +136 -146
- package/styles/source-ui-native.css.map +1 -1
- package/styles/source-ui-native.min.css +1 -1
package/README.md
CHANGED
|
@@ -52,13 +52,13 @@ The components can be used directly in your HTML:
|
|
|
52
52
|
### Button Component
|
|
53
53
|
|
|
54
54
|
```html
|
|
55
|
-
<src-button
|
|
55
|
+
<src-button weight="primary" size="md"> Click Me </src-button>
|
|
56
56
|
```
|
|
57
57
|
|
|
58
58
|
### Badge Component
|
|
59
59
|
|
|
60
60
|
```html
|
|
61
|
-
<src-badge
|
|
61
|
+
<src-badge context="info">Info</src-badge>
|
|
62
62
|
```
|
|
63
63
|
|
|
64
64
|
### Loading Component
|
|
@@ -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
14
|
this.testID = input('', ...(ngDevMode ? [{ debugName: "testID", alias: 'data-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]
|
|
@@ -26,21 +26,19 @@ class SourceBadgeComponent {
|
|
|
26
26
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
27
27
|
}
|
|
28
28
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: SourceBadgeComponent, isStandalone: true, selector: "src-badge", inputs: { backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null },
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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 class=\"src-badge\"\n [ngClass]=\"classes()\"\n [ngStyle]=\"\n context()\n ? {}\n : {\n '--srcBadgeBackgroundColor': backgroundColor(),\n '--srcBadgeTextColor': textColor(),\n }\n \"\n [attr.data-testid]=\"testID()\"\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
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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 class=\"src-badge\"\n [ngClass]=\"classes()\"\n [ngStyle]=\"\n
|
|
33
|
+
args: [{ selector: 'src-badge', imports: [NgStyle, NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"src-badge\"\n [ngClass]=\"classes()\"\n [ngStyle]=\"\n context()\n ? {}\n : {\n '--srcBadgeBackgroundColor': backgroundColor(),\n '--srcBadgeTextColor': textColor(),\n }\n \"\n [attr.data-testid]=\"testID()\"\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
34
|
}] });
|
|
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
|
-
// isCompact - deprecated
|
|
60
|
-
this.isCompact = input(false, ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
|
|
61
57
|
this.testID = input('', ...(ngDevMode ? [{ debugName: "testID", alias: 'data-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
67
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
72
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: SourceBannerComponent, isStandalone: true, selector: "src-banner", inputs: {
|
|
68
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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 class=\"src-banner\" [ngClass]=\"classes()\" [attr.data-testid]=\"testID()\">\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
70
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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
|
|
75
|
+
}, imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"src-banner\" [ngClass]=\"classes()\" [attr.data-testid]=\"testID()\">\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"] }]
|
|
80
76
|
}] });
|
|
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,
|
|
@@ -180,16 +177,15 @@ 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" }] : []));
|
|
@@ -200,29 +196,30 @@ class SourceButtonComponent {
|
|
|
200
196
|
const config = this.getConfig(this.srcButtonConfig() ?? {
|
|
201
197
|
type: this.type(),
|
|
202
198
|
appearance: this.appearance(),
|
|
203
|
-
|
|
199
|
+
weight: this.weight(),
|
|
204
200
|
size: this.size(),
|
|
205
|
-
|
|
201
|
+
context: this.context(),
|
|
206
202
|
customClass: this.customClass(),
|
|
207
|
-
hasDisclosure: this.hasDisclosure(),
|
|
208
203
|
isFullWidth: this.isFullWidth(),
|
|
209
204
|
formID: this.formID(),
|
|
210
205
|
iconButton: this.iconButton(),
|
|
211
206
|
isPressed: this.isPressed(),
|
|
212
207
|
isDisabled: this.isDisabled(),
|
|
213
208
|
isLoading: this.isLoading(),
|
|
209
|
+
isInverted: this.isInverted(),
|
|
214
210
|
testID: this.testID(),
|
|
215
211
|
});
|
|
216
212
|
return [
|
|
217
213
|
config.appearance ? `src-button--${config.appearance}` : '',
|
|
218
|
-
config.
|
|
214
|
+
config.weight ? `src-button--${config.weight}` : '',
|
|
219
215
|
config.size ? `src-button--size-${config.size}` : '',
|
|
220
|
-
config.
|
|
216
|
+
config.context ? `src-button--context-${config.context}` : '',
|
|
221
217
|
config.hasDisclosure ? 'src-button--disclosure' : '',
|
|
222
218
|
config.isPressed ? 'src-button--pressed' : '',
|
|
223
219
|
config.isFullWidth ? 'src-button--full-width' : '',
|
|
224
220
|
config.iconButton ? 'src-button--icon-button' : '',
|
|
225
221
|
config.isLoading ? 'src-button--loading' : '',
|
|
222
|
+
config.isInverted ? 'src-button--inverted' : '',
|
|
226
223
|
config.customClass && Array.isArray(config.customClass)
|
|
227
224
|
? [...config.customClass]
|
|
228
225
|
: (config.customClass ?? ''),
|
|
@@ -241,9 +238,9 @@ class SourceButtonComponent {
|
|
|
241
238
|
return {
|
|
242
239
|
type: config?.type || sourceButtonDefaultConfig.type,
|
|
243
240
|
appearance: config?.appearance || sourceButtonDefaultConfig.appearance,
|
|
244
|
-
|
|
241
|
+
weight: config?.weight || sourceButtonDefaultConfig.weight,
|
|
245
242
|
size: config?.size || sourceButtonDefaultConfig.size,
|
|
246
|
-
|
|
243
|
+
context: config?.context || sourceButtonDefaultConfig.context,
|
|
247
244
|
customClass: config?.customClass || sourceButtonDefaultConfig.customClass,
|
|
248
245
|
hasDisclosure: config?.hasDisclosure || sourceButtonDefaultConfig.hasDisclosure,
|
|
249
246
|
isFullWidth: config?.isFullWidth || sourceButtonDefaultConfig.isFullWidth,
|
|
@@ -251,16 +248,17 @@ class SourceButtonComponent {
|
|
|
251
248
|
isPressed: config?.isPressed || sourceButtonDefaultConfig.isPressed,
|
|
252
249
|
isDisabled: config?.isDisabled || sourceButtonDefaultConfig.isDisabled,
|
|
253
250
|
isLoading: config?.isLoading || sourceButtonDefaultConfig.isLoading,
|
|
251
|
+
isInverted: config?.isInverted || sourceButtonDefaultConfig.isInverted,
|
|
254
252
|
formID: config?.formID || sourceButtonDefaultConfig.formID,
|
|
255
253
|
testID: config?.testID || sourceButtonDefaultConfig.testID,
|
|
256
254
|
};
|
|
257
255
|
}
|
|
258
256
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 },
|
|
257
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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
258
|
}
|
|
261
259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceButtonComponent, decorators: [{
|
|
262
260
|
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
|
|
261
|
+
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
262
|
}] });
|
|
265
263
|
|
|
266
264
|
class SourceCopyrightComponent {
|
|
@@ -292,17 +290,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
292
290
|
class SourceHintComponent {
|
|
293
291
|
constructor() {
|
|
294
292
|
this.isError = input(false, ...(ngDevMode ? [{ debugName: "isError" }] : []));
|
|
295
|
-
this.
|
|
293
|
+
this.context = input('default', ...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
296
294
|
this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
297
|
-
// DEPRECATED: Use `size` instead
|
|
298
|
-
this.isCompact = input(false, ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
|
|
299
295
|
}
|
|
300
296
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: SourceHintComponent, isStandalone: true, selector: "src-hint", inputs: { isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null },
|
|
297
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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 class=\"src-hint\"\n [ngClass]=\"'src-hint--context-' + context() + ' src-hint--size-' + size()\"\n [class.src-hint--error]=\"isError()\"\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
298
|
}
|
|
303
299
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceHintComponent, decorators: [{
|
|
304
300
|
type: Component,
|
|
305
|
-
args: [{ selector: 'src-hint', imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<p\n class=\"src-hint\"\n [ngClass]=\"'src-hint--
|
|
301
|
+
args: [{ selector: 'src-hint', imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<p\n class=\"src-hint\"\n [ngClass]=\"'src-hint--context-' + context() + ' src-hint--size-' + size()\"\n [class.src-hint--error]=\"isError()\"\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"] }]
|
|
306
302
|
}] });
|
|
307
303
|
|
|
308
304
|
const SourceHintSize = {
|
|
@@ -312,7 +308,7 @@ const SourceHintSize = {
|
|
|
312
308
|
XL: 'xl',
|
|
313
309
|
};
|
|
314
310
|
|
|
315
|
-
const
|
|
311
|
+
const SourceHintContext = {
|
|
316
312
|
DEFAULT: 'default',
|
|
317
313
|
ERROR: 'error',
|
|
318
314
|
SUCCESS: 'success',
|
|
@@ -324,10 +320,10 @@ class SourceIconButtonComponent {
|
|
|
324
320
|
this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
325
321
|
this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
326
322
|
this.appearance = input('filled', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
327
|
-
this.
|
|
323
|
+
this.weight = input('secondary', ...(ngDevMode ? [{ debugName: "weight" }] : []));
|
|
328
324
|
this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
329
325
|
this.shape = input('square', ...(ngDevMode ? [{ debugName: "shape" }] : []));
|
|
330
|
-
this.
|
|
326
|
+
this.context = input('default', ...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
331
327
|
this.counter = input(undefined, ...(ngDevMode ? [{ debugName: "counter" }] : []));
|
|
332
328
|
this.isPressed = input(false, ...(ngDevMode ? [{ debugName: "isPressed" }] : []));
|
|
333
329
|
this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
@@ -336,9 +332,9 @@ class SourceIconButtonComponent {
|
|
|
336
332
|
this.classes = computed(() => [
|
|
337
333
|
`src-icon-button--${this.shape()}`,
|
|
338
334
|
`src-icon-button--${this.appearance()}`,
|
|
339
|
-
`src-icon-button--${this.
|
|
335
|
+
`src-icon-button--${this.weight()}`,
|
|
340
336
|
`src-icon-button--size-${this.size()}`,
|
|
341
|
-
`src-icon-button--
|
|
337
|
+
`src-icon-button--context-${this.context()}`,
|
|
342
338
|
this.isPressed() ? 'src-icon-button--pressed' : '',
|
|
343
339
|
].filter(Boolean), ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
344
340
|
}
|
|
@@ -350,7 +346,7 @@ class SourceIconButtonComponent {
|
|
|
350
346
|
this.onClick.emit(event);
|
|
351
347
|
}
|
|
352
348
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
353
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 },
|
|
349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 [type]=\"type()\"\n [name]=\"name()\"\n class=\"src-icon-button\"\n [ngClass]=\"classes()\"\n [disabled]=\"isDisabled()\"\n [attr.data-testid]=\"testID()\"\n (click)=\"handleClick($event)\"\n>\n <ng-content></ng-content>\n\n @if (counter()) {\n <src-badge [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
350
|
}
|
|
355
351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceIconButtonComponent, decorators: [{
|
|
356
352
|
type: Component,
|
|
@@ -363,7 +359,7 @@ const SourceIconButtonAppearance = {
|
|
|
363
359
|
INLINE: 'inline',
|
|
364
360
|
};
|
|
365
361
|
|
|
366
|
-
const
|
|
362
|
+
const SourceIconButtonWeight = {
|
|
367
363
|
PRIMARY: 'primary',
|
|
368
364
|
SECONDARY: 'secondary',
|
|
369
365
|
GHOST: 'ghost',
|
|
@@ -386,7 +382,7 @@ const SourceIconButtonSize = {
|
|
|
386
382
|
DEFAULT: 'default',
|
|
387
383
|
};
|
|
388
384
|
|
|
389
|
-
const
|
|
385
|
+
const SourceIconButtonContext = {
|
|
390
386
|
DEFAULT: 'default',
|
|
391
387
|
ERROR: 'error',
|
|
392
388
|
SUCCESS: 'success',
|
|
@@ -505,7 +501,7 @@ class SourceModalElementComponent {
|
|
|
505
501
|
this.data = inject(SOURCE_MODAL_ELEMENT_DATA);
|
|
506
502
|
this.http = inject(HttpClient);
|
|
507
503
|
this.sanitizer = inject(DomSanitizer);
|
|
508
|
-
this.
|
|
504
|
+
this.context = signal(this.data()?.context || 'default', ...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
509
505
|
this.testID = signal(this.data().testID || 'src-modal-element', ...(ngDevMode ? [{ debugName: "testID" }] : []));
|
|
510
506
|
this.dialogEl = viewChild('dialogEl', ...(ngDevMode ? [{ debugName: "dialogEl" }] : []));
|
|
511
507
|
this.closeEvent = output();
|
|
@@ -536,15 +532,15 @@ class SourceModalElementComponent {
|
|
|
536
532
|
return this.sanitizer.bypassSecurityTrustHtml(svgContent);
|
|
537
533
|
}
|
|
538
534
|
hasIcon() {
|
|
539
|
-
return (this.data().
|
|
540
|
-
!!sourceModalIcon.find((icon) => icon.name === this.data().
|
|
535
|
+
return (this.data().context !== 'default' &&
|
|
536
|
+
!!sourceModalIcon.find((icon) => icon.name === this.data().context));
|
|
541
537
|
}
|
|
542
538
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceModalElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
543
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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
|
|
539
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 type=\"button\"\n class=\"src-icon-button src-icon-button--plain src-icon-button--round src-icon-button--size-sm src-modal__close\"\n [attr.data-testid]=\"testID() + '-header-close'\"\n (click)=\"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\" [class.src-modal__body--icon]=\"hasIcon()\">\n @if (hasIcon()) {\n <div\n class=\"src-modal__icon\"\n [innerHTML]=\"getIconSvg(data().context!)\"\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 type=\"button\"\n class=\"src-button\"\n [ngClass]=\"footerButton.srcButtonClasses\"\n (click)=\"close(footerButton.action())\"\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 type=\"button\"\n class=\"src-button\"\n [ngClass]=\"footerButton.srcButtonClasses\"\n (click)=\"close(footerButton.action())\"\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
540
|
}
|
|
545
541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceModalElementComponent, decorators: [{
|
|
546
542
|
type: Component,
|
|
547
|
-
args: [{ selector: 'src-modal-element', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<dialog #dialogEl>\n <div
|
|
543
|
+
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 type=\"button\"\n class=\"src-icon-button src-icon-button--plain src-icon-button--round src-icon-button--size-sm src-modal__close\"\n [attr.data-testid]=\"testID() + '-header-close'\"\n (click)=\"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\" [class.src-modal__body--icon]=\"hasIcon()\">\n @if (hasIcon()) {\n <div\n class=\"src-modal__icon\"\n [innerHTML]=\"getIconSvg(data().context!)\"\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 type=\"button\"\n class=\"src-button\"\n [ngClass]=\"footerButton.srcButtonClasses\"\n (click)=\"close(footerButton.action())\"\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 type=\"button\"\n class=\"src-button\"\n [ngClass]=\"footerButton.srcButtonClasses\"\n (click)=\"close(footerButton.action())\"\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"] }]
|
|
548
544
|
}] });
|
|
549
545
|
|
|
550
546
|
class SourceModalElementService {
|
|
@@ -599,7 +595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
599
595
|
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
596
|
}] });
|
|
601
597
|
|
|
602
|
-
const
|
|
598
|
+
const SourceModalContext = {
|
|
603
599
|
DEFAULT: 'default',
|
|
604
600
|
INFO: 'info',
|
|
605
601
|
SUCCESS: 'success',
|
|
@@ -607,14 +603,9 @@ const SourceModalType = {
|
|
|
607
603
|
ERROR: 'error',
|
|
608
604
|
};
|
|
609
605
|
|
|
610
|
-
const SourceModalSize = {
|
|
611
|
-
SMALL: 'small',
|
|
612
|
-
DEFAULT: 'default',
|
|
613
|
-
};
|
|
614
|
-
|
|
615
606
|
/**
|
|
616
607
|
* Generated bundle index. Do not edit.
|
|
617
608
|
*/
|
|
618
609
|
|
|
619
|
-
export { SOURCE_MODAL_ELEMENT_DATA, SourceBadgeComponent,
|
|
610
|
+
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
611
|
//# sourceMappingURL=3dsource-source-ui-native.mjs.map
|