@3t-transform/threeteeui 1.9.69 → 1.9.70

package/dist/collection/components/molecules/tttx-multiselect-box/tttx-multiselect-box.stories.js

@@ -13,7 +13,7 @@ const options = [
   { value: 'Bonnie', label: 'Steuber', selected: true },
   { value: 'Priscilla', label: 'Lowe' },
   { value: 'Andy', label: 'Thompson-Keebler', html: '<span style="color: red">Thompson-Keebler</span>' },
-  { value: 'egg', label: 'egg', html: '<tttx-icon_1_9_69 icon="egg" />' },
+  { value: 'egg', label: 'egg', html: '<tttx-icon_1_9_70 icon="egg" />' },
   { value: 'Terence', label: 'Hyatt' },
   { value: 'Ruben', label: 'Toy' },
   { value: 'Rhiannon', label: 'Hills' },
@@ -28,7 +28,7 @@ const options = [
   { value: 'Ronaldo', label: 'Mann' },
 ];
 const TemplateMultiselectBox = args => `
-    <tttx-multiselect-box_1_9_69
+    <tttx-multiselect-box_1_9_70
         id="multiselectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -38,7 +38,7 @@ const TemplateMultiselectBox = args => `
         is-loading='${args.isLoading}'
         stop-local-search='${args.stopLocalSearch}'
         html-visible-value: true,
-    ></tttx-multiselect-box_1_9_69>
+    ></tttx-multiselect-box_1_9_70>
 
     <script>
       // Handle case where storybook renders this story twice
@@ -61,7 +61,7 @@ BasicMultiselectBox.args = {
   stopLocalSearch: true
 };
 const ReadOnlyMultiselectBoxTemplate = args => `
-    <tttx-multiselect-box_1_9_69
+    <tttx-multiselect-box_1_9_70
         id="multiselectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -72,7 +72,7 @@ const ReadOnlyMultiselectBoxTemplate = args => `
         stop-local-search='${args.stopLocalSearch}'
         read-only='${args.readOnly}'
         visible-value='${options[0].label}'
-    ></tttx-multiselect-box_1_9_69>
+    ></tttx-multiselect-box_1_9_70>
 
     <script>
       // Handle case where storybook renders this story twice
@@ -96,20 +96,20 @@ ReadOnlyMultiselectBox.args = {
   readOnly: true
 };
 const htmlOptions = [
-  { value: '1', label: 'Client', html: '<tttx-tag_1_9_69 text="Client" color="#f2bebe"></tttx-tag_1_9_69>', selected: true },
-  { value: '2', label: 'Job Role', html: '<tttx-tag_1_9_69 text="Job Role" color="#f9e1be"></tttx-tag_1_9_69>' },
-  { value: '3', label: 'Foo', html: '<tttx-tag_1_9_69 text="Foo" color="#e4ebc9"></tttx-tag_1_9_69>', selected: true },
-  { value: '4', label: 'Bar', html: '<tttx-tag_1_9_69 text="Bar" color="#f2bebe"></tttx-tag_1_9_69>', selected: true },
-  { value: '5', label: 'Baz', html: '<tttx-tag_1_9_69 text="Baz" color="#f9e1be"></tttx-tag_1_9_69>' },
-  { value: '6', label: 'Mill', html: '<tttx-tag_1_9_69 text="Mill" color="#e4ebc9"></tttx-tag_1_9_69>', selected: true },
-  { value: '7', label: 'Hill', html: '<tttx-tag_1_9_69 text="Hill" color="#f2bebe"></tttx-tag_1_9_69>', selected: true },
-  { value: '8', label: 'Fill', html: '<tttx-tag_1_9_69 text="Fill" color="#f9e1be"></tttx-tag_1_9_69>' },
-  { value: '9', label: 'Supercalifragilisticexpialidocious', html: '<tttx-tag_1_9_69 text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_1_9_69>', selected: true },
+  { value: '1', label: 'Client', html: '<tttx-tag_1_9_70 text="Client" color="#f2bebe"></tttx-tag_1_9_70>', selected: true },
+  { value: '2', label: 'Job Role', html: '<tttx-tag_1_9_70 text="Job Role" color="#f9e1be"></tttx-tag_1_9_70>' },
+  { value: '3', label: 'Foo', html: '<tttx-tag_1_9_70 text="Foo" color="#e4ebc9"></tttx-tag_1_9_70>', selected: true },
+  { value: '4', label: 'Bar', html: '<tttx-tag_1_9_70 text="Bar" color="#f2bebe"></tttx-tag_1_9_70>', selected: true },
+  { value: '5', label: 'Baz', html: '<tttx-tag_1_9_70 text="Baz" color="#f9e1be"></tttx-tag_1_9_70>' },
+  { value: '6', label: 'Mill', html: '<tttx-tag_1_9_70 text="Mill" color="#e4ebc9"></tttx-tag_1_9_70>', selected: true },
+  { value: '7', label: 'Hill', html: '<tttx-tag_1_9_70 text="Hill" color="#f2bebe"></tttx-tag_1_9_70>', selected: true },
+  { value: '8', label: 'Fill', html: '<tttx-tag_1_9_70 text="Fill" color="#f9e1be"></tttx-tag_1_9_70>' },
+  { value: '9', label: 'Supercalifragilisticexpialidocious', html: '<tttx-tag_1_9_70 text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_1_9_70>', selected: true },
 ];
 const TemplateHtmlVisibleValueWrap = args => `
     <div style="height: 400px; width: 50px"></div>
     <div style="width: 300px">
-      <tttx-multiselect-box_1_9_69
+      <tttx-multiselect-box_1_9_70
           id="multiselectBoxVisibleValueWrap"
           options-data='${JSON.stringify(args.optionsData)}'
           label='${args.label}'
@@ -117,8 +117,8 @@ const TemplateHtmlVisibleValueWrap = args => `
           search-enabled='${args.searchEnabled}'
           inline='${args.inline}'
           html-visible-value='true'
-          visible-value='<tttx-tag_1_9_69 text="Client" color="#f2bebe"></tttx-tag_1_9_69><tttx-tag_1_9_69 text="Foo" color="#e4ebc9"></tttx-tag_1_9_69><tttx-tag_1_9_69 text="Bar" color="#f2bebe"></tttx-tag_1_9_69><tttx-tag_1_9_69 text="Mill" color="#e4ebc9"></tttx-tag_1_9_69><tttx-tag_1_9_69 text="Hill" color="#f2bebe"></tttx-tag_1_9_69><tttx-tag_1_9_69 text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_1_9_69>'
-      ></tttx-multiselect-box_1_9_69>
+          visible-value='<tttx-tag_1_9_70 text="Client" color="#f2bebe"></tttx-tag_1_9_70><tttx-tag_1_9_70 text="Foo" color="#e4ebc9"></tttx-tag_1_9_70><tttx-tag_1_9_70 text="Bar" color="#f2bebe"></tttx-tag_1_9_70><tttx-tag_1_9_70 text="Mill" color="#e4ebc9"></tttx-tag_1_9_70><tttx-tag_1_9_70 text="Hill" color="#f2bebe"></tttx-tag_1_9_70><tttx-tag_1_9_70 text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_1_9_70>'
+      ></tttx-multiselect-box_1_9_70>
     </div>
 
     <script>
@@ -140,12 +140,12 @@ HtmlVisibleValueWrap.args = {
   inline: false,
 };
 const htmlOptionsShort = [
-  { value: '1', label: 'Client', html: '<tttx-tag_1_9_69 text="Client" color="#f2bebe"></tttx-tag_1_9_69>', selected: true },
-  { value: '2', label: 'Job Role', html: '<tttx-tag_1_9_69 text="Job Role" color="#f9e1be"></tttx-tag_1_9_69>' },
-  { value: '3', label: 'Foo', html: '<tttx-tag_1_9_69 text="Foo" color="#e4ebc9"></tttx-tag_1_9_69>', selected: true },
+  { value: '1', label: 'Client', html: '<tttx-tag_1_9_70 text="Client" color="#f2bebe"></tttx-tag_1_9_70>', selected: true },
+  { value: '2', label: 'Job Role', html: '<tttx-tag_1_9_70 text="Job Role" color="#f9e1be"></tttx-tag_1_9_70>' },
+  { value: '3', label: 'Foo', html: '<tttx-tag_1_9_70 text="Foo" color="#e4ebc9"></tttx-tag_1_9_70>', selected: true },
 ];
 const TemplateHtmlVisibleValue = args => `
-    <tttx-multiselect-box_1_9_69
+    <tttx-multiselect-box_1_9_70
         id="multiselectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -153,7 +153,7 @@ const TemplateHtmlVisibleValue = args => `
         search-enabled='${args.searchEnabled}'
         inline='${args.inline}'
         html-visible-value='true'
-    ></tttx-multiselect-box_1_9_69>
+    ></tttx-multiselect-box_1_9_70>
 
     <script>
       // Handle case where storybook renders this story twice
@@ -174,22 +174,22 @@ HtmlVisibleValue.args = {
   inline: false,
 };
 const tagOptions = [
-  { value: '1', label: 'Client', html: '<tttx-tag_1_9_69 text="Client" color="#f2bebe"></tttx-tag_1_9_69>', selected: true },
-  { value: '2', label: 'Job Role', html: '<tttx-tag_1_9_69 text="Job Role" color="#f9e1be"></tttx-tag_1_9_69>' },
-  { value: '3', label: 'Foo', html: '<tttx-tag_1_9_69 text="Foo" color="#e4ebc9"></tttx-tag_1_9_69>', selected: true },
-  { value: '4', label: 'Bar', html: '<tttx-tag_1_9_69 text="Bar" color="#f2bebe"></tttx-tag_1_9_69>', selected: true },
-  { value: '5', label: 'Baz', html: '<tttx-tag_1_9_69 text="Baz" color="#f9e1be"></tttx-tag_1_9_69>' },
-  { value: '6', label: 'Mill', html: '<tttx-tag_1_9_69 text="Mill" color="#e4ebc9"></tttx-tag_1_9_69>', selected: true },
-  { value: '7', label: 'Hill', html: '<tttx-tag_1_9_69 text="Hill" color="#f2bebe"></tttx-tag_1_9_69>', selected: true },
-  { value: '8', label: 'Fill', html: '<tttx-tag_1_9_69 text="Fill" color="#f9e1be"></tttx-tag_1_9_69>' },
-  { value: '9', label: 'Supercalifragilisticexpialidocious', html: '<tttx-tag_1_9_69 text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_1_9_69>', selected: true },
+  { value: '1', label: 'Client', html: '<tttx-tag_1_9_70 text="Client" color="#f2bebe"></tttx-tag_1_9_70>', selected: true },
+  { value: '2', label: 'Job Role', html: '<tttx-tag_1_9_70 text="Job Role" color="#f9e1be"></tttx-tag_1_9_70>' },
+  { value: '3', label: 'Foo', html: '<tttx-tag_1_9_70 text="Foo" color="#e4ebc9"></tttx-tag_1_9_70>', selected: true },
+  { value: '4', label: 'Bar', html: '<tttx-tag_1_9_70 text="Bar" color="#f2bebe"></tttx-tag_1_9_70>', selected: true },
+  { value: '5', label: 'Baz', html: '<tttx-tag_1_9_70 text="Baz" color="#f9e1be"></tttx-tag_1_9_70>' },
+  { value: '6', label: 'Mill', html: '<tttx-tag_1_9_70 text="Mill" color="#e4ebc9"></tttx-tag_1_9_70>', selected: true },
+  { value: '7', label: 'Hill', html: '<tttx-tag_1_9_70 text="Hill" color="#f2bebe"></tttx-tag_1_9_70>', selected: true },
+  { value: '8', label: 'Fill', html: '<tttx-tag_1_9_70 text="Fill" color="#f9e1be"></tttx-tag_1_9_70>' },
+  { value: '9', label: 'Supercalifragilisticexpialidocious', html: '<tttx-tag_1_9_70 text="Supercalifragilisticexpialidocious" color="#e4ebc9"></tttx-tag_1_9_70>', selected: true },
 ];
 const TttxDialogBoxStory = ({ data }) => `
   <button onclick="openDialog()">Open</button>
-  <tttx-dialog-box_1_9_69
+  <tttx-dialog-box_1_9_70
     id='dialogBox'
     allow-overflow='true'
-  ></tttx-dialog-box_1_9_69>
+  ></tttx-dialog-box_1_9_70>
   <script>
     if(!dialogBox) {
       const dialogBox = document.getElementById('dialogBox');
@@ -216,7 +216,7 @@ DialogBoxWithDropdown.args = {
       isCustomHtml: true,
       customHtml: `
               <div style="padding: 5px;">
-                <tttx-multiselect-box_1_9_69
+                <tttx-multiselect-box_1_9_70
                   id="dropdownSelectBox"
                   options-data='${JSON.stringify(tagOptions)}'
                   label='Label'
@@ -225,7 +225,7 @@ DialogBoxWithDropdown.args = {
                   inline='${false}'
                   visible-value='${tagOptions[0].html} ${tagOptions[2].html}'
                   html-visible-value='true'
-                ></tttx-multiselect-box_1_9_69>
+                ></tttx-multiselect-box_1_9_70>
               </div>
             `,
     },
@@ -245,7 +245,7 @@ const priorityMultiSelectOptions = [
   { value: '4', label: 'Keira Metz' }
 ];
 const TemplatePriorityMultiSelect = args => `
-    <tttx-multiselect-box_1_9_69
+    <tttx-multiselect-box_1_9_70
         id="multiselectBox"
         options-data='${JSON.stringify(args.optionsData)}'
         label='${args.label}'
@@ -254,7 +254,7 @@ const TemplatePriorityMultiSelect = args => `
         inline='${args.inline}'
         priority-label='${args.priorityLabel}'
         non-priority-label='${args.nonPriorityLabel}'
-    ></tttx-multiselect-box_1_9_69>
+    ></tttx-multiselect-box_1_9_70>
 
     <script>
         if (!multiselectBox.length) {

package/dist/collection/components/molecules/tttx-range-slider/tttx-range-slider.css

@@ -0,0 +1,158 @@
+.wrapper {
+    position: relative;
+    width: 80%;
+    background-color: #ffffff;
+    padding: 50px 40px 20px 40px;
+    border-radius: 10px;
+}
+
+.container {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    margin-top: 20px;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    outline: none;
+    position: absolute;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    background-color: transparent;
+    pointer-events: none;
+}
+
+.slider-track {
+    width: 100%;
+    height: 5px;
+    position: absolute;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    border-radius: 5px;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    height: 5px;
+}
+
+input[type="range"]::-moz-range-track {
+    -moz-appearance: none;
+    height: 5px;
+}
+
+input[type="range"]::-ms-track {
+    appearance: none;
+    height: 5px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 1.7em;
+    width: 1.7em;
+    background-color: #1579C6;
+    cursor: pointer;
+    margin-top: -9px;
+    pointer-events: auto;
+    border-radius: 50%;
+    border: 2px solid white;
+}
+
+input[type="range"]::-moz-range-thumb {
+    -webkit-appearance: none;
+    height: 1.7em;
+    width: 1.7em;
+    cursor: pointer;
+    border-radius: 50%;
+    border: 2px solid white;
+    background-color: #1579C6;
+    pointer-events: auto;
+}
+
+input[type="range"]::-ms-thumb {
+    appearance: none;
+    height: 1.7em;
+    width: 1.7em;
+    cursor: pointer;
+    border-radius: 50%;
+    border: 2px solid white;
+    background-color: #1579C6;
+    pointer-events: auto;
+}
+
+input[type="range"]:active::-webkit-slider-thumb {
+    background-color: #1579C6;
+    border: 2px solid white;
+}
+
+.values {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.range-divider {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+}
+
+.range-divider, .value-input {
+    color: #9E9E9E
+}
+
+.input-pre-text {
+    position: absolute;
+    font-size: 14px;
+    line-height: 16px;
+    font-style: normal;
+    margin-top: 9px;
+    margin-left: 5px;
+}
+
+.value-input {
+    padding-left: 40px;
+    height: 30px;
+    width: 45px;
+    border-radius: 4px;
+    border: 1px solid #D5D5D5;
+}
+
+.slider-tooltip {
+	background: #212121;
+	border-radius: .4em;
+    display: none;
+    position: absolute;
+    color: #ffffff;
+    padding: var(--05, 4px) var(--2, 14px);
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 1;
+    top: -15px !important;
+    left: 1px;
+}
+
+.slider-tooltip-upper {
+    right: 1px;
+    left: auto !important;
+}
+
+.slider-tooltip:after {
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	width: 0;
+	height: 0;
+	border: 6px solid transparent;
+	border-top-color: #212121;
+	border-bottom: 0;
+	margin-left: -6px;
+	margin-bottom: -6px;
+}

package/dist/collection/components/molecules/tttx-range-slider/tttx-range-slider.js

@@ -0,0 +1,262 @@
+import { h, Fragment } from '@stencil/core';
+export class TttxRangeSlider {
+  constructor() {
+    this.sliderBackground = '#D5D5D5';
+    this.activeSliderBackground = '#1579C6';
+    this.minGap = 0;
+    this.minimum = 0;
+    this.maximum = 100;
+    this.sliderMode = 'single';
+    this.showFields = false;
+    this.lowerValue = undefined;
+    this.upperValue = undefined;
+  }
+  componentWillLoad() {
+    if (!['single', 'dual'].includes(this.sliderMode))
+      this.sliderMode = 'single';
+    this.lowerValue = this.minimum;
+    this.upperValue = this.maximum;
+    this.showFields = this.showFields && this.sliderMode === 'dual'; // only show fields if requested & on dual slider
+  }
+  componentDidRender() {
+    this.setSliderColours();
+  }
+  emitValuesUpdatedEvent() {
+    // timeout as could be fired several times as slider is dragged, only send one event
+    clearTimeout(this.emitValuesTimeout);
+    this.emitValuesTimeout = setTimeout((lowerValue, upperValue) => {
+      this.sliderValuesUpdated.emit({
+        lowerValue,
+        upperValue
+      });
+    }, 300, this.lowerValue, this.upperValue);
+  }
+  inputDebounce(inputType, event) {
+    // debounce to allow user time to finish inputting value
+    clearTimeout(this.inputTimeout);
+    this.inputTimeout = setTimeout((inputType, event) => {
+      this.handleInputChange(inputType, event);
+    }, 300, inputType, event.target.value);
+  }
+  handleInputChange(inputType, inputValue) {
+    const enteredValue = parseInt(inputValue);
+    if (inputType === 'min') {
+      let newValue = enteredValue;
+      // cannot go higher than max slider or lower than minimum
+      if (Number.isNaN(enteredValue) || newValue < this.minimum)
+        newValue = this.minimum;
+      if (newValue > this.upperValue)
+        newValue = this.upperValue;
+      this.refLowerInput.value = newValue;
+      this.lowerValue = newValue;
+    }
+    if (inputType === 'max') {
+      let newValue = enteredValue;
+      // cannot go lower than min slider or higher than maximum
+      if (Number.isNaN(enteredValue) || newValue > this.maximum)
+        newValue = this.maximum;
+      if (newValue < this.lowerValue)
+        newValue = this.lowerValue;
+      this.refUpperInput.value = newValue;
+      this.upperValue = newValue;
+    }
+    // notify user of updated slider values
+    this.emitValuesUpdatedEvent();
+  }
+  onMinSliderChange() {
+    // update slider & fields (without going above upper limit)
+    if (parseInt(this.refSliderUpper.value) - parseInt(this.refSliderLower.value) <= this.minGap) {
+      this.refSliderLower.value = parseInt(this.refSliderUpper.value) - this.minGap;
+    }
+    if (this.showFields)
+      this.refLowerInput.value = this.refSliderLower.value;
+    this.setSliderColours();
+    this.setTooltipPositions('min');
+    this.lowerValue = parseInt(this.refSliderLower.value);
+    // notify user of updated slider values
+    this.emitValuesUpdatedEvent();
+  }
+  onMaxSliderChange() {
+    // update slider & fields (without going below lower limit)
+    if (parseInt(this.refSliderUpper.value) - parseInt(this.refSliderLower.value) <= this.minGap) {
+      this.refSliderUpper.value = parseInt(this.refSliderLower.value) + this.minGap;
+    }
+    if (this.showFields)
+      this.refUpperInput.value = this.refSliderUpper.value;
+    this.setSliderColours();
+    this.setTooltipPositions('max');
+    this.upperValue = parseInt(this.refSliderUpper.value);
+    // notify user of updated slider values
+    this.emitValuesUpdatedEvent();
+  }
+  setSliderColours() {
+    // update highlighted part of slider based on where slider has moved to
+    if (this.sliderMode === 'single') {
+      const percent = (this.refSliderSingle.value / this.maximum) * 100;
+      this.refSliderTrack.style.background = `linear-gradient(to right, ${this.activeSliderBackground} ${percent}% , ${this.sliderBackground} ${percent}%)`;
+    }
+    if (this.sliderMode === 'dual') {
+      const percent1 = (this.refSliderLower.value / this.maximum) * 100;
+      const percent2 = (this.refSliderUpper.value / this.maximum) * 100;
+      this.refSliderTrack.style.background = `linear-gradient(to right, ${this.sliderBackground} ${percent1}% , ${this.activeSliderBackground} ${percent1}% , ${this.activeSliderBackground} ${percent2}%, ${this.sliderBackground} ${percent2}%)`;
+    }
+  }
+  renderValueInput(inputType, value) {
+    return (h("div", { class: 'input-wrapper' }, h("span", { class: 'input-pre-text' }, inputType[0].toUpperCase() + inputType.slice(1, inputType.length) + ':'), h("input", { type: 'number', class: 'value-input', value: value, ref: el => this.setValueInputRef(inputType, el), onInput: (event) => this.inputDebounce(inputType, event) })));
+  }
+  setValueInputRef(inputType, element) {
+    if (inputType === 'min')
+      this.refLowerInput = element;
+    if (inputType === 'max')
+      this.refUpperInput = element;
+  }
+  setTooltipPositions(sliderMoved) {
+    let timeoutRef;
+    let tooltipRef;
+    let percentage;
+    let styleElement;
+    if (sliderMoved === 'min') {
+      // single slider uses upper val but needs to build from left
+      const value = this.sliderMode === 'single' ? this.upperValue : this.lowerValue;
+      timeoutRef = this.minTooltipTimeout;
+      tooltipRef = this.refTooltipMin;
+      percentage = ((value - this.minimum) / (this.maximum - this.minimum)) * 100;
+      styleElement = 'left';
+    }
+    if (sliderMoved === 'max') {
+      timeoutRef = this.maxTooltipTimeout;
+      tooltipRef = this.refTooltipMax;
+      percentage = 100 - (((this.upperValue - this.minimum) / (this.maximum - this.minimum)) * 100);
+      styleElement = 'right';
+    }
+    // clear relevant timeout & set element expected % from right or left
+    clearTimeout(timeoutRef);
+    tooltipRef.style[styleElement] = `${percentage}%`;
+    tooltipRef.style.display = 'block';
+    timeoutRef = setTimeout(() => {
+      tooltipRef.style.display = 'none';
+    }, 1500);
+  }
+  onSingleSliderChange(event) {
+    const value = event.target.value;
+    this.upperValue = parseInt(value); // can only come from slider, no chance of being NaN
+    this.setTooltipPositions('min');
+    // notify user of updated slider values
+    this.emitValuesUpdatedEvent();
+  }
+  render() {
+    return (h("div", { class: 'wrapper' }, this.sliderMode === 'single' && (h(Fragment, null, h("div", { class: 'container' }, h("div", { class: 'slider-track', ref: el => (this.refSliderTrack = el) }), h("span", { ref: el => (this.refTooltipMin = el), class: 'slider-tooltip' }, this.upperValue), h("input", { type: 'range', min: this.minimum, max: this.maximum, value: this.lowerValue, ref: el => (this.refSliderSingle = el), onInput: this.onSingleSliderChange.bind(this) })))), this.sliderMode === 'dual' && (h(Fragment, null, this.showFields && (h("div", { class: 'values' }, this.renderValueInput('min', this.minimum), h("span", { class: 'range-divider' }, " to "), this.renderValueInput('max', this.maximum))), h("div", { class: 'container' }, h("div", { class: 'slider-track', ref: el => (this.refSliderTrack = el) }), h("span", { ref: el => (this.refTooltipMin = el), class: 'slider-tooltip' }, this.lowerValue), h("span", { ref: el => (this.refTooltipMax = el), class: 'slider-tooltip slider-tooltip-upper' }, this.upperValue), h("input", { type: 'range', min: this.minimum, max: this.maximum, value: this.lowerValue, ref: el => (this.refSliderLower = el), onInput: () => this.onMinSliderChange() }), h("input", { type: 'range', min: this.minimum, max: this.maximum, value: this.upperValue, ref: el => (this.refSliderUpper = el), onInput: () => this.onMaxSliderChange() }))))));
+  }
+  static get is() { return "tttx-range-slider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-range-slider.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-range-slider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "minimum": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "minimum",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "maximum": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "maximum",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "sliderMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'single' | 'dual'",
+          "resolved": "\"dual\" | \"single\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "slider-mode",
+        "reflect": false,
+        "defaultValue": "'single'"
+      },
+      "showFields": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-fields",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "lowerValue": {},
+      "upperValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sliderValuesUpdated",
+        "name": "sliderValuesUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ lowerValue: number, upperValue: number }",
+          "resolved": "{ lowerValue: number; upperValue: number; }",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/molecules/tttx-range-slider/tttx-range-slider.stories.js

@@ -0,0 +1,34 @@
+export default {
+  title: 'molecules/Range Slider',
+  component: 'tttx-range-slider'
+};
+const TemplateBasicSlider = (args) => `
+    <tttx-range-slider
+        minimum="${args.minimum}"
+        maximum="${args.maximum}"
+        slider-mode="${args.sliderMode}"
+        show-fields="${args.showFields}"
+    />
+`;
+export const BasicSlider = TemplateBasicSlider.bind({});
+BasicSlider.args = {
+  minimum: 0,
+  maximum: 100,
+  sliderMode: 'single',
+  showFields: true
+};
+const TemplateDualSlider = (args) => `
+    <tttx-range-slider
+        minimum="${args.minimum}"
+        maximum="${args.maximum}"
+        slider-mode="${args.sliderMode}"
+        show-fields="${args.showFields}"
+    />
+`;
+export const DualSlider = TemplateDualSlider.bind({});
+DualSlider.args = {
+  minimum: 0,
+  maximum: 100,
+  sliderMode: 'dual',
+  showFields: true
+};