{"version":3,"sources":["components/slider/slider-input.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAIxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AAGnD,OAAO,EAAE,yBAAyB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIrC;;;;GAIG;AACH,cACM,aAAc,SAAQ,kBAAsB;IAChD;;OAEG;IACH,OAAO,CAAC,IAAI,CAAS;IAErB;;OAEG;IACH,OAAO,CAAC,IAAI,CAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,KAAK,CAAO;IAEpB;;OAEG;IACH,OAAO,CAAC,aAAa;IAYrB;;OAEG;IACH,OAAO,CAAC,YAAY;IAapB;;OAEG;IAEH,WAAW,4BAAqC;IAEhD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IACH,IACI,GAAG,WAEN;IAED,IAAI,GAAG,CAAC,KAAK,QAAA,EAIZ;IAED;;OAEG;IACH,IACI,GAAG,WAEN;IAED,IAAI,GAAG,CAAC,KAAK,QAAA,EAIZ;IAED;;OAEG;IACH,IACI,IAAI,WAEP;IAED,IAAI,IAAI,CAAC,KAAK,QAAA,EAIb;IAED;;OAEG;IAEH,IAAI,SAAY;IAEhB;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,gBAAgB;IAOhB,MAAM;IAyBN;;OAEG;IACH,MAAM,KAAK,cAAc,WAExB;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"slider-input.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2021\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit-html/directives/class-map';\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport ifNonNull from '../../globals/directives/if-non-null';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SLIDER_INPUT_COLOR_SCHEME } from './defs';\nimport styles from './slider.scss';\n\nexport { SLIDER_INPUT_COLOR_SCHEME };\n\nconst { prefix } = settings;\n\n/**\n * The `<input>` box for slider.\n * @element bx-slider-input\n * @fires bx-slider-input-changed - The custom event fired after the value is changed by user gesture.\n */\n@customElement(`${prefix}-slider-input`)\nclass BXSliderInput extends FocusMixin(LitElement) {\n  /**\n   * The internal value of `max` property.\n   */\n  private _max = '100';\n\n  /**\n   * The internal value of `min` property.\n   */\n  private _min = '0';\n\n  /**\n   * The internal value of `step` property.\n   */\n  private _step = '1';\n\n  /**\n   * Handles `change` event to fire a normalized custom event.\n   */\n  private _handleChange({ target }: Event) {\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXSliderInput).eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value: Number((target as HTMLInputElement).value),\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles `input` event to fire a normalized custom event.\n   */\n  private _handleInput({ target }: Event) {\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXSliderInput).eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value: Number((target as HTMLInputElement).value),\n          intermediate: true,\n        },\n      })\n    );\n  }\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = SLIDER_INPUT_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` if the check box should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The maximum value.\n   */\n  @property({ type: Number, reflect: true })\n  get max() {\n    return this._max.toString();\n  }\n\n  set max(value) {\n    const { max: oldMax } = this;\n    this._max = value;\n    this.requestUpdate('max', oldMax);\n  }\n\n  /**\n   * The minimum value.\n   */\n  @property({ type: Number, reflect: true })\n  get min() {\n    return this._min.toString();\n  }\n\n  set min(value) {\n    const { min: oldMin } = this;\n    this._min = value;\n    this.requestUpdate('min', oldMin);\n  }\n\n  /**\n   * The snapping step of the value.\n   */\n  @property({ type: Number, reflect: true })\n  get step() {\n    return this._step.toString();\n  }\n\n  set step(value) {\n    const { step: oldStep } = this;\n    this._step = value;\n    this.requestUpdate('step', oldStep);\n  }\n\n  /**\n   * The type of the `<input>`.\n   */\n  @property()\n  type = 'number';\n\n  /**\n   * The value.\n   */\n  @property({ type: Number })\n  value!: number;\n\n  createRenderRoot() {\n    return this.attachShadow({\n      mode: 'open',\n      delegatesFocus: Number((/Safari\\/(\\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <= 537,\n    });\n  }\n\n  render() {\n    const { colorScheme, disabled, max, min, step, type, value, _handleChange: handleChange, _handleInput: handleInput } = this;\n    // NOTE: Our React variant has an option to add `invalid` option here,\n    // but there doesn't seem a corresponding style to the thumb.\n    // Because of that, in addition to the mininum/maximum constraint enforced,\n    // the code here start without `invalid` styling option for now.\n    const classes = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--slider-text-input`]: true,\n      [`${prefix}--text-input--${colorScheme}`]: colorScheme,\n    });\n    return html`\n      <input\n        ?disabled=\"${disabled}\"\n        type=\"${ifNonNull(type)}\"\n        class=\"${classes}\"\n        max=\"${max}\"\n        min=\"${min}\"\n        step=\"${step}\"\n        .value=\"${value}\"\n        @change=\"${handleChange}\"\n        @input=\"${handleInput}\" />\n    `;\n  }\n\n  /**\n   * A selector that will return the parent slider.\n   */\n  static get selectorParent() {\n    return `${prefix}-slider`;\n  }\n\n  /**\n   * The name of the custom event fired after the value is changed by user gesture.\n   */\n  static get eventChange() {\n    return `${prefix}-slider-input-changed`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXSliderInput;\n"]}