@nextcloud/vue 5.4.0 → 6.0.0-beta.2

package/dist/Components/TextField.js

@@ -1,3 +1,3 @@
 /*! For license information please see TextField.js.LICENSE.txt */
-!function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("NextcloudVue",[],t):"object"==typeof exports?exports.NextcloudVue=t():(n.NextcloudVue=n.NextcloudVue||{},n.NextcloudVue["Components/TextField"]=t())}(self,(function(){return function(){var n={3150:function(n,t,e){"use strict";function o(n,t,e){return t in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}e.d(t,{default:function(){return k}});var r={name:"Button",props:{disabled:{type:Boolean,default:!1},type:{type:String,validator:function(n){return-1!==["primary","secondary","tertiary","tertiary-no-background","error","warning","success"].indexOf(n)},default:"secondary"},nativeType:{type:String,validator:function(n){return-1!==["submit","reset","button"].indexOf(n)},default:"button"},wide:{type:Boolean,default:!1},ariaLabel:{type:String,default:null}},data:function(){return{tabbed:!1,slots:this.$slots}},computed:{hasText:function(){var n,t,e;return void 0!==(null===(n=this.slots)||void 0===n?void 0:n.default)&&(null===(t=this.slots)||void 0===t||null===(e=t.default[0])||void 0===e?void 0:e.text)},hasIcon:function(){return void 0!==this.slots.icon},iconOnly:function(){return this.hasIcon&&!this.hasText},textOnly:function(){return!this.hasIcon&&this.hasText},iconAndText:function(){return this.hasIcon&&this.hasText},text:function(){return this.hasText?this.slots.default[0].text.trim():null},buttonClassObject:function(){var n;return o(n={"button-vue--icon-only":this.iconOnly,"button-vue--text-only":this.textOnly,"button-vue--icon-and-text":this.iconAndText},"button-vue--vue-".concat(this.type),this.type),o(n,"button-vue--wide",this.wide),o(n,"button-vue--tabbed",this.tabbed),n}},beforeUpdate:function(){this.slots=this.$slots},mounted:function(){this.text||this.ariaLabel||console.warn("You need to fill either the text or the ariaLabel props in the button component.",{text:this.text,ariaLabel:this.ariaLabel},this)},methods:{handleClick:function(){this.tabbed=!1},handleTabUp:function(){this.tabbed=!0},handleBlur:function(){this.tabbed=!1},makeActive:function(){this.tabbed=!1},makeInactive:function(){this.tabbed=!0}}},a=e(3379),i=e.n(a),l=e(7795),u=e.n(l),c=e(569),s=e.n(c),d=e(3565),A=e.n(d),p=e(9216),v=e.n(p),b=e(4589),C=e.n(b),f=e(2726),h={};h.styleTagTransform=C(),h.setAttributes=A(),h.insert=s().bind(null,"head"),h.domAPI=u(),h.insertStyleElement=v(),i()(f.Z,h),f.Z&&f.Z.locals&&f.Z.locals;var g=e(1900),m=e(9182),y=e.n(m),x=(0,g.Z)(r,(function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("button",n._g(n._b({staticClass:"button-vue",class:n.buttonClassObject,attrs:{"aria-label":n.ariaLabel,type:n.nativeType,disabled:n.disabled},on:{keydown:function(t){return!t.type.indexOf("key")&&n._k(t.keyCode,"enter",13,t.key,"Enter")?null:n.makeActive.apply(null,arguments)},keyup:[function(t){return!t.type.indexOf("key")&&n._k(t.keyCode,"enter",13,t.key,"Enter")?null:n.makeInactive.apply(null,arguments)},function(t){return!t.type.indexOf("key")&&n._k(t.keyCode,"tab",9,t.key,"Tab")||t.ctrlKey||t.shiftKey||t.altKey||t.metaKey?null:n.handleTabUp.apply(null,arguments)},function(t){return!t.type.indexOf("key")&&n._k(t.keyCode,"tab",9,t.key,"Tab")?null:t.shiftKey?n.handleTabUp.apply(null,arguments):null}],click:n.handleClick,blur:n.handleBlur}},"button",n.$attrs,!1),n.$listeners),[e("span",{staticClass:"button-vue__wrapper"},[n.hasIcon?e("span",{staticClass:"button-vue__icon"},[n._t("icon")],2):n._e(),n._v(" "),n.hasText?e("span",{staticClass:"button-vue__text"},[n._t("default")],2):n._e()])])}),[],!1,null,"a8d79470",null);"function"==typeof y()&&y()(x);var k=x.exports},1205:function(n,t){"use strict";t.Z=function(n){return Math.random().toString(36).replace(/[^a-z]+/g,"").slice(0,n||5)}},2726:function(n,t,e){"use strict";var o=e(4015),r=e.n(o),a=e(3645),i=e.n(a)()(r());i.push([n.id,".material-design-icon[data-v-a8d79470]{display:flex;align-self:center;justify-self:center;align-items:center;justify-content:center}.button-vue[data-v-a8d79470]{position:relative;width:fit-content;overflow:hidden;border:0;padding:0;font-size:var(--default-font-size);font-weight:bold;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:22px;transition:background-color .1s linear !important;transition:border .1s linear;background-color:var(--color-primary-element-lighter);color:var(--color-primary-light-text)}.button-vue *[data-v-a8d79470]{cursor:pointer}.button-vue[data-v-a8d79470]:focus{outline:none}.button-vue[data-v-a8d79470]:disabled{cursor:default;opacity:.5;filter:saturate(0.7)}.button-vue:disabled *[data-v-a8d79470]{cursor:default}.button-vue[data-v-a8d79470]:hover:not(:disabled){background-color:var(--color-primary-light-hover)}.button-vue[data-v-a8d79470]:active{background-color:var(--color-primary-element-lighter)}.button-vue__wrapper[data-v-a8d79470]{display:inline-flex;align-items:center;justify-content:space-around}.button-vue__icon[data-v-a8d79470]{height:44px;width:44px;min-height:44px;min-width:44px;display:flex;justify-content:center;align-items:center}.button-vue__text[data-v-a8d79470]{font-weight:bold;margin-bottom:1px;padding:2px 0}.button-vue--icon-only[data-v-a8d79470]{width:44px !important}.button-vue--text-only[data-v-a8d79470]{padding:0 12px}.button-vue--text-only .button-vue__text[data-v-a8d79470]{margin-left:4px;margin-right:4px}.button-vue--icon-and-text[data-v-a8d79470]{padding:0 16px 0 4px}.button-vue--wide[data-v-a8d79470]{width:100%}.button-vue--tabbed[data-v-a8d79470],.button-vue[data-v-a8d79470]:focus-visible{box-shadow:0 0 0 2px var(--color-main-text);background-color:var(--color-primary-light-hover)}.button-vue--tabbed.button-vue--vue-primary[data-v-a8d79470],.button-vue:focus-visible.button-vue--vue-primary[data-v-a8d79470]{background-color:var(--color-primary-hover)}.button-vue--tabbed.button-vue--vue-secondary[data-v-a8d79470],.button-vue:focus-visible.button-vue--vue-secondary[data-v-a8d79470]{box-shadow:0 0 0 2px var(--color-main-text)}.button-vue--tabbed.button-vue--vue-tertiary-no-background[data-v-a8d79470],.button-vue:focus-visible.button-vue--vue-tertiary-no-background[data-v-a8d79470]{opacity:1}.button-vue--tabbed.button-vue--vue-success[data-v-a8d79470],.button-vue:focus-visible.button-vue--vue-success[data-v-a8d79470]{background-color:var(--color-success-hover)}.button-vue--tabbed.button-vue--vue-warning[data-v-a8d79470],.button-vue:focus-visible.button-vue--vue-warning[data-v-a8d79470]{background-color:var(--color-warning-hover)}.button-vue--tabbed.button-vue--vue-error[data-v-a8d79470],.button-vue:focus-visible.button-vue--vue-error[data-v-a8d79470]{background-color:var(--color-error-hover)}.button-vue--vue-primary[data-v-a8d79470]{background-color:var(--color-primary-element);color:var(--color-primary-text)}.button-vue--vue-primary[data-v-a8d79470]:hover:not(:disabled){background-color:var(--color-primary-element-hover)}.button-vue--vue-primary[data-v-a8d79470]:active{background-color:var(--color-primary-element)}.button-vue--vue-secondary[data-v-a8d79470]{color:var(--color-main-text);background-color:var(--color-background-dark);box-shadow:0 0 0 2px var(--color-border-dark)}.button-vue--vue-secondary[data-v-a8d79470]:hover:not(:disabled){color:var(--color-main-text);background-color:var(--color-background-dark);box-shadow:0 0 0 2px var(--color-primary-element)}.button-vue--vue-tertiary[data-v-a8d79470]{color:var(--color-main-text);background-color:rgba(0,0,0,0)}.button-vue--vue-tertiary[data-v-a8d79470]:hover:not(:disabled){background-color:var(--color);background-color:var(--color-background-hover)}.button-vue--vue-tertiary-no-background[data-v-a8d79470]{color:var(--color-main-text);background-color:rgba(0,0,0,0);opacity:.7}.button-vue--vue-tertiary-no-background[data-v-a8d79470]:hover:not(:disabled){background-color:rgba(0,0,0,0);opacity:1}.button-vue--vue-success[data-v-a8d79470]{background-color:var(--color-success);color:#fff}.button-vue--vue-success[data-v-a8d79470]:hover:not(:disabled){background-color:var(--color-success-hover)}.button-vue--vue-success[data-v-a8d79470]:active{background-color:var(--color-success)}.button-vue--vue-warning[data-v-a8d79470]{background-color:var(--color-warning);color:#fff}.button-vue--vue-warning[data-v-a8d79470]:hover:not(:disabled){background-color:var(--color-warning-hover)}.button-vue--vue-warning[data-v-a8d79470]:active{background-color:var(--color-warning)}.button-vue--vue-error[data-v-a8d79470]{background-color:var(--color-error);color:#fff}.button-vue--vue-error[data-v-a8d79470]:hover:not(:disabled){background-color:var(--color-error-hover)}.button-vue--vue-error[data-v-a8d79470]:active{background-color:var(--color-error)}","",{version:3,sources:["webpack://./src/assets/material-icons.css","webpack://./src/components/Button/Button.vue","webpack://./src/assets/variables.scss"],names:[],mappings:"AAGA,uCACC,YAAA,CACA,iBAAA,CACA,mBAAA,CACA,kBAAA,CACA,sBAAA,CCuYD,6BACC,iBAAA,CACA,iBAAA,CACA,eAAA,CACA,QAAA,CACA,SAAA,CACA,kCAAA,CACA,gBAAA,CACA,eC9XgB,CD+XhB,cC/XgB,CDgYhB,YAAA,CACA,kBAAA,CACA,sBAAA,CAGA,cAAA,CAIA,kBAAA,CACA,iDAAA,CACA,4BAAA,CAkBA,qDAAA,CACA,qCAAA,CAxBA,+BACC,cAAA,CAOD,mCACC,YAAA,CAGD,sCACC,cAAA,CAIA,UCtYiB,CDwYjB,oBAAA,CALA,wCACC,cAAA,CAUF,kDACC,iDAAA,CAKD,oCACC,qDAAA,CAGD,sCACC,mBAAA,CACA,kBAAA,CACA,4BAAA,CAGD,mCACC,WChbe,CDibf,UCjbe,CDkbf,eClbe,CDmbf,cCnbe,CDobf,YAAA,CACA,sBAAA,CACA,kBAAA,CAGD,mCACC,gBAAA,CACA,iBAAA,CACA,aAAA,CAID,wCACC,qBAAA,CAID,wCACC,cAAA,CACA,0DACC,eAAA,CACA,gBAAA,CAKF,4CACC,oBAAA,CAID,mCACC,UAAA,CAMD,gFACC,2CAAA,CACA,iDAAA,CACA,gIACC,2CAAA,CAED,oIACC,2CAAA,CAED,8JACC,SAAA,CAED,gIACC,2CAAA,CAED,gIACC,2CAAA,CAED,4HACC,yCAAA,CAOF,0CACC,6CAAA,CACA,+BAAA,CACA,+DACC,mDAAA,CAID,iDACC,6CAAA,CAKF,4CACC,4BAAA,CACA,6CAAA,CACA,6CAAA,CACA,iEACC,4BAAA,CACA,6CAAA,CACA,iDAAA,CAKF,2CACC,4BAAA,CACA,8BAAA,CACA,gEACC,6BAAA,CACA,8CAAA,CAKF,yDACC,4BAAA,CACA,8BAAA,CACA,UAAA,CACA,8EACC,8BAAA,CACA,SAAA,CAKF,0CACC,qCAAA,CACA,UAAA,CACA,+DACC,2CAAA,CAID,iDACC,qCAAA,CAKF,0CACC,qCAAA,CACA,UAAA,CACA,+DACC,2CAAA,CAID,iDACC,qCAAA,CAKF,wCACC,mCAAA,CACA,UAAA,CACA,6DACC,yCAAA,CAID,+CACC,mCAAA",sourcesContent:["/*\n* Ensure proper alignment of the vue material icons\n*/\n.material-design-icon {\n\tdisplay: flex;\n\talign-self: center;\n\tjustify-self: center;\n\talign-items: center;\n\tjustify-content: center;\n}\n","@use 'sass:math'; $scope_version:\"c49fbe2\"; @import 'variables'; @import 'material-icons';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.button-vue {\n\tposition: relative;\n\twidth: fit-content;\n\toverflow: hidden;\n\tborder: 0;\n\tpadding: 0;\n\tfont-size: var(--default-font-size);\n\tfont-weight: bold;\n\tmin-height: $clickable-area;\n\tmin-width: $clickable-area;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\t// Cursor pointer on element and all children\n\tcursor: pointer;\n\t& * {\n\t\tcursor: pointer;\n\t}\n\tborder-radius: math.div($clickable-area, 2);\n\ttransition: background-color 0.1s linear !important;\n\ttransition: border 0.1s linear;\n\n\t// No outline feedback for focus. Handled with a toggled class in js (see data)\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t\t& * {\n\t\t\tcursor: default;\n\t\t}\n\t\topacity: $opacity_disabled;\n\t\t// Gives a wash out effect\n\t\tfilter: saturate($opacity_normal);\n\t}\n\n\t// Default button type\n\tbackground-color: var(--color-primary-element-lighter);\n\tcolor: var(--color-primary-light-text);\n\t&:hover:not(:disabled) {\n\t\tbackground-color: var(--color-primary-light-hover);\n\t}\n\n\t// Back to the default color for this button when active\n\t// TODO: add ripple effect\n\t&:active {\n\t\tbackground-color: var(--color-primary-element-lighter);\n\t}\n\n\t&__wrapper {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: space-around;\n\t}\n\n\t&__icon {\n\t\theight: $clickable-area;\n\t\twidth: $clickable-area;\n\t\tmin-height: $clickable-area;\n\t\tmin-width: $clickable-area;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t&__text {\n\t\tfont-weight: bold;\n\t\tmargin-bottom: 1px;\n\t\tpadding: 2px 0;\n\t}\n\n\t// Icon-only button\n\t&--icon-only {\n\t\twidth: $clickable-area !important;\n\t}\n\n\t// Text-only button\n\t&--text-only {\n\t\tpadding: 0 12px;\n\t\t& .button-vue__text {\n\t\t\tmargin-left: 4px;\n\t\t\tmargin-right: 4px;\n\t\t}\n\t}\n\n\t// Icon and text button\n\t&--icon-and-text {\n\t\tpadding: 0 16px 0 4px;\n\t}\n\n\t// Wide button spans the whole width of the container\n\t&--wide {\n\t\twidth: 100%;\n\t}\n\n\t// We use box-shadow around our buttons instead of an outline, so that the added \"border\"\n\t// coincides with the border of the element. It's not possible to add a border-radius to\n\t// the outline\n\t&--tabbed, &:focus-visible {\n\t\tbox-shadow: 0 0 0 2px var(--color-main-text);\n\t\tbackground-color: var(--color-primary-light-hover);\n\t\t&.button-vue--vue-primary {\n\t\t\tbackground-color: var(--color-primary-hover);\n\t\t}\n\t\t&.button-vue--vue-secondary {\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-text);\n\t\t}\n\t\t&.button-vue--vue-tertiary-no-background {\n\t\t\topacity: 1;\n\t\t}\n\t\t&.button-vue--vue-success {\n\t\t\tbackground-color: var(--color-success-hover);\n\t\t}\n\t\t&.button-vue--vue-warning {\n\t\t\tbackground-color: var(--color-warning-hover);\n\t\t}\n\t\t&.button-vue--vue-error {\n\t\t\tbackground-color: var(--color-error-hover);\n\t\t}\n\t}\n\n\t// Button types\n\n\t// Primary\n\t&--vue-primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-text);\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\t}\n\n\t// Secondary\n\t&--vue-secondary {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-background-dark);\n\t\tbox-shadow: 0 0 0 2px var(--color-border-dark);\n\t\t&:hover:not(:disabled) {\n\t\t\tcolor: var(--color-main-text);\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-primary-element);\n\t\t}\n\t}\n\n\t// Tertiary\n\t&--vue-tertiary {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: transparent;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color);\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t}\n\n\t// Tertiary, no background\n\t&--vue-tertiary-no-background {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: transparent;\n\t\topacity: .7;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t// Success\n\t&--vue-success {\n\t\tbackground-color: var(--color-success);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-success-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// : add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-success);\n\t\t}\n\t}\n\n\t// Warning\n\t&--vue-warning {\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-warning-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-warning);\n\t\t}\n\t}\n\n\t// Error\n\t&--vue-error {\n\t\tbackground-color: var(--color-error);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-error-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-error);\n\t\t}\n\t}\n}\n\n","/**\n * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @license GNU AGPL version 3 or any later version\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\n// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556\n// recommended is 48px\n// 44px is what we choose and have very good visual-to-usability ratio\n$clickable-area: 44px;\n\n// background icon size\n// also used for the scss icon font\n$icon-size: 16px;\n\n// icon padding for a $clickable-area width and a $icon-size icon\n// ( 44px - 16px ) / 2\n$icon-margin: math.div($clickable-area - $icon-size, 2);\n\n// transparency background for icons\n$icon-focus-bg: rgba(127, 127, 127, .25);\n\n// popovermenu arrow width from the triangle center\n$arrow-width: 9px;\n\n// opacities\n$opacity_disabled: .5;\n$opacity_normal: .7;\n$opacity_full: 1;\n\n// menu round background hover feedback\n// good looking on dark AND white bg\n$action-background-hover: rgba(127, 127, 127, .25);\n\n// various structure data used in the \n// `AppNavigation` component\n$header-height: 50px;\n$navigation-width: 300px;\n\n// mobile breakpoint\n$breakpoint-mobile: 1024px;\n"],sourceRoot:""}]),t.Z=i},4524:function(n,t,e){"use strict";var o=e(4015),r=e.n(o),a=e(3645),i=e.n(a)()(r());i.push([n.id,".material-design-icon[data-v-1d45ba7a]{display:flex;align-self:center;justify-self:center;align-items:center;justify-content:center}.input-field[data-v-1d45ba7a]{position:relative;width:100%;border-radius:var(--border-radius-large)}.input-field__main-wrapper[data-v-1d45ba7a]{height:36px;position:relative}.input-field__input[data-v-1d45ba7a]{margin:0;padding:0 12px;font-size:var(--default-font-size);background-color:var(--color-main-background);color:var(--color-main-text);border:2px solid var(--color-border-dark);height:36px !important;border-radius:var(--border-radius-large);text-overflow:ellipsis;cursor:pointer;width:100%;-webkit-appearance:textfield !important;-moz-appearance:textfield !important}.input-field__input[data-v-1d45ba7a]:hover{border-color:var(--color-primary-element)}.input-field__input[data-v-1d45ba7a]:focus{cursor:text}.input-field__input--success[data-v-1d45ba7a]{border-color:var(--color-success) !important}.input-field__input--error[data-v-1d45ba7a]{border-color:var(--color-error) !important}.input-field__input--leading-icon[data-v-1d45ba7a]{padding-left:28px}.input-field__input--trailing-icon[data-v-1d45ba7a]{padding-right:28px}.input-field__label[data-v-1d45ba7a]{padding:4px 0;display:block}.input-field__label--hidden[data-v-1d45ba7a]{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.input-field__icon[data-v-1d45ba7a]{position:absolute;height:32px;width:32px;display:flex;align-items:center;justify-content:center;opacity:.7}.input-field__icon--leading[data-v-1d45ba7a]{bottom:2px;left:2px}.input-field__icon--trailing[data-v-1d45ba7a]{bottom:2px;right:2px}.input-field__clear-button[data-v-1d45ba7a]{position:absolute;top:2px;right:1px}[data-v-1d45ba7a] .button-vue{min-width:unset;min-height:unset;height:32px;width:32px !important;border-radius:var(--border-radius-large)}","",{version:3,sources:["webpack://./src/assets/material-icons.css","webpack://./src/components/InputField/InputField.vue"],names:[],mappings:"AAGA,uCACC,YAAA,CACA,iBAAA,CACA,mBAAA,CACA,kBAAA,CACA,sBAAA,CC+ND,8BACC,iBAAA,CACA,UAAA,CACA,wCAAA,CAEA,4CACC,WAAA,CACA,iBAAA,CAGD,qCACC,QAAA,CACA,cAAA,CACA,kCAAA,CACA,6CAAA,CACA,4BAAA,CACA,yCAAA,CACA,sBAAA,CACA,wCAAA,CACA,sBAAA,CACA,cAAA,CACA,UAAA,CACA,uCAAA,CACA,oCAAA,CAEA,2CACC,yCAAA,CAED,2CACC,WAAA,CAGD,8CACC,4CAAA,CAGD,4CACC,0CAAA,CAGD,mDACC,iBAAA,CAGD,oDACC,kBAAA,CAIF,qCACC,aAAA,CACA,aAAA,CAEA,6CACC,iBAAA,CACA,aAAA,CACA,QAAA,CACA,SAAA,CACA,UAAA,CACA,eAAA,CAIF,oCACC,iBAAA,CACA,WAAA,CACA,UAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,UAAA,CACA,6CACC,UAAA,CACA,QAAA,CAGD,8CACC,UAAA,CACA,SAAA,CAIF,4CACC,iBAAA,CACA,OAAA,CACA,SAAA,CAIF,8BACC,eAAA,CACA,gBAAA,CACA,WAAA,CACA,qBAAA,CACA,wCAAA",sourcesContent:["/*\n* Ensure proper alignment of the vue material icons\n*/\n.material-design-icon {\n\tdisplay: flex;\n\talign-self: center;\n\tjustify-self: center;\n\talign-items: center;\n\tjustify-content: center;\n}\n","@use 'sass:math'; $scope_version:\"c49fbe2\"; @import 'variables'; @import 'material-icons';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.input-field {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\n\t&__main-wrapper {\n\t\theight: 36px;\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding: 0 12px;\n\t\tfont-size: var(--default-font-size);\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-dark);\n\t\theight: 36px !important;\n\t\tborder-radius: var(--border-radius-large);\n\t\ttext-overflow: ellipsis;\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\n\t\t&:hover {\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t}\n\n\t\t&--leading-icon {\n\t\t\tpadding-left: 28px;\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tpadding-right: 28px;\n\t\t}\n\t}\n\n\t&__label {\n\t\tpadding: 4px 0;\n\t\tdisplay: block;\n\n\t\t&--hidden {\n\t\t\tposition: absolute;\n\t\t\tleft: -10000px;\n\t\t\ttop: auto;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: 32px;\n\t\twidth: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\t\t&--leading {\n\t\t\tbottom: 2px;\n\t\t\tleft: 2px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tbottom: 2px;\n\t\t\tright: 2px;\n\t\t}\n\t}\n\n\t&__clear-button {\n\t\tposition: absolute;\n\t\ttop: 2px;\n\t\tright: 1px;\n\t}\n}\n\n::v-deep .button-vue {\n\tmin-width: unset;\n\tmin-height: unset;\n\theight: 32px;\n\twidth: 32px !important;\n\tborder-radius: var(--border-radius-large);\n}\n\n"],sourceRoot:""}]),t.Z=i},3645:function(n){"use strict";n.exports=function(n){var t=[];return t.toString=function(){return this.map((function(t){var e=n(t);return t[2]?"@media ".concat(t[2]," {").concat(e,"}"):e})).join("")},t.i=function(n,e,o){"string"==typeof n&&(n=[[null,n,""]]);var r={};if(o)for(var a=0;a<this.length;a++){var i=this[a][0];null!=i&&(r[i]=!0)}for(var l=0;l<n.length;l++){var u=[].concat(n[l]);o&&r[u[0]]||(e&&(u[2]?u[2]="".concat(e," and ").concat(u[2]):u[2]=e),t.push(u))}},t}},4015:function(n){"use strict";function t(n,t){(null==t||t>n.length)&&(t=n.length);for(var e=0,o=new Array(t);e<t;e++)o[e]=n[e];return o}n.exports=function(n){var e,o,r=(o=4,function(n){if(Array.isArray(n))return n}(e=n)||function(n,t){var e=n&&("undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"]);if(null!=e){var o,r,a=[],i=!0,l=!1;try{for(e=e.call(n);!(i=(o=e.next()).done)&&(a.push(o.value),!t||a.length!==t);i=!0);}catch(n){l=!0,r=n}finally{try{i||null==e.return||e.return()}finally{if(l)throw r}}return a}}(e,o)||function(n,e){if(n){if("string"==typeof n)return t(n,e);var o=Object.prototype.toString.call(n).slice(8,-1);return"Object"===o&&n.constructor&&(o=n.constructor.name),"Map"===o||"Set"===o?Array.from(n):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(n,e):void 0}}(e,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),a=r[1],i=r[3];if(!i)return a;if("function"==typeof btoa){var l=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),u="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(l),c="/*# ".concat(u," */"),s=i.sources.map((function(n){return"/*# sourceURL=".concat(i.sourceRoot||"").concat(n," */")}));return[a].concat(s).concat([c]).join("\n")}return[a].join("\n")}},3379:function(n){"use strict";var t=[];function e(n){for(var e=-1,o=0;o<t.length;o++)if(t[o].identifier===n){e=o;break}return e}function o(n,o){for(var a={},i=[],l=0;l<n.length;l++){var u=n[l],c=o.base?u[0]+o.base:u[0],s=a[c]||0,d="".concat(c," ").concat(s);a[c]=s+1;var A=e(d),p={css:u[1],media:u[2],sourceMap:u[3],supports:u[4],layer:u[5]};if(-1!==A)t[A].references++,t[A].updater(p);else{var v=r(p,o);o.byIndex=l,t.splice(l,0,{identifier:d,updater:v,references:1})}i.push(d)}return i}function r(n,t){var e=t.domAPI(t);return e.update(n),function(t){if(t){if(t.css===n.css&&t.media===n.media&&t.sourceMap===n.sourceMap&&t.supports===n.supports&&t.layer===n.layer)return;e.update(n=t)}else e.remove()}}n.exports=function(n,r){var a=o(n=n||[],r=r||{});return function(n){n=n||[];for(var i=0;i<a.length;i++){var l=e(a[i]);t[l].references--}for(var u=o(n,r),c=0;c<a.length;c++){var s=e(a[c]);0===t[s].references&&(t[s].updater(),t.splice(s,1))}a=u}}},569:function(n){"use strict";var t={};n.exports=function(n,e){var o=function(n){if(void 0===t[n]){var e=document.querySelector(n);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(n){e=null}t[n]=e}return t[n]}(n);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(e)}},9216:function(n){"use strict";n.exports=function(n){var t=document.createElement("style");return n.setAttributes(t,n.attributes),n.insert(t,n.options),t}},3565:function(n,t,e){"use strict";n.exports=function(n){var t=e.nc;t&&n.setAttribute("nonce",t)}},7795:function(n){"use strict";n.exports=function(n){var t=n.insertStyleElement(n);return{update:function(e){!function(n,t,e){var o="";e.supports&&(o+="@supports (".concat(e.supports,") {")),e.media&&(o+="@media ".concat(e.media," {"));var r=void 0!==e.layer;r&&(o+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),o+=e.css,r&&(o+="}"),e.media&&(o+="}"),e.supports&&(o+="}");var a=e.sourceMap;a&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(o,n,t.options)}(t,n,e)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(t)}}}},4589:function(n){"use strict";n.exports=function(n,t){if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}},9182:function(){},6920:function(){},1900:function(n,t,e){"use strict";function o(n,t,e,o,r,a,i,l){var u,c="function"==typeof n?n.options:n;if(t&&(c.render=t,c.staticRenderFns=e,c._compiled=!0),o&&(c.functional=!0),a&&(c._scopeId="data-v-"+a),i?(u=function(n){(n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),r&&r.call(this,n),n&&n._registeredComponents&&n._registeredComponents.add(i)},c._ssrRegister=u):r&&(u=l?function(){r.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:r),u)if(c.functional){c._injectStyles=u;var s=c.render;c.render=function(n,t){return u.call(t),s(n,t)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,u):[u]}return{exports:n,options:c}}e.d(t,{Z:function(){return o}})},2533:function(n){"use strict";n.exports=require("vue-material-design-icons/ArrowRight")},6247:function(n){"use strict";n.exports=require("vue-material-design-icons/Check")},5978:function(n){"use strict";n.exports=require("vue-material-design-icons/Close")}},t={};function e(o){var r=t[o];if(void 0!==r)return r.exports;var a=t[o]={id:o,exports:{}};return n[o](a,a.exports,e),a.exports}e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,{a:t}),t},e.d=function(n,t){for(var o in t)e.o(t,o)&&!e.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:t[o]})},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.nc=void 0;var o={};return function(){"use strict";e.r(o),e.d(o,{default:function(){return j}});var n=e(3150),t=e(6247),r=e.n(t),a=require("vue-material-design-icons/AlertCircleOutline"),i=e.n(a),l=e(1205),u={name:"InputField",components:{Button:n.default,Check:r(),AlertCircle:i()},props:{value:{type:String,required:!0},type:{type:String,required:!0},label:{type:String,default:void 0},labelOutside:{type:Boolean,default:!1},labelVisible:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},showTrailingButton:{type:Boolean,default:!1},success:{type:Boolean,default:!1},error:{type:Boolean,default:!1}},computed:{inputName:function(){return"input"+(0,l.Z)()},hasLeadingIcon:function(){return this.$slots.default},hasTrailingIcon:function(){return this.success},hasPlaceholder:function(){return""!==this.placeholder&&void 0!==this.placeholder},computedPlaceholder:function(){return this.labelVisible?this.hasPlaceholder?this.placeholder:"":this.hasPlaceholder?this.placeholder:this.label}},watch:{label:function(){this.validateLabel()},labelOutside:function(){this.validateLabel()}},methods:{handleInput:function(n){this.$emit("update:value",n.target.value)},handleTrailingButtonClick:function(n){this.$emit("trailing-button-click",n)},validateLabel:function(){if(this.label&&!this.labelOutside)throw new Error("You need to add a label to the textField component. Either use the prop label or use an external one, as per the example in the documentation")}}},c=e(3379),s=e.n(c),d=e(7795),A=e.n(d),p=e(569),v=e.n(p),b=e(3565),C=e.n(b),f=e(9216),h=e.n(f),g=e(4589),m=e.n(g),y=e(4524),x={};x.styleTagTransform=m(),x.setAttributes=C(),x.insert=v().bind(null,"head"),x.domAPI=A(),x.insertStyleElement=h(),s()(y.Z,x),y.Z&&y.Z.locals&&y.Z.locals;var k=e(1900),_=(0,k.Z)(u,(function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("div",{staticClass:"input-field"},[n.labelOutside||void 0===n.label?n._e():e("label",{staticClass:"input-field__label",class:{"input-field__label--hidden":!n.labelVisible},attrs:{for:n.inputName}},[n._v("\n\t\t"+n._s(n.label)+"\n\t")]),n._v(" "),e("div",{staticClass:"input-field__main-wrapper"},[e("input",n._g(n._b({ref:"input",staticClass:"input-field__input",class:{"input-field__input--trailing-icon":n.showTrailingButton||n.hasTrailingIcon,"input-field__input--leading-icon":n.hasLeadingIcon,"input-field__input--success":n.success,"input-field__input--error":n.error},attrs:{name:n.inputName,type:n.type,placeholder:n.computedPlaceholder,"aria-live":"polite"},domProps:{value:n.value},on:{input:n.handleInput}},"input",n.$attrs,!1),n.$listeners)),n._v(" "),e("div",{staticClass:"input-field__icon input-field__icon--leading"},[n._t("default")],2),n._v(" "),n.success||n.error?e("div",{staticClass:"input-field__icon input-field__icon--trailing"},[n.success?e("Check",{attrs:{size:18}}):n.error?e("AlertCircle",{attrs:{size:18}}):n._e()],1):n.showTrailingButton?e("Button",{staticClass:"input-field__clear-button",attrs:{type:"tertiary-no-background"},on:{click:n.handleTrailingButtonClick}},[e("template",{slot:"icon"},[n._t("trailing-button-icon")],2)],2):n._e()],1)])}),[],!1,null,"1d45ba7a",null).exports,w=e(5978),B=e.n(w),I=e(2533),D=e.n(I),T={name:"TextField",components:{InputField:_,Close:B(),ArrowRight:D()},props:{value:{type:String,required:!0},type:{type:String,default:"text",validator:function(n){return["text","password","email","tel","url"].includes(n)}},label:{type:String,default:void 0},labelOutside:{type:Boolean,default:!1},labelVisible:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},showTrailingButton:{type:Boolean,default:!1},trailingButtonIcon:{type:String,default:"close",validator:function(n){return["close","arrowRight"].includes(n)}},success:{type:Boolean,default:!1},error:{type:Boolean,default:!1}},methods:{handleInput:function(n){this.$emit("update:value",n.target.value)}}},S=e(6920),$=e.n(S),O=(0,k.Z)(T,(function(){var n=this,t=n.$createElement,e=n._self._c||t;return e("InputField",n._g(n._b({on:{input:n.handleInput}},"InputField",n.$props,!1),n.$listeners),[n._t("default"),n._v(" "),e("template",{slot:"trailing-button-icon"},["close"===n.trailingButtonIcon?e("Close",{attrs:{size:20}}):"arrowRight"===n.trailingButtonIcon?e("ArrowRight",{attrs:{size:20}}):n._e()],1)],2)}),[],!1,null,null,null);"function"==typeof $()&&$()(O);var j=O.exports}(),o}()}));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("NextcloudVue",[],e):"object"==typeof exports?exports.NextcloudVue=e():(t.NextcloudVue=t.NextcloudVue||{},t.NextcloudVue["Components/TextField"]=e())}(self,(function(){return function(){var t={7051:function(t,e,n){"use strict";function o(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function r(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?o(Object(n),!0).forEach((function(e){a(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}n.d(e,{default:function(){return _}});var i={name:"ButtonVue",props:{disabled:{type:Boolean,default:!1},type:{type:String,validator:function(t){return-1!==["primary","secondary","tertiary","tertiary-no-background","tertiary-on-primary","error","warning","success"].indexOf(t)},default:"secondary"},nativeType:{type:String,validator:function(t){return-1!==["submit","reset","button"].indexOf(t)},default:"button"},wide:{type:Boolean,default:!1},ariaLabel:{type:String,default:null},href:{type:String,default:null},to:{type:[String,Object],default:null},exact:{type:Boolean,default:!1}},data:function(){return{tabbed:!1,slots:this.$slots}},computed:{rootElement:function(){return this.to?r({is:"router-link",tag:"button",to:this.to,exact:this.exact},this.$attrs):this.href?r({is:"a",href:this.href},this.$attrs):r({is:"button"},this.$attrs)},hasText:function(){var t,e,n;return void 0!==(null===(t=this.slots)||void 0===t?void 0:t.default)&&(null===(e=this.slots)||void 0===e||null===(n=e.default[0])||void 0===n?void 0:n.text)},hasIcon:function(){return void 0!==this.slots.icon},iconOnly:function(){return this.hasIcon&&!this.hasText},textOnly:function(){return!this.hasIcon&&this.hasText},iconAndText:function(){return this.hasIcon&&this.hasText},text:function(){return this.hasText?this.slots.default[0].text.trim():null},buttonClassObject:function(){var t;return a(t={"button-vue--icon-only":this.iconOnly,"button-vue--text-only":this.textOnly,"button-vue--icon-and-text":this.iconAndText},"button-vue--vue-".concat(this.type),this.type),a(t,"button-vue--wide",this.wide),a(t,"button-vue--tabbed",this.tabbed),t}},beforeUpdate:function(){this.slots=this.$slots},mounted:function(){this.text||this.ariaLabel||console.warn("You need to fill either the text or the ariaLabel props in the button component.",{text:this.text,ariaLabel:this.ariaLabel},this)},methods:{handleClick:function(){this.tabbed=!1},handleTabUp:function(){this.tabbed=!0},handleBlur:function(){this.tabbed=!1},makeActive:function(){this.tabbed=!1},makeInactive:function(){this.tabbed=!0}}},c=n(3379),u=n.n(c),l=n(7795),s=n.n(l),d=n(569),A=n.n(d),p=n(3565),v=n.n(p),b=n(9216),C=n.n(b),f=n(4589),h=n.n(f),g=n(1743),m={};m.styleTagTransform=h(),m.setAttributes=v(),m.insert=A().bind(null,"head"),m.domAPI=s(),m.insertStyleElement=C(),u()(g.Z,m),g.Z&&g.Z.locals&&g.Z.locals;var y=n(1900),x=n(9922),k=n.n(x),w=(0,y.Z)(i,(function(){var t=this,e=t._self._c;return e("root-element",t._g(t._b({staticClass:"button-vue",class:t.buttonClassObject,attrs:{"aria-label":t.ariaLabel,type:t.nativeType,disabled:t.disabled},on:{keydown:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.makeActive.apply(null,arguments)},keyup:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.makeInactive.apply(null,arguments)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"tab",9,e.key,"Tab")||e.ctrlKey||e.shiftKey||e.altKey||e.metaKey?null:t.handleTabUp.apply(null,arguments)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"tab",9,e.key,"Tab")?null:e.shiftKey?t.handleTabUp.apply(null,arguments):null}],click:t.handleClick,blur:t.handleBlur}},"root-element",t.rootElement,!1),t.$listeners),[e("span",{staticClass:"button-vue__wrapper"},[t.hasIcon?e("span",{staticClass:"button-vue__icon"},[t._t("icon")],2):t._e(),t._v(" "),t.hasText?e("span",{staticClass:"button-vue__text"},[t._t("default")],2):t._e()])])}),[],!1,null,"51ecca01",null);"function"==typeof k()&&k()(w);var _=w.exports},1205:function(t,e){"use strict";e.Z=function(t){return Math.random().toString(36).replace(/[^a-z]+/g,"").slice(0,t||5)}},1743:function(t,e,n){"use strict";var o=n(4015),r=n.n(o),a=n(3645),i=n.n(a)()(r());i.push([t.id,".material-design-icon[data-v-51ecca01]{display:flex;align-self:center;justify-self:center;align-items:center;justify-content:center}.button-vue[data-v-51ecca01]{position:relative;width:fit-content;overflow:hidden;border:0;padding:0;font-size:var(--default-font-size);font-weight:bold;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:22px;transition:background-color .1s linear !important;transition:border .1s linear;background-color:var(--color-primary-element-lighter);color:var(--color-primary-light-text)}.button-vue *[data-v-51ecca01]{cursor:pointer}.button-vue[data-v-51ecca01]:focus{outline:none}.button-vue[data-v-51ecca01]:disabled{cursor:default;opacity:.5;filter:saturate(0.7)}.button-vue:disabled *[data-v-51ecca01]{cursor:default}.button-vue[data-v-51ecca01]:hover:not(:disabled){background-color:var(--color-primary-light-hover)}.button-vue[data-v-51ecca01]:active{background-color:var(--color-primary-element-lighter)}.button-vue__wrapper[data-v-51ecca01]{display:inline-flex;align-items:center;justify-content:space-around}.button-vue__icon[data-v-51ecca01]{height:44px;width:44px;min-height:44px;min-width:44px;display:flex;justify-content:center;align-items:center}.button-vue__text[data-v-51ecca01]{font-weight:bold;margin-bottom:1px;padding:2px 0}.button-vue--icon-only[data-v-51ecca01]{width:44px !important}.button-vue--text-only[data-v-51ecca01]{padding:0 12px}.button-vue--text-only .button-vue__text[data-v-51ecca01]{margin-left:4px;margin-right:4px}.button-vue--icon-and-text[data-v-51ecca01]{padding:0 16px 0 4px}.button-vue--wide[data-v-51ecca01]{width:100%}.button-vue--tabbed[data-v-51ecca01],.button-vue[data-v-51ecca01]:focus-visible{box-shadow:0 0 0 2px var(--color-main-text);background-color:var(--color-primary-light-hover)}.button-vue--tabbed.button-vue--vue-primary[data-v-51ecca01],.button-vue:focus-visible.button-vue--vue-primary[data-v-51ecca01]{background-color:var(--color-primary-hover)}.button-vue--tabbed.button-vue--vue-secondary[data-v-51ecca01],.button-vue:focus-visible.button-vue--vue-secondary[data-v-51ecca01]{box-shadow:0 0 0 2px var(--color-main-text)}.button-vue--tabbed.button-vue--vue-tertiary-no-background[data-v-51ecca01],.button-vue:focus-visible.button-vue--vue-tertiary-no-background[data-v-51ecca01]{opacity:1}.button-vue--tabbed.button-vue--vue-tertiary-on-primary[data-v-51ecca01],.button-vue:focus-visible.button-vue--vue-tertiary-on-primary[data-v-51ecca01]{box-shadow:0 0 0 2px var(--color-primary-text);border-radius:var(--border-radius);opacity:1;background-color:rgba(0,0,0,0)}.button-vue--tabbed.button-vue--vue-success[data-v-51ecca01],.button-vue:focus-visible.button-vue--vue-success[data-v-51ecca01]{background-color:var(--color-success-hover)}.button-vue--tabbed.button-vue--vue-warning[data-v-51ecca01],.button-vue:focus-visible.button-vue--vue-warning[data-v-51ecca01]{background-color:var(--color-warning-hover)}.button-vue--tabbed.button-vue--vue-error[data-v-51ecca01],.button-vue:focus-visible.button-vue--vue-error[data-v-51ecca01]{background-color:var(--color-error-hover)}.button-vue--vue-primary[data-v-51ecca01]{background-color:var(--color-primary-element);color:var(--color-primary-text)}.button-vue--vue-primary[data-v-51ecca01]:hover:not(:disabled){background-color:var(--color-primary-element-hover)}.button-vue--vue-primary[data-v-51ecca01]:active{background-color:var(--color-primary-element)}.button-vue--vue-secondary[data-v-51ecca01]{color:var(--color-main-text);background-color:var(--color-background-dark);box-shadow:0 0 0 2px var(--color-border-dark)}.button-vue--vue-secondary[data-v-51ecca01]:hover:not(:disabled){color:var(--color-main-text);background-color:var(--color-background-dark);box-shadow:0 0 0 2px var(--color-primary-element)}.button-vue--vue-tertiary[data-v-51ecca01]{color:var(--color-main-text);background-color:rgba(0,0,0,0)}.button-vue--vue-tertiary[data-v-51ecca01]:hover:not(:disabled){background-color:var(--color);background-color:var(--color-background-hover)}.button-vue--vue-tertiary-no-background[data-v-51ecca01]{color:var(--color-main-text);background-color:rgba(0,0,0,0);opacity:.7}.button-vue--vue-tertiary-no-background[data-v-51ecca01]:hover:not(:disabled){background-color:rgba(0,0,0,0);opacity:1}.button-vue--vue-tertiary-on-primary[data-v-51ecca01]{color:var(--color-primary-text);background-color:rgba(0,0,0,0);opacity:.7}.button-vue--vue-tertiary-on-primary[data-v-51ecca01]:hover:not(:disabled){background-color:rgba(0,0,0,0);opacity:1}.button-vue--vue-success[data-v-51ecca01]{background-color:var(--color-success);color:#fff}.button-vue--vue-success[data-v-51ecca01]:hover:not(:disabled){background-color:var(--color-success-hover)}.button-vue--vue-success[data-v-51ecca01]:active{background-color:var(--color-success)}.button-vue--vue-warning[data-v-51ecca01]{background-color:var(--color-warning);color:#fff}.button-vue--vue-warning[data-v-51ecca01]:hover:not(:disabled){background-color:var(--color-warning-hover)}.button-vue--vue-warning[data-v-51ecca01]:active{background-color:var(--color-warning)}.button-vue--vue-error[data-v-51ecca01]{background-color:var(--color-error);color:#fff}.button-vue--vue-error[data-v-51ecca01]:hover:not(:disabled){background-color:var(--color-error-hover)}.button-vue--vue-error[data-v-51ecca01]:active{background-color:var(--color-error)}","",{version:3,sources:["webpack://./src/assets/material-icons.css","webpack://./src/components/ButtonVue/ButtonVue.vue","webpack://./src/assets/variables.scss"],names:[],mappings:"AAGA,uCACC,YAAA,CACA,iBAAA,CACA,mBAAA,CACA,kBAAA,CACA,sBAAA,CCLD,6BACC,iBAAA,CACA,iBAAA,CACA,eAAA,CACA,QAAA,CACA,SAAA,CACA,kCAAA,CACA,gBAAA,CACA,eCcgB,CDbhB,cCagB,CDZhB,YAAA,CACA,kBAAA,CACA,sBAAA,CAGA,cAAA,CAIA,kBAAA,CACA,iDAAA,CACA,4BAAA,CAkBA,qDAAA,CACA,qCAAA,CAxBA,+BACC,cAAA,CAOD,mCACC,YAAA,CAGD,sCACC,cAAA,CAIA,UCMiB,CDJjB,oBAAA,CALA,wCACC,cAAA,CAUF,kDACC,iDAAA,CAKD,oCACC,qDAAA,CAGD,sCACC,mBAAA,CACA,kBAAA,CACA,4BAAA,CAGD,mCACC,WCpCe,CDqCf,UCrCe,CDsCf,eCtCe,CDuCf,cCvCe,CDwCf,YAAA,CACA,sBAAA,CACA,kBAAA,CAGD,mCACC,gBAAA,CACA,iBAAA,CACA,aAAA,CAID,wCACC,qBAAA,CAID,wCACC,cAAA,CACA,0DACC,eAAA,CACA,gBAAA,CAKF,4CACC,oBAAA,CAID,mCACC,UAAA,CAMD,gFACC,2CAAA,CACA,iDAAA,CACA,gIACC,2CAAA,CAED,oIACC,2CAAA,CAED,8JACC,SAAA,CAED,wJACC,8CAAA,CACA,kCAAA,CACA,SAAA,CACA,8BAAA,CAED,gIACC,2CAAA,CAED,gIACC,2CAAA,CAED,4HACC,yCAAA,CAOF,0CACC,6CAAA,CACA,+BAAA,CACA,+DACC,mDAAA,CAID,iDACC,6CAAA,CAKF,4CACC,4BAAA,CACA,6CAAA,CACA,6CAAA,CACA,iEACC,4BAAA,CACA,6CAAA,CACA,iDAAA,CAKF,2CACC,4BAAA,CACA,8BAAA,CACA,gEACC,6BAAA,CACA,8CAAA,CAKF,yDACC,4BAAA,CACA,8BAAA,CACA,UAAA,CACA,8EACC,8BAAA,CACA,SAAA,CAKF,sDACC,+BAAA,CACA,8BAAA,CACA,UAAA,CAEA,2EACC,8BAAA,CACA,SAAA,CAKF,0CACC,qCAAA,CACA,UAAA,CACA,+DACC,2CAAA,CAID,iDACC,qCAAA,CAKF,0CACC,qCAAA,CACA,UAAA,CACA,+DACC,2CAAA,CAID,iDACC,qCAAA,CAKF,wCACC,mCAAA,CACA,UAAA,CACA,6DACC,yCAAA,CAID,+CACC,mCAAA",sourcesContent:["/*\n* Ensure proper alignment of the vue material icons\n*/\n.material-design-icon {\n\tdisplay: flex;\n\talign-self: center;\n\tjustify-self: center;\n\talign-items: center;\n\tjustify-content: center;\n}\n","@use 'sass:math'; $scope_version:\"a1d9db0\"; @import 'variables'; @import 'material-icons';\n\n\n.button-vue {\n\tposition: relative;\n\twidth: fit-content;\n\toverflow: hidden;\n\tborder: 0;\n\tpadding: 0;\n\tfont-size: var(--default-font-size);\n\tfont-weight: bold;\n\tmin-height: $clickable-area;\n\tmin-width: $clickable-area;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\t// Cursor pointer on element and all children\n\tcursor: pointer;\n\t& * {\n\t\tcursor: pointer;\n\t}\n\tborder-radius: math.div($clickable-area, 2);\n\ttransition: background-color 0.1s linear !important;\n\ttransition: border 0.1s linear;\n\n\t// No outline feedback for focus. Handled with a toggled class in js (see data)\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t\t& * {\n\t\t\tcursor: default;\n\t\t}\n\t\topacity: $opacity_disabled;\n\t\t// Gives a wash out effect\n\t\tfilter: saturate($opacity_normal);\n\t}\n\n\t// Default button type\n\tbackground-color: var(--color-primary-element-lighter);\n\tcolor: var(--color-primary-light-text);\n\t&:hover:not(:disabled) {\n\t\tbackground-color: var(--color-primary-light-hover);\n\t}\n\n\t// Back to the default color for this button when active\n\t// TODO: add ripple effect\n\t&:active {\n\t\tbackground-color: var(--color-primary-element-lighter);\n\t}\n\n\t&__wrapper {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: space-around;\n\t}\n\n\t&__icon {\n\t\theight: $clickable-area;\n\t\twidth: $clickable-area;\n\t\tmin-height: $clickable-area;\n\t\tmin-width: $clickable-area;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t&__text {\n\t\tfont-weight: bold;\n\t\tmargin-bottom: 1px;\n\t\tpadding: 2px 0;\n\t}\n\n\t// Icon-only button\n\t&--icon-only {\n\t\twidth: $clickable-area !important;\n\t}\n\n\t// Text-only button\n\t&--text-only {\n\t\tpadding: 0 12px;\n\t\t& .button-vue__text {\n\t\t\tmargin-left: 4px;\n\t\t\tmargin-right: 4px;\n\t\t}\n\t}\n\n\t// Icon and text button\n\t&--icon-and-text {\n\t\tpadding: 0 16px 0 4px;\n\t}\n\n\t// Wide button spans the whole width of the container\n\t&--wide {\n\t\twidth: 100%;\n\t}\n\n\t// We use box-shadow around our buttons instead of an outline, so that the added \"border\"\n\t// coincides with the border of the element. It's not possible to add a border-radius to\n\t// the outline\n\t&--tabbed, &:focus-visible {\n\t\tbox-shadow: 0 0 0 2px var(--color-main-text);\n\t\tbackground-color: var(--color-primary-light-hover);\n\t\t&.button-vue--vue-primary {\n\t\t\tbackground-color: var(--color-primary-hover);\n\t\t}\n\t\t&.button-vue--vue-secondary {\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-text);\n\t\t}\n\t\t&.button-vue--vue-tertiary-no-background {\n\t\t\topacity: 1;\n\t\t}\n\t\t&.button-vue--vue-tertiary-on-primary {\n\t\t\tbox-shadow: 0 0 0 2px var(--color-primary-text);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\topacity: 1;\n\t\t\tbackground-color: transparent;\n\t\t}\n\t\t&.button-vue--vue-success {\n\t\t\tbackground-color: var(--color-success-hover);\n\t\t}\n\t\t&.button-vue--vue-warning {\n\t\t\tbackground-color: var(--color-warning-hover);\n\t\t}\n\t\t&.button-vue--vue-error {\n\t\t\tbackground-color: var(--color-error-hover);\n\t\t}\n\t}\n\n\t// Button types\n\n\t// Primary\n\t&--vue-primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-text);\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\t}\n\n\t// Secondary\n\t&--vue-secondary {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-background-dark);\n\t\tbox-shadow: 0 0 0 2px var(--color-border-dark);\n\t\t&:hover:not(:disabled) {\n\t\t\tcolor: var(--color-main-text);\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-primary-element);\n\t\t}\n\t}\n\n\t// Tertiary\n\t&--vue-tertiary {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: transparent;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color);\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t}\n\n\t// Tertiary, no background\n\t&--vue-tertiary-no-background {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: transparent;\n\t\topacity: .7;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t// Tertiary on primary color (like the header)\n\t&--vue-tertiary-on-primary {\n\t\tcolor: var(--color-primary-text);\n\t\tbackground-color: transparent;\n\t\topacity: .7;\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t// Success\n\t&--vue-success {\n\t\tbackground-color: var(--color-success);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-success-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// : add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-success);\n\t\t}\n\t}\n\n\t// Warning\n\t&--vue-warning {\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-warning-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-warning);\n\t\t}\n\t}\n\n\t// Error\n\t&--vue-error {\n\t\tbackground-color: var(--color-error);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-error-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-error);\n\t\t}\n\t}\n}\n\n","/**\n * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @license GNU AGPL version 3 or any later version\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\n// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556\n// recommended is 48px\n// 44px is what we choose and have very good visual-to-usability ratio\n$clickable-area: 44px;\n\n// background icon size\n// also used for the scss icon font\n$icon-size: 16px;\n\n// icon padding for a $clickable-area width and a $icon-size icon\n// ( 44px - 16px ) / 2\n$icon-margin: math.div($clickable-area - $icon-size, 2);\n\n// transparency background for icons\n$icon-focus-bg: rgba(127, 127, 127, .25);\n\n// popovermenu arrow width from the triangle center\n$arrow-width: 9px;\n\n// opacities\n$opacity_disabled: .5;\n$opacity_normal: .7;\n$opacity_full: 1;\n\n// menu round background hover feedback\n// good looking on dark AND white bg\n$action-background-hover: rgba(127, 127, 127, .25);\n\n// various structure data used in the \n// `AppNavigation` component\n$header-height: 50px;\n$navigation-width: 300px;\n\n// mobile breakpoint\n$breakpoint-mobile: 1024px;\n\n// top-bar spacing\n$topbar-margin: 4px;\n"],sourceRoot:""}]),e.Z=i},3823:function(t,e,n){"use strict";var o=n(4015),r=n.n(o),a=n(3645),i=n.n(a)()(r());i.push([t.id,".material-design-icon[data-v-5ad0b04b]{display:flex;align-self:center;justify-self:center;align-items:center;justify-content:center}.input-field[data-v-5ad0b04b]{position:relative;width:100%;border-radius:var(--border-radius-large)}.input-field__main-wrapper[data-v-5ad0b04b]{height:36px;position:relative}.input-field__input[data-v-5ad0b04b]{margin:0;padding:0 12px;font-size:var(--default-font-size);background-color:var(--color-main-background);color:var(--color-main-text);border:2px solid var(--color-border-dark);height:36px !important;border-radius:var(--border-radius-large);text-overflow:ellipsis;cursor:pointer;width:100%;-webkit-appearance:textfield !important;-moz-appearance:textfield !important}.input-field__input[data-v-5ad0b04b]:hover{border-color:var(--color-primary-element)}.input-field__input[data-v-5ad0b04b]:focus{cursor:text}.input-field__input--success[data-v-5ad0b04b]{border-color:var(--color-success) !important}.input-field__input--error[data-v-5ad0b04b]{border-color:var(--color-error) !important}.input-field__input--leading-icon[data-v-5ad0b04b]{padding-left:28px}.input-field__input--trailing-icon[data-v-5ad0b04b]{padding-right:28px}.input-field__label[data-v-5ad0b04b]{padding:4px 0;display:block}.input-field__label--hidden[data-v-5ad0b04b]{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.input-field__icon[data-v-5ad0b04b]{position:absolute;height:32px;width:32px;display:flex;align-items:center;justify-content:center;opacity:.7}.input-field__icon--leading[data-v-5ad0b04b]{bottom:2px;left:2px}.input-field__icon--trailing[data-v-5ad0b04b]{bottom:2px;right:2px}.input-field__clear-button[data-v-5ad0b04b]{position:absolute;top:2px;right:1px}[data-v-5ad0b04b] .button-vue{min-width:unset;min-height:unset;height:32px;width:32px !important;border-radius:var(--border-radius-large)}","",{version:3,sources:["webpack://./src/assets/material-icons.css","webpack://./src/components/InputField/InputField.vue"],names:[],mappings:"AAGA,uCACC,YAAA,CACA,iBAAA,CACA,mBAAA,CACA,kBAAA,CACA,sBAAA,CCLD,8BACC,iBAAA,CACA,UAAA,CACA,wCAAA,CAEA,4CACC,WAAA,CACA,iBAAA,CAGD,qCACC,QAAA,CACA,cAAA,CACA,kCAAA,CACA,6CAAA,CACA,4BAAA,CACA,yCAAA,CACA,sBAAA,CACA,wCAAA,CACA,sBAAA,CACA,cAAA,CACA,UAAA,CACA,uCAAA,CACA,oCAAA,CAEA,2CACC,yCAAA,CAED,2CACC,WAAA,CAGD,8CACC,4CAAA,CAGD,4CACC,0CAAA,CAGD,mDACC,iBAAA,CAGD,oDACC,kBAAA,CAIF,qCACC,aAAA,CACA,aAAA,CAEA,6CACC,iBAAA,CACA,aAAA,CACA,QAAA,CACA,SAAA,CACA,UAAA,CACA,eAAA,CAIF,oCACC,iBAAA,CACA,WAAA,CACA,UAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,UAAA,CACA,6CACC,UAAA,CACA,QAAA,CAGD,8CACC,UAAA,CACA,SAAA,CAIF,4CACC,iBAAA,CACA,OAAA,CACA,SAAA,CAIF,8BACC,eAAA,CACA,gBAAA,CACA,WAAA,CACA,qBAAA,CACA,wCAAA",sourcesContent:["/*\n* Ensure proper alignment of the vue material icons\n*/\n.material-design-icon {\n\tdisplay: flex;\n\talign-self: center;\n\tjustify-self: center;\n\talign-items: center;\n\tjustify-content: center;\n}\n","@use 'sass:math'; $scope_version:\"a1d9db0\"; @import 'variables'; @import 'material-icons';\n\n\n.input-field {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\n\t&__main-wrapper {\n\t\theight: 36px;\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding: 0 12px;\n\t\tfont-size: var(--default-font-size);\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-dark);\n\t\theight: 36px !important;\n\t\tborder-radius: var(--border-radius-large);\n\t\ttext-overflow: ellipsis;\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\n\t\t&:hover {\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t}\n\n\t\t&--leading-icon {\n\t\t\tpadding-left: 28px;\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tpadding-right: 28px;\n\t\t}\n\t}\n\n\t&__label {\n\t\tpadding: 4px 0;\n\t\tdisplay: block;\n\n\t\t&--hidden {\n\t\t\tposition: absolute;\n\t\t\tleft: -10000px;\n\t\t\ttop: auto;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: 32px;\n\t\twidth: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\t\t&--leading {\n\t\t\tbottom: 2px;\n\t\t\tleft: 2px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tbottom: 2px;\n\t\t\tright: 2px;\n\t\t}\n\t}\n\n\t&__clear-button {\n\t\tposition: absolute;\n\t\ttop: 2px;\n\t\tright: 1px;\n\t}\n}\n\n:deep(.button-vue) {\n\tmin-width: unset;\n\tmin-height: unset;\n\theight: 32px;\n\twidth: 32px !important;\n\tborder-radius: var(--border-radius-large);\n}\n\n"],sourceRoot:""}]),e.Z=i},3645:function(t){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=t(e);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,o){"string"==typeof t&&(t=[[null,t,""]]);var r={};if(o)for(var a=0;a<this.length;a++){var i=this[a][0];null!=i&&(r[i]=!0)}for(var c=0;c<t.length;c++){var u=[].concat(t[c]);o&&r[u[0]]||(n&&(u[2]?u[2]="".concat(n," and ").concat(u[2]):u[2]=n),e.push(u))}},e}},4015:function(t){"use strict";function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}t.exports=function(t){var n,o,r=(o=4,function(t){if(Array.isArray(t))return t}(n=t)||function(t,e){var n=t&&("undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"]);if(null!=n){var o,r,a=[],i=!0,c=!1;try{for(n=n.call(t);!(i=(o=n.next()).done)&&(a.push(o.value),!e||a.length!==e);i=!0);}catch(t){c=!0,r=t}finally{try{i||null==n.return||n.return()}finally{if(c)throw r}}return a}}(n,o)||function(t,n){if(t){if("string"==typeof t)return e(t,n);var o=Object.prototype.toString.call(t).slice(8,-1);return"Object"===o&&t.constructor&&(o=t.constructor.name),"Map"===o||"Set"===o?Array.from(t):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?e(t,n):void 0}}(n,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),a=r[1],i=r[3];if(!i)return a;if("function"==typeof btoa){var c=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),u="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(c),l="/*# ".concat(u," */"),s=i.sources.map((function(t){return"/*# sourceURL=".concat(i.sourceRoot||"").concat(t," */")}));return[a].concat(s).concat([l]).join("\n")}return[a].join("\n")}},3379:function(t){"use strict";var e=[];function n(t){for(var n=-1,o=0;o<e.length;o++)if(e[o].identifier===t){n=o;break}return n}function o(t,o){for(var a={},i=[],c=0;c<t.length;c++){var u=t[c],l=o.base?u[0]+o.base:u[0],s=a[l]||0,d="".concat(l," ").concat(s);a[l]=s+1;var A=n(d),p={css:u[1],media:u[2],sourceMap:u[3],supports:u[4],layer:u[5]};if(-1!==A)e[A].references++,e[A].updater(p);else{var v=r(p,o);o.byIndex=c,e.splice(c,0,{identifier:d,updater:v,references:1})}i.push(d)}return i}function r(t,e){var n=e.domAPI(e);return n.update(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap&&e.supports===t.supports&&e.layer===t.layer)return;n.update(t=e)}else n.remove()}}t.exports=function(t,r){var a=o(t=t||[],r=r||{});return function(t){t=t||[];for(var i=0;i<a.length;i++){var c=n(a[i]);e[c].references--}for(var u=o(t,r),l=0;l<a.length;l++){var s=n(a[l]);0===e[s].references&&(e[s].updater(),e.splice(s,1))}a=u}}},569:function(t){"use strict";var e={};t.exports=function(t,n){var o=function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}(t);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(n)}},9216:function(t){"use strict";t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},3565:function(t,e,n){"use strict";t.exports=function(t){var e=n.nc;e&&t.setAttribute("nonce",e)}},7795:function(t){"use strict";t.exports=function(t){var e=t.insertStyleElement(t);return{update:function(n){!function(t,e,n){var o="";n.supports&&(o+="@supports (".concat(n.supports,") {")),n.media&&(o+="@media ".concat(n.media," {"));var r=void 0!==n.layer;r&&(o+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),o+=n.css,r&&(o+="}"),n.media&&(o+="}"),n.supports&&(o+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(o,t,e.options)}(e,t,n)},remove:function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(e)}}}},4589:function(t){"use strict";t.exports=function(t,e){if(e.styleSheet)e.styleSheet.cssText=t;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(t))}}},9922:function(){},6920:function(){},1900:function(t,e,n){"use strict";function o(t,e,n,o,r,a,i,c){var u,l="function"==typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),o&&(l.functional=!0),a&&(l._scopeId="data-v-"+a),i?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},l._ssrRegister=u):r&&(u=c?function(){r.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:r),u)if(l.functional){l._injectStyles=u;var s=l.render;l.render=function(t,e){return u.call(e),s(t,e)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,u):[u]}return{exports:t,options:l}}n.d(e,{Z:function(){return o}})},6915:function(t){"use strict";t.exports=require("vue-material-design-icons/ArrowRight.vue")},9873:function(t){"use strict";t.exports=require("vue-material-design-icons/Check.vue")},8618:function(t){"use strict";t.exports=require("vue-material-design-icons/Close.vue")}},e={};function n(o){var r=e[o];if(void 0!==r)return r.exports;var a=e[o]={id:o,exports:{}};return t[o](a,a.exports,n),a.exports}n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,{a:e}),e},n.d=function(t,e){for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.nc=void 0;var o={};return function(){"use strict";n.r(o),n.d(o,{default:function(){return $}});var t=n(7051),e=n(1205),r=require("vue-material-design-icons/AlertCircleOutline.vue"),a=n.n(r),i=n(9873),c=n.n(i),u={name:"InputField",components:{ButtonVue:t.default,AlertCircle:a(),Check:c()},props:{value:{type:String,required:!0},type:{type:String,required:!0},label:{type:String,default:void 0},labelOutside:{type:Boolean,default:!1},labelVisible:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},showTrailingButton:{type:Boolean,default:!1},success:{type:Boolean,default:!1},error:{type:Boolean,default:!1}},emits:["update:value","trailing-button-click"],computed:{inputName:function(){return"input"+(0,e.Z)()},hasLeadingIcon:function(){return this.$slots.default},hasTrailingIcon:function(){return this.success},hasPlaceholder:function(){return""!==this.placeholder&&void 0!==this.placeholder},computedPlaceholder:function(){return this.labelVisible?this.hasPlaceholder?this.placeholder:"":this.hasPlaceholder?this.placeholder:this.label}},watch:{label:function(){this.validateLabel()},labelOutside:function(){this.validateLabel()}},methods:{handleInput:function(t){this.$emit("update:value",t.target.value)},handleTrailingButtonClick:function(t){this.$emit("trailing-button-click",t)},validateLabel:function(){if(this.label&&!this.labelOutside)throw new Error("You need to add a label to the textField component. Either use the prop label or use an external one, as per the example in the documentation")}}},l=n(3379),s=n.n(l),d=n(7795),A=n.n(d),p=n(569),v=n.n(p),b=n(3565),C=n.n(b),f=n(9216),h=n.n(f),g=n(4589),m=n.n(g),y=n(3823),x={};x.styleTagTransform=m(),x.setAttributes=C(),x.insert=v().bind(null,"head"),x.domAPI=A(),x.insertStyleElement=h(),s()(y.Z,x),y.Z&&y.Z.locals&&y.Z.locals;var k=n(1900),w=(0,k.Z)(u,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"input-field"},[t.labelOutside||void 0===t.label?t._e():e("label",{staticClass:"input-field__label",class:{"input-field__label--hidden":!t.labelVisible},attrs:{for:t.inputName}},[t._v("\n\t\t"+t._s(t.label)+"\n\t")]),t._v(" "),e("div",{staticClass:"input-field__main-wrapper"},[e("input",t._g(t._b({ref:"input",staticClass:"input-field__input",class:{"input-field__input--trailing-icon":t.showTrailingButton||t.hasTrailingIcon,"input-field__input--leading-icon":t.hasLeadingIcon,"input-field__input--success":t.success,"input-field__input--error":t.error},attrs:{name:t.inputName,type:t.type,placeholder:t.computedPlaceholder,"aria-live":"polite"},domProps:{value:t.value},on:{input:t.handleInput}},"input",t.$attrs,!1),t.$listeners)),t._v(" "),e("div",{staticClass:"input-field__icon input-field__icon--leading"},[t._t("default")],2),t._v(" "),t.success||t.error?e("div",{staticClass:"input-field__icon input-field__icon--trailing"},[t.success?e("Check",{attrs:{size:18}}):t.error?e("AlertCircle",{attrs:{size:18}}):t._e()],1):t.showTrailingButton?e("ButtonVue",{staticClass:"input-field__clear-button",attrs:{type:"tertiary-no-background"},on:{click:t.handleTrailingButtonClick}},[e("template",{slot:"icon"},[t._t("trailing-button-icon")],2)],2):t._e()],1)])}),[],!1,null,"5ad0b04b",null).exports,_=n(8618),B=n.n(_),D=n(6915),O=n.n(D),I={name:"TextField",components:{InputField:w,Close:B(),ArrowRight:O()},props:{value:{type:String,required:!0},type:{type:String,default:"text",validator:function(t){return["text","password","email","tel","url"].includes(t)}},label:{type:String,default:void 0},labelOutside:{type:Boolean,default:!1},labelVisible:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},showTrailingButton:{type:Boolean,default:!1},trailingButtonIcon:{type:String,default:"close",validator:function(t){return["close","arrowRight"].includes(t)}},success:{type:Boolean,default:!1},error:{type:Boolean,default:!1}},emits:["update:value"],methods:{handleInput:function(t){this.$emit("update:value",t.target.value)}}},T=n(6920),S=n.n(T),j=(0,k.Z)(I,(function(){var t=this,e=t._self._c;return e("InputField",t._g(t._b({on:{input:t.handleInput}},"InputField",t.$props,!1),t.$listeners),[t._t("default"),t._v(" "),e("template",{slot:"trailing-button-icon"},["close"===t.trailingButtonIcon?e("Close",{attrs:{size:20}}):"arrowRight"===t.trailingButtonIcon?e("ArrowRight",{attrs:{size:20}}):t._e()],1)],2)}),[],!1,null,null,null);"function"==typeof S()&&S()(j);var $=j.exports}(),o}()}));
 //# sourceMappingURL=TextField.js.map