UNPKG

@duetds/components

Version:

This package includes Duet Core Components and related tools.

1 lines 8.61 kB
var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function u(e){try{s(r.next(e))}catch(t){a(t)}}function o(e){try{s(r["throw"](e))}catch(t){a(t)}}function s(e){e.done?n(e.value):i(e.value).then(u,o)}s((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,i,a,u;return u={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function o(e){return function(t){return s([e,t])}}function s(u){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,i&&(a=u[0]&2?i["return"]:u[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,u[1])).done)return a;if(i=0,a)u=[u[0]&2,a.value];switch(u[0]){case 0:case 1:a=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;i=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!a||u[1]>a[0]&&u[1]<a[3])){n.label=u[1];break}if(u[0]===6&&n.label<a[1]){n.label=a[1];a=u;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(u);break}if(a[2])n.ops.pop();n.trys.pop();continue}u=t.call(e,n)}catch(o){u=[6,o];i=0}finally{r=a=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./p-2c514bc6.system.js","./p-e008225b.system.js","./p-6df50530.system.js"],(function(e){"use strict";var t,n,r,i,a,u,o,s;return{setters:[function(e){t=e.r;n=e.d;r=e.h;i=e.H;a=e.c},function(e){u=e.a;o=e.c},function(e){s=e.t}],execute:function(){var c=e("duet_range_slider",function(){function e(e){var r=this;t(this,e);this.rangeId=u("DuetRange");this.ua=navigator.userAgent||navigator.vendor;this.percentage=0;this.theme="";this.margin="auto";this.expand=false;this.min=0;this.label="label";this.unit="";this.max=100;this.step=1;this.value=0;this.debounce=0;this.onInput=function(e){var t=e.target;if(t){r.value=parseInt(t.value)||0}r.duetInput.emit(e);r.calculatePercentage()};this.duetChange=n(this,"duetChange",3);this.duetInput=n(this,"duetInput",7)}e.prototype.debounceChanged=function(){this.duetChange=o(this.duetChange,this.debounce)};e.prototype.valueChanged=function(){this.duetChange.emit({value:this.value,component:"duet-range-slider"})};e.prototype.componentWillLoad=function(){if(this.theme!=="default"&&document.documentElement.classList.contains("duet-theme-turva")){this.theme="turva"}this.calculatePercentage()};e.prototype.componentDidLoad=function(){this.debounceChanged()};e.prototype.calculatePercentage=function(){this.percentage=Math.ceil((this.value-this.min)/(this.max-this.min)*100)};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){e=this.element.querySelector("input");if(e){e.focus()}return[2]}))}))};e.prototype.render=function(){var e=this.identifier||this.rangeId;if(this.expand){this.element.classList.add("duet-expand")}var t=this.theme==="turva"?s["colorGrayTurva"]:s["colorGray"];var n=this.theme==="turva"?s["colorPrimaryTurva"]:s["colorPrimary"];var a={background:"-webkit-linear-gradient(left, "+n+" 0%, "+n+" "+this.percentage+"%,"+t+" "+this.percentage+"%)"};return r(i,{class:{"duet-m-0":this.margin==="none"}},r("div",{class:{"duet-range-container":true,"duet-theme-turva":this.theme==="turva","duet-ie":document["documentMode"]||/Edge/.test(this.ua)}},r("duet-label",{theme:this.theme==="turva"?"turva":"default",margin:"small",for:e},this.label),r("output",{htmlFor:e,class:"duet-output"},this.value,this.unit),r("input",{onInput:this.onInput,type:"range",min:this.min,max:this.max,step:this.step,value:this.value,style:a,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.value,id:e,name:"range",class:"duet-range"})))};Object.defineProperty(e.prototype,"element",{get:function(){return a(this)},enumerable:true,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{debounce:["debounceChanged"],value:["valueChanged"]}},enumerable:true,configurable:true});Object.defineProperty(e,"style",{get:function(){return".sc-duet-range-slider-h{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-right:16px!important;margin-bottom:20px!important;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom;text-align:left;max-width:100%;width:100%}.sc-duet-range-slider-h:last-child, .sc-duet-range-slider-h:last-of-type{margin-right:0!important}\@media only screen and (min-width:36em){.sc-duet-range-slider-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-range-slider-h{width:100%!important}}.duet-m-0.sc-duet-range-slider-h{margin:0!important}.duet-range-container.sc-duet-range-slider{background:transparent;position:relative;width:100%}.duet-output.sc-duet-range-slider, .duet-range-container.sc-duet-range-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;padding:0;margin:0}.duet-output.sc-duet-range-slider{background:transparent;position:absolute;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;background:#fff;color:#00294d;font-weight:400;line-height:1.25;font-size:.875rem;z-index:200;top:12px;right:0}.duet-theme-turva.sc-duet-range-slider .duet-output.sc-duet-range-slider{color:#111;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.duet-range.sc-duet-range-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;background:#cfd2d4;position:relative;z-index:100;border-radius:4px;height:4px;width:100%}.duet-ie.sc-duet-range-slider .duet-range.sc-duet-range-slider{height:26px;background:transparent!important;width:auto;display:block}.duet-range.sc-duet-range-slider::-moz-range-track{-moz-appearance:none;border:0;height:1px;background:transparent}.duet-range.sc-duet-range-slider::-ms-track{background:transparent;color:transparent;border:0}.duet-range.sc-duet-range-slider:active, .duet-range.sc-duet-range-slider:focus{outline:none}.user-is-tabbing.sc-duet-range-slider-h .duet-range.sc-duet-range-slider:focus{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-range.sc-duet-range-slider::-webkit-slider-runnable-track{background:transparent}.duet-range.sc-duet-range-slider::-webkit-slider-thumb{-webkit-transition:-webkit-box-shadow .3s ease;transition:-webkit-box-shadow .3s ease;transition:box-shadow .3s ease;transition:box-shadow .3s ease,-webkit-box-shadow .3s ease;background:#fff;-webkit-appearance:none;border-radius:50%;border:1px solid #909599;position:relative;cursor:-webkit-grab;height:24px;width:24px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-webkit-slider-thumb{border-color:#757575}.duet-range.sc-duet-range-slider:active::-webkit-slider-thumb{cursor:-webkit-grabbing}.duet-range.sc-duet-range-slider::-moz-range-track{background:transparent!important}.duet-range.sc-duet-range-slider::-moz-range-thumb{background:#fff;border:1px solid #909599;-moz-appearance:none;appearance:none;border-radius:50%;position:relative;cursor:-moz-grab;height:24px;width:24px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-moz-range-thumb{border-color:#757575}.duet-range.sc-duet-range-slider:active::-moz-range-thumb{cursor:-moz-grabbing}.duet-range.sc-duet-range-slider::-ms-thumb{background:#fff;border:1px solid #909599;overflow:visible;border-radius:50%;position:relative;height:24px;width:24px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-thumb{border-color:#757575}.duet-range.sc-duet-range-slider::-ms-fill-lower{background:#0077b3;height:4px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-fill-lower{background:#c60c30}.duet-range.sc-duet-range-slider::-ms-fill-upper{background:#cfd2d4;height:4px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-fill-upper{background:#d1d1d1}"},enumerable:true,configurable:true});return e}())}}}));