@3dsource/source-ui-native 3.2.1 → 3.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/3dsource-source-ui-native.mjs +10 -10
- package/fesm2022/3dsource-source-ui-native.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/elements/_src-badge.scss +116 -0
- package/styles/elements/_src-banner.scss +101 -0
- package/styles/elements/_src-button.scss +1 -1
- package/styles/elements/_src-checkbox.scss +16 -5
- package/styles/elements/_src-divider.scss +14 -0
- package/styles/elements/_src-form.scss +2 -2
- package/styles/elements/_src-hint.scss +37 -0
- package/styles/elements/_src-icon-button.scss +1 -1
- package/styles/elements/_src-input.scss +1 -1
- package/styles/elements/_src-label.scss +1 -1
- package/styles/elements/_src-list.scss +2 -2
- package/styles/elements/_src-modal.scss +5 -5
- package/styles/elements/_src-popover.scss +5 -5
- package/styles/elements/_src-radio.scss +9 -2
- package/styles/elements/_src-select.scss +1 -1
- package/styles/elements/_src-textarea.scss +3 -3
- package/styles/elements/elements.scss +4 -0
- package/styles/source-ui-native.css +444 -182
- package/styles/source-ui-native.css.map +1 -1
- package/styles/source-ui-native.min.css +1 -1
- package/styles/variables/color/dark.scss +31 -30
- package/styles/variables/color/light.scss +31 -30
- package/styles/variables/layout/_lg.scss +17 -20
- package/styles/variables/layout/_md.scss +16 -19
- package/styles/variables/layout/_sm.scss +17 -20
- package/styles/variables/layout/_xl.scss +16 -19
- package/styles/variables/primitives/primitives.scss +33 -22
- package/styles/variables/ui/_lg.scss +7 -7
- package/styles/variables/ui/_md.scss +7 -7
- package/styles/variables/ui/_sm.scss +7 -7
- package/styles/variables/ui/_xl.scss +7 -7
|
@@ -29,11 +29,11 @@ class SourceBadgeComponent {
|
|
|
29
29
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
30
30
|
}
|
|
31
31
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SourceBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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 }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\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: ["
|
|
32
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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 }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\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: [""], 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 }); }
|
|
33
33
|
}
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SourceBadgeComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
|
-
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 [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\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"
|
|
36
|
+
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 [attr.role]=\"role()\"\n [attr.aria-label]=\"ariaLabel()\"\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" }]
|
|
37
37
|
}], 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 }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
38
38
|
|
|
39
39
|
const SourceBadgeContext = {
|
|
@@ -71,14 +71,14 @@ class SourceBannerComponent {
|
|
|
71
71
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
72
72
|
}
|
|
73
73
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SourceBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
74
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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 }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "isFullWidth() ? \"100%\" : \"auto\"", "style.display": "\"block\"" } }, ngImport: i0, template: "<div\n [ngClass]=\"classes()\"\n [attr.data-testid]=\"testID()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n class=\"src-banner\"\n>\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
|
|
74
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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 }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "isFullWidth() ? \"100%\" : \"auto\"", "style.display": "\"block\"" } }, ngImport: i0, template: "<div\n [ngClass]=\"classes()\"\n [attr.data-testid]=\"testID()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n class=\"src-banner\"\n>\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 [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 [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)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
75
75
|
}
|
|
76
76
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SourceBannerComponent, decorators: [{
|
|
77
77
|
type: Component,
|
|
78
78
|
args: [{ selector: 'src-banner', host: {
|
|
79
79
|
'[style.width]': 'isFullWidth() ? "100%" : "auto"',
|
|
80
80
|
'[style.display]': '"block"',
|
|
81
|
-
}, imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [ngClass]=\"classes()\"\n [attr.data-testid]=\"testID()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n class=\"src-banner\"\n>\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
|
|
81
|
+
}, imports: [NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [ngClass]=\"classes()\"\n [attr.data-testid]=\"testID()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n class=\"src-banner\"\n>\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 [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 [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)}\n"] }]
|
|
82
82
|
}], 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 }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }] } });
|
|
83
83
|
|
|
84
84
|
const SourceBannerSize = {
|
|
@@ -303,11 +303,11 @@ class SourceDividerComponent {
|
|
|
303
303
|
this.testID = input('', { ...(ngDevMode ? { debugName: "testID" } : {}), alias: 'data-testid' });
|
|
304
304
|
}
|
|
305
305
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SourceDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
306
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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 }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<hr\n [style.--srcDividerColor]=\"thickness()\"\n [style.--srcDividerThickness]=\"color()\"\n [attr.data-testid]=\"testID()\"\n class=\"src-divider\"\n/>\n", styles: ["
|
|
306
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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 }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<hr\n [style.--srcDividerColor]=\"thickness()\"\n [style.--srcDividerThickness]=\"color()\"\n [attr.data-testid]=\"testID()\"\n class=\"src-divider\"\n/>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
307
307
|
}
|
|
308
308
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SourceDividerComponent, decorators: [{
|
|
309
309
|
type: Component,
|
|
310
|
-
args: [{ selector: 'src-divider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr\n [style.--srcDividerColor]=\"thickness()\"\n [style.--srcDividerThickness]=\"color()\"\n [attr.data-testid]=\"testID()\"\n class=\"src-divider\"\n/>\n"
|
|
310
|
+
args: [{ selector: 'src-divider', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr\n [style.--srcDividerColor]=\"thickness()\"\n [style.--srcDividerThickness]=\"color()\"\n [attr.data-testid]=\"testID()\"\n class=\"src-divider\"\n/>\n" }]
|
|
311
311
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }] } });
|
|
312
312
|
|
|
313
313
|
class SourceHintComponent {
|
|
@@ -326,11 +326,11 @@ class SourceHintComponent {
|
|
|
326
326
|
this.computedAriaLive = computed(() => this.ariaLive() ?? (this.context() === 'error' ? 'assertive' : undefined), ...(ngDevMode ? [{ debugName: "computedAriaLive" }] : []));
|
|
327
327
|
}
|
|
328
328
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SourceHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
329
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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 }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", 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 [attr.data-testid]=\"testID()\"\n [id]=\"id()\"\n [attr.role]=\"computedRole()\"\n [attr.aria-live]=\"computedAriaLive()\"\n class=\"src-hint\"\n>\n <ng-content select=\"[srcIconPrefix]\"></ng-content>\n <ng-content></ng-content>\n</p>\n", styles: [".src-hint
|
|
329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", 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 }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", 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 [attr.data-testid]=\"testID()\"\n [id]=\"id()\"\n [attr.role]=\"computedRole()\"\n [attr.aria-live]=\"computedAriaLive()\"\n class=\"src-hint\"\n>\n <ng-content select=\"[srcIconPrefix]\"></ng-content>\n <ng-content></ng-content>\n</p>\n", styles: [".src-hint>[srcIconPrefix]{width:var(--srcHintIconSize);height:var(--srcHintIconSize);margin-right:var(--src-gap-md, 4px);color:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
330
330
|
}
|
|
331
331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SourceHintComponent, decorators: [{
|
|
332
332
|
type: Component,
|
|
333
|
-
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 [attr.data-testid]=\"testID()\"\n [id]=\"id()\"\n [attr.role]=\"computedRole()\"\n [attr.aria-live]=\"computedAriaLive()\"\n class=\"src-hint\"\n>\n <ng-content select=\"[srcIconPrefix]\"></ng-content>\n <ng-content></ng-content>\n</p>\n", styles: [".src-hint
|
|
333
|
+
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 [attr.data-testid]=\"testID()\"\n [id]=\"id()\"\n [attr.role]=\"computedRole()\"\n [attr.aria-live]=\"computedAriaLive()\"\n class=\"src-hint\"\n>\n <ng-content select=\"[srcIconPrefix]\"></ng-content>\n <ng-content></ng-content>\n</p>\n", styles: [".src-hint>[srcIconPrefix]{width:var(--srcHintIconSize);height:var(--srcHintIconSize);margin-right:var(--src-gap-md, 4px);color:currentColor}\n"] }]
|
|
334
334
|
}], 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 }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }] } });
|
|
335
335
|
|
|
336
336
|
const SourceHintSize = {
|
|
@@ -505,11 +505,11 @@ class SourceSliderComponent {
|
|
|
505
505
|
return newValue;
|
|
506
506
|
}
|
|
507
507
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SourceSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
508
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "ariaValueText", 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.aria-label]=\"ariaLabel()\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-orientation]=\"orientation()\"\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-
|
|
508
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaValueText: { classPropertyName: "ariaValueText", publicName: "ariaValueText", 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.aria-label]=\"ariaLabel()\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-orientation]=\"orientation()\"\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-border-container-basic, #e5e7eb);--srcSliderTrackFilledBg: transparent;--srcSliderTickBg: var(--src-border-container-basic, #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 }); }
|
|
509
509
|
}
|
|
510
510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SourceSliderComponent, decorators: [{
|
|
511
511
|
type: Component,
|
|
512
|
-
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.aria-label]=\"ariaLabel()\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-orientation]=\"orientation()\"\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-
|
|
512
|
+
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.aria-label]=\"ariaLabel()\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-orientation]=\"orientation()\"\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-border-container-basic, #e5e7eb);--srcSliderTrackFilledBg: transparent;--srcSliderTickBg: var(--src-border-container-basic, #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"] }]
|
|
513
513
|
}], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaValueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaValueText", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onInput: [{ type: i0.Output, args: ["onInput"] }] } });
|
|
514
514
|
|
|
515
515
|
const svgIcons = {
|