@pine-ds/core 4.0.0-mercury.0 → 4.0.0

package/dist/collection/components/pds-checkbox/pds-checkbox.js

@@ -1,14 +1,22 @@
 import { h, Host } from "@stencil/core";
-import { assignDescription, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { assignDescription, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
+import { danger } from "@pine-ds/icons/icons";
+import { inheritAriaAttributes } from "../../utils/attributes";
 export class PdsCheckbox {
     constructor() {
+        this.inheritedAttributes = {};
+        this._type = 'checkbox';
+        /**
+         * It determines whether or not the checkbox is checked.
+         */
+        this.checked = false;
         this.handleCheckboxChange = (e) => {
             if (this.disabled) {
                 return;
             }
             const target = e.target;
             this.checked = target.checked;
+            this.updateFormValue();
             this.pdsCheckboxChange.emit({
                 checked: target.checked,
                 value: this.value
@@ -20,18 +28,6 @@ export class PdsCheckbox {
                 value: this.value
             });
         };
-        this.checked = false;
-        this.componentId = undefined;
-        this.disabled = undefined;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.indeterminate = undefined;
-        this.invalid = undefined;
-        this.label = undefined;
-        this.labelHidden = undefined;
-        this.name = undefined;
-        this.required = undefined;
-        this.value = undefined;
     }
     updateIndeterminate() {
         this.indeterminate = undefined;
@@ -49,21 +45,62 @@ export class PdsCheckbox {
         }
         return classNames.join('  ');
     }
+    connectedCallback() {
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+        // Expose type property on the element instance to match native form element behavior
+        exposeTypeProperty(this.el, () => this._type);
+    }
+    componentDidLoad() {
+        this.updateFormValue();
+    }
+    checkedChanged() {
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (isSpecTest())
+            return;
+        if (this.internals && this.internals.setFormValue) {
+            // For checkboxes, only send the value when checked, otherwise send null
+            const formValue = this.checked ? (this.value || 'on') : null;
+            this.internals.setFormValue(formValue);
+        }
+        if (this.internals && this.internals.setValidity) {
+            this.internals.setValidity({});
+        }
+    }
+    formStateRestoreCallback(state) {
+        if (state instanceof FormData) {
+            // For checkboxes, restore if the value exists in FormData
+            const value = this.value || 'on';
+            this.checked = state.get(this.name) === value;
+        }
+        else if (typeof state === 'string') {
+            // Restore from string state
+            this.checked = state === (this.value || 'on');
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+    }
     render() {
-        return (h(Host, { key: 'ad7d0dd8ce09b69abc0024541ff2b2d69a8db0b0', class: this.classNames() }, h("input", { key: 'fbc513372055e685d3beb16fba9c404db3d0528a', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h(PdsLabel, { key: '12444bd716bc8ae952a0bf38471d00e6d3a9fe3b', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
-            h("div", { key: 'e85ffb338c44a3f924b75d1869c781db9a93350b', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '8071425f43f89ff44ce8bdb608737b1f574e2440', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        return (h(Host, { key: 'd4a447aba6ffa638b0bf3ed7a5cfd4580168da79', class: this.classNames() }, h("label", { key: '75fcd32809f736f8e4f6af2021f86d2c5b7bc110', htmlFor: this.componentId }, h("input", Object.assign({ key: 'bf6c15908ed3b1cebc35ce10eddd4b420a2d2b4e', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), h("span", { key: 'dd8d96a9907c5f237ab52508a70adcc0ed1b7eb5', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '8928bea1a022825777e40635ae91e7bdedaaea67', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'e09485a38fb7c66d9dbfa68eddf758e3cd0d81c8', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '0bea5bbdc7817b6f2136a7c1a8e67811f4119dce', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-checkbox.scss"]
+            "$": ["../../global/styles/utils/label.scss", "pds-checkbox.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-checkbox.css"]
+            "$": ["../../global/styles/utils/label.css", "pds-checkbox.css"]
         };
     }
     static get properties() {
@@ -82,8 +119,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "It determines whether or not the checkbox is checked."
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "componentId": {
@@ -100,8 +139,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "disabled": {
                 "type": "boolean",
@@ -117,8 +158,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "It determines whether or not the checkbox is disabled."
                 },
-                "attribute": "disabled",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
             },
             "errorMessage": {
                 "type": "string",
@@ -134,8 +177,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "Displays message text describing an invalid state."
                 },
-                "attribute": "error-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
             },
             "helperMessage": {
                 "type": "string",
@@ -151,8 +196,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "String used for helper message below checkbox."
                 },
-                "attribute": "helper-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
             },
             "indeterminate": {
                 "type": "boolean",
@@ -168,8 +215,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "If `true`, the checkbox will visually appear as indeterminate.\nOnly JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)."
                 },
-                "attribute": "indeterminate",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate"
             },
             "invalid": {
                 "type": "boolean",
@@ -185,8 +234,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "It determines whether or not the checkbox is invalid."
                 },
-                "attribute": "invalid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid"
             },
             "label": {
                 "type": "string",
@@ -202,10 +253,12 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "String used for label text next to checkbox."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
-            "labelHidden": {
+            "hideLabel": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -219,8 +272,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers."
                 },
-                "attribute": "label-hidden",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-label"
             },
             "name": {
                 "type": "string",
@@ -236,8 +291,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "String used for checkbox `name` attribute."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "required": {
                 "type": "boolean",
@@ -253,8 +310,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "It determines whether or not the checkbox is required."
                 },
-                "attribute": "required",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required"
             },
             "value": {
                 "type": "string",
@@ -270,8 +329,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "The value of the checkbox that is submitted with a form."
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             }
         };
     }
@@ -293,7 +354,8 @@ export class PdsCheckbox {
                         "CheckboxChangeEventDetail": {
                             "location": "import",
                             "path": "./checkbox-interface",
-                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
+                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail",
+                            "referenceLocation": "CheckboxChangeEventDetail"
                         }
                     }
                 }
@@ -314,17 +376,21 @@ export class PdsCheckbox {
                         "CheckboxChangeEventDetail": {
                             "location": "import",
                             "path": "./checkbox-interface",
-                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
+                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail",
+                            "referenceLocation": "CheckboxChangeEventDetail"
                         }
                     }
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "checked",
                 "methodName": "updateIndeterminate"
+            }, {
+                "propName": "checked",
+                "methodName": "checkedChanged"
             }];
     }
 }
-//# sourceMappingURL=pds-checkbox.js.map

package/dist/collection/components/pds-checkbox/stories/pds-checkbox.stories.js

@@ -1,40 +1,32 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
-  argTypes: extractArgTypes('pds-checkbox'),
   args: {
     checked: false,
     disabled: false,
     indeterminate: false,
     invalid: false,
-    labelHidden: false,
+    hideLabel: false,
     required: false,
   },
   component: 'pds-checkbox',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onchange', 'pdsCheckboxChange'],
-    },
-  },
+  parameters: {},
   title: 'components/Checkbox',
 }
 
 const BaseTemplate = (args) =>
   html` <pds-checkbox
     component-id=${args.componentId}
-    checked=${args.checked}
-    disabled=${args.disabled}
+    ?checked=${args.checked}
+    ?disabled=${args.disabled}
     error-message=${args.errorMessage}
     helper-message=${args.helperMessage}
-    indeterminate=${args.indeterminate}
-    invalid=${args.invalid}
+    ?hide-label=${args.hideLabel}
+    ?indeterminate=${args.indeterminate}
+    ?invalid=${args.invalid}
     label=${args.label}
-    label-hidden=${args.labelHidden}
     name=${args.name}
-    required=${args.required}
+    ?required=${args.required}
     value=${args.value}
   />`;