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

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

@@ -2,31 +2,27 @@ import { h, Host } from "@stencil/core";
 export class DdaCheckbox {
     constructor() {
         this.custom_class = '';
-        /** Handles checkbox change */
-        this.handleInputChange = (event) => {
-            const target = event.target;
-            this.checkboxChange.emit(target.checked);
-        };
     }
     render() {
         const checkboxClass = [
             'dda-checkbox-container',
+            this.size ? `dda-checkbox-${this.size}` : '',
             this.style_type ? `dda-checkbox-${this.style_type}` : '',
             this.custom_class ? this.custom_class : '',
             this.checkbox_status ? `dda-checkbox-${this.checkbox_status}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '62d5bb8496479ffa713d0a9f54da0a173c32e2a5' }, h("div", { key: '4e34ec1af36e01612a035baf5967177961308cff', class: checkboxClass }, h("input", { key: '6d13b9a173c33122243067b51c8dc9ef26fb5c0e', type: "checkbox", id: this.input_id, name: this.group_name, "aria-label": this.aria_label, checked: this.checked, onChange: this.handleInputChange }), h("label", { key: '1fadad451c42bd7d2e0ddc2348bfc633a523b981', htmlFor: this.input_id }, h("span", { key: 'cd33aeba1663e08178860664e3669ff4897d7691', class: "dda-check-square" }), h("p", { key: '104a8ab3ed30d278ee33507aeb9b11ad1b6d7944' }, h("span", { key: '6b75790941267a97ec4301729ede3e7520a66ad0', class: "dda-checkbox-title" }, this.title_text), this.supporting && (h("span", { key: '18f6e20e8d29f9dea2084ed375010cd00b46840d', class: "dda-checkbox-supporting" }, this.supporting)))))));
+        return (h(Host, { key: '4b8e8376bf784fd0ed1e918f0b5fdc4ebe7fd7ed' }, h("div", { key: 'f66aca291d7c0098979177e971aa758b82a5ffc9', class: checkboxClass }, h("input", { key: 'f243f679de75b492775c6e3a0b1ca1f0f3bfe423', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: 'f0c6cc39d19009132332d9c01a901b23c8f0a18c', htmlFor: this.input_id }, h("i", { key: 'b378cfa8cc108dcd6394472563afef4c3c87de13', class: "material-icons  material-symbols-outlined" }, "check"), h("p", { key: '416beeef5a24297c00221c6bfebef2778f0f26ac' }, h("span", { key: 'c62bf2fb6a703cace37b092d5f493ee1944f3e73', class: "dda-checkbox-title" }, this.title_text), this.supporting && h("span", { key: '846a087c01f8277af1f512c1de76e11a2fb95748', class: "dda-checkbox-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-checkbox"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dda-checkbox.css"]
+            "$": ["dda-checkbox.css", "../../global/global.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dda-checkbox.css"]
+            "$": ["dda-checkbox.css", "../../global/global.css"]
         };
     }
     static get properties() {
@@ -47,8 +43,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "title_text"
             },
             "supporting": {
                 "type": "string",
@@ -66,8 +62,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "supporting",
-                "reflect": false
+                "reflect": false,
+                "attribute": "supporting"
             },
             "group_name": {
                 "type": "string",
@@ -85,8 +81,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "group_name"
             },
             "input_id": {
                 "type": "string",
@@ -104,8 +100,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "checked": {
                 "type": "boolean",
@@ -123,8 +119,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
-                "reflect": false
+                "reflect": false,
+                "attribute": "checked"
             },
             "checkbox_status": {
                 "type": "string",
@@ -142,8 +138,27 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checkbox_status",
-                "reflect": false
+                "reflect": false,
+                "attribute": "checkbox_status"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
             },
             "style_type": {
                 "type": "string",
@@ -161,8 +176,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "style_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "style_type"
             },
             "custom_class": {
                 "type": "string",
@@ -180,8 +195,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -200,8 +215,8 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "aria_label": {
                 "type": "string",
@@ -219,28 +234,9 @@ export class DdaCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             }
         };
     }
-    static get events() {
-        return [{
-                "method": "checkboxChange",
-                "name": "checkboxChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits change event with current checked state"
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
 }
-//# sourceMappingURL=dda-checkbox.js.map

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

@@ -12,11 +12,15 @@ export default {
         },
         group_name: {
             control: 'text',
-            description: 'Name for checkbox group',
+            description: 'default',
+        },
+        labelfor: {
+            control: 'text',
+            description: 'default',
         },
         input_id: {
             control: 'text',
-            description: 'Unique ID for the input field',
+            description: 'default',
         },
         checked: {
             control: 'boolean',
@@ -25,16 +29,17 @@ export default {
         checkbox_status: {
             control: { type: 'select' },
             options: ['normal', 'disabled'],
-            description: 'Visual status indicator',
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg',],
         },
         style_type: {
             control: { type: 'select' },
-            options: ['fill', 'stroke'],
-            description: 'Visual style of the checkbox',
+            options: ['square', 'rounded',],
         },
         custom_class: {
             control: { type: 'text' },
-            description: 'Additional CSS classes',
         },
         component_mode: {
             control: { type: 'check' },
@@ -43,74 +48,70 @@ export default {
         },
         aria_label: {
             control: { type: 'text' },
-            description: 'ARIA label for accessibility',
+            description: 'Aria label for the checkbox',
         },
+        onclick: {
+            control: { type: 'text' },
+            description: 'Event handler for the checkbox component',
+        }
     },
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-checkbox\` component, pass the following props:
-
-\`\`\`html
-<dda-checkbox
-    title_text="Checkbox Title"
-    checked="false"
-    style_type="fill"
-    supporting="Supporting Text"
-    group_name="checkboxgroup"
-    input_id="testId"
-    custom_class=""
-    component_mode=""
-    aria_label="checkbox"
-></dda-checkbox>
-
-<!-- Listen for checkboxChange event -->
-<script>
-  document.querySelector('dda-checkbox').addEventListener('checkboxChange', e => {
-    console.log('Checkbox toggled:', e.detail);
-  });
-</script>
-\`\`\`
-        `,
+                component: `
+To use the \`dda-checkbox\` component, pass the following props:
+
+\`\`\`html
+<dda-checkbox
+    title_text="Checkbox Title"
+    checked="false"
+    size="md"
+    style_type="square"
+    supporting="Supporting Text"
+    group_name="checkboxgroup"
+    input_id="testId"
+    custom_class=""
+    component_mode=""
+    aria_label="checkbox"
+    onclick="console.log('Checkbox clicked')"
+></dda-checkbox>
+  \`\`\`
+`,
             },
         },
     },
 };
 const Template = (args) => {
-    const uniqueId = args.input_id || 'checkbox-demo-id';
-    // Create checkbox markup
     const attributes = Object.entries(args)
         .filter(([key, value]) => value !== undefined && key !== 'text')
         .map(([key, value]) => `${key}="${value}"`)
         .join(' ');
-    // Return wrapped HTML with event binding
-    return `
-      <dda-checkbox ${attributes}></dda-checkbox>
-      <script>
-        (() => {
-          const checkbox = document.getElementById("checkbox-${uniqueId}");
-          if (checkbox) {
-            checkbox.addEventListener("checkboxChange", function(e) {
-              console.log("Checkbox [${uniqueId}] changed to:", e.detail);
-            });
-          }
-        })();
-      </script>
-  `;
+    return `<dda-checkbox ${attributes}></dda-checkbox>`;
 };
-export const checkbox = Template.bind({});
-checkbox.args = {
+export const checkboxSquare = Template.bind({});
+checkboxSquare.args = {
     title_text: 'Checkbox Title',
     checked: false,
-    style_type: 'fill',
+    size: 'md',
+    style_type: 'square',
     supporting: 'Supporting Text',
     group_name: 'checkboxgroup',
-    input_id: 'checkboxOne',
-    aria_label: 'checkbox',
+    input_id: 'testId',
+    custom_class: '',
+    component_mode: '',
+    onclick: "",
+};
+export const checkboxRounded = Template.bind({});
+checkboxRounded.args = {
+    title_text: 'Checkbox Title',
+    checked: false,
+    size: 'md',
+    style_type: 'rounded',
+    supporting: 'Supporting Text',
+    group_name: 'checkboxgroup',
+    input_id: 'testId',
     custom_class: '',
     component_mode: '',
-    checkbox_status: 'normal',
-    checkboxChange: "",
+    aria_label: 'checkbox',
+    onclick: "",
 };
-//# sourceMappingURL=dda-checkbox.stories.js.map

package/dist/collection/components/dda-chip/dda-chip.css

@@ -1,109 +1,100 @@
-.dda-chip{
-  display: inline-flex;
-  height: 26px;
-  background: var(--dda-color-primary-95);
-  border: solid 1px var(--dda-color-primary-40);
-  color: var(--dda-color-primary-40);
-  align-items: center;
-  gap: 5px;
-  padding: 2px 8px;
-  border-radius: 6px; 
-}
-.dda-chip i{
-  font-size: 19px
-}
-.chip-icon-size-sm{
-  font-size: 12px !important;
-}
-.chip-icon-size-md{
-  font-size: 19px !important;
-}
-.chip-icon-size-lg{
-  font-size: 23px !important;
-}
-.dda-chip .circle{
-  font-size: 7px;
-}
-.dda-chip-grey{
-  background: var(--dda-neutral-variant-94);
-  border: solid 1px var(--dda-neutral-90);
-  color: var(--dda-on-surface-variant-30);
-}
-.light-mode.dda-chip-grey{
-  background: var(--dda-neutral-variant-94);
-  border: solid 1px var(--dda-neutral-90);
-  color: var(--dda-neutral-variant-30);
-}
-/**/
-.dda-chip-primary{
-  background: var(--dda-primary-variant-95);
-  border: solid 1px var(--dda-color-primary-40);
-  color: var(--dda-color-primary-40);
-}
-.light-mode.dda-chip-primary{
-  background: var(--dda-primary-95);
-  border: solid 1px var(--dda-primary-40);
-  color: var(--dda-primary-40);
-}
-/**/
-.dda-chip-green{
-  background: var(--dda-success-variant-95);
-  border: solid 1px var(--dda-color-success-40);
-  color: var(--dda-color-success-40);
-}
-.light-mode.dda-chip-green{
-  background: var(--dda-success-95);
-  border: solid 1px var(--dda-success-40);
-  color: var(--dda-success-40);
-}
-/**/
-.dda-chip-yellow{
-  background: var(--dda-warning-variant-95);
-  border: solid 1px var(--dda-color-warning-40);
-  color: var(--dda-color-warning-40);
-}
-.light-mode.dda-chip-yellow{
-  background: var(--dda-warning-95);
-  border: solid 1px var(--dda-warning-40);
-  color: var(--dda-warning-40);
-}
-/**/
-.dda-chip-red{
-  background: var(--dda-error-variant-95);
-  border: solid 1px var(--dda-color-error-40);
-  color: var(--dda-color-error-40);
-}
-.light-mode.dda-chip-red{
-  background: var(--dda-error-95);
-  border: solid 1px var(--dda-error-40);
-  color: var(--dda-error-40);
-}
-/**/
-.dda-chip-purple{
-  background: var(--dda-color-purple-variant);
-  border: solid 1px var(--dda-color-purple);
-  color: var(--dda-color-purple);
-}
-
-.dda-chip-sm{
-  height: 24px;
-}
-.dda-chip-md{
-  height: 26px;
-}
-.dda-chip-lg{
-  height: 32px;
-  padding: 2px 12px;
-}
-.dda-chip-square{
-  border-radius: 6px;
-}
-.dda-chip-circle{
-  border-radius: 40px;
-}
-
-.dda-chip .chip-close{
-  display: inline-flex;
-  cursor: pointer;
-}
-
+.dda-chip{
+  display: inline-flex;
+  height: 26px;
+  background: var(--dda-color-primary-95);
+  border: solid 1px var(--dda-color-primary-40);
+  color: var(--dda-color-primary-40);
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 6px; 
+}
+.dda-chip i{
+  font-size: 19px;
+}
+.dda-chip .circle{
+  font-size: 7px;
+}
+.dda-chip-grey{
+  background: var(--dda-neutral-variant-94);
+  border: solid 1px var(--dda-neutral-90);
+  color: var(--dda-on-surface-variant-30);
+}
+.light-mode.dda-chip-grey{
+  background: var(--dda-neutral-variant-94);
+  border: solid 1px var(--dda-neutral-90);
+  color: var(--dda-neutral-variant-30);
+}
+/**/
+.dda-chip-primary{
+  background: var(--dda-primary-variant-95);
+  border: solid 1px var(--dda-color-primary-40);
+  color: var(--dda-color-primary-40);
+}
+.light-mode.dda-chip-primary{
+  background: var(--dda-primary-95);
+  border: solid 1px var(--dda-primary-40);
+  color: var(--dda-primary-40);
+}
+/**/
+.dda-chip-green{
+  background: var(--dda-success-variant-95);
+  border: solid 1px var(--dda-color-success-40);
+  color: var(--dda-color-success-40);
+}
+.light-mode.dda-chip-green{
+  background: var(--dda-success-95);
+  border: solid 1px var(--dda-success-40);
+  color: var(--dda-success-40);
+}
+/**/
+.dda-chip-yellow{
+  background: var(--dda-warning-variant-95);
+  border: solid 1px var(--dda-color-warning-40);
+  color: var(--dda-color-warning-40);
+}
+.light-mode.dda-chip-yellow{
+  background: var(--dda-warning-95);
+  border: solid 1px var(--dda-warning-40);
+  color: var(--dda-warning-40);
+}
+/**/
+.dda-chip-red{
+  background: var(--dda-error-variant-95);
+  border: solid 1px var(--dda-color-error-40);
+  color: var(--dda-color-error-40);
+}
+.light-mode.dda-chip-red{
+  background: var(--dda-error-95);
+  border: solid 1px var(--dda-error-40);
+  color: var(--dda-error-40);
+}
+/**/
+.dda-chip-purple{
+  background: var(--dda-color-purple-50);
+  border: solid 1px var(--dda-color-purple);
+  color: var(--dda-color-purple);
+}
+
+.dda-chip-sm{
+  height: 24px;
+}
+.dda-chip-md{
+  height: 26px;
+}
+.dda-chip-lg{
+  height: 32px;
+  padding: 2px 12px;
+}
+.dda-chip-square{
+  border-radius: 6px;
+}
+.dda-chip-circle{
+  border-radius: 40px;
+}
+
+.dda-chip .chip-close{
+  display: inline-flex;
+  cursor: pointer;
+}
+