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

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

@@ -14,10 +14,6 @@ export default {
             control: 'text',
             description: 'Helper text to display below the phone field',
         },
-        max_length: {
-            control: 'text',
-            description: 'define maximum numbers allowed the phone field',
-        },
         error_message: {
             control: 'text',
             description: 'Error message to display below the phone field',
@@ -27,10 +23,6 @@ export default {
             options: ['normal', 'error'],
             description: 'Validation type of the phone field',
         },
-        validation_id: {
-            control: 'text',
-            description: 'Validation ID of helper text and error text',
-        },
         disabled: {
             control: 'boolean',
             description: 'Disable the phone field',
@@ -53,10 +45,10 @@ export default {
             control: { type: 'text' },
             description: 'Input id for the phone field',
         },
-        // button_id:{ 
-        //   control: {type: 'text'},
-        //   description: 'Button id for the phone field',
-        // },
+        button_id: {
+            control: { type: 'text' },
+            description: 'Button id for the phone field',
+        },
         aria_label: {
             control: { type: 'text' },
             description: 'Aria label for the phone field',
@@ -85,30 +77,29 @@ export default {
     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"
-    max_length=""
-    error_message=""
-    disabled="false"
-    validation_id=""
-    custom_class=""
-    component_mode=""
-    input_id="input"
-    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"
-    
-></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"
+    
+></dda-phonefield>
+  \`\`\`
 `,
             },
         },
@@ -125,61 +116,58 @@ export const Default = Template.bind({});
 Default.args = {
     label: 'Phone Number',
     placeholder: '00 000 0000',
-    helper_text: 'Please enter Mobile Number',
-    error_message: 'This is an error message',
-    max_length: '10',
-    validation_id: '',
-    validation_type: 'normal',
+    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: '',
     toggle_button_name: "toggle-button",
     country_select_button_name: "country-select-button",
     phone_input_name: "phone-input",
-    disabled: false,
-    onchange: '',
-    custom_class: '',
-    component_mode: '',
 };
 export const FocusFilled = Template.bind({});
 FocusFilled.args = {
     label: 'Phone Number',
     placeholder: 'Enter phone number',
     helper_text: 'Helper or footer text',
-    error_message: 'This is an error message',
-    max_length: '10',
-    validation_id: '',
-    validation_type: 'normal',
+    error_message: '',
+    disabled: false,
+    phone_number: '',
+    isFocused: true,
+    custom_class: 'dda-input-focus',
+    component_mode: '',
     input_id: 'input',
+    button_id: 'button',
     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",
-    disabled: false,
-    onchange: '',
-    custom_class: '',
-    component_mode: '',
 };
 export const Filled = Template.bind({});
 Filled.args = {
     label: 'Phone Number',
     placeholder: 'Enter phone number',
     helper_text: 'Helper or footer text',
-    error_message: 'This is an error message',
-    max_length: '10',
-    validation_id: '',
-    validation_type: 'normal',
+    error_message: '',
+    disabled: false,
+    phone_number: '56 546 0000',
+    custom_class: '',
+    component_mode: '',
     input_id: 'input',
+    button_id: 'button',
     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",
-    disabled: false,
-    onchange: '',
-    custom_class: '',
-    component_mode: '',
 };
 export const Error = Template.bind({});
 Error.args = {
@@ -187,19 +175,18 @@ Error.args = {
     placeholder: 'Enter phone number',
     helper_text: '',
     error_message: 'This is an error message',
-    max_length: '10',
-    validation_id: '',
     validation_type: 'error',
+    disabled: false,
+    custom_class: '',
+    component_mode: '',
     input_id: 'input',
+    button_id: 'button',
     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",
-    disabled: false,
-    onchange: '',
-    custom_class: '',
-    component_mode: '',
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -207,17 +194,15 @@ Disabled.args = {
     placeholder: 'Enter phone number',
     helper_text: 'Helper or footer text',
     error_message: '',
-    max_length: '10',
-    validation_id: '',
+    disabled: true,
+    custom_class: '',
+    component_mode: '',
     input_id: 'input',
+    button_id: 'button',
     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",
-    disabled: true,
-    onchange: '',
-    custom_class: '',
-    component_mode: '',
 };
-//# sourceMappingURL=dda-phonefield.stories.js.map

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

@@ -1,95 +1,95 @@
-.dda-progress-bar-container {
-  display: flex;
-  align-items: center;
-}
-
-.dda-progress-bar {
-  width: 100%;
-  position: relative;
-  height: 8px;
-  background-color: var(--dda-neutral-variant-92);
-  border-radius: 4px;
-}
-
-.dda-progress-value {
-  height: 100%;
-  background-color: var(--dda-color-primary-40);
-  position: relative;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.light-mode .dda-progress-value{
-  background-color: var(--dda-primary-40);
-}
-.dda-tooltip {
-  height: 35px;
-  background-color: var(--dda-neutral-100);
-  border: solid 1px var(--dda-neutral-90);
-  padding: 4px 8px;
-  border-radius: 4px;
-  -webkit-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
-  -moz-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
-  font-size: 16px;
-  color: var(--dda-neutral-0);
-  font-weight: var(--dda-fw-500);
-  white-space: nowrap;
-  display: grid;
-  align-items: center;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  transform: translateX(40%);
-}
-
-.tooltip-top {
-  top: -45px;
-}
-
-.dda-tooltip::before,
-.dda-tooltip::after {
-  content: "";
-  position: absolute;
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  left: 50%;
-  margin-left: -10px;
-}
-
-.dda-tooltip.tooltip-top::before {
-  top: 100%;
-  border-top: 8px solid var(--dda-neutral-90);
-  margin-top: 0px;
-}
-
-.dda-tooltip.tooltip-top::after {
-  top: 100%;
-  border-top: 8px solid var(--dda-neutral-100);
-  margin-top: -2px;
-  z-index: 1;
-}
-
-.tooltip-bottom {
-  top: 17px;
-}
-
-.dda-tooltip.tooltip-bottom::before {
-  bottom: 100%;
-  border-bottom: 8px solid var(--dda-neutral-90);
-  margin-bottom: 0px;
-}
-
-.dda-tooltip.tooltip-bottom::after {
-  bottom: 100%;
-  border-bottom: 8px solid var(--dda-neutral-100);
-  margin-bottom: -2px;
-  z-index: 1;
-}
-
-.dda-percentage-text {
-  margin-inline-start: 8px;
-  font-size: 16px;
-  color: var(--dda-neutral-0);
+.dda-progress-bar-container {
+  display: flex;
+  align-items: center;
+}
+
+.dda-progress-bar {
+  width: 100%;
+  position: relative;
+  height: 8px;
+  background-color: var(--dda-neutral-variant-92);
+  border-radius: 4px;
+}
+
+.dda-progress-value {
+  height: 100%;
+  background-color: var(--dda-color-primary-40);
+  position: relative;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.light-mode .dda-progress-value{
+  background-color: var(--dda-primary-40);
+}
+.dda-tooltip {
+  height: 35px;
+  background-color: var(--dda-neutral-100);
+  border: solid 1px var(--dda-neutral-90);
+  padding: 4px 8px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
+  -moz-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);
+  font-size: 16px;
+  color: var(--dda-neutral-0);
+  font-weight: var(--dda-fw-500);
+  white-space: nowrap;
+  display: grid;
+  align-items: center;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  transform: translateX(40%);
+}
+
+.tooltip-top {
+  top: -45px;
+}
+
+.dda-tooltip::before,
+.dda-tooltip::after {
+  content: "";
+  position: absolute;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  left: 50%;
+  margin-left: -10px;
+}
+
+.dda-tooltip.tooltip-top::before {
+  top: 100%;
+  border-top: 8px solid var(--dda-neutral-90);
+  margin-top: 0px;
+}
+
+.dda-tooltip.tooltip-top::after {
+  top: 100%;
+  border-top: 8px solid var(--dda-neutral-100);
+  margin-top: -2px;
+  z-index: 1;
+}
+
+.tooltip-bottom {
+  top: 17px;
+}
+
+.dda-tooltip.tooltip-bottom::before {
+  bottom: 100%;
+  border-bottom: 8px solid var(--dda-neutral-90);
+  margin-bottom: 0px;
+}
+
+.dda-tooltip.tooltip-bottom::after {
+  bottom: 100%;
+  border-bottom: 8px solid var(--dda-neutral-100);
+  margin-bottom: -2px;
+  z-index: 1;
+}
+
+.dda-percentage-text {
+  margin-inline-start: 8px;
+  font-size: 16px;
+  color: var(--dda-neutral-0);
 }

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

@@ -10,17 +10,17 @@ export class DdaProgressBar {
         const progressStyle = {
             width: `${this.progress}%`,
         };
-        return (h(Host, { key: 'f87c4b9d0d0b956d9c9f6760a8167722ed28ea44' }, h("div", { key: '47ce0ba1604c5acf56339afb6e9bef2bfdfe36e1', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'a304e65015e1c30e72f608351b8d84c46be79196', class: "dda-progress-bar" }, h("div", { key: '4cd508e514f68410a1f142b79adadab06d07ee22', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: 'c21537bcda0f2b87dd9acca51915b3e6b91dde50', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: 'd1c3381994237e99cf45c22204f5d4f585e489b2', class: "dda-percentage-text" }, this.progress, "%")))));
+        return (h(Host, { key: '4cbce751eac1bc29f403200296dcd31354106ad6' }, h("div", { key: '30234fe16f58122158feacbf4b080809fdc3757b', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'ae391d79102c3a948d000e7501d9849ffd6c45dd', class: "dda-progress-bar" }, h("div", { key: '17748d988309d5445fb02f6b3dae13fc1256bee4', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: '1b17f52b4274ff08a031b9290afbf7a46257058a', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: '7f03f2e9c7d20e77c2e74983bbeef68300c55a7d', class: "dda-percentage-text" }, this.progress, "%")))));
     }
     static get is() { return "dda-progressbar"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dda-progressbar.css"]
+            "$": ["dda-progressbar.css", "../../global/global.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dda-progressbar.css"]
+            "$": ["dda-progressbar.css", "../../global/global.css"]
         };
     }
     static get properties() {
@@ -41,8 +41,8 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "progress",
                 "reflect": false,
+                "attribute": "progress",
                 "defaultValue": "0"
             },
             "tooltip": {
@@ -61,8 +61,8 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
+                "attribute": "tooltip",
                 "defaultValue": "false"
             },
             "tooltip_position": {
@@ -81,8 +81,8 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip_position",
                 "reflect": false,
+                "attribute": "tooltip_position",
                 "defaultValue": "'top'"
             },
             "show_percentage_text": {
@@ -101,8 +101,8 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show_percentage_text",
                 "reflect": false,
+                "attribute": "show_percentage_text",
                 "defaultValue": "false"
             },
             "custom_class": {
@@ -121,8 +121,8 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false
+                "reflect": false,
+                "attribute": "custom_class"
             },
             "component_mode": {
                 "type": "string",
@@ -140,10 +140,9 @@ export class DdaProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             }
         };
     }
 }
-//# sourceMappingURL=dda-progressbar.js.map

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

@@ -36,19 +36,19 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-progressbar\` component, pass the following props:
-
-\`\`\`html
-<dda-progressbar
-    progress="20"
-    tooltip="false"
-    tooltip_position="top"
-    show_percentage_text="false"
-    custom_class=""
-    component_mode=""
-></dda-progressbar>
-  \`\`\`
+                component: `
+To use the \`dda-progressbar\` component, pass the following props:
+
+\`\`\`html
+<dda-progressbar
+    progress="20"
+    tooltip="false"
+    tooltip_position="top"
+    show_percentage_text="false"
+    custom_class=""
+    component_mode=""
+></dda-progressbar>
+  \`\`\`
 `,
             },
         },
@@ -88,4 +88,3 @@ WithPercentageText.args = {
     custom_class: '',
     component_mode: '',
 };
-//# sourceMappingURL=dda-progressbar.stories.js.map