@mxtommy/kip 3.0.0-beta.21 → 3.0.0-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mxtommy/kip",
-  "version": "3.0.0-beta.21",
+  "version": "3.0.0-beta.22",
   "description": "An advanced and versatile marine instrumentation package to display Signal K data.",
   "license": "MIT",
   "author": {

package/public/main.js

@@ -123933,120 +123933,100 @@ var WidgetSimpleLinearComponent = class _WidgetSimpleLinearComponent extends Bas
 function WidgetTutorialComponent_Conditional_2_Template(rf, ctx) {
   if (rf & 1) {
     const _r1 = \u0275\u0275getCurrentView();
-    \u0275\u0275elementStart(0, "h5");
-    \u0275\u0275text(1, "Welcome to KIP");
+    \u0275\u0275elementStart(0, "h3");
+    \u0275\u0275text(1, "Getting Started");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(2, "h6");
-    \u0275\u0275text(3, "Gestures");
+    \u0275\u0275elementStart(2, "p");
+    \u0275\u0275text(3, "Welcome to KIP! Here are some basic gestures to help you navigate the application:");
     \u0275\u0275elementEnd();
     \u0275\u0275elementStart(4, "ul")(5, "li")(6, "strong");
-    \u0275\u0275text(7, "Swipe up / down");
+    \u0275\u0275text(7, "Swipe up/down");
     \u0275\u0275elementEnd();
-    \u0275\u0275text(8, " to cycle trough dashboards (Only one dashboard is present by default)");
+    \u0275\u0275text(8, " to cycle through dashboards (Only one dashboard is present by default)");
     \u0275\u0275elementEnd();
     \u0275\u0275elementStart(9, "li")(10, "strong");
-    \u0275\u0275text(11, "Swipe right");
+    \u0275\u0275text(11, "Swipe left");
     \u0275\u0275elementEnd();
     \u0275\u0275text(12, " to access the actions menu");
     \u0275\u0275elementEnd();
     \u0275\u0275elementStart(13, "li")(14, "strong");
-    \u0275\u0275text(15, "Swipe left");
+    \u0275\u0275text(15, "Swipe right");
     \u0275\u0275elementEnd();
     \u0275\u0275text(16, " to access the notifications menu");
     \u0275\u0275elementEnd()();
     \u0275\u0275elementStart(17, "h6");
-    \u0275\u0275text(18, "Getting Started");
+    \u0275\u0275text(18, "Load Demonstration Dashboards");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(19, "ul")(20, "li");
-    \u0275\u0275text(21, "Load Live Demo ");
-    \u0275\u0275elementStart(22, "p");
-    \u0275\u0275text(23, "To dive right in and see what KIP can do! Load the demo configuration with simulated data from demo.signalk.org. Note that an internet connection is required.");
+    \u0275\u0275elementStart(19, "p");
+    \u0275\u0275text(20, " Try out the sample Dashboard with simulated data from demo.signalk.org (");
+    \u0275\u0275elementStart(21, "i");
+    \u0275\u0275text(22, "internet connection is required to receive data");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(24, "button", 2);
-    \u0275\u0275listener("click", function WidgetTutorialComponent_Conditional_2_Template_button_click_24_listener() {
+    \u0275\u0275text(23, "). ");
+    \u0275\u0275element(24, "br");
+    \u0275\u0275elementStart(25, "button", 2);
+    \u0275\u0275listener("click", function WidgetTutorialComponent_Conditional_2_Template_button_click_25_listener() {
       \u0275\u0275restoreView(_r1);
       const ctx_r1 = \u0275\u0275nextContext();
       return \u0275\u0275resetView(ctx_r1.loadDemoConfig());
     });
-    \u0275\u0275text(25, "Load Demo");
-    \u0275\u0275elementEnd();
-    \u0275\u0275element(26, "br")(27, "br");
-    \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(28, "li");
-    \u0275\u0275text(29, "Connect to a Signal K server, then start configuring widgets ");
-    \u0275\u0275elementStart(30, "p");
-    \u0275\u0275text(31, ` Configure KIP's Signal K server URL connection and connect to receive data. Use the "Set Sign In credentials" button to authenticate to the server with a pre existing Signal K user/password. This setting also tells KIP to save the widget configuration on the Signal K server under your user profile, so your widget configuration is shared by all devices that you log in from. See `);
-    \u0275\u0275elementStart(32, "a", 3);
-    \u0275\u0275text(33, "Configuration Management Help");
-    \u0275\u0275elementEnd();
-    \u0275\u0275text(34, " for more instructions. ");
-    \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(35, "p");
-    \u0275\u0275text(36, "Swipe right to open the Actions menu and hit the Edit dashboard button in the upper right hand corner. ");
-    \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(37, "p");
-    \u0275\u0275text(38, "You can also add more dashboards using the Dashboards option from the Actions menu. Dashboards can be reordered, duplicated and renamed using Drag & Drop and Long Press actions menu.");
-    \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(39, "button", 4);
-    \u0275\u0275text(40, "Connectivity settings");
-    \u0275\u0275elementEnd();
-    \u0275\u0275element(41, "br");
+    \u0275\u0275text(26, "Load Demo");
     \u0275\u0275elementEnd()();
-    \u0275\u0275elementStart(42, "h6");
-    \u0275\u0275text(43, "Start editing dashboards");
+    \u0275\u0275elementStart(27, "h6");
+    \u0275\u0275text(28, "Create Your Own Layout");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(44, "p");
-    \u0275\u0275text(45, ' Dashboards are "Locked" by default. This is to prevent accidental touch screens interaction from changing anything. To edit, add, remove and configure widgets in dashboards, you first need to access the Actions menu by swiping left and hit the edit dashboard button in the upper right hand corner. Go Ahead try it now! ');
+    \u0275\u0275elementStart(29, "p");
+    \u0275\u0275text(30, " First, configure Signal K server authentication (");
+    \u0275\u0275elementStart(31, "i");
+    \u0275\u0275text(32, "a pre-existing Signal K server user/password is required");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(46, "p");
-    \u0275\u0275text(47, "Once you are editing a dashboard, you can:");
+    \u0275\u0275text(33, '). Swipe left to open the Actions menu and hit Settings, then the "Set Credential" button. ');
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(48, "ol")(49, "li");
-    \u0275\u0275text(50, "Touch and Drag to move widgets");
+    \u0275\u0275elementStart(34, "p");
+    \u0275\u0275text(35, ' Dashboards (individual layout pages) are "Locked" by default. This is to prevent accidental modifications. Edit the dashboard by swiping left to open the Actions menu and hit the bottom unlock button. You can later add and manage dashboards using the Dashboards option from the Actions menu. ');
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(51, "li");
-    \u0275\u0275text(52, "Drag the corners and sides to resize widgets");
-    \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(53, "li");
-    \u0275\u0275text(54, "Double Tap on a widget to configure it");
-    \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(55, "li");
-    \u0275\u0275text(56, "Long Press on a widget to access additional options such as delete amd duplicate");
+    \u0275\u0275elementStart(36, "p")(37, "strong");
+    \u0275\u0275text(38, "Try editing the Dashboard now to receive further instructions!");
     \u0275\u0275elementEnd()();
   }
 }
 function WidgetTutorialComponent_Conditional_3_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "h5");
-    \u0275\u0275text(1, "Editing Dashboard Layouts");
+    \u0275\u0275elementStart(0, "h6");
+    \u0275\u0275text(1, "Build Your Layout");
     \u0275\u0275elementEnd();
     \u0275\u0275elementStart(2, "p");
-    \u0275\u0275text(3, " Possible gesture and actions: ");
+    \u0275\u0275text(3, " First, resize this Tutorial widget using the now visible dashed borders so it does not take up all the screen. Then, to add a widget, in an empty dashboard area, press and hold. This will open the widget selection menu. Here you can choose from a variety of widgets. ");
     \u0275\u0275elementEnd();
     \u0275\u0275elementStart(4, "p");
-    \u0275\u0275text(5, " From the left editing menu you can: ");
+    \u0275\u0275text(5, "To manage widgets, you can:");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(6, "ol")(7, "li");
-    \u0275\u0275text(8, "Filter and add widgets");
+    \u0275\u0275elementStart(6, "ul")(7, "li")(8, "strong");
+    \u0275\u0275text(9, "Touch and drag");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(9, "li");
-    \u0275\u0275text(10, "Exit the dashboard edit mode using the X button");
-    \u0275\u0275elementEnd()();
-    \u0275\u0275elementStart(11, "p");
-    \u0275\u0275text(12, " With the widgets themselves you can: ");
+    \u0275\u0275text(10, " to move widgets");
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(11, "li")(12, "strong");
+    \u0275\u0275text(13, "Drag the corners and sides");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(13, "ol")(14, "li");
-    \u0275\u0275text(15, "Drag the widget to change it's position.");
+    \u0275\u0275text(14, " to resize widgets");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(16, "li");
-    \u0275\u0275text(17, "Use the widget corners handles to change its size.");
+    \u0275\u0275elementStart(15, "li")(16, "strong");
+    \u0275\u0275text(17, "Double tap");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(18, "li");
-    \u0275\u0275text(19, "Double tap/double click a widget to access its configuration options");
+    \u0275\u0275text(18, " on a widget to configure it");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(20, "li");
-    \u0275\u0275text(21, "Long press a widget access additional widget operations such as delete and duplicate");
+    \u0275\u0275elementStart(19, "li")(20, "strong");
+    \u0275\u0275text(21, "Long press");
+    \u0275\u0275elementEnd();
+    \u0275\u0275text(22, " on a widget to delete or duplicate widgets");
     \u0275\u0275elementEnd()();
+    \u0275\u0275elementStart(23, "h6");
+    \u0275\u0275text(24, "Exit Dashboard Edit Mode");
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(25, "p");
+    \u0275\u0275text(26, "Use the Save or Cancel buttons in the lower right corner to either persist your changes or revert back all changes.");
+    \u0275\u0275elementEnd();
   }
 }
 var WidgetTutorialComponent = class _WidgetTutorialComponent extends BaseWidgetComponent {
@@ -124068,7 +124048,7 @@ var WidgetTutorialComponent = class _WidgetTutorialComponent extends BaseWidgetC
   static \u0275fac = function WidgetTutorialComponent_Factory(__ngFactoryType__) {
     return new (__ngFactoryType__ || _WidgetTutorialComponent)();
   };
-  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _WidgetTutorialComponent, selectors: [["widget-tutorial"]], standalone: true, features: [\u0275\u0275InheritDefinitionFeature, \u0275\u0275StandaloneFeature], decls: 4, vars: 3, consts: [[3, "configChange", "config", "id"], [2, "padding", "10px"], ["mat-raised-button", "", 3, "click"], ["routerLink", "/help"], ["mat-raised-button", "", "routerLink", "/settings"]], template: function WidgetTutorialComponent_Template(rf, ctx) {
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _WidgetTutorialComponent, selectors: [["widget-tutorial"]], standalone: true, features: [\u0275\u0275InheritDefinitionFeature, \u0275\u0275StandaloneFeature], decls: 4, vars: 3, consts: [[3, "configChange", "config", "id"], [1, "tutorial-container"], ["mat-raised-button", "", 3, "click"]], template: function WidgetTutorialComponent_Template(rf, ctx) {
     if (rf & 1) {
       \u0275\u0275elementStart(0, "widget-host", 0);
       \u0275\u0275twoWayListener("configChange", function WidgetTutorialComponent_Template_widget_host_configChange_0_listener($event) {
@@ -124079,7 +124059,7 @@ var WidgetTutorialComponent = class _WidgetTutorialComponent extends BaseWidgetC
         return ctx.updateConfig($event);
       });
       \u0275\u0275elementStart(1, "div", 1);
-      \u0275\u0275template(2, WidgetTutorialComponent_Conditional_2_Template, 57, 0)(3, WidgetTutorialComponent_Conditional_3_Template, 22, 0);
+      \u0275\u0275template(2, WidgetTutorialComponent_Conditional_2_Template, 39, 0)(3, WidgetTutorialComponent_Conditional_3_Template, 27, 0);
       \u0275\u0275elementEnd()();
     }
     if (rf & 2) {
@@ -124088,7 +124068,7 @@ var WidgetTutorialComponent = class _WidgetTutorialComponent extends BaseWidgetC
       \u0275\u0275advance(2);
       \u0275\u0275conditional(ctx.dashboard.isDashboardStatic() ? 2 : 3);
     }
-  }, dependencies: [WidgetHostComponent, MatButton, RouterLink], encapsulation: 2 });
+  }, dependencies: [WidgetHostComponent, MatButton], styles: ["\n\n.tutorial-container[_ngcontent-%COMP%] {\n  overflow-y: scroll;\n  -webkit-overflow-scrolling: touch;\n  height: 100%;\n  padding: 15px;\n}\n/*# sourceMappingURL=widget-tutorial.component.css.map */"] });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(WidgetTutorialComponent, { className: "WidgetTutorialComponent" });
@@ -128864,37 +128844,27 @@ var DashboardsManageBottomSheetComponent = class _DashboardsManageBottomSheetCom
   static \u0275fac = function DashboardsManageBottomSheetComponent_Factory(__ngFactoryType__) {
     return new (__ngFactoryType__ || _DashboardsManageBottomSheetComponent)();
   };
-  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _DashboardsManageBottomSheetComponent, selectors: [["dashboards-manage-bottom-sheet"]], standalone: true, features: [\u0275\u0275StandaloneFeature], decls: 16, vars: 0, consts: [["mat-list-item", "", 3, "click"], ["matListItemIcon", ""]], template: function DashboardsManageBottomSheetComponent_Template(rf, ctx) {
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _DashboardsManageBottomSheetComponent, selectors: [["dashboards-manage-bottom-sheet"]], standalone: true, features: [\u0275\u0275StandaloneFeature], decls: 11, vars: 0, consts: [["mat-list-item", "", 3, "click"], ["matListItemIcon", ""]], template: function DashboardsManageBottomSheetComponent_Template(rf, ctx) {
     if (rf & 1) {
       \u0275\u0275elementStart(0, "mat-action-list")(1, "button", 0);
       \u0275\u0275listener("click", function DashboardsManageBottomSheetComponent_Template_button_click_1_listener() {
-        return ctx.clickAction("rename");
+        return ctx.clickAction("duplicate");
       });
       \u0275\u0275elementStart(2, "mat-icon", 1);
-      \u0275\u0275text(3, "edit");
+      \u0275\u0275text(3, "content_copy");
       \u0275\u0275elementEnd();
       \u0275\u0275elementStart(4, "span");
-      \u0275\u0275text(5, "Rename");
+      \u0275\u0275text(5, "Duplicate");
       \u0275\u0275elementEnd()();
       \u0275\u0275elementStart(6, "button", 0);
       \u0275\u0275listener("click", function DashboardsManageBottomSheetComponent_Template_button_click_6_listener() {
-        return ctx.clickAction("duplicate");
+        return ctx.clickAction("delete");
       });
       \u0275\u0275elementStart(7, "mat-icon", 1);
-      \u0275\u0275text(8, "content_copy");
+      \u0275\u0275text(8, "delete_forever");
       \u0275\u0275elementEnd();
       \u0275\u0275elementStart(9, "span");
-      \u0275\u0275text(10, "Duplicate");
-      \u0275\u0275elementEnd()();
-      \u0275\u0275elementStart(11, "button", 0);
-      \u0275\u0275listener("click", function DashboardsManageBottomSheetComponent_Template_button_click_11_listener() {
-        return ctx.clickAction("delete");
-      });
-      \u0275\u0275elementStart(12, "mat-icon", 1);
-      \u0275\u0275text(13, "delete_forever");
-      \u0275\u0275elementEnd();
-      \u0275\u0275elementStart(14, "span");
-      \u0275\u0275text(15, "Delete");
+      \u0275\u0275text(10, "Delete");
       \u0275\u0275elementEnd()()();
     }
   }, dependencies: [MatListModule, MatActionList, MatListItem, MatListItemIcon, MatIconModule, MatIcon] });
@@ -128913,6 +128883,10 @@ function DashboardsEditorComponent_For_3_Template(rf, ctx) {
       const \u0275$index_5_r2 = \u0275\u0275restoreView(_r1).$index;
       const ctx_r2 = \u0275\u0275nextContext();
       return \u0275\u0275resetView(ctx_r2.openBottomSheet(\u0275$index_5_r2));
+    })("doubletap", function DashboardsEditorComponent_For_3_Template_div_doubletap_0_listener() {
+      const \u0275$index_5_r2 = \u0275\u0275restoreView(_r1).$index;
+      const ctx_r2 = \u0275\u0275nextContext();
+      return \u0275\u0275resetView(ctx_r2.editDashboard(\u0275$index_5_r2));
     });
     \u0275\u0275elementStart(1, "span", 7)(2, "div", 8);
     \u0275\u0275text(3);
@@ -128958,18 +128932,15 @@ var DashboardsEditorComponent = class _DashboardsEditorComponent {
         case "duplicate":
           this.duplicateDashboard(index2, `${this._dashboard.dashboards()[index2].name}`);
           break;
-        case "rename":
-          this.renameDashboard(index2, this._dashboard.dashboards()[index2].name);
-          break;
         default:
           break;
       }
     });
   }
-  renameDashboard(itemIndex, currentName) {
+  editDashboard(itemIndex) {
     this._dialog.openNameDialog({
       title: "Rename Dashboard",
-      name: currentName,
+      name: this._dashboard.dashboards()[itemIndex].name,
       confirmBtnText: "Save",
       cancelBtnText: "Cancel"
     }).afterClosed().subscribe((data) => {
@@ -129005,7 +128976,7 @@ var DashboardsEditorComponent = class _DashboardsEditorComponent {
   static \u0275fac = function DashboardsEditorComponent_Factory(__ngFactoryType__) {
     return new (__ngFactoryType__ || _DashboardsEditorComponent)();
   };
-  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _DashboardsEditorComponent, selectors: [["dashboards-editor"]], standalone: true, features: [\u0275\u0275StandaloneFeature], decls: 11, vars: 1, consts: [[3, "pageTitle"], ["cdkDropList", "", "cdkDropListOrientation", "mixed", 1, "dashboard-manage", 3, "cdkDropListDropped"], ["cdkDrag", "", "cdkDragBoundary", ".dashboard-manage", 1, "dashboard-card", "dashboard-item"], [1, "dashboard-card", "dashboard-item-add", "dashboard-add-btn"], ["mat-fab", "", 3, "click"], [2, "margin-top", "10px"], ["cdkDrag", "", "cdkDragBoundary", ".dashboard-manage", 1, "dashboard-card", "dashboard-item", 3, "press"], [2, "display", "block", "width", "100%"], [1, "item-index"], [1, "mat-title-large", 2, "margin-top", "25px"]], template: function DashboardsEditorComponent_Template(rf, ctx) {
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _DashboardsEditorComponent, selectors: [["dashboards-editor"]], standalone: true, features: [\u0275\u0275StandaloneFeature], decls: 11, vars: 1, consts: [[3, "pageTitle"], ["cdkDropList", "", "cdkDropListOrientation", "mixed", 1, "dashboard-manage", 3, "cdkDropListDropped"], ["cdkDrag", "", "cdkDragBoundary", ".dashboard-manage", 1, "dashboard-card", "dashboard-item"], [1, "dashboard-card", "dashboard-item-add", "dashboard-add-btn"], ["mat-fab", "", 3, "click"], [2, "margin-top", "10px"], ["cdkDrag", "", "cdkDragBoundary", ".dashboard-manage", 1, "dashboard-card", "dashboard-item", 3, "press", "doubletap"], [2, "display", "block", "width", "100%"], [1, "item-index"], [1, "mat-title-large", 2, "margin-top", "25px"]], template: function DashboardsEditorComponent_Template(rf, ctx) {
     if (rf & 1) {
       \u0275\u0275element(0, "page-header", 0);
       \u0275\u0275elementStart(1, "div", 1);
@@ -150428,8 +150399,10 @@ bootstrapApplication(AppComponent, {
       provide: MAT_DIALOG_DEFAULT_OPTIONS,
       useValue: {
         hasBackdrop: true,
-        disableClose: true,
-        autoFocus: "first-tabbable"
+        disableClose: false,
+        autoFocus: "first-tabbable",
+        delayFocusTrap: true,
+        backdropClass: "dialogBackdrop"
       }
     },
     {