@dubai-design-system/components-js 3.12.10 → 3.12.12

package/dist/collection/components/stepper/dda-vertical-stepper/dda-vertical-stepper.css

@@ -1,113 +1,113 @@
-.v-stepper-container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-}
-
-.v-step {
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-  width: 100%;
-  background-color: transparent;
-  border: solid 1px transparent;
-  border-radius: 16px;
-}
-
-.v-step.active {
-  background-color: var(--dda-surface-100);
-  border: solid 1px var(--dda-color-primary-40);
-  box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
-}
-
-.v-step .v-step-indicator {
-  flex: 0 0 auto;
-  align-items: center;
-  padding: 15px;
-  position: relative;
-}
-
-.v-step .icon {
-  width: 30px;
-  height: 30px;
-  background: var(--dda-surface-100);
-  border-radius: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  z-index: 2;
-}
-
-.v-step-indicator::before {
-  content: "";
-  width: 1px;
-  height: 100%;
-  border-right: dashed 1px var(--dda-surface-variant-80);
-  position: absolute;
-  top: 0px;
-  left: 50%;
-  z-index: 1;
-  transform: translate(-50%, 0%);
-}
-
-.v-step.active .v-step-indicator::before {
-  border-right: solid 1px var(--dda-color-primary-40);
-}
-
-.v-step.active .v-step-indicator::after {
-  content: "";
-  width: 1px;
-  height: 30px;
-  border-right: solid 1px var(--dda-color-primary-40);
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  z-index: 2;
-  transform: translate(-50%, 0%);
-}
-
-.v-step .icon i {
-  font-size: 24px;
-  color: var(--dda-on-surface-variant-30);
-}
-
-.v-step.active .icon i {
-  color: var(--dda-color-primary-40);
-}
-
-.v-step .v-step-content {
-  padding: 15px 15px 15px 0;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.v-step .v-step-title {
-  font-size: 18px;
-  font-weight: var(--dda-fw-500);
-}
-
-.v-step .v-step-subtitle {
-  font-size: 14px;
-  color: var(--dda-color-primary-40);
-}
-
-.v-step .v-step-description {
-  font-size: 14px;
-  color: var(--dda-on-surface-variant-30);
-}
-
-.v-step-arrow {
-  padding: 15px;
-  position: relative;
-}
-
-.v-step-arrow i {
-  position: absolute;
-  left: 5px;
-  top: 50%;
-  transform: translate(0%, -50%);
-  color: var(--dda-on-surface-variant-30);
+.v-stepper-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.v-step {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  width: 100%;
+  background-color: transparent;
+  border: solid 1px transparent;
+  border-radius: 16px;
+}
+
+.v-step.active {
+  background-color: var(--dda-surface-100);
+  border: solid 1px var(--dda-color-primary-40);
+  box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
+}
+
+.v-step .v-step-indicator {
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 15px;
+  position: relative;
+}
+
+.v-step .icon {
+  width: 30px;
+  height: 30px;
+  background: var(--dda-surface-100);
+  border-radius: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+}
+
+.v-step-indicator::before {
+  content: "";
+  width: 1px;
+  height: 100%;
+  border-right: dashed 1px var(--dda-surface-variant-80);
+  position: absolute;
+  top: 0px;
+  left: 50%;
+  z-index: 1;
+  transform: translate(-50%, 0%);
+}
+
+.v-step.active .v-step-indicator::before {
+  border-right: solid 1px var(--dda-color-primary-40);
+}
+
+.v-step.active .v-step-indicator::after {
+  content: "";
+  width: 1px;
+  height: 30px;
+  border-right: solid 1px var(--dda-color-primary-40);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  z-index: 2;
+  transform: translate(-50%, 0%);
+}
+
+.v-step .icon i {
+  font-size: 24px;
+  color: var(--dda-on-surface-variant-30);
+}
+
+.v-step.active .icon i {
+  color: var(--dda-color-primary-40);
+}
+
+.v-step .v-step-content {
+  padding: 15px 15px 15px 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.v-step .v-step-title {
+  font-size: 18px;
+  font-weight: var(--dda-fw-500);
+}
+
+.v-step .v-step-subtitle {
+  font-size: 14px;
+  color: var(--dda-color-primary-40);
+}
+
+.v-step .v-step-description {
+  font-size: 14px;
+  color: var(--dda-on-surface-variant-30);
+}
+
+.v-step-arrow {
+  padding: 15px;
+  position: relative;
+}
+
+.v-step-arrow i {
+  position: absolute;
+  left: 5px;
+  top: 50%;
+  transform: translate(0%, -50%);
+  color: var(--dda-on-surface-variant-30);
 }

package/dist/collection/components/stepper/dda-vertical-stepper/dda-vertical-stepper.js

@@ -9,7 +9,7 @@ export class DdaVerticalStepper {
         this.parsedSteps = JSON.parse(this.steps);
     }
     render() {
-        return (h(Host, { key: 'cc451c3d4b636f60ae6e961ddd7dfedf0f143800' }, h("div", { key: 'ac25fd06f849c9e4e2135553b3640524998a4f34', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= this.current_Step ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons`, "aria-hidden": "true" }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "chevron_right"))))))));
+        return (h(Host, { key: '7255a2449381606ddb2b225a5e84bb067b1dbfe8' }, h("div", { key: '438ad499767fe4b47aed90d0bd85652e377ddfdc', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= this.current_Step ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons` }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined" }, "chevron_right"))))))));
     }
     static get is() { return "dda-vertical-stepper"; }
     static get originalStyleUrls() {
@@ -40,8 +40,8 @@ export class DdaVerticalStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "steps",
-                "reflect": false
+                "reflect": false,
+                "attribute": "steps"
             },
             "current_Step": {
                 "type": "number",
@@ -59,8 +59,8 @@ export class DdaVerticalStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "current_-step",
                 "reflect": false,
+                "attribute": "current_-step",
                 "defaultValue": "0"
             },
             "custom_class": {
@@ -79,8 +79,8 @@ export class DdaVerticalStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -99,8 +99,8 @@ export class DdaVerticalStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             }
         };
     }
@@ -110,4 +110,3 @@ export class DdaVerticalStepper {
         };
     }
 }
-//# sourceMappingURL=dda-vertical-stepper.js.map

package/dist/collection/components/stepper/dda-vertical-stepper/dda-vertical-stepper.stories.js

@@ -23,30 +23,30 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-vertical-stepper\` component, pass the following props:
-
-  \`\`\`html
-<dda-vertical-stepper
-    steps='[{"icon":"sentiment_satisfied","title":"Step 1","subtitle":"Subtitle 1","description":"Description 1"},{"icon":"sentiment_satisfied","title":"Step 2","subtitle":"Subtitle 2","description":"Description 2"},{"icon":"sentiment_satisfied","title":"Step 3","subtitle":"Subtitle 3","description":"Description 3"}]'
-    current_step="1"
-    custom_class='""'
-    mode='"light"'
-></dda-vertical-stepper>
-  \`\`\`
+                component: `
+  To use the \`dda-vertical-stepper\` component, pass the following props:
+
+  \`\`\`html
+<dda-vertical-stepper
+    steps='[{"icon":"sentiment_satisfied","title":"Step 1","subtitle":"Subtitle 1","description":"Description 1"},{"icon":"sentiment_satisfied","title":"Step 2","subtitle":"Subtitle 2","description":"Description 2"},{"icon":"sentiment_satisfied","title":"Step 3","subtitle":"Subtitle 3","description":"Description 3"}]'
+    current_step="1"
+    custom_class='""'
+    mode='"light"'
+></dda-vertical-stepper>
+  \`\`\`
   `,
             },
         },
     },
 };
-const Template = ({ steps, current_step, custom_class, component_mode }) => html `
-<dda-vertical-stepper
-  steps=${JSON.stringify(steps)}
-  current_step=${current_step}
-  custom_class=${custom_class}
-  component_mode=${component_mode}
->
-</dda-vertical-stepper>
+const Template = ({ steps, current_step, custom_class, component_mode }) => html `
+<dda-vertical-stepper
+  steps=${JSON.stringify(steps)}
+  current_step=${current_step}
+  custom_class=${custom_class}
+  component_mode=${component_mode}
+>
+</dda-vertical-stepper>
 `;
 export const Default = Template.bind({});
 Default.args = {
@@ -59,4 +59,3 @@ Default.args = {
     custom_class: '',
     component_mode: '',
 };
-//# sourceMappingURL=dda-vertical-stepper.stories.js.map