@mxtommy/kip 3.1.4 → 3.1.5
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/CHANGELOG.md +6 -1
- package/package.json +13 -13
- package/public/assets/help-docs/datainspector.md +49 -2
- package/public/assets/help-docs/datasets.md +95 -20
- package/public/assets/help-docs/embedwidget.md +95 -0
- package/public/assets/help-docs/menu.json +3 -2
- package/public/{chunk-AGPPRVTP.js → chunk-2L4BJEEQ.js} +1 -1
- package/public/{chunk-6NIOBZZL.js → chunk-2QUOTZ6A.js} +1 -1
- package/public/{chunk-MCACXEYY.js → chunk-4K4AXXSU.js} +1 -1
- package/public/{chunk-VIHODUV4.js → chunk-6QHCHGTT.js} +3 -3
- package/public/{chunk-FFCTE2U5.js → chunk-77C4Q6FL.js} +1 -1
- package/public/{chunk-RCSPPHLA.js → chunk-7TWI6ZJI.js} +1 -1
- package/public/{chunk-FCC7GNHD.js → chunk-CD375FDG.js} +1 -1
- package/public/{chunk-YQQFIIO5.js → chunk-CEBDBQUK.js} +1 -1
- package/public/{chunk-AHFD2AA5.js → chunk-D3QHJ7S5.js} +1 -1
- package/public/{chunk-7OTNT2GF.js → chunk-GQFDVLM2.js} +1 -1
- package/public/{chunk-GV2JTAMW.js → chunk-GUZX3LWH.js} +1 -1
- package/public/{chunk-LMRTNYJV.js → chunk-JSBINEAH.js} +1 -1
- package/public/{chunk-WJMKCVFQ.js → chunk-JZUG3W7P.js} +1 -1
- package/public/{chunk-E2USGHSP.js → chunk-LDD3DUAE.js} +1 -1
- package/public/{chunk-OG77M7OV.js → chunk-MR7RUNKP.js} +1 -1
- package/public/{chunk-NGZ4CXLB.js → chunk-NGNSVXS2.js} +1 -1
- package/public/{chunk-RNQY2ZHR.js → chunk-NPOJFRE3.js} +6 -6
- package/public/{chunk-5BPL4ALQ.js → chunk-OTD7HT32.js} +1 -1
- package/public/{chunk-JKSAHAZC.js → chunk-PFVH4UT3.js} +1 -1
- package/public/{chunk-2Y6OT6VQ.js → chunk-S7S3UOGN.js} +1 -1
- package/public/{chunk-55WFSEKP.js → chunk-SM7W6ABR.js} +1 -1
- package/public/{chunk-WR74IMVF.js → chunk-SZD5Q3AW.js} +1 -1
- package/public/{chunk-FMVUDX5R.js → chunk-TMDXXJWO.js} +1 -1
- package/public/{chunk-RNM4H3MR.js → chunk-UH5I5JPF.js} +1 -1
- package/public/{chunk-LTMJXHF3.js → chunk-WRDOUMT5.js} +1 -1
- package/public/chunk-Y7X77HSW.js +18 -0
- package/public/index.html +1 -1
- package/public/{main-OWSKDRJZ.js → main-FGQDDG5X.js} +13 -13
- package/public/chunk-JIJMSRKJ.js +0 -18
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
|
+
# V 3.1.5
|
|
2
|
+
## Fixes
|
|
3
|
+
* Swipe sensitivity reported by trackpad device users
|
|
4
|
+
* Sidebars occasionally stops responding to swipes
|
|
5
|
+
* Documentation: Embed widget, Dataset & Data Charts and Data Inspector guides update
|
|
1
6
|
# V 3.1.4
|
|
2
7
|
## Fixes
|
|
3
|
-
* Help section on
|
|
8
|
+
* Help section on Updating Signal K Data (using PUT commands)
|
|
4
9
|
# V 3.1.3
|
|
5
10
|
## Fixes
|
|
6
11
|
* Switch Panel Indicator control only listing PUT enabled paths. Fixes #609
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mxtommy/kip",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.5",
|
|
4
4
|
"description": "An advanced and versatile marine instrumentation package to display Signal K data.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
@@ -45,20 +45,20 @@
|
|
|
45
45
|
"e2e": "ng e2e"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@angular-devkit/build-angular": "^19.2.
|
|
49
|
-
"@angular/animations": "19.2.
|
|
48
|
+
"@angular-devkit/build-angular": "^19.2.10",
|
|
49
|
+
"@angular/animations": "19.2.9",
|
|
50
50
|
"@angular/cdk": "19.2.10",
|
|
51
|
-
"@angular/cli": "^19.2.
|
|
52
|
-
"@angular/common": "19.2.
|
|
53
|
-
"@angular/compiler": "19.2.
|
|
54
|
-
"@angular/compiler-cli": "19.2.
|
|
55
|
-
"@angular/core": "19.2.
|
|
56
|
-
"@angular/forms": "19.2.
|
|
57
|
-
"@angular/language-service": "19.2.
|
|
51
|
+
"@angular/cli": "^19.2.10",
|
|
52
|
+
"@angular/common": "19.2.9",
|
|
53
|
+
"@angular/compiler": "19.2.9",
|
|
54
|
+
"@angular/compiler-cli": "19.2.9",
|
|
55
|
+
"@angular/core": "19.2.9",
|
|
56
|
+
"@angular/forms": "19.2.9",
|
|
57
|
+
"@angular/language-service": "19.2.9",
|
|
58
58
|
"@angular/material": "19.2.10",
|
|
59
|
-
"@angular/platform-browser": "19.2.
|
|
60
|
-
"@angular/platform-browser-dynamic": "19.2.
|
|
61
|
-
"@angular/router": "19.2.
|
|
59
|
+
"@angular/platform-browser": "19.2.9",
|
|
60
|
+
"@angular/platform-browser-dynamic": "19.2.9",
|
|
61
|
+
"@angular/router": "19.2.9",
|
|
62
62
|
"@godind/ng-canvas-gauges": "^6.2.1",
|
|
63
63
|
"@robloche/chartjs-plugin-streaming": "^3.1.0",
|
|
64
64
|
"@types/canvas-gauges": "^2.1.8",
|
|
@@ -1,3 +1,50 @@
|
|
|
1
1
|
# Data Inspector
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
|
|
3
|
+
The Data Inspector is a powerful tool in KIP that allows you to view all Signal K paths and the data received from the server in real time. It provides detailed insights into the data being transmitted, including metadata, sources, and supported operations. This guide explains how to use the Data Inspector effectively.
|
|
4
|
+
|
|
5
|
+
The Data Inspector is a good way to validate raw data and available paths without the constraints that each widget can impose. It provides a clear and unrestricted view of the data, making it an essential tool for understanding the underlying Signal K data structure.
|
|
6
|
+
|
|
7
|
+
## How to use the Data Inspector
|
|
8
|
+
1. **Filter Paths**:
|
|
9
|
+
- Use the filter input box to narrow down the list of paths. For example:
|
|
10
|
+
- Type `self.` to view paths related to your vessel.
|
|
11
|
+
- Type `environment` to view environmental data like wind or temperature.
|
|
12
|
+
- Type `speed` to view any speed related data like wind speed, max speed, polar speed, etc.
|
|
13
|
+
|
|
14
|
+
2. **Sort and Navigate**:
|
|
15
|
+
- Click on column headers to sort the data by Path, PUT Support, or Source.
|
|
16
|
+
- Use the paginator to navigate through the list if there are many paths.
|
|
17
|
+
|
|
18
|
+
## Key Features of the Data Inspector
|
|
19
|
+
|
|
20
|
+
1. **Real-Time Data Display**:
|
|
21
|
+
- The Data Inspector shows all Signal K paths and their current values as they are received from the server.
|
|
22
|
+
- Data updates in real time, allowing you to monitor changes as they happen.
|
|
23
|
+
|
|
24
|
+
2. **PUT Support**:
|
|
25
|
+
- You can see if a path supports PUT operations, indicated by a green checkmark in the **PUT Support** column.
|
|
26
|
+
- For more details on PUT support and how to use it, refer to the Updating Signal K Data Guide.
|
|
27
|
+
|
|
28
|
+
3. **Multiple Data Sources**:
|
|
29
|
+
- The Data Inspector displays how many sources are providing data for each path.
|
|
30
|
+
- You can view the raw data sent by each source and compare their values.
|
|
31
|
+
|
|
32
|
+
4. **Unit Conversion**:
|
|
33
|
+
- If a path supports unit conversion, you can change the data format to your preferred unit (e.g., converting speed from knots to kilometers per hour).
|
|
34
|
+
- This feature is especially useful to quickly display data in a format that matches your preferences.
|
|
35
|
+
- Changing the units in the Data Inspector does not change KIP's default units or any widget's format settings. It is only for quick consultation.
|
|
36
|
+
|
|
37
|
+
## Practical Use Cases
|
|
38
|
+
|
|
39
|
+
- **Validate Raw Data**:
|
|
40
|
+
- Use the Data Inspector to validate raw data and available paths without the constraints that widgets can impose. This is especially useful when setting up new devices or debugging data issues.
|
|
41
|
+
|
|
42
|
+
- **Verify PUT Support**:
|
|
43
|
+
- Check if a path supports PUT operations before configuring widgets like the Switch Panel or Slider.
|
|
44
|
+
|
|
45
|
+
- **Troubleshoot Data Issues**:
|
|
46
|
+
- The Data Inspector is a good troubleshooting tool, but it should be matched with the Signal K Data Browser when trying to understand raw data and what is going on. The combination of these tools provides a more complete picture of the data and its behavior.
|
|
47
|
+
|
|
48
|
+
## Summary
|
|
49
|
+
|
|
50
|
+
The Data Inspector is an essential tool for managing and understanding the data KIP receives from your Signal K server. With its real-time updates, filtering, and unit conversion capabilities, it provides a comprehensive view of your vessel's data. Whether you're monitoring performance, configuring widgets, or troubleshooting issues. For deeper analysis and understanding of raw data, pair it with the Signal K Data Browser to gain even more insights.
|
|
@@ -1,20 +1,95 @@
|
|
|
1
|
-
# Datasets
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
# Datasets and Data Chart Widget
|
|
2
|
+
|
|
3
|
+
Datasets and the Data Chart widget work together to provide real-time data visualization in KIP. They allow you to collect and display historical data trends for Signal K paths, enabling better decision-making and monitoring. This guide explains how to configure and use Datasets and the Data Chart widget effectively.
|
|
4
|
+
|
|
5
|
+
## What Are Datasets?
|
|
6
|
+
|
|
7
|
+
Datasets are background processes that record path values over time. They are designed to provide a short historical view of data trends, offering visual cues to enhance decision-making. Datasets are not intended to replace full-fledged data logging or analysis tools like Grafana. Instead, they serve as lightweight tools for real-time monitoring and visualization.
|
|
8
|
+
|
|
9
|
+
### Key Features of Datasets:
|
|
10
|
+
1. **Real-Time Data Collection**:
|
|
11
|
+
- Datasets collect data points for a specific Signal K path at regular intervals (e.g., every 5 seconds).
|
|
12
|
+
- These data points are stored temporarily and used to generate visualizations.
|
|
13
|
+
|
|
14
|
+
2. **Short-Term Historical View**:
|
|
15
|
+
- Datasets provide a limited historical view of data trends, ideal for quick insights rather than deep analysis.
|
|
16
|
+
|
|
17
|
+
3. **Customizable Time Scales**:
|
|
18
|
+
- You can configure the time scale for data collection (e.g., seconds, minutes, or hours) to suit your needs.
|
|
19
|
+
|
|
20
|
+
4. **System Resource Management**:
|
|
21
|
+
- Care should be taken to manage datasets efficiently, as excessive data collection can impact system performance.
|
|
22
|
+
|
|
23
|
+
## What Is the Data Chart Widget?
|
|
24
|
+
|
|
25
|
+
The Data Chart widget is a visualization tool that uses datasets to display data trends over time. It renders line graphs based on the dataset's collected data points.
|
|
26
|
+
|
|
27
|
+
### Key Features of the Data Chart Widget:
|
|
28
|
+
1. **Real-Time Graphs**:
|
|
29
|
+
- Displays data trends in real time, updating as new data points are collected.
|
|
30
|
+
|
|
31
|
+
2. **Customizable Appearance**:
|
|
32
|
+
- Configure the chart's appearance, including colors, label, scales and other options.
|
|
33
|
+
|
|
34
|
+
## How to Use Datasets and the Data Chart Widget Together
|
|
35
|
+
|
|
36
|
+
### Step 1: Create a Dataset
|
|
37
|
+
1. **Open the Datasets Page**:
|
|
38
|
+
- Navigate to the **Datasets** page from the KIP Action menu.
|
|
39
|
+
|
|
40
|
+
2. **Add a New Dataset**:
|
|
41
|
+
- Click the **Add** button to open the dataset configuration modal.
|
|
42
|
+
|
|
43
|
+
3. **Configure the Dataset**:
|
|
44
|
+
- **Path**: Select the Signal K path you want to monitor (e.g., `navigation.speedThroughWater`).
|
|
45
|
+
- **Source**: Choose the data source (e.g., `default` or a specific device).
|
|
46
|
+
- **Time Scale**: Set the interval for data collection (e.g., every 5 seconds).
|
|
47
|
+
- **Duration**: Define how long the dataset should retain data points (e.g., 1 hour).
|
|
48
|
+
|
|
49
|
+
4. **Save the Dataset**:
|
|
50
|
+
- Click **Save** to start collecting data for the selected path.
|
|
51
|
+
|
|
52
|
+
### Step 2: Configure the Data Chart Widget
|
|
53
|
+
1. **Add the Widget to Your Dashboard**:
|
|
54
|
+
- Open the dashboard editor and add a **Data Chart** widget.
|
|
55
|
+
|
|
56
|
+
2. **Select a Dataset**:
|
|
57
|
+
- In the widget configuration, choose the dataset you created in Step 1.
|
|
58
|
+
- Select your preferred data display format (e.g., knots to km/h) in the Dataset Tab.
|
|
59
|
+
|
|
60
|
+
3. **Customize the Chart**:
|
|
61
|
+
- Configure the chart's appearance:
|
|
62
|
+
- **Labels**: Add a widget display the widget label.
|
|
63
|
+
- **Colors**: Customize the graph's color scheme.
|
|
64
|
+
- **Series**: Customize the series to display.
|
|
65
|
+
- **Scales**: Customize the scales of the graph.
|
|
66
|
+
- **Datasets**: Customize what dataset to include.
|
|
67
|
+
|
|
68
|
+
4. **Save the Widget**:
|
|
69
|
+
- Save the widget configuration to display the chart on your dashboard.
|
|
70
|
+
|
|
71
|
+
## Practical Use Cases
|
|
72
|
+
|
|
73
|
+
1. **Monitor Speed Trends**:
|
|
74
|
+
- Create a dataset for `navigation.speedThroughWater` and display it in a Data Chart widget to monitor speed trends over time.
|
|
75
|
+
|
|
76
|
+
2. **Track Environmental Data**:
|
|
77
|
+
- Use datasets to collect data for paths like `environment.wind.speedApparent` or `environment.temperature` and visualize them in real time.
|
|
78
|
+
|
|
79
|
+
## Tips for Managing Datasets
|
|
80
|
+
|
|
81
|
+
1. **Limit the Number of Datasets**:
|
|
82
|
+
- Avoid creating too many datasets to prevent excessive resource usage.
|
|
83
|
+
|
|
84
|
+
2. **Choose Appropriate Time Scales**:
|
|
85
|
+
- Select a time scale that balances data granularity with system performance. Solar Panel performance data is meaning full over hours, not seconds.
|
|
86
|
+
|
|
87
|
+
3. **Regularly Review Datasets**:
|
|
88
|
+
- Periodically review and delete unused datasets to free up resources.
|
|
89
|
+
|
|
90
|
+
4. **Combine with Other Tools**:
|
|
91
|
+
- If data analytics requirements go beyond a simple visual, eg. if you need to transform, process or summarize the data, if the data needs to be persisted on restart of KIP, etc.
|
|
92
|
+
|
|
93
|
+
## Summary
|
|
94
|
+
|
|
95
|
+
Datasets and the Data Chart widget are powerful tools for real-time data visualization in KIP. By collecting and displaying historical data trends, they provide valuable insights to help you monitor and manage your vessel's systems. With proper configuration and management, you can use these tools to enhance decision-making and improve situational awareness.
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
# Using the Embed Page Viewer Widget
|
|
2
|
+
|
|
3
|
+
The Embed Page Viewer widget allows you to display external web pages or web applications directly within your dashboard. By default, the Embed Page Viewer widget does not allow input (touch, mouse and keyboard interactions) with the content in the Embed. Their is an option to enable input in the widget options.
|
|
4
|
+
|
|
5
|
+
While this embedding feature is powerful, it comes with certain limitations due to browser security policies, specifically related to Cross-Origin Resource Sharing (CORS). This guide explains these limitations in simple terms and how they might affect your use of the widget.
|
|
6
|
+
|
|
7
|
+
## What Are CORS Limitations?
|
|
8
|
+
|
|
9
|
+
CORS (Cross-Origin Resource Sharing) is a security feature built into web browsers. It prevents one website from accessing resources (like web pages or data) from another website unless the other website explicitly allows it. This is done to protect users from malicious websites trying to steal data or perform unauthorized actions.
|
|
10
|
+
|
|
11
|
+
When you use the Embed Page Viewer widget, it tries to load the content of the URL you provide into an iframe. However, if the website you are trying to embed does not allow its content to be displayed in an iframe on another website (like your Signal K dashboard), the browser will block it. This is not something the widget or Signal K can control—it is a restriction set by the website you are trying to embed.
|
|
12
|
+
|
|
13
|
+
## Understanding CORS and Hostname/Port Behavior
|
|
14
|
+
|
|
15
|
+
It is important to clarify that CORS (Cross-Origin Resource Sharing) restrictions are not enforced when the hostname and port of the embedded content match the hostname and port of the KIP dashboard. This is because CORS only applies to requests made across different origins. An origin is defined as a combination of the protocol (e.g., `http` or `https`), hostname (e.g., `localhost` or `example.com`), and port (e.g., `80`, `443`, or a custom port).
|
|
16
|
+
|
|
17
|
+
### When CORS Does Not Apply
|
|
18
|
+
|
|
19
|
+
If the URL you are embedding in the Embed Page Viewer widget uses the same hostname and port as your KIP dashboard (e.g., all Signal K app store applications), the browser considers it to be the same origin. In this case, CORS restrictions do not apply, and the content can be embedded without issues.
|
|
20
|
+
|
|
21
|
+
#### Examples:
|
|
22
|
+
|
|
23
|
+
1. **Same Origin (No CORS Restrictions)**:
|
|
24
|
+
- KIP Dashboard URL: `http://localhost:3000/@mxtommy/kip/`
|
|
25
|
+
- Embedded Content URL: `http://localhost:3000/some-page/`
|
|
26
|
+
- Since both KIP and the embedded URL share the same protocol (`http`), hostname (`localhost`), and port (`3000`), CORS does not apply.
|
|
27
|
+
|
|
28
|
+
2. **Different Origin (CORS Restrictions Apply)**:
|
|
29
|
+
- KIP Dashboard URL: `http://localhost:3000/@mxtommy/kip/`
|
|
30
|
+
- Embedded Content URL: `http://localhost:4000/some-page/`
|
|
31
|
+
- In this case, the ports are different (`3000` vs. `4000`), so the browser considers them to be different origins, and CORS restrictions will apply.
|
|
32
|
+
|
|
33
|
+
3. **Different Hostname (CORS Restrictions Apply)**:
|
|
34
|
+
- KIP Dashboard URL: `http://dashboard.local/@mxtommy/kip/`
|
|
35
|
+
- Embedded Content URL: `http://example.com/some-page`
|
|
36
|
+
- Even if the ports are the same, the hostnames are different (`dashboard.local` vs. `example.com`), so CORS restrictions will apply.
|
|
37
|
+
|
|
38
|
+
4. **Different Protocol (CORS Restrictions Apply)**:
|
|
39
|
+
- KIP Dashboard URL: `http://localhost:3000/@mxtommy/kip/`
|
|
40
|
+
- Embedded Content URL: `https://localhost:3000/some-page/`
|
|
41
|
+
- Even though the hostname and port are the same, the protocols are different (`http` vs. `https`), so CORS restrictions will apply.
|
|
42
|
+
|
|
43
|
+
### IMPORTANT: Practical Implications for KIP Users
|
|
44
|
+
|
|
45
|
+
- Embedding webapp and websites is far from perfect. Their are tradeoffs and limitations. If you find yourself unhappy with the result, keep your smile and give back to the community by build a dedicated KIP widget. We will help and many have done so.
|
|
46
|
+
- By default you cannot interact with the Embed content. Activate the **Enable Input** widget option if you need to interact with the content.
|
|
47
|
+
- If you are hosting custom web pages or applications on the same server as your KIP dashboard, ideally you've created a Signal K webapp and shared it with the community, ensure they use the same hostname and port and use a relative URL path in the Embed configuration. For example, if your KIP dashboard is running on `http://localhost:3000/@mxtommy/kip/` and your custom content is under the same origin, such as `http://localhost:3000/signalk-anchoralarm-plugin/` simply enter a relative URL in the widget options, like `/signalk-anchoralarm-plugin/`. KIP will automatically add the proper protocol, hostname, port and load the content. This will prevent issues when content loads when KIP is launch from the server, not not when you load it on your phone or tablet.
|
|
48
|
+
|
|
49
|
+
### Summary
|
|
50
|
+
|
|
51
|
+
CORS restrictions only apply when the protocol, hostname, or port of the embedded content differs from the KIP dashboard. By ensuring that your embedded content shares the same origin as the dashboard, you can avoid CORS-related issues and seamlessly use the Embed Page Viewer widget.
|
|
52
|
+
|
|
53
|
+
## How Does This Affect the Embed Widget?
|
|
54
|
+
|
|
55
|
+
1. **Blocked Content**:
|
|
56
|
+
- If the website you are trying to embed has CORS restrictions or does not allow embedding via iframes, the widget will not display the content. Instead, you might see a blank area or an error message.
|
|
57
|
+
|
|
58
|
+
2. **Common Examples of Blocked Content**:
|
|
59
|
+
- Many popular websites (e.g., banking sites, social media platforms, or secure portals) block iframe embedding for security reasons.
|
|
60
|
+
- Some websites may allow embedding only for specific trusted domains, which most probably do not include your Signal K installation.
|
|
61
|
+
|
|
62
|
+
3. **Consequences of Blocked Content in KIP**:
|
|
63
|
+
- When you enable the "Allow Input" Embed widget option, KIP needs to inject swipe gestures within the embedded application to trigger dashboard navigation, sidebar menu control, or use KIP's keyboard hotkeys while the focus is inside the iframe. To achieve this, KIP dynamically injects scripts into the iframe application. If CORS restrictions apply, this will be prohibited by the browser. This means that gestures and hotkeys will not work over the Embed widget. If you have a full-screen Embed widget, you could get stuck with no way to change dashboards or open menus.
|
|
64
|
+
|
|
65
|
+
4. **No Workaround for Restricted Websites**:
|
|
66
|
+
- If the application does not allow iframe embedding, there is no way to bypass this restriction without the application owner's adding some kind of authorization for you. This is a browser-enforced security feature.
|
|
67
|
+
|
|
68
|
+
## How to Use the Embed Widget Effectively
|
|
69
|
+
|
|
70
|
+
1. **Choose Embed-Friendly Websites**:
|
|
71
|
+
- Use URLs from applications and sites that allow embedding in iframes. For example, all Signal K webapps, Grafana, many public information sites, weather services, or custom web pages you control are good candidates.
|
|
72
|
+
|
|
73
|
+
2. **Check with the Application Owner**:
|
|
74
|
+
- If you need to embed a specific app, contact the app owner see if they provide a mechanism to add allowed host URL to their app.
|
|
75
|
+
|
|
76
|
+
## Authorizing KIP to Load Embedded Content
|
|
77
|
+
|
|
78
|
+
When using the Embed Page Viewer widget, it is important to understand that the ability to display a website or app inside the widget depends on the website or app itself. Specifically, the website being embedded must explicitly allow YOUR PERSONAL SIGNAL K SERVER to load its app or content in an iframe. This can be configured by the embedded app's security settings, which are typically configured using HTTP headers in configuration files.
|
|
79
|
+
|
|
80
|
+
### What App and Site Owners Need to Do
|
|
81
|
+
|
|
82
|
+
1. **Allow Embedding in an iframe**:
|
|
83
|
+
- The website must include the `X-Frame-Options` HTTP header or the `Content-Security-Policy` header to explicitly allow embedding.
|
|
84
|
+
- For example:
|
|
85
|
+
- To allow embedding from any domain:
|
|
86
|
+
```http
|
|
87
|
+
Content-Security-Policy: frame-ancestors *
|
|
88
|
+
```
|
|
89
|
+
- To allow embedding only from the KIP dashboard (replace `your-signalk-domain.com` with your actual domain):
|
|
90
|
+
```http
|
|
91
|
+
Content-Security-Policy: frame-ancestors http://your-signalk-domain.com:3000
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
2. **Test the Configuration**:
|
|
95
|
+
- After updating the HTTP headers, test the website in the Embed Page Viewer widget. To ensure it loads correctly, look in the Browser's consol log for error messages.
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
[
|
|
2
2
|
{ "title": "The basics", "file": "welcome.md" },
|
|
3
3
|
{ "title": "Dashboards and Layout", "file": "dashboards.md" },
|
|
4
|
-
{ "title": "Datasets and Data Charts", "file": "datasets.md" },
|
|
5
4
|
{ "title": "Zones, Notifications and Highlights", "file": "zones.md" },
|
|
6
5
|
{ "title": "Updating Signal K data", "file": "putcontrols.md" },
|
|
7
|
-
{ "title": "
|
|
6
|
+
{ "title": "The Embed Page Viewer", "file": "embedwidget.md" },
|
|
8
7
|
{ "title": "Data Inspector", "file": "datainspector.md" },
|
|
8
|
+
{ "title": "Datasets and Data Chart Widget", "file": "datasets.md" },
|
|
9
|
+
{ "title": "Configuration Management", "file": "configuration.md" },
|
|
9
10
|
{ "title": "Gafana Integration", "file": "grafana.md" },
|
|
10
11
|
{ "title": "InfluxDB and Signal K", "file": "influxdb.md" },
|
|
11
12
|
{ "title": "Contact Us", "file": "contact-us.md" }
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{a as Ot,b as Pt,c as Rt,d as zt,e as Ft,f as At,g as Ht,h as Lt,i as Vt,j as Nt,k as Bt,m as Qt,n as re,p as oe,q as jt}from"./chunk-NGZ4CXLB.js";import"./chunk-OG77M7OV.js";import{a as Et,d as Tt}from"./chunk-FMVUDX5R.js";import{a as It}from"./chunk-FFCTE2U5.js";import{a as kt}from"./chunk-6NIOBZZL.js";import{f as Mt,j as wt}from"./chunk-7OTNT2GF.js";import{o as st}from"./chunk-VIHODUV4.js";import{d as mt,e as ut,g as ht,i as ft,j as _t}from"./chunk-FCC7GNHD.js";import"./chunk-SGYCFQGT.js";import{a as xe}from"./chunk-RCSPPHLA.js";import{B as Se,D as Ce,i as Ye,r as Ze,t as be,z as ye}from"./chunk-AHFD2AA5.js";import{$a as He,$b as A,$c as W,Ac as de,Ae as dt,Bb as Ve,Bc as je,Cb as le,Cc as B,Da as ze,Dc as p,Ea as _,Ec as T,Ee as ct,Fa as g,Fc as w,Hb as M,Ia as U,Ic as Q,Jb as S,Jc as j,Kb as Ne,Kc as $,Lb as O,Ld as Je,Nb as h,Oa as R,Oc as ce,Od as Xe,Pa as Fe,Pc as $e,Qc as me,Rc as qe,Ta as K,Tc as We,Td as et,Va as Ae,Vc as Ge,Vd as tt,Wa as Y,Wd as it,Xc as q,Xe as gt,Yb as F,Zb as u,_b as Be,_e as vt,ad as Ue,af as bt,bc as pe,bf as fe,cc as Qe,dc as x,de as at,ee as nt,ef as _e,fa as k,fc as ie,g as Ee,ga as Oe,gc as ae,ge as rt,ha as E,hc as ne,hf as yt,ic as r,if as ge,jc as s,jf as St,kc as v,ke as ot,lc as H,m as te,mc as L,nc as P,oa as Pe,oc as V,pc as N,pf as Ct,qc as C,qf as xt,ra as Re,rc as f,rd as Ke,re as lt,rf as Dt,sc as Z,se as pt,t as Te,tc as J,td as ue,ua as c,ub as l,uf as ve,vc as D,ve as he,wb as z,wc as X,xc as b,yb as Le,yc as y,z as ke}from"./chunk-JIJMSRKJ.js";var $t=(()=>{class t{transform(e,i){return!e||!e.length?[]:i?e.filter(a=>a.includes("self")):e}static \u0275fac=function(i){return new(i||t)};static \u0275pipe=Ne({name:"filterSelf",type:t,pure:!0})}return t})();var ai=["*"];function ni(t,o){t&1&&J(0)}var Me=(()=>{class t{_elementRef=c(K);constructor(){}focus(){this._elementRef.nativeElement.focus()}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["","cdkStepHeader",""]],hostAttrs:["role","tab"]})}return t})(),we=(()=>{class t{template=c(z);constructor(){}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["","cdkStepLabel",""]]})}return t})();var I={NUMBER:"number",EDIT:"edit",DONE:"done",ERROR:"error"},ri=new Re("STEPPER_GLOBAL_OPTIONS"),se=(()=>{class t{_stepperOptions;_stepper=c(G);_displayDefaultIndicatorType;stepLabel;_childForms;content;stepControl;interacted=!1;interactedStream=new R;label;errorMessage;ariaLabel;ariaLabelledby;state;editable=!0;optional=!1;get completed(){return this._completedOverride==null?this._getDefaultCompleted():this._completedOverride}set completed(e){this._completedOverride=e}_completedOverride=null;_getDefaultCompleted(){return this.stepControl?this.stepControl.valid&&this.interacted:this.interacted}get hasError(){return this._customError==null?this._getDefaultError():this._customError}set hasError(e){this._customError=e}_customError=null;_getDefaultError(){return this.stepControl&&this.stepControl.invalid&&this.interacted}constructor(){let e=c(ri,{optional:!0});this._stepperOptions=e||{},this._displayDefaultIndicatorType=this._stepperOptions.displayDefaultIndicatorType!==!1}select(){this._stepper.selected=this}reset(){this.interacted=!1,this._completedOverride!=null&&(this._completedOverride=!1),this._customError!=null&&(this._customError=!1),this.stepControl&&(this._childForms?.forEach(e=>e.resetForm?.()),this.stepControl.reset())}ngOnChanges(){this._stepper._stateChanged()}_markAsInteracted(){this.interacted||(this.interacted=!0,this.interactedStream.emit(this))}_showError(){return this._stepperOptions.showError??this._customError!=null}static \u0275fac=function(i){return new(i||t)};static \u0275cmp=M({type:t,selectors:[["cdk-step"]],contentQueries:function(i,a,n){if(i&1&&(D(n,we,5),D(n,vt,5)),i&2){let d;b(d=y())&&(a.stepLabel=d.first),b(d=y())&&(a._childForms=d)}},viewQuery:function(i,a){if(i&1&&X(z,7),i&2){let n;b(n=y())&&(a.content=n.first)}},inputs:{stepControl:"stepControl",label:"label",errorMessage:"errorMessage",ariaLabel:[0,"aria-label","ariaLabel"],ariaLabelledby:[0,"aria-labelledby","ariaLabelledby"],state:"state",editable:[2,"editable","editable",W],optional:[2,"optional","optional",W],completed:[2,"completed","completed",W],hasError:[2,"hasError","hasError",W]},outputs:{interactedStream:"interacted"},exportAs:["cdkStep"],features:[ze],ngContentSelectors:ai,decls:1,vars:0,template:function(i,a){i&1&&(Z(),h(0,ni,1,0,"ng-template"))},encapsulation:2,changeDetection:0})}return t})(),G=(()=>{class t{_dir=c(ot,{optional:!0});_changeDetectorRef=c(q);_elementRef=c(K);_destroyed=new te;_keyManager;_steps;steps=new Y;_stepHeader;_sortedHeaders=new Y;linear=!1;get selectedIndex(){return this._selectedIndex}set selectedIndex(e){this._steps?(this._isValidIndex(e),this._selectedIndex!==e&&(this.selected?._markAsInteracted(),!this._anyControlsInvalidOrPending(e)&&(e>=this._selectedIndex||this.steps.toArray()[e].editable)&&this._updateSelectedItemIndex(e))):this._selectedIndex=e}_selectedIndex=0;get selected(){return this.steps?this.steps.toArray()[this.selectedIndex]:void 0}set selected(e){this.selectedIndex=e&&this.steps?this.steps.toArray().indexOf(e):-1}selectionChange=new R;selectedIndexChange=new R;_groupId=c(at).getId("cdk-stepper-");get orientation(){return this._orientation}set orientation(e){this._orientation=e,this._keyManager&&this._keyManager.withVerticalOrientation(e==="vertical")}_orientation="horizontal";constructor(){}ngAfterContentInit(){this._steps.changes.pipe(k(this._steps),E(this._destroyed)).subscribe(e=>{this.steps.reset(e.filter(i=>i._stepper===this)),this.steps.notifyOnChanges()})}ngAfterViewInit(){if(this._stepHeader.changes.pipe(k(this._stepHeader),E(this._destroyed)).subscribe(e=>{this._sortedHeaders.reset(e.toArray().sort((i,a)=>i._elementRef.nativeElement.compareDocumentPosition(a._elementRef.nativeElement)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)),this._sortedHeaders.notifyOnChanges()}),this._keyManager=new rt(this._sortedHeaders).withWrap().withHomeAndEnd().withVerticalOrientation(this._orientation==="vertical"),(this._dir?this._dir.change:Te()).pipe(k(this._layoutDirection()),E(this._destroyed)).subscribe(e=>this._keyManager.withHorizontalOrientation(e)),this._keyManager.updateActiveItem(this._selectedIndex),this.steps.changes.subscribe(()=>{this.selected||(this._selectedIndex=Math.max(this._selectedIndex-1,0))}),this._isValidIndex(this._selectedIndex)||(this._selectedIndex=0),this.linear&&this._selectedIndex>0){let e=this.steps.toArray().slice(0,this._selectedIndex);for(let i of e)i._markAsInteracted()}}ngOnDestroy(){this._keyManager?.destroy(),this.steps.destroy(),this._sortedHeaders.destroy(),this._destroyed.next(),this._destroyed.complete()}next(){this.selectedIndex=Math.min(this._selectedIndex+1,this.steps.length-1)}previous(){this.selectedIndex=Math.max(this._selectedIndex-1,0)}reset(){this._updateSelectedItemIndex(0),this.steps.forEach(e=>e.reset()),this._stateChanged()}_getStepLabelId(e){return`${this._groupId}-label-${e}`}_getStepContentId(e){return`${this._groupId}-content-${e}`}_stateChanged(){this._changeDetectorRef.markForCheck()}_getAnimationDirection(e){let i=e-this._selectedIndex;return i<0?this._layoutDirection()==="rtl"?"next":"previous":i>0?this._layoutDirection()==="rtl"?"previous":"next":"current"}_getIndicatorType(e,i=I.NUMBER){let a=this.steps.toArray()[e],n=this._isCurrentStep(e);return a._displayDefaultIndicatorType?this._getDefaultIndicatorLogic(a,n):this._getGuidelineLogic(a,n,i)}_getDefaultIndicatorLogic(e,i){return e._showError()&&e.hasError&&!i?I.ERROR:!e.completed||i?I.NUMBER:e.editable?I.EDIT:I.DONE}_getGuidelineLogic(e,i,a=I.NUMBER){return e._showError()&&e.hasError&&!i?I.ERROR:e.completed&&!i?I.DONE:e.completed&&i?a:e.editable&&i?I.EDIT:a}_isCurrentStep(e){return this._selectedIndex===e}_getFocusIndex(){return this._keyManager?this._keyManager.activeItemIndex:this._selectedIndex}_updateSelectedItemIndex(e){let i=this.steps.toArray();this.selectionChange.emit({selectedIndex:e,previouslySelectedIndex:this._selectedIndex,selectedStep:i[e],previouslySelectedStep:i[this._selectedIndex]}),this._containsFocus()?this._keyManager.setActiveItem(e):this._keyManager.updateActiveItem(e),this._selectedIndex=e,this.selectedIndexChange.emit(this._selectedIndex),this._stateChanged()}_onKeydown(e){let i=nt(e),a=e.keyCode,n=this._keyManager;n.activeItemIndex!=null&&!i&&(a===32||a===13)?(this.selectedIndex=n.activeItemIndex,e.preventDefault()):n.setFocusOrigin("keyboard").onKeydown(e)}_anyControlsInvalidOrPending(e){return this.linear&&e>=0?this.steps.toArray().slice(0,e).some(i=>{let a=i.stepControl;return(a?a.invalid||a.pending||!i.interacted:!i.completed)&&!i.optional&&!i._completedOverride}):!1}_layoutDirection(){return this._dir&&this._dir.value==="rtl"?"rtl":"ltr"}_containsFocus(){let e=this._elementRef.nativeElement,i=Je();return e===i||e.contains(i)}_isValidIndex(e){return e>-1&&(!this.steps||e<this.steps.length)}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["","cdkStepper",""]],contentQueries:function(i,a,n){if(i&1&&(D(n,se,5),D(n,Me,5)),i&2){let d;b(d=y())&&(a._steps=d),b(d=y())&&(a._stepHeader=d)}},inputs:{linear:[2,"linear","linear",W],selectedIndex:[2,"selectedIndex","selectedIndex",Ue],selected:"selected",orientation:"orientation"},outputs:{selectionChange:"selectionChange",selectedIndexChange:"selectedIndexChange"},exportAs:["cdkStepper"]})}return t})(),qt=(()=>{class t{_stepper=c(G);type="submit";constructor(){}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["button","cdkStepperNext",""]],hostVars:1,hostBindings:function(i,a){i&1&&C("click",function(){return a._stepper.next()}),i&2&&N("type",a.type)},inputs:{type:"type"}})}return t})(),Wt=(()=>{class t{_stepper=c(G);type="button";constructor(){}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["button","cdkStepperPrevious",""]],hostVars:1,hostBindings:function(i,a){i&1&&C("click",function(){return a._stepper.previous()}),i&2&&N("type",a.type)},inputs:{type:"type"}})}return t})();function oi(t,o){if(t&1&&P(0,2),t&2){let e=f();u("ngTemplateOutlet",e.iconOverrides[e.state])("ngTemplateOutletContext",e._getIconContext())}}function si(t,o){if(t&1&&(r(0,"span",7),p(1),s()),t&2){let e=f(2);l(),T(e._getDefaultTextForState(e.state))}}function li(t,o){if(t&1&&(r(0,"span",8),p(1),s()),t&2){let e=f(3);l(),T(e._intl.completedLabel)}}function pi(t,o){if(t&1&&(r(0,"span",8),p(1),s()),t&2){let e=f(3);l(),T(e._intl.editableLabel)}}function di(t,o){if(t&1&&(h(0,li,2,1,"span",8)(1,pi,2,1,"span",8),r(2,"mat-icon",7),p(3),s()),t&2){let e=f(2);x(e.state==="done"?0:e.state==="edit"?1:-1),l(3),T(e._getDefaultTextForState(e.state))}}function ci(t,o){if(t&1&&h(0,si,2,1,"span",7)(1,di,4,2),t&2){let e,i=f();x((e=i.state)==="number"?0:1)}}function mi(t,o){t&1&&(r(0,"div",4),P(1,9),s()),t&2&&(l(),u("ngTemplateOutlet",o.template))}function ui(t,o){if(t&1&&(r(0,"div",4),p(1),s()),t&2){let e=f();l(),T(e.label)}}function hi(t,o){if(t&1&&(r(0,"div",5),p(1),s()),t&2){let e=f();l(),T(e._intl.optionalLabel)}}function fi(t,o){if(t&1&&(r(0,"div",6),p(1),s()),t&2){let e=f();l(),T(e.errorMessage)}}var Ut=["*"];function _i(t,o){}function gi(t,o){if(t&1&&(J(0),h(1,_i,0,0,"ng-template",0)),t&2){let e=f();l(),u("cdkPortalOutlet",e._portal)}}var vi=["animatedContainer"],Kt=(t,o)=>({step:t,i:o});function bi(t,o){t&1&&J(0)}function yi(t,o){t&1&&v(0,"div",7)}function Si(t,o){if(t&1&&(P(0,6),h(1,yi,1,0,"div",7)),t&2){let e=o.$implicit,i=o.$index,a=o.$index,n=o.$count;f(2);let d=B(4);u("ngTemplateOutlet",d)("ngTemplateOutletContext",me(3,Kt,e,i)),l(),x(a!==n-1?1:-1)}}function Ci(t,o){if(t&1&&(r(0,"div",8,1),P(2,9),s()),t&2){let e=o.$implicit,i=o.$index,a=f(2);pe("mat-horizontal-stepper-content-"+a._getAnimationDirection(i)),u("id",a._getStepContentId(i)),F("aria-labelledby",a._getStepLabelId(i))("inert",a.selectedIndex===i?null:""),l(2),u("ngTemplateOutlet",e.content)}}function xi(t,o){if(t&1&&(r(0,"div",2)(1,"div",3),ae(2,Si,2,6,null,null,ie),s(),r(4,"div",4),ae(5,Ci,3,6,"div",5,ie),s()()),t&2){let e=f();l(2),ne(e.steps),l(3),ne(e.steps)}}function Di(t,o){if(t&1&&(r(0,"div",10),P(1,6),r(2,"div",11,1)(4,"div",12)(5,"div",13),P(6,9),s()()()()),t&2){let e=o.$implicit,i=o.$index,a=o.$index,n=o.$count,d=f(2),m=B(4);l(),u("ngTemplateOutlet",m)("ngTemplateOutletContext",me(10,Kt,e,i)),l(),A("mat-stepper-vertical-line",a!==n-1)("mat-vertical-content-container-active",d.selectedIndex===i),F("inert",d.selectedIndex===i?null:""),l(2),u("id",d._getStepContentId(i)),F("aria-labelledby",d._getStepLabelId(i)),l(2),u("ngTemplateOutlet",e.content)}}function Mi(t,o){if(t&1&&ae(0,Di,7,13,"div",10,ie),t&2){let e=f();ne(e.steps)}}function wi(t,o){if(t&1){let e=V();r(0,"mat-step-header",14),C("click",function(){let a=_(e).step;return g(a.select())})("keydown",function(a){_(e);let n=f();return g(n._onKeydown(a))}),s()}if(t&2){let e=o.step,i=o.i,a=f();A("mat-horizontal-stepper-header",a.orientation==="horizontal")("mat-vertical-stepper-header",a.orientation==="vertical"),u("tabIndex",a._getFocusIndex()===i?0:-1)("id",a._getStepLabelId(i))("index",i)("state",a._getIndicatorType(i,e.state))("label",e.stepLabel||e.label)("selected",a.selectedIndex===i)("active",a._stepIsNavigable(i,e))("optional",e.optional)("errorMessage",e.errorMessage)("iconOverrides",a._iconOverrides)("disableRipple",a.disableRipple||!a._stepIsNavigable(i,e))("color",e.color||a.color),F("aria-posinset",i+1)("aria-setsize",a.steps.length)("aria-controls",a._getStepContentId(i))("aria-selected",a.selectedIndex==i)("aria-label",e.ariaLabel||null)("aria-labelledby",!e.ariaLabel&&e.ariaLabelledby?e.ariaLabelledby:null)("aria-disabled",a._stepIsNavigable(i,e)?null:!0)}}var ee=(()=>{class t extends we{static \u0275fac=(()=>{let e;return function(a){return(e||(e=U(t)))(a||t)}})();static \u0275dir=S({type:t,selectors:[["","matStepLabel",""]],features:[O]})}return t})(),Ii=(()=>{class t{changes=new te;optionalLabel="Optional";completedLabel="Completed";editableLabel="Editable";static \u0275fac=function(i){return new(i||t)};static \u0275prov=Pe({token:t,factory:t.\u0275fac,providedIn:"root"})}return t})();var Gt=(()=>{class t extends Me{_intl=c(Ii);_focusMonitor=c(et);_intlSubscription;state;label;errorMessage;iconOverrides;index;selected;active;optional;disableRipple;color;constructor(){super();let e=c(tt);e.load(pt),e.load(it);let i=c(q);this._intlSubscription=this._intl.changes.subscribe(()=>i.markForCheck())}ngAfterViewInit(){this._focusMonitor.monitor(this._elementRef,!0)}ngOnDestroy(){this._intlSubscription.unsubscribe(),this._focusMonitor.stopMonitoring(this._elementRef)}focus(e,i){e?this._focusMonitor.focusVia(this._elementRef,e,i):this._elementRef.nativeElement.focus(i)}_stringLabel(){return this.label instanceof ee?null:this.label}_templateLabel(){return this.label instanceof ee?this.label:null}_getHostElement(){return this._elementRef.nativeElement}_getIconContext(){return{index:this.index,active:this.active,optional:this.optional}}_getDefaultTextForState(e){return e=="number"?`${this.index+1}`:e=="edit"?"create":e=="error"?"warning":e}static \u0275fac=function(i){return new(i||t)};static \u0275cmp=M({type:t,selectors:[["mat-step-header"]],hostAttrs:["role","tab",1,"mat-step-header"],hostVars:2,hostBindings:function(i,a){i&2&&pe("mat-"+(a.color||"primary"))},inputs:{state:"state",label:"label",errorMessage:"errorMessage",iconOverrides:"iconOverrides",index:"index",selected:"selected",active:"active",optional:"optional",disableRipple:"disableRipple",color:"color"},features:[O],decls:10,vars:17,consts:[["matRipple","",1,"mat-step-header-ripple","mat-focus-indicator",3,"matRippleTrigger","matRippleDisabled"],[1,"mat-step-icon-content"],[3,"ngTemplateOutlet","ngTemplateOutletContext"],[1,"mat-step-label"],[1,"mat-step-text-label"],[1,"mat-step-optional"],[1,"mat-step-sub-label-error"],["aria-hidden","true"],[1,"cdk-visually-hidden"],[3,"ngTemplateOutlet"]],template:function(i,a){if(i&1&&(v(0,"div",0),r(1,"div")(2,"div",1),h(3,oi,1,2,"ng-container",2)(4,ci,2,1),s()(),r(5,"div",3),h(6,mi,2,1,"div",4)(7,ui,2,1,"div",4)(8,hi,2,1,"div",5)(9,fi,2,1,"div",6),s()),i&2){let n;u("matRippleTrigger",a._getHostElement())("matRippleDisabled",a.disableRipple),l(),Qe("mat-step-icon-state-",a.state," mat-step-icon"),A("mat-step-icon-selected",a.selected),l(2),x(a.iconOverrides&&a.iconOverrides[a.state]?3:4),l(2),A("mat-step-label-active",a.active)("mat-step-label-selected",a.selected)("mat-step-label-error",a.state=="error"),l(),x((n=a._templateLabel())?6:a._stringLabel()?7:-1,n),l(2),x(a.optional&&a.state!="error"?8:-1),l(),x(a.state==="error"?9:-1)}},dependencies:[lt,ue,st],styles:[`.mat-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-step-header:focus .mat-focus-indicator::before{content:""}.mat-step-header:hover[aria-disabled=true]{cursor:default}.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:var(--mat-stepper-header-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-inverse-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-hover-state-layer-shape, var(--mat-sys-corner-medium))}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused{background-color:var(--mat-stepper-header-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-inverse-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-focus-state-layer-shape, var(--mat-sys-corner-medium))}@media(hover: none){.mat-step-header:hover{background:none}}@media(forced-colors: active){.mat-step-header{outline:solid 1px}.mat-step-header[aria-selected=true] .mat-step-label{text-decoration:underline}.mat-step-header[aria-disabled=true]{outline-color:GrayText}.mat-step-header[aria-disabled=true] .mat-step-label,.mat-step-header[aria-disabled=true] .mat-step-icon,.mat-step-header[aria-disabled=true] .mat-step-optional{color:GrayText}}.mat-step-optional{font-size:12px;color:var(--mat-stepper-header-optional-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-sub-label-error{font-size:12px;font-weight:normal}.mat-step-icon{border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;color:var(--mat-stepper-header-icon-foreground-color, var(--mat-sys-surface));background-color:var(--mat-stepper-header-icon-background-color, var(--mat-sys-on-surface-variant))}.mat-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex}.mat-step-icon .mat-icon{font-size:16px;height:16px;width:16px}.mat-step-icon-state-error{background-color:var(--mat-stepper-header-error-state-icon-background-color, transparent);color:var(--mat-stepper-header-error-state-icon-foreground-color, var(--mat-sys-error))}.mat-step-icon-state-error .mat-icon{font-size:24px;height:24px;width:24px}.mat-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-family:var(--mat-stepper-header-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-stepper-header-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mat-stepper-header-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-active{color:var(--mat-stepper-header-selected-state-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-error{color:var(--mat-stepper-header-error-state-label-text-color, var(--mat-sys-error));font-size:var(--mat-stepper-header-error-state-label-text-size, var(--mat-sys-title-small-size))}.mat-step-label.mat-step-label-selected{font-size:var(--mat-stepper-header-selected-state-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-selected-state-label-text-weight, var(--mat-sys-title-small-weight))}.mat-step-text-label{text-overflow:ellipsis;overflow:hidden}.mat-step-header .mat-step-header-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-step-icon-selected{background-color:var(--mat-stepper-header-selected-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-selected-state-icon-foreground-color, var(--mat-sys-on-primary))}.mat-step-icon-state-done{background-color:var(--mat-stepper-header-done-state-icon-background-color);color:var(--mat-stepper-header-done-state-icon-foreground-color)}.mat-step-icon-state-edit{background-color:var(--mat-stepper-header-edit-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-edit-state-icon-foreground-color, var(--mat-sys-on-primary))}
|
|
1
|
+
import{a as Ot,b as Pt,c as Rt,d as zt,e as Ft,f as At,g as Ht,h as Lt,i as Vt,j as Nt,k as Bt,m as Qt,n as re,p as oe,q as jt}from"./chunk-NGNSVXS2.js";import"./chunk-MR7RUNKP.js";import{a as Et,d as Tt}from"./chunk-TMDXXJWO.js";import{a as It}from"./chunk-77C4Q6FL.js";import{a as kt}from"./chunk-2QUOTZ6A.js";import{f as Mt,j as wt}from"./chunk-GQFDVLM2.js";import{o as st}from"./chunk-6QHCHGTT.js";import{d as mt,e as ut,g as ht,i as ft,j as _t}from"./chunk-CD375FDG.js";import"./chunk-SGYCFQGT.js";import{a as xe}from"./chunk-7TWI6ZJI.js";import{B as Se,D as Ce,i as Ye,r as Ze,t as be,z as ye}from"./chunk-D3QHJ7S5.js";import{$a as He,$b as A,$c as W,Ac as de,Ae as dt,Bb as Ve,Bc as je,Cb as le,Cc as B,Da as ze,Dc as p,Ea as _,Ec as T,Ee as ct,Fa as g,Fc as w,Hb as M,Ia as U,Ic as Q,Jb as S,Jc as j,Kb as Ne,Kc as $,Lb as O,Ld as Je,Nb as h,Oa as R,Oc as ce,Od as Xe,Pa as Fe,Pc as $e,Qc as me,Rc as qe,Ta as K,Tc as We,Td as et,Va as Ae,Vc as Ge,Vd as tt,Wa as Y,Wd as it,Xc as q,Xe as gt,Yb as F,Zb as u,_b as Be,_e as vt,ad as Ue,af as bt,bc as pe,bf as fe,cc as Qe,dc as x,de as at,ee as nt,ef as _e,fa as k,fc as ie,g as Ee,ga as Oe,gc as ae,ge as rt,ha as E,hc as ne,hf as yt,ic as r,if as ge,jc as s,jf as St,kc as v,ke as ot,lc as H,m as te,mc as L,nc as P,oa as Pe,oc as V,pc as N,pf as Ct,qc as C,qf as xt,ra as Re,rc as f,rd as Ke,re as lt,rf as Dt,sc as Z,se as pt,t as Te,tc as J,td as ue,ua as c,ub as l,uf as ve,vc as D,ve as he,wb as z,wc as X,xc as b,yb as Le,yc as y,z as ke}from"./chunk-Y7X77HSW.js";var $t=(()=>{class t{transform(e,i){return!e||!e.length?[]:i?e.filter(a=>a.includes("self")):e}static \u0275fac=function(i){return new(i||t)};static \u0275pipe=Ne({name:"filterSelf",type:t,pure:!0})}return t})();var ai=["*"];function ni(t,o){t&1&&J(0)}var Me=(()=>{class t{_elementRef=c(K);constructor(){}focus(){this._elementRef.nativeElement.focus()}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["","cdkStepHeader",""]],hostAttrs:["role","tab"]})}return t})(),we=(()=>{class t{template=c(z);constructor(){}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["","cdkStepLabel",""]]})}return t})();var I={NUMBER:"number",EDIT:"edit",DONE:"done",ERROR:"error"},ri=new Re("STEPPER_GLOBAL_OPTIONS"),se=(()=>{class t{_stepperOptions;_stepper=c(G);_displayDefaultIndicatorType;stepLabel;_childForms;content;stepControl;interacted=!1;interactedStream=new R;label;errorMessage;ariaLabel;ariaLabelledby;state;editable=!0;optional=!1;get completed(){return this._completedOverride==null?this._getDefaultCompleted():this._completedOverride}set completed(e){this._completedOverride=e}_completedOverride=null;_getDefaultCompleted(){return this.stepControl?this.stepControl.valid&&this.interacted:this.interacted}get hasError(){return this._customError==null?this._getDefaultError():this._customError}set hasError(e){this._customError=e}_customError=null;_getDefaultError(){return this.stepControl&&this.stepControl.invalid&&this.interacted}constructor(){let e=c(ri,{optional:!0});this._stepperOptions=e||{},this._displayDefaultIndicatorType=this._stepperOptions.displayDefaultIndicatorType!==!1}select(){this._stepper.selected=this}reset(){this.interacted=!1,this._completedOverride!=null&&(this._completedOverride=!1),this._customError!=null&&(this._customError=!1),this.stepControl&&(this._childForms?.forEach(e=>e.resetForm?.()),this.stepControl.reset())}ngOnChanges(){this._stepper._stateChanged()}_markAsInteracted(){this.interacted||(this.interacted=!0,this.interactedStream.emit(this))}_showError(){return this._stepperOptions.showError??this._customError!=null}static \u0275fac=function(i){return new(i||t)};static \u0275cmp=M({type:t,selectors:[["cdk-step"]],contentQueries:function(i,a,n){if(i&1&&(D(n,we,5),D(n,vt,5)),i&2){let d;b(d=y())&&(a.stepLabel=d.first),b(d=y())&&(a._childForms=d)}},viewQuery:function(i,a){if(i&1&&X(z,7),i&2){let n;b(n=y())&&(a.content=n.first)}},inputs:{stepControl:"stepControl",label:"label",errorMessage:"errorMessage",ariaLabel:[0,"aria-label","ariaLabel"],ariaLabelledby:[0,"aria-labelledby","ariaLabelledby"],state:"state",editable:[2,"editable","editable",W],optional:[2,"optional","optional",W],completed:[2,"completed","completed",W],hasError:[2,"hasError","hasError",W]},outputs:{interactedStream:"interacted"},exportAs:["cdkStep"],features:[ze],ngContentSelectors:ai,decls:1,vars:0,template:function(i,a){i&1&&(Z(),h(0,ni,1,0,"ng-template"))},encapsulation:2,changeDetection:0})}return t})(),G=(()=>{class t{_dir=c(ot,{optional:!0});_changeDetectorRef=c(q);_elementRef=c(K);_destroyed=new te;_keyManager;_steps;steps=new Y;_stepHeader;_sortedHeaders=new Y;linear=!1;get selectedIndex(){return this._selectedIndex}set selectedIndex(e){this._steps?(this._isValidIndex(e),this._selectedIndex!==e&&(this.selected?._markAsInteracted(),!this._anyControlsInvalidOrPending(e)&&(e>=this._selectedIndex||this.steps.toArray()[e].editable)&&this._updateSelectedItemIndex(e))):this._selectedIndex=e}_selectedIndex=0;get selected(){return this.steps?this.steps.toArray()[this.selectedIndex]:void 0}set selected(e){this.selectedIndex=e&&this.steps?this.steps.toArray().indexOf(e):-1}selectionChange=new R;selectedIndexChange=new R;_groupId=c(at).getId("cdk-stepper-");get orientation(){return this._orientation}set orientation(e){this._orientation=e,this._keyManager&&this._keyManager.withVerticalOrientation(e==="vertical")}_orientation="horizontal";constructor(){}ngAfterContentInit(){this._steps.changes.pipe(k(this._steps),E(this._destroyed)).subscribe(e=>{this.steps.reset(e.filter(i=>i._stepper===this)),this.steps.notifyOnChanges()})}ngAfterViewInit(){if(this._stepHeader.changes.pipe(k(this._stepHeader),E(this._destroyed)).subscribe(e=>{this._sortedHeaders.reset(e.toArray().sort((i,a)=>i._elementRef.nativeElement.compareDocumentPosition(a._elementRef.nativeElement)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1)),this._sortedHeaders.notifyOnChanges()}),this._keyManager=new rt(this._sortedHeaders).withWrap().withHomeAndEnd().withVerticalOrientation(this._orientation==="vertical"),(this._dir?this._dir.change:Te()).pipe(k(this._layoutDirection()),E(this._destroyed)).subscribe(e=>this._keyManager.withHorizontalOrientation(e)),this._keyManager.updateActiveItem(this._selectedIndex),this.steps.changes.subscribe(()=>{this.selected||(this._selectedIndex=Math.max(this._selectedIndex-1,0))}),this._isValidIndex(this._selectedIndex)||(this._selectedIndex=0),this.linear&&this._selectedIndex>0){let e=this.steps.toArray().slice(0,this._selectedIndex);for(let i of e)i._markAsInteracted()}}ngOnDestroy(){this._keyManager?.destroy(),this.steps.destroy(),this._sortedHeaders.destroy(),this._destroyed.next(),this._destroyed.complete()}next(){this.selectedIndex=Math.min(this._selectedIndex+1,this.steps.length-1)}previous(){this.selectedIndex=Math.max(this._selectedIndex-1,0)}reset(){this._updateSelectedItemIndex(0),this.steps.forEach(e=>e.reset()),this._stateChanged()}_getStepLabelId(e){return`${this._groupId}-label-${e}`}_getStepContentId(e){return`${this._groupId}-content-${e}`}_stateChanged(){this._changeDetectorRef.markForCheck()}_getAnimationDirection(e){let i=e-this._selectedIndex;return i<0?this._layoutDirection()==="rtl"?"next":"previous":i>0?this._layoutDirection()==="rtl"?"previous":"next":"current"}_getIndicatorType(e,i=I.NUMBER){let a=this.steps.toArray()[e],n=this._isCurrentStep(e);return a._displayDefaultIndicatorType?this._getDefaultIndicatorLogic(a,n):this._getGuidelineLogic(a,n,i)}_getDefaultIndicatorLogic(e,i){return e._showError()&&e.hasError&&!i?I.ERROR:!e.completed||i?I.NUMBER:e.editable?I.EDIT:I.DONE}_getGuidelineLogic(e,i,a=I.NUMBER){return e._showError()&&e.hasError&&!i?I.ERROR:e.completed&&!i?I.DONE:e.completed&&i?a:e.editable&&i?I.EDIT:a}_isCurrentStep(e){return this._selectedIndex===e}_getFocusIndex(){return this._keyManager?this._keyManager.activeItemIndex:this._selectedIndex}_updateSelectedItemIndex(e){let i=this.steps.toArray();this.selectionChange.emit({selectedIndex:e,previouslySelectedIndex:this._selectedIndex,selectedStep:i[e],previouslySelectedStep:i[this._selectedIndex]}),this._containsFocus()?this._keyManager.setActiveItem(e):this._keyManager.updateActiveItem(e),this._selectedIndex=e,this.selectedIndexChange.emit(this._selectedIndex),this._stateChanged()}_onKeydown(e){let i=nt(e),a=e.keyCode,n=this._keyManager;n.activeItemIndex!=null&&!i&&(a===32||a===13)?(this.selectedIndex=n.activeItemIndex,e.preventDefault()):n.setFocusOrigin("keyboard").onKeydown(e)}_anyControlsInvalidOrPending(e){return this.linear&&e>=0?this.steps.toArray().slice(0,e).some(i=>{let a=i.stepControl;return(a?a.invalid||a.pending||!i.interacted:!i.completed)&&!i.optional&&!i._completedOverride}):!1}_layoutDirection(){return this._dir&&this._dir.value==="rtl"?"rtl":"ltr"}_containsFocus(){let e=this._elementRef.nativeElement,i=Je();return e===i||e.contains(i)}_isValidIndex(e){return e>-1&&(!this.steps||e<this.steps.length)}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["","cdkStepper",""]],contentQueries:function(i,a,n){if(i&1&&(D(n,se,5),D(n,Me,5)),i&2){let d;b(d=y())&&(a._steps=d),b(d=y())&&(a._stepHeader=d)}},inputs:{linear:[2,"linear","linear",W],selectedIndex:[2,"selectedIndex","selectedIndex",Ue],selected:"selected",orientation:"orientation"},outputs:{selectionChange:"selectionChange",selectedIndexChange:"selectedIndexChange"},exportAs:["cdkStepper"]})}return t})(),qt=(()=>{class t{_stepper=c(G);type="submit";constructor(){}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["button","cdkStepperNext",""]],hostVars:1,hostBindings:function(i,a){i&1&&C("click",function(){return a._stepper.next()}),i&2&&N("type",a.type)},inputs:{type:"type"}})}return t})(),Wt=(()=>{class t{_stepper=c(G);type="button";constructor(){}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["button","cdkStepperPrevious",""]],hostVars:1,hostBindings:function(i,a){i&1&&C("click",function(){return a._stepper.previous()}),i&2&&N("type",a.type)},inputs:{type:"type"}})}return t})();function oi(t,o){if(t&1&&P(0,2),t&2){let e=f();u("ngTemplateOutlet",e.iconOverrides[e.state])("ngTemplateOutletContext",e._getIconContext())}}function si(t,o){if(t&1&&(r(0,"span",7),p(1),s()),t&2){let e=f(2);l(),T(e._getDefaultTextForState(e.state))}}function li(t,o){if(t&1&&(r(0,"span",8),p(1),s()),t&2){let e=f(3);l(),T(e._intl.completedLabel)}}function pi(t,o){if(t&1&&(r(0,"span",8),p(1),s()),t&2){let e=f(3);l(),T(e._intl.editableLabel)}}function di(t,o){if(t&1&&(h(0,li,2,1,"span",8)(1,pi,2,1,"span",8),r(2,"mat-icon",7),p(3),s()),t&2){let e=f(2);x(e.state==="done"?0:e.state==="edit"?1:-1),l(3),T(e._getDefaultTextForState(e.state))}}function ci(t,o){if(t&1&&h(0,si,2,1,"span",7)(1,di,4,2),t&2){let e,i=f();x((e=i.state)==="number"?0:1)}}function mi(t,o){t&1&&(r(0,"div",4),P(1,9),s()),t&2&&(l(),u("ngTemplateOutlet",o.template))}function ui(t,o){if(t&1&&(r(0,"div",4),p(1),s()),t&2){let e=f();l(),T(e.label)}}function hi(t,o){if(t&1&&(r(0,"div",5),p(1),s()),t&2){let e=f();l(),T(e._intl.optionalLabel)}}function fi(t,o){if(t&1&&(r(0,"div",6),p(1),s()),t&2){let e=f();l(),T(e.errorMessage)}}var Ut=["*"];function _i(t,o){}function gi(t,o){if(t&1&&(J(0),h(1,_i,0,0,"ng-template",0)),t&2){let e=f();l(),u("cdkPortalOutlet",e._portal)}}var vi=["animatedContainer"],Kt=(t,o)=>({step:t,i:o});function bi(t,o){t&1&&J(0)}function yi(t,o){t&1&&v(0,"div",7)}function Si(t,o){if(t&1&&(P(0,6),h(1,yi,1,0,"div",7)),t&2){let e=o.$implicit,i=o.$index,a=o.$index,n=o.$count;f(2);let d=B(4);u("ngTemplateOutlet",d)("ngTemplateOutletContext",me(3,Kt,e,i)),l(),x(a!==n-1?1:-1)}}function Ci(t,o){if(t&1&&(r(0,"div",8,1),P(2,9),s()),t&2){let e=o.$implicit,i=o.$index,a=f(2);pe("mat-horizontal-stepper-content-"+a._getAnimationDirection(i)),u("id",a._getStepContentId(i)),F("aria-labelledby",a._getStepLabelId(i))("inert",a.selectedIndex===i?null:""),l(2),u("ngTemplateOutlet",e.content)}}function xi(t,o){if(t&1&&(r(0,"div",2)(1,"div",3),ae(2,Si,2,6,null,null,ie),s(),r(4,"div",4),ae(5,Ci,3,6,"div",5,ie),s()()),t&2){let e=f();l(2),ne(e.steps),l(3),ne(e.steps)}}function Di(t,o){if(t&1&&(r(0,"div",10),P(1,6),r(2,"div",11,1)(4,"div",12)(5,"div",13),P(6,9),s()()()()),t&2){let e=o.$implicit,i=o.$index,a=o.$index,n=o.$count,d=f(2),m=B(4);l(),u("ngTemplateOutlet",m)("ngTemplateOutletContext",me(10,Kt,e,i)),l(),A("mat-stepper-vertical-line",a!==n-1)("mat-vertical-content-container-active",d.selectedIndex===i),F("inert",d.selectedIndex===i?null:""),l(2),u("id",d._getStepContentId(i)),F("aria-labelledby",d._getStepLabelId(i)),l(2),u("ngTemplateOutlet",e.content)}}function Mi(t,o){if(t&1&&ae(0,Di,7,13,"div",10,ie),t&2){let e=f();ne(e.steps)}}function wi(t,o){if(t&1){let e=V();r(0,"mat-step-header",14),C("click",function(){let a=_(e).step;return g(a.select())})("keydown",function(a){_(e);let n=f();return g(n._onKeydown(a))}),s()}if(t&2){let e=o.step,i=o.i,a=f();A("mat-horizontal-stepper-header",a.orientation==="horizontal")("mat-vertical-stepper-header",a.orientation==="vertical"),u("tabIndex",a._getFocusIndex()===i?0:-1)("id",a._getStepLabelId(i))("index",i)("state",a._getIndicatorType(i,e.state))("label",e.stepLabel||e.label)("selected",a.selectedIndex===i)("active",a._stepIsNavigable(i,e))("optional",e.optional)("errorMessage",e.errorMessage)("iconOverrides",a._iconOverrides)("disableRipple",a.disableRipple||!a._stepIsNavigable(i,e))("color",e.color||a.color),F("aria-posinset",i+1)("aria-setsize",a.steps.length)("aria-controls",a._getStepContentId(i))("aria-selected",a.selectedIndex==i)("aria-label",e.ariaLabel||null)("aria-labelledby",!e.ariaLabel&&e.ariaLabelledby?e.ariaLabelledby:null)("aria-disabled",a._stepIsNavigable(i,e)?null:!0)}}var ee=(()=>{class t extends we{static \u0275fac=(()=>{let e;return function(a){return(e||(e=U(t)))(a||t)}})();static \u0275dir=S({type:t,selectors:[["","matStepLabel",""]],features:[O]})}return t})(),Ii=(()=>{class t{changes=new te;optionalLabel="Optional";completedLabel="Completed";editableLabel="Editable";static \u0275fac=function(i){return new(i||t)};static \u0275prov=Pe({token:t,factory:t.\u0275fac,providedIn:"root"})}return t})();var Gt=(()=>{class t extends Me{_intl=c(Ii);_focusMonitor=c(et);_intlSubscription;state;label;errorMessage;iconOverrides;index;selected;active;optional;disableRipple;color;constructor(){super();let e=c(tt);e.load(pt),e.load(it);let i=c(q);this._intlSubscription=this._intl.changes.subscribe(()=>i.markForCheck())}ngAfterViewInit(){this._focusMonitor.monitor(this._elementRef,!0)}ngOnDestroy(){this._intlSubscription.unsubscribe(),this._focusMonitor.stopMonitoring(this._elementRef)}focus(e,i){e?this._focusMonitor.focusVia(this._elementRef,e,i):this._elementRef.nativeElement.focus(i)}_stringLabel(){return this.label instanceof ee?null:this.label}_templateLabel(){return this.label instanceof ee?this.label:null}_getHostElement(){return this._elementRef.nativeElement}_getIconContext(){return{index:this.index,active:this.active,optional:this.optional}}_getDefaultTextForState(e){return e=="number"?`${this.index+1}`:e=="edit"?"create":e=="error"?"warning":e}static \u0275fac=function(i){return new(i||t)};static \u0275cmp=M({type:t,selectors:[["mat-step-header"]],hostAttrs:["role","tab",1,"mat-step-header"],hostVars:2,hostBindings:function(i,a){i&2&&pe("mat-"+(a.color||"primary"))},inputs:{state:"state",label:"label",errorMessage:"errorMessage",iconOverrides:"iconOverrides",index:"index",selected:"selected",active:"active",optional:"optional",disableRipple:"disableRipple",color:"color"},features:[O],decls:10,vars:17,consts:[["matRipple","",1,"mat-step-header-ripple","mat-focus-indicator",3,"matRippleTrigger","matRippleDisabled"],[1,"mat-step-icon-content"],[3,"ngTemplateOutlet","ngTemplateOutletContext"],[1,"mat-step-label"],[1,"mat-step-text-label"],[1,"mat-step-optional"],[1,"mat-step-sub-label-error"],["aria-hidden","true"],[1,"cdk-visually-hidden"],[3,"ngTemplateOutlet"]],template:function(i,a){if(i&1&&(v(0,"div",0),r(1,"div")(2,"div",1),h(3,oi,1,2,"ng-container",2)(4,ci,2,1),s()(),r(5,"div",3),h(6,mi,2,1,"div",4)(7,ui,2,1,"div",4)(8,hi,2,1,"div",5)(9,fi,2,1,"div",6),s()),i&2){let n;u("matRippleTrigger",a._getHostElement())("matRippleDisabled",a.disableRipple),l(),Qe("mat-step-icon-state-",a.state," mat-step-icon"),A("mat-step-icon-selected",a.selected),l(2),x(a.iconOverrides&&a.iconOverrides[a.state]?3:4),l(2),A("mat-step-label-active",a.active)("mat-step-label-selected",a.selected)("mat-step-label-error",a.state=="error"),l(),x((n=a._templateLabel())?6:a._stringLabel()?7:-1,n),l(2),x(a.optional&&a.state!="error"?8:-1),l(),x(a.state==="error"?9:-1)}},dependencies:[lt,ue,st],styles:[`.mat-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-step-header:focus .mat-focus-indicator::before{content:""}.mat-step-header:hover[aria-disabled=true]{cursor:default}.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:var(--mat-stepper-header-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-inverse-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-hover-state-layer-shape, var(--mat-sys-corner-medium))}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused{background-color:var(--mat-stepper-header-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-inverse-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-focus-state-layer-shape, var(--mat-sys-corner-medium))}@media(hover: none){.mat-step-header:hover{background:none}}@media(forced-colors: active){.mat-step-header{outline:solid 1px}.mat-step-header[aria-selected=true] .mat-step-label{text-decoration:underline}.mat-step-header[aria-disabled=true]{outline-color:GrayText}.mat-step-header[aria-disabled=true] .mat-step-label,.mat-step-header[aria-disabled=true] .mat-step-icon,.mat-step-header[aria-disabled=true] .mat-step-optional{color:GrayText}}.mat-step-optional{font-size:12px;color:var(--mat-stepper-header-optional-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-sub-label-error{font-size:12px;font-weight:normal}.mat-step-icon{border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;color:var(--mat-stepper-header-icon-foreground-color, var(--mat-sys-surface));background-color:var(--mat-stepper-header-icon-background-color, var(--mat-sys-on-surface-variant))}.mat-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex}.mat-step-icon .mat-icon{font-size:16px;height:16px;width:16px}.mat-step-icon-state-error{background-color:var(--mat-stepper-header-error-state-icon-background-color, transparent);color:var(--mat-stepper-header-error-state-icon-foreground-color, var(--mat-sys-error))}.mat-step-icon-state-error .mat-icon{font-size:24px;height:24px;width:24px}.mat-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-family:var(--mat-stepper-header-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-stepper-header-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mat-stepper-header-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-active{color:var(--mat-stepper-header-selected-state-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-error{color:var(--mat-stepper-header-error-state-label-text-color, var(--mat-sys-error));font-size:var(--mat-stepper-header-error-state-label-text-size, var(--mat-sys-title-small-size))}.mat-step-label.mat-step-label-selected{font-size:var(--mat-stepper-header-selected-state-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-selected-state-label-text-weight, var(--mat-sys-title-small-weight))}.mat-step-text-label{text-overflow:ellipsis;overflow:hidden}.mat-step-header .mat-step-header-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-step-icon-selected{background-color:var(--mat-stepper-header-selected-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-selected-state-icon-foreground-color, var(--mat-sys-on-primary))}.mat-step-icon-state-done{background-color:var(--mat-stepper-header-done-state-icon-background-color);color:var(--mat-stepper-header-done-state-icon-foreground-color)}.mat-step-icon-state-edit{background-color:var(--mat-stepper-header-edit-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-edit-state-icon-foreground-color, var(--mat-sys-on-primary))}
|
|
2
2
|
`],encapsulation:2,changeDetection:0})}return t})(),Ei=(()=>{class t{templateRef=c(z);name;constructor(){}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["ng-template","matStepperIcon",""]],inputs:{name:[0,"matStepperIcon","name"]}})}return t})(),Ti=(()=>{class t{_template=c(z);constructor(){}static \u0275fac=function(i){return new(i||t)};static \u0275dir=S({type:t,selectors:[["ng-template","matStepContent",""]]})}return t})(),Ie=(()=>{class t extends se{_errorStateMatcher=c(Se,{skipSelf:!0});_viewContainerRef=c(Ve);_isSelected=Ee.EMPTY;stepLabel=void 0;color;_lazyContent;_portal;ngAfterContentInit(){this._isSelected=this._stepper.steps.changes.pipe(Oe(()=>this._stepper.selectionChange.pipe(ke(e=>e.selectedStep===this),k(this._stepper.selected===this)))).subscribe(e=>{e&&this._lazyContent&&!this._portal&&(this._portal=new dt(this._lazyContent._template,this._viewContainerRef))})}ngOnDestroy(){this._isSelected.unsubscribe()}isErrorState(e,i){let a=this._errorStateMatcher.isErrorState(e,i),n=!!(e&&e.invalid&&this.interacted);return a||n}static \u0275fac=(()=>{let e;return function(a){return(e||(e=U(t)))(a||t)}})();static \u0275cmp=M({type:t,selectors:[["mat-step"]],contentQueries:function(i,a,n){if(i&1&&(D(n,ee,5),D(n,Ti,5)),i&2){let d;b(d=y())&&(a.stepLabel=d.first),b(d=y())&&(a._lazyContent=d.first)}},hostAttrs:["hidden",""],inputs:{color:"color"},exportAs:["matStep"],features:[ce([{provide:Se,useExisting:t},{provide:se,useExisting:t}]),O],ngContentSelectors:Ut,decls:1,vars:0,consts:[[3,"cdkPortalOutlet"]],template:function(i,a){i&1&&(Z(),h(0,gi,2,1,"ng-template"))},dependencies:[ct],encapsulation:2,changeDetection:0})}return t})(),Yt=(()=>{class t extends G{_ngZone=c(Fe);_renderer=c(Le);_animationsModule=c(He,{optional:!0});_cleanupTransition;_isAnimating=Ae(!1);_stepHeader=void 0;_animatedContainers;_steps=void 0;steps=new Y;_icons;animationDone=new R;disableRipple;color;labelPosition="end";headerPosition="top";_iconOverrides={};get animationDuration(){return this._animationDuration}set animationDuration(e){this._animationDuration=/^\d+$/.test(e)?e+"ms":e}_animationDuration="";_isServer=!c(Xe).isBrowser;constructor(){super();let i=c(K).nativeElement.nodeName.toLowerCase();this.orientation=i==="mat-vertical-stepper"?"vertical":"horizontal"}ngAfterContentInit(){super.ngAfterContentInit(),this._icons.forEach(({name:e,templateRef:i})=>this._iconOverrides[e]=i),this.steps.changes.pipe(E(this._destroyed)).subscribe(()=>this._stateChanged()),this.selectedIndexChange.pipe(E(this._destroyed)).subscribe(()=>{let e=this._getAnimationDuration();e==="0ms"||e==="0s"?this._onAnimationDone():this._isAnimating.set(!0)}),this._ngZone.runOutsideAngular(()=>{this._animationsModule!=="NoopAnimations"&&setTimeout(()=>{this._elementRef.nativeElement.classList.add("mat-stepper-animations-enabled"),this._cleanupTransition=this._renderer.listen(this._elementRef.nativeElement,"transitionend",this._handleTransitionend)},200)})}ngAfterViewInit(){if(super.ngAfterViewInit(),typeof queueMicrotask=="function"){let e=!1;this._animatedContainers.changes.pipe(k(null),E(this._destroyed)).subscribe(()=>queueMicrotask(()=>{e||(e=!0,this.animationDone.emit()),this._stateChanged()}))}}ngOnDestroy(){super.ngOnDestroy(),this._cleanupTransition?.()}_stepIsNavigable(e,i){return i.completed||this.selectedIndex===e||!this.linear}_getAnimationDuration(){return this._animationsModule==="NoopAnimations"?"0ms":this.animationDuration?this.animationDuration:this.orientation==="horizontal"?"500ms":"225ms"}_handleTransitionend=e=>{let i=e.target;if(!i)return;let a=this.orientation==="horizontal"&&e.propertyName==="transform"&&i.classList.contains("mat-horizontal-stepper-content-current"),n=this.orientation==="vertical"&&e.propertyName==="grid-template-rows"&&i.classList.contains("mat-vertical-content-container-active");(a||n)&&this._animatedContainers.find(m=>m.nativeElement===i)&&this._onAnimationDone()};_onAnimationDone(){this._isAnimating.set(!1),this.animationDone.emit()}static \u0275fac=function(i){return new(i||t)};static \u0275cmp=M({type:t,selectors:[["mat-stepper"],["mat-vertical-stepper"],["mat-horizontal-stepper"],["","matStepper",""]],contentQueries:function(i,a,n){if(i&1&&(D(n,Ie,5),D(n,Ei,5)),i&2){let d;b(d=y())&&(a._steps=d),b(d=y())&&(a._icons=d)}},viewQuery:function(i,a){if(i&1&&(X(Gt,5),X(vi,5)),i&2){let n;b(n=y())&&(a._stepHeader=n),b(n=y())&&(a._animatedContainers=n)}},hostAttrs:["role","tablist"],hostVars:15,hostBindings:function(i,a){i&2&&(F("aria-orientation",a.orientation),Be("--mat-stepper-animation-duration",a._getAnimationDuration()),A("mat-stepper-horizontal",a.orientation==="horizontal")("mat-stepper-vertical",a.orientation==="vertical")("mat-stepper-label-position-end",a.orientation==="horizontal"&&a.labelPosition=="end")("mat-stepper-label-position-bottom",a.orientation==="horizontal"&&a.labelPosition=="bottom")("mat-stepper-header-position-bottom",a.headerPosition==="bottom")("mat-stepper-animating",a._isAnimating()))},inputs:{disableRipple:"disableRipple",color:"color",labelPosition:"labelPosition",headerPosition:"headerPosition",animationDuration:"animationDuration"},outputs:{animationDone:"animationDone"},exportAs:["matStepper","matVerticalStepper","matHorizontalStepper"],features:[ce([{provide:G,useExisting:t}]),O],ngContentSelectors:Ut,decls:5,vars:2,consts:[["stepTemplate",""],["animatedContainer",""],[1,"mat-horizontal-stepper-wrapper"],[1,"mat-horizontal-stepper-header-container"],[1,"mat-horizontal-content-container"],["role","tabpanel",1,"mat-horizontal-stepper-content",3,"id","class"],[3,"ngTemplateOutlet","ngTemplateOutletContext"],[1,"mat-stepper-horizontal-line"],["role","tabpanel",1,"mat-horizontal-stepper-content",3,"id"],[3,"ngTemplateOutlet"],[1,"mat-step"],[1,"mat-vertical-content-container"],["role","tabpanel",1,"mat-vertical-stepper-content",3,"id"],[1,"mat-vertical-content"],[3,"click","keydown","tabIndex","id","index","state","label","selected","active","optional","errorMessage","iconOverrides","disableRipple","color"]],template:function(i,a){if(i&1&&(Z(),h(0,bi,1,0)(1,xi,7,0,"div",2)(2,Mi,2,0)(3,wi,1,23,"ng-template",null,0,Ge)),i&2){let n;x(a._isServer?0:-1),l(),x((n=a.orientation)==="horizontal"?1:n==="vertical"?2:-1)}},dependencies:[ue,Gt],styles:[`.mat-stepper-vertical,.mat-stepper-horizontal{display:block;font-family:var(--mat-stepper-container-text-font, var(--mat-sys-body-medium-font));background:var(--mat-stepper-container-color, var(--mat-sys-surface))}.mat-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container{align-items:flex-start}.mat-stepper-header-position-bottom .mat-horizontal-stepper-header-container{order:1}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:var(--mat-stepper-line-color, var(--mat-sys-outline))}.mat-stepper-label-position-bottom .mat-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{border-top-width:1px;border-top-style:solid;content:"";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.mat-horizontal-stepper-header{display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px;height:var(--mat-stepper-header-height, 72px)}.mat-horizontal-stepper-header .mat-step-icon{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:8px}.mat-horizontal-stepper-header::before,.mat-horizontal-stepper-header::after{border-top-color:var(--mat-stepper-line-color, var(--mat-sys-outline))}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after{top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{right:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{left:0}[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after{display:none}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label{padding:16px 0 0 0;text-align:center;width:100%}.mat-vertical-stepper-header{display:flex;align-items:center;height:24px;padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon{margin-right:0;margin-left:12px}.mat-horizontal-stepper-wrapper{display:flex;flex-direction:column}.mat-horizontal-stepper-content{visibility:hidden;overflow:hidden;outline:0;height:0}.mat-stepper-animations-enabled .mat-horizontal-stepper-content{transition:transform var(--mat-stepper-animation-duration, 0) cubic-bezier(0.35, 0, 0.25, 1)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-previous{transform:translate3d(-100%, 0, 0)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-next{transform:translate3d(100%, 0, 0)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.mat-stepper-horizontal:not(.mat-stepper-animating) .mat-horizontal-stepper-content.mat-horizontal-stepper-content-current{overflow:visible}.mat-horizontal-content-container{overflow:hidden;padding:0 24px 24px 24px}@media(forced-colors: active){.mat-horizontal-content-container{outline:solid 1px}}.mat-stepper-header-position-bottom .mat-horizontal-content-container{padding:24px 24px 0 24px}.mat-vertical-content-container{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:36px;border:0;position:relative}.mat-stepper-animations-enabled .mat-vertical-content-container{transition:grid-template-rows var(--mat-stepper-animation-duration, 0) cubic-bezier(0.4, 0, 0.2, 1)}.mat-vertical-content-container.mat-vertical-content-container-active{grid-template-rows:1fr}.mat-step:last-child .mat-vertical-content-container{border:none}@media(forced-colors: active){.mat-vertical-content-container{outline:solid 1px}}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}@supports not (grid-template-rows: 0fr){.mat-vertical-content-container{height:0}.mat-vertical-content-container.mat-vertical-content-container-active{height:auto}}.mat-stepper-vertical-line::before{content:"";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:var(--mat-stepper-line-color, var(--mat-sys-outline));top:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2));bottom:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2))}[dir=rtl] .mat-stepper-vertical-line::before{left:auto;right:0}.mat-vertical-stepper-content{overflow:hidden;outline:0;visibility:hidden}.mat-stepper-animations-enabled .mat-vertical-stepper-content{transition:visibility var(--mat-stepper-animation-duration, 0) linear}.mat-vertical-content-container-active>.mat-vertical-stepper-content{visibility:visible}.mat-vertical-content{padding:0 24px 24px 24px}
|
|
3
3
|
`],encapsulation:2,changeDetection:0})}return t})(),Zt=(()=>{class t extends qt{static \u0275fac=(()=>{let e;return function(a){return(e||(e=U(t)))(a||t)}})();static \u0275dir=S({type:t,selectors:[["button","matStepperNext",""]],hostAttrs:[1,"mat-stepper-next"],hostVars:1,hostBindings:function(i,a){i&2&&N("type",a.type)},features:[O]})}return t})(),Jt=(()=>{class t extends Wt{static \u0275fac=(()=>{let e;return function(a){return(e||(e=U(t)))(a||t)}})();static \u0275dir=S({type:t,selectors:[["button","matStepperPrevious",""]],hostAttrs:[1,"mat-stepper-previous"],hostVars:1,hostBindings:function(i,a){i&2&&N("type",a.type)},features:[O]})}return t})();var ki=()=>[5,10,25,100];function Oi(t,o){t&1&&(r(0,"mat-header-cell",29),p(1," Path "),s())}function Pi(t,o){if(t&1&&(r(0,"mat-cell",30),p(1),s()),t&2){let e=o.$implicit;l(),w(" ",e.path," ")}}function Ri(t,o){t&1&&(r(0,"mat-header-cell",31),p(1," Source "),s())}function zi(t,o){if(t&1&&(r(0,"mat-cell",32),p(1),s()),t&2){let e=o.$implicit;l(),w(" ",e.pathSource," ")}}function Fi(t,o){t&1&&(r(0,"mat-header-cell",31),p(1," Time Scale "),s())}function Ai(t,o){if(t&1&&(r(0,"mat-cell",33),p(1),s()),t&2){let e=o.$implicit;l(),w(" ",e.timeScaleFormat," ")}}function Hi(t,o){t&1&&(r(0,"mat-header-cell",31),p(1," Duration "),s())}function Li(t,o){if(t&1&&(r(0,"mat-cell",33),p(1),s()),t&2){let e=o.$implicit;l(),w(" ",e.period," ")}}function Vi(t,o){t&1&&v(0,"mat-header-cell",34)}function Ni(t,o){if(t&1){let e=V();r(0,"mat-cell",35)(1,"button",36),C("click",function(){let a=_(e).$implicit,n=f();return g(n.openDatasetModal(a.uuid))}),p(2,"Edit"),s(),r(3,"button",36),C("click",function(){let a=_(e).$implicit,n=f();return g(n.deleteDataset(a.uuid))}),p(4,"Delete"),s()()}}function Bi(t,o){t&1&&v(0,"mat-header-row",37)}function Qi(t,o){t&1&&v(0,"mat-row",38)}function ji(t,o){if(t&1&&(r(0,"mat-row"),p(1),s()),t&2){f();let e=B(9);l(),w(' No data matching the filter "',e.value,'" ')}}function $i(t,o){t&1&&p(0,"Source Data")}function qi(t,o){if(t&1&&(r(0,"mat-option",23),p(1),s()),t&2){let e=o.$implicit;u("value",e),l(),w(" ",e," ")}}function Wi(t,o){if(t&1&&(r(0,"mat-option",23),p(1),s()),t&2){let e=o.$implicit;u("value",e),l(),w(" ",e," ")}}function Gi(t,o){t&1&&p(0,"Sampling")}var ei="[_nghost-%COMP%]{display:block;height:100%;width:100%}.content-area[_ngcontent-%COMP%]{height:calc(100% - 63px);overflow-y:scroll;width:100%;scroll-behavior:smooth}.filter[_ngcontent-%COMP%]{margin-bottom:10px}.buttons[_ngcontent-%COMP%]{margin-top:10px}.mat-column-actions[_ngcontent-%COMP%]{text-align:end}.buttons[_ngcontent-%COMP%]{margin-right:5px}.pathCell[_ngcontent-%COMP%], .pathHeader[_ngcontent-%COMP%]{flex:1 1 50%}.dataHeader[_ngcontent-%COMP%], .dataCell[_ngcontent-%COMP%]{flex:1 1 10%;justify-content:center}.actionHeader[_ngcontent-%COMP%]{flex:1 1 20%}.actionCell[_ngcontent-%COMP%]{flex:1 1 20%;justify-content:end}@media screen and (max-width: 750px){.pathHeader[_ngcontent-%COMP%], .dataHeader[_ngcontent-%COMP%]{flex:1 1 30%}.actionHeader[_ngcontent-%COMP%]{display:none}.mat-mdc-table[_ngcontent-%COMP%] .mat-mdc-cell[_ngcontent-%COMP%]:before{content:attr(data-label);float:left;padding-right:5px}mat-row[_ngcontent-%COMP%]:after{min-height:auto;padding-bottom:10px}.dataRow[_ngcontent-%COMP%]{flex-direction:column;align-items:flex-start}.dataCell[_ngcontent-%COMP%], .actionCell[_ngcontent-%COMP%]{margin-left:24px}}",gn=(()=>{class t{paginator=le(re);sort=le(oe);pageTitle="Datasets";selectedDataset;tableData=new Qt([]);displayedColumns=["path","pathSource","timeScaleFormat","period","actions"];dialog=c(ht);cdRef=c(q);dsService=c(Et);ngOnInit(){this.loadDatasets()}loadDatasets(){this.tableData.data=this.dsService.list()}ngAfterViewInit(){this.tableData.paginator=this.paginator(),this.tableData.sort=this.sort(),this.tableData.filter="",this.cdRef.detectChanges()}openDatasetModal(e){let i;if(e){let a=Ye(this.tableData.data.find(n=>n.uuid===e));a&&(i=this.dialog.open(Xt,{data:a,disableClose:!1}))}else i=this.dialog.open(Xt,{disableClose:!1});i.afterClosed().subscribe(a=>{a===void 0||!a||(a.label=`${a.path}, Source: ${a.pathSource}, Scale: ${a.timeScaleFormat}, Period: ${a.period} `,a.uuid?this.editDataset(a):this.addDataset(a),this.loadDatasets())})}addDataset(e){this.dsService.create(e.path,e.pathSource,e.timeScaleFormat,e.period,e.label),this.loadDatasets()}editDataset(e){this.dsService.edit(e),this.loadDatasets()}deleteDataset(e){this.dsService.remove(e),this.loadDatasets()}trackByUuid(e,i){return`${i.uuid}`}applyFilter(e){let i=e.target.value;this.tableData.filter=i.trim().toLowerCase(),this.tableData.paginator&&this.tableData.paginator.firstPage()}static \u0275fac=function(i){return new(i||t)};static \u0275cmp=M({type:t,selectors:[["settings-datasets"]],viewQuery:function(i,a){i&1&&(de(a.paginator,re,5),de(a.sort,oe,5)),i&2&&je(2)},decls:36,vars:8,consts:[["existingDataSet","ngForm"],["input",""],[3,"pageTitle"],["name","existingDataSet",1,"page-content-wrapper","content-area"],[1,"mat-card-subtitle","description-text"],[1,"filter"],["matInput","","placeholder","Ex: navigation","value","",3,"keyup"],[1,"mat-elevation-z8","full-width","table-container"],["matSort","","matSortActive","path","matSortDirection","asc",1,"full-display",3,"dataSource","trackBy"],["matColumnDef","path"],["class","pathHeader","mat-sort-header","",4,"matHeaderCellDef"],["class","pathCell","data-label","Path: ",4,"matCellDef"],["matColumnDef","pathSource"],["class","dataHeader","mat-sort-header","",4,"matHeaderCellDef"],["class","dataCell","data-label","Source: ",4,"matCellDef"],["matColumnDef","timeScaleFormat"],["class","dataCell","data-label","Scale: ",4,"matCellDef"],["matColumnDef","period"],["matColumnDef","actions"],["class","actionHeader","mat-sort-header","",4,"matHeaderCellDef"],["class","actionCell",4,"matCellDef"],["class","headerRow",4,"matHeaderRowDef","matHeaderRowDefSticky"],["class","dataRow",4,"matRowDef","matRowDefColumns"],[4,"matNoDataRow"],[1,"paginator"],["pageSize","5",3,"pageSizeOptions"],[1,"formActionFooter"],[1,"formActionDivider"],["mat-flat-button","",1,"formActionButton",3,"click"],["mat-sort-header","",1,"pathHeader"],["data-label","Path: ",1,"pathCell"],["mat-sort-header","",1,"dataHeader"],["data-label","Source: ",1,"dataCell"],["data-label","Scale: ",1,"dataCell"],["mat-sort-header","",1,"actionHeader"],[1,"actionCell"],["mat-raised-button","","color","accent",1,"small-button","buttons",3,"click"],[1,"headerRow"],[1,"dataRow"]],template:function(i,a){if(i&1){let n=V();v(0,"page-header",2),r(1,"form",3,0)(3,"p",4),p(4,"Datasets are background processes that record path values over time. Combine with the Data Chart widget they offer data visualization graphs. Care should be applied to manage Datasets and evaluate system resources usage. "),s(),r(5,"mat-form-field",5)(6,"mat-label"),p(7,"Filter"),s(),r(8,"input",6,1),C("keyup",function(m){return _(n),g(a.applyFilter(m))}),s()(),r(10,"div",7)(11,"mat-table",8),H(12,9),h(13,Oi,2,0,"mat-header-cell",10)(14,Pi,2,1,"mat-cell",11),L(),H(15,12),h(16,Ri,2,0,"mat-header-cell",13)(17,zi,2,1,"mat-cell",14),L(),H(18,15),h(19,Fi,2,0,"mat-header-cell",13)(20,Ai,2,1,"mat-cell",16),L(),H(21,17),h(22,Hi,2,0,"mat-header-cell",13)(23,Li,2,1,"mat-cell",16),L(),H(24,18),h(25,Vi,1,0,"mat-header-cell",19)(26,Ni,5,0,"mat-cell",20),L(),h(27,Bi,1,0,"mat-header-row",21)(28,Qi,1,0,"mat-row",22)(29,ji,2,1,"mat-row",23),s()(),r(30,"div",24),v(31,"mat-paginator",25),s(),r(32,"div",26),v(33,"mat-divider",27),r(34,"button",28),C("click",function(){return _(n),g(a.openDatasetModal())}),p(35,"Add"),s()()()}i&2&&(u("pageTitle",a.pageTitle),l(11),u("dataSource",a.tableData)("trackBy",a.trackByUuid),l(16),u("matHeaderRowDef",a.displayedColumns)("matHeaderRowDefSticky",!0),l(),u("matRowDefColumns",a.displayedColumns),l(3),u("pageSizeOptions",$e(7,ki)))},dependencies:[ve,ge,fe,_e,ye,be,Ce,Ot,oe,zt,Rt,Ft,jt,Pt,At,he,Ht,Vt,Lt,Nt,Bt,re,xe,kt],styles:[ei]})}return t})(),Xt=(()=>{class t{SignalKDataService=c(Ze);dialogRef=c(mt);dataset=c(ut);titleDialog=null;newDataset={uuid:null,path:null,pathSource:null,baseUnit:null,timeScaleFormat:"second",period:10,label:null};formDataset=null;availablePaths=[];availableSources=[];filterSelfPaths=!0;ngOnInit(){if(this.dataset){this.titleDialog="Edit Dataset",this.formDataset=this.dataset;let e=this.SignalKDataService.getPathObject(this.formDataset.path);e!==null&&(this.availableSources=["default"].concat(Object.keys(e.sources)))}else this.titleDialog="Add Dataset",this.formDataset=this.newDataset;this.availablePaths=this.SignalKDataService.getPathsByType("number").sort()}changePath(){let e=this.SignalKDataService.getPathObject(this.formDataset.path);e!==null&&(this.availableSources=["default"].concat(Object.keys(e.sources)),this.formDataset.pathSource="default")}closeForm(){this.dialogRef.close(this.formDataset)}static \u0275fac=function(i){return new(i||t)};static \u0275cmp=M({type:t,selectors:[["settings-datasets-modal"]],decls:65,vars:13,consts:[["datasetForm","ngForm"],["mat-dialog-title",""],["name","datasetForm",3,"ngSubmit"],["matStepLabel",""],[1,"tab-content"],[1,"full-width"],["placeholder","Select data path","name","selectedPath","required","",3,"ngModelChange","ngModel"],[3,"value",4,"ngFor","ngForOf"],["name","filterSelfPaths",3,"ngModelChange","ngModel"],["placeholder","Select data source","name","selectedSource","required","",3,"ngModelChange","ngModel"],[1,"buttons"],["type","button","mat-raised-button","","color","accent","matStepperNext","",3,"disabled"],[1,"mat-subtitle-1"],[1,"flex-container",2,"margin-top","10px"],[1,"flex-field-50"],["placeholder","Select dataset time scale","name","timeScaleFormat","required","",3,"ngModelChange","ngModel"],["value","hour"],["value","minute"],["value","second"],["matInput","","type","number","min","1","max","60","step","1","placeholder","Enter or select number...","name","period","required","",3,"ngModelChange","ngModel"],[2,"margin-top","10px"],["type","button","mat-raised-button","","color","accent","matStepperPrevious","",1,"buttons"],["mat-raised-button","","type","submit","color","accent",1,"buttons",3,"disabled"],[3,"value"]],template:function(i,a){if(i&1){let n=V();r(0,"h6",1),p(1),s(),r(2,"mat-dialog-content")(3,"form",2,0),C("ngSubmit",function(){return _(n),g(a.closeForm())}),r(5,"mat-horizontal-stepper")(6,"mat-step"),h(7,$i,1,0,"ng-template",3),r(8,"div",4)(9,"mat-form-field",5)(10,"mat-label"),p(11,"Signal K Path"),s(),r(12,"mat-select",6),$("ngModelChange",function(m){return _(n),j(a.formDataset.path,m)||(a.formDataset.path=m),g(m)}),C("ngModelChange",function(){return _(n),g(a.changePath())}),h(13,qi,2,2,"mat-option",7),qe(14,"filterSelf"),s()(),r(15,"mat-checkbox",8),$("ngModelChange",function(m){return _(n),j(a.filterSelfPaths,m)||(a.filterSelfPaths=m),g(m)}),p(16," Restrict to own vessel "),s(),v(17,"br")(18,"br"),r(19,"mat-form-field",5)(20,"mat-label"),p(21,"Source"),s(),r(22,"mat-select",9),$("ngModelChange",function(m){return _(n),j(a.formDataset.pathSource,m)||(a.formDataset.pathSource=m),g(m)}),h(23,Wi,2,2,"mat-option",7),s()()(),v(24,"mat-divider"),r(25,"div",10)(26,"button",11),p(27," Next "),s()()(),r(28,"mat-step"),h(29,Gi,1,0,"ng-template",3),r(30,"div",4)(31,"span",12),p(32,"Time Scales"),s(),r(33,"div",13)(34,"div",14)(35,"mat-form-field",5)(36,"mat-label"),p(37,"Scale"),s(),r(38,"mat-select",15),$("ngModelChange",function(m){return _(n),j(a.formDataset.timeScaleFormat,m)||(a.formDataset.timeScaleFormat=m),g(m)}),r(39,"mat-option",16),p(40,"Hours"),s(),r(41,"mat-option",17),p(42,"Minutes"),s(),r(43,"mat-option",18),p(44,"Seconds"),s()()()(),r(45,"div",14)(46,"mat-form-field",5)(47,"mat-label"),p(48,"Duration"),s(),r(49,"input",19),$("ngModelChange",function(m){return _(n),j(a.formDataset.period,m)||(a.formDataset.period=m),g(m)}),s()()()(),r(50,"p",20),p(51,"Time scales define the data sampling rate and overall Dataset level of precision. Select a Time Scale that is targeted to your intended usage. Shorter Time Scales have higher system resources costs, for both the data capture and widget rendering process. "),s(),r(52,"ul")(53,"li"),p(54,"Hours: per minute sampling rate. Intended for long sampling periods when slow refresh rate is acceptable and system resource usage should be minimized. Grafana is the perfect alternative to this Time Scale. "),s(),r(55,"li"),p(56,"Minutes: per second sampling rate. Meant for trends observations such wind speed, depth, solar power, voltage, etc. "),s(),r(57,"li"),p(58,"Secondes: 200ms sampling rate. Intended for use cases where user may act upon realtime information such as when racing. "),s()()(),v(59,"mat-divider"),r(60,"div",10)(61,"button",21),p(62," Back "),s(),r(63,"button",22),p(64," Save "),s()()()()()()}if(i&2){let n=B(4);l(),w(" ",a.titleDialog," "),l(11),Q("ngModel",a.formDataset.path),l(),u("ngForOf",We(14,10,a.availablePaths,a.filterSelfPaths)),l(2),Q("ngModel",a.filterSelfPaths),l(7),Q("ngModel",a.formDataset.pathSource),l(),u("ngForOf",a.availableSources),l(3),u("disabled",!a.formDataset.path),l(12),Q("ngModel",a.formDataset.timeScaleFormat),l(11),Q("ngModel",a.formDataset.period),l(14),u("disabled",!n.valid)}},dependencies:[Tt,ft,_t,ve,ge,gt,St,bt,fe,Dt,xt,Ct,yt,_e,Yt,Ie,ee,ye,be,wt,Ke,Mt,It,xe,he,Zt,Ce,Jt,$t],styles:[ei]})}return t})();export{gn as SettingsDatasetsComponent,Xt as SettingsDatasetsModalComponent};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{i as g,o as p,p as h}from"./chunk-
|
|
1
|
+
import{i as g,o as p,p as h}from"./chunk-6QHCHGTT.js";import{Dc as i,Ec as c,Hb as m,Sa as r,ic as a,jc as n,qc as s,te as u,ua as l,ub as d,ye as f}from"./chunk-Y7X77HSW.js";var w=(()=>{class e{pageTitle=r();_router=l(g);closePage(){this._router.navigate(["/dashboard"])}static \u0275fac=function(t){return new(t||e)};static \u0275cmp=m({type:e,selectors:[["page-header"]],inputs:{pageTitle:[1,"pageTitle"]},decls:6,vars:1,consts:[[1,"fullpage-header"],[1,"fullpage-header-title"],["mat-icon-button","",1,"dialog-close-icon",3,"click"]],template:function(t,o){t&1&&(a(0,"div",0)(1,"h6",1),i(2),n(),a(3,"button",2),s("click",function(){return o.closePage()}),a(4,"mat-icon"),i(5,"close"),n()()()),t&2&&(d(2),c(o.pageTitle()))},dependencies:[f,u,h,p],styles:[".fullpage-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:baseline}.fullpage-header-title[_ngcontent-%COMP%]{margin-block-start:0px;margin-block-end:0px;padding:18px 24px 13px;color:var(--mdc-dialog-subhead-color, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)));font-family:var(--mdc-dialog-subhead-font, var(--mat-sys-headline-small-font, inherit));line-height:var(--mdc-dialog-subhead-line-height, var(--mat-sys-headline-small-line-height, 1.5rem));font-size:var(--mdc-dialog-subhead-size, var(--mat-sys-headline-small-size, 1rem));font-weight:var(--mdc-dialog-subhead-weight, var(--mat-sys-headline-small-weight, 400));letter-spacing:var(--mdc-dialog-subhead-tracking, var(--mat-sys-headline-small-tracking, .03125em))}.dialog-close-icon[_ngcontent-%COMP%]{margin-right:15px}.mat-mdc-dialog-content[_ngcontent-%COMP%]{max-height:max-content}.dialog-content-padding[_ngcontent-%COMP%]{--mat-dialog-content-padding: 0px 24px 20px 24px}"]})}return e})();export{w as a};
|