globuswebcomponents 1.1.1 → 1.1.3

package/dist/globuscomponents/p-fa7e8127.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbSliderCss","GbSliderStyle0","GbSlider","this","isDragging","activeThumb","handleMouseDown","_e","thumb","leftValue","Math","min","rightValue","max","document","addEventListener","handleMouseMove","handleMouseUp","e","boundingBox","containerEl","getBoundingClientRect","position","clientX","left","width","value","round","updateTrack","thumbValueChanged","emit","right","removeEventListener","componentWillLoad","leftControl","rightControl","componentDidLoad","trackEl","el","shadowRoot","querySelector","leftPos","rightPos","style","formatValue","unitPosition","unit","render","h","key","class","ref","type","label","onMouseDown"],"sources":["src/components/gb-slider/gb-slider.css?tag=gb-slider&encapsulation=shadow","src/components/gb-slider/gb-slider.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n  display: block;\r\n  height: 4px;\r\n  padding: 20px;\r\n  cursor: pointer;\r\n}\r\n  \r\n.slider-container {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 8px;\r\n  background-color: var(--color-border-subtler, #E3E8EF);\r\n  border-radius: var(--rounded-xs);\r\n}\r\n  \r\n.track {\r\n  position: absolute;\r\n  height: 100%;\r\n  background-color: var(--color-border-selected, #075DB2);\r\n}\r\n  \r\ngb-slider-control-handle {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translate(-50%, -50%);\r\n  cursor: pointer;\r\n}","import { Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider',\r\n  styleUrl: 'gb-slider.css',\r\n  shadow: true,\r\n})\r\nexport class GbSlider {\r\n  @Element() el: HTMLElement;\r\n  @Prop() min: number = 0;\r\n  @Prop() max: number = 100;\r\n  @Prop() thumbType: 'text' | 'tooltip';\r\n  @Prop() leftControl: number = 0; // Developer can set this\r\n  @Prop() rightControl: number = 100; // Developer can set this\r\n  @Prop() label: 'false' | 'bottom' | 'top_floating';\r\n  @Prop() unit: string = '';\r\n  @Prop() unitPosition: 'left' | 'right' = 'left';\r\n  @State() leftValue: number;\r\n  @State() rightValue: number; \r\n  @Event() thumbValueChanged: EventEmitter<{ left: number; right: number }>;\r\n\r\n  private trackEl: HTMLDivElement;\r\n  private containerEl: HTMLDivElement;\r\n  private isDragging: boolean = false;\r\n  private activeThumb: 'left' | 'right' | null = null;\r\n\r\n  componentWillLoad() {\r\n    // Set the initial values for the slider\r\n    this.leftValue = Math.max(this.min, Math.min(this.leftControl, this.max));\r\n    this.rightValue = Math.max(this.min, Math.min(this.rightControl, this.max));\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.trackEl = this.el.shadowRoot.querySelector('.track');\r\n    this.containerEl = this.el.shadowRoot.querySelector('.slider-container');\r\n    this.updateTrack();\r\n  }\r\n\r\n  handleMouseDown = (_e: MouseEvent, thumb: 'left' | 'right') => {\r\n    this.isDragging = true;\r\n    this.activeThumb = thumb;\r\n\r\n    // Clamp the initial value of the thumb within bounds\r\n    if (thumb === 'left') {\r\n      this.leftValue = Math.min(this.leftValue, this.rightValue - 1);\r\n    } else {\r\n      this.rightValue = Math.max(this.rightValue, this.leftValue + 1);\r\n    }\r\n\r\n    document.addEventListener('mousemove', this.handleMouseMove);\r\n    document.addEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  handleMouseMove = (e: MouseEvent) => {\r\n    if (!this.isDragging) return;\r\n\r\n    // Get the bounding box of the slider container\r\n    const boundingBox = this.containerEl.getBoundingClientRect();\r\n\r\n    // Calculate the mouse position relative to the slider container\r\n    const position = ((e.clientX - boundingBox.left) / boundingBox.width) * (this.max - this.min) + this.min;\r\n\r\n    // Snap the position to the nearest integer increment of 1\r\n    const value = Math.round(position);\r\n\r\n    // Update the appropriate thumb's value, clamping it within bounds\r\n    if (this.activeThumb === 'left') {\r\n      this.leftValue = Math.max(this.min, Math.min(value, this.rightValue - 1)); // Ensure it doesn't exceed right thumb\r\n    } else {\r\n      this.rightValue = Math.min(this.max, Math.max(value, this.leftValue + 1)); // Ensure it doesn't go below left thumb\r\n    }\r\n\r\n    // Update the track's appearance and emit the new values\r\n    this.updateTrack();\r\n    this.thumbValueChanged.emit({ left: this.leftValue, right: this.rightValue });\r\n  };\r\n\r\n  handleMouseUp = () => {\r\n    this.isDragging = false;\r\n    this.activeThumb = null;\r\n    document.removeEventListener('mousemove', this.handleMouseMove);\r\n    document.removeEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  updateTrack() {\r\n    const leftPos = ((this.leftValue - this.min) / (this.max - this.min)) * 100;\r\n    const rightPos = ((this.rightValue - this.min) / (this.max - this.min)) * 100;\r\n\r\n    // Update the track's left position and width to match the thumb positions.\r\n    this.trackEl.style.left = `${leftPos}%`;\r\n    this.trackEl.style.width = `${rightPos - leftPos}%`;\r\n  }\r\n\r\n  formatValue(value: number): string {\r\n    return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"slider-container\" ref={el => (this.containerEl = el as HTMLDivElement)}>\r\n        <div class=\"track\" ref={el => (this.trackEl = el as HTMLDivElement)}></div>\r\n\r\n        <gb-slider-control-handle\r\n          class=\"left\"\r\n          value={this.formatValue(this.leftValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'left')}\r\n        ></gb-slider-control-handle>\r\n        <gb-slider-control-handle\r\n          class=\"right\"\r\n          value={this.formatValue(this.rightValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'right')}\r\n        ></gb-slider-control-handle>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}