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

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

@@ -24,22 +24,82 @@ export default {
             options: ['light-mode'],
             description: 'Mode of the pagination component',
         },
+        simple_slider_prev_button: {
+            control: { type: 'text' },
+            description: 'Text for the previous button in simple slider mode',
+        },
+        simple_slider_next_button: {
+            control: { type: 'text' },
+            description: 'Text for the next button in simple slider mode',
+        },
+        buttons_prev_button: {
+            control: { type: 'text' },
+            description: 'Text for the previous button in buttons mode',
+        },
+        buttons_next_button: {
+            control: { type: 'text' },
+            description: 'Text for the next button in buttons mode',
+        },
+        text_prev_button: {
+            control: { type: 'text' },
+            description: 'Text for the previous button in text mode',
+        },
+        text_next_button: {
+            control: { type: 'text' },
+            description: 'Text for the next button in text mode',
+        },
+        text_pages_prev_button: {
+            control: { type: 'text' },
+            description: 'Text for the previous button in text-pages mode',
+        },
+        text_pages_next_button: {
+            control: { type: 'text' },
+            description: 'Text for the next button in text-pages mode',
+        },
+        button_text_prev_button: {
+            control: { type: 'text' },
+            description: 'Text for the previous button in button-text mode',
+        },
+        button_text_next_button: {
+            control: { type: 'text' },
+            description: 'Text for the next button in button-text mode',
+        },
+        buttons_pages_prev_button: {
+            control: { type: 'text' },
+            description: 'Text for the previous button in buttons-pages mode',
+        },
+        buttons_pages_next_button: {
+            control: { type: 'text' },
+            description: 'Text for the next button in buttons-pages mode',
+        },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-pagination\` component, pass the following props:
-
-\`\`\`html
-<dda-pagination
-    total_pages="8"
-    current_page="1"
-    type="simple-slider"
-    custom_class=""
-    component_mode=""
-></dda-pagination>
-  \`\`\`
+                component: `
+To use the \`dda-pagination\` component, pass the following props:
+
+\`\`\`html
+<dda-pagination
+    total_pages="8"
+    current_page="1"
+    type="simple-slider"
+    custom_class=""
+    component_mode=""
+    simple_slider_prev_button: ""
+    simple_slider_next_button: ""
+    buttons_prev_button: ""
+    buttons_next_button: ""
+    text_prev_button: ""
+    text_next_button: ""
+    text_pages_prev_button: ""
+    text_pages_next_button: ""
+    button_text_prev_button: ""
+    button_text_next_button: ""
+    buttons_pages_prev_button: ""
+    buttons_pages_next_button: ""
+></dda-pagination>
+  \`\`\`
 `,
             },
         },
@@ -59,6 +119,18 @@ SimpleSlider.args = {
     type: 'simple-slider',
     custom_class: '',
     component_mode: '',
+    simple_slider_prev_button: "",
+    simple_slider_next_button: "",
+    buttons_prev_button: "",
+    buttons_next_button: "",
+    text_prev_button: "",
+    text_next_button: "",
+    text_pages_prev_button: "",
+    text_pages_next_button: "",
+    button_text_prev_button: "",
+    button_text_next_button: "",
+    buttons_pages_prev_button: "",
+    buttons_pages_next_button: "",
 };
 export const Buttons = Template.bind({});
 Buttons.args = {
@@ -67,6 +139,18 @@ Buttons.args = {
     type: 'buttons',
     custom_class: '',
     component_mode: '',
+    simple_slider_prev_button: "",
+    simple_slider_next_button: "",
+    buttons_prev_button: "",
+    buttons_next_button: "",
+    text_prev_button: "",
+    text_next_button: "",
+    text_pages_prev_button: "",
+    text_pages_next_button: "",
+    button_text_prev_button: "",
+    button_text_next_button: "",
+    buttons_pages_prev_button: "",
+    buttons_pages_next_button: "",
 };
 export const Text = Template.bind({});
 Text.args = {
@@ -75,6 +159,18 @@ Text.args = {
     type: 'text',
     custom_class: '',
     component_mode: '',
+    simple_slider_prev_button: "",
+    simple_slider_next_button: "",
+    buttons_prev_button: "",
+    buttons_next_button: "",
+    text_prev_button: "",
+    text_next_button: "",
+    text_pages_prev_button: "",
+    text_pages_next_button: "",
+    button_text_prev_button: "",
+    button_text_next_button: "",
+    buttons_pages_prev_button: "",
+    buttons_pages_next_button: "",
 };
 export const TextPages = Template.bind({});
 TextPages.args = {
@@ -83,6 +179,18 @@ TextPages.args = {
     type: 'text-pages',
     custom_class: '',
     component_mode: '',
+    simple_slider_prev_button: "",
+    simple_slider_next_button: "",
+    buttons_prev_button: "",
+    buttons_next_button: "",
+    text_prev_button: "",
+    text_next_button: "",
+    text_pages_prev_button: "",
+    text_pages_next_button: "",
+    button_text_prev_button: "",
+    button_text_next_button: "",
+    buttons_pages_prev_button: "",
+    buttons_pages_next_button: "",
 };
 export const ButtonText = Template.bind({});
 ButtonText.args = {
@@ -91,6 +199,18 @@ ButtonText.args = {
     type: 'button-text',
     custom_class: '',
     component_mode: '',
+    simple_slider_prev_button: "",
+    simple_slider_next_button: "",
+    buttons_prev_button: "",
+    buttons_next_button: "",
+    text_prev_button: "",
+    text_next_button: "",
+    text_pages_prev_button: "",
+    text_pages_next_button: "",
+    button_text_prev_button: "",
+    button_text_next_button: "",
+    buttons_pages_prev_button: "",
+    buttons_pages_next_button: "",
 };
 export const ButtonsPages = Template.bind({});
 ButtonsPages.args = {
@@ -99,6 +219,18 @@ ButtonsPages.args = {
     type: 'buttons-pages',
     custom_class: '',
     component_mode: '',
+    simple_slider_prev_button: "",
+    simple_slider_next_button: "",
+    buttons_prev_button: "",
+    buttons_next_button: "",
+    text_prev_button: "",
+    text_next_button: "",
+    text_pages_prev_button: "",
+    text_pages_next_button: "",
+    button_text_prev_button: "",
+    button_text_next_button: "",
+    buttons_pages_prev_button: "",
+    buttons_pages_next_button: "",
 };
 export const Full = Template.bind({});
 Full.args = {
@@ -107,5 +239,16 @@ Full.args = {
     type: 'full',
     custom_class: '',
     component_mode: '',
+    simple_slider_prev_button: "",
+    simple_slider_next_button: "",
+    buttons_prev_button: "",
+    buttons_next_button: "",
+    text_prev_button: "",
+    text_next_button: "",
+    text_pages_prev_button: "",
+    text_pages_next_button: "",
+    button_text_prev_button: "",
+    button_text_next_button: "",
+    buttons_pages_prev_button: "",
+    buttons_pages_next_button: "",
 };
-//# sourceMappingURL=dda-pagination.stories.js.map

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

@@ -10,6 +10,24 @@ export class DdaPhoneField {
         this.is_focused = false;
         this.dropdown_open = false;
         this.countries = [];
+        // F-018 (WCAG 1.3.5): telephone is exactly the field type autocomplete
+        // exists for. Default to the correct token; still overridable.
+        this.autocomplete = 'tel';
+    }
+    // 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.validation_type ? this.helperId : undefined,
+            this.error_message ? this.errorId : undefined,
+        ].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
     }
     // componentWillLoad() {
     //   fetch('/path/to/countries.json')
@@ -42,7 +60,7 @@ export class DdaPhoneField {
     }
     render() {
         const inputClass = `${this.component_mode} ${this.size ? `dda-input-size-${this.size}` : ''} ${this.error_message ? `dda-error-message` : ''}  ${this.validation_type ? `dda-validation-${this.validation_type}` : ''}  ${this.is_focused ? 'dda-input-focus' : ''} ${this.phone_number ? 'dda-input-focus-filled' : ''}`;
-        return (h(Host, { key: '7a8267d2e5be6d31e6c03fb910c949630f6a6294' }, h("div", { key: '551fa744183fc6e2f43d47f21fa14a5fa6db7d75', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: '0c63c7c61b5d6e5ed8d3aa5bbd647785e09b66d6', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: '74e8fbcc96c20d2918329491d540a415a3e86763', class: `dda-input-field-group dda-phone-field` }, h("div", { key: '9e9b36437872390095f48c8ced7a6e153c41e6dc', class: "dda-input-dropdown-btn" }, h("button", { key: 'a9f96d17f9209cad12790cd561b195fc3fcdcc26', type: "button", class: "dda-dropdown-select", onClick: () => this.toggleDropdown() }, h("img", { key: '399f76dac86641d5e88c16dac862c22fbf9c62c0', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, " ", h("i", { key: '355121be4f5fbf204e2e2ca8c265c1d935e9e9aa', class: `material-icons` }, this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down')), this.dropdown_open && (h("div", { key: '2b8efab85ac1b24d860e942a6dde4b6449541053', class: "dda-input-dropdown-list" }, this.countries.map(country => (h("button", { id: this.button_id, "aria-label": this.button_aria_label, type: "button", class: "dda-input-dropdown-item", onClick: () => this.selectCountry(country) }, h("img", { src: country.flag, alt: "", width: "20" }), " ", country.code)))))), h("input", { key: '46f90769a97da13ab02594317822adc6da84da18', id: this.input_id, "aria-label": this.aria_label, type: "number", class: `dda-field-group-input`, placeholder: this.placeholder, inputmode: 'numeric', pattern: "[0-9]*", value: this.phone_number, onInput: this.handlephonenumberChange.bind(this), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), disabled: this.disabled })), this.helper_text && !this.validation_type && h("span", { key: 'cd949a369d8622085e870efbd9b53949c7bdeaf6', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '83b405b1847481d1f63281dee7fecc71e025adb0', class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: 'cf25902e0ce27b528e00a92f728a0eb221bb65ff' }, h("div", { key: 'ff34b06175b8ab15fedbad232468316639bbe0d3', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: 'a277c84bebef55a5126396beca24584f70d7acb6', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'ccf3e63be167ecbbe310084e8b3306e353a6f243', class: `dda-input-field-group dda-phone-field` }, h("div", { key: 'c41acbf341633482a915273f9d3c522c4b2bd95f', class: "dda-input-dropdown-btn" }, h("button", { key: '0cc277ad44e73255ad84f6e2e099847f254fe4d4', type: "button", name: this.toggle_button_name, class: "dda-dropdown-select", onClick: () => this.toggleDropdown() }, h("img", { key: '78e46d6ca28db487ebe4c66b14c8f46850a0ccd8', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, " ", h("i", { key: '31511bbcb0826bb1fd787a4431378c4b1f8b616f', class: `material-icons` }, this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down')), this.dropdown_open && (h("div", { key: 'e541a962e8f0ea40162968f700ece1e572ce54d3', class: "dda-input-dropdown-list" }, this.countries.map(country => (h("button", { id: this.button_id, name: this.country_select_button_name, "aria-label": this.button_aria_label, type: "button", class: "dda-input-dropdown-item", onClick: () => this.selectCountry(country) }, h("img", { src: country.flag, alt: "", width: "20" }), " ", country.code)))))), h("input", { key: 'ebb15740cd44c82780ce21a7c4425893fdea7e50', id: this.input_id, name: this.phone_input_name, "aria-label": this.aria_label, type: "number", class: `dda-field-group-input`, placeholder: this.placeholder, inputmode: 'numeric', pattern: "[0-9]*", autocomplete: this.autocomplete, value: this.phone_number, onInput: this.handlephonenumberChange.bind(this), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), disabled: this.disabled, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && !this.validation_type && h("span", { key: '635c07efb64846c0deac837cc269f4b544572ef7', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '7e4e2dce397eb4d761bc1e2536219f5f2005dc68', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-phonefield"; }
     static get originalStyleUrls() {
@@ -73,8 +91,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "placeholder": {
                 "type": "string",
@@ -92,8 +110,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
+                "attribute": "placeholder",
                 "defaultValue": "'Enter phone number'"
             },
             "helper_text": {
@@ -112,8 +130,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "validation_type": {
                 "type": "string",
@@ -131,8 +149,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "validation_type"
             },
             "error_message": {
                 "type": "string",
@@ -150,8 +168,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "disabled": {
                 "type": "boolean",
@@ -169,8 +187,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "size": {
@@ -189,8 +207,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "custom_class": {
                 "type": "string",
@@ -208,8 +226,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false
+                "reflect": false,
+                "attribute": "custom_class"
             },
             "component_mode": {
                 "type": "string",
@@ -227,8 +245,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "input_id": {
                 "type": "string",
@@ -246,8 +264,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "aria_label": {
                 "type": "string",
@@ -265,8 +283,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
             "button_id": {
                 "type": "string",
@@ -284,8 +302,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
             },
             "button_aria_label": {
                 "type": "string",
@@ -303,8 +321,85 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_aria_label"
+            },
+            "toggle_button_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": "toggle_button_name"
+            },
+            "country_select_button_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": "country_select_button_name"
+            },
+            "phone_input_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": "phone_input_name"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'tel'"
             }
         };
     }
@@ -319,4 +414,3 @@ export class DdaPhoneField {
         };
     }
 }
-//# sourceMappingURL=dda-phonefield.js.map

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

@@ -60,30 +60,51 @@ export default {
         onchange: {
             control: { type: 'text' },
             description: 'onchange event for the phone field',
+        },
+        toggle_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the toggle button',
+        },
+        country_select_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the country select button',
+        },
+        phone_input_name: {
+            control: { type: 'text' },
+            description: 'Name for the phone input field',
+        },
+        autocomplete: {
+            control: { type: 'text' },
+            description: 'Autocomplete token for the phone number input (WCAG 1.3.5). Defaults to "tel".',
         }
     },
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-phonefield\` component, pass the following props:
-
-\`\`\`html
-<dda-phonefield
-    label="Phone Number"
-    placeholder="00 000 0000"
-    helper_text="Helper or footer text"
-    error_message=""
-    disabled="false"
-    custom_class=""
-    component_mode=""
-    input_id="input"
-    button_id="button"
-    aria_label="phone-field"
-    button_aria_label="phone-button"
-    onchange="console.log('changed')"
-></dda-phonefield>
-  \`\`\`
+                component: `
+To use the \`dda-phonefield\` component, pass the following props:
+
+\`\`\`html
+<dda-phonefield
+    label="Phone Number"
+    placeholder="00 000 0000"
+    helper_text="Helper or footer text"
+    error_message=""
+    disabled="false"
+    custom_class=""
+    component_mode=""
+    input_id="input"
+    button_id="button"
+    aria_label="phone-field"
+    button_aria_label="phone-button"
+    onchange="console.log('changed')"
+    toggle_button_name="toggle-button"
+    country_select_button_name="country-select-button"
+    phone_input_name="phone-input"
+    autocomplete="tel"
+
+></dda-phonefield>
+  \`\`\`
 `,
             },
         },
@@ -110,6 +131,10 @@ Default.args = {
     aria_label: 'phone-field',
     button_aria_label: 'phone-button',
     onchange: '',
+    toggle_button_name: "toggle-button",
+    country_select_button_name: "country-select-button",
+    phone_input_name: "phone-input",
+    autocomplete: 'tel',
 };
 export const FocusFilled = Template.bind({});
 FocusFilled.args = {
@@ -127,6 +152,10 @@ FocusFilled.args = {
     aria_label: 'phone-field',
     button_aria_label: 'phone-button',
     onchange: '',
+    toggle_button_name: "toggle-button",
+    country_select_button_name: "country-select-button",
+    phone_input_name: "phone-input",
+    autocomplete: 'tel',
 };
 export const Filled = Template.bind({});
 Filled.args = {
@@ -143,6 +172,10 @@ Filled.args = {
     aria_label: 'phone-field',
     button_aria_label: 'phone-button',
     onchange: '',
+    toggle_button_name: "toggle-button",
+    country_select_button_name: "country-select-button",
+    phone_input_name: "phone-input",
+    autocomplete: 'tel',
 };
 export const Error = Template.bind({});
 Error.args = {
@@ -159,6 +192,10 @@ Error.args = {
     aria_label: 'phone-field',
     button_aria_label: 'phone-button',
     onchange: '',
+    toggle_button_name: "toggle-button",
+    country_select_button_name: "country-select-button",
+    phone_input_name: "phone-input",
+    autocomplete: 'tel',
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -174,5 +211,8 @@ Disabled.args = {
     aria_label: 'phone-field',
     button_aria_label: 'phone-button',
     onchange: '',
+    toggle_button_name: "toggle-button",
+    country_select_button_name: "country-select-button",
+    phone_input_name: "phone-input",
+    autocomplete: 'tel',
 };
-//# sourceMappingURL=dda-phonefield.stories.js.map