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

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

@@ -1,109 +1,121 @@
-.h-stepper-container {
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-}
-
-.h-step {
-  width: 100%;
-  text-align: center;
-  padding: 0px 0px 16px 0px;
-}
-
-.h-step-indicator {
-  position: relative;
-}
-
-.h-step-indicator .circle {
-  width: 16px;
-  height: 16px;
-  margin: 0 auto;
-  border-radius: 50%;
-  background-color: var(--dda-neutral-80);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  z-index: 3;
-}
-
-.h-step-indicator::before {
-  content: "";
-  width: calc(100% - 3px);
-  height: 1px;
-  border-top: dashed 1px var(--dda-neutral-variant-80);
-  position: absolute;
-  top: 50%;
-  left: 0;
-  z-index: 1;
-  transform: translate(0%, -50%);
-}
-.h-step .h-step-content {
-  padding: 8px 16px 0px 16px;
-}
-
-.h-step .h-step-title {
-  font-size: 14px;
-  font-weight: var(--dda-fw-400);
-  color: var(--dda-neutral-variant-30);
-  margin-bottom: 10px;
-}
-
-.h-step .h-step-subtitle {
-  font-size: 18px;
-  color: var(--dda-neutral-60);
-  font-weight: var(--dda-fw-500);
-}
-
-.h-step.completed .h-step-subtitle{
-  font-weight: var(--dda-fw-400);
-}
-
-.h-step .h-step-description {
-  font-size: 14px;
-  color: var(--dda-neutral-60);
-}
-
-.h-step.completed .circle{
-  background: var(--dda-color-success-40);
-}
-
-.h-step.active .circle {
-  background-color: var(--dda-color-primary-40);
-  box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);
-}
-
-.h-step.completed .h-step-indicator::before,
-.h-step.active .h-step-indicator::before {
-  width: 100%;
-  border-top: solid 1px var(--dda-color-primary-40);
-}
-
-.h-step.active .h-step-indicator::after {
-  content: "";
-  width: calc(50% - 3px);
-  height: 1px;
-  border-top: solid 1px var(--dda-color-primary-40);
-  position: absolute;
-  top: 50%;
-  left: 100%;
-  z-index: 2;
-  transform: translate(0%, -50%);
-}
-
-
-
-.h-step.completed .h-step-title{
-  color: var(--dda-color-success-40);
-}
-.h-step.active .h-step-title{
-  color: var(--dda-color-primary-40);
-}
-.h-step.completed .h-step-subtitle,
-.h-step.active .h-step-subtitle{
-  color: var(--dda-neutral-0);
-}
-.h-step.completed .h-step-description,
-.h-step.active .h-step-description{
-  color: var(--dda-neutral-variant-30);
+.h-stepper-container {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.h-step {
+  width: 100%;
+  text-align: center;
+  padding: 0px 0px 16px 0px;
+}
+
+.h-step-indicator {
+  position: relative;
+}
+
+.h-step-indicator .circle {
+  width: 16px;
+  height: 16px;
+  margin: 0 auto;
+  border-radius: 50%;
+  background-color: var(--dda-neutral-80);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 3;
+}
+
+.h-step-indicator::before {
+  content: "";
+  width: calc(100% - 3px);
+  height: 1px;
+  border-top: dashed 1px var(--dda-neutral-variant-80);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  z-index: 1;
+  transform: translate(0%, -50%);
+}
+.h-step .h-step-content {
+  padding: 8px 16px 0px 16px;
+}
+
+.h-step .h-step-title {
+  font-size: 14px;
+  font-weight: var(--dda-fw-400);
+  color: var(--dda-on-surface-variant-30);
+  margin-bottom: 10px;
+}
+
+.light-mode .h-step .h-step-title {
+  color: var(--dda-neutral-variant-30);
+}
+
+.h-step .h-step-subtitle {
+  font-size: 18px;
+  color: var(--dda-on-surface-muted);
+  font-weight: var(--dda-fw-500);
+}
+
+.h-step.completed .h-step-subtitle{
+  font-weight: var(--dda-fw-400);
+}
+
+.h-step .h-step-description {
+  font-size: 14px;
+  color: var(--dda-on-surface-muted);
+}
+
+.h-step.completed .circle{
+  background: var(--dda-color-success-40);
+}
+
+.h-step.active .circle {
+  background-color: var(--dda-color-primary-40);
+  box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);
+}
+
+.h-step.completed .h-step-indicator::before,
+.h-step.active .h-step-indicator::before {
+  width: 100%;
+  border-top: solid 1px var(--dda-color-primary-40);
+}
+
+.h-step.active .h-step-indicator::after {
+  content: "";
+  width: calc(50% - 3px);
+  height: 1px;
+  border-top: solid 1px var(--dda-color-primary-40);
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  z-index: 2;
+  transform: translate(0%, -50%);
+}
+
+
+
+.h-step.completed .h-step-title{
+  color: var(--dda-color-success-40);
+}
+.h-step.active .h-step-title{
+  color: var(--dda-color-primary-40);
+}
+.h-step.completed .h-step-subtitle,
+.h-step.active .h-step-subtitle{
+  color: var(--dda-on-surface-0);
+}
+.light-mode .h-step.completed .h-step-subtitle,
+.light-mode .h-step.active .h-step-subtitle{
+  color: var(--dda-neutral-0);
+}
+.h-step.completed .h-step-description,
+.h-step.active .h-step-description{
+  color: var(--dda-on-surface-variant-30);
+}
+.light-mode .h-step.completed .h-step-description,
+.light-mode .h-step.active .h-step-description{
+  color: var(--dda-neutral-variant-30);
 }

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

@@ -8,7 +8,7 @@ export class DdaHorizontalStepper {
         this.parsedSteps = JSON.parse(this.steps);
     }
     render() {
-        return (h(Host, { key: '5ef6c86ec76014d5f299d0af317627050a0cb779' }, h("div", { key: '97ecb64a34643aba436bb95b8ad1afec3792710f', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
+        return (h(Host, { key: '5b6bf0b6d79e08768c25d78f15e14bb449f3f9d4' }, h("div", { key: 'f3c2ef7bd4ae7685747fe4194b143c2fc962d3bb', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
     }
     static get is() { return "dda-horizontal-stepper"; }
     static get originalStyleUrls() {
@@ -39,8 +39,8 @@ export class DdaHorizontalStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "steps",
-                "reflect": false
+                "reflect": false,
+                "attribute": "steps"
             },
             "current_step": {
                 "type": "number",
@@ -58,8 +58,8 @@ export class DdaHorizontalStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "current_step",
                 "reflect": false,
+                "attribute": "current_step",
                 "defaultValue": "1"
             },
             "custom_class": {
@@ -78,8 +78,8 @@ export class DdaHorizontalStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false
+                "reflect": false,
+                "attribute": "custom_class"
             },
             "component_mode": {
                 "type": "string",
@@ -97,8 +97,8 @@ export class DdaHorizontalStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             }
         };
     }
@@ -108,4 +108,3 @@ export class DdaHorizontalStepper {
         };
     }
 }
-//# sourceMappingURL=dda-horizontal-stepper.js.map

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

@@ -24,30 +24,30 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-horizontal-stepper\` component, pass the following props:
-  
-  \`\`\`html
-<dda-horizontal-stepper
-    steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."}]'
-    current_step="1"
-    custom_class=''
-    mode='light'
-></dda-horizontal-stepper>
-    \`\`\`
+                component: `
+  To use the \`dda-horizontal-stepper\` component, pass the following props:
+  
+  \`\`\`html
+<dda-horizontal-stepper
+    steps='[{"title":"Step 1","subtitle":"Subtitle 1","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 2","subtitle":"Subtitle 2","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."},{"title":"Step 3","subtitle":"Subtitle 3","description":"Lorem Ipsum&nbsp;is simply dummy text of the printing and typesetting industry."}]'
+    current_step="1"
+    custom_class=''
+    mode='light'
+></dda-horizontal-stepper>
+    \`\`\`
   `,
             },
         },
     },
 };
-const Template = ({ steps, current_step, custom_class, component_mode }) => html `
-    <dda-horizontal-stepper
-      steps=${JSON.stringify(steps)}
-      current_step=${current_step}
-      custom_class=${custom_class}
-      component_mode=${component_mode}
-    >
-    </dda-horizontal-stepper>
+const Template = ({ steps, current_step, custom_class, component_mode }) => html `
+    <dda-horizontal-stepper
+      steps=${JSON.stringify(steps)}
+      current_step=${current_step}
+      custom_class=${custom_class}
+      component_mode=${component_mode}
+    >
+    </dda-horizontal-stepper>
   `;
 export const Default = Template.bind({});
 Default.args = {
@@ -60,4 +60,3 @@ Default.args = {
     custom_class: '',
     component_mode: ''
 };
-//# sourceMappingURL=dda-horizontal-stepper.stories.js.map

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: '16cb8b83b8045cb0f68e8ed0e611fa870e2bc073' }, h("div", { key: 'e86438ce2d7426c0f957fc7f860bab1c650cc4c8', 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" }, "chevron_right"))))))));
+        return (h(Host, { key: '2cc0fba05a159beb85c51bc0d27a81a1714ad3de' }, h("div", { key: 'b9b4f452fb34f825dd30581fa976ccf183b7921f', 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