@3dsource/source-ui 2.0.1 → 2.1.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/LICENSE +0 -0
- package/README.md +0 -0
- package/fesm2022/3dsource-source-ui.mjs +116 -53
- package/fesm2022/3dsource-source-ui.mjs.map +1 -1
- package/index.d.ts +38 -7
- package/index.d.ts.map +1 -0
- package/package.json +1 -1
- package/styles/material/autocomplete.scss +0 -0
- package/styles/material/checkbox.scss +0 -0
- package/styles/material/form-field.scss +32 -12
- package/styles/material/radio.scss +0 -0
- package/styles/material/select.scss +25 -3
- package/styles/material/theme.scss +0 -0
- package/styles/material/toggle.scss +0 -0
- package/styles/source.ui.scss +0 -0
- package/styles/toastr/toastr.scss +0 -0
|
@@ -5,6 +5,8 @@ import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
|
5
5
|
import { sourceButtonDefaultConfig, SourceIconButtonComponent, SourceButtonComponent, SourceSliderComponent } from '@3dsource/source-ui-native';
|
|
6
6
|
import * as i1 from 'ngx-scrollbar';
|
|
7
7
|
import { NgScrollbarModule } from 'ngx-scrollbar';
|
|
8
|
+
import { HttpClient } from '@angular/common/http';
|
|
9
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
8
10
|
import { Overlay, OverlayConfig, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
9
11
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
10
12
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
@@ -13,10 +15,37 @@ import { take } from 'rxjs';
|
|
|
13
15
|
import { register } from 'swiper/element/bundle';
|
|
14
16
|
import { FormsModule } from '@angular/forms';
|
|
15
17
|
|
|
18
|
+
const svgIcons = {
|
|
19
|
+
info: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M11.1 16.7999H12.9V10.7999H11.1V16.7999ZM11.9947 8.9999C12.2482 8.9999 12.4625 8.91415 12.6375 8.74265C12.8125 8.57115 12.9 8.35865 12.9 8.10515C12.9 7.85165 12.8142 7.6374 12.6427 7.4624C12.4712 7.2874 12.2587 7.1999 12.0052 7.1999C11.7517 7.1999 11.5375 7.28565 11.3625 7.45715C11.1875 7.62865 11.1 7.84115 11.1 8.09465C11.1 8.34815 11.1857 8.5624 11.3572 8.7374C11.5287 8.9124 11.7412 8.9999 11.9947 8.9999ZM12.007 21.5999C10.6857 21.5999 9.44166 21.3499 8.27499 20.8499C7.10833 20.3499 6.08749 19.6624 5.21249 18.7874C4.33749 17.9124 3.64999 16.8919 3.14999 15.7259C2.64999 14.5599 2.39999 13.3141 2.39999 11.9884C2.39999 10.6627 2.64999 9.42074 3.14999 8.2624C3.64999 7.10407 4.33749 6.0874 5.21249 5.2124C6.08749 4.3374 7.10799 3.6499 8.27399 3.1499C9.43999 2.6499 10.6858 2.3999 12.0115 2.3999C13.3372 2.3999 14.5792 2.6499 15.7375 3.1499C16.8958 3.6499 17.9125 4.3374 18.7875 5.2124C19.6625 6.0874 20.35 7.1059 20.85 8.2679C21.35 9.43007 21.6 10.6717 21.6 11.9929C21.6 13.3142 21.35 14.5582 20.85 15.7249C20.35 16.8916 19.6625 17.9124 18.7875 18.7874C17.9125 19.6624 16.894 20.3499 15.732 20.8499C14.5698 21.3499 13.3282 21.5999 12.007 21.5999Z" fill="#017BFF"/></svg>',
|
|
20
|
+
success: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M10.725 15.5999L16.675 9.6749L15.4 8.3999L10.725 13.0499L8.59999 10.9499L7.32499 12.2249L10.725 15.5999ZM12 21.5999C10.6833 21.5999 9.44166 21.3499 8.27499 20.8499C7.10833 20.3499 6.08749 19.6624 5.21249 18.7874C4.33749 17.9124 3.64999 16.8916 3.14999 15.7249C2.64999 14.5582 2.39999 13.3166 2.39999 11.9999C2.39999 10.6666 2.64999 9.42074 3.14999 8.2624C3.64999 7.10407 4.33749 6.0874 5.21249 5.2124C6.08749 4.3374 7.10833 3.6499 8.27499 3.1499C9.44166 2.6499 10.6833 2.3999 12 2.3999C13.3333 2.3999 14.5792 2.6499 15.7375 3.1499C16.8958 3.6499 17.9125 4.3374 18.7875 5.2124C19.6625 6.0874 20.35 7.10407 20.85 8.2624C21.35 9.42074 21.6 10.6666 21.6 11.9999C21.6 13.3166 21.35 14.5582 20.85 15.7249C20.35 16.8916 19.6625 17.9124 18.7875 18.7874C17.9125 19.6624 16.8958 20.3499 15.7375 20.8499C14.5792 21.3499 13.3333 21.5999 12 21.5999Z" fill="#16A34A"/></svg>',
|
|
21
|
+
distruct: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 12.9505C12.2832 12.9505 12.5292 12.8461 12.738 12.6373C12.946 12.4293 13.05 12.1837 13.05 11.9005V8.04969C13.05 7.76649 12.946 7.52489 12.738 7.32489C12.5292 7.12489 12.2832 7.02489 12 7.02489C11.7168 7.02489 11.4708 7.12929 11.262 7.33809C11.054 7.54609 10.95 7.79169 10.95 8.07489V11.9257C10.95 12.2089 11.054 12.4505 11.262 12.6505C11.4708 12.8505 11.7168 12.9505 12 12.9505ZM12 17.0257C12.2832 17.0257 12.5292 16.9297 12.738 16.7377C12.946 16.5457 13.05 16.2913 13.05 15.9745C13.05 15.6913 12.946 15.4457 12.738 15.2377C12.5292 15.0297 12.2832 14.9257 12 14.9257C11.7168 14.9257 11.4708 15.0297 11.262 15.2377C11.054 15.4457 10.95 15.6913 10.95 15.9745C10.95 16.2913 11.054 16.5457 11.262 16.7377C11.4708 16.9297 11.7168 17.0257 12 17.0257ZM12 21.9997C10.6168 21.9997 9.3168 21.7373 8.1 21.2125C6.8832 20.6877 5.8248 19.9753 4.9248 19.0753C4.0248 18.1753 3.3124 17.1169 2.7876 15.9001C2.2628 14.6833 2.0004 13.3833 2.0004 12.0001C2.0004 10.6169 2.2628 9.31689 2.7876 8.10009C3.3124 6.88329 4.0248 5.82489 4.9248 4.92489C5.8248 4.02489 6.8832 3.31249 8.1 2.78769C9.3168 2.26289 10.6168 2.00049 12 2.00049C13.3832 2.00049 14.6832 2.26289 15.9 2.78769C17.1168 3.31249 18.1752 4.02489 19.0752 4.92489C19.9752 5.82489 20.6876 6.88329 21.2124 8.10009C21.7372 9.31689 21.9996 10.6169 21.9996 12.0001C21.9996 13.3833 21.7372 14.6833 21.2124 15.9001C20.6876 17.1169 19.9752 18.1753 19.0752 19.0753C18.1752 19.9753 17.1168 20.6877 15.9 21.2125C14.6832 21.7373 13.3832 21.9997 12 21.9997Z" fill="#F24122"/></svg>',
|
|
22
|
+
};
|
|
23
|
+
const sourceModalIcon = [
|
|
24
|
+
{
|
|
25
|
+
name: 'info',
|
|
26
|
+
svg: svgIcons.info,
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
name: 'success',
|
|
30
|
+
svg: svgIcons.success,
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
name: 'distruct',
|
|
34
|
+
svg: svgIcons.distruct,
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: 'error',
|
|
38
|
+
svg: svgIcons.distruct,
|
|
39
|
+
},
|
|
40
|
+
];
|
|
41
|
+
|
|
16
42
|
class SourceModalComponent {
|
|
17
43
|
constructor() {
|
|
18
44
|
this.data = inject(DIALOG_DATA);
|
|
45
|
+
this.http = inject(HttpClient);
|
|
46
|
+
this.sanitizer = inject(DomSanitizer);
|
|
19
47
|
this.size = signal(this.data?.size || 'default', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
48
|
+
this.type = signal(this.data?.type || 'default', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
20
49
|
this.testID = signal(this.data?.testID || 'modal', ...(ngDevMode ? [{ debugName: "testID" }] : []));
|
|
21
50
|
this.stringContent = signal(typeof this.data.content === 'string' ? this.data.content : null, ...(ngDevMode ? [{ debugName: "stringContent" }] : []));
|
|
22
51
|
this.#dialogRef = inject((DialogRef));
|
|
@@ -28,23 +57,40 @@ class SourceModalComponent {
|
|
|
28
57
|
goBack() {
|
|
29
58
|
this.#dialogRef.close();
|
|
30
59
|
}
|
|
60
|
+
isArrayOfArrays(footerButtons) {
|
|
61
|
+
return (Array.isArray(footerButtons) &&
|
|
62
|
+
footerButtons.length > 0 &&
|
|
63
|
+
Array.isArray(footerButtons[0]));
|
|
64
|
+
}
|
|
31
65
|
getButtonConfig(externalConfig) {
|
|
32
66
|
return {
|
|
33
67
|
...sourceButtonDefaultConfig,
|
|
34
68
|
...externalConfig,
|
|
35
69
|
};
|
|
36
70
|
}
|
|
37
|
-
|
|
38
|
-
|
|
71
|
+
getSingleButtonArray(footerButtons) {
|
|
72
|
+
return footerButtons;
|
|
73
|
+
}
|
|
74
|
+
getIconSvg(iconName) {
|
|
75
|
+
const icon = sourceModalIcon.find((icon) => icon.name === iconName);
|
|
76
|
+
const svgContent = icon?.svg || '';
|
|
77
|
+
return this.sanitizer.bypassSecurityTrustHtml(svgContent);
|
|
78
|
+
}
|
|
79
|
+
hasIcon() {
|
|
80
|
+
return (this.data.type !== 'default' &&
|
|
81
|
+
!!sourceModalIcon.find((icon) => icon.name === this.data.type));
|
|
82
|
+
}
|
|
83
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
84
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SourceModalComponent, isStandalone: true, selector: "src-modal", ngImport: i0, template: "<div\n [attr.data-testid]=\"testID()\"\n [ngClass]=\"{\n 'src-modal--small': size() === 'small',\n }\"\n class=\"src-modal\"\n>\n <div class=\"src-modal__header\">\n @if (data['closeButton']) {\n <src-icon-button\n class=\"src-modal__close\"\n appearance=\"plain\"\n shape=\"round\"\n size=\"sm\"\n colorScheme=\"secondary\"\n [data-testid]=\"testID() + '-header-close'\"\n (onClick)=\"close()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"none\">\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 </src-icon-button>\n }\n </div>\n\n <div\n [class.src-modal__body--scrollable]=\"scrollbar.isVerticallyScrollable()\"\n [class.src-modal__body--icon]=\"hasIcon()\"\n class=\"src-modal__body\"\n >\n @if (hasIcon()) {\n <div\n class=\"src-modal__icon\"\n [innerHTML]=\"getIconSvg(data['type']!)\"\n ></div>\n }\n <div\n [attr.data-testid]=\"testID() + '-header-title'\"\n class=\"src-modal__title\"\n >\n {{ data['headerTitle'] }}\n </div>\n <ng-scrollbar #scrollbar class=\"src-modal__scroll-box\">\n @if (stringContent(); as content) {\n <div [innerHTML]=\"content\"></div>\n }\n </ng-scrollbar>\n </div>\n\n @if (data.footerButtons) {\n <div class=\"src-modal__footer\">\n @if (isArrayOfArrays(data.footerButtons)) {\n @for (buttonGroup of data.footerButtons; track $index) {\n <div class=\"src-modal__footer-group\">\n @for (footerButton of buttonGroup; track footerButton.label) {\n <src-button\n [srcButtonConfig]=\"\n getButtonConfig(footerButton.srcButtonConfig)\n \"\n (onClick)=\"close(footerButton.action())\"\n >\n {{ footerButton.label }}\n </src-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 <src-button\n [srcButtonConfig]=\"getButtonConfig(footerButton.srcButtonConfig)\"\n (onClick)=\"close(footerButton.action())\"\n >\n {{ footerButton.label }}\n </src-button>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".src-modal__body--scrollable{padding:0 0 0 var(--srcModalBodyPadding)}.src-modal__body--scrollable .src-modal__scroll-box.ng-scrollbar{--scrollbar-border-radius: 0px;--scrollbar-thickness: 3;--scrollbar-offset: 8;--scrollbar-track-color: transparent;--scrollbar-thumb-color: var(--src-color-border-default, #e5e7eb);--scrollbar-thumb-hover-color: var(--src-scrollbar-thumb-color)}.src-modal__body .src-modal__scroll-box{max-height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SourceIconButtonComponent, selector: "src-icon-button", inputs: ["name", "type", "appearance", "colorScheme", "size", "shape", "state", "counter", "isPressed", "isDisabled", "data-testid"], outputs: ["onClick"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i1.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "component", type: SourceButtonComponent, selector: "src-button", inputs: ["type", "appearance", "colorScheme", "size", "state", "customClass", "hasDisclosure", "isFullWidth", "isPressed", "isDisabled", "isLoading", "iconButton", "srcButtonConfig", "formID", "data-testid"], outputs: ["onClick", "onSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
39
85
|
}
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceModalComponent, decorators: [{
|
|
41
87
|
type: Component,
|
|
42
88
|
args: [{ selector: 'src-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
43
89
|
NgClass,
|
|
44
90
|
SourceIconButtonComponent,
|
|
45
91
|
NgScrollbarModule,
|
|
46
92
|
SourceButtonComponent,
|
|
47
|
-
], template: "<div\n [attr.data-testid]=\"testID()\"\n [ngClass]=\"{
|
|
93
|
+
], template: "<div\n [attr.data-testid]=\"testID()\"\n [ngClass]=\"{\n 'src-modal--small': size() === 'small',\n }\"\n class=\"src-modal\"\n>\n <div class=\"src-modal__header\">\n @if (data['closeButton']) {\n <src-icon-button\n class=\"src-modal__close\"\n appearance=\"plain\"\n shape=\"round\"\n size=\"sm\"\n colorScheme=\"secondary\"\n [data-testid]=\"testID() + '-header-close'\"\n (onClick)=\"close()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"none\">\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 </src-icon-button>\n }\n </div>\n\n <div\n [class.src-modal__body--scrollable]=\"scrollbar.isVerticallyScrollable()\"\n [class.src-modal__body--icon]=\"hasIcon()\"\n class=\"src-modal__body\"\n >\n @if (hasIcon()) {\n <div\n class=\"src-modal__icon\"\n [innerHTML]=\"getIconSvg(data['type']!)\"\n ></div>\n }\n <div\n [attr.data-testid]=\"testID() + '-header-title'\"\n class=\"src-modal__title\"\n >\n {{ data['headerTitle'] }}\n </div>\n <ng-scrollbar #scrollbar class=\"src-modal__scroll-box\">\n @if (stringContent(); as content) {\n <div [innerHTML]=\"content\"></div>\n }\n </ng-scrollbar>\n </div>\n\n @if (data.footerButtons) {\n <div class=\"src-modal__footer\">\n @if (isArrayOfArrays(data.footerButtons)) {\n @for (buttonGroup of data.footerButtons; track $index) {\n <div class=\"src-modal__footer-group\">\n @for (footerButton of buttonGroup; track footerButton.label) {\n <src-button\n [srcButtonConfig]=\"\n getButtonConfig(footerButton.srcButtonConfig)\n \"\n (onClick)=\"close(footerButton.action())\"\n >\n {{ footerButton.label }}\n </src-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 <src-button\n [srcButtonConfig]=\"getButtonConfig(footerButton.srcButtonConfig)\"\n (onClick)=\"close(footerButton.action())\"\n >\n {{ footerButton.label }}\n </src-button>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".src-modal__body--scrollable{padding:0 0 0 var(--srcModalBodyPadding)}.src-modal__body--scrollable .src-modal__scroll-box.ng-scrollbar{--scrollbar-border-radius: 0px;--scrollbar-thickness: 3;--scrollbar-offset: 8;--scrollbar-track-color: transparent;--scrollbar-thumb-color: var(--src-color-border-default, #e5e7eb);--scrollbar-thumb-hover-color: var(--src-scrollbar-thumb-color)}.src-modal__body .src-modal__scroll-box{max-height:100%}\n"] }]
|
|
48
94
|
}] });
|
|
49
95
|
|
|
50
96
|
const SourceModalSize = {
|
|
@@ -52,6 +98,14 @@ const SourceModalSize = {
|
|
|
52
98
|
DEFAULT: 'default',
|
|
53
99
|
};
|
|
54
100
|
|
|
101
|
+
const SourceModalType = {
|
|
102
|
+
DEFAULT: 'default',
|
|
103
|
+
INFO: 'info',
|
|
104
|
+
SUCCESS: 'success',
|
|
105
|
+
WARNING: 'warning',
|
|
106
|
+
ERROR: 'error',
|
|
107
|
+
};
|
|
108
|
+
|
|
55
109
|
const SOURCE_POPOVER_DATA = new InjectionToken('SourcePopoverData');
|
|
56
110
|
|
|
57
111
|
const defaultSourcePopoverConfig = {
|
|
@@ -174,10 +228,10 @@ class SourcePopoverService {
|
|
|
174
228
|
testID: override?.testID ?? this.#defaultSourcePopoverConfig.testID,
|
|
175
229
|
};
|
|
176
230
|
}
|
|
177
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
178
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourcePopoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
232
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourcePopoverService }); }
|
|
179
233
|
}
|
|
180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourcePopoverService, decorators: [{
|
|
181
235
|
type: Injectable
|
|
182
236
|
}] });
|
|
183
237
|
|
|
@@ -197,10 +251,10 @@ class SourcePopoverComponent {
|
|
|
197
251
|
emitBackAction() {
|
|
198
252
|
this.#sourcePopoverService.closePopover(this.data.overlayRef);
|
|
199
253
|
}
|
|
200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
254
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourcePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
255
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SourcePopoverComponent, isStandalone: true, selector: "src-popover", ngImport: i0, template: "<div\n class=\"src-popover\"\n [style.maxHeight]=\"data.popoverMaxHeight\"\n [attr.data-testid]=\"testID()\"\n>\n @if (\n data['hasBackButton'] ||\n data['hasCloseButton'] ||\n (data['headerTitle'] && data['headerTitle'] !== '')\n ) {\n <div class=\"src-popover__header\">\n @if (data['hasBackButton']) {\n <src-icon-button\n class=\"src-popover__back\"\n shape=\"round\"\n size=\"sm\"\n colorScheme=\"ghost\"\n [data-testid]=\"testID() + '-header-back'\"\n (onClick)=\"emitBackAction()\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\"\n fill=\"currentColor\"\n >\n <path\n d=\"m438-480 164 164q11 11 11 25.5T602-265q-11 11-25.5 11t-25.84-11.34L361-455q-5-5.4-7.5-11.7-2.5-6.3-2.5-13.5t2.5-13.5Q356-500 361-505l189.66-189.66Q562-706 576.5-706t25.5 11q11 11 11 25.5T602-644L438-480Z\"\n />\n </svg>\n </src-icon-button>\n }\n\n <div\n class=\"src-popover__title\"\n [attr.data-testid]=\"testID() + '-header-title'\"\n >\n {{ data.headerTitle }}\n </div>\n\n @if (data['hasCloseButton']) {\n <src-icon-button\n class=\"src-popover__close\"\n shape=\"round\"\n size=\"sm\"\n colorScheme=\"ghost\"\n [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 </src-icon-button>\n }\n </div>\n }\n\n <div class=\"src-popover__body\">\n @if (template()) {\n <ng-template [ngTemplateOutlet]=\"template()\"></ng-template>\n }\n </div>\n</div>\n", styles: [".src-popover-backdrop{background-color:#0000}.src-popover-backdrop--mobile{background-color:#00000052}.src-popover__header{display:flex;padding:12px;width:100%;border-bottom:var(--srcPopoverTitleBorder)}.src-popover__title{font-size:var(--srcPopoverTitleSize);font-weight:var(--src-font-weight-semiBold, 600);line-height:var(--srcPopoverTitleLineHeight);color:var(--srcPopoverTitleColor);padding:0 4px;word-break:break-word}.src-popover__back{margin-right:8px}.src-popover__close{margin-left:auto}\n"], dependencies: [{ kind: "component", type: SourceIconButtonComponent, selector: "src-icon-button", inputs: ["name", "type", "appearance", "colorScheme", "size", "shape", "state", "counter", "isPressed", "isDisabled", "data-testid"], outputs: ["onClick"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
202
256
|
}
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourcePopoverComponent, decorators: [{
|
|
204
258
|
type: Component,
|
|
205
259
|
args: [{ selector: 'src-popover', imports: [SourceIconButtonComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"src-popover\"\n [style.maxHeight]=\"data.popoverMaxHeight\"\n [attr.data-testid]=\"testID()\"\n>\n @if (\n data['hasBackButton'] ||\n data['hasCloseButton'] ||\n (data['headerTitle'] && data['headerTitle'] !== '')\n ) {\n <div class=\"src-popover__header\">\n @if (data['hasBackButton']) {\n <src-icon-button\n class=\"src-popover__back\"\n shape=\"round\"\n size=\"sm\"\n colorScheme=\"ghost\"\n [data-testid]=\"testID() + '-header-back'\"\n (onClick)=\"emitBackAction()\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\"\n fill=\"currentColor\"\n >\n <path\n d=\"m438-480 164 164q11 11 11 25.5T602-265q-11 11-25.5 11t-25.84-11.34L361-455q-5-5.4-7.5-11.7-2.5-6.3-2.5-13.5t2.5-13.5Q356-500 361-505l189.66-189.66Q562-706 576.5-706t25.5 11q11 11 11 25.5T602-644L438-480Z\"\n />\n </svg>\n </src-icon-button>\n }\n\n <div\n class=\"src-popover__title\"\n [attr.data-testid]=\"testID() + '-header-title'\"\n >\n {{ data.headerTitle }}\n </div>\n\n @if (data['hasCloseButton']) {\n <src-icon-button\n class=\"src-popover__close\"\n shape=\"round\"\n size=\"sm\"\n colorScheme=\"ghost\"\n [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 </src-icon-button>\n }\n </div>\n }\n\n <div class=\"src-popover__body\">\n @if (template()) {\n <ng-template [ngTemplateOutlet]=\"template()\"></ng-template>\n }\n </div>\n</div>\n", styles: [".src-popover-backdrop{background-color:#0000}.src-popover-backdrop--mobile{background-color:#00000052}.src-popover__header{display:flex;padding:12px;width:100%;border-bottom:var(--srcPopoverTitleBorder)}.src-popover__title{font-size:var(--srcPopoverTitleSize);font-weight:var(--src-font-weight-semiBold, 600);line-height:var(--srcPopoverTitleLineHeight);color:var(--srcPopoverTitleColor);padding:0 4px;word-break:break-word}.src-popover__back{margin-right:8px}.src-popover__close{margin-left:auto}\n"] }]
|
|
206
260
|
}] });
|
|
@@ -280,10 +334,10 @@ class SourcePopoverTriggerComponent {
|
|
|
280
334
|
.pipe(take(1))
|
|
281
335
|
.subscribe(() => this.overlayRef?.detach());
|
|
282
336
|
}
|
|
283
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.
|
|
337
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourcePopoverTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
338
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", type: SourcePopoverTriggerComponent, isStandalone: true, selector: "src-popover-trigger", inputs: { srcPopoverTpl: { classPropertyName: "srcPopoverTpl", publicName: "srcPopoverTpl", isSignal: true, isRequired: true, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, activeClass: { classPropertyName: "activeClass", publicName: "activeClass", isSignal: true, isRequired: false, transformFunction: null }, hasBackButton: { classPropertyName: "hasBackButton", publicName: "hasBackButton", isSignal: true, isRequired: false, transformFunction: null }, hasCloseButton: { classPropertyName: "hasCloseButton", publicName: "hasCloseButton", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, popoverMaxHeight: { classPropertyName: "popoverMaxHeight", publicName: "popoverMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, panelCustomClass: { classPropertyName: "panelCustomClass", publicName: "panelCustomClass", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null }, breakpointDesktop: { classPropertyName: "breakpointDesktop", publicName: "breakpointDesktop", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPopoverShown: "onPopoverShown", onBackButtonClick: "onBackButtonClick" }, providers: [SourcePopoverService], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n cdkOverlayOrigin\n [attr.data-testid]=\"testID()\"\n (click)=\"showPopover()\"\n [class]=\"popoverShown() ? activeClass() || 'active' : ''\"\n>\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
285
339
|
}
|
|
286
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourcePopoverTriggerComponent, decorators: [{
|
|
287
341
|
type: Component,
|
|
288
342
|
args: [{ selector: 'src-popover-trigger', encapsulation: ViewEncapsulation.None, providers: [SourcePopoverService], changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkOverlayOrigin], template: "<div\n cdkOverlayOrigin\n [attr.data-testid]=\"testID()\"\n (click)=\"showPopover()\"\n [class]=\"popoverShown() ? activeClass() || 'active' : ''\"\n>\n <ng-content></ng-content>\n</div>\n" }]
|
|
289
343
|
}] });
|
|
@@ -295,20 +349,24 @@ class SourceTabLineComponent {
|
|
|
295
349
|
this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
296
350
|
this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
297
351
|
this.selectedIndex = input(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
|
|
352
|
+
this.tabStyle = input('default', ...(ngDevMode ? [{ debugName: "tabStyle" }] : []));
|
|
298
353
|
this.isCompact = input(false, ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
|
|
299
|
-
this.offsetBefore = input(
|
|
300
|
-
this.offsetAfter = input(
|
|
301
|
-
this.spaceBetween = input(
|
|
354
|
+
this.offsetBefore = input(undefined, ...(ngDevMode ? [{ debugName: "offsetBefore" }] : []));
|
|
355
|
+
this.offsetAfter = input(undefined, ...(ngDevMode ? [{ debugName: "offsetAfter" }] : []));
|
|
356
|
+
this.spaceBetween = input(undefined, ...(ngDevMode ? [{ debugName: "spaceBetween" }] : []));
|
|
302
357
|
this.isFullWidth = input(false, ...(ngDevMode ? [{ debugName: "isFullWidth" }] : []));
|
|
303
358
|
this.isSwiper = input(false, ...(ngDevMode ? [{ debugName: "isSwiper" }] : []));
|
|
304
359
|
this.testID = input('', ...(ngDevMode ? [{ debugName: "testID", alias: 'data-testid' }] : [{ alias: 'data-testid' }]));
|
|
305
|
-
this.tabsSelectedIndex = linkedSignal(() => this.selectedIndex());
|
|
360
|
+
this.tabsSelectedIndex = linkedSignal(() => this.selectedIndex(), ...(ngDevMode ? [{ debugName: "tabsSelectedIndex" }] : []));
|
|
306
361
|
this.onSelectTab = output();
|
|
307
|
-
this.classes = computed(() =>
|
|
362
|
+
this.classes = computed(() => [
|
|
363
|
+
`src-tab-line--style-${this.tabStyle()}`,
|
|
364
|
+
this.isFullWidth() ? 'src-tab-line--full-width' : '',
|
|
365
|
+
].filter(Boolean), ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
308
366
|
this.variables = computed(() => `--srcTabsOffsetBefore: ${this.tabsOffsetBefore()}px; --srcTabsOffsetAfter: ${this.tabsOffsetAfter()}px; --srcTabsSpaceBetween: ${this.spacing()}px;`, ...(ngDevMode ? [{ debugName: "variables" }] : []));
|
|
309
|
-
this.tabsOffsetBefore = computed(() => this.offsetBefore()
|
|
310
|
-
this.tabsOffsetAfter = computed(() => this.offsetAfter()
|
|
311
|
-
this.spacing = computed(() => this.spaceBetween()
|
|
367
|
+
this.tabsOffsetBefore = computed(() => this.offsetBefore() ?? (this.isCompact() ? 8 : 16), ...(ngDevMode ? [{ debugName: "tabsOffsetBefore" }] : []));
|
|
368
|
+
this.tabsOffsetAfter = computed(() => this.offsetAfter() ?? (this.isCompact() ? 8 : 16), ...(ngDevMode ? [{ debugName: "tabsOffsetAfter" }] : []));
|
|
369
|
+
this.spacing = computed(() => this.spaceBetween() ?? (this.isCompact() ? 0 : 4), ...(ngDevMode ? [{ debugName: "spacing" }] : []));
|
|
312
370
|
this._ = effect(() => {
|
|
313
371
|
const swiperRef = this.swiperRef();
|
|
314
372
|
untracked(() => {
|
|
@@ -330,14 +388,19 @@ class SourceTabLineComponent {
|
|
|
330
388
|
this.tabsSelectedIndex.set(tabIndex);
|
|
331
389
|
this.onSelectTab.emit(tabIndex);
|
|
332
390
|
}
|
|
333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
391
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceTabLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
392
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SourceTabLineComponent, isStandalone: true, selector: "src-tab-line", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, tabStyle: { classPropertyName: "tabStyle", publicName: "tabStyle", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, offsetBefore: { classPropertyName: "offsetBefore", publicName: "offsetBefore", isSignal: true, isRequired: false, transformFunction: null }, offsetAfter: { classPropertyName: "offsetAfter", publicName: "offsetAfter", isSignal: true, isRequired: false, transformFunction: null }, spaceBetween: { classPropertyName: "spaceBetween", publicName: "spaceBetween", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, isSwiper: { classPropertyName: "isSwiper", publicName: "isSwiper", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectTab: "onSelectTab" }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [attr.data-testid]=\"testID()\" [ngClass]=\"classes()\" class=\"src-tab-line\">\n @if (isSwiper()) {\n <div class=\"src-tabs__nav src-tabs__nav--swiper\">\n <swiper-container #swiperRef init=\"false\">\n @for (tab of tabs(); track tab) {\n <swiper-slide class=\"src-tabs__nav-slide\">\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ tab: tab, index: $index }\"\n ></ng-container>\n </swiper-slide>\n }\n </swiper-container>\n </div>\n } @else {\n <div class=\"src-tabs__nav\" [style]=\"variables()\">\n @for (tab of tabs(); track tab) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ tab: tab, index: $index }\"\n ></ng-container>\n }\n </div>\n }\n</div>\n\n<ng-template #template let-i=\"index\" let-tab=\"tab\">\n <div\n class=\"src-tabs__nav-item\"\n [class.src-tabs__nav-item--active]=\"i === tabsSelectedIndex()\"\n >\n <div\n class=\"src-button src-button--plain\"\n [class.src-button--pressed]=\"i === tabsSelectedIndex()\"\n (click)=\"selectTab(i)\"\n [attr.data-testid]=\"testID() + '-tab-label-' + tab[label()]\"\n [class.src-button--full-width]=\"isFullWidth()\"\n [class.src-button--disabled]=\"tab.isDisabled\"\n >\n {{ tab[label()] }}\n </div>\n </div>\n</ng-template>\n", styles: [".src-tab-line{--srcTabActiveBorderBg: transparent;--srcTabActiveBorderRadius: 3px 3px 0 0;--srcTabActiveBorderWidth: 100%;--srcTabActiveBorderHeight: 3px;--srcTabBottomBotder: none}.src-tab-line--style-default{--srcTabBottomBotder: 0px -1px 0px 0px #e1e3e5 inset}.src-tab-line--style-default .src-button--plain{--srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563)}.src-tab-line--style-default .src-button--plain:hover{--srcButtonBgColor: var( --src-surface-container-on-top, rgba(148, 163, 184, .08) )}.src-tab-line--style-default .src-button--plain:active,.src-tab-line--style-default .src-button--plain.src-button--pressed{--srcButtonFontColor: var(--src-text-ui-secondary-main, #111827);--srcButtonBgColor: transparent}.src-tab-line--style-button{--srcTabActiveBorderHeight: 0;width:fit-content;padding:var(--src-layout-padding-const-xs, 4px);border-radius:var(--src-border-rounded-parent, 10px);background:var(--src-surface-container-on-top, rgba(148, 163, 184, .08));box-shadow:0 1px 2px 0 var(--src-shadow-light, rgba(148, 163, 184, .16)) inset}.src-tab-line--style-button.src-tab-line--full-width{width:100%}.src-tab-line--style-button .src-tabs__nav-item{padding:0}.src-tab-line--style-button .src-button--plain:active,.src-tab-line--style-button .src-button--plain.src-button--pressed{--srcButtonBgColor: var(--src-surface-container-main, #fff);--srcButtonBoxShadow: 0 1px 2px 1px var(--src-shadow-accent-light, rgba(1, 123, 255, .16))}.src-tabs__nav{width:100%;display:flex;padding:0;margin:0;list-style:none;background:transparent;box-shadow:var(--srcTabBottomBotder)}.src-tabs__nav swiper-container{width:100%}.src-tabs__nav swiper-container .src-tabs__nav-slide{width:auto}.src-tabs__nav:not(.src-tabs__nav--swiper){padding-left:var(--srcTabsOffsetBefore);padding-right:var(--srcTabsOffsetAfter);gap:var(--srcTabsSpaceBetween)}.src-tabs__nav-item{position:relative;flex-shrink:0;margin:0;text-align:center;padding:1px 0 var(--src-layout-gap-const-xs, 4px);background-color:transparent;border:none;cursor:pointer}.src-tabs__nav-item:after{content:\"\";position:absolute;bottom:0;left:0;border-radius:var(--srcTabActiveBorderRadius);width:var(--srcTabActiveBorderWidth);height:var(--srcTabActiveBorderHeight);background:var(--srcTabActiveBorderBg)}.src-tabs__nav-item:hover{--srcTabActiveBorderBg: var( --src-ui-accent-disabled, rgba(71, 85, 105, .24) )}.src-tabs__nav-item--active{--srcTabActiveBorderBg: var(--src-ui-accent-default, #017bff)}.src-tabs__nav-item--active.src-disabled{--srcTabActiveBorderBg: var(--src-color-border-strong-disabled)}.src-tabs__nav-item--active:hover{--srcTabActiveBorderBg: var(--src-ui-accent-default, #017bff)}.src-tab-line--full-width .src-tabs__nav-slide,.src-tab-line--full-width .src-tabs__nav-item{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
335
393
|
}
|
|
336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
394
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceTabLineComponent, decorators: [{
|
|
337
395
|
type: Component,
|
|
338
|
-
args: [{ selector: 'src-tab-line', imports: [NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div [attr.data-testid]=\"testID()\" [ngClass]=\"classes()\" class=\"src-tab-line\">\n @if (isSwiper()) {\n <div class=\"src-tabs__nav src-tabs__nav--swiper\">\n <swiper-container #swiperRef init=\"false\">\n @for (tab of tabs(); track tab) {\n <swiper-slide class=\"src-tabs__nav-slide\">\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ tab: tab, index: $index }\"\n ></ng-container>\n </swiper-slide>\n }\n </swiper-container>\n </div>\n } @else {\n <div class=\"src-tabs__nav\" [style]=\"variables()\">\n @for (tab of tabs(); track tab) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ tab: tab, index: $index }\"\n ></ng-container>\n }\n </div>\n }\n</div>\n\n<ng-template #template let-i=\"index\" let-tab=\"tab\">\n <div\n (click)=\"selectTab(i)\"\n
|
|
396
|
+
args: [{ selector: 'src-tab-line', imports: [NgClass, NgTemplateOutlet, SourceButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div [attr.data-testid]=\"testID()\" [ngClass]=\"classes()\" class=\"src-tab-line\">\n @if (isSwiper()) {\n <div class=\"src-tabs__nav src-tabs__nav--swiper\">\n <swiper-container #swiperRef init=\"false\">\n @for (tab of tabs(); track tab) {\n <swiper-slide class=\"src-tabs__nav-slide\">\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ tab: tab, index: $index }\"\n ></ng-container>\n </swiper-slide>\n }\n </swiper-container>\n </div>\n } @else {\n <div class=\"src-tabs__nav\" [style]=\"variables()\">\n @for (tab of tabs(); track tab) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{ tab: tab, index: $index }\"\n ></ng-container>\n }\n </div>\n }\n</div>\n\n<ng-template #template let-i=\"index\" let-tab=\"tab\">\n <div\n class=\"src-tabs__nav-item\"\n [class.src-tabs__nav-item--active]=\"i === tabsSelectedIndex()\"\n >\n <div\n class=\"src-button src-button--plain\"\n [class.src-button--pressed]=\"i === tabsSelectedIndex()\"\n (click)=\"selectTab(i)\"\n [attr.data-testid]=\"testID() + '-tab-label-' + tab[label()]\"\n [class.src-button--full-width]=\"isFullWidth()\"\n [class.src-button--disabled]=\"tab.isDisabled\"\n >\n {{ tab[label()] }}\n </div>\n </div>\n</ng-template>\n", styles: [".src-tab-line{--srcTabActiveBorderBg: transparent;--srcTabActiveBorderRadius: 3px 3px 0 0;--srcTabActiveBorderWidth: 100%;--srcTabActiveBorderHeight: 3px;--srcTabBottomBotder: none}.src-tab-line--style-default{--srcTabBottomBotder: 0px -1px 0px 0px #e1e3e5 inset}.src-tab-line--style-default .src-button--plain{--srcButtonFontColor: var(--src-text-ui-secondary-secondary, #4b5563)}.src-tab-line--style-default .src-button--plain:hover{--srcButtonBgColor: var( --src-surface-container-on-top, rgba(148, 163, 184, .08) )}.src-tab-line--style-default .src-button--plain:active,.src-tab-line--style-default .src-button--plain.src-button--pressed{--srcButtonFontColor: var(--src-text-ui-secondary-main, #111827);--srcButtonBgColor: transparent}.src-tab-line--style-button{--srcTabActiveBorderHeight: 0;width:fit-content;padding:var(--src-layout-padding-const-xs, 4px);border-radius:var(--src-border-rounded-parent, 10px);background:var(--src-surface-container-on-top, rgba(148, 163, 184, .08));box-shadow:0 1px 2px 0 var(--src-shadow-light, rgba(148, 163, 184, .16)) inset}.src-tab-line--style-button.src-tab-line--full-width{width:100%}.src-tab-line--style-button .src-tabs__nav-item{padding:0}.src-tab-line--style-button .src-button--plain:active,.src-tab-line--style-button .src-button--plain.src-button--pressed{--srcButtonBgColor: var(--src-surface-container-main, #fff);--srcButtonBoxShadow: 0 1px 2px 1px var(--src-shadow-accent-light, rgba(1, 123, 255, .16))}.src-tabs__nav{width:100%;display:flex;padding:0;margin:0;list-style:none;background:transparent;box-shadow:var(--srcTabBottomBotder)}.src-tabs__nav swiper-container{width:100%}.src-tabs__nav swiper-container .src-tabs__nav-slide{width:auto}.src-tabs__nav:not(.src-tabs__nav--swiper){padding-left:var(--srcTabsOffsetBefore);padding-right:var(--srcTabsOffsetAfter);gap:var(--srcTabsSpaceBetween)}.src-tabs__nav-item{position:relative;flex-shrink:0;margin:0;text-align:center;padding:1px 0 var(--src-layout-gap-const-xs, 4px);background-color:transparent;border:none;cursor:pointer}.src-tabs__nav-item:after{content:\"\";position:absolute;bottom:0;left:0;border-radius:var(--srcTabActiveBorderRadius);width:var(--srcTabActiveBorderWidth);height:var(--srcTabActiveBorderHeight);background:var(--srcTabActiveBorderBg)}.src-tabs__nav-item:hover{--srcTabActiveBorderBg: var( --src-ui-accent-disabled, rgba(71, 85, 105, .24) )}.src-tabs__nav-item--active{--srcTabActiveBorderBg: var(--src-ui-accent-default, #017bff)}.src-tabs__nav-item--active.src-disabled{--srcTabActiveBorderBg: var(--src-color-border-strong-disabled)}.src-tabs__nav-item--active:hover{--srcTabActiveBorderBg: var(--src-ui-accent-default, #017bff)}.src-tab-line--full-width .src-tabs__nav-slide,.src-tab-line--full-width .src-tabs__nav-item{flex-grow:1}\n"] }]
|
|
339
397
|
}] });
|
|
340
398
|
|
|
399
|
+
const SourceTabStyle = {
|
|
400
|
+
DEFAULT: 'default',
|
|
401
|
+
BUTTON: 'button',
|
|
402
|
+
};
|
|
403
|
+
|
|
341
404
|
class SourceTabsComponent {
|
|
342
405
|
constructor() {
|
|
343
406
|
this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
@@ -354,10 +417,10 @@ class SourceTabsComponent {
|
|
|
354
417
|
setActive(idx) {
|
|
355
418
|
this.onSelectTab.emit(idx);
|
|
356
419
|
}
|
|
357
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
358
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: SourceTabsComponent, isStandalone: true, selector: "src-tabs", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, isSwiper: { classPropertyName: "isSwiper", publicName: "isSwiper", isSignal: true, isRequired: false, transformFunction: null }, swiperConfig: { classPropertyName: "swiperConfig", publicName: "swiperConfig", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectTab: "onSelectTab" }, ngImport: i0, template: "<div class=\"src-tabs\">\n <ng-template #defaultTabsHeader>\n <src-tab-line\n [tabs]=\"data()\"\n [label]=\"label()\"\n [isCompact]=\"isCompact()\"\n [isFullWidth]=\"isFullWidth()\"\n [selectedIndex]=\"selectedIndex()\"\n [isSwiper]=\"isSwiper()\"\n [data-testid]=\"testID()\"\n (onSelectTab)=\"setActive($event)\"\n ></src-tab-line>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate() ? headerTemplate()! : defaultTabsHeader;\n context: { tabs: this.data }\n \"\n >\n </ng-container>\n\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SourceTabLineComponent, selector: "src-tab-line", inputs: ["tabs", "label", "selectedIndex", "tabStyle", "isCompact", "offsetBefore", "offsetAfter", "spaceBetween", "isFullWidth", "isSwiper", "data-testid"], outputs: ["onSelectTab"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
359
422
|
}
|
|
360
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceTabsComponent, decorators: [{
|
|
361
424
|
type: Component,
|
|
362
425
|
args: [{ selector: 'src-tabs', imports: [NgTemplateOutlet, SourceTabLineComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"src-tabs\">\n <ng-template #defaultTabsHeader>\n <src-tab-line\n [tabs]=\"data()\"\n [label]=\"label()\"\n [isCompact]=\"isCompact()\"\n [isFullWidth]=\"isFullWidth()\"\n [selectedIndex]=\"selectedIndex()\"\n [isSwiper]=\"isSwiper()\"\n [data-testid]=\"testID()\"\n (onSelectTab)=\"setActive($event)\"\n ></src-tab-line>\n </ng-template>\n\n <ng-container\n *ngTemplateOutlet=\"\n headerTemplate() ? headerTemplate()! : defaultTabsHeader;\n context: { tabs: this.data }\n \"\n >\n </ng-container>\n\n <ng-content></ng-content>\n</div>\n" }]
|
|
363
426
|
}] });
|
|
@@ -366,10 +429,10 @@ class SourceTabComponent {
|
|
|
366
429
|
constructor() {
|
|
367
430
|
this.isActive = input(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
|
|
368
431
|
}
|
|
369
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
370
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
432
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
433
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: SourceTabComponent, isStandalone: true, selector: "src-tab", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [hidden]=\"!isActive()\" class=\"src-tab-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".src-tab-content{padding:var(--spacing-16);background-color:var(--color-bg-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
371
434
|
}
|
|
372
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceTabComponent, decorators: [{
|
|
373
436
|
type: Component,
|
|
374
437
|
args: [{ selector: 'src-tab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [hidden]=\"!isActive()\" class=\"src-tab-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".src-tab-content{padding:var(--spacing-16);background-color:var(--color-bg-default)}\n"] }]
|
|
375
438
|
}] });
|
|
@@ -386,10 +449,10 @@ class SourceTooltipComponent {
|
|
|
386
449
|
get asTemplate() {
|
|
387
450
|
return this.data.content instanceof TemplateRef ? this.data.content : false;
|
|
388
451
|
}
|
|
389
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
390
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
452
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
453
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SourceTooltipComponent, isStandalone: true, selector: "src-tooltip", ngImport: i0, template: "<div\n class=\"src-tooltip\"\n [ngClass]=\"data.srcTooltipCustomClass\"\n [style.--srcTooltipMaxWidth]=\"data.srcTooltipMaxWidth\"\n>\n <div\n class=\"src-tooltip__content\"\n [class.src-tooltip__content--custom]=\"asTemplate\"\n >\n @if (asString) {\n {{ asString }}\n }\n\n @if (asTemplate) {\n <ng-template [ngTemplateOutlet]=\"asTemplate\"></ng-template>\n }\n </div>\n\n @if (data.srcTooltipPosition === 'top') {\n <svg\n class=\"src-tooltip__pin\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n >\n <path\n d=\"M6.26822 5.07814C5.86842 5.55789 5.13157 5.55789 4.73178 5.07813L0.500001 -1.35106e-06L10.5 -4.76837e-07L6.26822 5.07814Z\"\n fill=\"currentColor\"\n />\n </svg>\n }\n\n @if (data.srcTooltipPosition === 'right') {\n <svg\n class=\"src-tooltip__pin\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"6\"\n height=\"10\"\n viewBox=\"0 0 6 10\"\n fill=\"none\"\n >\n <path\n d=\"M0.921864 5.76822C0.44211 5.36842 0.442111 4.63157 0.921865 4.23178L6 -2.62268e-07L6 10L0.921864 5.76822Z\"\n fill=\"currentColor\"\n />\n </svg>\n }\n\n @if (data.srcTooltipPosition === 'bottom') {\n <svg\n class=\"src-tooltip__pin\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n >\n <path\n d=\"M4.73178 0.921865C5.13158 0.44211 5.86843 0.442111 6.26822 0.921866L10.5 6L0.5 6L4.73178 0.921865Z\"\n fill=\"currentColor\"\n />\n </svg>\n }\n\n @if (data.srcTooltipPosition === 'left') {\n <svg\n class=\"src-tooltip__pin\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"6\"\n height=\"10\"\n viewBox=\"0 0 6 10\"\n fill=\"none\"\n >\n <path\n d=\"M5.07814 5.76822C5.55789 5.36842 5.55789 4.63157 5.07813 4.23178L-3.97233e-08 -2.62268e-07L-4.76837e-07 10L5.07814 5.76822Z\"\n fill=\"currentColor\"\n />\n </svg>\n }\n</div>\n", styles: [".src-tooltip{--srcTooltipFontSize: var(--src-font-size-xs);--srcTooltipFontColor: var(--src-color-text-inverse, #fff);--srcTooltipFontWeight: var(--src-font-weight-regular);--srcTooltipFontLineHeight: var(--src-font-line-xs);--srcTooltipBg: var(--src-color-bg-inverse, #1f2937);--srcTooltipShape: var(--src-border-rounded, 4px);--srcTooltipMaxWidth: 280px;--srcTooltipPointerEvents: none;position:relative;box-sizing:border-box}.src-tooltip__pin{position:absolute;color:var(--srcTooltipBg);pointer-events:var(--srcTooltipPointerEvents, none)}.src-tooltip__content{display:flex;flex-wrap:wrap;padding:8px 12px;max-width:var(--srcTooltipMaxWidth);text-align:center;font-family:var(--src-font-family-body, \"Inter\", sans-serif);font-size:var(--srcTooltipFontSize);font-style:normal;font-weight:var(--srcTooltipFontWeight);line-height:var(--srcTooltipFontLineHeight);color:var(--srcTooltipFontColor);border-radius:var(--srcTooltipShape);background:var(--srcTooltipBg)}.src-tooltip__content--custom{padding:6px}.src-tooltip--top{padding-bottom:6px}.src-tooltip--top .src-tooltip__pin{left:50%;bottom:-6px;transform:translate(-50%)}.src-tooltip--right{padding-left:6px}.src-tooltip--right .src-tooltip__pin{left:-6px;top:50%;transform:translateY(-50%)}.src-tooltip--bottom{padding-top:6px}.src-tooltip--bottom .src-tooltip__pin{left:50%;top:-6px;transform:translate(-50%)}.src-tooltip--left{padding-right:6px}.src-tooltip--left .src-tooltip__pin{right:-6px;top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
391
454
|
}
|
|
392
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceTooltipComponent, decorators: [{
|
|
393
456
|
type: Component,
|
|
394
457
|
args: [{ selector: 'src-tooltip', imports: [NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"src-tooltip\"\n [ngClass]=\"data.srcTooltipCustomClass\"\n [style.--srcTooltipMaxWidth]=\"data.srcTooltipMaxWidth\"\n>\n <div\n class=\"src-tooltip__content\"\n [class.src-tooltip__content--custom]=\"asTemplate\"\n >\n @if (asString) {\n {{ asString }}\n }\n\n @if (asTemplate) {\n <ng-template [ngTemplateOutlet]=\"asTemplate\"></ng-template>\n }\n </div>\n\n @if (data.srcTooltipPosition === 'top') {\n <svg\n class=\"src-tooltip__pin\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n >\n <path\n d=\"M6.26822 5.07814C5.86842 5.55789 5.13157 5.55789 4.73178 5.07813L0.500001 -1.35106e-06L10.5 -4.76837e-07L6.26822 5.07814Z\"\n fill=\"currentColor\"\n />\n </svg>\n }\n\n @if (data.srcTooltipPosition === 'right') {\n <svg\n class=\"src-tooltip__pin\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"6\"\n height=\"10\"\n viewBox=\"0 0 6 10\"\n fill=\"none\"\n >\n <path\n d=\"M0.921864 5.76822C0.44211 5.36842 0.442111 4.63157 0.921865 4.23178L6 -2.62268e-07L6 10L0.921864 5.76822Z\"\n fill=\"currentColor\"\n />\n </svg>\n }\n\n @if (data.srcTooltipPosition === 'bottom') {\n <svg\n class=\"src-tooltip__pin\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n >\n <path\n d=\"M4.73178 0.921865C5.13158 0.44211 5.86843 0.442111 6.26822 0.921866L10.5 6L0.5 6L4.73178 0.921865Z\"\n fill=\"currentColor\"\n />\n </svg>\n }\n\n @if (data.srcTooltipPosition === 'left') {\n <svg\n class=\"src-tooltip__pin\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"6\"\n height=\"10\"\n viewBox=\"0 0 6 10\"\n fill=\"none\"\n >\n <path\n d=\"M5.07814 5.76822C5.55789 5.36842 5.55789 4.63157 5.07813 4.23178L-3.97233e-08 -2.62268e-07L-4.76837e-07 10L5.07814 5.76822Z\"\n fill=\"currentColor\"\n />\n </svg>\n }\n</div>\n", styles: [".src-tooltip{--srcTooltipFontSize: var(--src-font-size-xs);--srcTooltipFontColor: var(--src-color-text-inverse, #fff);--srcTooltipFontWeight: var(--src-font-weight-regular);--srcTooltipFontLineHeight: var(--src-font-line-xs);--srcTooltipBg: var(--src-color-bg-inverse, #1f2937);--srcTooltipShape: var(--src-border-rounded, 4px);--srcTooltipMaxWidth: 280px;--srcTooltipPointerEvents: none;position:relative;box-sizing:border-box}.src-tooltip__pin{position:absolute;color:var(--srcTooltipBg);pointer-events:var(--srcTooltipPointerEvents, none)}.src-tooltip__content{display:flex;flex-wrap:wrap;padding:8px 12px;max-width:var(--srcTooltipMaxWidth);text-align:center;font-family:var(--src-font-family-body, \"Inter\", sans-serif);font-size:var(--srcTooltipFontSize);font-style:normal;font-weight:var(--srcTooltipFontWeight);line-height:var(--srcTooltipFontLineHeight);color:var(--srcTooltipFontColor);border-radius:var(--srcTooltipShape);background:var(--srcTooltipBg)}.src-tooltip__content--custom{padding:6px}.src-tooltip--top{padding-bottom:6px}.src-tooltip--top .src-tooltip__pin{left:50%;bottom:-6px;transform:translate(-50%)}.src-tooltip--right{padding-left:6px}.src-tooltip--right .src-tooltip__pin{left:-6px;top:50%;transform:translateY(-50%)}.src-tooltip--bottom{padding-top:6px}.src-tooltip--bottom .src-tooltip__pin{left:50%;top:-6px;transform:translate(-50%)}.src-tooltip--left{padding-right:6px}.src-tooltip--left .src-tooltip__pin{right:-6px;top:50%;transform:translateY(-50%)}\n"] }]
|
|
395
458
|
}] });
|
|
@@ -549,10 +612,10 @@ class SourceTooltipDirective {
|
|
|
549
612
|
const isSamsungDevice = /Samsung/i.test(userAgent);
|
|
550
613
|
return (hasHover || hasFinePointer) && isDesktop() && !isSamsungDevice;
|
|
551
614
|
}
|
|
552
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
553
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
615
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
616
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", type: SourceTooltipDirective, isStandalone: true, selector: "[srcTooltip]", inputs: { srcTooltip: { classPropertyName: "srcTooltip", publicName: "srcTooltip", isSignal: true, isRequired: true, transformFunction: null }, srcTooltipPosition: { classPropertyName: "srcTooltipPosition", publicName: "srcTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, srcTooltipHideDelay: { classPropertyName: "srcTooltipHideDelay", publicName: "srcTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, srcTooltipMaxWidth: { classPropertyName: "srcTooltipMaxWidth", publicName: "srcTooltipMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, srcTooltipCustomClass: { classPropertyName: "srcTooltipCustomClass", publicName: "srcTooltipCustomClass", isSignal: true, isRequired: false, transformFunction: null }, sourceTooltipData: { classPropertyName: "sourceTooltipData", publicName: "sourceTooltipData", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "showTooltip()", "focus": "showTooltip()", "mouseleave": "hideTooltip()", "blur": "hideTooltip()" } }, ngImport: i0 }); }
|
|
554
617
|
}
|
|
555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
618
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceTooltipDirective, decorators: [{
|
|
556
619
|
type: Directive,
|
|
557
620
|
args: [{
|
|
558
621
|
selector: '[srcTooltip]',
|
|
@@ -773,10 +836,10 @@ class ColorPaletteComponent {
|
|
|
773
836
|
const imageData = this.ctx().getImageData(this.selectedPosition().x, this.selectedPosition().y, 1, 1).data;
|
|
774
837
|
this.paletteColorUpdate.emit(`#${RGBtoHEX(imageData[0], imageData[1], imageData[2])}`);
|
|
775
838
|
}
|
|
776
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
777
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.
|
|
839
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColorPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
840
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", type: ColorPaletteComponent, isStandalone: true, selector: "src-color-palette", inputs: { selectedHex: { classPropertyName: "selectedHex", publicName: "selectedHex", isSignal: true, isRequired: true, transformFunction: null }, isNeedUpdatePalette: { classPropertyName: "isNeedUpdatePalette", publicName: "isNeedUpdatePalette", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { paletteColorUpdate: "paletteColorUpdate" }, host: { listeners: { "window:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "paletteContainer", first: true, predicate: ["paletteContainer"], descendants: true, isSignal: true }, { propertyName: "canvas", first: true, predicate: ["paletteCanvas"], descendants: true, isSignal: true }, { propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #paletteContainer class=\"src-color-palette\">\n <canvas\n #paletteCanvas\n (mousedown)=\"onMouseDown($event)\"\n (mousemove)=\"onMouseMove($event)\"\n [height]=\"height()\"\n [width]=\"width()\"\n class=\"src-color-palette__canvas\"\n >\n </canvas>\n</div>\n<span #indicator class=\"src-color-picker-indicator\"></span>\n", styles: [":host{position:relative}.src-color-palette{position:relative;width:100%;height:100%;min-height:0;border-radius:var(--srcColorPickerBorderRadius);overflow:hidden;display:block;box-sizing:border-box}.src-color-palette__canvas{display:block;line-height:1;width:100%;height:100%;min-height:0;box-sizing:border-box;cursor:pointer}.src-color-picker-indicator{position:absolute;width:var(--srcColorPickerIndicatorWidth);height:var(--srcColorPickerIndicatorHeight);background-color:transparent;border-radius:var(--srcColorPickerIndicatorBorderRadius);box-shadow:var(--srcColorPickerIndicatorShadow);pointer-events:none;margin:calc(var(--srcColorPickerIndicatorHeight) / -2) 0 0 calc(var(--srcColorPickerIndicatorWidth) / -2);border:var(--srcColorPickerIndicatorBorderWidth) solid var(--srcColorPickerIndicatorBorderColor)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
778
841
|
}
|
|
779
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
842
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColorPaletteComponent, decorators: [{
|
|
780
843
|
type: Component,
|
|
781
844
|
args: [{ standalone: true, selector: 'src-color-palette', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #paletteContainer class=\"src-color-palette\">\n <canvas\n #paletteCanvas\n (mousedown)=\"onMouseDown($event)\"\n (mousemove)=\"onMouseMove($event)\"\n [height]=\"height()\"\n [width]=\"width()\"\n class=\"src-color-palette__canvas\"\n >\n </canvas>\n</div>\n<span #indicator class=\"src-color-picker-indicator\"></span>\n", styles: [":host{position:relative}.src-color-palette{position:relative;width:100%;height:100%;min-height:0;border-radius:var(--srcColorPickerBorderRadius);overflow:hidden;display:block;box-sizing:border-box}.src-color-palette__canvas{display:block;line-height:1;width:100%;height:100%;min-height:0;box-sizing:border-box;cursor:pointer}.src-color-picker-indicator{position:absolute;width:var(--srcColorPickerIndicatorWidth);height:var(--srcColorPickerIndicatorHeight);background-color:transparent;border-radius:var(--srcColorPickerIndicatorBorderRadius);box-shadow:var(--srcColorPickerIndicatorShadow);pointer-events:none;margin:calc(var(--srcColorPickerIndicatorHeight) / -2) 0 0 calc(var(--srcColorPickerIndicatorWidth) / -2);border:var(--srcColorPickerIndicatorBorderWidth) solid var(--srcColorPickerIndicatorBorderColor)}\n"] }]
|
|
782
845
|
}], propDecorators: { onMouseUp: [{
|
|
@@ -901,10 +964,10 @@ class ColorSliderComponent {
|
|
|
901
964
|
const imageData = this.ctx().getImageData(this.selectedPosition().x, this.selectedPosition().y, 1, 1).data;
|
|
902
965
|
this.sliderColorUpdate.emit(`#${RGBtoHEX(imageData[0], imageData[1], imageData[2])}`);
|
|
903
966
|
}
|
|
904
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
905
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.
|
|
967
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColorSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
968
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", type: ColorSliderComponent, isStandalone: true, selector: "src-color-slider", inputs: { selectedHex: { classPropertyName: "selectedHex", publicName: "selectedHex", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, sliderThickness: { classPropertyName: "sliderThickness", publicName: "sliderThickness", isSignal: true, isRequired: true, transformFunction: null }, isNeedUpdateSlider: { classPropertyName: "isNeedUpdateSlider", publicName: "isNeedUpdateSlider", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sliderColorUpdate: "sliderColorUpdate" }, host: { listeners: { "window:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "sliderContainer", first: true, predicate: ["sliderContainer"], descendants: true, isSignal: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #sliderContainer class=\"src-color-slider\">\n <canvas\n #canvas\n (mousedown)=\"onMouseDown($event)\"\n (mousemove)=\"onMouseMove($event)\"\n [height]=\"height()\"\n [width]=\"width()\"\n class=\"src-color-slider__canvas\"\n >\n </canvas>\n <span #indicator class=\"src-color-picker-indicator\"></span>\n</div>\n", styles: [".src-color-slider{width:100%;height:100%;position:relative}.src-color-slider__canvas{display:block;border-radius:var(--srcColorPickerBorderRadius);overflow:hidden;cursor:pointer}.src-color-picker-indicator{position:absolute;width:var(--srcColorPickerIndicatorWidth);height:var(--srcColorPickerIndicatorHeight);background-color:transparent;border-radius:var(--srcColorPickerIndicatorBorderRadius);box-shadow:var(--srcColorPickerIndicatorShadow);pointer-events:none;margin:calc(var(--srcColorPickerIndicatorHeight) / -2) 0 0 calc(var(--srcColorPickerIndicatorWidth) / -2);border:var(--srcColorPickerIndicatorBorderWidth) solid var(--srcColorPickerIndicatorBorderColor)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
906
969
|
}
|
|
907
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
970
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColorSliderComponent, decorators: [{
|
|
908
971
|
type: Component,
|
|
909
972
|
args: [{ standalone: true, selector: 'src-color-slider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #sliderContainer class=\"src-color-slider\">\n <canvas\n #canvas\n (mousedown)=\"onMouseDown($event)\"\n (mousemove)=\"onMouseMove($event)\"\n [height]=\"height()\"\n [width]=\"width()\"\n class=\"src-color-slider__canvas\"\n >\n </canvas>\n <span #indicator class=\"src-color-picker-indicator\"></span>\n</div>\n", styles: [".src-color-slider{width:100%;height:100%;position:relative}.src-color-slider__canvas{display:block;border-radius:var(--srcColorPickerBorderRadius);overflow:hidden;cursor:pointer}.src-color-picker-indicator{position:absolute;width:var(--srcColorPickerIndicatorWidth);height:var(--srcColorPickerIndicatorHeight);background-color:transparent;border-radius:var(--srcColorPickerIndicatorBorderRadius);box-shadow:var(--srcColorPickerIndicatorShadow);pointer-events:none;margin:calc(var(--srcColorPickerIndicatorHeight) / -2) 0 0 calc(var(--srcColorPickerIndicatorWidth) / -2);border:var(--srcColorPickerIndicatorBorderWidth) solid var(--srcColorPickerIndicatorBorderColor)}\n"] }]
|
|
910
973
|
}], propDecorators: { onMouseUp: [{
|
|
@@ -924,7 +987,7 @@ class SourceColorPickerComponent {
|
|
|
924
987
|
this.sliderThickness = input(28, ...(ngDevMode ? [{ debugName: "sliderThickness" }] : []));
|
|
925
988
|
this.testID = input('', ...(ngDevMode ? [{ debugName: "testID", alias: 'data-testid' }] : [{ alias: 'data-testid' }]));
|
|
926
989
|
this.colorUpdate = output();
|
|
927
|
-
this.selectedHex = linkedSignal(() => this.selectedColor());
|
|
990
|
+
this.selectedHex = linkedSignal(() => this.selectedColor(), ...(ngDevMode ? [{ debugName: "selectedHex" }] : []));
|
|
928
991
|
this.isNeedUpdatePalette = signal(null, ...(ngDevMode ? [{ debugName: "isNeedUpdatePalette" }] : []));
|
|
929
992
|
this.isNeedUpdateSlider = signal(null, ...(ngDevMode ? [{ debugName: "isNeedUpdateSlider" }] : []));
|
|
930
993
|
}
|
|
@@ -948,10 +1011,10 @@ class SourceColorPickerComponent {
|
|
|
948
1011
|
this.selectedHex.set(color);
|
|
949
1012
|
this.colorUpdate.emit(color);
|
|
950
1013
|
}
|
|
951
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
952
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1014
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1015
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SourceColorPickerComponent, isStandalone: true, selector: "src-color-picker", inputs: { selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: true, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, hasInput: { classPropertyName: "hasInput", publicName: "hasInput", isSignal: true, isRequired: false, transformFunction: null }, sliderThickness: { classPropertyName: "sliderThickness", publicName: "sliderThickness", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorUpdate: "colorUpdate" }, ngImport: i0, template: "<div\n [class.src-color-picker--compact]=\"isCompact()\"\n [class.src-color-picker--horizontal]=\"orientation() === 'horizontal'\"\n [class.src-color-picker--vertical]=\"orientation() === 'vertical'\"\n [style.--srcColorPickerSliderThickness]=\"sliderThickness() + 'px'\"\n class=\"src-color-picker\"\n [attr.data-testid]=\"testID()\"\n>\n <div class=\"src-color-picker__wrapper\">\n <src-color-palette\n (paletteColorUpdate)=\"paletteColorUpdate($event)\"\n [isNeedUpdatePalette]=\"isNeedUpdatePalette()\"\n [selectedHex]=\"selectedHex()\"\n ></src-color-palette>\n <src-color-slider\n (sliderColorUpdate)=\"sliderColorUpdate($event)\"\n [isNeedUpdateSlider]=\"isNeedUpdateSlider()\"\n [orientation]=\"orientation()\"\n [selectedHex]=\"selectedHex()\"\n [sliderThickness]=\"sliderThickness()\"\n ></src-color-slider>\n </div>\n @if (hasInput()) {\n <div class=\"src-color-picker__input-row\">\n <input\n class=\"src-input src-color-picker__input\"\n type=\"text\"\n [attr.data-testid]=\"testID() + '-hex-input'\"\n [value]=\"selectedHex()\"\n (input)=\"inputUpdate($event)\"\n />\n <div\n class=\"src-color-picker__swatch\"\n [attr.data-testid]=\"testID() + '-swatch'\"\n [style.background-color]=\"selectedHex() || 'white'\"\n ></div>\n </div>\n }\n</div>\n", styles: [".src-color-picker{--srcColorPickerWidth: 360px;--srcColorPickerHeight: 340px;--srcColorPickerBorderRadius: var(--src-border-rounded, var(--src-space-1-5));--srcColorPickerBorderColor: var(--src-border-input-basic, #d1d5db);--srcColorPickerCanvasesGap: 8px;--srcColorPickerInputsGap: 12px;--srcColorPickerIndicatorWidth: 32px;--srcColorPickerIndicatorHeight: 32px;--srcColorPickerIndicatorBorderRadius: 50%;--srcColorPickerIndicatorBorderWidth: 5px;--srcColorPickerIndicatorBorderColor: #fff;--srcColorPickerIndicatorShadow: 0px 0px 2px 0px #0000007a, 0px 0px 3px 0px #00000033;width:var(--srcColorPickerWidth);height:var(--srcColorPickerHeight)}.src-color-picker--compact{--srcColorPickerWidth: 200px;--srcColorPickerHeight: 220px}.src-color-picker--horizontal{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:var(--srcColorPickerInputsGap)}.src-color-picker--horizontal .src-color-picker__wrapper{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--srcColorPickerSliderThickness)}.src-color-picker--vertical{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:var(--srcColorPickerInputsGap)}.src-color-picker--vertical .src-color-picker__wrapper{grid-template-columns:minmax(0,1fr) var(--srcColorPickerSliderThickness);grid-template-rows:minmax(0,1fr)}.src-color-picker__wrapper{display:grid;width:100%;height:100%;gap:var(--srcColorPickerCanvasesGap)}.src-color-picker__input-row{width:100%;display:flex;align-items:center;gap:8px}.src-color-picker__input{flex-grow:1;height:36px}.src-color-picker__swatch{width:64px;height:36px;flex-shrink:0;border:1px solid var(--srcColorPickerBorderColor);border-radius:var(--srcColorPickerBorderRadius)}\n"], dependencies: [{ kind: "component", type: ColorSliderComponent, selector: "src-color-slider", inputs: ["selectedHex", "orientation", "sliderThickness", "isNeedUpdateSlider"], outputs: ["sliderColorUpdate"] }, { kind: "component", type: ColorPaletteComponent, selector: "src-color-palette", inputs: ["selectedHex", "isNeedUpdatePalette"], outputs: ["paletteColorUpdate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
953
1016
|
}
|
|
954
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceColorPickerComponent, decorators: [{
|
|
955
1018
|
type: Component,
|
|
956
1019
|
args: [{ selector: 'src-color-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorSliderComponent, ColorPaletteComponent], template: "<div\n [class.src-color-picker--compact]=\"isCompact()\"\n [class.src-color-picker--horizontal]=\"orientation() === 'horizontal'\"\n [class.src-color-picker--vertical]=\"orientation() === 'vertical'\"\n [style.--srcColorPickerSliderThickness]=\"sliderThickness() + 'px'\"\n class=\"src-color-picker\"\n [attr.data-testid]=\"testID()\"\n>\n <div class=\"src-color-picker__wrapper\">\n <src-color-palette\n (paletteColorUpdate)=\"paletteColorUpdate($event)\"\n [isNeedUpdatePalette]=\"isNeedUpdatePalette()\"\n [selectedHex]=\"selectedHex()\"\n ></src-color-palette>\n <src-color-slider\n (sliderColorUpdate)=\"sliderColorUpdate($event)\"\n [isNeedUpdateSlider]=\"isNeedUpdateSlider()\"\n [orientation]=\"orientation()\"\n [selectedHex]=\"selectedHex()\"\n [sliderThickness]=\"sliderThickness()\"\n ></src-color-slider>\n </div>\n @if (hasInput()) {\n <div class=\"src-color-picker__input-row\">\n <input\n class=\"src-input src-color-picker__input\"\n type=\"text\"\n [attr.data-testid]=\"testID() + '-hex-input'\"\n [value]=\"selectedHex()\"\n (input)=\"inputUpdate($event)\"\n />\n <div\n class=\"src-color-picker__swatch\"\n [attr.data-testid]=\"testID() + '-swatch'\"\n [style.background-color]=\"selectedHex() || 'white'\"\n ></div>\n </div>\n }\n</div>\n", styles: [".src-color-picker{--srcColorPickerWidth: 360px;--srcColorPickerHeight: 340px;--srcColorPickerBorderRadius: var(--src-border-rounded, var(--src-space-1-5));--srcColorPickerBorderColor: var(--src-border-input-basic, #d1d5db);--srcColorPickerCanvasesGap: 8px;--srcColorPickerInputsGap: 12px;--srcColorPickerIndicatorWidth: 32px;--srcColorPickerIndicatorHeight: 32px;--srcColorPickerIndicatorBorderRadius: 50%;--srcColorPickerIndicatorBorderWidth: 5px;--srcColorPickerIndicatorBorderColor: #fff;--srcColorPickerIndicatorShadow: 0px 0px 2px 0px #0000007a, 0px 0px 3px 0px #00000033;width:var(--srcColorPickerWidth);height:var(--srcColorPickerHeight)}.src-color-picker--compact{--srcColorPickerWidth: 200px;--srcColorPickerHeight: 220px}.src-color-picker--horizontal{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:var(--srcColorPickerInputsGap)}.src-color-picker--horizontal .src-color-picker__wrapper{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--srcColorPickerSliderThickness)}.src-color-picker--vertical{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:var(--srcColorPickerInputsGap)}.src-color-picker--vertical .src-color-picker__wrapper{grid-template-columns:minmax(0,1fr) var(--srcColorPickerSliderThickness);grid-template-rows:minmax(0,1fr)}.src-color-picker__wrapper{display:grid;width:100%;height:100%;gap:var(--srcColorPickerCanvasesGap)}.src-color-picker__input-row{width:100%;display:flex;align-items:center;gap:8px}.src-color-picker__input{flex-grow:1;height:36px}.src-color-picker__swatch{width:64px;height:36px;flex-shrink:0;border:1px solid var(--srcColorPickerBorderColor);border-radius:var(--srcColorPickerBorderRadius)}\n"] }]
|
|
957
1020
|
}] });
|
|
@@ -975,8 +1038,8 @@ class SourceSliderGroupComponent {
|
|
|
975
1038
|
this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
976
1039
|
this.testID = input('', ...(ngDevMode ? [{ debugName: "testID", alias: 'data-testid' }] : [{ alias: 'data-testid' }]));
|
|
977
1040
|
this.groupValueChange = output();
|
|
978
|
-
this.inputValue = linkedSignal(() => this.value());
|
|
979
|
-
this.sliderValue = linkedSignal(() => Math.min(Math.max(this.value(), this.min()), this.max()));
|
|
1041
|
+
this.inputValue = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
|
|
1042
|
+
this.sliderValue = linkedSignal(() => Math.min(Math.max(this.value(), this.min()), this.max()), ...(ngDevMode ? [{ debugName: "sliderValue" }] : []));
|
|
980
1043
|
}
|
|
981
1044
|
ngOnInit() {
|
|
982
1045
|
this.groupValueChange.emit(this.sliderValue());
|
|
@@ -998,10 +1061,10 @@ class SourceSliderGroupComponent {
|
|
|
998
1061
|
this.updateSliderValueFromInput(event);
|
|
999
1062
|
event.target.blur();
|
|
1000
1063
|
}
|
|
1001
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1002
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1064
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceSliderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1065
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SourceSliderGroupComponent, isStandalone: true, selector: "src-slider-group", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, units: { classPropertyName: "units", publicName: "units", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, showRange: { classPropertyName: "showRange", publicName: "showRange", 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: { groupValueChange: "groupValueChange" }, ngImport: i0, template: "<div\n [attr.data-testid]=\"testID()\"\n [class.src-slider-group--disabled]=\"isDisabled()\"\n class=\"src-slider-group\"\n>\n <div class=\"src-slider-group__label\">\n <label [attr.data-testid]=\"testID() + '-label'\" [for]=\"id()\">\n {{ label() }}</label\n >\n </div>\n <div class=\"src-slider-group__input\">\n <input\n (change)=\"updateSliderValueFromInput($event)\"\n (keydown.enter)=\"onEnter($event)\"\n [attr.data-testid]=\"testID() + '-input'\"\n [disabled]=\"isDisabled()\"\n [max]=\"max()\"\n [min]=\"min()\"\n [value]=\"inputValue()\"\n class=\"src-slider-group__number\"\n type=\"number\"\n />\n @if (units()) {\n <div class=\"src-slider-group__units\">{{ units() }}</div>\n }\n </div>\n <src-slider\n (onChange)=\"updateSliderValue($event)\"\n [data-testid]=\"testID() + '-slider'\"\n [id]=\"id()\"\n [isDisabled]=\"isDisabled()\"\n [max]=\"max()\"\n [min]=\"min()\"\n [showTicks]=\"showTicks()\"\n [step]=\"step()\"\n [value]=\"sliderValue()\"\n ></src-slider>\n @if (showRange()) {\n <div class=\"src-slider-group__range\">\n <span class=\"src-slider-group__range-min\">{{ min() }}</span>\n <span class=\"src-slider-group__range-max\">{{ max() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}.src-slider-group{--srcSliderLabelColor: var(--src-color-text-default, #1f2937);--srcSliderInputColor: var(--src-color-text-default, #1f2937);--srcSliderInputBorder: transparent;position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto auto;gap:0 12px}.src-slider-group--disabled{--srcSliderLabelColor: var(--src-color-text-default-disabled, #abb2be);--srcSliderInputColor: var(--src-color-text-default-disabled, #abb2be);--srcSliderInputBorder: transparent}.src-slider-group--disabled .src-slider-group__input:hover{--srcSliderInputBorder: transparent}.src-slider-group__label{grid-column:1/2;grid-row:1/2;padding-bottom:6px}.src-slider-group__label label{padding:2px 0;color:var(--srcSliderLabelColor);font-size:13px;font-style:normal;font-weight:400;line-height:16px}.src-slider-group__input{grid-column:2/-1;grid-row:1/2;display:flex;align-items:center;justify-self:flex-end;position:relative;margin-bottom:6px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--srcSliderInputBorder)}.src-slider-group__input:hover{--srcSliderInputBorder: var(--src-color-border-hover, #d1d5db)}.src-slider-group__input:focus-within{outline:none;--srcSliderInputBorder: var(--src-color-border-primary, #0a8552);box-shadow:inset 0 -2px 0 0 var(--srcSliderInputBorder)}.src-slider-group__units{color:var(--srcSliderInputColor);font-size:13px;font-weight:400;line-height:16px}src-slider{grid-column:1/-1;grid-row:2/-1}.src-slider-group__number{text-align:right;border:none;padding:2px 0;background-color:transparent;min-width:0;width:auto;color:var(--srcSliderInputColor);font-size:13px;font-weight:400;line-height:16px;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.src-slider-group__number::-webkit-outer-spin-button,.src-slider-group__number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.src-slider-group__range{grid-column:1/-1;width:100%;padding-top:6px;display:flex;align-items:center;justify-content:space-between;color:var(--srcSliderInputColor);font-size:13px;font-weight:400;line-height:16px}.src-slider-group__range-max{justify-self:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SourceSliderComponent, selector: "src-slider", inputs: ["id", "value", "min", "max", "thumbSize", "trackHeight", "step", "showTicks", "isDisabled", "orientation", "data-testid"], outputs: ["onChange", "onInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1003
1066
|
}
|
|
1004
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1067
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SourceSliderGroupComponent, decorators: [{
|
|
1005
1068
|
type: Component,
|
|
1006
1069
|
args: [{ selector: 'src-slider-group', imports: [FormsModule, SourceSliderComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [attr.data-testid]=\"testID()\"\n [class.src-slider-group--disabled]=\"isDisabled()\"\n class=\"src-slider-group\"\n>\n <div class=\"src-slider-group__label\">\n <label [attr.data-testid]=\"testID() + '-label'\" [for]=\"id()\">\n {{ label() }}</label\n >\n </div>\n <div class=\"src-slider-group__input\">\n <input\n (change)=\"updateSliderValueFromInput($event)\"\n (keydown.enter)=\"onEnter($event)\"\n [attr.data-testid]=\"testID() + '-input'\"\n [disabled]=\"isDisabled()\"\n [max]=\"max()\"\n [min]=\"min()\"\n [value]=\"inputValue()\"\n class=\"src-slider-group__number\"\n type=\"number\"\n />\n @if (units()) {\n <div class=\"src-slider-group__units\">{{ units() }}</div>\n }\n </div>\n <src-slider\n (onChange)=\"updateSliderValue($event)\"\n [data-testid]=\"testID() + '-slider'\"\n [id]=\"id()\"\n [isDisabled]=\"isDisabled()\"\n [max]=\"max()\"\n [min]=\"min()\"\n [showTicks]=\"showTicks()\"\n [step]=\"step()\"\n [value]=\"sliderValue()\"\n ></src-slider>\n @if (showRange()) {\n <div class=\"src-slider-group__range\">\n <span class=\"src-slider-group__range-min\">{{ min() }}</span>\n <span class=\"src-slider-group__range-max\">{{ max() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative}.src-slider-group{--srcSliderLabelColor: var(--src-color-text-default, #1f2937);--srcSliderInputColor: var(--src-color-text-default, #1f2937);--srcSliderInputBorder: transparent;position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto auto;gap:0 12px}.src-slider-group--disabled{--srcSliderLabelColor: var(--src-color-text-default-disabled, #abb2be);--srcSliderInputColor: var(--src-color-text-default-disabled, #abb2be);--srcSliderInputBorder: transparent}.src-slider-group--disabled .src-slider-group__input:hover{--srcSliderInputBorder: transparent}.src-slider-group__label{grid-column:1/2;grid-row:1/2;padding-bottom:6px}.src-slider-group__label label{padding:2px 0;color:var(--srcSliderLabelColor);font-size:13px;font-style:normal;font-weight:400;line-height:16px}.src-slider-group__input{grid-column:2/-1;grid-row:1/2;display:flex;align-items:center;justify-self:flex-end;position:relative;margin-bottom:6px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--srcSliderInputBorder)}.src-slider-group__input:hover{--srcSliderInputBorder: var(--src-color-border-hover, #d1d5db)}.src-slider-group__input:focus-within{outline:none;--srcSliderInputBorder: var(--src-color-border-primary, #0a8552);box-shadow:inset 0 -2px 0 0 var(--srcSliderInputBorder)}.src-slider-group__units{color:var(--srcSliderInputColor);font-size:13px;font-weight:400;line-height:16px}src-slider{grid-column:1/-1;grid-row:2/-1}.src-slider-group__number{text-align:right;border:none;padding:2px 0;background-color:transparent;min-width:0;width:auto;color:var(--srcSliderInputColor);font-size:13px;font-weight:400;line-height:16px;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.src-slider-group__number::-webkit-outer-spin-button,.src-slider-group__number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.src-slider-group__range{grid-column:1/-1;width:100%;padding-top:6px;display:flex;align-items:center;justify-content:space-between;color:var(--srcSliderInputColor);font-size:13px;font-weight:400;line-height:16px}.src-slider-group__range-max{justify-self:flex-end}\n"] }]
|
|
1007
1070
|
}] });
|
|
@@ -1010,5 +1073,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
1010
1073
|
* Generated bundle index. Do not edit.
|
|
1011
1074
|
*/
|
|
1012
1075
|
|
|
1013
|
-
export { ColorPaletteComponent, ColorSliderComponent, SOURCE_TOOLTIP_DATA, SourceColorPickerComponent, SourceColorPickerOrientation, SourceModalComponent, SourceModalSize, SourcePopoverComponent, SourcePopoverService, SourcePopoverTriggerComponent, SourceSliderGroupComponent, SourceTabComponent, SourceTabLineComponent, SourceTabsComponent, SourceTooltipComponent, SourceTooltipDirective, SourceTooltipPosition, defaultSourcePopoverConfig };
|
|
1076
|
+
export { ColorPaletteComponent, ColorSliderComponent, SOURCE_TOOLTIP_DATA, SourceColorPickerComponent, SourceColorPickerOrientation, SourceModalComponent, SourceModalSize, SourceModalType, SourcePopoverComponent, SourcePopoverService, SourcePopoverTriggerComponent, SourceSliderGroupComponent, SourceTabComponent, SourceTabLineComponent, SourceTabStyle, SourceTabsComponent, SourceTooltipComponent, SourceTooltipDirective, SourceTooltipPosition, defaultSourcePopoverConfig, sourceModalIcon };
|
|
1014
1077
|
//# sourceMappingURL=3dsource-source-ui.mjs.map
|