/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { MDCSlider } from '@material/slider';
import { CustomElement, coerceBoolean, coerceNumber, emitEvent, attachShadowTemplate, getShadowElement, isDefined, replaceShadowTemplate } from '@tylertech/forge-core';
import { BaseComponent } from '../core/base/base-component';
import { SLIDER_CONSTANTS } from './slider-constants';
const continuousTemplate = '<template><div class=\"mdc-slider\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" name=\"slider\" aria-label=\"Choose value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb\"><div class=\"mdc-slider__thumb-knob\" part=\"thumb-knob\"></div></div></div></template>';
const continuousRangeTemplate = '<template><div class=\"mdc-slider mdc-slider--range\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" name=\"rangeStart\" aria-label=\"Choose start range value\"> <input class=\"mdc-slider__input\" id=\"value-input-start\" type=\"range\" min=\"0\" max=\"100\" value=\"100\" name=\"rangeEnd\" aria-label=\"Choose end range value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-start\"><div class=\"mdc-slider__thumb-knob\" part=\"thumb-start-knob\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-end\"><div class=\"mdc-slider__thumb-knob\" part=\"thumb-end-knob\"></div></div></div></template>';
const discreteTemplate = '<template><div class=\"mdc-slider mdc-slider--discrete\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" name=\"slider\" aria-label=\"Choose value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb\"><div class=\"mdc-slider__value-indicator-container\" part=\"value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-knob\"></div></div></div></template>';
const discreteMarkersTemplate = '<template><div class=\"mdc-slider mdc-slider--discrete mdc-slider--tick-marks\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" name=\"slider\" step=\"10\" aria-label=\"Choose value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div><div class=\"mdc-slider__tick-marks\" part=\"tick-marks-container\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb\"><div class=\"mdc-slider__value-indicator-container\" part=\"value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-knob\"></div></div></div></template>';
const discreteRangeTemplate = '<template><div class=\"mdc-slider mdc-slider--range mdc-slider--discrete\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeStart\" aria-label=\"Choose start range value\"> <input class=\"mdc-slider__input\" id=\"value-input-start\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeEnd\" aria-label=\"Choose end range value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-start\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-start-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-start-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-start-value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-start-knob\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-end\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-end-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-end-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-end-value-indicator-text\">100</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-end-knob\"></div></div></div></template>';
const discreteRangeMarkersTemplate = '<template><div class=\"mdc-slider mdc-slider--range mdc-slider--discrete mdc-slider--tick-marks\" part=\"root\"><input class=\"mdc-slider__input\" id=\"value-input\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeStart\" aria-label=\"Choose start range value\"> <input class=\"mdc-slider__input\" id=\"value-input-start\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"10\" name=\"rangeEnd\" aria-label=\"Choose end range value\"><div class=\"mdc-slider__track\" part=\"track\"><div class=\"mdc-slider__track--inactive\" part=\"track-inactive\"></div><div class=\"mdc-slider__track--active\" part=\"track-active\"><div class=\"mdc-slider__track--active_fill\" part=\"track-active-fill\"></div></div><div class=\"mdc-slider__tick-marks\" part=\"tick-marks-container\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-start\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-start-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-start-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-start-value-indicator-text\">0</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-start-knob\"></div></div><div class=\"mdc-slider__thumb\" part=\"thumb-end\"><div class=\"mdc-slider__value-indicator-container\" part=\"thumb-end-value-indicator-container\"><div class=\"mdc-slider__value-indicator\" part=\"thumb-end-value-indicator\"><span class=\"mdc-slider__value-indicator-text\" part=\"thumb-end-value-indicator-text\">100</span></div></div><div class=\"mdc-slider__thumb-knob\" part=\"thumb-end-knob\"></div></div></div></template>';
const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-slider__thumb{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity}.mdc-slider__thumb::after,.mdc-slider__thumb::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-slider__thumb::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-slider__thumb::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-slider__thumb.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-slider__thumb.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-slider__thumb.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-slider__thumb::after,.mdc-slider__thumb::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-slider__thumb.mdc-ripple-upgraded::after,.mdc-slider__thumb.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-slider__thumb.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-slider__thumb::after,.mdc-slider__thumb::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider__thumb.mdc-ripple-surface--hover::before,.mdc-slider__thumb:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{height:4px;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:-webkit-box;display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{border-radius:3px;height:6px;overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;width:100%;position:relative;-webkit-transform-origin:left;transform-origin:left}.mdc-slider .mdc-slider__track--active_fill[dir=rtl],[dir=rtl] .mdc-slider .mdc-slider__track--active_fill{-webkit-transform-origin:right;transform-origin:right}.mdc-slider .mdc-slider__track--inactive{border-radius:2px;height:4px;left:0;top:0}.mdc-slider .mdc-slider__track--inactive::before{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors:active){.mdc-slider .mdc-slider__track--inactive::before{border-color:CanvasText}}.mdc-slider .mdc-slider__track--active_fill{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider .mdc-slider__track--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.24}.mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.24}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:50%;left:var(--slider-value-indicator-container-left,50%);pointer-events:none;position:absolute;right:var(--slider-value-indicator-container-right);-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transform:var(--slider-value-indicator-container-transform,translateX(-50%));transform:var(--slider-value-indicator-container-transform,translateX(-50%))}.mdc-slider .mdc-slider__value-indicator{-webkit-transition:-webkit-transform .1s 0s cubic-bezier(.4, 0, 1, 1);transition:-webkit-transform .1s 0s cubic-bezier(.4, 0, 1, 1);transition:transform .1s 0s cubic-bezier(.4, 0, 1, 1);transition:transform .1s 0s cubic-bezier(.4, 0, 1, 1),-webkit-transform .1s 0s cubic-bezier(.4, 0, 1, 1);-webkit-box-align:center;align-items:center;border-radius:4px;display:-webkit-box;display:flex;height:32px;padding:0 12px;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:bottom;transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator::before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid;bottom:-5px;content:\"\";height:0;left:50%;left:var(--slider-value-indicator-caret-left,50%);position:absolute;right:var(--slider-value-indicator-caret-right);-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transform:var(--slider-value-indicator-caret-transform,translateX(-50%));transform:var(--slider-value-indicator-caret-transform,translateX(-50%));width:0}.mdc-slider .mdc-slider__value-indicator::after{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors:active){.mdc-slider .mdc-slider__value-indicator::after{border-color:CanvasText}}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{-webkit-transition:-webkit-transform .1s 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform .1s 0s cubic-bezier(0, 0, .2, 1);transition:transform .1s 0s cubic-bezier(0, 0, .2, 1);transition:transform .1s 0s cubic-bezier(0, 0, .2, 1),-webkit-transform .1s 0s cubic-bezier(0, 0, .2, 1);-webkit-transform:scale(1);transform:scale(1)}@media (prefers-reduced-motion){.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator,.mdc-slider .mdc-slider__value-indicator{-webkit-transition:none;transition:none}}.mdc-slider .mdc-slider__value-indicator-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size, .875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, .0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit)}.mdc-slider .mdc-slider__value-indicator{background-color:#000;opacity:.6}.mdc-slider .mdc-slider__value-indicator::before{border-top-color:#000}.mdc-slider .mdc-slider__value-indicator{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-slider .mdc-slider__thumb{display:-webkit-box;display:flex;height:48px;left:-24px;outline:0;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-style:solid;border-width:1px;-webkit-box-sizing:content-box;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);border:10px solid;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mdc-slider .mdc-slider__thumb-knob{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider .mdc-slider__thumb::after,.mdc-slider .mdc-slider__thumb::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before,.mdc-slider .mdc-slider__thumb:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before,.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-slider .mdc-slider__tick-marks{-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;height:100%;-webkit-box-pack:justify;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--inactive{border-radius:50%;height:2px;width:2px}.mdc-slider .mdc-slider__tick-mark--active{background-color:#fff;background-color:var(--mdc-theme-on-primary,#fff);opacity:.6}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active{background-color:#fff;background-color:var(--mdc-theme-on-primary,#fff);opacity:.6}.mdc-slider .mdc-slider__tick-mark--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.6}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.6}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{-webkit-transition:-webkit-transform 80ms ease;transition:-webkit-transform 80ms ease;transition:transform 80ms ease;transition:transform 80ms ease,-webkit-transform 80ms ease}@media (prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{-webkit-transition:none;transition:none}}.mdc-slider--disabled{opacity:.38;cursor:auto}.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}:host{display:block}:host([hidden]){display:none}.mdc-slider.mdc-slider--disabled{cursor:not-allowed}.mdc-slider .mdc-slider__value-indicator{background-color:var(--mdc-theme-on-surface)}.mdc-slider .mdc-slider__value-indicator::before{border-top-color:var(--mdc-theme-on-surface)}';
/**
 * The custom element class behind the `<forge-slider>` component.
 *
 * @tag forge-slider
 */
let SliderComponent = class SliderComponent extends BaseComponent {
    constructor() {
        super();
        // State
        this._type = 'continuous';
        this._value = 0;
        this._valueStart = 0;
        this._min = 0;
        this._max = 100;
        this._step = 1;
        this._disabled = false;
        this._mdcSliderUpdateListener = evt => this._onSliderUpdate(evt);
    }
    static get observedAttributes() {
        return [
            SLIDER_CONSTANTS.attributes.TYPE,
            SLIDER_CONSTANTS.attributes.VALUE,
            SLIDER_CONSTANTS.attributes.VALUE_START,
            SLIDER_CONSTANTS.attributes.MAX,
            SLIDER_CONSTANTS.attributes.MIN,
            SLIDER_CONSTANTS.attributes.STEP,
            SLIDER_CONSTANTS.attributes.DISABLED
        ];
    }
    connectedCallback() {
        this._initialize();
    }
    disconnectedCallback() {
        if (this._mdcSlider) {
            this._mdcSlider.destroy();
        }
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case SLIDER_CONSTANTS.attributes.TYPE:
                this.type = newValue;
                break;
            case SLIDER_CONSTANTS.attributes.VALUE:
                this.value = coerceNumber(newValue);
                break;
            case SLIDER_CONSTANTS.attributes.VALUE_START:
                this.valueStart = coerceNumber(newValue);
                break;
            case SLIDER_CONSTANTS.attributes.MIN:
                this.min = coerceNumber(newValue);
                break;
            case SLIDER_CONSTANTS.attributes.MAX:
                this.max = coerceNumber(newValue);
                break;
            case SLIDER_CONSTANTS.attributes.STEP:
                this.step = coerceNumber(newValue);
                break;
            case SLIDER_CONSTANTS.attributes.DISABLED:
                this.disabled = coerceBoolean(newValue);
                break;
        }
    }
    _setTemplate(template) {
        if (this.shadowRoot) {
            replaceShadowTemplate(this, template, styles);
        }
        else {
            attachShadowTemplate(this, template, styles);
        }
    }
    _initializeTemplate() {
        switch (this._type) {
            case 'continuous':
                this._setTemplate(continuousTemplate);
                break;
            case 'continuous-range':
                this._setTemplate(continuousRangeTemplate);
                break;
            case 'discrete':
                this._setTemplate(discreteTemplate);
                break;
            case 'discrete-markers':
                this._setTemplate(discreteMarkersTemplate);
                break;
            case 'discrete-range':
                this._setTemplate(discreteRangeTemplate);
                break;
            case 'discrete-range-markers':
                this._setTemplate(discreteRangeMarkersTemplate);
                break;
            default:
                throw new Error(`Invalid slider type provided: ${this._type}. Must be one of "continuous", "continuous-range", "discrete", "discrete-markers", "discrete-range", "discrete-range-markers".`);
        }
    }
    _initialize() {
        this._initializeTemplate();
        this._rootElement = getShadowElement(this, SLIDER_CONSTANTS.selectors.ROOT);
        this._inputElement = getShadowElement(this, SLIDER_CONSTANTS.selectors.VALUE_INPUT);
        this._inputElementStart = getShadowElement(this, SLIDER_CONSTANTS.selectors.VALUE_INPUT_START);
        // We need to initialize MDCSlider in the next cycle after our template has been placed in the DOM
        window.setTimeout(() => {
            var _a, _b;
            this._initializeMdcSlider();
            (_a = this._rootElement) === null || _a === void 0 ? void 0 : _a.addEventListener(SLIDER_CONSTANTS.events.MDC_INPUT, this._mdcSliderUpdateListener);
            (_b = this._rootElement) === null || _b === void 0 ? void 0 : _b.addEventListener(SLIDER_CONSTANTS.events.MDC_CHANGE, this._mdcSliderUpdateListener);
        });
    }
    _initializeMdcSlider() {
        if (!this._rootElement) {
            return;
        }
        if (this._mdcSlider) {
            this._mdcSlider.destroy();
        }
        this._mdcSlider = new MDCSlider(this._rootElement);
        this._mdcSliderFoundation = this._mdcSlider.foundation;
        this._syncToSlider();
        this._mdcSlider.initialize();
    }
    _onSliderUpdate(evt) {
        evt.stopPropagation();
        this._syncFromSlider();
        const data = this._isRangeSlider ? { valueStart: this._valueStart, valueEnd: this._value } : { value: this._value };
        const type = evt.type === SLIDER_CONSTANTS.events.MDC_CHANGE ? SLIDER_CONSTANTS.events.FORGE_CHANGE : SLIDER_CONSTANTS.events.FORGE_INPUT;
        emitEvent(this, type, data);
    }
    _syncToSlider() {
        this._mdcSlider.setValue(this._value);
        if (this._isRangeSlider) {
            this._mdcSlider.setValueStart(this._valueStart);
        }
        this._applyMin(this._min);
        this._applyMax(this._max);
        this._applyStep(this._step);
        this._mdcSlider.setDisabled(this._disabled);
    }
    _syncFromSlider() {
        this._value = this._mdcSlider.getValue();
        if (this._isRangeSlider) {
            this._valueStart = this._mdcSlider.getValueStart();
        }
        this.setAttribute(SLIDER_CONSTANTS.attributes.VALUE, this._value.toString());
    }
    _applyMin(min) {
        var _a, _b;
        if (this._inputElement) {
            this._inputElement.min = `${min}`;
        }
        if (this._inputElementStart) {
            this._inputElementStart.min = `${min}`;
        }
        (_a = this._mdcSliderFoundation) === null || _a === void 0 ? void 0 : _a.setMin(min);
        (_b = this._mdcSlider) === null || _b === void 0 ? void 0 : _b.layout();
    }
    _applyMax(max) {
        var _a, _b;
        if (this._inputElement) {
            this._inputElement.max = `${max}`;
        }
        if (this._inputElementStart) {
            this._inputElementStart.max = `${max}`;
        }
        (_a = this._mdcSliderFoundation) === null || _a === void 0 ? void 0 : _a.setMax(max);
        (_b = this._mdcSlider) === null || _b === void 0 ? void 0 : _b.layout();
    }
    _applyStep(step) {
        var _a, _b;
        if (this._inputElement) {
            this._inputElement.step = `${step}`;
        }
        if (this._inputElementStart) {
            this._inputElementStart.step = `${step}`;
        }
        (_a = this._mdcSliderFoundation) === null || _a === void 0 ? void 0 : _a.setStep(step);
        (_b = this._mdcSlider) === null || _b === void 0 ? void 0 : _b.layout();
    }
    get _isRangeSlider() {
        return this._type.includes('range');
    }
    /**
     * Gets/sets the type of slider this is: `continuous` (default), `discrete`, `discrete-markers`
     */
    get type() {
        return this._type;
    }
    set type(value) {
        this._type = value;
        if (this.isConnected) {
            this._initialize();
        }
    }
    /**
     * Gets/sets the value of the slider.
     */
    get value() {
        return this._value;
    }
    set value(value) {
        if (this._value !== value) {
            if (isNaN(value) || typeof value !== 'number') {
                value = 0;
            }
            this._value = value;
            if (this._mdcSlider) {
                this._mdcSlider.setValue(value);
            }
            this.setAttribute(SLIDER_CONSTANTS.attributes.VALUE, isDefined(this._value) ? this._value.toString() : '');
        }
    }
    /**
     * Gets/sets the start value of the slider (only applicable for range sliders).
     */
    get valueStart() {
        return this._valueStart;
    }
    set valueStart(value) {
        if (this._valueStart !== value) {
            this._valueStart = value;
            if (this._mdcSlider) {
                this._mdcSlider.setValueStart(value);
            }
            this.setAttribute(SLIDER_CONSTANTS.attributes.VALUE_START, isDefined(this._valueStart) ? this._valueStart.toString() : '');
        }
    }
    /**
     * Gets/sets the minimum value for the slider.
     */
    get min() {
        return this._min;
    }
    set min(value) {
        if (this._min !== value) {
            this._min = value;
            if (this._mdcSlider) {
                this._applyMin(this._min);
            }
            this.setAttribute(SLIDER_CONSTANTS.attributes.MIN, isDefined(this._min) ? this._min.toString() : '');
        }
    }
    /**
     * Gets/sets the maximum value for the slider.
     */
    get max() {
        return this._max;
    }
    set max(value) {
        if (this._max !== value) {
            this._max = value;
            if (this._mdcSlider) {
                this._applyMax(this._max);
            }
            this.setAttribute(SLIDER_CONSTANTS.attributes.MAX, isDefined(this._max) ? this._max.toString() : '');
        }
    }
    /**
     * Gets/sets the step value for the slider when in discrete mode.
     */
    get step() {
        return this._step;
    }
    set step(value) {
        if (this._step !== value) {
            this._step = value;
            if (this._mdcSlider) {
                this._applyStep(this._step);
            }
            this.setAttribute(SLIDER_CONSTANTS.attributes.STEP, isDefined(this._step) ? this._step.toString() : '');
        }
    }
    /**
     * Gets/sets the disabled state of the slider.
     */
    get disabled() {
        return this._disabled;
    }
    set disabled(value) {
        if (this._disabled !== value) {
            this._disabled = value;
            if (this._mdcSlider) {
                this._mdcSlider.setDisabled(value);
            }
            this.setAttribute(SLIDER_CONSTANTS.attributes.DISABLED, isDefined(this._disabled) ? this._disabled.toString() : '');
        }
    }
};
SliderComponent = __decorate([
    CustomElement({
        name: SLIDER_CONSTANTS.elementName
    })
], SliderComponent);
export { SliderComponent };
