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

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

@@ -7,9 +7,22 @@ export class DdaAlert {
         this.description = '';
         this.button_text = '';
         this.custom_class = '';
+        this.firstClickHandler = () => {
+            this.firstClick.emit();
+        };
+        this.secondClickHandler = () => {
+            this.secondClick.emit();
+        };
+    }
+    // F-012: no role anywhere meant a screen reader user was never told an
+    // alert appeared. `error` is urgent enough to interrupt (role="alert",
+    // assertive); the rest are confirmations/notices that should announce
+    // politely (role="status") without stealing focus or cutting off speech.
+    get role() {
+        return this.variation === 'error' ? 'alert' : 'status';
     }
     render() {
-        return (h("div", { key: '576f8eb2265d02bda9c3a1b680ef3fadd36f9689', class: `dda-alert dda-alert-${this.type} dda-alert-${this.variation} ${this.custom_class} ${this.component_mode}` }, h("i", { key: 'e28e0d134ee9798b2c1e481f731af23749622263', class: "material-icons" }, "info"), h("div", { key: '2b3452a1436c245551f940ab1a31adeba3ccc5cc', class: "alert-content" }, h("h4", { key: '552cddbf948f3b3b1b6eaeafbf9860b147c51dd6', class: "alert-title" }, this.title_text), h("p", { key: '19ec82c2c15a6e8ba6e9dd385bf9957bd262f91a', class: "alert-description" }, this.description), h("div", { key: 'f62732e813c80723df75c236e5a4497a45244b00', class: "alert-btn-wrap" }, h("a", { key: '8a446f6e88a2811cc1cddd1b2705c040e5062ce1', href: this.first_link }, "Secondary"), h("a", { key: '9f4003e6beefbeb0f27c375a5a85d14abda383e5', href: this.second_link }, "Primary"))), h("button", { key: '074180d05a7a853b22d76875a5b0bef4426fb0f1', class: "dda-alert-close", onClick: this.clickHandler }, h("i", { key: '8ca6d9040b566dd4c1b9afa1a13b127d3e282df3', class: "material-icons" }, "close"))));
+        return (h("div", { key: '60117a2d214eb0ad0c93abd2754ccdb911d0cfe6', role: this.role, class: `dda-alert dda-alert-${this.type} dda-alert-${this.variation} ${this.custom_class} ${this.component_mode}` }, h("i", { key: '001fea32dfde3e298ebf380da19d2bb66fd41b4a', class: "material-icons  material-symbols-outlined" }, "info"), h("div", { key: '1f354740327bc8c920bd061eb2c9d19d72b149a6', class: "alert-content" }, h("h4", { key: 'e964051c31405ab754ce11f0888c2745006d470e', class: "alert-title" }, this.title_text), h("p", { key: '452d099aab0de9dfdaedb7c8b2cf94253909fc79', class: "alert-description" }, this.description), h("div", { key: '0244d7586ee53984f8cc1c35131f99007f396db7', class: "alert-btn-wrap" }, !!this.first_button && (h("a", { key: 'e0f7093bfe15b7a145ec430376a90d1b8313d1ea', href: this.first_link, onClick: () => this.firstClickHandler() }, this.first_button)), !!this.second_button && (h("a", { key: '04c9b26544c6079f69f0e715123284cfcd6def11', href: this.second_link, onClick: () => this.secondClickHandler() }, this.second_button)))), h("button", { key: '2ee84dfbb52b2b9414d06ef5ddf674269ab16f25', name: this.button_name, class: "dda-alert-close", onClick: this.clickHandler }, h("i", { key: '7e8c774907624e7c86b1dfb3ef5b2a3b0d4883f6', class: "material-icons  material-symbols-outlined" }, "close"))));
     }
     static get is() { return "dda-alert"; }
     static get originalStyleUrls() {
@@ -40,8 +53,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'primary'"
             },
             "variation": {
@@ -60,8 +73,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
+                "attribute": "variation",
                 "defaultValue": "'info'"
             },
             "title_text": {
@@ -80,8 +93,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title_text",
                 "reflect": false,
+                "attribute": "title_text",
                 "defaultValue": "''"
             },
             "description": {
@@ -100,8 +113,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
                 "reflect": false,
+                "attribute": "description",
                 "defaultValue": "''"
             },
             "button_text": {
@@ -120,8 +133,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_text",
                 "reflect": false,
+                "attribute": "button_text",
                 "defaultValue": "''"
             },
             "custom_class": {
@@ -140,8 +153,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -160,8 +173,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "component_id": {
                 "type": "string",
@@ -179,8 +192,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_id"
             },
             "first_link": {
                 "type": "string",
@@ -198,8 +211,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "first_link",
-                "reflect": false
+                "reflect": false,
+                "attribute": "first_link"
             },
             "second_link": {
                 "type": "string",
@@ -217,8 +230,65 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "second_link",
-                "reflect": false
+                "reflect": false,
+                "attribute": "second_link"
+            },
+            "first_button": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first_button"
+            },
+            "second_button": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "second_button"
+            },
+            "button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button_name"
             },
             "clickHandler": {
                 "type": "unknown",
@@ -244,5 +314,37 @@ export class DdaAlert {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "firstClick",
+                "name": "firstClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "secondClick",
+                "name": "secondClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
 }
-//# sourceMappingURL=dda-alert.js.map

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

@@ -5,24 +5,25 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-alert\` component, pass the following props:
-
-\`\`\`html
-    
-<dda-alert
-    type="primary"
-    variation="info"
-    title_text="Alert Title"
-    description="This is an informational alert."
-    button_text="Learn more"
-    custom_class=""
-    component_mode=""
-    first_link=""
-    second_link=""
-    onclick="console.log("clicked!")">
-</dda-alert>
-\`\`\`
+                component: `
+To use the \`dda-alert\` component, pass the following props:
+
+\`\`\`html
+    
+<dda-alert
+    type="primary"
+    variation="info"
+    title_text="Alert Title"
+    description="This is an informational alert."
+    button_text="Learn more"
+    custom_class=""
+    component_mode=""
+    first_link=""
+    second_link=""
+    button_name=""
+    onclick="console.log("clicked!")">
+</dda-alert>
+\`\`\`
 `,
             },
         },
@@ -43,6 +44,7 @@ To use the \`dda-alert\` component, pass the following props:
         button_text: { control: 'text', description: 'Button text' },
         first_link: { control: 'text', description: 'link' },
         second_link: { control: 'text', description: 'link' },
+        button_name: { control: 'text', description: 'Button name' },
         custom_class: {
             control: { type: 'text' },
             description: 'Custom class to be applied to the accordion'
@@ -54,20 +56,21 @@ To use the \`dda-alert\` component, pass the following props:
         },
     },
 };
-const Template = ({ type, variation, title_text, description, button_text, custom_class, component_mode, first_link, second_link, onclick }) => html `
-  <dda-alert
-    type=${type}
-    variation=${variation}
-    title_text=${title_text}
-    description=${description}
-    button_text=${button_text}
-    custom_class=${custom_class}
-    component_mode=${component_mode}
-    first_link=${first_link}
-    second_link=${second_link}
-    onclick=${onclick}
-  >
-  </dda-alert>
+const Template = ({ type, variation, title_text, description, button_text, button_name, custom_class, component_mode, first_link, second_link, onclick }) => html `
+  <dda-alert
+    type=${type}
+    variation=${variation}
+    title_text=${title_text}
+    description=${description}
+    button_text=${button_text}
+    custom_class=${custom_class}
+    component_mode=${component_mode}
+    first_link=${first_link}
+    second_link=${second_link}
+    onclick=${onclick}
+    button_name=${button_name}
+  >
+  </dda-alert>
 `;
 export const AlertInfo = Template.bind({});
 AlertInfo.args = {
@@ -76,6 +79,7 @@ AlertInfo.args = {
     title_text: 'Alert Title',
     description: 'This is an informational alert.',
     button_text: 'Learn more',
+    button_name: 'button',
     custom_class: '',
     component_mode: '',
     first_link: '',
@@ -89,6 +93,7 @@ AlertWarning.args = {
     title_text: 'Alert Title',
     description: 'This is an informational alert.',
     button_text: 'Learn more',
+    button_name: 'button',
     custom_class: '',
     component_mode: '',
     first_link: '',
@@ -102,6 +107,7 @@ AlertError.args = {
     title_text: 'Alert Title',
     description: 'This is an informational alert.',
     button_text: 'Learn more',
+    button_name: 'button',
     custom_class: '',
     component_mode: '',
     first_link: '',
@@ -115,10 +121,10 @@ AlertSuccess.args = {
     title_text: 'Alert Title',
     description: 'This is an informational alert.',
     button_text: 'Learn more',
+    button_name: 'button',
     custom_class: '',
     component_mode: '',
     first_link: '',
     second_link: '',
     onclick: "console.log('clicked')",
 };
-//# sourceMappingURL=dda-alert.stories.js.map

package/dist/collection/components/dda-attach-file/dda-attach-file.js

@@ -41,6 +41,21 @@ export class DdaAttachFile {
         const extension = fileName.split('.').pop().toLowerCase();
         return this.fileIcons[extension] || 'path/to/default-icon.png';
     }
+    // F-016: ids derived from the consumer-supplied input_id, same pattern as
+    // dda-input/dda-select.
+    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;
+    }
     render() {
         const inputClass = [
             'dda-input-container',
@@ -50,7 +65,7 @@ export class DdaAttachFile {
             this.custom_class,
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'dc6fb6714c3960aaa878cbb7deeb648924ae333e' }, h("div", { key: '789c997425a01f43d5682a1f19c0d715f3d1b4d4', class: inputClass }, this.label && h("label", { key: 'f31c9809aaba36dbeacf10dff7adeef38bd90a46', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'e42029856ca3da1057070f4949ff63a9ee143ed0', class: "dda-input-field-group dda-attach-file" }, this.file ? (h("div", { class: "dda-file-details" }, h("div", { class: "dda-items" }, h("img", { src: this.getFileIcon(this.file.name), alt: "File Icon", class: "dda-file-icon" }), h("span", { class: "dda-file-name" }, this.file.name)), h("button", { id: this.button_id, "aria-label": this.button_aria_label, class: "remove-file", onClick: () => this.removeFile() }, h("i", { class: "material-icons", "aria-hidden": "true" }, "close")))) : (h("div", { class: "dda-file-input" }, h("span", null, "No File Selected"), h("label", { htmlFor: this.input_id, class: "dda-file-choose" }, "Choose File", h("input", { id: this.input_id, "aria-label": this.aria_label, type: "file", onInput: (event) => { this.handleFileInput(event); } }))))), this.helper_text && h("span", { key: 'b3445d31deaffd28892949b280ceaf90147a49ae', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'bb2b3c61cb6462153b19b4f2f9f841311fd8e412', class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '02b1e08ea2bf657fb54e1a7506852f696658eb4c' }, h("div", { key: 'ea657b0a3bc0196edb10dc22006f378df968e92e', class: inputClass }, this.label && h("label", { key: 'b21659aae1c9906c2a74603eeada8a329ebdbb81', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: '907242aa03fa4723528545687a096e0224b34bc0', class: "dda-input-field-group dda-attach-file" }, this.file ? (h("div", { class: "dda-file-details" }, h("div", { class: "dda-items" }, h("img", { src: this.getFileIcon(this.file.name), alt: "File Icon", class: "dda-file-icon" }), h("span", { class: "dda-file-name" }, this.file.name)), h("button", { id: this.button_id, name: this.button_name, "aria-label": this.button_aria_label, class: "remove-file", onClick: () => this.removeFile() }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))) : (h("div", { class: "dda-file-input" }, h("span", null, "No File Selected"), h("label", { htmlFor: this.input_id, class: "dda-file-choose" }, "Choose File", h("input", { id: this.input_id, name: this.input_name, "aria-label": this.aria_label, type: "file", onInput: (event) => { this.handleFileInput(event); }, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }))))), this.helper_text && h("span", { key: '14f2a6f6ed78d54b4edb2afe7057f5caf4127356', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '513cdbc27c0dc0ca1edf1026d4e6447090f5e2b6', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-attach-file"; }
     static get originalStyleUrls() {
@@ -81,8 +96,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "helper_text": {
                 "type": "string",
@@ -100,8 +115,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "error_message": {
                 "type": "string",
@@ -119,8 +134,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "size": {
                 "type": "string",
@@ -138,8 +153,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "validation_type": {
                 "type": "string",
@@ -157,8 +172,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "validation_type"
             },
             "input_type": {
                 "type": "string",
@@ -176,8 +191,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_type"
             },
             "custom_class": {
                 "type": "string",
@@ -195,8 +210,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -215,8 +230,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "aria_label": {
                 "type": "string",
@@ -234,8 +249,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
                 "reflect": false,
+                "attribute": "aria_label",
                 "defaultValue": "''"
             },
             "button_aria_label": {
@@ -254,8 +269,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_aria_label",
                 "reflect": false,
+                "attribute": "button_aria_label",
                 "defaultValue": "''"
             },
             "input_id": {
@@ -274,8 +289,8 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "button_id": {
                 "type": "string",
@@ -293,8 +308,46 @@ export class DdaAttachFile {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
+            },
+            "button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button_name"
+            },
+            "input_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input_name"
             }
         };
     }
@@ -304,4 +357,3 @@ export class DdaAttachFile {
         };
     }
 }
-//# sourceMappingURL=dda-attach-file.js.map

package/dist/collection/components/dda-attach-file/dda-attach-file.stories.js

@@ -4,26 +4,28 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-attach-file\` component, pass the following props:
-  
-  \`\`\`html
-<dda-attach-file
-    label="Attach File"
-    helper_text="Helper or footer text"
-    error_message=""
-    size="default"
-    validation_type="normal"
-    input_type="normal"
-    custom_class=""
-    component_mode=""
-    input_id="input"
-    button_id="button"
-    aria_label="input"
-    button_aria_label="button"
-    onchange="console.log('changed')"
-></dda-attach-file>
-    \`\`\`
+                component: `
+  To use the \`dda-attach-file\` component, pass the following props:
+  
+  \`\`\`html
+<dda-attach-file
+    label="Attach File"
+    helper_text="Helper or footer text"
+    error_message=""
+    size="default"
+    validation_type="normal"
+    input_type="normal"
+    custom_class=""
+    component_mode=""
+    input_id="input"
+    button_id="button"
+    aria_label="input"
+    button_aria_label="button"
+    button_name="button"
+    input_name="input"
+    onchange="console.log('changed')"
+></dda-attach-file>
+    \`\`\`
   `,
             },
         },
@@ -84,6 +86,14 @@ export default {
         onchange: {
             control: 'text',
             description: 'onchange event for the attach file component',
+        },
+        button_name: {
+            control: 'text',
+            description: 'Name for the upload button',
+        },
+        input_name: {
+            control: 'text',
+            description: 'Name for the input field',
         }
     },
 };
@@ -109,6 +119,8 @@ Default.args = {
     aria_label: 'input',
     button_aria_label: 'button',
     onchange: '',
+    button_name: 'button',
+    input_name: 'input'
 };
 export const Small = Template.bind({});
 Small.args = {
@@ -125,6 +137,8 @@ Small.args = {
     aria_label: 'input',
     button_aria_label: 'button',
     onchange: '',
+    button_name: 'button',
+    input_name: 'input'
 };
 export const ErrorState = Template.bind({});
 ErrorState.args = {
@@ -141,6 +155,8 @@ ErrorState.args = {
     aria_label: 'input',
     button_aria_label: 'button',
     onchange: '',
+    button_name: 'button',
+    input_name: 'input'
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -157,5 +173,6 @@ Disabled.args = {
     aria_label: 'input',
     button_aria_label: 'button',
     onchange: '',
+    button_name: 'button',
+    input_name: 'input'
 };
-//# sourceMappingURL=dda-attach-file.stories.js.map