@mxtommy/kip 3.3.0-beta.3 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/instructions/angular.instructions.md +19 -0
- package/CHANGELOG.md +19 -0
- package/COPILOT.md +257 -0
- package/README.md +19 -0
- package/package.json +19 -19
- package/public/3rdpartylicenses.txt +26 -26
- package/public/chunk-3HDDBXQX.js +2 -0
- package/public/chunk-3RECQ7FO.js +1 -0
- package/public/{chunk-RRAVS5O5.js → chunk-44YUY7UC.js} +1 -1
- package/public/chunk-5K7TBZVE.js +4 -0
- package/public/{chunk-FT5BOMBZ.js → chunk-7MAW5JUV.js} +1 -1
- package/public/chunk-AADA4WFK.js +5 -0
- package/public/{chunk-RWUVBWWO.js → chunk-B3PMU746.js} +1 -1
- package/public/chunk-B427KQYP.js +8 -0
- package/public/{chunk-FMXUVLIS.js → chunk-C7LQ4JH6.js} +1 -1
- package/public/chunk-ECOFSL27.js +2 -0
- package/public/chunk-ENKPORJ2.js +4 -0
- package/public/chunk-G2YDCXRS.js +1 -0
- package/public/chunk-GCRU2MQN.js +3 -0
- package/public/{chunk-4I72QW7P.js → chunk-JGQZHRVH.js} +2 -2
- package/public/chunk-KS5NMMLP.js +1 -0
- package/public/chunk-OFKNWTWQ.js +3 -0
- package/public/chunk-QFYHTHWH.js +5 -0
- package/public/chunk-RRKP4LCJ.js +3 -0
- package/public/chunk-S3ZVIKLY.js +3 -0
- package/public/chunk-SFNSRKY4.js +18 -0
- package/public/chunk-SG7QU6WS.js +60 -0
- package/public/chunk-VBLNSAAZ.js +2 -0
- package/public/chunk-W6GQAXBI.js +1 -0
- package/public/chunk-WGM3TAMK.js +6 -0
- package/public/chunk-WXVRRQMZ.js +2 -0
- package/public/chunk-ZKAVJSP3.js +2 -0
- package/public/index.html +2 -2
- package/public/main-U4UEIZM3.js +236 -0
- package/public/polyfills-QVNLPVFF.js +2 -0
- package/public/styles-IMZWSNV6.css +1 -0
- package/public/chunk-33V5LB3S.js +0 -1
- package/public/chunk-3VDHINWX.js +0 -5
- package/public/chunk-3ZEGWRD3.js +0 -5
- package/public/chunk-4BOCTD5N.js +0 -8
- package/public/chunk-4JOAS6PU.js +0 -6
- package/public/chunk-55NKBYQA.js +0 -2
- package/public/chunk-74Q7ESW3.js +0 -3
- package/public/chunk-BR6DGEVY.js +0 -2
- package/public/chunk-C2FHZBTV.js +0 -3
- package/public/chunk-DHPOFP3B.js +0 -2
- package/public/chunk-EV5JRVML.js +0 -1
- package/public/chunk-I6I4BVGS.js +0 -3
- package/public/chunk-JIU24MDF.js +0 -2
- package/public/chunk-JZ455OYD.js +0 -18
- package/public/chunk-MKRJYLEZ.js +0 -7
- package/public/chunk-PG77CNSY.js +0 -4
- package/public/chunk-PZFXKRRN.js +0 -60
- package/public/chunk-SGYCFQGT.js +0 -0
- package/public/chunk-UNIQOPO4.js +0 -1
- package/public/chunk-UXHQY4AJ.js +0 -3
- package/public/chunk-XKOTWXAB.js +0 -2
- package/public/chunk-YHKDUORM.js +0 -1
- package/public/main-B6YUWQPL.js +0 -234
- package/public/polyfills-2DK6FBPF.js +0 -2
- package/public/styles-JBXUFPXQ.css +0 -1
|
@@ -99,3 +99,22 @@ Here is a link to the most recent Angular style guide https://angular.dev/style-
|
|
|
99
99
|
- Design services around a single responsibility
|
|
100
100
|
- Use the `providedIn: 'root'` option for singleton services
|
|
101
101
|
- Use the `inject()` function instead of constructor injection
|
|
102
|
+
|
|
103
|
+
---
|
|
104
|
+
|
|
105
|
+
## Cross-Reference Instructions
|
|
106
|
+
|
|
107
|
+
### **Related Files:**
|
|
108
|
+
- **COPILOT.md** (Root): KIP project-specific guidelines, architecture, services, and widget development patterns
|
|
109
|
+
- **README.md**: Project setup, build instructions, and general development workflow
|
|
110
|
+
|
|
111
|
+
### **Usage Priority:**
|
|
112
|
+
1. **KIP-Specific Development**: Follow `COPILOT.md` for widget development, Signal K integration, theming, and KIP-specific patterns
|
|
113
|
+
2. **General Angular Development**: Follow this file for modern Angular v20+ coding standards, component structure, and framework best practices
|
|
114
|
+
3. **Project Setup**: Refer to `README.md` for build commands, dependencies, and environment setup
|
|
115
|
+
|
|
116
|
+
### **Integration Notes:**
|
|
117
|
+
- When developing KIP widgets, extend `BaseWidgetComponent` as described in `COPILOT.md` AND follow the Angular v20+ patterns in this file
|
|
118
|
+
- Use signals, standalone components, and modern control flow from this file within the KIP architecture from `COPILOT.md`
|
|
119
|
+
- For theming and colors, always use the KIP theme system described in `COPILOT.md`, not generic CSS approaches
|
|
120
|
+
- All services should follow both the Angular DI patterns here AND the KIP service architecture in `COPILOT.md`
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,22 @@
|
|
|
1
|
+
# V 3.3.0
|
|
2
|
+
## New features
|
|
3
|
+
* New autopilot widgets with responsive UI.
|
|
4
|
+
* New Wind Steering widget UI:
|
|
5
|
+
* Added Current/Drift and Set.
|
|
6
|
+
* Improved wind speeds visibility.
|
|
7
|
+
* Apparent wind used for tack angle and sector calculation.
|
|
8
|
+
* Widget plugin server dependency validation and UI enhancements.
|
|
9
|
+
## Improvements
|
|
10
|
+
* Add support for optional and hardcoded paths in widgets.
|
|
11
|
+
* Add days:hours:minutes:Seconds to Time unit format options. Fixes #682.
|
|
12
|
+
* Reduce package size.
|
|
13
|
+
* Support for Date values provided in metadata. Fixes #665. Special thanks to @emonty
|
|
14
|
+
* Add code linter. Special thanks to @emonty
|
|
15
|
+
* Add project documentation.
|
|
16
|
+
## Fixes
|
|
17
|
+
* Fix bouncy slider when selecting non-default value display. Fixes #671
|
|
18
|
+
* Position type paths should not be converted to radian. Fixes #670
|
|
19
|
+
* Numeric Widget has scrollbar on resize for some browsers. Fixes #640
|
|
1
20
|
# V 3.2.0
|
|
2
21
|
## New features
|
|
3
22
|
* Add automatic reconnection on mobile OS app resume
|
package/COPILOT.md
ADDED
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
# COPILOT.md
|
|
2
|
+
|
|
3
|
+
## 1. Project Overview
|
|
4
|
+
KIP Instrument MFD is an advanced and versatile marine instrumentation package designed to display Signal K data in a modern, customizable dashboard, on boats. It provides real-time visualization of navigation, wind, engine, and other marine data streams offered by Signal K, supporting a wide range of widgets and configuration options. The project aims to deliver a user-friendly, extensible, and visually appealing interface for both professional and recreational marine users.
|
|
5
|
+
|
|
6
|
+
- **Key technologies:** Angular (v20+), Angular Material, Signal K, TypeScript, SCSS.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## 2. Architecture & Structure
|
|
11
|
+
- **Main folders:**
|
|
12
|
+
- `src/app/`: Main application code.
|
|
13
|
+
- `src/app/widgets/`: Widget components (e.g., wind, autopilot).
|
|
14
|
+
- `src/app/widget-config/`: Widget configuration components and logic.
|
|
15
|
+
- `src/app/core/`: Core services, interfaces, and utilities.
|
|
16
|
+
- **Component structure:**
|
|
17
|
+
- Each widget has its own component, template, and theme SCSS in `src/app/widgets/`.
|
|
18
|
+
- All widget configuration logic and UI is centralized and handled independently by components in `src/app/widget-config/`.
|
|
19
|
+
- Creating a new widget does not require changes to `src/app/widget-config/` unless your widget introduces new configuration properties or needs a custom config UI.
|
|
20
|
+
- The main configuration form logic is in `src/app/widget-config/modal-widget-config/`. For unique widget config needs, you may add a new config component (e.g., `modal-widget-<name>-config`).
|
|
21
|
+
- Widget logic/UI and widget configuration are separate concepts that work together.
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## 4. Conventions & Patterns
|
|
26
|
+
- **Naming:**
|
|
27
|
+
- Use descriptive, camelCase names for variables and controls.
|
|
28
|
+
- Widget config properties match the widget’s function (e.g., `trueWindAngle`, `drift`).
|
|
29
|
+
- **Forms:**
|
|
30
|
+
- Use Angular Reactive Forms for all configuration UIs.
|
|
31
|
+
- Group related controls in form groups.
|
|
32
|
+
- **Theming:**
|
|
33
|
+
- Use SCSS mixins for light/dark themes.
|
|
34
|
+
- Theme mixins must be included in global or component styles.
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## 5. Development Workflow
|
|
39
|
+
- **Linting:**
|
|
40
|
+
- Run `npm run lint` before every commit (enforced with Husky pre-commit hook).
|
|
41
|
+
- **Testing:**
|
|
42
|
+
- _To be defined._
|
|
43
|
+
- **Build & Serve:**
|
|
44
|
+
- `npm run dev` for development server.
|
|
45
|
+
- `npm run build-dev` for development build.
|
|
46
|
+
- `npm run build-prod` for production build.
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## 6. Documentation & Comments
|
|
51
|
+
- **Document all custom validators and business rules.**
|
|
52
|
+
- **Update this file and the README with any major changes or new patterns.**
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
## 8. Core Service Summaries
|
|
58
|
+
All major services in `src/app/core/services/` are summarized below for Copilot and developer context. Each entry includes purpose, key methods/responsibilities, dependencies, and usage notes.
|
|
59
|
+
|
|
60
|
+
- **AppNetworkInitService (`app-initNetwork.service.ts`)**
|
|
61
|
+
- Purpose: Loads network services (Signal K connection, authentication, Storage Service) and retrieves configurations from the Signal K server and loaded it before app startup using Angular's `APP_INITIALIZER`.
|
|
62
|
+
- Key methods: `initNetworkServices()`, config loading, login management.
|
|
63
|
+
- Dependencies: SignalKConnectionService, AuthenticationService, StorageService, DataService, SignalKDeltaService.
|
|
64
|
+
- Usage: Ensures network, authentication, Storage Service and configuration are ready before app bootstraps.
|
|
65
|
+
|
|
66
|
+
- **AuthenticationService (`authentication.service.ts`)**
|
|
67
|
+
- Purpose: Handles user/device authentication with the Signal K server.
|
|
68
|
+
- Key methods: `login()`, `logout()`, token management, exposes `isLoggedIn$` observable.
|
|
69
|
+
- Dependencies: SignalKConnectionService, HttpClient.
|
|
70
|
+
|
|
71
|
+
- Purpose: Centralizes all app dialogs using Angular Material.
|
|
72
|
+
- Dependencies: MatDialog, Dialog components.
|
|
73
|
+
- Usage: Used throughout the app to open modals and dialogs for user interaction.
|
|
74
|
+
|
|
75
|
+
- **SignalKConnectionService (`signalk-connection.service.ts`)**
|
|
76
|
+
- Purpose: Manages the WebSocket connection to the Signal K server, including reconnect logic and status tracking.
|
|
77
|
+
- Key methods: `connect()`, `disconnect()`, status observables.
|
|
78
|
+
- Dependencies: WebSocket, AuthenticationService.
|
|
79
|
+
|
|
80
|
+
- **SignalKDeltaService (`signalk-delta.service.ts`)**
|
|
81
|
+
- Purpose: Handles real-time delta updates from Signal K, distributing data to widgets and services.
|
|
82
|
+
- Key methods: Delta subscription, data distribution.
|
|
83
|
+
- Dependencies: SignalKConnectionService, DataService.
|
|
84
|
+
|
|
85
|
+
- **DataService (`data.service.ts`)**
|
|
86
|
+
- Purpose: Central data provider for Signal K and other sources; handles subscriptions, value updates, and metadata management.
|
|
87
|
+
- Key methods: `subscribeToPath()`, `getValue()`, `getMetadata()`, data and metadata update distribution.
|
|
88
|
+
- Dependencies: SignalKDeltaService, StorageService.
|
|
89
|
+
|
|
90
|
+
- **AppService (`app-service.ts`)**
|
|
91
|
+
- Purpose: Centralizes app-wide utilities, notifications, and theme management.
|
|
92
|
+
- Key methods: Notification helpers, theme switching, app-level utilities.
|
|
93
|
+
- Dependencies: Angular core, theme and notification services.
|
|
94
|
+
|
|
95
|
+
- **UIEventService (`uiEvent.service.ts`)**
|
|
96
|
+
- Purpose: Manages UI events such as drag, fullscreen, wake lock, and hotkeys.
|
|
97
|
+
- Key methods: Event emitters, hotkey handlers.
|
|
98
|
+
- Dependencies: Angular core, browser APIs.
|
|
99
|
+
|
|
100
|
+
- **AppSettingsService (`app-settings.service.ts`)**
|
|
101
|
+
- Purpose: Manages persistent app settings, user preferences, and configuration storage.
|
|
102
|
+
- Key methods: `getSetting()`, `setSetting()`, config file management.
|
|
103
|
+
- Dependencies: StorageService.
|
|
104
|
+
|
|
105
|
+
- **StorageService (`storage.service.ts`)**
|
|
106
|
+
- Purpose: Provides persistent storage for app data, settings, and user preferences.
|
|
107
|
+
- Key methods: `getItem()`, `setItem()`, config file management.
|
|
108
|
+
- Dependencies: LocalStorage, IndexedDB, or similar.
|
|
109
|
+
|
|
110
|
+
- **NotificationsService (`notifications.service.ts`)**
|
|
111
|
+
- Key methods: Notification state management, audio/visual alerts, muting.
|
|
112
|
+
- Dependencies: AppSettingsService, DataService, SignalkRequestsService, Howler.
|
|
113
|
+
|
|
114
|
+
- **CanvasService (`canvas.service.ts`)**
|
|
115
|
+
- Purpose: Provides drawing and rendering utilities for widgets and dashboard components.
|
|
116
|
+
- Key methods: Canvas context helpers, drawing utilities.
|
|
117
|
+
- Dependencies: None (core Angular).
|
|
118
|
+
|
|
119
|
+
- **DashboardService (`dashboard.service.ts`)**
|
|
120
|
+
- Purpose: Handles dashboard layout, widget arrangement, and dashboard state.
|
|
121
|
+
- Key methods: Layout management, widget arrangement, dashboard state.
|
|
122
|
+
- Dependencies: StorageService, WidgetService.
|
|
123
|
+
|
|
124
|
+
- **DataSetService (`data-set.service.ts`)**
|
|
125
|
+
- Purpose: Manages data sets, including loading, saving, and updating widget data sources.
|
|
126
|
+
- Key methods: Data set CRUD, data source updates.
|
|
127
|
+
- Dependencies: DataService, StorageService.
|
|
128
|
+
|
|
129
|
+
- **SignalKPluginsService (`signalk-plugins.service.ts`)**
|
|
130
|
+
- Purpose: Manages Signal K plugin discovery, configuration, and state.
|
|
131
|
+
- Key methods: Plugin list management, config updates.
|
|
132
|
+
- Dependencies: SignalKConnectionService, DataService.
|
|
133
|
+
- Usage: Used to manage plugins and their configuration.
|
|
134
|
+
|
|
135
|
+
- **SignalKRequestsService (`signalk-requests.service.ts`)**
|
|
136
|
+
- Purpose: Handles requests to the Signal K server, such as PUT/POST operations and custom actions.
|
|
137
|
+
- Key methods: `sendRequest()`, custom action handlers.
|
|
138
|
+
- Dependencies: SignalKConnectionService, DataService.
|
|
139
|
+
|
|
140
|
+
- **TimersService (`timers.service.ts`)**
|
|
141
|
+
- Purpose: Centralized timer utility for app and widgets, supporting intervals, timeouts, and scheduling.
|
|
142
|
+
- Key methods: Timer creation, interval management.
|
|
143
|
+
- Dependencies: Angular core.
|
|
144
|
+
|
|
145
|
+
- **UnitsService (`units.service.ts`)**
|
|
146
|
+
- Purpose: Handles unit conversion and formatting for all displayed data.
|
|
147
|
+
- Key methods: `convert()`, `format()`, unit preference management.
|
|
148
|
+
- Dependencies: AppSettingsService.
|
|
149
|
+
|
|
150
|
+
- **WidgetService (`widget.service.ts`)**
|
|
151
|
+
- Purpose: Manages widget registration, configuration, and lifecycle.
|
|
152
|
+
- Key methods: Widget registration, config helpers, lifecycle management.
|
|
153
|
+
- Dependencies: DashboardService, DataService.
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## 9. Widget Structure, BaseWidgetComponent, and Signal K Zones
|
|
158
|
+
- All widgets must extend `BaseWidgetComponent` to inherit core data, config, and lifecycle logic.
|
|
159
|
+
- Handles:
|
|
160
|
+
- Data subscriptions via `DataService` (values and metadata).
|
|
161
|
+
- Unit conversion via `UnitsService`.
|
|
162
|
+
- Theme and app-wide utilities via `AppService`.
|
|
163
|
+
- Config validation and merging with defaults.
|
|
164
|
+
- Utility for formatting numbers with min/max and decimals.
|
|
165
|
+
- Abstract methods: `startWidget()` and `updateConfig(config)` must be implemented by each widget.
|
|
166
|
+
- Provides:
|
|
167
|
+
- `observeDataStream()` for subscribing to live data.
|
|
168
|
+
- `unsubscribeDataStream()` and `unsubscribeMetaStream()` for cleanup (call in `ngOnDestroy`).
|
|
169
|
+
- `formatWidgetNumberValue()` for consistent value formatting.
|
|
170
|
+
- `validateConfig()` to merge user config with defaults and prevent breaking changes.
|
|
171
|
+
- `zones$` observable for zone metadata (e.g., to highlight elements in widgets based on data state ie. zone state).
|
|
172
|
+
|
|
173
|
+
- Zones are a Signal K metadata concept that define value ranges for states like nominal, warning, alarm, and emergency.
|
|
174
|
+
- The `observeMetaStream()` method in `BaseWidgetComponent` subscribes to zones metadata for a widget's data path, making it available via the `zones$` observable.
|
|
175
|
+
|
|
176
|
+
- **Widget Path Configuration:**
|
|
177
|
+
- `isPathConfigurable` and `pathRequired` in `IWidgetPath` control UI and validation.
|
|
178
|
+
- If `pathRequired` is `true` or undefined, path is required and must be valid.
|
|
179
|
+
- If `pathRequired` is `false`, path is optional (can be empty or valid).
|
|
180
|
+
- Non-configurable paths are excluded from config UI and validation.
|
|
181
|
+
- **Custom Validators:**
|
|
182
|
+
- Path controls use a custom validator to enforce the above rules.
|
|
183
|
+
- No `Validators.required` is used for path controls; only the custom validator.
|
|
184
|
+
- **UI Feedback:**
|
|
185
|
+
- The UI uses Angular’s `@if` syntax to show “(optional)” and hints when appropriate.
|
|
186
|
+
- Error messages are shown for required and invalid paths.
|
|
187
|
+
**Signal K Metadata, Units & Value Conversion:**
|
|
188
|
+
- Signal K defines a schema with base SI units for all standard paths (e.g., meters, Celsius, Pascals). Plugins can add custom paths, but these are not in the schema and must provide their own metadata (especially units) or the path will be treated as unitless.
|
|
189
|
+
- Each data path may provide metadata such as units, display names, min/max, etc. This metadata is essential for context-aware UI, validation, and display hints.
|
|
190
|
+
- KIP uses the base SI units from metadata to map each path to a conversion group in the UnitsService. This enables conversion from the base SI unit to any supported display unit (e.g., meters to feet, Celsius to Fahrenheit) according to user preferences.
|
|
191
|
+
- The "Format" setting in KIP determines what display format or unit to apply to a value. If no metadata units are present, the value is treated as unitless and any format (or none) can be applied.
|
|
192
|
+
- The DataService provides access to both values and metadata for each path, supporting both value display and context-aware logic.
|
|
193
|
+
|
|
194
|
+
- **Widget Structure:**
|
|
195
|
+
- Each widget is an Angular component in `src/app/widgets/`, extending `BaseWidgetComponent`.
|
|
196
|
+
- Widget configuration is defined in `widgetProperties` (implements `IWidget`), with all config stored in `widgetProperties.config`.
|
|
197
|
+
- Widget config includes paths, display options, min/max, decimals, and more.
|
|
198
|
+
- All widget configuration logic/UI is handled in `src/app/widget-config/`.
|
|
199
|
+
|
|
200
|
+
- **Widget Creation Best Practices:**
|
|
201
|
+
- Always extend `BaseWidgetComponent` for new widgets.
|
|
202
|
+
- Implement `startWidget()` to initialize widget-specific logic.
|
|
203
|
+
- Implement `updateConfig(config)` to handle config changes.
|
|
204
|
+
- Use `observeDataStream()` to subscribe to data, and `observeMetaStream()` for zones/metadata.
|
|
205
|
+
- Use `UnitsService` for all value conversions and formatting.
|
|
206
|
+
- Store all widget state/config in `widgetProperties.config`.
|
|
207
|
+
- Clean up all subscriptions in `ngOnDestroy` using provided methods.
|
|
208
|
+
---
|
|
209
|
+
|
|
210
|
+
## 10. KIP Colors, Theming, and Widget Best Practices
|
|
211
|
+
|
|
212
|
+
- **KIP Color & Theming Concepts:**
|
|
213
|
+
- KIP uses a centralized theme system with color roles defined in SCSS and exposed to TypeScript via CSS variables and the `AppService`.
|
|
214
|
+
- Theme colors (e.g., `contrast`, `blue`, `zoneAlarm`, `background`, etc.) are defined in SCSS files (`styles.scss`, theme partials) and mapped to CSS variables (e.g., `--kip-blue-color`).
|
|
215
|
+
- The `AppService` provides a `cssThemeColorRoles$` observable and a `theme()` signal for accessing current theme colors in TypeScript.
|
|
216
|
+
- Theme switching (light, dark, night) is handled by toggling classes on `<body>` and updating CSS variables.
|
|
217
|
+
- All widgets should use theme colors for UI consistency and accessibility.
|
|
218
|
+
|
|
219
|
+
- **Best Practices for Using Colors & Theming in Widgets:**
|
|
220
|
+
- **TypeScript:**
|
|
221
|
+
- Access theme colors via `this.theme().<colorRole>` (e.g., `this.theme().zoneAlarm`, `this.theme().contrast`).
|
|
222
|
+
- Never hardcode color hex values in widget TypeScript; always use theme roles.
|
|
223
|
+
- For dynamic coloring (e.g., based on state/zones), use the correct theme role for each state (see `zoneAlarm`, `zoneWarn`, etc.).
|
|
224
|
+
- Use the color mapping pattern as in `getColors()` for supporting multiple color roles and dim/dimmer variants.
|
|
225
|
+
- When updating widget visuals (e.g., gauge, highlights), always update with theme colors to support live theme switching.
|
|
226
|
+
- **SCSS:**
|
|
227
|
+
- Use CSS variables (e.g., `var(--kip-blue-color)`) for all color assignments in widget/component styles.
|
|
228
|
+
- Do not use static hex codes; always reference a theme variable.
|
|
229
|
+
- For custom widget styles, define new CSS variables in the theme partials if needed, and use them in your SCSS.
|
|
230
|
+
- Use the `.light-theme`, `.night-theme`, and default (dark) selectors to override variables for each theme as needed.
|
|
231
|
+
- Use SCSS mixins for reusable style patterns and to support theme switching.
|
|
232
|
+
- **General:**
|
|
233
|
+
- Always test widgets in all themes (light, dark, night) to ensure colors are accessible and visually correct.
|
|
234
|
+
- Use theme roles for all UI elements, including backgrounds, borders, text, and highlights.
|
|
235
|
+
- For state-based coloring (e.g., alarms, warnings), use the corresponding zone color from the theme.
|
|
236
|
+
- Avoid inline styles for colors; prefer class-based or variable-based styling.
|
|
237
|
+
---
|
|
238
|
+
|
|
239
|
+
## 11. Additional Instructions & Cross-References
|
|
240
|
+
|
|
241
|
+
### **Related Instruction Files:**
|
|
242
|
+
- **README.md**: Project overview, setup instructions, and development guidelines
|
|
243
|
+
- **`.github/instructions/angular.instructions.md`**: Detailed Angular v20+ coding standards, component patterns, and framework-specific best practices
|
|
244
|
+
|
|
245
|
+
### **Instruction Hierarchy:**
|
|
246
|
+
1. **Primary**: This `COPILOT.md` file (KIP-specific project guidelines and architecture)
|
|
247
|
+
2. **Secondary**: `.github/instructions/angular.instructions.md` (Angular framework standards and modern patterns)
|
|
248
|
+
3. **Tertiary**: `README.md` (General project information and setup)
|
|
249
|
+
|
|
250
|
+
### **Usage Notes:**
|
|
251
|
+
- All Angular development should follow both this COPILOT.md file AND the angular.instructions.md guidelines
|
|
252
|
+
- When conflicts arise, KIP-specific guidelines in this file take precedence over general Angular patterns
|
|
253
|
+
- For widget development, prioritize the BaseWidgetComponent patterns described in this file
|
|
254
|
+
- For general Angular coding (components, services, forms, component), follow the modern Angular v20+ patterns in angular.instructions.md
|
|
255
|
+
|
|
256
|
+
---
|
|
257
|
+
|
package/README.md
CHANGED
|
@@ -161,3 +161,22 @@ Use the following tool and command line:
|
|
|
161
161
|
|
|
162
162
|
**Share**
|
|
163
163
|
Once done with your work, from your fork's working branch, make a GitHub pull request to have your code reviewed, merged and part of the next release.
|
|
164
|
+
|
|
165
|
+
## Development Instructions & Guidelines
|
|
166
|
+
|
|
167
|
+
For comprehensive development guidance, please refer to these instruction files:
|
|
168
|
+
|
|
169
|
+
### **Primary Instructions:**
|
|
170
|
+
- **[COPILOT.md](./COPILOT.md)**: Complete KIP project guidelines including architecture, services, widget development patterns, theming, and Signal K integration
|
|
171
|
+
- **[Angular Instructions](./.github/instructions/angular.instructions.md)**: Modern Angular v20+ coding standards, component patterns, and framework best practices
|
|
172
|
+
|
|
173
|
+
### **Development Workflow:**
|
|
174
|
+
1. **Start Here**: Read `COPILOT.md` for KIP-specific architecture and patterns
|
|
175
|
+
2. **Angular Standards**: Follow `.github/instructions/angular.instructions.md` for modern Angular development
|
|
176
|
+
3. **Setup & Build**: Use this README for project setup and build commands
|
|
177
|
+
|
|
178
|
+
### **Key Priorities:**
|
|
179
|
+
- **Widget Development**: Always extend `BaseWidgetComponent` (see COPILOT.md)
|
|
180
|
+
- **Angular Patterns**: Use signals, standalone components, and modern control flow
|
|
181
|
+
- **Theming**: Follow KIP's theme system for consistent UI
|
|
182
|
+
- **Code Quality**: Run `npm run lint` before commits (enforced by Husky)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mxtommy/kip",
|
|
3
|
-
"version": "3.3.0
|
|
3
|
+
"version": "3.3.0",
|
|
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": "^
|
|
49
|
-
"@angular/animations": "
|
|
50
|
-
"@angular/cdk": "
|
|
51
|
-
"@angular/cli": "^
|
|
52
|
-
"@angular/common": "
|
|
53
|
-
"@angular/compiler": "
|
|
54
|
-
"@angular/compiler-cli": "
|
|
55
|
-
"@angular/core": "
|
|
56
|
-
"@angular/forms": "
|
|
57
|
-
"@angular/language-service": "
|
|
58
|
-
"@angular/material": "
|
|
59
|
-
"@angular/platform-browser": "
|
|
60
|
-
"@angular/platform-browser-dynamic": "
|
|
61
|
-
"@angular/router": "
|
|
48
|
+
"@angular-devkit/build-angular": "^20.0.5",
|
|
49
|
+
"@angular/animations": "20.0.6",
|
|
50
|
+
"@angular/cdk": "20.0.5",
|
|
51
|
+
"@angular/cli": "^20.0.5",
|
|
52
|
+
"@angular/common": "20.0.6",
|
|
53
|
+
"@angular/compiler": "20.0.6",
|
|
54
|
+
"@angular/compiler-cli": "20.0.6",
|
|
55
|
+
"@angular/core": "20.0.6",
|
|
56
|
+
"@angular/forms": "20.0.6",
|
|
57
|
+
"@angular/language-service": "20.0.6",
|
|
58
|
+
"@angular/material": "20.0.5",
|
|
59
|
+
"@angular/platform-browser": "20.0.6",
|
|
60
|
+
"@angular/platform-browser-dynamic": "20.0.6",
|
|
61
|
+
"@angular/router": "20.0.6",
|
|
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",
|
|
@@ -91,9 +91,9 @@
|
|
|
91
91
|
"karma-jasmine": "~4.0.0",
|
|
92
92
|
"karma-jasmine-html-reporter": "^1.6.0",
|
|
93
93
|
"lodash-es": "^4.17.21",
|
|
94
|
-
"ng-packagr": "^
|
|
95
|
-
"ngx-markdown": "^
|
|
96
|
-
"ngx-resize-observer": "^3.
|
|
94
|
+
"ng-packagr": "^20.0.1",
|
|
95
|
+
"ngx-markdown": "^20.0.0",
|
|
96
|
+
"ngx-resize-observer": "^3.1.0",
|
|
97
97
|
"protractor": "~7.0.0",
|
|
98
98
|
"pwa-asset-generator": "^8.0.4",
|
|
99
99
|
"rxjs": "^7.5.7",
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
"screenfull": "^6.0.2",
|
|
102
102
|
"ts-node": "^8.10.2",
|
|
103
103
|
"tslib": "^2.6.2",
|
|
104
|
-
"typescript": "^5.8.
|
|
104
|
+
"typescript": "^5.8.3",
|
|
105
105
|
"zone.js": "~0.15.0"
|
|
106
106
|
}
|
|
107
107
|
}
|
|
@@ -583,32 +583,6 @@ maintained libraries used by this software which have their own
|
|
|
583
583
|
licenses; we recommend you read them, as their terms may differ from the
|
|
584
584
|
terms above.
|
|
585
585
|
|
|
586
|
-
--------------------------------------------------------------------------------
|
|
587
|
-
Package: @angular/core
|
|
588
|
-
License: "MIT"
|
|
589
|
-
|
|
590
|
-
The MIT License
|
|
591
|
-
|
|
592
|
-
Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
|
|
593
|
-
|
|
594
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
595
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
596
|
-
in the Software without restriction, including without limitation the rights
|
|
597
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
598
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
599
|
-
furnished to do so, subject to the following conditions:
|
|
600
|
-
|
|
601
|
-
The above copyright notice and this permission notice shall be included in
|
|
602
|
-
all copies or substantial portions of the Software.
|
|
603
|
-
|
|
604
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
605
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
606
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
607
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
608
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
609
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
610
|
-
THE SOFTWARE.
|
|
611
|
-
|
|
612
586
|
--------------------------------------------------------------------------------
|
|
613
587
|
Package: rxjs
|
|
614
588
|
License: "Apache-2.0"
|
|
@@ -832,6 +806,32 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
|
832
806
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
833
807
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
834
808
|
PERFORMANCE OF THIS SOFTWARE.
|
|
809
|
+
--------------------------------------------------------------------------------
|
|
810
|
+
Package: @angular/core
|
|
811
|
+
License: "MIT"
|
|
812
|
+
|
|
813
|
+
The MIT License
|
|
814
|
+
|
|
815
|
+
Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
|
|
816
|
+
|
|
817
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
818
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
819
|
+
in the Software without restriction, including without limitation the rights
|
|
820
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
821
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
822
|
+
furnished to do so, subject to the following conditions:
|
|
823
|
+
|
|
824
|
+
The above copyright notice and this permission notice shall be included in
|
|
825
|
+
all copies or substantial portions of the Software.
|
|
826
|
+
|
|
827
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
828
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
829
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
830
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
831
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
832
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
833
|
+
THE SOFTWARE.
|
|
834
|
+
|
|
835
835
|
--------------------------------------------------------------------------------
|
|
836
836
|
Package: @angular/common
|
|
837
837
|
License: "MIT"
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Aa as P,Da as d,Ea as O,Fb as S,Fe as q,Gb as m,Qa as c,Qe as K,Sd as j,Td as U,Te as J,Ud as y,We as w,Xd as B,Yb as x,Zb as f,_b as N,_e as tt,a as h,ad as X,af as et,dc as k,df as it,fc as u,ge as $,ha as r,ie as Z,kc as V,lb as E,lc as Y,m as p,mc as H,ne as Q,oe as W,pa as C,pe as v,ra as _,rd as G,sb as R,sc as g,se as b,ta as a,te as T,vc as z,wb as A,wc as F,xb as M,yb as L,za as I}from"./chunk-SFNSRKY4.js";var ht=["tooltip"],nt=20;var at=new _("mat-tooltip-scroll-strategy",{providedIn:"root",factory:()=>{let n=a(d);return()=>w(n,{scrollThrottle:nt})}});function dt(n){let rt=a(d);return()=>w(rt,{scrollThrottle:nt})}var ct={provide:at,deps:[],useFactory:dt};function pt(){return{showDelay:0,hideDelay:0,touchendHideDelay:1500}}var _t=new _("mat-tooltip-default-options",{providedIn:"root",factory:pt});var ot="tooltip-panel",st=U({passive:!0}),mt=8,ft=8,ut=24,gt=200,Ft=(()=>{class n{_elementRef=a(c);_ngZone=a(S);_platform=a(j);_ariaDescriber=a(Q);_focusMonitor=a(B);_dir=a(W);_injector=a(d);_viewContainerRef=a(R);_animationsDisabled=b();_defaultOptions=a(_t,{optional:!0});_overlayRef;_tooltipInstance;_overlayPanelClass;_portal;_position="below";_positionAtOrigin=!1;_disabled=!1;_tooltipClass;_viewInitialized=!1;_pointerExitEventsInitialized=!1;_tooltipComponent=yt;_viewportMargin=8;_currentPosition;_cssClassPrefix="mat-mdc";_ariaDescriptionPending;_dirSubscribed=!1;get position(){return this._position}set position(t){t!==this._position&&(this._position=t,this._overlayRef&&(this._updatePosition(this._overlayRef),this._tooltipInstance?.show(0),this._overlayRef.updatePosition()))}get positionAtOrigin(){return this._positionAtOrigin}set positionAtOrigin(t){this._positionAtOrigin=T(t),this._detach(),this._overlayRef=null}get disabled(){return this._disabled}set disabled(t){let e=T(t);this._disabled!==e&&(this._disabled=e,e?this.hide(0):this._setupPointerEnterEventsIfNeeded(),this._syncAriaDescription(this.message))}get showDelay(){return this._showDelay}set showDelay(t){this._showDelay=y(t)}_showDelay;get hideDelay(){return this._hideDelay}set hideDelay(t){this._hideDelay=y(t),this._tooltipInstance&&(this._tooltipInstance._mouseLeaveHideDelay=this._hideDelay)}_hideDelay;touchGestures="auto";get message(){return this._message}set message(t){let e=this._message;this._message=t!=null?String(t).trim():"",!this._message&&this._isTooltipVisible()?this.hide(0):(this._setupPointerEnterEventsIfNeeded(),this._updateTooltipMessage()),this._syncAriaDescription(e)}_message="";get tooltipClass(){return this._tooltipClass}set tooltipClass(t){this._tooltipClass=t,this._tooltipInstance&&this._setTooltipClass(this._tooltipClass)}_passiveListeners=[];_touchstartTimeout=null;_destroyed=new p;_isDestroyed=!1;constructor(){let t=this._defaultOptions;t&&(this._showDelay=t.showDelay,this._hideDelay=t.hideDelay,t.position&&(this.position=t.position),t.positionAtOrigin&&(this.positionAtOrigin=t.positionAtOrigin),t.touchGestures&&(this.touchGestures=t.touchGestures),t.tooltipClass&&(this.tooltipClass=t.tooltipClass)),this._viewportMargin=mt}ngAfterViewInit(){this._viewInitialized=!0,this._setupPointerEnterEventsIfNeeded(),this._focusMonitor.monitor(this._elementRef).pipe(r(this._destroyed)).subscribe(t=>{t?t==="keyboard"&&this._ngZone.run(()=>this.show()):this._ngZone.run(()=>this.hide(0))})}ngOnDestroy(){let t=this._elementRef.nativeElement;this._touchstartTimeout&&clearTimeout(this._touchstartTimeout),this._overlayRef&&(this._overlayRef.dispose(),this._tooltipInstance=null),this._passiveListeners.forEach(([e,i])=>{t.removeEventListener(e,i,st)}),this._passiveListeners.length=0,this._destroyed.next(),this._destroyed.complete(),this._isDestroyed=!0,this._ariaDescriber.removeDescription(t,this.message,"tooltip"),this._focusMonitor.stopMonitoring(t)}show(t=this.showDelay,e){if(this.disabled||!this.message||this._isTooltipVisible()){this._tooltipInstance?._cancelPendingAnimations();return}let i=this._createOverlay(e);this._detach(),this._portal=this._portal||new q(this._tooltipComponent,this._viewContainerRef);let o=this._tooltipInstance=i.attach(this._portal).instance;o._triggerElement=this._elementRef.nativeElement,o._mouseLeaveHideDelay=this._hideDelay,o.afterHidden().pipe(r(this._destroyed)).subscribe(()=>this._detach()),this._setTooltipClass(this._tooltipClass),this._updateTooltipMessage(),o.show(t)}hide(t=this.hideDelay){let e=this._tooltipInstance;e&&(e.isVisible()?e.hide(t):(e._cancelPendingAnimations(),this._detach()))}toggle(t){this._isTooltipVisible()?this.hide():this.show(void 0,t)}_isTooltipVisible(){return!!this._tooltipInstance&&this._tooltipInstance.isVisible()}_createOverlay(t){if(this._overlayRef){let s=this._overlayRef.getConfig().positionStrategy;if((!this.positionAtOrigin||!t)&&s._origin instanceof c)return this._overlayRef;this._detach()}let e=this._injector.get(K).getAncestorScrollContainers(this._elementRef),i=`${this._cssClassPrefix}-${ot}`,o=tt(this._injector,this.positionAtOrigin?t||this._elementRef:this._elementRef).withTransformOriginOn(`.${this._cssClassPrefix}-tooltip`).withFlexibleDimensions(!1).withViewportMargin(this._viewportMargin).withScrollableContainers(e);return o.positionChanges.pipe(r(this._destroyed)).subscribe(s=>{this._updateCurrentPositionClass(s.connectionPair),this._tooltipInstance&&s.scrollableViewProperties.isOverlayClipped&&this._tooltipInstance.isVisible()&&this._ngZone.run(()=>this.hide(0))}),this._overlayRef=et(this._injector,{direction:this._dir,positionStrategy:o,panelClass:this._overlayPanelClass?[...this._overlayPanelClass,i]:i,scrollStrategy:this._injector.get(at)(),disableAnimations:this._animationsDisabled}),this._updatePosition(this._overlayRef),this._overlayRef.detachments().pipe(r(this._destroyed)).subscribe(()=>this._detach()),this._overlayRef.outsidePointerEvents().pipe(r(this._destroyed)).subscribe(()=>this._tooltipInstance?._handleBodyInteraction()),this._overlayRef.keydownEvents().pipe(r(this._destroyed)).subscribe(s=>{this._isTooltipVisible()&&s.keyCode===27&&!Z(s)&&(s.preventDefault(),s.stopPropagation(),this._ngZone.run(()=>this.hide(0)))}),this._defaultOptions?.disableTooltipInteractivity&&this._overlayRef.addPanelClass(`${this._cssClassPrefix}-tooltip-panel-non-interactive`),this._dirSubscribed||(this._dirSubscribed=!0,this._dir.change.pipe(r(this._destroyed)).subscribe(()=>{this._overlayRef&&this._updatePosition(this._overlayRef)})),this._overlayRef}_detach(){this._overlayRef&&this._overlayRef.hasAttached()&&this._overlayRef.detach(),this._tooltipInstance=null}_updatePosition(t){let e=t.getConfig().positionStrategy,i=this._getOrigin(),o=this._getOverlayPosition();e.withPositions([this._addOffset(h(h({},i.main),o.main)),this._addOffset(h(h({},i.fallback),o.fallback))])}_addOffset(t){let e=ft,i=!this._dir||this._dir.value=="ltr";return t.originY==="top"?t.offsetY=-e:t.originY==="bottom"?t.offsetY=e:t.originX==="start"?t.offsetX=i?-e:e:t.originX==="end"&&(t.offsetX=i?e:-e),t}_getOrigin(){let t=!this._dir||this._dir.value=="ltr",e=this.position,i;e=="above"||e=="below"?i={originX:"center",originY:e=="above"?"top":"bottom"}:e=="before"||e=="left"&&t||e=="right"&&!t?i={originX:"start",originY:"center"}:(e=="after"||e=="right"&&t||e=="left"&&!t)&&(i={originX:"end",originY:"center"});let{x:o,y:s}=this._invertPosition(i.originX,i.originY);return{main:i,fallback:{originX:o,originY:s}}}_getOverlayPosition(){let t=!this._dir||this._dir.value=="ltr",e=this.position,i;e=="above"?i={overlayX:"center",overlayY:"bottom"}:e=="below"?i={overlayX:"center",overlayY:"top"}:e=="before"||e=="left"&&t||e=="right"&&!t?i={overlayX:"end",overlayY:"center"}:(e=="after"||e=="right"&&t||e=="left"&&!t)&&(i={overlayX:"start",overlayY:"center"});let{x:o,y:s}=this._invertPosition(i.overlayX,i.overlayY);return{main:i,fallback:{overlayX:o,overlayY:s}}}_updateTooltipMessage(){this._tooltipInstance&&(this._tooltipInstance.message=this.message,this._tooltipInstance._markForCheck(),m(()=>{this._tooltipInstance&&this._overlayRef.updatePosition()},{injector:this._injector}))}_setTooltipClass(t){this._tooltipInstance&&(this._tooltipInstance.tooltipClass=t,this._tooltipInstance._markForCheck())}_invertPosition(t,e){return this.position==="above"||this.position==="below"?e==="top"?e="bottom":e==="bottom"&&(e="top"):t==="end"?t="start":t==="start"&&(t="end"),{x:t,y:e}}_updateCurrentPositionClass(t){let{overlayY:e,originX:i,originY:o}=t,s;if(e==="center"?this._dir&&this._dir.value==="rtl"?s=i==="end"?"left":"right":s=i==="start"?"left":"right":s=e==="bottom"&&o==="top"?"above":"below",s!==this._currentPosition){let l=this._overlayRef;if(l){let D=`${this._cssClassPrefix}-${ot}-`;l.removePanelClass(D+this._currentPosition),l.addPanelClass(D+s)}this._currentPosition=s}}_setupPointerEnterEventsIfNeeded(){this._disabled||!this.message||!this._viewInitialized||this._passiveListeners.length||(this._platformSupportsMouseEvents()?this._passiveListeners.push(["mouseenter",t=>{this._setupPointerExitEventsIfNeeded();let e;t.x!==void 0&&t.y!==void 0&&(e=t),this.show(void 0,e)}]):this.touchGestures!=="off"&&(this._disableNativeGesturesIfNecessary(),this._passiveListeners.push(["touchstart",t=>{let e=t.targetTouches?.[0],i=e?{x:e.clientX,y:e.clientY}:void 0;this._setupPointerExitEventsIfNeeded(),this._touchstartTimeout&&clearTimeout(this._touchstartTimeout);let o=500;this._touchstartTimeout=setTimeout(()=>{this._touchstartTimeout=null,this.show(void 0,i)},this._defaultOptions?.touchLongPressShowDelay??o)}])),this._addListeners(this._passiveListeners))}_setupPointerExitEventsIfNeeded(){if(this._pointerExitEventsInitialized)return;this._pointerExitEventsInitialized=!0;let t=[];if(this._platformSupportsMouseEvents())t.push(["mouseleave",e=>{let i=e.relatedTarget;(!i||!this._overlayRef?.overlayElement.contains(i))&&this.hide()}],["wheel",e=>this._wheelListener(e)]);else if(this.touchGestures!=="off"){this._disableNativeGesturesIfNecessary();let e=()=>{this._touchstartTimeout&&clearTimeout(this._touchstartTimeout),this.hide(this._defaultOptions?.touchendHideDelay)};t.push(["touchend",e],["touchcancel",e])}this._addListeners(t),this._passiveListeners.push(...t)}_addListeners(t){t.forEach(([e,i])=>{this._elementRef.nativeElement.addEventListener(e,i,st)})}_platformSupportsMouseEvents(){return!this._platform.IOS&&!this._platform.ANDROID}_wheelListener(t){if(this._isTooltipVisible()){let e=this._injector.get(O).elementFromPoint(t.clientX,t.clientY),i=this._elementRef.nativeElement;e!==i&&!i.contains(e)&&this.hide()}}_disableNativeGesturesIfNecessary(){let t=this.touchGestures;if(t!=="off"){let e=this._elementRef.nativeElement,i=e.style;(t==="on"||e.nodeName!=="INPUT"&&e.nodeName!=="TEXTAREA")&&(i.userSelect=i.msUserSelect=i.webkitUserSelect=i.MozUserSelect="none"),(t==="on"||!e.draggable)&&(i.webkitUserDrag="none"),i.touchAction="none",i.webkitTapHighlightColor="transparent"}}_syncAriaDescription(t){this._ariaDescriptionPending||(this._ariaDescriptionPending=!0,this._ariaDescriber.removeDescription(this._elementRef.nativeElement,t,"tooltip"),this._isDestroyed||m({write:()=>{this._ariaDescriptionPending=!1,this.message&&!this.disabled&&this._ariaDescriber.describe(this._elementRef.nativeElement,this.message,"tooltip")}},{injector:this._injector}))}static \u0275fac=function(e){return new(e||n)};static \u0275dir=L({type:n,selectors:[["","matTooltip",""]],hostAttrs:[1,"mat-mdc-tooltip-trigger"],hostVars:2,hostBindings:function(e,i){e&2&&g("mat-mdc-tooltip-disabled",i.disabled)},inputs:{position:[0,"matTooltipPosition","position"],positionAtOrigin:[0,"matTooltipPositionAtOrigin","positionAtOrigin"],disabled:[0,"matTooltipDisabled","disabled"],showDelay:[0,"matTooltipShowDelay","showDelay"],hideDelay:[0,"matTooltipHideDelay","hideDelay"],touchGestures:[0,"matTooltipTouchGestures","touchGestures"],message:[0,"matTooltip","message"],tooltipClass:[0,"matTooltipClass","tooltipClass"]},exportAs:["matTooltip"]})}return n})(),yt=(()=>{class n{_changeDetectorRef=a(X);_elementRef=a(c);_isMultiline=!1;message;tooltipClass;_showTimeoutId;_hideTimeoutId;_triggerElement;_mouseLeaveHideDelay;_animationsDisabled=b();_tooltip;_closeOnInteraction=!1;_isVisible=!1;_onHide=new p;_showAnimation="mat-mdc-tooltip-show";_hideAnimation="mat-mdc-tooltip-hide";constructor(){}show(t){this._hideTimeoutId!=null&&clearTimeout(this._hideTimeoutId),this._showTimeoutId=setTimeout(()=>{this._toggleVisibility(!0),this._showTimeoutId=void 0},t)}hide(t){this._showTimeoutId!=null&&clearTimeout(this._showTimeoutId),this._hideTimeoutId=setTimeout(()=>{this._toggleVisibility(!1),this._hideTimeoutId=void 0},t)}afterHidden(){return this._onHide}isVisible(){return this._isVisible}ngOnDestroy(){this._cancelPendingAnimations(),this._onHide.complete(),this._triggerElement=null}_handleBodyInteraction(){this._closeOnInteraction&&this.hide(0)}_markForCheck(){this._changeDetectorRef.markForCheck()}_handleMouseLeave({relatedTarget:t}){(!t||!this._triggerElement.contains(t))&&(this.isVisible()?this.hide(this._mouseLeaveHideDelay):this._finalizeAnimation(!1))}_onShow(){this._isMultiline=this._isTooltipMultiline(),this._markForCheck()}_isTooltipMultiline(){let t=this._elementRef.nativeElement.getBoundingClientRect();return t.height>ut&&t.width>=gt}_handleAnimationEnd({animationName:t}){(t===this._showAnimation||t===this._hideAnimation)&&this._finalizeAnimation(t===this._showAnimation)}_cancelPendingAnimations(){this._showTimeoutId!=null&&clearTimeout(this._showTimeoutId),this._hideTimeoutId!=null&&clearTimeout(this._hideTimeoutId),this._showTimeoutId=this._hideTimeoutId=void 0}_finalizeAnimation(t){t?this._closeOnInteraction=!0:this.isVisible()||this._onHide.next()}_toggleVisibility(t){let e=this._tooltip.nativeElement,i=this._showAnimation,o=this._hideAnimation;if(e.classList.remove(t?o:i),e.classList.add(t?i:o),this._isVisible!==t&&(this._isVisible=t,this._changeDetectorRef.markForCheck()),t&&!this._animationsDisabled&&typeof getComputedStyle=="function"){let s=getComputedStyle(e);(s.getPropertyValue("animation-duration")==="0s"||s.getPropertyValue("animation-name")==="none")&&(this._animationsDisabled=!0)}t&&this._onShow(),this._animationsDisabled&&(e.classList.add("_mat-animation-noopable"),this._finalizeAnimation(t))}static \u0275fac=function(e){return new(e||n)};static \u0275cmp=A({type:n,selectors:[["mat-tooltip-component"]],viewQuery:function(e,i){if(e&1&&V(ht,7),e&2){let o;Y(o=H())&&(i._tooltip=o.first)}},hostAttrs:["aria-hidden","true"],hostBindings:function(e,i){e&1&&u("mouseleave",function(s){return i._handleMouseLeave(s)})},decls:4,vars:4,consts:[["tooltip",""],[1,"mdc-tooltip","mat-mdc-tooltip",3,"animationend","ngClass"],[1,"mat-mdc-tooltip-surface","mdc-tooltip__surface"]],template:function(e,i){if(e&1){let o=k();f(0,"div",1,0),u("animationend",function(l){return I(o),P(i._handleAnimationEnd(l))}),f(2,"div",2),z(3),N()()}e&2&&(g("mdc-tooltip--multiline",i._isMultiline),x("ngClass",i.tooltipClass),E(3),F(i.message))},dependencies:[G],styles:[`.mat-mdc-tooltip{position:relative;transform:scale(0);display:inline-flex}.mat-mdc-tooltip::before{content:"";top:0;right:0;bottom:0;left:0;z-index:-1;position:absolute}.mat-mdc-tooltip-panel-below .mat-mdc-tooltip::before{top:-8px}.mat-mdc-tooltip-panel-above .mat-mdc-tooltip::before{bottom:-8px}.mat-mdc-tooltip-panel-right .mat-mdc-tooltip::before{left:-8px}.mat-mdc-tooltip-panel-left .mat-mdc-tooltip::before{right:-8px}.mat-mdc-tooltip._mat-animation-noopable{animation:none;transform:scale(1)}.mat-mdc-tooltip-surface{word-break:normal;overflow-wrap:anywhere;padding:4px 8px;min-width:40px;max-width:200px;min-height:24px;max-height:40vh;box-sizing:border-box;overflow:hidden;text-align:center;will-change:transform,opacity;background-color:var(--mat-tooltip-container-color, var(--mat-sys-inverse-surface));color:var(--mat-tooltip-supporting-text-color, var(--mat-sys-inverse-on-surface));border-radius:var(--mat-tooltip-container-shape, var(--mat-sys-corner-extra-small));font-family:var(--mat-tooltip-supporting-text-font, var(--mat-sys-body-small-font));font-size:var(--mat-tooltip-supporting-text-size, var(--mat-sys-body-small-size));font-weight:var(--mat-tooltip-supporting-text-weight, var(--mat-sys-body-small-weight));line-height:var(--mat-tooltip-supporting-text-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-tooltip-supporting-text-tracking, var(--mat-sys-body-small-tracking))}.mat-mdc-tooltip-surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:"";pointer-events:none}.mdc-tooltip--multiline .mat-mdc-tooltip-surface{text-align:left}[dir=rtl] .mdc-tooltip--multiline .mat-mdc-tooltip-surface{text-align:right}.mat-mdc-tooltip-panel{line-height:normal}.mat-mdc-tooltip-panel.mat-mdc-tooltip-panel-non-interactive{pointer-events:none}@keyframes mat-mdc-tooltip-show{0%{opacity:0;transform:scale(0.8)}100%{opacity:1;transform:scale(1)}}@keyframes mat-mdc-tooltip-hide{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.8)}}.mat-mdc-tooltip-show{animation:mat-mdc-tooltip-show 150ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-mdc-tooltip-hide{animation:mat-mdc-tooltip-hide 75ms cubic-bezier(0.4, 0, 1, 1) forwards}
|
|
2
|
+
`],encapsulation:2,changeDetection:0})}return n})(),Xt=(()=>{class n{static \u0275fac=function(e){return new(e||n)};static \u0275mod=M({type:n});static \u0275inj=C({providers:[ct],imports:[$,it,v,v,J]})}return n})();export{_t as a,Ft as b,Xt as c};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{d as T,e as U,h as F,i as O,j as A,k as P}from"./chunk-S3ZVIKLY.js";import{a as H}from"./chunk-7MAW5JUV.js";import{B as K,q as j,r as k,x as z}from"./chunk-ENKPORJ2.js";import{$b as g,Aa as p,Ac as f,Bc as M,Be as V,Bf as G,Cc as C,Ef as Y,Jc as _,Sb as S,Tb as x,Yb as d,Zb as e,_b as t,dc as b,fc as v,ff as L,gc as D,kf as N,lb as a,lf as W,of as B,qc as h,rf as R,sf as q,ta as c,vc as n,wb as y,wc as E,xc as I,za as m}from"./chunk-SFNSRKY4.js";var J=()=>({standalone:!1});function Q(o,X){if(o&1&&(e(0,"div",3),g(1,"i",10),n(2),t()),o&2){let u=D();a(2),I(" ",u.data.error," ")}}var de=(()=>{class o{dialogRef=c(T);data=c(U);titleDialog="Sign in to Signal K";saveCredential(){this.data.error=null,this.dialogRef.close(this.data)}static \u0275fac=function(s){return new(s||o)};static \u0275cmp=y({type:o,selectors:[["app-modal-user-credential"]],decls:26,vars:10,consts:[["login","ngForm"],["name","login",3,"ngSubmit"],["mat-dialog-title",""],[1,"errorMsgBox"],[1,"login-grid"],[1,"userLoginInput"],["type","text","autocomplete","username","id","username","matInput","","placeholder","User ID","name","username","required","",3,"ngModelChange","ngModel","ngModelOptions"],["type","password","autocomplete","current-password","id","current-password","matInput","","placeholder","Password","name","current-password","required","",3,"ngModelChange","ngModel","ngModelOptions"],["mat-flat-button","","type","button",3,"mat-dialog-close"],["mat-flat-button","","type","submit",3,"disabled"],["aria-hidden","true",1,"fa-solid","fa-times-circle",2,"color","red","padding-right","5px"]],template:function(s,i){if(s&1){let l=b();e(0,"form",1,0),v("ngSubmit",function(){return m(l),p(i.saveCredential())}),e(2,"span",2),n(3),t(),e(4,"mat-dialog-content"),S(5,Q,3,1,"div",3),g(6,"br"),e(7,"div",4)(8,"mat-form-field",5)(9,"mat-label"),n(10,"User ID"),t(),e(11,"input",6),C("ngModelChange",function(r){return m(l),M(i.data.user,r)||(i.data.user=r),p(r)}),t(),e(12,"mat-error"),n(13," You must enter a User ID value "),t()(),e(14,"mat-form-field",5)(15,"mat-label"),n(16,"Password"),t(),e(17,"input",7),C("ngModelChange",function(r){return m(l),M(i.data.password,r)||(i.data.password=r),p(r)}),t(),e(18,"mat-error"),n(19," You must enter a password value "),t()()()(),g(20,"mat-divider"),e(21,"mat-dialog-actions")(22,"button",8),n(23,"Cancel"),t(),e(24,"button",9),n(25,"Sign in"),t()()()}if(s&2){let l=h(1);a(3),E(i.titleDialog),a(2),x(i.data.error?5:-1),a(6),f("ngModel",i.data.user),d("ngModelOptions",_(8,J)),a(6),f("ngModel",i.data.password),d("ngModelOptions",_(9,J)),a(5),d("mat-dialog-close",!1),a(2),d("disabled",!l.valid)}},dependencies:[Y,q,L,N,W,G,R,B,O,A,z,j,K,k,H,P,V,F],styles:[".errorMsgBox[_ngcontent-%COMP%]{background-color:#fff8dc;color:#2f4f4f;display:flex;padding:5px;font-family:Arial,Times,serif;font-size:14px}.login-grid[_ngcontent-%COMP%]{display:grid;gap:10px;padding-left:10px;padding-right:10px}.userLoginInput[_ngcontent-%COMP%]{margin-bottom:10px}"]})}return o})();export{de as a};
|
|
@@ -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-GCRU2MQN.js";import{Ee as f,Yc as c,Zb as a,_b as n,fc as s,lb as r,ta as l,vc as i,wb as m,wc as d,ze as u}from"./chunk-SFNSRKY4.js";var w=(()=>{class e{pageTitle=c();_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&&(r(2),d(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(--mat-dialog-subhead-color, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)));font-family:var(--mat-dialog-subhead-font, var(--mat-sys-headline-small-font, inherit));line-height:var(--mat-dialog-subhead-line-height, var(--mat-sys-headline-small-line-height, 1.5rem));font-size:var(--mat-dialog-subhead-size, var(--mat-sys-headline-small-size, 1rem));font-weight:var(--mat-dialog-subhead-weight, var(--mat-sys-headline-small-weight, 400));letter-spacing:var(--mat-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};
|