iobroker.lovelace/hass_frontend/frontend_es5/chunk.5b6d7787ad82fe6d1745.js

With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI

/*! For license information please see chunk.5b6d7787ad82fe6d1745.js.LICENSE.txt */
(self.webpackChunkhome_assistant_frontend=self.webpackChunkhome_assistant_frontend||[]).push([[486],{83288:function(n,e,r){"use strict";r.d(e,{f:function(){return t}});r(43437);var t={properties:{value:{type:Number,value:0,notify:!0,reflectToAttribute:!0},min:{type:Number,value:0,notify:!0},max:{type:Number,value:100,notify:!0},step:{type:Number,value:1,notify:!0},ratio:{type:Number,value:0,readOnly:!0,notify:!0}},observers:["_update(value, min, max, step)"],_calcRatio:function(n){return(this._clampValue(n)-this.min)/(this.max-this.min)},_clampValue:function(n){return Math.min(this.max,Math.max(this.min,this._calcStep(n)))},_calcStep:function(n){if(n=parseFloat(n),!this.step)return n;var e=Math.round((n-this.min)/this.step);return this.step<1?e/(1/this.step)+this.min:e*this.step+this.min},_validateValue:function(){var n=this._clampValue(this.value);return this.value=this.oldValue=isNaN(n)?this.oldValue:n,this.value!==n},_update:function(){this._validateValue(),this._setRatio(100*this._calcRatio(this.value))}}},49075:function(n,e,r){"use strict";r.d(e,{S:function(){return s},B:function(){return o}});r(43437);var t=r(51644),i=r(26110),a=r(84938),s={observers:["_focusedChanged(receivedFocusFromKeyboard)"],_focusedChanged:function(n){n&&this.ensureRipple(),this.hasRipple()&&(this._ripple.holdDown=n)},_createRipple:function(){var n=a.o._createRipple();return n.id="ink",n.setAttribute("center",""),n.classList.add("circle"),n}},o=[t.P,i.a,a.o,s]},84938:function(n,e,r){"use strict";r.d(e,{o:function(){return a}});r(43437),r(60748);var t=r(51644),i=r(87156),a={properties:{noink:{type:Boolean,observer:"_noinkChanged"},_rippleContainer:{type:Object}},_buttonStateChanged:function(){this.focused&&this.ensureRipple()},_downHandler:function(n){t.$._downHandler.call(this,n),this.pressed&&this.ensureRipple(n)},ensureRipple:function(n){if(!this.hasRipple()){this._ripple=this._createRipple(),this._ripple.noink=this.noink;var e=this._rippleContainer||this.root;if(e&&(0,i.vz)(e).appendChild(this._ripple),n){var r=(0,i.vz)(this._rippleContainer||this),t=(0,i.vz)(n).rootTarget;r.deepContains(t)&&this._ripple.uiDownAction(n)}}},getRipple:function(){return this.ensureRipple(),this._ripple},hasRipple:function(){return Boolean(this._ripple)},_createRipple:function(){return document.createElement("paper-ripple")},_noinkChanged:function(n){this.hasRipple()&&(this._ripple.noink=n)}}},85481:function(n,e,r){"use strict";r(43437),r(65660),r(15495);var t=r(83288),i=r(9672),a=r(50856);function s(){var n=function(n,e){e||(e=n.slice(0));return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}(['\n    <style>\n      :host {\n        display: block;\n        width: 200px;\n        position: relative;\n        overflow: hidden;\n      }\n\n      :host([hidden]), [hidden] {\n        display: none !important;\n      }\n\n      #progressContainer {\n        @apply --paper-progress-container;\n        position: relative;\n      }\n\n      #progressContainer,\n      /* the stripe for the indeterminate animation*/\n      .indeterminate::after {\n        height: var(--paper-progress-height, 4px);\n      }\n\n      #primaryProgress,\n      #secondaryProgress,\n      .indeterminate::after {\n        @apply --layout-fit;\n      }\n\n      #progressContainer,\n      .indeterminate::after {\n        background: var(--paper-progress-container-color, var(--google-grey-300));\n      }\n\n      :host(.transiting) #primaryProgress,\n      :host(.transiting) #secondaryProgress {\n        -webkit-transition-property: -webkit-transform;\n        transition-property: transform;\n\n        /* Duration */\n        -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);\n        transition-duration: var(--paper-progress-transition-duration, 0.08s);\n\n        /* Timing function */\n        -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);\n        transition-timing-function: var(--paper-progress-transition-timing-function, ease);\n\n        /* Delay */\n        -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);\n        transition-delay: var(--paper-progress-transition-delay, 0s);\n      }\n\n      #primaryProgress,\n      #secondaryProgress {\n        @apply --layout-fit;\n        -webkit-transform-origin: left center;\n        transform-origin: left center;\n        -webkit-transform: scaleX(0);\n        transform: scaleX(0);\n        will-change: transform;\n      }\n\n      #primaryProgress {\n        background: var(--paper-progress-active-color, var(--google-green-500));\n      }\n\n      #secondaryProgress {\n        background: var(--paper-progress-secondary-color, var(--google-green-100));\n      }\n\n      :host([disabled]) #primaryProgress {\n        background: var(--paper-progress-disabled-active-color, var(--google-grey-500));\n      }\n\n      :host([disabled]) #secondaryProgress {\n        background: var(--paper-progress-disabled-secondary-color, var(--google-grey-300));\n      }\n\n      :host(:not([disabled])) #primaryProgress.indeterminate {\n        -webkit-transform-origin: right center;\n        transform-origin: right center;\n        -webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;\n        animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;\n      }\n\n      :host(:not([disabled])) #primaryProgress.indeterminate::after {\n        content: "";\n        -webkit-transform-origin: center center;\n        transform-origin: center center;\n\n        -webkit-animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;\n        animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;\n      }\n\n      @-webkit-keyframes indeterminate-bar {\n        0% {\n          -webkit-transform: scaleX(1) translateX(-100%);\n        }\n        50% {\n          -webkit-transform: scaleX(1) translateX(0%);\n        }\n        75% {\n          -webkit-transform: scaleX(1) translateX(0%);\n          -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);\n        }\n        100% {\n          -webkit-transform: scaleX(0) translateX(0%);\n        }\n      }\n\n      @-webkit-keyframes indeterminate-splitter {\n        0% {\n          -webkit-transform: scaleX(.75) translateX(-125%);\n        }\n        30% {\n          -webkit-transform: scaleX(.75) translateX(-125%);\n          -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);\n        }\n        90% {\n          -webkit-transform: scaleX(.75) translateX(125%);\n        }\n        100% {\n          -webkit-transform: scaleX(.75) translateX(125%);\n        }\n      }\n\n      @keyframes indeterminate-bar {\n        0% {\n          transform: scaleX(1) translateX(-100%);\n        }\n        50% {\n          transform: scaleX(1) translateX(0%);\n        }\n        75% {\n          transform: scaleX(1) translateX(0%);\n          animation-timing-function: cubic-bezier(.28,.62,.37,.91);\n        }\n        100% {\n          transform: scaleX(0) translateX(0%);\n        }\n      }\n\n      @keyframes indeterminate-splitter {\n        0% {\n          transform: scaleX(.75) translateX(-125%);\n        }\n        30% {\n          transform: scaleX(.75) translateX(-125%);\n          animation-timing-function: cubic-bezier(.42,0,.6,.8);\n        }\n        90% {\n          transform: scaleX(.75) translateX(125%);\n        }\n        100% {\n          transform: scaleX(.75) translateX(125%);\n        }\n      }\n    </style>\n\n    <div id="progressContainer">\n      <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>\n      <div id="primaryProgress"></div>\n    </div>\n'],['\n    <style>\n      :host {\n        display: block;\n        width: 200px;\n        position: relative;\n        overflow: hidden;\n      }\n\n      :host([hidden]), [hidden] {\n        display: none !important;\n      }\n\n      #progressContainer {\n        @apply --paper-progress-container;\n        position: relative;\n      }\n\n      #progressContainer,\n      /* the stripe for the indeterminate animation*/\n      .indeterminate::after {\n        height: var(--paper-progress-height, 4px);\n      }\n\n      #primaryProgress,\n      #secondaryProgress,\n      .indeterminate::after {\n        @apply --layout-fit;\n      }\n\n      #progressContainer,\n      .indeterminate::after {\n        background: var(--paper-progress-container-color, var(--google-grey-300));\n      }\n\n      :host(.transiting) #primaryProgress,\n      :host(.transiting) #secondaryProgress {\n        -webkit-transition-property: -webkit-transform;\n        transition-property: transform;\n\n        /* Duration */\n        -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);\n        transition-duration: var(--paper-progress-transition-duration, 0.08s);\n\n        /* Timing function */\n        -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);\n        transition-timing-function: var(--paper-progress-transition-timing-function, ease);\n\n        /* Delay */\n        -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);\n        transition-delay: var(--paper-progress-transition-delay, 0s);\n      }\n\n      #primaryProgress,\n      #secondaryProgress {\n        @apply --layout-fit;\n        -webkit-transform-origin: left center;\n        transform-origin: left center;\n        -webkit-transform: scaleX(0);\n        transform: scaleX(0);\n        will-change: transform;\n      }\n\n      #primaryProgress {\n        background: var(--paper-progress-active-color, var(--google-green-500));\n      }\n\n      #secondaryProgress {\n        background: var(--paper-progress-secondary-color, var(--google-green-100));\n      }\n\n      :host([disabled]) #primaryProgress {\n        background: var(--paper-progress-disabled-active-color, var(--google-grey-500));\n      }\n\n      :host([disabled]) #secondaryProgress {\n        background: var(--paper-progress-disabled-secondary-color, var(--google-grey-300));\n      }\n\n      :host(:not([disabled])) #primaryProgress.indeterminate {\n        -webkit-transform-origin: right center;\n        transform-origin: right center;\n        -webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;\n        animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;\n      }\n\n      :host(:not([disabled])) #primaryProgress.indeterminate::after {\n        content: "";\n        -webkit-transform-origin: center center;\n        transform-origin: center center;\n\n        -webkit-animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;\n        animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;\n      }\n\n      @-webkit-keyframes indeterminate-bar {\n        0% {\n          -webkit-transform: scaleX(1) translateX(-100%);\n        }\n        50% {\n          -webkit-transform: scaleX(1) translateX(0%);\n        }\n        75% {\n          -webkit-transform: scaleX(1) translateX(0%);\n          -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);\n        }\n        100% {\n          -webkit-transform: scaleX(0) translateX(0%);\n        }\n      }\n\n      @-webkit-keyframes indeterminate-splitter {\n        0% {\n          -webkit-transform: scaleX(.75) translateX(-125%);\n        }\n        30% {\n          -webkit-transform: scaleX(.75) translateX(-125%);\n          -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);\n        }\n        90% {\n          -webkit-transform: scaleX(.75) translateX(125%);\n        }\n        100% {\n          -webkit-transform: scaleX(.75) translateX(125%);\n        }\n      }\n\n      @keyframes indeterminate-bar {\n        0% {\n          transform: scaleX(1) translateX(-100%);\n        }\n        50% {\n          transform: scaleX(1) translateX(0%);\n        }\n        75% {\n          transform: scaleX(1) translateX(0%);\n          animation-timing-function: cubic-bezier(.28,.62,.37,.91);\n        }\n        100% {\n          transform: scaleX(0) translateX(0%);\n        }\n      }\n\n      @keyframes indeterminate-splitter {\n        0% {\n          transform: scaleX(.75) translateX(-125%);\n        }\n        30% {\n          transform: scaleX(.75) translateX(-125%);\n          animation-timing-function: cubic-bezier(.42,0,.6,.8);\n        }\n        90% {\n          transform: scaleX(.75) translateX(125%);\n        }\n        100% {\n          transform: scaleX(.75) translateX(125%);\n        }\n      }\n    </style>\n\n    <div id="progressContainer">\n      <div id="secondaryProgress" hidden\\$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>\n      <div id="primaryProgress"></div>\n    </div>\n']);return s=function(){return n},n}(0,i.k)({_template:(0,a.d)(s()),is:"paper-progress",behaviors:[t.f],properties:{secondaryProgress:{type:Number,value:0},secondaryRatio:{type:Number,value:0,readOnly:!0},indeterminate:{type:Boolean,value:!1,observer:"_toggleIndeterminate"},disabled:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_disabledChanged"}},observers:["_progressChanged(secondaryProgress, value, min, max, indeterminate)"],hostAttributes:{role:"progressbar"},_toggleIndeterminate:function(n){this.toggleClass("indeterminate",n,this.$.primaryProgress)},_transformProgress:function(n,e){var r="scaleX("+e/100+")";n.style.transform=n.style.webkitTransform=r},_mainRatioChanged:function(n){this._transformProgress(this.$.primaryProgress,n)},_progressChanged:function(n,e,r,t,i){n=this._clampValue(n),e=this._clampValue(e);var a=100*this._calcRatio(n),s=100*this._calcRatio(e);this._setSecondaryRatio(a),this._transformProgress(this.$.secondaryProgress,a),this._transformProgress(this.$.primaryProgress,s),this.secondaryProgress=n,i?this.removeAttribute("aria-valuenow"):this.setAttribute("aria-valuenow",e),this.setAttribute("aria-valuemin",r),this.setAttribute("aria-valuemax",t)},_disabledChanged:function(n){this.setAttribute("aria-disabled",n?"true":"false")},_hideSecondaryProgress:function(n){return 0===n}})},30486:function(n,e,r){"use strict";r(65660),r(30879),r(85481),r(15495);var t=r(8621),i=r(21006),a=r(83288),s=r(49075),o=r(9672),l=r(81668);function p(){var n=function(n,e){e||(e=n.slice(0));return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}(['\n  <style>\n    :host {\n      @apply --layout;\n      @apply --layout-justified;\n      @apply --layout-center;\n      width: 200px;\n      cursor: default;\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n      --paper-progress-active-color: var(--paper-slider-active-color, var(--google-blue-700));\n      --paper-progress-secondary-color: var(--paper-slider-secondary-color, var(--google-blue-300));\n      --paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, var(--paper-grey-400));\n      --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, var(--paper-grey-400));\n      --calculated-paper-slider-height: var(--paper-slider-height, 2px);\n    }\n\n    /* focus shows the ripple */\n    :host(:focus) {\n      outline: none;\n    }\n\n    /**\n      * NOTE(keanulee): Though :host-context is not universally supported, some pages\n      * still rely on paper-slider being flipped when dir="rtl" is set on body. For full\n      * compatibility, dir="rtl" must be explicitly set on paper-slider.\n      */\n    :dir(rtl) #sliderContainer {\n      -webkit-transform: scaleX(-1);\n      transform: scaleX(-1);\n    }\n\n    /**\n      * NOTE(keanulee): This is separate from the rule above because :host-context may\n      * not be recognized.\n      */\n    :host([dir="rtl"]) #sliderContainer {\n      -webkit-transform: scaleX(-1);\n      transform: scaleX(-1);\n    }\n\n    /**\n      * NOTE(keanulee): Needed to override the :host-context rule (where supported)\n      * to support LTR sliders in RTL pages.\n      */\n    :host([dir="ltr"]) #sliderContainer {\n      -webkit-transform: scaleX(1);\n      transform: scaleX(1);\n    }\n\n    #sliderContainer {\n      position: relative;\n      width: 100%;\n      height: calc(30px + var(--calculated-paper-slider-height));\n      margin-left: calc(15px + var(--calculated-paper-slider-height)/2);\n      margin-right: calc(15px + var(--calculated-paper-slider-height)/2);\n    }\n\n    #sliderContainer:focus {\n      outline: 0;\n    }\n\n    #sliderContainer.editable {\n      margin-top: 12px;\n      margin-bottom: 12px;\n    }\n\n    .bar-container {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      overflow: hidden;\n    }\n\n    .ring > .bar-container {\n      left: calc(5px + var(--calculated-paper-slider-height)/2);\n      transition: left 0.18s ease;\n    }\n\n    .ring.expand.dragging > .bar-container {\n      transition: none;\n    }\n\n    .ring.expand:not(.pin) > .bar-container {\n      left: calc(8px + var(--calculated-paper-slider-height)/2);\n    }\n\n    #sliderBar {\n      padding: 15px 0;\n      width: 100%;\n      background-color: var(--paper-slider-bar-color, transparent);\n      --paper-progress-container-color: var(--paper-slider-container-color, var(--paper-grey-400));\n      --paper-progress-height: var(--calculated-paper-slider-height);\n    }\n\n    .slider-markers {\n      position: absolute;\n      /* slider-knob is 30px + the slider-height so that the markers should start at a offset of 15px*/\n      top: 15px;\n      height: var(--calculated-paper-slider-height);\n      left: 0;\n      right: -1px;\n      box-sizing: border-box;\n      pointer-events: none;\n      @apply --layout-horizontal;\n    }\n\n    .slider-marker {\n      @apply --layout-flex;\n    }\n    .slider-markers::after,\n    .slider-marker::after {\n      content: "";\n      display: block;\n      margin-left: -1px;\n      width: 2px;\n      height: var(--calculated-paper-slider-height);\n      border-radius: 50%;\n      background-color: var(--paper-slider-markers-color, #000);\n    }\n\n    .slider-knob {\n      position: absolute;\n      left: 0;\n      top: 0;\n      margin-left: calc(-15px - var(--calculated-paper-slider-height)/2);\n      width: calc(30px + var(--calculated-paper-slider-height));\n      height: calc(30px + var(--calculated-paper-slider-height));\n    }\n\n    .transiting > .slider-knob {\n      transition: left 0.08s ease;\n    }\n\n    .slider-knob:focus {\n      outline: none;\n    }\n\n    .slider-knob.dragging {\n      transition: none;\n    }\n\n    .snaps > .slider-knob.dragging {\n      transition: -webkit-transform 0.08s ease;\n      transition: transform 0.08s ease;\n    }\n\n    .slider-knob-inner {\n      margin: 10px;\n      width: calc(100% - 20px);\n      height: calc(100% - 20px);\n      background-color: var(--paper-slider-knob-color, var(--google-blue-700));\n      border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700));\n      border-radius: 50%;\n\n      -moz-box-sizing: border-box;\n      box-sizing: border-box;\n\n      transition-property: -webkit-transform, background-color, border;\n      transition-property: transform, background-color, border;\n      transition-duration: 0.18s;\n      transition-timing-function: ease;\n    }\n\n    .expand:not(.pin) > .slider-knob > .slider-knob-inner {\n      -webkit-transform: scale(1.5);\n      transform: scale(1.5);\n    }\n\n    .ring > .slider-knob > .slider-knob-inner {\n      background-color: var(--paper-slider-knob-start-color, transparent);\n      border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));\n    }\n\n    .slider-knob-inner::before {\n      background-color: var(--paper-slider-pin-color, var(--google-blue-700));\n    }\n\n    .pin > .slider-knob > .slider-knob-inner::before {\n      content: "";\n      position: absolute;\n      top: 0;\n      left: 50%;\n      margin-left: -13px;\n      width: 26px;\n      height: 26px;\n      border-radius: 50% 50% 50% 0;\n\n      -webkit-transform: rotate(-45deg) scale(0) translate(0);\n      transform: rotate(-45deg) scale(0) translate(0);\n    }\n\n    .slider-knob-inner::before,\n    .slider-knob-inner::after {\n      transition: -webkit-transform .18s ease, background-color .18s ease;\n      transition: transform .18s ease, background-color .18s ease;\n    }\n\n    .pin.ring > .slider-knob > .slider-knob-inner::before {\n      background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400));\n    }\n\n    .pin.expand > .slider-knob > .slider-knob-inner::before {\n      -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);\n      transform: rotate(-45deg) scale(1) translate(17px, -17px);\n    }\n\n    .pin > .slider-knob > .slider-knob-inner::after {\n      content: attr(value);\n      position: absolute;\n      top: 0;\n      left: 50%;\n      margin-left: -16px;\n      width: 32px;\n      height: 26px;\n      text-align: center;\n      color: var(--paper-slider-font-color, #fff);\n      font-size: 10px;\n\n      -webkit-transform: scale(0) translate(0);\n      transform: scale(0) translate(0);\n    }\n\n    .pin.expand > .slider-knob > .slider-knob-inner::after {\n      -webkit-transform: scale(1) translate(0, -17px);\n      transform: scale(1) translate(0, -17px);\n    }\n\n    /* paper-input */\n    .slider-input {\n      width: 50px;\n      overflow: hidden;\n      --paper-input-container-input: {\n        text-align: center;\n        @apply --paper-slider-input-container-input;\n      };\n      @apply --paper-slider-input;\n    }\n\n    /* disabled state */\n    #sliderContainer.disabled {\n      pointer-events: none;\n    }\n\n    .disabled > .slider-knob > .slider-knob-inner {\n      background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));\n      border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));\n      -webkit-transform: scale3d(0.75, 0.75, 1);\n      transform: scale3d(0.75, 0.75, 1);\n    }\n\n    .disabled.ring > .slider-knob > .slider-knob-inner {\n      background-color: var(--paper-slider-knob-start-color, transparent);\n      border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));\n    }\n\n    paper-ripple {\n      color: var(--paper-slider-knob-color, var(--google-blue-700));\n    }\n  </style>\n\n  <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">\n    <div class="bar-container">\n      <paper-progress disabled$="[[disabled]]" id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_bartrack" on-tap="_barclick">\n      </paper-progress>\n    </div>\n\n    <template is="dom-if" if="[[snaps]]">\n      <div class="slider-markers">\n        <template is="dom-repeat" items="[[markers]]">\n          <div class="slider-marker"></div>\n        </template>\n      </div>\n    </template>\n\n    <div id="sliderKnob" class="slider-knob" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">\n        <div class="slider-knob-inner" value$="[[immediateValue]]"></div>\n    </div>\n  </div>\n\n  <template is="dom-if" if="[[editable]]">\n    <paper-input id="input" type="number" step="[[step]]" min="[[min]]" max="[[max]]" class="slider-input" disabled$="[[disabled]]" value="[[immediateValue]]" on-change="_changeValue" on-keydown="_inputKeyDown" no-label-float>\n    </paper-input>\n  </template>\n'],['\n  <style>\n    :host {\n      @apply --layout;\n      @apply --layout-justified;\n      @apply --layout-center;\n      width: 200px;\n      cursor: default;\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n      --paper-progress-active-color: var(--paper-slider-active-color, var(--google-blue-700));\n      --paper-progress-secondary-color: var(--paper-slider-secondary-color, var(--google-blue-300));\n      --paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, var(--paper-grey-400));\n      --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, var(--paper-grey-400));\n      --calculated-paper-slider-height: var(--paper-slider-height, 2px);\n    }\n\n    /* focus shows the ripple */\n    :host(:focus) {\n      outline: none;\n    }\n\n    /**\n      * NOTE(keanulee): Though :host-context is not universally supported, some pages\n      * still rely on paper-slider being flipped when dir="rtl" is set on body. For full\n      * compatibility, dir="rtl" must be explicitly set on paper-slider.\n      */\n    :dir(rtl) #sliderContainer {\n      -webkit-transform: scaleX(-1);\n      transform: scaleX(-1);\n    }\n\n    /**\n      * NOTE(keanulee): This is separate from the rule above because :host-context may\n      * not be recognized.\n      */\n    :host([dir="rtl"]) #sliderContainer {\n      -webkit-transform: scaleX(-1);\n      transform: scaleX(-1);\n    }\n\n    /**\n      * NOTE(keanulee): Needed to override the :host-context rule (where supported)\n      * to support LTR sliders in RTL pages.\n      */\n    :host([dir="ltr"]) #sliderContainer {\n      -webkit-transform: scaleX(1);\n      transform: scaleX(1);\n    }\n\n    #sliderContainer {\n      position: relative;\n      width: 100%;\n      height: calc(30px + var(--calculated-paper-slider-height));\n      margin-left: calc(15px + var(--calculated-paper-slider-height)/2);\n      margin-right: calc(15px + var(--calculated-paper-slider-height)/2);\n    }\n\n    #sliderContainer:focus {\n      outline: 0;\n    }\n\n    #sliderContainer.editable {\n      margin-top: 12px;\n      margin-bottom: 12px;\n    }\n\n    .bar-container {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      overflow: hidden;\n    }\n\n    .ring > .bar-container {\n      left: calc(5px + var(--calculated-paper-slider-height)/2);\n      transition: left 0.18s ease;\n    }\n\n    .ring.expand.dragging > .bar-container {\n      transition: none;\n    }\n\n    .ring.expand:not(.pin) > .bar-container {\n      left: calc(8px + var(--calculated-paper-slider-height)/2);\n    }\n\n    #sliderBar {\n      padding: 15px 0;\n      width: 100%;\n      background-color: var(--paper-slider-bar-color, transparent);\n      --paper-progress-container-color: var(--paper-slider-container-color, var(--paper-grey-400));\n      --paper-progress-height: var(--calculated-paper-slider-height);\n    }\n\n    .slider-markers {\n      position: absolute;\n      /* slider-knob is 30px + the slider-height so that the markers should start at a offset of 15px*/\n      top: 15px;\n      height: var(--calculated-paper-slider-height);\n      left: 0;\n      right: -1px;\n      box-sizing: border-box;\n      pointer-events: none;\n      @apply --layout-horizontal;\n    }\n\n    .slider-marker {\n      @apply --layout-flex;\n    }\n    .slider-markers::after,\n    .slider-marker::after {\n      content: "";\n      display: block;\n      margin-left: -1px;\n      width: 2px;\n      height: var(--calculated-paper-slider-height);\n      border-radius: 50%;\n      background-color: var(--paper-slider-markers-color, #000);\n    }\n\n    .slider-knob {\n      position: absolute;\n      left: 0;\n      top: 0;\n      margin-left: calc(-15px - var(--calculated-paper-slider-height)/2);\n      width: calc(30px + var(--calculated-paper-slider-height));\n      height: calc(30px + var(--calculated-paper-slider-height));\n    }\n\n    .transiting > .slider-knob {\n      transition: left 0.08s ease;\n    }\n\n    .slider-knob:focus {\n      outline: none;\n    }\n\n    .slider-knob.dragging {\n      transition: none;\n    }\n\n    .snaps > .slider-knob.dragging {\n      transition: -webkit-transform 0.08s ease;\n      transition: transform 0.08s ease;\n    }\n\n    .slider-knob-inner {\n      margin: 10px;\n      width: calc(100% - 20px);\n      height: calc(100% - 20px);\n      background-color: var(--paper-slider-knob-color, var(--google-blue-700));\n      border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700));\n      border-radius: 50%;\n\n      -moz-box-sizing: border-box;\n      box-sizing: border-box;\n\n      transition-property: -webkit-transform, background-color, border;\n      transition-property: transform, background-color, border;\n      transition-duration: 0.18s;\n      transition-timing-function: ease;\n    }\n\n    .expand:not(.pin) > .slider-knob > .slider-knob-inner {\n      -webkit-transform: scale(1.5);\n      transform: scale(1.5);\n    }\n\n    .ring > .slider-knob > .slider-knob-inner {\n      background-color: var(--paper-slider-knob-start-color, transparent);\n      border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));\n    }\n\n    .slider-knob-inner::before {\n      background-color: var(--paper-slider-pin-color, var(--google-blue-700));\n    }\n\n    .pin > .slider-knob > .slider-knob-inner::before {\n      content: "";\n      position: absolute;\n      top: 0;\n      left: 50%;\n      margin-left: -13px;\n      width: 26px;\n      height: 26px;\n      border-radius: 50% 50% 50% 0;\n\n      -webkit-transform: rotate(-45deg) scale(0) translate(0);\n      transform: rotate(-45deg) scale(0) translate(0);\n    }\n\n    .slider-knob-inner::before,\n    .slider-knob-inner::after {\n      transition: -webkit-transform .18s ease, background-color .18s ease;\n      transition: transform .18s ease, background-color .18s ease;\n    }\n\n    .pin.ring > .slider-knob > .slider-knob-inner::before {\n      background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400));\n    }\n\n    .pin.expand > .slider-knob > .slider-knob-inner::before {\n      -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);\n      transform: rotate(-45deg) scale(1) translate(17px, -17px);\n    }\n\n    .pin > .slider-knob > .slider-knob-inner::after {\n      content: attr(value);\n      position: absolute;\n      top: 0;\n      left: 50%;\n      margin-left: -16px;\n      width: 32px;\n      height: 26px;\n      text-align: center;\n      color: var(--paper-slider-font-color, #fff);\n      font-size: 10px;\n\n      -webkit-transform: scale(0) translate(0);\n      transform: scale(0) translate(0);\n    }\n\n    .pin.expand > .slider-knob > .slider-knob-inner::after {\n      -webkit-transform: scale(1) translate(0, -17px);\n      transform: scale(1) translate(0, -17px);\n    }\n\n    /* paper-input */\n    .slider-input {\n      width: 50px;\n      overflow: hidden;\n      --paper-input-container-input: {\n        text-align: center;\n        @apply --paper-slider-input-container-input;\n      };\n      @apply --paper-slider-input;\n    }\n\n    /* disabled state */\n    #sliderContainer.disabled {\n      pointer-events: none;\n    }\n\n    .disabled > .slider-knob > .slider-knob-inner {\n      background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));\n      border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));\n      -webkit-transform: scale3d(0.75, 0.75, 1);\n      transform: scale3d(0.75, 0.75, 1);\n    }\n\n    .disabled.ring > .slider-knob > .slider-knob-inner {\n      background-color: var(--paper-slider-knob-start-color, transparent);\n      border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));\n    }\n\n    paper-ripple {\n      color: var(--paper-slider-knob-color, var(--google-blue-700));\n    }\n  </style>\n\n  <div id="sliderContainer" class\\$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">\n    <div class="bar-container">\n      <paper-progress disabled\\$="[[disabled]]" id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_bartrack" on-tap="_barclick">\n      </paper-progress>\n    </div>\n\n    <template is="dom-if" if="[[snaps]]">\n      <div class="slider-markers">\n        <template is="dom-repeat" items="[[markers]]">\n          <div class="slider-marker"></div>\n        </template>\n      </div>\n    </template>\n\n    <div id="sliderKnob" class="slider-knob" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">\n        <div class="slider-knob-inner" value\\$="[[immediateValue]]"></div>\n    </div>\n  </div>\n\n  <template is="dom-if" if="[[editable]]">\n    <paper-input id="input" type="number" step="[[step]]" min="[[min]]" max="[[max]]" class="slider-input" disabled\\$="[[disabled]]" value="[[immediateValue]]" on-change="_changeValue" on-keydown="_inputKeyDown" no-label-float>\n    </paper-input>\n  </template>\n']);return p=function(){return n},n}var d=(0,r(43437).dy)(p());d.setAttribute("strip-whitespace",""),(0,o.k)({_template:d,is:"paper-slider",behaviors:[t.G,i.V,s.B,a.f],properties:{value:{type:Number,value:0},snaps:{type:Boolean,value:!1,notify:!0},pin:{type:Boolean,value:!1,notify:!0},secondaryProgress:{type:Number,value:0,notify:!0,observer:"_secondaryProgressChanged"},editable:{type:Boolean,value:!1},immediateValue:{type:Number,value:0,readOnly:!0,notify:!0},maxMarkers:{type:Number,value:0,notify:!0},expand:{type:Boolean,value:!1,readOnly:!0},ignoreBarTouch:{type:Boolean,value:!1},dragging:{type:Boolean,value:!1,readOnly:!0,notify:!0},transiting:{type:Boolean,value:!1,readOnly:!0},markers:{type:Array,readOnly:!0,value:function(){return[]}}},observers:["_updateKnob(value, min, max, snaps, step)","_valueChanged(value)","_immediateValueChanged(immediateValue)","_updateMarkers(maxMarkers, min, max, snaps)"],hostAttributes:{role:"slider",tabindex:0},keyBindings:{left:"_leftKey",right:"_rightKey","down pagedown home":"_decrementKey","up pageup end":"_incrementKey"},ready:function(){this.ignoreBarTouch&&(0,l.BP)(this.$.sliderBar,"auto")},increment:function(){this.value=this._clampValue(this.value+this.step)},decrement:function(){this.value=this._clampValue(this.value-this.step)},_updateKnob:function(n,e,r,t,i){this.setAttribute("aria-valuemin",e),this.setAttribute("aria-valuemax",r),this.setAttribute("aria-valuenow",n),this._positionKnob(100*this._calcRatio(n))},_valueChanged:function(){this.fire("value-change",{composed:!0})},_immediateValueChanged:function(){this.dragging?this.fire("immediate-value-change",{composed:!0}):this.value=this.immediateValue},_secondaryProgressChanged:function(){this.secondaryProgress=this._clampValue(this.secondaryProgress)},_expandKnob:function(){this._setExpand(!0)},_resetKnob:function(){this.cancelDebouncer("expandKnob"),this._setExpand(!1)},_positionKnob:function(n){this._setImmediateValue(this._calcStep(this._calcKnobPosition(n))),this._setRatio(100*this._calcRatio(this.immediateValue)),this.$.sliderKnob.style.left=this.ratio+"%",this.dragging&&(this._knobstartx=this.ratio*this._w/100,this.translate3d(0,0,0,this.$.sliderKnob))},_calcKnobPosition:function(n){return(this.max-this.min)*n/100+this.min},_onTrack:function(n){switch(n.stopPropagation(),n.detail.state){case"start":this._trackStart(n);break;case"track":this._trackX(n);break;case"end":this._trackEnd()}},_trackStart:function(n){this._setTransiting(!1),this._w=this.$.sliderBar.offsetWidth,this._x=this.ratio*this._w/100,this._startx=this._x,this._knobstartx=this._startx,this._minx=-this._startx,this._maxx=this._w-this._startx,this.$.sliderKnob.classList.add("dragging"),this._setDragging(!0)},_trackX:function(n){this.dragging||this._trackStart(n);var e=this._isRTL?-1:1,r=Math.min(this._maxx,Math.max(this._minx,n.detail.dx*e));this._x=this._startx+r;var t=this._calcStep(this._calcKnobPosition(this._x/this._w*100));this._setImmediateValue(t);var i=this._calcRatio(this.immediateValue)*this._w-this._knobstartx;this.translate3d(i+"px",0,0,this.$.sliderKnob)},_trackEnd:function(){var n=this.$.sliderKnob.style;this.$.sliderKnob.classList.remove("dragging"),this._setDragging(!1),this._resetKnob(),this.value=this.immediateValue,n.transform=n.webkitTransform="",this.fire("change",{composed:!0})},_knobdown:function(n){this._expandKnob(),n.preventDefault(),this.focus()},_bartrack:function(n){this._allowBarEvent(n)&&this._onTrack(n)},_barclick:function(n){this._w=this.$.sliderBar.offsetWidth;var e=this.$.sliderBar.getBoundingClientRect(),r=(n.detail.x-e.left)/this._w*100;this._isRTL&&(r=100-r);var t=this.ratio;this._setTransiting(!0),this._positionKnob(r),t===this.ratio&&this._setTransiting(!1),this.async((function(){this.fire("change",{composed:!0})})),n.preventDefault(),this.focus()},_bardown:function(n){this._allowBarEvent(n)&&(this.debounce("expandKnob",this._expandKnob,60),this._barclick(n))},_knobTransitionEnd:function(n){n.target===this.$.sliderKnob&&this._setTransiting(!1)},_updateMarkers:function(n,e,r,t){t||this._setMarkers([]);var i=Math.round((r-e)/this.step);i>n&&(i=n),(i<0||!isFinite(i))&&(i=0),this._setMarkers(new Array(i))},_mergeClasses:function(n){return Object.keys(n).filter((function(e){return n[e]})).join(" ")},_getClassNames:function(){return this._mergeClasses({disabled:this.disabled,pin:this.pin,snaps:this.snaps,ring:this.immediateValue<=this.min,expand:this.expand,dragging:this.dragging,transiting:this.transiting,editable:this.editable})},_allowBarEvent:function(n){return!this.ignoreBarTouch||n.detail.sourceEvent instanceof MouseEvent},get _isRTL(){return void 0===this.__isRTL&&(this.__isRTL="rtl"===window.getComputedStyle(this).direction),this.__isRTL},_leftKey:function(n){this._isRTL?this._incrementKey(n):this._decrementKey(n)},_rightKey:function(n){this._isRTL?this._decrementKey(n):this._incrementKey(n)},_incrementKey:function(n){this.disabled||("end"===n.detail.key?this.value=this.max:this.increment(),this.fire("change"),n.preventDefault())},_decrementKey:function(n){this.disabled||("home"===n.detail.key?this.value=this.min:this.decrement(),this.fire("change"),n.preventDefault())},_changeValue:function(n){this.value=n.target.value,this.fire("change",{composed:!0})},_inputKeyDown:function(n){n.stopPropagation()},_createRipple:function(){return this._rippleContainer=this.$.sliderKnob,s.S._createRipple.call(this)},_focusedChanged:function(n){n&&this.ensureRipple(),this.hasRipple()&&(this._ripple.style.display=n?"":"none",this._ripple.holdDown=n)}})}}]);
//# sourceMappingURL=chunk.5b6d7787ad82fe6d1745.js.map