diff --git a/packages/stencil-library/custom-elements.json b/packages/stencil-library/custom-elements.json index c065a3529..0b87dc949 100644 --- a/packages/stencil-library/custom-elements.json +++ b/packages/stencil-library/custom-elements.json @@ -390,7 +390,7 @@ "type": { "text": "(currentState: CheckedState) => CheckedState" }, - "description": "A function that will be called when the checkbox changes its checked 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).", + "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 } diff --git a/packages/stencil-library/src/components.d.ts b/packages/stencil-library/src/components.d.ts index 2e7e3263d..f9ef44531 100644 --- a/packages/stencil-library/src/components.d.ts +++ b/packages/stencil-library/src/components.d.ts @@ -142,7 +142,7 @@ export namespace Components { */ "name": string; /** - * A function that will be called when the checkbox changes its checked 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). + * 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; /** @@ -1440,7 +1440,7 @@ declare namespace LocalJSX { */ "name"?: string; /** - * A function that will be called when the checkbox changes its checked 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). + * 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; /** diff --git a/packages/stencil-library/src/components/dnn-button/readme.md b/packages/stencil-library/src/components/dnn-button/readme.md index 0691d30cc..ec2a5067a 100644 --- a/packages/stencil-library/src/components/dnn-button/readme.md +++ b/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 ``` diff --git a/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx b/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx index 265403936..11df0e864 100644 --- a/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx +++ b/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx @@ -28,7 +28,7 @@ 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 changes needs to change and returns the next state. + /** 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). */ diff --git a/packages/stencil-library/src/components/dnn-checkbox/readme.md b/packages/stencil-library/src/components/dnn-checkbox/readme.md index dd95bae36..d834cae8d 100644 --- a/packages/stencil-library/src/components/dnn-checkbox/readme.md +++ b/packages/stencil-library/src/components/dnn-checkbox/readme.md @@ -36,13 +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` | -| `nextStateHandler` | -- | A function that will be called when the checkbox changes its checked 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"` | +| 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 diff --git a/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx b/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx index bb69536e9..fdde8b4fc 100644 --- a/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx +++ b/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 {