diff --git a/packages/stencil-library/custom-elements.json b/packages/stencil-library/custom-elements.json index e3b0b2f21..36a8dcdc4 100644 --- a/packages/stencil-library/custom-elements.json +++ b/packages/stencil-library/custom-elements.json @@ -385,10 +385,6 @@ } ], "slots": [ - { - "name": " ", - "description": "The label for the checkbox." - }, { "name": "checkedicon", "description": "Allows overriding the default checked icon." diff --git a/packages/stencil-library/src/components.d.ts b/packages/stencil-library/src/components.d.ts index 77d69c1a8..b76a53eaf 100644 --- a/packages/stencil-library/src/components.d.ts +++ b/packages/stencil-library/src/components.d.ts @@ -125,6 +125,9 @@ export namespace Components { */ "type": 'primary' | 'danger' | 'secondary' | 'tertiary'; } + /** + * @deprecated - The label for the checkbox - Obsolete, implement your own label. + */ interface DnnCheckbox { /** * Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) @@ -865,6 +868,9 @@ declare global { interface HTMLDnnCheckboxElementEventMap { "checkedchange": "checked" | "unchecked" | "intermediate"; } + /** + * @deprecated - The label for the checkbox - Obsolete, implement your own label. + */ interface HTMLDnnCheckboxElement extends Components.DnnCheckbox, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDnnCheckboxElement, ev: DnnCheckboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; @@ -1401,6 +1407,9 @@ declare namespace LocalJSX { */ "type"?: 'primary' | 'danger' | 'secondary' | 'tertiary'; } + /** + * @deprecated - The label for the checkbox - Obsolete, implement your own label. + */ interface DnnCheckbox { /** * Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) @@ -2074,6 +2083,9 @@ declare module "@stencil/core" { interface IntrinsicElements { "dnn-autocomplete": LocalJSX.DnnAutocomplete & JSXBase.HTMLAttributes; "dnn-button": LocalJSX.DnnButton & JSXBase.HTMLAttributes; + /** + * @deprecated - The label for the checkbox - Obsolete, implement your own label. + */ "dnn-checkbox": LocalJSX.DnnCheckbox & JSXBase.HTMLAttributes; "dnn-chevron": LocalJSX.DnnChevron & JSXBase.HTMLAttributes; "dnn-collapsible": LocalJSX.DnnCollapsible & JSXBase.HTMLAttributes; 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 4e6030701..53acdf9ee 100644 --- a/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx +++ b/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx @@ -1,8 +1,8 @@ -import { Component, Element, Host, h, Prop, Event, EventEmitter, AttachInternals, Watch, State } from '@stencil/core'; +import { Component, Element, Host, h, Prop, Event, EventEmitter, AttachInternals, Watch, State, Listen } from '@stencil/core'; import { CheckedState } from './types'; /** - * @slot - The label for the checkbox. + * @slot @deprecated - The label for the checkbox - Obsolete, implement your own label. * @slot checkedicon - Allows overriding the default checked icon. * @slot uncheckedicon - Allows overriding the unchecked icon. * @slot intermediateicon - If intermadiate state is used, allows overriding its icon. @@ -31,6 +31,11 @@ export class DnnCheckbox { /** Fires up when the checkbox checked property changes. */ @Event() checkedchange: EventEmitter<"checked" | "unchecked" | "intermediate">; + @Listen("click", { capture: true }) + handleClick() { + this.changeState(); + } + @State() focused = false; @AttachInternals() internals: ElementInternals; @@ -102,7 +107,6 @@ export class DnnCheckbox { onFocus={() => this.focused = true} onBlur={() => this.focused = false} class={`icon ${this.checked}`} - onClick={() => this.changeState()} >
@@ -120,7 +124,6 @@ export class DnnCheckbox {
- ); } diff --git a/packages/stencil-library/src/components/dnn-checkbox/readme.md b/packages/stencil-library/src/components/dnn-checkbox/readme.md index edff1f3a7..e7d47d364 100644 --- a/packages/stencil-library/src/components/dnn-checkbox/readme.md +++ b/packages/stencil-library/src/components/dnn-checkbox/readme.md @@ -5,6 +5,8 @@ +> **[DEPRECATED]** - The label for the checkbox - Obsolete, implement your own label. + ## Usage ### HTML @@ -53,7 +55,6 @@ | Slot | Description | | -------------------- | ---------------------------------------------------------- | -| | The label for the checkbox. | | `"checkedicon"` | Allows overriding the default checked icon. | | `"intermediateicon"` | If intermadiate state is used, allows overriding its icon. | | `"uncheckedicon"` | Allows overriding the unchecked icon. | diff --git a/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.scss b/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.scss index 74c4c1f09..5ecf4c561 100644 --- a/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.scss +++ b/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.scss @@ -67,8 +67,8 @@ table{ } td{ text-align: center; - dnn-checkbox{ - span{ + label{ + .hidden{ display: none; } } 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 9bd9b75a5..bb69536e9 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 @@ -163,19 +163,21 @@ export class DnnPermissionsGrid { const checked = item == undefined ? "intermediate" : item.allowAccess ? "checked" : "unchecked"; return( - this.handleRoleChanged(e.detail, rolePermission, permissionDefinition)} - > -
- -
-
- -
- {permissionDefinition.permissionName} - + ) } @@ -184,19 +186,21 @@ export class DnnPermissionsGrid { const checked = item == undefined ? "intermediate" : item.allowAccess ? "checked" : "unchecked"; return( - this.handleUserChanged(e.detail, userPermission, permissionDefinition)} - > -
- -
-
- -
- {permissionDefinition.permissionName} - + ) } diff --git a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx index 084b54634..585c40a50 100644 --- a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx +++ b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx @@ -245,9 +245,10 @@ export class DnnExampleForm { helpText="Please enter the URL of your website." name="website" /> - +