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

package/dist/collection/components/dda-range-slider/dda-range-slider.css

@@ -1,144 +1,137 @@
-.dda-range-slider-container {
-  width: 100%;
-  margin: 20px 0;
-  position: relative;
-}
-
-.dda-range-slider {
-  position: relative;
-  width: 100%;
-  height: 6px;
-  background: var(--dda-neutral-variant-92);
-  border-radius: 5px;
-}
-
-.dda-range-slider-input {
-  position: absolute;
-  width: 100%;
-  height: 6px;
-  background: transparent;
-  -webkit-appearance: none;
-  appearance: none;
-  pointer-events: none;
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-
-.dda-range-slider-input::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  background: var(--dda-neutral-100);
-  border: solid 2px var(--dda-neutral-90);
-  cursor: pointer;
-  pointer-events: all;
-}
-
-.dda-range-slider-input::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  border: 0;
-  border-radius: 50%;
-  background: var(--dda-color-primary-40);
-  cursor: pointer;
-  pointer-events: all;
-  /* -moz-transition: all 0.15s ease-in-out;
-  transition: all 0.15s ease-in-out; */
-}
-
-.dda-range-slider-track {
-  position: absolute;
-  height: 100%;
-  background: var(--dda-color-primary-40);
-  border-radius: 5px;
-}
-
-.light-mode .dda-range-slider-track{
-  background: var(--dda-primary-40);
-}
-
-.dda-range-slider-track span {
-  background: var(--dda-neutral-100);
-  width: 55px;
-  height: 35px;
-  font-size: 16px;
-  color: var(--dda-on-surface-variant-30);
-  font-weight: var(--dda-fw-500);
-  text-align: center;
-  position: absolute;
-  top: 13px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.light-mode .dda-range-slider-track span{
-  color: var(--dda-neutral-variant-30);
-}
-
-.dda-tooltip-top .dda-range-slider-track span{
-  top: auto;
-  bottom: 24px;
-}
-.dda-tooltip-bottom .dda-range-slider-track span{
-  top: 24px;
-}
-.dda-range-slider-track .min-label {
-  left: -17px;
-}
-
-.dda-range-slider-track .max-label {
-  right: -33px;
-}
-
-.dda-tooltip-top .dda-range-slider-track span,
-.dda-tooltip-bottom .dda-range-slider-track span{
-  border: solid 1px var(--dda-neutral-90);
-  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);
-}
-.dda-tooltip-top .dda-range-slider-track span::before, 
-.dda-tooltip-top .dda-range-slider-track span::after,
-.dda-tooltip-bottom .dda-range-slider-track span::before, 
-.dda-tooltip-bottom .dda-range-slider-track span::after {
-  content: "";
-  position: absolute;
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  left: 50%;
-  margin-inline-start: -10px;
-}
-.dda-tooltip-top .dda-range-slider-track span::before {
-  top: 100%;
-  border-top: 8px solid var(--dda-neutral-90);
-  margin-top: 0px;
-}
-.dda-tooltip-top .dda-range-slider-track span::after {
-  top: 100%;
-  border-top: 8px solid var(--dda-neutral-100);
-  margin-top: -2px;
-  z-index: 1;
-}
-.dda-tooltip-bottom .dda-range-slider-track span::before {
-  bottom: 100%;
-  border-bottom: 8px solid var(--dda-neutral-90);
-  margin-bottom: 0px;
-}
-.dda-tooltip-bottom .dda-range-slider-track span::after {
-  bottom: 100%;
-  border-bottom: 8px solid var(--dda-neutral-100);
-  margin-bottom: -2px;
-  z-index: 1;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .dda-range-slider-input::-moz-range-thumb {
-    -moz-transition: all 0.15s ease-in-out;
-    transition: all 0.15s ease-in-out;
-  }
+.dda-range-slider-container {
+  width: 100%;
+  margin: 20px 0;
+  position: relative;
+}
+
+.dda-range-slider {
+  position: relative;
+  width: 100%;
+  height: 6px;
+  background: var(--dda-neutral-variant-92);
+  border-radius: 5px;
+}
+
+.dda-range-slider-input {
+  position: absolute;
+  width: 100%;
+  height: 6px;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  pointer-events: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.dda-range-slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--dda-neutral-100);
+  border: solid 2px var(--dda-neutral-90);
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.dda-range-slider-input::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--dda-color-primary-40);
+  cursor: pointer;
+  pointer-events: all;
+  -moz-transition: all 0.15s ease-in-out;
+  transition: all 0.15s ease-in-out;
+}
+
+.dda-range-slider-track {
+  position: absolute;
+  height: 100%;
+  background: var(--dda-color-primary-40);
+  border-radius: 5px;
+}
+
+.light-mode .dda-range-slider-track{
+  background: var(--dda-primary-40);
+}
+
+.dda-range-slider-track span {
+  background: var(--dda-neutral-100);
+  width: 55px;
+  height: 35px;
+  font-size: 16px;
+  color: var(--dda-on-surface-variant-30);
+  font-weight: var(--dda-fw-500);
+  text-align: center;
+  position: absolute;
+  top: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.light-mode .dda-range-slider-track span{
+  color: var(--dda-neutral-variant-30);
+}
+
+.dda-tooltip-top .dda-range-slider-track span{
+  top: auto;
+  bottom: 24px;
+}
+.dda-tooltip-bottom .dda-range-slider-track span{
+  top: 24px;
+}
+.dda-range-slider-track .min-label {
+  left: -17px;
+}
+
+.dda-range-slider-track .max-label {
+  right: -33px;
+}
+
+.dda-tooltip-top .dda-range-slider-track span,
+.dda-tooltip-bottom .dda-range-slider-track span{
+  border: solid 1px var(--dda-neutral-90);
+  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);
+}
+.dda-tooltip-top .dda-range-slider-track span::before, 
+.dda-tooltip-top .dda-range-slider-track span::after,
+.dda-tooltip-bottom .dda-range-slider-track span::before, 
+.dda-tooltip-bottom .dda-range-slider-track span::after {
+  content: "";
+  position: absolute;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  left: 50%;
+  margin-inline-start: -10px;
+}
+.dda-tooltip-top .dda-range-slider-track span::before {
+  top: 100%;
+  border-top: 8px solid var(--dda-neutral-90);
+  margin-top: 0px;
+}
+.dda-tooltip-top .dda-range-slider-track span::after {
+  top: 100%;
+  border-top: 8px solid var(--dda-neutral-100);
+  margin-top: -2px;
+  z-index: 1;
+}
+.dda-tooltip-bottom .dda-range-slider-track span::before {
+  bottom: 100%;
+  border-bottom: 8px solid var(--dda-neutral-90);
+  margin-bottom: 0px;
+}
+.dda-tooltip-bottom .dda-range-slider-track span::after {
+  bottom: 100%;
+  border-bottom: 8px solid var(--dda-neutral-100);
+  margin-bottom: -2px;
+  z-index: 1;
 }

package/dist/collection/components/dda-range-slider/dda-range-slider.js

@@ -28,10 +28,10 @@ export class DdaRangeSlider {
         return ((value - this.min) / (this.max - this.min)) * 100;
     }
     render() {
-        return (h(Host, { key: '7ca547b42d646b45843bbe124380f35f435d80e3' }, h("div", { key: '275c4be09e6e42d0a9fda97c056278b68dcc62ca', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'aa970bfff7c09850a4726e238a9e3c70f5769699', class: "dda-range-slider" }, h("div", { key: '8183779543ebe8f91fc15f1fd58961d3a6559af8', class: "dda-range-slider-track", style: {
+        return (h(Host, { key: '5670018e299720907af7d8251b353ba053a8ab57' }, h("div", { key: 'b330d6b9ecb417cbda31d0a03d9e317b752b5710', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'de0596c2790b949420c70f2d56f6e34a242b5b4c', class: "dda-range-slider" }, h("div", { key: 'a97e4ad627ea82d950580b1e330733a57064ac7e', class: "dda-range-slider-track", style: {
                 left: `${this.getPercentage(this.min_value)}%`,
                 right: `${100 - this.getPercentage(this.max_value)}%`,
-            } }, h("span", { key: '3548c59fba761064a052b5eeae57718ce9068bcb', class: "min-label" }, this.min_value, "%"), h("span", { key: 'd434ec0edff9b6bbb21b15b700fd074c2c054e4b', class: "max-label" }, this.max_value, "%")), h("label", { key: '8d70e12bfa867bca04977892cdbd7f095dda4301', htmlFor: this.left_input_id }, h("input", { key: '66a4d465d2b3b7c99b1421969c4fd7e23f690bbf', id: this.left_input_id, name: this.left_input_name, "aria-label": this.left_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("label", { key: 'f2c1bac86d00ce1d56e7d566cf57285c06e13a46', htmlFor: this.right_input_id }, h("input", { key: '26ad737accfccb3f1c0fc2c0a2289e9c768ef6a0', id: this.right_input_id, name: this.right_input_name, "aria-label": this.right_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
+            } }, h("span", { key: 'a33cd24a052e635eef5396f0a3bce913409e89b4', class: "min-label" }, this.min_value, "%"), h("span", { key: 'c5e09c25e8bab33b739cf02effddaefa91eb1df4', class: "max-label" }, this.max_value, "%")), h("label", { key: '1d84152f1ac26de381718ddaf83d5d28d7950699', htmlFor: this.left_input_id }, h("input", { key: 'c4d1cb836fe410b3dbd8323942902d297dac969a', id: this.left_input_id, name: this.left_input_name, "aria-label": this.left_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("label", { key: '5fd1337d18f17fdcda1bfc8b9846358e20d5ec59', htmlFor: this.right_input_id }, h("input", { key: '7abee593c9bcbed9bc3ad13a184f9e23de6deb3f', id: this.right_input_id, name: this.right_input_name, "aria-label": this.right_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
     }
     static get is() { return "dda-range-slider"; }
     static get originalStyleUrls() {
@@ -62,8 +62,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
+                "attribute": "min",
                 "defaultValue": "0"
             },
             "max": {
@@ -82,8 +82,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
+                "attribute": "max",
                 "defaultValue": "100"
             },
             "step": {
@@ -102,8 +102,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "step",
                 "reflect": false,
+                "attribute": "step",
                 "defaultValue": "1"
             },
             "initial_min": {
@@ -122,8 +122,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "initial_min",
                 "reflect": false,
+                "attribute": "initial_min",
                 "defaultValue": "0"
             },
             "initial_max": {
@@ -142,8 +142,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "initial_max",
                 "reflect": false,
+                "attribute": "initial_max",
                 "defaultValue": "100"
             },
             "size": {
@@ -162,8 +162,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "tooltip_position": {
                 "type": "string",
@@ -181,8 +181,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip_position",
-                "reflect": false
+                "reflect": false,
+                "attribute": "tooltip_position"
             },
             "custom_class": {
                 "type": "string",
@@ -200,8 +200,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -220,8 +220,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "left_input_id": {
                 "type": "string",
@@ -239,8 +239,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "left_input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "left_input_id"
             },
             "right_input_id": {
                 "type": "string",
@@ -258,8 +258,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "right_input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "right_input_id"
             },
             "left_aria_label": {
                 "type": "string",
@@ -277,8 +277,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "left_aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "left_aria_label"
             },
             "right_aria_label": {
                 "type": "string",
@@ -296,8 +296,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "right_aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "right_aria_label"
             },
             "left_input_name": {
                 "type": "string",
@@ -315,8 +315,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "left_input_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "left_input_name"
             },
             "right_input_name": {
                 "type": "string",
@@ -334,8 +334,8 @@ export class DdaRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "right_input_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "right_input_name"
             }
         };
     }
@@ -346,4 +346,3 @@ export class DdaRangeSlider {
         };
     }
 }
-//# sourceMappingURL=dda-range-slider.js.map

package/dist/collection/components/dda-range-slider/dda-range-slider.stories.js

@@ -64,26 +64,26 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-range-slider\` component, pass the following props:
-
-  \`\`\`html
-<dda-range-slider
-    min="0"
-    max="100"
-    step="1"
-    initial_min="20"
-    initial_max="80"
-    custom_class=""
-    component_mode=""
-    left_input_id="left_input"
-    right_input_id="right_input"
-    left_aria_label="minimum-value"
-    right_aria_label="maximum-value"
-    left_input_name="left_input"
-    right_input_name="right_input"
-></dda-range-slider>
-  \`\`\`
+                component: `
+  To use the \`dda-range-slider\` component, pass the following props:
+
+  \`\`\`html
+<dda-range-slider
+    min="0"
+    max="100"
+    step="1"
+    initial_min="20"
+    initial_max="80"
+    custom_class=""
+    component_mode=""
+    left_input_id="left_input"
+    right_input_id="right_input"
+    left_aria_label="minimum-value"
+    right_aria_label="maximum-value"
+    left_input_name="left_input"
+    right_input_name="right_input"
+></dda-range-slider>
+  \`\`\`
   `,
             },
         },
@@ -146,4 +146,3 @@ TooltipBottom.args = {
     left_input_name: 'left_input',
     right_input_name: 'right_input',
 };
-//# sourceMappingURL=dda-range-slider.stories.js.map