Merge pull request #1245 from DNNCommunity/release/0.25.0

Released v0.25.0

packages/stencil-library/custom-elements.json

@@ -383,7 +383,18 @@
               "required": false
             }
           ],
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "nextStateHandler",
+              "type": {
+                "text": "(currentState: CheckedState) => CheckedState"
+              },
+              "description": "A function that will be called when the checkbox needs to change state and returns the next state.\nCan be used to customize the order of the states when the component is clicked.\nOnly called if you also use the tri-state feature (useIntermediate).",
+              "default": "this.defaultNextStateHandler",
+              "required": false
+            }
+          ],
           "events": [
             {
               "name": "checkedchange",
@@ -1660,13 +1671,32 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "customizeOptions",
+              "type": {
+                "text": "(options: Config) => Config"
+              },
+              "description": "Customize the options before initializing the editor, will have all the default options merged with 'options' if passed.\nThis is called last after merging default options with your custom 'options' and just before initializing the editor.",
+              "required": false
+            },
             {
               "kind": "field",
               "name": "options",
               "type": {
                 "text": "Config"
               },
-              "description": "Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html",
+              "description": "Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html\nThis will be merged with the default options and passed to the editor.\nIf you prefer to not have to pass a full config object,\nyou can use 'customizeOptions' to modify the options before initializing the editor\ninstead of providing all options here.",
+              "required": false
+            },
+            {
+              "kind": "field",
+              "name": "plugins",
+              "type": {
+                "text": "{ name: string; callback: (editor: Jodit) => void; }[]"
+              },
+              "description": "Allows registering your own plugins.\nThe callback will be called with the editor instance as the only argument durig initialization.\nAll other behavior needs to be implemented in the plugin itself using editor.on(\"eventname\").\nSee https://xdsoft.net/jodit/examples/plugin/custom_plugin.html for an example.\nCreating a plugin does NOT automatically add it to the toolbar, you need to do that yourself in 'options' or 'customizeOptions',\nSee https://xdsoft.net/jodit/examples/toolbar/custom_button.html for an example.",
+              "default": "[]",
               "required": false
             }
           ],
@@ -2424,24 +2454,6 @@
           "cssParts": []
         }
       ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/test-form/test-form.tsx",
-      "declarations": [
-        {
-          "kind": "class",
-          "name": "test-form.tsx",
-          "tagName": "test-form",
-          "description": "",
-          "attributes": [],
-          "members": [],
-          "events": [],
-          "slots": [],
-          "cssProperties": [],
-          "cssParts": []
-        }
-      ]
     }
   ]
 }

packages/stencil-library/package.json

@@ -67,7 +67,7 @@
     "react-dom": "^18.2.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "storybook": "^8.3.2",
-    "typescript": "5.6.3",
+    "typescript": "5.7.2",
     "typescript-debounce-decorator": "^0.0.18"
   },
   "dependencies": {

packages/stencil-library/src/components.d.ts

@@ -17,6 +17,7 @@ import { IRole } from "./components/dnn-permissions-grid/role-interface";
 import { ILocalization } from "./components/dnn-permissions-grid/localization-interface";
 import { ISearchedUser } from "./components/dnn-permissions-grid/searched-user-interface";
 import { Config } from "jodit/types/config";
+import { Jodit } from "jodit";
 import { DnnToggleChangeEventDetail } from "./components/dnn-toggle/toggle-interface";
 export { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from "./components/dnn-autocomplete/types";
 export { CheckedState } from "./components/dnn-checkbox/types";
@@ -30,6 +31,7 @@ export { IRole } from "./components/dnn-permissions-grid/role-interface";
 export { ILocalization } from "./components/dnn-permissions-grid/localization-interface";
 export { ISearchedUser } from "./components/dnn-permissions-grid/searched-user-interface";
 export { Config } from "jodit/types/config";
+export { Jodit } from "jodit";
 export { DnnToggleChangeEventDetail } from "./components/dnn-toggle/toggle-interface";
 export namespace Components {
     interface DnnAutocomplete {
@@ -141,6 +143,10 @@ export namespace Components {
           * The name to show in the formData (if using forms).
          */
         "name": string;
+        /**
+          * A function that will be called when the checkbox needs to change state and returns the next state. Can be used to customize the order of the states when the component is clicked. Only called if you also use the tri-state feature (useIntermediate).
+         */
+        "nextStateHandler": (currentState: CheckedState) => CheckedState;
         /**
           * Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state)
          */
@@ -550,14 +556,22 @@ export namespace Components {
         "value": number;
     }
     interface DnnRichtext {
+        /**
+          * Customize the options before initializing the editor, will have all the default options merged with 'options' if passed. This is called last after merging default options with your custom 'options' and just before initializing the editor.
+         */
+        "customizeOptions": (options: Config) => Config;
         /**
           * Name of the field when used in a form.
          */
         "name": string;
         /**
-          * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html
+          * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html This will be merged with the default options and passed to the editor. If you prefer to not have to pass a full config object, you can use 'customizeOptions' to modify the options before initializing the editor instead of providing all options here.
          */
         "options": Config;
+        /**
+          * Allows registering your own plugins. The callback will be called with the editor instance as the only argument durig initialization. All other behavior needs to be implemented in the plugin itself using editor.on("eventname"). See https://xdsoft.net/jodit/examples/plugin/custom_plugin.html for an example. Creating a plugin does NOT automatically add it to the toolbar, you need to do that yourself in 'options' or 'customizeOptions', See https://xdsoft.net/jodit/examples/toolbar/custom_button.html for an example.
+         */
+        "plugins": {name: string, callback: (editor: Jodit) => void}[];
         /**
           * Sets the value of the content of the editor.
          */
@@ -1435,6 +1449,10 @@ declare namespace LocalJSX {
           * The name to show in the formData (if using forms).
          */
         "name"?: string;
+        /**
+          * A function that will be called when the checkbox needs to change state and returns the next state. Can be used to customize the order of the states when the component is clicked. Only called if you also use the tri-state feature (useIntermediate).
+         */
+        "nextStateHandler"?: (currentState: CheckedState) => CheckedState;
         /**
           * Fires up when the checkbox checked property changes.
          */
@@ -1853,6 +1871,10 @@ declare namespace LocalJSX {
         "value"?: number;
     }
     interface DnnRichtext {
+        /**
+          * Customize the options before initializing the editor, will have all the default options merged with 'options' if passed. This is called last after merging default options with your custom 'options' and just before initializing the editor.
+         */
+        "customizeOptions"?: (options: Config) => Config;
         /**
           * Name of the field when used in a form.
          */
@@ -1866,9 +1888,13 @@ declare namespace LocalJSX {
          */
         "onValueInput"?: (event: DnnRichtextCustomEvent<string>) => void;
         /**
-          * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html
+          * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html This will be merged with the default options and passed to the editor. If you prefer to not have to pass a full config object, you can use 'customizeOptions' to modify the options before initializing the editor instead of providing all options here.
          */
         "options"?: Config;
+        /**
+          * Allows registering your own plugins. The callback will be called with the editor instance as the only argument durig initialization. All other behavior needs to be implemented in the plugin itself using editor.on("eventname"). See https://xdsoft.net/jodit/examples/plugin/custom_plugin.html for an example. Creating a plugin does NOT automatically add it to the toolbar, you need to do that yourself in 'options' or 'customizeOptions', See https://xdsoft.net/jodit/examples/toolbar/custom_button.html for an example.
+         */
+        "plugins"?: {name: string, callback: (editor: Jodit) => void}[];
         /**
           * Sets the value of the content of the editor.
          */

packages/stencil-library/src/components/dnn-button/readme.md

@@ -87,7 +87,6 @@
  - [dnn-color-input](../dnn-color-input)
  - [dnn-example-form](../examples/dnn-example-form)
  - [dnn-permissions-grid](../dnn-permissions-grid)
- - [test-form](../test-form)
 
 ### Depends on
 
@@ -101,7 +100,6 @@ graph TD;
   dnn-color-input --> dnn-button
   dnn-example-form --> dnn-button
   dnn-permissions-grid --> dnn-button
-  test-form --> dnn-button
   style dnn-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx

@@ -28,6 +28,12 @@ export class DnnCheckbox {
   /** The name to show in the formData (if using forms). */
   @Prop() name: string;
 
+  /** A function that will be called when the checkbox needs to change state and returns the next state.
+   * Can be used to customize the order of the states when the component is clicked.
+   * Only called if you also use the tri-state feature (useIntermediate).
+   */
+  @Prop() nextStateHandler: (currentState: CheckedState) => CheckedState = this.defaultNextStateHandler;
+
   /** Fires up when the checkbox checked property changes. */
   @Event() checkedchange: EventEmitter<"checked" | "unchecked" | "intermediate">;
 
@@ -63,6 +69,17 @@ export class DnnCheckbox {
     this.checked = this.originalChecked;
   }
 
+  private defaultNextStateHandler(currentState: CheckedState): CheckedState {
+    switch (currentState) {
+      case "checked":
+          return "intermediate";
+        case "intermediate":
+          return "unchecked";
+        case "unchecked":
+          return "checked";
+    }
+  }
+
   private changeState(): void {
     if (!this.useIntermediate){
       switch (this.checked) {
@@ -79,19 +96,8 @@ export class DnnCheckbox {
       this.checkedchange.emit(this.checked);
       return;
     }
-    switch (this.checked) {
-      case "checked":
-        this.checked = "intermediate";
-        break;
-      case "intermediate":
-        this.checked = "unchecked";
-        break;
-      case "unchecked":
-        this.checked = "checked";
-        break;
-      default:
-        break;
-    }
+
+    this.checked = this.nextStateHandler(this.checked);
     this.checkedchange.emit(this.checked);
   }
 

packages/stencil-library/src/components/dnn-checkbox/readme.md

@@ -36,12 +36,13 @@
 
 ## Properties
 
-| Property          | Attribute          | Description                                                                                                       | Type                                         | Default       |
-| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------- |
-| `checked`         | `checked`          | Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined)            | `"checked" \| "intermediate" \| "unchecked"` | `"unchecked"` |
-| `name`            | `name`             | The name to show in the formData (if using forms).                                                                | `string`                                     | `undefined`   |
-| `useIntermediate` | `use-intermediate` | Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) | `boolean`                                    | `false`       |
-| `value`           | `value`            | The value for this checkbox (not to be confused with its checked state).                                          | `string`                                     | `"on"`        |
+| Property           | Attribute          | Description                                                                                                                                                                                                                                             | Type                                           | Default                        |
+| ------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------------------------------ |
+| `checked`          | `checked`          | Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined)                                                                                                                                                  | `"checked" \| "intermediate" \| "unchecked"`   | `"unchecked"`                  |
+| `name`             | `name`             | The name to show in the formData (if using forms).                                                                                                                                                                                                      | `string`                                       | `undefined`                    |
+| `nextStateHandler` | --                 | A function that will be called when the checkbox needs to change state and returns the next state. Can be used to customize the order of the states when the component is clicked. Only called if you also use the tri-state feature (useIntermediate). | `(currentState: CheckedState) => CheckedState` | `this.defaultNextStateHandler` |
+| `useIntermediate`  | `use-intermediate` | Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state)                                                                                                                                       | `boolean`                                      | `false`                        |
+| `value`            | `value`            | The value for this checkbox (not to be confused with its checked state).                                                                                                                                                                                | `string`                                       | `"on"`                         |
 
 
 ## Events

packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx

@@ -4,6 +4,7 @@ import { IPermissionDefinition, IPermissions, IRolePermission, IUserPermission }
 import { IRoleGroup } from './role-group-interface';
 import { IRole } from './role-interface';
 import { ISearchedUser } from './searched-user-interface';
+import { CheckedState } from '../dnn-checkbox/types';
 
 @Component({
   tag: 'dnn-permissions-grid',
@@ -39,7 +40,6 @@ export class DnnPermissionsGrid {
   @State() localResx: ILocalization;
   @State() focused = false;
 
-
   @Watch("foundUsers")
   handleFoundUsersChanged(newValue: ISearchedUser[]){
     if (newValue?.length > 0){
@@ -166,7 +166,8 @@ export class DnnPermissionsGrid {
       <label>
         <span class="hidden">{permissionDefinition.permissionName}</span>
         <dnn-checkbox
-          use-intermediate
+          useIntermediate
+          nextStateHandler={state => this.handleNextState(state)}
           checked={checked}
           onCheckedchange={e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition)}
         >
@@ -189,7 +190,8 @@ export class DnnPermissionsGrid {
       <label>
         <span class="hidden">{permissionDefinition.permissionName}</span>
         <dnn-checkbox
-          use-intermediate
+          useIntermediate
+          nextStateHandler={state => this.handleNextState(state)}
           checked={checked}
           onCheckedchange={e => this.handleUserChanged(e.detail, userPermission, permissionDefinition)}
         >
@@ -204,6 +206,17 @@ export class DnnPermissionsGrid {
     )
   }
 
+  private handleNextState(state: string): CheckedState {
+    switch (state) {
+      case "checked":
+        return "unchecked";
+      case "unchecked":
+        return "intermediate";
+      default:
+        return "checked";
+    }
+  }
+
   private handleRoleChanged(
     checked: "checked" | "unchecked" | "intermediate",
     rolePermission: IRolePermission,
@@ -289,7 +302,7 @@ export class DnnPermissionsGrid {
   }
 
   private handleUserChanged(
-    checked: "checked" | "unchecked" | "intermediate",
+    checked: CheckedState,
     userPermission: IUserPermission,
     permissionDefinition: IPermissionDefinition
   ): void {