@dubai-design-system/components-js 4.1.0 → 5.0.0

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

@@ -23,29 +23,50 @@ export default {
         },
         button_id: {
             control: { type: 'text' },
-            description: 'default',
+            description: 'Button ID for accessibility',
         },
         aria_label: {
             control: { type: 'text' },
             description: 'Aria label for the tabs component',
         },
+        tab_texts: {
+            control: { type: 'array' },
+            description: 'Array of tab labels',
+        },
+        onTabClick: {
+            action: 'tab-clicked',
+            description: 'Callback function when a tab is clicked',
+        },
+        button_name: {
+            control: { type: 'text' },
+            description: 'Button name for the tabs',
+        }
     },
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-tabs\` component, pass the following props:
-
-  \`\`\`html
-    <dda-tabs
-      type="text"
-      hover_style="dda-tab-default"
-      custom_class=""
-      component_mode=""
-      button_id="button"
-      aria_label="tabs"
-  ></dda-tabs>
-  \`\`\`
+                component: `
+  To use the \`dda-tabs\` component, pass the following props:
+
+  \`\`\`html
+    <dda-tabs
+      type="text"
+      hover_style="dda-tab-default"
+      custom_class=""
+      component_mode=""
+      button_id="button"
+      aria_label="tabs"
+      tab_texts='["Tab 1", "Tab 2", "Tab 3"]'
+      onTabClick="handleTabClick"
+      button_name="button"
+    ></dda-tabs>
+
+    <script>
+      function handleTabClick(index) {
+        console.log('Clicked Tab:', index);
+      }
+    </script>
+  \`\`\`
   `,
             },
         },
@@ -54,7 +75,7 @@ export default {
 const Template = (args) => {
     const attributes = Object.entries(args)
         .filter(([key, value]) => value !== undefined && key !== 'text')
-        .map(([key, value]) => `${key}="${value}"`)
+        .map(([key, value]) => Array.isArray(value) ? `${key}='${JSON.stringify(value)}'` : `${key}="${value}"`)
         .join(' ');
     return `<dda-tabs ${attributes}></dda-tabs>`;
 };
@@ -66,6 +87,9 @@ TextTabs.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'tabs',
+    tab_texts: ['Tab 1', 'Tab 2', 'Tab 3'],
+    onTabClick: (index) => alert(`Tab ${index + 1} clicked!`), // Example event
+    button_name: 'button',
 };
 export const TextIconTabs = Template.bind({});
 TextIconTabs.args = {
@@ -75,5 +99,7 @@ TextIconTabs.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'tabs',
+    tab_texts: ['Tab 1', 'Tab 2', 'Tab 3'],
+    onTabClick: (index) => alert(`Tab ${index + 1} clicked!`), // Example event
+    button_name: 'button',
 };
-//# sourceMappingURL=dda-tabs.stories.js.map

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

@@ -6,9 +6,64 @@ export class DdaTextarea {
         this.value = '';
         this.characterCount = 0; // State to track the character count
     }
+    // F-016: ids derived from the consumer-supplied input_id (same pattern as
+    // dda-input/dda-select). F-015: the rich-editor container also needs a
+    // stable label id to point aria-labelledby at.
+    get labelId() {
+        return this.input_id ? `${this.input_id}-label` : undefined;
+    }
+    get helperId() {
+        return this.input_id ? `${this.input_id}-helper` : undefined;
+    }
+    get errorId() {
+        return this.input_id ? `${this.input_id}-error` : undefined;
+    }
+    get describedBy() {
+        const ids = [
+            this.helper_text ? this.helperId : undefined,
+            this.error_message ? this.errorId : undefined,
+        ].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
+    }
+    // F-015: Quill does not make the container passed to `new Quill(...)`
+    // editable — it mounts its real editable surface as a child `.ql-editor`
+    // div with contenteditable="true" (that's what Tab actually lands on, per
+    // the pre-existing focus-ring e2e test below). aria-labelledby/role/etc.
+    // on the container never reach an AT's accessible-name computation for a
+    // descendant, so the label/description/invalid-state must be applied
+    // directly to quill.root (the `.ql-editor` element) after mount, and kept
+    // in sync whenever the driving props change.
+    syncRichEditorA11y() {
+        if (!this.quill) {
+            return;
+        }
+        const editorEl = this.quill.root;
+        editorEl.setAttribute('role', 'textbox');
+        editorEl.setAttribute('aria-multiline', 'true');
+        if (this.labelId) {
+            editorEl.setAttribute('aria-labelledby', this.labelId);
+        }
+        else {
+            editorEl.removeAttribute('aria-labelledby');
+        }
+        if (this.describedBy) {
+            editorEl.setAttribute('aria-describedby', this.describedBy);
+        }
+        else {
+            editorEl.removeAttribute('aria-describedby');
+        }
+        if (this.error_message) {
+            editorEl.setAttribute('aria-invalid', 'true');
+        }
+        else {
+            editorEl.removeAttribute('aria-invalid');
+        }
+    }
     componentDidLoad() {
         if (this.enable_rich_editor) {
-            const editor = this.el.querySelector('#editor');
+            // F-015: was `#editor` — the id is now the consumer-supplied
+            // input_id (possibly undefined), so target the stable class instead.
+            const editor = this.el.querySelector('.dda-richeditor-field');
             this.quill = new Quill(editor, {
                 modules: {
                     toolbar: [
@@ -33,6 +88,12 @@ export class DdaTextarea {
                 this.value = this.quill.root.innerHTML;
                 this.characterCount = this.quill.getText().length - 1; // Update character count
             });
+            this.syncRichEditorA11y();
+        }
+    }
+    componentDidUpdate() {
+        if (this.enable_rich_editor) {
+            this.syncRichEditorA11y();
         }
     }
     handleInput(event) {
@@ -46,9 +107,17 @@ export class DdaTextarea {
             'dda-input-container dda-richtext-editor',
             this.validation_type ? `dda-validation-${this.validation_type}` : '',
             this.input_status ? `dda-input-${this.input_status}` : '',
-            this.custom_class, this.component_mode,
+            this.custom_class, this.component_mode, this.textarea_name,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '7bee48793cd3f34aa772b73e14b248b31aa5d3ac' }, h("div", { key: '2afd7544ed0bda7aa594645621f48e910f328436', class: textareaClass }, this.label && h("label", { key: '346103116dab06064a4dcb199137e26e0c6c2a01', htmlFor: this.input_id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (h("div", { id: "editor", class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_id, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters })), this.helper_text && (h("div", { key: '134a8a806db43fea6e0cd8a8c6fba64d2428d64f', class: "dda-helper-text" }, h("span", { key: '7128adc4d9438fd86c2216ca91f3612360560104', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '9214c3e23948407d879c0630dc12224bae25f8b9', class: "material-icons" }, "info"), " ", this.helper_text), h("span", { key: '2789f69e06ee0a4dedab75f0d1e1657eaea73d3f', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '132917bf28667dea2199528d3faec994720e6be1', class: "dda-error-message" }, h("span", { key: 'c5ccd1d08d899b37c766c19d56ac5107702072ef', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '1d5628db0b0685c58c788ce1cd614fbe26f085aa', class: "material-icons" }, "info"), " ", this.error_message), h("span", { key: '1e218728f685ede87b178dc5ac6c32fbab38a4cc', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
+        return (h(Host, { key: '622c5d071b6bc1a27d98bcce0b2e1103c2cd56b8' }, h("div", { key: '48c2d05b77ef1d8badd31382cb6669d8cc23e46d', class: textareaClass }, this.label && h("label", { key: '6d659cd684ff5afa46ceee22cc33dcdf0995f722', id: this.labelId, htmlFor: this.input_id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
+        // F-015: previously a bare `<div id="editor">` — the visible
+        // label's `for` cannot target a non-labelable <div>, and even
+        // aria-labelledby here would be wrong: Quill turns this
+        // container into a wrapper and mounts the real editable surface
+        // as a child `.ql-editor`, which is what AT and Tab actually
+        // land on. The ARIA lives on quill.root (.ql-editor), applied
+        // imperatively in syncRichEditorA11y() after mount.
+        h("div", { id: this.input_id, class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && (h("div", { key: '6d6733d1b96b26acd713f2bdb230a6ecc93e746d', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '6e11cfb6dcc23a17fce5723d3a5e3b6cc8aef3b4', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '0946a74fbf33efb08ce50810b932595341f11b0c', class: "material-icons  material-symbols-outlined" }, "info"), " ", this.helper_text), h("span", { key: 'ef8e61d7fae106951d802253afa962ed82096022', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '539ade6c788aa436587936ccf60a55e025752f18', id: this.errorId, class: "dda-error-message" }, h("span", { key: '25ec27d18994c0a83deb589bb5e407734a03526b', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '40d501e7d690a5525f17c36a7ea7b4114a8515e3', class: "material-icons  material-symbols-outlined" }, "info"), " ", this.error_message), h("span", { key: '191a2521e12bebe37d874f501bfe21d40d183487', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
     }
     static get is() { return "dda-textarea"; }
     static get originalStyleUrls() {
@@ -79,8 +148,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "label": {
                 "type": "string",
@@ -98,8 +167,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "value": {
                 "type": "string",
@@ -117,8 +186,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "error_message": {
@@ -137,8 +206,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "validation_type": {
                 "type": "string",
@@ -156,8 +225,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "validation_type"
             },
             "input_status": {
                 "type": "string",
@@ -175,8 +244,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_status",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_status"
             },
             "helper_text": {
                 "type": "string",
@@ -194,8 +263,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "custom_class": {
                 "type": "string",
@@ -213,8 +282,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false
+                "reflect": false,
+                "attribute": "custom_class"
             },
             "enable_rich_editor": {
                 "type": "boolean",
@@ -232,8 +301,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "enable_rich_editor",
-                "reflect": false
+                "reflect": false,
+                "attribute": "enable_rich_editor"
             },
             "max_characters": {
                 "type": "number",
@@ -251,8 +320,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max_characters",
-                "reflect": false
+                "reflect": false,
+                "attribute": "max_characters"
             },
             "component_mode": {
                 "type": "string",
@@ -270,8 +339,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "input_id": {
                 "type": "string",
@@ -289,8 +358,8 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "aria_label": {
                 "type": "string",
@@ -308,8 +377,27 @@ export class DdaTextarea {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
+            },
+            "textarea_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "textarea_name"
             }
         };
     }
@@ -320,4 +408,3 @@ export class DdaTextarea {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=dda-textarea.js.map

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

@@ -60,29 +60,34 @@ export default {
         onchange: {
             control: { type: 'text' },
             description: 'onchange event for the textarea field',
+        },
+        textarea_name: {
+            control: { type: 'text' },
+            description: 'Name of the textarea field',
         }
     },
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-textarea\` component, pass the following props:
-
-  \`\`\`html
-<dda-textarea
-    placeholder="Enter description"
-    label="Description"
-    max_characters="200"
-    value=""
-    helper_text="This is a helper text"
-    error_message=""
-    custom_class=""
-    component_mode=""
-    input_id="input"
-    aria_label="textarea"
-    onchange="console.log('changed')"
-></dda-textarea>
-  \`\`\`
+                component: `
+  To use the \`dda-textarea\` component, pass the following props:
+
+  \`\`\`html
+<dda-textarea
+    placeholder="Enter description"
+    label="Description"
+    max_characters="200"
+    value=""
+    helper_text="This is a helper text"
+    error_message=""
+    custom_class=""
+    component_mode=""
+    input_id="input"
+    aria_label="textarea"
+    onchange="console.log('changed')"
+    textarea_name="textarea-name"
+></dda-textarea>
+  \`\`\`
   `,
             },
         },
@@ -108,6 +113,7 @@ Default.args = {
     input_id: 'input',
     aria_label: 'textarea',
     onchange: '',
+    textarea_name: "textarea-name",
 };
 export const WithErrorMessage = Template.bind({});
 WithErrorMessage.args = {
@@ -122,6 +128,7 @@ WithErrorMessage.args = {
     input_id: 'input',
     aria_label: 'textarea',
     onchange: '',
+    textarea_name: "textarea-name",
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -136,6 +143,7 @@ Disabled.args = {
     input_id: 'input',
     aria_label: 'textarea',
     onchange: '',
+    textarea_name: "textarea-name",
 };
 export const RichEditorEnabled = Template.bind({});
 RichEditorEnabled.args = {
@@ -150,5 +158,5 @@ RichEditorEnabled.args = {
     input_id: 'input',
     aria_label: 'textarea',
     onchange: '',
+    textarea_name: "textarea-name",
 };
-//# sourceMappingURL=dda-textarea.stories.js.map

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

@@ -1,120 +1,120 @@
-.dda-toggle-btn {
-  display: inline-flex;
-  align-items: flex-start;
-  cursor: pointer;
-  position: relative;
-  gap: 10px;
-}
-.dda-toggle-btn p{
-  margin: 0;
-}
-.dda-toggle-btn .toggle {
-  width: 35px;
-  height: 20px;
-  vertical-align: sub;
-  display: inline-block;
-  background: var(--dda-neutral-variant-90);
-  border-radius: 60px;
-  cursor: pointer;
-  margin: 0px;
-  position: relative;
-}
-.dda-toggle-btn input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-.dda-toggle-btn .toggle::after {
-  content: "";
-  position: absolute;
-  display: block;
-  -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-  -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-  -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-  background: var(--dda-neutral-100);
-  height: 16px;
-  width: 16px;
-  top: 2px;
-  left: 2px;
-  border-radius: 60px;
-}
-.dda-toggle-btn input:checked~.toggle{
-  background: var(--dda-color-primary-40);
-  -webkit-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
-  -moz-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
-  box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
-}
-.light-mode.dda-toggle-btn input:checked~.toggle{
-  background: var(--dda-primary-40);
-}
-.dda-toggle-btn input:checked~.toggle::after {
-  left: 17px;
-}
-
-.dda-toggle-sm .toggle{
-  width: 27px;
-  height: 16px;
-}
-.dda-toggle-sm .toggle::after{
-  width: 12px;
-  height: 12px;
-}
-.dda-toggle-sm input:checked~.toggle::after {
-  left: 13px;
-}
-
-.dda-toggle-md .toggle{
-  width: 35px;
-  height: 20px;
-}
-.dda-toggle-md .toggle::after{
-  height: 16px;
-  width: 16px;
-}
-.dda-toggle-md input:checked~.toggle::after {
-  left: 17px;
-}
-
-.dda-toggle-lg .toggle{
-  width: 45px;
-  height: 24px;
-}
-.dda-toggle-lg .toggle::after{
-  height: 20px;
-  width: 20px;
-}
-.dda-toggle-lg input:checked~.toggle::after {
-  left: 23px;
-}
-
-.toggle-title{
-  color: var(--dda-on-surface-0);
-  font-weight: var(--dda-fw-500);
-  display: block;
-}
-.light-mode .toggle-title{
-  color: var(--dda-neutral-0);
-}
-.toggle-supporting{
-  display: block;
-  color: var(--dda-on-surface-variant-30);
-}
-.light-mode .toggle-supporting{
-  color: var(--dda-neutral-variant-30);
-}
-.dda-toggle-sm .toggle-title, .dda-toggle-md .toggle-title{
-  font-size: var(--dda-fs-body-lg);
-}
-.dda-toggle-sm .toggle-supporting {
-  font-size: var(--dda-fs-label-lg);
-}
-.dda-toggle-lg .toggle-title {
-  font-size: var(--dda-fs-title-sm);
-}
-.dda-toggle-md .toggle-supporting,
-.dda-toggle-lg .toggle-supporting{
-  font-size: var(--dda-fs-body-lg);
+.dda-toggle-btn {
+  display: inline-flex;
+  align-items: flex-start;
+  cursor: pointer;
+  position: relative;
+  gap: 10px;
+}
+.dda-toggle-btn p{
+  margin: 0;
+}
+.dda-toggle-btn .toggle {
+  width: 35px;
+  height: 20px;
+  vertical-align: sub;
+  display: inline-block;
+  background: var(--dda-neutral-variant-90);
+  border-radius: 60px;
+  cursor: pointer;
+  margin: 0px;
+  position: relative;
+}
+.dda-toggle-btn input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.dda-toggle-btn .toggle::after {
+  content: "";
+  position: absolute;
+  display: block;
+  -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  background: var(--dda-neutral-100);
+  height: 16px;
+  width: 16px;
+  top: 2px;
+  left: 2px;
+  border-radius: 60px;
+}
+.dda-toggle-btn input:checked~.toggle{
+  background: var(--dda-color-primary-40);
+  -webkit-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
+  -moz-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
+  box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
+}
+.light-mode.dda-toggle-btn input:checked~.toggle{
+  background: var(--dda-primary-40);
+}
+.dda-toggle-btn input:checked~.toggle::after {
+  left: 17px;
+}
+
+.dda-toggle-sm .toggle{
+  width: 27px;
+  height: 16px;
+}
+.dda-toggle-sm .toggle::after{
+  width: 12px;
+  height: 12px;
+}
+.dda-toggle-sm input:checked~.toggle::after {
+  left: 13px;
+}
+
+.dda-toggle-md .toggle{
+  width: 35px;
+  height: 20px;
+}
+.dda-toggle-md .toggle::after{
+  height: 16px;
+  width: 16px;
+}
+.dda-toggle-md input:checked~.toggle::after {
+  left: 17px;
+}
+
+.dda-toggle-lg .toggle{
+  width: 45px;
+  height: 24px;
+}
+.dda-toggle-lg .toggle::after{
+  height: 20px;
+  width: 20px;
+}
+.dda-toggle-lg input:checked~.toggle::after {
+  left: 23px;
+}
+
+.toggle-title{
+  color: var(--dda-on-surface-0);
+  font-weight: var(--dda-fw-500);
+  display: block;
+}
+.light-mode .toggle-title{
+  color: var(--dda-neutral-0);
+}
+.toggle-supporting{
+  display: block;
+  color: var(--dda-on-surface-variant-30);
+}
+.light-mode .toggle-supporting{
+  color: var(--dda-neutral-variant-30);
+}
+.dda-toggle-sm .toggle-title, .dda-toggle-md .toggle-title{
+  font-size: var(--dda-fs-body-lg);
+}
+.dda-toggle-sm .toggle-supporting {
+  font-size: var(--dda-fs-label-lg);
+}
+.dda-toggle-lg .toggle-title {
+  font-size: var(--dda-fs-title-sm);
+}
+.dda-toggle-md .toggle-supporting,
+.dda-toggle-lg .toggle-supporting{
+  font-size: var(--dda-fs-body-lg);
 }