@dubai-design-system/components-js 3.12.9 → 3.12.11

package/dist/collection/components/dda-radiobutton/dda-radiobutton.js

@@ -1,28 +1,18 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class DdaRadiobutton {
     constructor() {
-        this.checked = false;
-        this.validation_id = 'text';
         this.custom_class = '';
-        this.handleChange = (_e) => {
-            this.checked = true;
-            this.radioChange.emit({ checked: this.checked, input_id: this.input_id });
-            this.onChanged.emit({ checked: this.checked, input_id: this.input_id });
-        };
     }
     render() {
         const radiobuttonClass = [
             'dda-radio-container',
-            this.validation_type ? `dda-validation-${this.validation_type}` : '',
             this.size ? `dda-radio-${this.size}` : '',
             this.variants ? `dda-radio-${this.variants}` : '',
             this.custom_class ? `dda-radio-${this.custom_class}` : '',
             this.radio_status ? `dda-radio-${this.radio_status}` : '',
             this.component_mode,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        return (h(Host, { key: '7b1bcd7a1e377d31e33f12e405ee04861482d77c' }, h("div", { key: '64ec9fc299aa076b781f955ed5a5e6027563baa2', class: radiobuttonClass }, h("input", { key: '9b79258b54cb0225a62acc99e42b6520accd6099', type: "radio", id: this.input_id, name: this.group_name, "aria-label": this.aria_label, checked: this.checked, disabled: this.radio_status === 'disabled', onChange: this.handleChange }), h("label", { key: '5621ff15e2c9e573c598273a02a52cb30f0f1283', htmlFor: this.input_id }, h("span", { key: 'd518df5e562c50e45404d4792015e1d1e5fe8d4f', class: "radio-circle" }), h("p", { key: 'f6c5d8b8b7114790cb1b6c71e14a23a83cb32db7' }, h("span", { key: '6c822559bbc8387d9f6530abbb9115e576201cf0', class: "radio-title" }, this.title_text), this.validation_type === 'error' && this.error_message ? (h("span", { class: "radio-error-message", id: this.validation_id }, this.error_message)) : (this.supporting && (h("span", { class: "dda-helper-text", id: this.validation_id }, this.supporting))))))));
+        ].filter(Boolean).join(' ');
+        return (h(Host, { key: '082ff0a0d36b50e123841bb3a134c6a7c385a216' }, h("div", { key: '874a04242a1145a7423728775d27db4ce637b8a0', class: radiobuttonClass }, h("input", { key: '7a62ee2d82ab301e33fbc3fd734ff3bbdb8490c6', "aria-label": this.aria_label, type: "radio", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '0de6c3e1587714facf4d51e66506849b0e52f863', htmlFor: this.input_id }, h("span", { key: '4a230a998897b776b3509f29ae0fee18b8a7c3e1', class: "radio-circle" }), h("p", { key: '4aed15b7ed126660d64a275c616b35d67298f9d2' }, h("span", { key: 'cf415855032cd401957d4aed229020fcd2ab75f3', class: "radio-title" }, this.title_text), this.supporting && h("span", { key: 'fc690d46511adda8ed69ea96e359fa9c96a87156', class: "radio-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-radiobutton"; }
     static get originalStyleUrls() {
@@ -53,8 +43,8 @@ export class DdaRadiobutton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "title_text"
             },
             "supporting": {
                 "type": "string",
@@ -72,8 +62,8 @@ export class DdaRadiobutton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "supporting",
-                "reflect": false
+                "reflect": false,
+                "attribute": "supporting"
             },
             "group_name": {
                 "type": "string",
@@ -91,8 +81,8 @@ export class DdaRadiobutton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "group_name"
             },
             "input_id": {
                 "type": "string",
@@ -110,12 +100,12 @@ export class DdaRadiobutton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "checked": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -129,9 +119,8 @@ export class DdaRadiobutton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
-                "reflect": true,
-                "defaultValue": "false"
+                "reflect": false,
+                "attribute": "checked"
             },
             "radio_status": {
                 "type": "string",
@@ -149,66 +138,8 @@ export class DdaRadiobutton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "radio_status",
-                "reflect": false
-            },
-            "error_message": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "error_message",
-                "reflect": false
-            },
-            "validation_type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
-            },
-            "validation_id": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "validation_id",
                 "reflect": false,
-                "defaultValue": "'text'"
+                "attribute": "radio_status"
             },
             "size": {
                 "type": "string",
@@ -226,8 +157,8 @@ export class DdaRadiobutton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "variants": {
                 "type": "string",
@@ -245,8 +176,8 @@ export class DdaRadiobutton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variants",
-                "reflect": false
+                "reflect": false,
+                "attribute": "variants"
             },
             "custom_class": {
                 "type": "string",
@@ -264,8 +195,8 @@ export class DdaRadiobutton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -284,8 +215,8 @@ export class DdaRadiobutton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "aria_label": {
                 "type": "string",
@@ -303,62 +234,9 @@ export class DdaRadiobutton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
-            },
-            "contrast_noraml_text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "contrast_noraml_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             }
         };
     }
-    static get events() {
-        return [{
-                "method": "radioChange",
-                "name": "radioChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ checked: boolean; input_id: string }",
-                    "resolved": "{ checked: boolean; input_id: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "onChanged",
-                "name": "onChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ checked: boolean; input_id: string }",
-                    "resolved": "{ checked: boolean; input_id: string; }",
-                    "references": {}
-                }
-            }];
-    }
 }
-//# sourceMappingURL=dda-radiobutton.js.map

package/dist/collection/components/dda-radiobutton/dda-radiobutton.stories.js

@@ -1,28 +1,28 @@
-import { action } from "@storybook/addon-actions";
 export default {
     title: 'Components/Radio Button',
     tags: ['autodocs'],
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-radiobutton\` component, pass the following props:
-
-\`\`\`html
-<dda-radiobutton
-    title_text="Radio Button Title"
-    checked="false"
-    size="md"
-    variants="normal"
-    supporting="Supporting Text"
-    group_name="radiogroup"
-    input_id="testId"
-    custom_class=""
-    component_mode=""
-    aria_label="radio-button"
-></dda-radiobutton>
-\`\`\`
-        `,
+                component: `
+To use the \`dda-radiobutton\` component, pass the following props:
+
+\`\`\`html
+<dda-radiobutton
+    title_text="Radio Button Title"
+    checked="false"
+    size="md"
+    variants="normal"
+    supporting="Supporting Text"
+    group_name="radiogroup"
+    input_id="testId"
+    custom_class=""
+    component_mode=""
+    aria_label="radio-button"
+    onclick="console.log('clicked')"
+></dda-radiobutton>
+  \`\`\`
+`,
             },
         },
     },
@@ -35,26 +35,17 @@ To use the \`dda-radiobutton\` component, pass the following props:
             control: 'text',
             description: 'Supporting Text',
         },
-        error_message: {
-            control: 'text',
-            description: 'Error message text',
-        },
-        validation_type: {
-            control: { type: 'select' },
-            options: ['normal', 'error'],
-            description: 'Validation type of the input field',
-        },
-        validation_id: {
+        group_name: {
             control: 'text',
-            description: 'Validation ID of helper text and error text',
+            description: 'default',
         },
-        group_name: {
+        labelfor: {
             control: 'text',
-            description: 'Radio group name',
+            description: 'default',
         },
         input_id: {
             control: 'text',
-            description: 'Unique ID for input',
+            description: 'default',
         },
         checked: {
             control: 'boolean',
@@ -62,14 +53,14 @@ To use the \`dda-radiobutton\` component, pass the following props:
         },
         size: {
             control: { type: 'select' },
-            options: ['small', 'default'],
+            options: ['sm', 'md', 'lg',],
         },
         variants: {
             control: { type: 'select' },
-            options: ['normal', 'outlined', 'faded'],
+            options: ['normal', 'outlined', 'faded',],
         },
         custom_class: {
-            control: 'text',
+            control: { type: 'text' },
         },
         component_mode: {
             control: { type: 'check' },
@@ -77,48 +68,51 @@ To use the \`dda-radiobutton\` component, pass the following props:
             description: 'Mode of the radio button component',
         },
         aria_label: {
-            control: 'text',
+            control: { type: 'text' },
             description: 'Aria label for the radio button',
+            radio_status: {
+                control: { type: 'select' },
+                options: ['normal', 'disabled'],
+            },
+            onclick: {
+                control: { type: 'text' },
+                description: 'event handler for radio button',
+            }
         },
-        radio_status: {
-            control: { type: 'select' },
-            options: ['normal', 'disabled'],
-        },
-    },
+    }
 };
 const Template = (args) => {
-    const container = document.createElement('div');
-    const radio = document.createElement('dda-radiobutton');
-    Object.entries(args).forEach(([key, value]) => {
-        if (typeof value === 'boolean') {
-            if (value)
-                radio.setAttribute(key, '');
-        }
-        else if (value !== undefined && value !== '') {
-            radio.setAttribute(key, String(value));
-        }
-    });
-    radio.addEventListener('radioChange', action('radioChange'));
-    container.appendChild(radio);
-    return container;
+    const attributes = Object.entries(args)
+        .filter(([key, value]) => value !== undefined && key !== 'text')
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(' ');
+    return `<dda-radiobutton ${attributes}></dda-radiobutton>`;
 };
 export const DefaultRadio = Template.bind({});
 DefaultRadio.args = {
     title_text: 'Radio Button Title',
     checked: false,
-    size: 'default',
+    size: 'md',
     variants: 'normal',
     supporting: 'Supporting Text',
-    error_message: 'Error text',
-    validation_id: 'validationId',
     group_name: 'radiogroup',
-    input_id: 'testId1',
+    input_id: 'testId',
     custom_class: '',
     component_mode: '',
     aria_label: 'radio-button',
-    validation_type: 'normal',
-    radio_status: 'normal',
+    onclick: '',
 };
 export const CheckedRadio = Template.bind({});
-CheckedRadio.args = Object.assign(Object.assign({}, DefaultRadio.args), { checked: true, input_id: 'testId2' });
-//# sourceMappingURL=dda-radiobutton.stories.js.map
+CheckedRadio.args = {
+    title_text: 'Radio Button Title',
+    checked: true,
+    size: 'md',
+    variants: 'normal',
+    supporting: 'Supporting Text',
+    group_name: 'radiogroup',
+    input_id: 'testId',
+    custom_class: '',
+    component_mode: '',
+    aria_label: 'radio-button',
+    onclick: '',
+};