@duetds/components
Version:
This package includes Duet Core Components and related tools.
1 lines • 14.7 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(t,e,i,n){function r(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,u){function s(t){try{o(n.next(t))}catch(e){u(e)}}function a(t){try{o(n["throw"](t))}catch(e){u(e)}}function o(t){t.done?i(t.value):r(t.value).then(s,a)}o((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},n,r,u,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(e){return o([t,e])}}function o(s){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,r&&(u=s[0]&2?r["return"]:s[0]?r["throw"]||((u=r["return"])&&u.call(r),0):r.next)&&!(u=u.call(r,s[1])).done)return u;if(r=0,u)s=[s[0]&2,u.value];switch(s[0]){case 0:case 1:u=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;r=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(u=i.trys,u=u.length>0&&u[u.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!u||s[1]>u[0]&&s[1]<u[3])){i.label=s[1];break}if(s[0]===6&&i.label<u[1]){i.label=u[1];u=s;break}if(u&&i.label<u[2]){i.label=u[2];i.ops.push(s);break}if(u[2])i.ops.pop();i.trys.pop();continue}s=e.call(t,i)}catch(a){s=[6,a];r=0}finally{n=u=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./p-2c514bc6.system.js","./p-e008225b.system.js","./p-0fbeef9c.system.js"],(function(t){"use strict";var e,i,n,r,u,s,a,o,l;return{setters:[function(t){e=t.r;i=t.d;n=t.h;r=t.H;u=t.c},function(t){s=t.a;a=t.c;o=t.j},function(t){l=t.d}],execute:function(){var h=t("duet_input",function(){function t(t){var n=this;e(this,t);this.inputId=s("DuetInput");this.labelId=s("DuetLabel");this.errorId=s("DuetError");this.debounce=0;this.theme="";this.expand=false;this.disabled=false;this.margin="auto";this.required=false;this.type="text";this.label="label";this.error="";this.labelHidden=false;this.autoComplete="on";this.tooltip="";this.onInput=function(t){var e=t.target;if(e){n.value=e.value||""}n.duetInput.emit(t)};this.onBlur=function(){n.duetBlur.emit()};this.onFocus=function(){n.duetFocus.emit()};this.duetInput=i(this,"duetInput",7);this.duetChange=i(this,"duetChange",3);this.duetBlur=i(this,"duetBlur",7);this.duetFocus=i(this,"duetFocus",7)}t.prototype.debounceChanged=function(){this.duetChange=a(this.duetChange,this.debounce)};t.prototype.valueChanged=function(){this.duetChange.emit({value:this.value,component:"duet-input"})};t.prototype.componentWillLoad=function(){if(this.theme!=="default"&&document.documentElement.classList.contains("duet-theme-turva")){this.theme="turva"}};t.prototype.componentDidLoad=function(){this.debounceChanged()};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t=this.element.querySelector("input");if(t){t.focus()}return[2]}))}))};t.prototype.render=function(){var t=this.identifier||this.inputId;var e=false;if(this.type==="tel"){e="[0-9+ ]+"}var i=this.pattern?this.pattern:e;return n(r,{class:{"duet-expand":this.expand,"duet-m-0":this.margin==="none"}},n("div",{class:{"duet-input-container":true,"duet-theme-turva":this.theme==="turva","duet-label-hidden":this.labelHidden,"has-icon":this.type!=="text"&&this.type!=="number"&&this.type!=="password","has-error":this.error!==""}},n("duet-label",{theme:this.theme==="turva"?"turva":"default",id:this.labelId,for:t},this.label),this.tooltip!==""?n("duet-tooltip",null,this.tooltip):"",n("input",{onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,type:this.type,class:{"duet-input":true,disabled:this.disabled},value:this.value,disabled:this.disabled,"aria-invalid":this.error!=="","aria-labelledby":this.labelId+" "+this.errorId,"aria-controls":this.accessibleControls,"aria-autocomplete":this.accessibleAutocomplete,"aria-active-descendant":this.accessibleActiveDescendant,"aria-owns":this.accessibleOwns,pattern:i,placeholder:this.placeholder,spellcheck:"false",minlength:this.minlength,maxlength:this.maxlength,autocomplete:this.autoComplete,required:this.required,role:this.role,name:this.name,id:t}),!this.icon&&this.type!=="text"&&this.type!=="number"&&this.type!=="password"?n("div",{class:"duet-input-icon","aria-hidden":"true",innerHTML:l["form-"+o(this.type)].svg}):"",this.icon?n("div",{class:"duet-input-icon","aria-hidden":"true",innerHTML:l[o(this.icon)].svg}):"",n("span",{class:"duet-input-help",id:this.errorId,"aria-live":"assertive","aria-relevant":"additions removals"},this.error!==""?n("span",null,this.error):"")))};Object.defineProperty(t.prototype,"element",{get:function(){return u(this)},enumerable:true,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{debounce:["debounceChanged"],value:["valueChanged"]}},enumerable:true,configurable:true});Object.defineProperty(t,"style",{get:function(){return".sc-duet-input-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:12px!important;display:-ms-inline-flexbox;display:inline-flex;text-align:left;vertical-align:bottom;min-width:calc(33.333% - 8px);max-width:100%;width:100%}.sc-duet-input-h:last-child, .sc-duet-input-h:last-of-type{margin-right:0!important}\@media only screen and (min-width:36em){.sc-duet-input-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-input-h{width:100%!important}.duet-m-0.sc-duet-input-h{margin:0!important}duet-tooltip.sc-duet-input{position:absolute;top:12px;right:0}\@media only screen and (min-width:48em){duet-tooltip.sc-duet-input{position:relative;top:4px;right:auto}}.duet-input-icon.sc-duet-input{-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;pointer-events:none;z-index:200;width:20px;height:20px;color:#00294d;position:absolute;top:54.4px;right:16px}.duet-theme-turva.sc-duet-input .duet-input-icon.sc-duet-input{color:#111}.duet-label-hidden.sc-duet-input .duet-input-icon.sc-duet-input{top:16px}.duet-input.sc-duet-input{-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;padding:14px!important;-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;border:1px solid #909599;border-radius:4px;font-size:1rem;background:#fff;color:#00294d;font-weight:400;line-height:1.25;-webkit-transition:border .15s ease,-webkit-box-shadow .15s ease;transition:border .15s ease,-webkit-box-shadow .15s ease;transition:box-shadow .15s ease,border .15s ease;transition:box-shadow .15s ease,border .15s ease,-webkit-box-shadow .15s ease;z-index:100;min-width:8rem;width:100%;position:relative;display:block}.has-error.sc-duet-input .duet-input.sc-duet-input{border-color:#de2362!important}.has-error.sc-duet-input .duet-input.sc-duet-input + .duet-input-icon.sc-duet-input{color:#de2362!important}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input{border-color:#e02a0d!important}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input + .duet-input-icon.sc-duet-input{color:#e02a0d!important}.has-icon.sc-duet-input .duet-input.sc-duet-input{padding-right:48px!important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;border-color:#757575;color:#111}.duet-input-container.sc-duet-input{position:relative;width:100%;height:100%}.duet-input-container.sc-duet-input, .duet-input-help.sc-duet-input{-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}.duet-input-help.sc-duet-input{font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;border-radius:4px;font-size:.875rem;color:#657787;font-weight:400;line-height:1.25;display:block}.duet-input-help.sc-duet-input span.sc-duet-input{display:block;margin-top:8px}.duet-theme-turva.sc-duet-input .duet-input-help.sc-duet-input{color:#757575;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.has-error.sc-duet-input .duet-input-help.sc-duet-input{color:#de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input-help.sc-duet-input{color:#e02a0d}.duet-input.sc-duet-input::-webkit-contacts-auto-fill-button{display:none!important}.duet-input.sc-duet-input::-webkit-input-placeholder{color:#c4c8ca}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-webkit-input-placeholder{color:#c7c7c7}.duet-input.sc-duet-input::-moz-placeholder{color:#cfd2d4;opacity:1!important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-moz-placeholder{color:#d1d1d1}.duet-input.sc-duet-input:-ms-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:-ms-input-placeholder{color:#d1d1d1}.duet-input.disabled.sc-duet-input, .duet-input[disabled].sc-duet-input{cursor:not-allowed!important;border-color:#f5f8fa!important;background:#f5f8fa!important;color:#00294d!important;-webkit-box-shadow:none!important;box-shadow:none!important;-webkit-text-fill-color:#00294d!important;opacity:1!important}.duet-theme-turva.sc-duet-input .duet-input.disabled.sc-duet-input, .duet-theme-turva.sc-duet-input .duet-input[disabled].sc-duet-input{border-color:#f7f7f7!important;background:#f7f7f7!important;color:#111!important;-webkit-text-fill-color:#111!important}.duet-input.sc-duet-input:hover{-webkit-box-shadow:0 0 0 1px #909599;box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:hover{-webkit-box-shadow:0 0 0 1px #757575;box-shadow:0 0 0 1px #757575}.has-error.sc-duet-input .duet-input.sc-duet-input:hover{-webkit-box-shadow:0 0 0 1px #de2362;box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input:hover{-webkit-box-shadow:0 0 0 1px #e02a0d;box-shadow:0 0 0 1px #e02a0d}.duet-input.sc-duet-input:focus{-webkit-transition:none;transition:none;border-color:#0077b3;-webkit-box-shadow:0 0 0 1px #0077b3;box-shadow:0 0 0 1px #0077b3;outline:0}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus{border-color:#111;-webkit-box-shadow:0 0 0 1px #111;box-shadow:0 0 0 1px #111}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus + .duet-input-icon.sc-duet-input{color:#111}.has-error.sc-duet-input .duet-input.sc-duet-input:focus{-webkit-box-shadow:0 0 0 1px #de2362;box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input:focus{-webkit-box-shadow:0 0 0 1px #e02a0d;box-shadow:0 0 0 1px #e02a0d}.duet-input.sc-duet-input:focus + .duet-input-icon.sc-duet-input{color:#0077b3}.duet-input[type=search].sc-duet-input:not(:placeholder-shown):focus + .duet-input-icon.sc-duet-input{display:none}.duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid{border-color:#de2362;-webkit-box-shadow:0 0 0 1px #de2362;box-shadow:0 0 0 1px #de2362}.duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid + .duet-input-icon.sc-duet-input{color:#de2362}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid{border-color:#e02a0d;-webkit-box-shadow:0 0 0 1px #e02a0d;box-shadow:0 0 0 1px #e02a0d}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:not(:placeholder-shown):focus:required:invalid + .duet-input-icon.sc-duet-input{color:#e02a0d}.duet-input.sc-duet-input:focus:required:valid{border-color:#0077b3}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus:required:valid{border-color:#111}.duet-input[type=number].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=number].sc-duet-input::-webkit-outer-spin-button, .duet-input[type=time].sc-duet-input::-webkit-inner-spin-button, .duet-input[type=time].sc-duet-input::-webkit-outer-spin-button{-webkit-appearance:none;display:none;margin:0}.duet-input.sc-duet-input::-webkit-search-cancel-button{margin-right:-28px}.duet-label-hidden.sc-duet-input duet-label.sc-duet-input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}"},enumerable:true,configurable:true});return t}());var c=t("duet_label",function(){function t(t){e(this,t);this.theme="";this.margin="auto";this.size="medium"}t.prototype.componentWillLoad=function(){if(this.theme!=="default"&&document.documentElement.classList.contains("duet-theme-turva")){this.theme="turva"}};t.prototype.render=function(){return n(r,{class:{"duet-label":true,"duet-label-small":this.size==="small","duet-theme-turva":this.theme==="turva","duet-small-margin":this.margin==="small","duet-m-0":this.margin==="none"}},n("label",{htmlFor:this.for},n("span",null,n("slot",null))))};Object.defineProperty(t,"style",{get:function(){return".sc-duet-label-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-bottom:12px!important;margin-top:8px!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;color:#00294d;font-weight:600;line-height:1.25;z-index:100;text-align:left;padding-right:48px;width:auto;cursor:default;position:relative;display:-ms-inline-flexbox;display:inline-flex}.duet-p-0.sc-duet-label-h{padding:0!important}.duet-m-0.sc-duet-label-h{margin:0!important}\@media only screen and (min-width:48em){.sc-duet-label-h{padding-right:0}}.duet-label-small.sc-duet-label-h{font-size:.875rem}.duet-theme-turva.sc-duet-label-h{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-m-0.sc-duet-label-h{margin-bottom:0!important}.duet-small-margin.sc-duet-label-h{margin-top:8px!important;margin-bottom:4px!important}"},enumerable:true,configurable:true});return t}())}}}));