framework7 6.3.5 → 7.0.0-beta.10

package/components/input/input.css

@@ -1 +1 @@
-:root{--f7-input-bg-color:transparent;--f7-label-font-weight:400;--f7-label-line-height:1.3;--f7-input-padding-left:0px;--f7-input-padding-right:0px;--f7-input-error-text-color:#ff3b30;--f7-input-error-font-size:12px;--f7-input-error-line-height:1.4;--f7-input-error-font-weight:400;--f7-input-info-font-size:12px;--f7-input-info-line-height:1.4;--f7-input-outline-height:40px;--f7-input-outline-border-radius:4px;--f7-input-outline-padding-horizontal:12px;--f7-textarea-height:100px;--f7-input-outline-border-color:#bbb}:root .theme-dark,:root.theme-dark{--f7-input-outline-border-color:#444}.ios{--f7-input-height:44px;--f7-input-font-size:17px;--f7-input-placeholder-color:#a9a9a9;--f7-textarea-padding-vertical:11px;--f7-label-font-size:12px;--f7-label-text-color:inherit;--f7-floating-label-scale:calc(17 / 12);--f7-inline-label-font-size:17px;--f7-inline-label-line-height:1.4;--f7-inline-label-padding-top:3px;--f7-input-clear-button-size:14px;--f7-input-text-color:#000000;--f7-input-info-text-color:rgba(0, 0, 0, 0.45);--f7-input-clear-button-color:rgba(0, 0, 0, 0.45)}.ios .theme-dark,.ios.theme-dark{--f7-input-text-color:#fff;--f7-input-info-text-color:rgba(255, 255, 255, 0.55);--f7-input-clear-button-color:rgba(255, 255, 255, 0.5)}.md{--f7-input-height:36px;--f7-input-font-size:16px;--f7-textarea-padding-vertical:7px;--f7-label-font-size:12px;--f7-floating-label-scale:calc(16 / 12);--f7-inline-label-font-size:16px;--f7-inline-label-line-height:1.5;--f7-inline-label-padding-top:7px;--f7-input-clear-button-size:18px;--f7-input-clear-button-color:#aaa;--f7-input-text-color:#212121;--f7-input-placeholder-color:rgba(0, 0, 0, 0.35);--f7-label-text-color:rgba(0, 0, 0, 0.65);--f7-input-info-text-color:rgba(0, 0, 0, 0.45)}.md .theme-dark,.md.theme-dark{--f7-input-text-color:rgba(255, 255, 255, 0.87);--f7-input-placeholder-color:rgba(255, 255, 255, 0.35);--f7-label-text-color:rgba(255, 255, 255, 0.54);--f7-input-info-text-color:rgba(255, 255, 255, 0.45)}.aurora{--f7-input-height:32px;--f7-input-font-size:16px;--f7-textarea-padding-vertical:4px;--f7-label-font-size:12px;--f7-label-text-color:inherit;--f7-floating-label-scale:calc(16 / 12);--f7-inline-label-font-size:16px;--f7-inline-label-line-height:1.5;--f7-inline-label-padding-top:4px;--f7-input-clear-button-size:14px;--f7-input-outline-border-radius:8px;--f7-input-text-color:#000000;--f7-input-placeholder-color:rgba(0, 0, 0, 0.32);--f7-input-clear-button-color:rgba(0, 0, 0, 0.45);--f7-input-info-text-color:rgba(0, 0, 0, 0.5)}.aurora .theme-dark,.aurora.theme-dark{--f7-input-text-color:#fff;--f7-input-clear-button-color:rgba(255, 255, 255, 0.5);--f7-input-placeholder-color:rgba(255, 255, 255, 0.35);--f7-input-info-text-color:rgba(255, 255, 255, 0.45)}input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;box-shadow:none;border-radius:0;outline:0;display:block;padding:0;margin:0;font-family:inherit;background:0 0;resize:none;font-size:inherit;color:inherit}.textarea-resizable-shadow{opacity:0;position:absolute;z-index:-1000;pointer-events:none;left:-1000px;top:-1000px;visibility:hidden}.list input[type=date],.list input[type=datetime-local],.list input[type=email],.list input[type=month],.list input[type=number],.list input[type=password],.list input[type=search],.list input[type=tel],.list input[type=text],.list input[type=time],.list input[type=url],.list select{width:100%;height:var(--f7-input-height);color:var(--f7-input-text-color);font-size:var(--f7-input-font-size);background-color:var(--f7-input-bg-color,transparent);padding-left:var(--f7-input-padding-left);padding-right:var(--f7-input-padding-right)}.list input[type=date]::-webkit-input-placeholder,.list input[type=datetime-local]::-webkit-input-placeholder,.list input[type=email]::-webkit-input-placeholder,.list input[type=month]::-webkit-input-placeholder,.list input[type=number]::-webkit-input-placeholder,.list input[type=password]::-webkit-input-placeholder,.list input[type=search]::-webkit-input-placeholder,.list input[type=tel]::-webkit-input-placeholder,.list input[type=text]::-webkit-input-placeholder,.list input[type=time]::-webkit-input-placeholder,.list input[type=url]::-webkit-input-placeholder,.list select::-webkit-input-placeholder{color:var(--f7-input-placeholder-color)}.list input[type=date]::placeholder,.list input[type=datetime-local]::placeholder,.list input[type=email]::placeholder,.list input[type=month]::placeholder,.list input[type=number]::placeholder,.list input[type=password]::placeholder,.list input[type=search]::placeholder,.list input[type=tel]::placeholder,.list input[type=text]::placeholder,.list input[type=time]::placeholder,.list input[type=url]::placeholder,.list select::placeholder{color:var(--f7-input-placeholder-color)}.list textarea{width:100%;color:var(--f7-input-text-color);font-size:var(--f7-input-font-size);resize:none;line-height:1.4;height:var(--f7-textarea-height);background-color:var(--f7-input-bg-color,transparent);padding-top:var(--f7-textarea-padding-vertical);padding-bottom:var(--f7-textarea-padding-vertical);padding-left:var(--f7-input-padding-left);padding-right:var(--f7-input-padding-right)}.list textarea::-webkit-input-placeholder{color:var(--f7-input-placeholder-color)}.list textarea::placeholder{color:var(--f7-input-placeholder-color)}.list textarea.resizable{height:var(--f7-input-height)}.list input[type=datetime-local]{max-width:50vw}.list input[type=date],.list input[type=datetime-local],.list input[type=month],.list input[type=time]{line-height:var(--f7-input-height)}.list .item-floating-label,.list .item-label{width:100%;vertical-align:top;flex-shrink:0;font-size:var(--f7-label-font-size);font-weight:var(--f7-label-font-weight);line-height:var(--f7-label-line-height);color:var(--f7-label-text-color);transition-duration:.2s;transition-property:transform,color}.list .item-floating-label{--label-height:calc(var(--f7-label-font-size) * var(--f7-label-line-height));transform:scale(var(--f7-floating-label-scale)) translateY(calc((var(--f7-input-height)/ 2 + 50%)/ var(--f7-floating-label-scale)));color:var(--f7-input-placeholder-color);width:auto;max-width:calc(100% / var(--f7-floating-label-scale));pointer-events:none;left:var(--f7-input-padding-left);transform-origin:left center}.list .item-floating-label~.item-input-wrap input::-webkit-input-placeholder,.list .item-floating-label~.item-input-wrap textarea::-webkit-input-placeholder{opacity:0;transition-duration:.1s}.list .item-floating-label~.item-input-wrap input::placeholder,.list .item-floating-label~.item-input-wrap textarea::placeholder{opacity:0;transition-duration:.1s}.list .item-floating-label~.item-input-wrap input.input-focused::-webkit-input-placeholder,.list .item-floating-label~.item-input-wrap textarea.input-focused::-webkit-input-placeholder{opacity:1;transition-duration:.3s}.list .item-floating-label~.item-input-wrap input.input-focused::placeholder,.list .item-floating-label~.item-input-wrap textarea.input-focused::placeholder{opacity:1;transition-duration:.3s}.list .item-input-with-value .item-floating-label{color:var(--f7-label-text-color)}.list .item-input-focused .item-floating-label,.list .item-input-with-value .item-floating-label{transform:scale(1) translateY(0)}.list .item-input-wrap{width:100%;flex-shrink:1;position:relative}.item-input .item-inner{display:flex;flex-direction:column;align-items:flex-start}.input-error-message,.item-input-error-message{font-size:var(--f7-input-error-font-size);line-height:var(--f7-input-error-line-height);color:var(--f7-input-error-text-color);font-weight:var(--f7-input-error-font-weight);display:none;box-sizing:border-box}.input-info,.item-input-info{font-size:var(--f7-input-info-font-size);line-height:var(--f7-input-info-line-height);color:var(--f7-input-info-text-color)}.input-invalid .input-error-message,.input-invalid .item-input-error-message,.item-input-invalid .input-error-message,.item-input-invalid .item-input-error-message{display:block}.input-invalid .input-info,.input-invalid .item-input-info,.item-input-invalid .input-info,.item-input-invalid .item-input-info{display:none}.inline-label .item-inner,.inline-labels .item-inner{display:flex;align-items:center;flex-direction:row}.inline-label .item-floating-label,.inline-label .item-label,.inline-labels .item-floating-label,.inline-labels .item-label{padding-top:var(--f7-inline-label-padding-top);align-self:flex-start;width:35%;font-size:var(--f7-inline-label-font-size);line-height:var(--f7-inline-label-line-height)}.inline-label .item-floating-label+.item-input-wrap,.inline-label .item-label+.item-input-wrap,.inline-labels .item-floating-label+.item-input-wrap,.inline-labels .item-label+.item-input-wrap{margin-left:8px}.input{position:relative}.input input,.input select,.input textarea{width:100%}.input-clear-button{opacity:0;pointer-events:none;visibility:hidden;transition-duration:.1s;position:absolute;top:50%;border:none;padding:0;margin:0;outline:0;z-index:1;cursor:pointer;background:0 0;width:var(--f7-input-clear-button-size);height:var(--f7-input-clear-button-size);margin-top:calc(-1 * var(--f7-input-clear-button-size)/ 2);color:var(--f7-input-clear-button-color);right:0}.input-clear-button:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px}.input-clear-button:before{position:absolute;content:'';left:50%;top:50%}.item-input-wrap .input-clear-button{top:calc(var(--f7-input-height)/ 2)}.input-clear-button.active-state{opacity:.75!important}.input-with-value .input-clear-button,.input-with-value~.input-clear-button,.item-input-with-value .input-clear-button{opacity:1;pointer-events:auto;visibility:visible}.input-dropdown,.input-dropdown-wrap{position:relative}.input-dropdown-wrap:before,.input-dropdown:before{content:'';pointer-events:none;position:absolute;top:50%;margin-top:-2px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #727272;right:6px}.input-dropdown input,.input-dropdown select,.input-dropdown textarea,.input-dropdown-wrap input,.input-dropdown-wrap select,.input-dropdown-wrap textarea{padding-right:calc(20px + var(--f7-input-padding-right))}.input-outline:after,.item-input-outline .item-input-wrap:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;border:1px solid var(--f7-input-outline-border-color);border-radius:var(--f7-input-outline-border-radius);transition-duration:.2s;pointer-events:none}.input-outline.input-focused:after,.item-input-outline.item-input-focused .item-input-wrap:after{border-width:2px;border-color:var(--f7-input-outline-focused-border-color,var(--f7-theme-color))}.input-outline.input-invalid:after,.item-input-outline.item-input-invalid .item-input-wrap:after{border-width:2px;border-color:var(--f7-input-outline-invalid-border-color,var(--f7-input-error-text-color))}.input-outline input,.input-outline select,.input-outline textarea,.item-input-outline input,.item-input-outline select,.item-input-outline textarea,.list .item-input-outline input,.list .item-input-outline select,.list .item-input-outline textarea{border-radius:var(--f7-input-outline-border-radius);padding-left:var(--f7-input-outline-padding-horizontal);padding-right:var(--f7-input-outline-padding-horizontal)}.input-outline.input-dropdown:before,.item-input-outline .input-dropdown-wrap:before{right:8px}.input-outline.input-dropdown input,.input-outline.input-dropdown select,.input-outline.input-dropdown textarea,.item-input-outline .input-dropdown-wrap input,.item-input-outline .input-dropdown-wrap select,.item-input-outline .input-dropdown-wrap textarea{padding-right:20px}.input-outline .input-clear-button,.item-input-outline .input-clear-button{right:8px}.item-input-outline{--f7-input-height:var(--f7-input-outline-height)}.item-input-outline .item-inner:after{display:none!important}.item-input-outline .item-label{left:var(--f7-input-outline-padding-horizontal)}.inline-label .item-input-outline .item-label,.inline-labels .item-input-outline .item-label,.item-input-outline .inline-label .item-label,.item-input-outline .inline-label.item-label{left:0}.item-input-outline .item-floating-label{left:calc(var(--f7-input-outline-padding-horizontal) - 4px);padding-left:4px;padding-right:4px;background:var(--f7-page-bg-color);z-index:10;margin-top:calc(-.5 * (var(--f7-label-font-size) * var(--f7-label-line-height)))}.item-input-outline.item-input-focused .item-floating-label,.item-input-outline.item-input-with-value .item-floating-label{transform:scale(1) translateY(50%)}.item-input-outline .item-input-error-message,.item-input-outline .item-input-info{padding-left:var(--f7-input-outline-padding-horizontal)}.block-strong .item-input-outline .item-floating-label{background:var(--f7-block-strong-bg-color)}.list .item-input-outline .item-floating-label{background:var(--f7-list-bg-color)}.theme-dark option{background-color:var(--f7-page-bg-color)}.ios .item-floating-label+.item-input-wrap,.ios .item-label+.item-input-wrap{margin-top:0}.ios .item-input-focused .item-floating-label{color:var(--f7-label-text-color)}.ios .item-input .item-media{align-self:flex-start}.ios .item-input-wrap{margin-top:calc(-1 * var(--f7-list-item-padding-vertical));margin-bottom:calc(-1 * var(--f7-list-item-padding-vertical))}.ios .inline-label .item-floating-label+.item-input-wrap,.ios .inline-label .item-label+.item-input-wrap,.ios .inline-labels .item-floating-label+.item-input-wrap,.ios .inline-labels .item-label+.item-input-wrap{margin-top:calc(-1 * var(--f7-list-item-padding-vertical))}.ios .inline-label .item-input-wrap,.ios .inline-labels .item-input-wrap{margin-top:calc(-1 * var(--f7-list-item-padding-vertical))}.ios .input-error-message,.ios .input-info,.ios .item-input-error-message,.ios .item-input-info{position:relative;margin-bottom:6px;margin-top:-8px}.ios .item-input-focused .item-floating-label,.ios .item-input-focused .item-label{color:var(--f7-label-focused-text-color,var(--f7-label-text-color))}.ios .item-input-focused .item-inner:after{background:var(--f7-input-focused-border-color,var(--f7-list-item-border-color))}.ios .item-input-invalid .item-floating-label,.ios .item-input-invalid .item-label{color:var(--f7-label-invalid-text-color,var(--f7-label-text-color))}.ios .item-input-invalid .item-inner:after{background:var(--f7-input-invalid-border-color,var(--f7-list-item-border-color))}.ios .input-invalid input,.ios .input-invalid select,.ios .input-invalid textarea,.ios .item-input-invalid input,.ios .item-input-invalid select,.ios .item-input-invalid textarea{color:var(--f7-input-invalid-text-color,var(--f7-input-error-text-color))}.ios .input-clear-button:after{content:'delete_round_ios';font-size:calc(var(--f7-input-clear-button-size) / (14 / 10));line-height:1.4}.ios .input-clear-button:before{width:44px;height:44px;margin-left:-22px;margin-top:-22px}.ios .input-outline .item-input-wrap,.ios .item-input-outline .item-input-wrap{margin-top:0;margin-bottom:0}.ios .input-outline .input-error-message,.ios .input-outline .input-info,.ios .input-outline .item-input-error-message,.ios .input-outline .item-input-info,.ios .item-input-outline .input-error-message,.ios .item-input-outline .input-info,.ios .item-input-outline .item-input-error-message,.ios .item-input-outline .item-input-info{margin-top:0;white-space:normal;overflow:hidden;text-overflow:ellipsis}.ios .input-outline .input-info,.ios .input-outline .item-input-info,.ios .item-input-outline .input-info,.ios .item-input-outline .item-input-info{margin-bottom:calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height))}.ios .input-outline .input-error-message,.ios .input-outline .item-input-error-message,.ios .item-input-outline .input-error-message,.ios .item-input-outline .item-input-error-message{margin-bottom:calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height))}.ios .input-outline.input-with-info .item-input-wrap,.ios .input-outline.item-input-with-info .item-input-wrap,.ios .item-input-outline.input-with-info .item-input-wrap,.ios .item-input-outline.item-input-with-info .item-input-wrap{margin-bottom:calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height))}.ios .input-outline.input-with-error-message .item-input-wrap,.ios .input-outline.item-input-with-error-message .item-input-wrap,.ios .item-input-outline.input-with-error-message .item-input-wrap,.ios .item-input-outline.item-input-with-error-message .item-input-wrap{margin-bottom:calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height))}.md .input:not(.input-outline):after,.md .item-input:not(.item-input-outline) .item-input-wrap:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.md .input:not(.input-outline):after,.md .item-input:not(.item-input-outline) .item-input-wrap:after{transition-duration:.2s}.md .item-input-wrap{min-height:var(--f7-input-height)}.md .item-input .item-media{align-self:flex-end}.md .item-input .item-inner:after{display:none!important}.md .inline-label .item-media,.md .inline-labels .item-media{align-self:flex-start;padding-top:14px}.md .input-with-error-message,.md .input-with-info,.md .item-input-with-error-message,.md .item-input-with-info{padding-bottom:20px}.md .input-error-message,.md .input-info,.md .item-input-error-message,.md .item-input-info{position:absolute;top:100%;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;left:0}.md .item-input-focused .item-floating-label,.md .item-input-focused .item-label{color:var(--f7-label-focused-text-color,var(--f7-theme-color))}.md .input-focused:not(.input-outline):after,.md .item-input-focused:not(.item-input-outline) .item-input-wrap:after{background:var(--f7-input-focused-border-color,var(--f7-theme-color))}.md .input-focused:not(.input-outline):after,.md .input-invalid:not(.input-outline):after,.md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,.md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after{transform:scaleY(2)!important}.md .input-invalid:not(.input-outline):after,.md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after{background:var(--f7-input-invalid-border-color,var(--f7-input-error-text-color))}.md .item-input-invalid .item-floating-label,.md .item-input-invalid .item-label{color:var(--f7-label-invalid-text-color,var(--f7-input-error-text-color))}.md .input-invalid input,.md .input-invalid select,.md .input-invalid textarea,.md .item-input-invalid input,.md .item-input-invalid select,.md .item-input-invalid textarea{color:var(--f7-input-invalid-text-color,var(--f7-input-text-color))}.md .input-clear-button:after{font-size:calc(var(--f7-input-clear-button-size) / (24 / 20));content:'delete_round_md';line-height:1.2}.md .input-clear-button:before{width:48px;height:48px;margin-left:-24px;margin-top:-24px}.aurora .item-floating-label+.item-input-wrap,.aurora .item-label+.item-input-wrap{margin-top:0}.aurora .input:not(.input-outline):after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.aurora .input:not(.input-outline):after{transition-duration:.2s}.aurora .item-input-focused .item-floating-label{color:var(--f7-label-text-color)}.aurora .inline-label .item-media,.aurora .inline-labels .item-media{align-self:flex-start;padding-top:12px}.aurora .input-error-message,.aurora .input-info,.aurora .item-input-error-message,.aurora .item-input-info{position:relative}.aurora .input-focused:not(.input-outline):after,.aurora .input-invalid:not(.input-outline):after,.aurora .item-input-focused:not(.item-input-outline) .item-inner:after,.aurora .item-input-invalid:not(.item-input-outline) .item-inner:after{transform:scaleY(2)!important;display:block!important}.aurora .item-input-focused .item-floating-label,.aurora .item-input-focused .item-label{color:var(--f7-label-focused-text-color,var(--f7-theme-color))}.aurora .input-focused:not(.input-outline):after,.aurora .item-input-focused:not(.item-input-outline) .item-inner:after{background:var(--f7-input-focused-border-color,var(--f7-theme-color))}.aurora .item-input-invalid .item-floating-label,.aurora .item-input-invalid .item-label{color:var(--f7-label-invalid-text-color,var(--f7-input-error-text-color))}.aurora .input-invalid:not(.input-outline):after,.aurora .item-input-invalid:not(.item-input-outline) .item-inner:after{background:var(--f7-input-invalid-border-color,var(--f7-input-error-text-color))}.aurora .input-invalid input,.aurora .input-invalid select,.aurora .input-invalid textarea,.aurora .item-input-invalid input,.aurora .item-input-invalid select,.aurora .item-input-invalid textarea{color:var(--f7-input-invalid-text-color,var(--f7-input-text-color))}.aurora .input-clear-button:after{content:'delete_round_ios';font-size:calc(var(--f7-input-clear-button-size) / (14 / 10));line-height:1.4}.aurora .input-clear-button:before{width:44px;height:44px;margin-left:-22px;margin-top:-22px}.aurora .input-outline .item-input-wrap,.aurora .item-input-outline .item-input-wrap{margin-top:0;margin-bottom:0}.aurora .input-outline .input-error-message,.aurora .input-outline .input-info,.aurora .input-outline .item-input-error-message,.aurora .input-outline .item-input-info,.aurora .item-input-outline .input-error-message,.aurora .item-input-outline .input-info,.aurora .item-input-outline .item-input-error-message,.aurora .item-input-outline .item-input-info{margin-top:0;white-space:normal;overflow:hidden;text-overflow:ellipsis}.aurora .input-outline .input-info,.aurora .input-outline .item-input-info,.aurora .item-input-outline .input-info,.aurora .item-input-outline .item-input-info{margin-bottom:calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height))}.aurora .input-outline .input-error-message,.aurora .input-outline .item-input-error-message,.aurora .item-input-outline .input-error-message,.aurora .item-input-outline .item-input-error-message{margin-bottom:calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height))}.aurora .input-outline.input-with-info .item-input-wrap,.aurora .input-outline.item-input-with-info .item-input-wrap,.aurora .item-input-outline.input-with-info .item-input-wrap,.aurora .item-input-outline.item-input-with-info .item-input-wrap{margin-bottom:calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height))}.aurora .input-outline.input-with-error-message .item-input-wrap,.aurora .input-outline.item-input-with-error-message .item-input-wrap,.aurora .item-input-outline.input-with-error-message .item-input-wrap,.aurora .item-input-outline.item-input-with-error-message .item-input-wrap{margin-bottom:calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height))}
+:root{--f7-input-bg-color:transparent;--f7-label-font-weight:400;--f7-label-line-height:1.3;--f7-input-padding-left:0px;--f7-input-padding-right:0px;--f7-input-error-text-color:#ff3b30;--f7-input-error-font-size:12px;--f7-input-error-line-height:1.4;--f7-input-error-font-weight:400;--f7-input-info-font-size:12px;--f7-input-info-line-height:1.4;--f7-input-outline-height:40px;--f7-input-outline-border-radius:4px;--f7-input-outline-padding-horizontal:12px;--f7-textarea-height:100px;--f7-input-outline-border-color:#bbb}:root .dark,:root.dark{--f7-input-outline-border-color:#444}.ios{--f7-input-height:44px;--f7-input-font-size:17px;--f7-input-placeholder-color:#a9a9a9;--f7-textarea-padding-vertical:11px;--f7-label-font-size:12px;--f7-label-text-color:inherit;--f7-floating-label-scale:calc(17 / 12);--f7-inline-label-font-size:17px;--f7-inline-label-line-height:1.4;--f7-inline-label-padding-top:3px;--f7-input-clear-button-size:14px;--f7-input-text-color:#000000;--f7-input-info-text-color:rgba(0, 0, 0, 0.45);--f7-input-clear-button-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-input-text-color:#fff;--f7-input-info-text-color:rgba(255, 255, 255, 0.55);--f7-input-clear-button-color:rgba(255, 255, 255, 0.5)}.md{--f7-input-height:36px;--f7-input-font-size:16px;--f7-textarea-padding-vertical:7px;--f7-label-font-size:12px;--f7-floating-label-scale:calc(16 / 12);--f7-inline-label-font-size:16px;--f7-inline-label-line-height:1.5;--f7-inline-label-padding-top:7px;--f7-input-clear-button-size:18px;--f7-input-clear-button-color:#aaa;--f7-input-text-color:#212121;--f7-input-placeholder-color:rgba(0, 0, 0, 0.35);--f7-label-text-color:rgba(0, 0, 0, 0.65);--f7-input-info-text-color:rgba(0, 0, 0, 0.45)}.md .dark,.md.dark{--f7-input-text-color:rgba(255, 255, 255, 0.87);--f7-input-placeholder-color:rgba(255, 255, 255, 0.35);--f7-label-text-color:rgba(255, 255, 255, 0.54);--f7-input-info-text-color:rgba(255, 255, 255, 0.45)}.aurora{--f7-input-height:32px;--f7-input-font-size:16px;--f7-textarea-padding-vertical:4px;--f7-label-font-size:12px;--f7-label-text-color:inherit;--f7-floating-label-scale:calc(16 / 12);--f7-inline-label-font-size:16px;--f7-inline-label-line-height:1.5;--f7-inline-label-padding-top:4px;--f7-input-clear-button-size:14px;--f7-input-outline-border-radius:8px;--f7-input-text-color:#000000;--f7-input-placeholder-color:rgba(0, 0, 0, 0.32);--f7-input-clear-button-color:rgba(0, 0, 0, 0.45);--f7-input-info-text-color:rgba(0, 0, 0, 0.5)}.aurora .dark,.aurora.dark{--f7-input-text-color:#fff;--f7-input-clear-button-color:rgba(255, 255, 255, 0.5);--f7-input-placeholder-color:rgba(255, 255, 255, 0.35);--f7-input-info-text-color:rgba(255, 255, 255, 0.45)}input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{box-sizing:border-box;-webkit-appearance:none;appearance:none;border:none;box-shadow:none;border-radius:0;outline:0;display:block;padding:0;margin:0;font-family:inherit;background:0 0;resize:none;font-size:inherit;color:inherit}.textarea-resizable-shadow{opacity:0;position:absolute;z-index:-1000;pointer-events:none;left:-1000px;top:-1000px;visibility:hidden}.list input[type=date],.list input[type=datetime-local],.list input[type=email],.list input[type=month],.list input[type=number],.list input[type=password],.list input[type=search],.list input[type=tel],.list input[type=text],.list input[type=time],.list input[type=url],.list select{width:100%;height:var(--f7-input-height);color:var(--f7-input-text-color);font-size:var(--f7-input-font-size);background-color:var(--f7-input-bg-color,transparent);padding-left:var(--f7-input-padding-left);padding-right:var(--f7-input-padding-right)}.list input[type=date]::placeholder,.list input[type=datetime-local]::placeholder,.list input[type=email]::placeholder,.list input[type=month]::placeholder,.list input[type=number]::placeholder,.list input[type=password]::placeholder,.list input[type=search]::placeholder,.list input[type=tel]::placeholder,.list input[type=text]::placeholder,.list input[type=time]::placeholder,.list input[type=url]::placeholder,.list select::placeholder{color:var(--f7-input-placeholder-color)}.list textarea{width:100%;color:var(--f7-input-text-color);font-size:var(--f7-input-font-size);resize:none;line-height:1.4;height:var(--f7-textarea-height);background-color:var(--f7-input-bg-color,transparent);padding-top:var(--f7-textarea-padding-vertical);padding-bottom:var(--f7-textarea-padding-vertical);padding-left:var(--f7-input-padding-left);padding-right:var(--f7-input-padding-right)}.list textarea::placeholder{color:var(--f7-input-placeholder-color)}.list textarea.resizable{height:var(--f7-input-height)}.list input[type=datetime-local]{max-width:50vw}.list input[type=date],.list input[type=datetime-local],.list input[type=month],.list input[type=time]{line-height:var(--f7-input-height)}.list .item-floating-label,.list .item-label{width:100%;vertical-align:top;flex-shrink:0;font-size:var(--f7-label-font-size);font-weight:var(--f7-label-font-weight);line-height:var(--f7-label-line-height);color:var(--f7-label-text-color);transition-duration:.2s;transition-property:transform,color}.list .item-floating-label{--label-height:calc(var(--f7-label-font-size) * var(--f7-label-line-height));transform:scale(var(--f7-floating-label-scale)) translateY(calc((var(--f7-input-height)/ 2 + 50%)/ var(--f7-floating-label-scale)));color:var(--f7-input-placeholder-color);width:auto;max-width:calc(100% / var(--f7-floating-label-scale));pointer-events:none;left:var(--f7-input-padding-left);transform-origin:left center}.list .item-floating-label~.item-input-wrap input::placeholder,.list .item-floating-label~.item-input-wrap textarea::placeholder{opacity:0;transition-duration:.1s}.list .item-floating-label~.item-input-wrap input.input-focused::placeholder,.list .item-floating-label~.item-input-wrap textarea.input-focused::placeholder{opacity:1;transition-duration:.3s}.list .item-input-with-value .item-floating-label{color:var(--f7-label-text-color)}.list .item-input-focused .item-floating-label,.list .item-input-with-value .item-floating-label{transform:scale(1) translateY(0)}.list .item-input-wrap{width:100%;flex-shrink:1;position:relative}.item-input .item-inner{display:flex;flex-direction:column;align-items:flex-start}.input-error-message,.item-input-error-message{font-size:var(--f7-input-error-font-size);line-height:var(--f7-input-error-line-height);color:var(--f7-input-error-text-color);font-weight:var(--f7-input-error-font-weight);display:none;box-sizing:border-box}.input-info,.item-input-info{font-size:var(--f7-input-info-font-size);line-height:var(--f7-input-info-line-height);color:var(--f7-input-info-text-color)}.input-invalid .input-error-message,.input-invalid .item-input-error-message,.item-input-invalid .input-error-message,.item-input-invalid .item-input-error-message{display:block}.input-invalid .input-info,.input-invalid .item-input-info,.item-input-invalid .input-info,.item-input-invalid .item-input-info{display:none}.inline-label .item-inner,.inline-labels .item-inner{display:flex;align-items:center;flex-direction:row}.inline-label .item-floating-label,.inline-label .item-label,.inline-labels .item-floating-label,.inline-labels .item-label{padding-top:var(--f7-inline-label-padding-top);align-self:flex-start;width:35%;font-size:var(--f7-inline-label-font-size);line-height:var(--f7-inline-label-line-height)}.inline-label .item-floating-label+.item-input-wrap,.inline-label .item-label+.item-input-wrap,.inline-labels .item-floating-label+.item-input-wrap,.inline-labels .item-label+.item-input-wrap{margin-left:8px}.input{position:relative}.input input,.input select,.input textarea{width:100%}.input-clear-button{opacity:0;pointer-events:none;visibility:hidden;transition-duration:.1s;position:absolute;top:50%;border:none;padding:0;margin:0;outline:0;z-index:1;cursor:pointer;background:0 0;width:var(--f7-input-clear-button-size);height:var(--f7-input-clear-button-size);margin-top:calc(-1 * var(--f7-input-clear-button-size)/ 2);color:var(--f7-input-clear-button-color);right:0}.input-clear-button:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px}.input-clear-button:before{position:absolute;content:'';left:50%;top:50%}.item-input-wrap .input-clear-button{top:calc(var(--f7-input-height)/ 2)}.input-clear-button.active-state{opacity:.75!important}.input-with-value .input-clear-button,.input-with-value~.input-clear-button,.item-input-with-value .input-clear-button{opacity:1;pointer-events:auto;visibility:visible}.input-dropdown,.input-dropdown-wrap{position:relative}.input-dropdown-wrap:before,.input-dropdown:before{content:'';pointer-events:none;position:absolute;top:50%;margin-top:-2px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #727272;right:6px}.input-dropdown input,.input-dropdown select,.input-dropdown textarea,.input-dropdown-wrap input,.input-dropdown-wrap select,.input-dropdown-wrap textarea{padding-right:calc(20px + var(--f7-input-padding-right))}.input-outline:after,.item-input-outline .item-input-wrap:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;border:1px solid var(--f7-input-outline-border-color);border-radius:var(--f7-input-outline-border-radius);transition-duration:.2s;pointer-events:none}.input-outline.input-focused:after,.item-input-outline.item-input-focused .item-input-wrap:after{border-width:2px;border-color:var(--f7-input-outline-focused-border-color,var(--f7-theme-color))}.input-outline.input-invalid:after,.item-input-outline.item-input-invalid .item-input-wrap:after{border-width:2px;border-color:var(--f7-input-outline-invalid-border-color,var(--f7-input-error-text-color))}.input-outline input,.input-outline select,.input-outline textarea,.item-input-outline input,.item-input-outline select,.item-input-outline textarea,.list .item-input-outline input,.list .item-input-outline select,.list .item-input-outline textarea{border-radius:var(--f7-input-outline-border-radius);padding-left:var(--f7-input-outline-padding-horizontal);padding-right:var(--f7-input-outline-padding-horizontal)}.input-outline.input-dropdown:before,.item-input-outline .input-dropdown-wrap:before{right:8px}.input-outline.input-dropdown input,.input-outline.input-dropdown select,.input-outline.input-dropdown textarea,.item-input-outline .input-dropdown-wrap input,.item-input-outline .input-dropdown-wrap select,.item-input-outline .input-dropdown-wrap textarea{padding-right:20px}.input-outline .input-clear-button,.item-input-outline .input-clear-button{right:8px}.item-input-outline{--f7-input-height:var(--f7-input-outline-height)}.item-input-outline .item-inner:after{display:none!important}.item-input-outline .item-label{left:var(--f7-input-outline-padding-horizontal)}.inline-label .item-input-outline .item-label,.inline-labels .item-input-outline .item-label,.item-input-outline .inline-label .item-label,.item-input-outline .inline-label.item-label{left:0}.item-input-outline .item-floating-label{left:calc(var(--f7-input-outline-padding-horizontal) - 4px);padding-left:4px;padding-right:4px;background:var(--f7-page-bg-color);z-index:10;margin-top:calc(-.5 * (var(--f7-label-font-size) * var(--f7-label-line-height)))}.item-input-outline.item-input-focused .item-floating-label,.item-input-outline.item-input-with-value .item-floating-label{transform:scale(1) translateY(50%)}.item-input-outline .item-input-error-message,.item-input-outline .item-input-info{padding-left:var(--f7-input-outline-padding-horizontal)}.block-strong .item-input-outline .item-floating-label{background:var(--f7-block-strong-bg-color)}.list .item-input-outline .item-floating-label{background:var(--f7-list-bg-color)}.dark option{background-color:var(--f7-page-bg-color)}.ios .item-floating-label+.item-input-wrap,.ios .item-label+.item-input-wrap{margin-top:0}.ios .item-input-focused .item-floating-label{color:var(--f7-label-text-color)}.ios .item-input .item-media{align-self:flex-start}.ios .item-input-wrap{margin-top:calc(-1 * var(--f7-list-item-padding-vertical));margin-bottom:calc(-1 * var(--f7-list-item-padding-vertical))}.ios .inline-label .item-floating-label+.item-input-wrap,.ios .inline-label .item-label+.item-input-wrap,.ios .inline-labels .item-floating-label+.item-input-wrap,.ios .inline-labels .item-label+.item-input-wrap{margin-top:calc(-1 * var(--f7-list-item-padding-vertical))}.ios .inline-label .item-input-wrap,.ios .inline-labels .item-input-wrap{margin-top:calc(-1 * var(--f7-list-item-padding-vertical))}.ios .input-error-message,.ios .input-info,.ios .item-input-error-message,.ios .item-input-info{position:relative;margin-bottom:6px;margin-top:-8px}.ios .item-input-focused .item-floating-label,.ios .item-input-focused .item-label{color:var(--f7-label-focused-text-color,var(--f7-label-text-color))}.ios .item-input-focused .item-inner:after{background:var(--f7-input-focused-border-color,var(--f7-list-item-border-color))}.ios .item-input-invalid .item-floating-label,.ios .item-input-invalid .item-label{color:var(--f7-label-invalid-text-color,var(--f7-label-text-color))}.ios .item-input-invalid .item-inner:after{background:var(--f7-input-invalid-border-color,var(--f7-list-item-border-color))}.ios .input-invalid input,.ios .input-invalid select,.ios .input-invalid textarea,.ios .item-input-invalid input,.ios .item-input-invalid select,.ios .item-input-invalid textarea{color:var(--f7-input-invalid-text-color,var(--f7-input-error-text-color))}.ios .input-clear-button:after{content:'delete_round_ios';font-size:calc(var(--f7-input-clear-button-size) / (14 / 10));line-height:1.4}.ios .input-clear-button:before{width:44px;height:44px;margin-left:-22px;margin-top:-22px}.ios .input-outline .item-input-wrap,.ios .item-input-outline .item-input-wrap{margin-top:0;margin-bottom:0}.ios .input-outline .input-error-message,.ios .input-outline .input-info,.ios .input-outline .item-input-error-message,.ios .input-outline .item-input-info,.ios .item-input-outline .input-error-message,.ios .item-input-outline .input-info,.ios .item-input-outline .item-input-error-message,.ios .item-input-outline .item-input-info{margin-top:0;white-space:normal;overflow:hidden;text-overflow:ellipsis}.ios .input-outline .input-info,.ios .input-outline .item-input-info,.ios .item-input-outline .input-info,.ios .item-input-outline .item-input-info{margin-bottom:calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height))}.ios .input-outline .input-error-message,.ios .input-outline .item-input-error-message,.ios .item-input-outline .input-error-message,.ios .item-input-outline .item-input-error-message{margin-bottom:calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height))}.ios .input-outline.input-with-info .item-input-wrap,.ios .input-outline.item-input-with-info .item-input-wrap,.ios .item-input-outline.input-with-info .item-input-wrap,.ios .item-input-outline.item-input-with-info .item-input-wrap{margin-bottom:calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height))}.ios .input-outline.input-with-error-message .item-input-wrap,.ios .input-outline.item-input-with-error-message .item-input-wrap,.ios .item-input-outline.input-with-error-message .item-input-wrap,.ios .item-input-outline.item-input-with-error-message .item-input-wrap{margin-bottom:calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height))}.md .input:not(.input-outline):after,.md .item-input:not(.item-input-outline) .item-input-wrap:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.md .input:not(.input-outline):after,.md .item-input:not(.item-input-outline) .item-input-wrap:after{transition-duration:.2s}.md .item-input-wrap{min-height:var(--f7-input-height)}.md .item-input .item-media{align-self:flex-end}.md .item-input .item-inner:after{display:none!important}.md .inline-label .item-media,.md .inline-labels .item-media{align-self:flex-start;padding-top:14px}.md .input-with-error-message,.md .input-with-info,.md .item-input-with-error-message,.md .item-input-with-info{padding-bottom:20px}.md .input-error-message,.md .input-info,.md .item-input-error-message,.md .item-input-info{position:absolute;top:100%;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;left:0}.md .item-input-focused .item-floating-label,.md .item-input-focused .item-label{color:var(--f7-label-focused-text-color,var(--f7-theme-color))}.md .input-focused:not(.input-outline):after,.md .item-input-focused:not(.item-input-outline) .item-input-wrap:after{background:var(--f7-input-focused-border-color,var(--f7-theme-color))}.md .input-focused:not(.input-outline):after,.md .input-invalid:not(.input-outline):after,.md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,.md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after{transform:scaleY(2)!important}.md .input-invalid:not(.input-outline):after,.md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after{background:var(--f7-input-invalid-border-color,var(--f7-input-error-text-color))}.md .item-input-invalid .item-floating-label,.md .item-input-invalid .item-label{color:var(--f7-label-invalid-text-color,var(--f7-input-error-text-color))}.md .input-invalid input,.md .input-invalid select,.md .input-invalid textarea,.md .item-input-invalid input,.md .item-input-invalid select,.md .item-input-invalid textarea{color:var(--f7-input-invalid-text-color,var(--f7-input-text-color))}.md .input-clear-button:after{font-size:calc(var(--f7-input-clear-button-size) / (24 / 20));content:'delete_round_md';line-height:1.2}.md .input-clear-button:before{width:48px;height:48px;margin-left:-24px;margin-top:-24px}.aurora .item-floating-label+.item-input-wrap,.aurora .item-label+.item-input-wrap{margin-top:0}.aurora .input:not(.input-outline):after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.aurora .input:not(.input-outline):after{transition-duration:.2s}.aurora .item-input-focused .item-floating-label{color:var(--f7-label-text-color)}.aurora .inline-label .item-media,.aurora .inline-labels .item-media{align-self:flex-start;padding-top:12px}.aurora .input-error-message,.aurora .input-info,.aurora .item-input-error-message,.aurora .item-input-info{position:relative}.aurora .input-focused:not(.input-outline):after,.aurora .input-invalid:not(.input-outline):after,.aurora .item-input-focused:not(.item-input-outline) .item-inner:after,.aurora .item-input-invalid:not(.item-input-outline) .item-inner:after{transform:scaleY(2)!important;display:block!important}.aurora .item-input-focused .item-floating-label,.aurora .item-input-focused .item-label{color:var(--f7-label-focused-text-color,var(--f7-theme-color))}.aurora .input-focused:not(.input-outline):after,.aurora .item-input-focused:not(.item-input-outline) .item-inner:after{background:var(--f7-input-focused-border-color,var(--f7-theme-color))}.aurora .item-input-invalid .item-floating-label,.aurora .item-input-invalid .item-label{color:var(--f7-label-invalid-text-color,var(--f7-input-error-text-color))}.aurora .input-invalid:not(.input-outline):after,.aurora .item-input-invalid:not(.item-input-outline) .item-inner:after{background:var(--f7-input-invalid-border-color,var(--f7-input-error-text-color))}.aurora .input-invalid input,.aurora .input-invalid select,.aurora .input-invalid textarea,.aurora .item-input-invalid input,.aurora .item-input-invalid select,.aurora .item-input-invalid textarea{color:var(--f7-input-invalid-text-color,var(--f7-input-text-color))}.aurora .input-clear-button:after{content:'delete_round_ios';font-size:calc(var(--f7-input-clear-button-size) / (14 / 10));line-height:1.4}.aurora .input-clear-button:before{width:44px;height:44px;margin-left:-22px;margin-top:-22px}.aurora .input-outline .item-input-wrap,.aurora .item-input-outline .item-input-wrap{margin-top:0;margin-bottom:0}.aurora .input-outline .input-error-message,.aurora .input-outline .input-info,.aurora .input-outline .item-input-error-message,.aurora .input-outline .item-input-info,.aurora .item-input-outline .input-error-message,.aurora .item-input-outline .input-info,.aurora .item-input-outline .item-input-error-message,.aurora .item-input-outline .item-input-info{margin-top:0;white-space:normal;overflow:hidden;text-overflow:ellipsis}.aurora .input-outline .input-info,.aurora .input-outline .item-input-info,.aurora .item-input-outline .input-info,.aurora .item-input-outline .item-input-info{margin-bottom:calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height))}.aurora .input-outline .input-error-message,.aurora .input-outline .item-input-error-message,.aurora .item-input-outline .input-error-message,.aurora .item-input-outline .item-input-error-message{margin-bottom:calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height))}.aurora .input-outline.input-with-info .item-input-wrap,.aurora .input-outline.item-input-with-info .item-input-wrap,.aurora .item-input-outline.input-with-info .item-input-wrap,.aurora .item-input-outline.item-input-with-info .item-input-wrap{margin-bottom:calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height))}.aurora .input-outline.input-with-error-message .item-input-wrap,.aurora .input-outline.item-input-with-error-message .item-input-wrap,.aurora .item-input-outline.input-with-error-message .item-input-wrap,.aurora .item-input-outline.item-input-with-error-message .item-input-wrap{margin-bottom:calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height))}

package/components/input/input.js

@@ -1 +1,394 @@
-(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var a=t.$,i=t.utils,n=t.getDevice,r=(t.getSupport,t.Class,t.Modal,t.ConstructorMethods,t.ModalMethods,i.bindMethods),s={ignoreTypes:["checkbox","button","submit","range","radio","image"],createTextareaResizableShadow:function(){var t=a(document.createElement("textarea"));t.addClass("textarea-resizable-shadow"),t.prop({disabled:!0,readonly:!0}),s.textareaResizableShadow=t},textareaResizableShadow:void 0,resizeTextarea:function(t){var e=a(t);s.textareaResizableShadow||s.createTextareaResizableShadow();var i=s.textareaResizableShadow;if(e.length&&e.hasClass("resizable")){0===s.textareaResizableShadow.parents().length&&this.$el.append(i);var n=window.getComputedStyle(e[0]);"padding-top padding-bottom padding-left padding-right margin-left margin-right margin-top margin-bottom width font-size font-family font-style font-weight line-height font-variant text-transform letter-spacing border box-sizing display".split(" ").forEach((function(t){var e=n[t];"font-size line-height letter-spacing width".split(" ").indexOf(t)>=0&&(e=e.replace(",",".")),i.css(t,e)}));var r=e[0].clientHeight;i.val("");var o=i[0].scrollHeight;i.val(e.val()),i.css("height",0);var l=i[0].scrollHeight;r!==l&&(l>o?e.css("height",l+"px"):l<r&&e.css("height",""),(l>o||l<r)&&(e.trigger("textarea:resize",{initialHeight:o,currentHeight:r,scrollHeight:l}),this.emit("textareaResize",{initialHeight:o,currentHeight:r,scrollHeight:l})))}},validate:function(t){var e=a(t);if(!e.length)return!0;var i=e.parents(".item-input"),n=e.parents(".input");function r(){e[0].f7ValidateReadonly&&(e[0].readOnly=!0)}e[0].f7ValidateReadonly&&(e[0].readOnly=!1);var s=e[0].validity,o=e.dataset().errorMessage||e[0].validationMessage||"";if(!s)return r(),!0;if(!s.valid){var l=e.nextAll(".item-input-error-message, .input-error-message");return o&&(0===l.length&&(l=a('<div class="'+(n.length?"input-error-message":"item-input-error-message")+'"></div>')).insertAfter(e),l.text(o)),l.length>0&&(i.addClass("item-input-with-error-message"),n.addClass("input-with-error-message")),i.addClass("item-input-invalid"),n.addClass("input-invalid"),e.addClass("input-invalid"),r(),!1}return i.removeClass("item-input-invalid item-input-with-error-message"),n.removeClass("input-invalid input-with-error-message"),e.removeClass("input-invalid"),r(),!0},validateInputs:function(t){var e=this;return a(t).find("input, textarea, select").map((function(t){return e.input.validate(t)})).indexOf(!1)<0},focus:function(t){var e=a(t),i=e.attr("type");s.ignoreTypes.indexOf(i)>=0||(e.parents(".item-input").addClass("item-input-focused"),e.parents(".input").addClass("input-focused"),e.addClass("input-focused"))},blur:function(t){var e=a(t);e.parents(".item-input").removeClass("item-input-focused"),e.parents(".input").removeClass("input-focused"),e.removeClass("input-focused")},checkEmptyState:function(t){var e=a(t);if(e.is("input, select, textarea, .item-input [contenteditable]")||(e=e.find("input, select, textarea, .item-input [contenteditable]").eq(0)),e.length){var i;i=e[0].hasAttribute("contenteditable")?e.find(".text-editor-placeholder").length?"":e.html():e.val();var n=e.parents(".item-input"),r=e.parents(".input");i&&"string"==typeof i&&""!==i.trim()||Array.isArray(i)&&i.length>0?(n.addClass("item-input-with-value"),r.addClass("input-with-value"),e.addClass("input-with-value"),e.trigger("input:notempty"),this.emit("inputNotEmpty",e[0])):(n.removeClass("item-input-with-value"),r.removeClass("input-with-value"),e.removeClass("input-with-value"),e.trigger("input:empty"),this.emit("inputEmpty",e[0]))}},scrollIntoView:function(t,e,i,n){void 0===e&&(e=0);var r=a(t),s=r.parents(".page-content, .panel, .card-expandable .card-content").eq(0);if(!s.length)return!1;var o=s[0].offsetHeight,l=s[0].scrollTop,u=parseInt(s.css("padding-top"),10),p=parseInt(s.css("padding-bottom"),10),d=s.offset().top-l,c=r.offset().top-d,h=c+l-u,m=c+l-o+p+r[0].offsetHeight,f=h+(m-h)/2;return l>h?(s.scrollTop(i?f:h,e),!0):l<m?(s.scrollTop(i?f:m,e),!0):(n&&s.scrollTop(i?f:m,e),!1)},init:function(){var t=this,e=n();s.createTextareaResizableShadow(),a(document).on("click",".input-clear-button",(function(){var e=a(this).siblings("input, textarea").eq(0),i=e.val();e.val("").trigger("input change").focus().trigger("input:clear",i),t.emit("inputClear",i)})),a(document).on("mousedown",".input-clear-button",(function(t){t.preventDefault()})),a(document).on("change input","input, textarea, select, .item-input [contenteditable]",(function(){var e=a(this),i=e.attr("type"),n=e[0].nodeName.toLowerCase(),r=e[0].hasAttribute("contenteditable");s.ignoreTypes.indexOf(i)>=0||(t.input.checkEmptyState(e),r||(null!==e.attr("data-validate-on-blur")||!e.dataset().validate&&null===e.attr("validate")||t.input.validate(e),"textarea"===n&&e.hasClass("resizable")&&t.input.resizeTextarea(e)))}),!0),a(document).on("focus","input, textarea, select, .item-input [contenteditable]",(function(){var i=this;t.params.input.scrollIntoViewOnFocus&&(e.android?a(window).once("resize",(function(){document&&document.activeElement===i&&t.input.scrollIntoView(i,t.params.input.scrollIntoViewDuration,t.params.input.scrollIntoViewCentered,t.params.input.scrollIntoViewAlways)})):t.input.scrollIntoView(i,t.params.input.scrollIntoViewDuration,t.params.input.scrollIntoViewCentered,t.params.input.scrollIntoViewAlways)),t.input.focus(i)}),!0),a(document).on("blur","input, textarea, select, .item-input [contenteditable]",(function(){var e=a(this),i=e[0].nodeName.toLowerCase();t.input.blur(e),(e.dataset().validate||null!==e.attr("validate")||null!==e.attr("data-validate-on-blur"))&&t.input.validate(e),"textarea"===i&&e.hasClass("resizable")&&s.textareaResizableShadow&&s.textareaResizableShadow.remove()}),!0),a(document).on("invalid","input, textarea, select",(function(e){var i=a(this);null!==i.attr("data-validate-on-blur")||!i.dataset().validate&&null===i.attr("validate")||(e.preventDefault(),t.input.validate(i))}),!0)}},o={name:"input",params:{input:{scrollIntoViewOnFocus:void 0,scrollIntoViewCentered:!1,scrollIntoViewDuration:0,scrollIntoViewAlways:!1}},create:function(){var t=this;void 0===t.params.input.scrollIntoViewOnFocus&&(t.params.input.scrollIntoViewOnFocus=n().android),r(t,{input:s})},on:{init:function(){this.input.init()},tabMounted:function(t){var e=this,i=a(t);i.find(".item-input, .input").each((function(t){a(t).find("input, select, textarea, [contenteditable]").each((function(t){var i=a(t);s.ignoreTypes.indexOf(i.attr("type"))>=0||e.input.checkEmptyState(i)}))})),i.find("textarea.resizable").each((function(t){e.input.resizeTextarea(t)}))},pageInit:function(t){var e=this,i=t.$el;i.find(".item-input, .input").each((function(t){a(t).find("input, select, textarea, [contenteditable]").each((function(t){var i=a(t);s.ignoreTypes.indexOf(i.attr("type"))>=0||e.input.checkEmptyState(i)}))})),i.find("textarea.resizable").each((function(t){e.input.resizeTextarea(t)}))},"panelBreakpoint panelCollapsedBreakpoint panelResize panelOpen panelSwipeOpen resize viewMasterDetailBreakpoint":function(t){var e=this;t&&t.$el?t.$el.find("textarea.resizable").each((function(t){e.input.resizeTextarea(t)})):a("textarea.resizable").each((function(t){e.input.resizeTextarea(t)}))}}};if(e){if(t.prototype.modules&&t.prototype.modules[o.name])return;t.use(o),t.instance&&(t.instance.useModuleParams(o,t.instance.params),t.instance.useModule(o))}return o}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import { getWindow, getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { bindMethods } from '../../shared/utils.js';
+import { getDevice } from '../../shared/get-device.js';
+const Input = {
+  ignoreTypes: ['checkbox', 'button', 'submit', 'range', 'radio', 'image'],
+
+  createTextareaResizableShadow() {
+    const document = getDocument();
+    const $shadowEl = $(document.createElement('textarea'));
+    $shadowEl.addClass('textarea-resizable-shadow');
+    $shadowEl.prop({
+      disabled: true,
+      readonly: true
+    });
+    Input.textareaResizableShadow = $shadowEl;
+  },
+
+  textareaResizableShadow: undefined,
+
+  resizeTextarea(textareaEl) {
+    const app = this;
+    const window = getWindow();
+    const $textareaEl = $(textareaEl);
+
+    if (!Input.textareaResizableShadow) {
+      Input.createTextareaResizableShadow();
+    }
+
+    const $shadowEl = Input.textareaResizableShadow;
+    if (!$textareaEl.length) return;
+    if (!$textareaEl.hasClass('resizable')) return;
+
+    if (Input.textareaResizableShadow.parents().length === 0) {
+      app.$el.append($shadowEl);
+    }
+
+    const styles = window.getComputedStyle($textareaEl[0]);
+    'padding-top padding-bottom padding-left padding-right margin-left margin-right margin-top margin-bottom width font-size font-family font-style font-weight line-height font-variant text-transform letter-spacing border box-sizing display'.split(' ').forEach(style => {
+      let styleValue = styles[style];
+
+      if ('font-size line-height letter-spacing width'.split(' ').indexOf(style) >= 0) {
+        styleValue = styleValue.replace(',', '.');
+      }
+
+      $shadowEl.css(style, styleValue);
+    });
+    const currentHeight = $textareaEl[0].clientHeight;
+    $shadowEl.val('');
+    const initialHeight = $shadowEl[0].scrollHeight;
+    $shadowEl.val($textareaEl.val());
+    $shadowEl.css('height', 0);
+    const scrollHeight = $shadowEl[0].scrollHeight;
+
+    if (currentHeight !== scrollHeight) {
+      if (scrollHeight > initialHeight) {
+        $textareaEl.css('height', `${scrollHeight}px`);
+      } else if (scrollHeight < currentHeight) {
+        $textareaEl.css('height', '');
+      }
+
+      if (scrollHeight > initialHeight || scrollHeight < currentHeight) {
+        $textareaEl.trigger('textarea:resize', {
+          initialHeight,
+          currentHeight,
+          scrollHeight
+        });
+        app.emit('textareaResize', {
+          initialHeight,
+          currentHeight,
+          scrollHeight
+        });
+      }
+    }
+  },
+
+  validate(inputEl) {
+    const $inputEl = $(inputEl);
+    if (!$inputEl.length) return true;
+    const $itemInputEl = $inputEl.parents('.item-input');
+    const $inputWrapEl = $inputEl.parents('.input');
+
+    function unsetReadonly() {
+      if ($inputEl[0].f7ValidateReadonly) {
+        $inputEl[0].readOnly = false;
+      }
+    }
+
+    function setReadonly() {
+      if ($inputEl[0].f7ValidateReadonly) {
+        $inputEl[0].readOnly = true;
+      }
+    }
+
+    unsetReadonly();
+    const validity = $inputEl[0].validity;
+    const validationMessage = $inputEl.dataset().errorMessage || $inputEl[0].validationMessage || '';
+
+    if (!validity) {
+      setReadonly();
+      return true;
+    }
+
+    if (!validity.valid) {
+      let $errorEl = $inputEl.nextAll('.item-input-error-message, .input-error-message');
+
+      if (validationMessage) {
+        if ($errorEl.length === 0) {
+          $errorEl = $(`<div class="${$inputWrapEl.length ? 'input-error-message' : 'item-input-error-message'}"></div>`);
+          $errorEl.insertAfter($inputEl);
+        }
+
+        $errorEl.text(validationMessage);
+      }
+
+      if ($errorEl.length > 0) {
+        $itemInputEl.addClass('item-input-with-error-message');
+        $inputWrapEl.addClass('input-with-error-message');
+      }
+
+      $itemInputEl.addClass('item-input-invalid');
+      $inputWrapEl.addClass('input-invalid');
+      $inputEl.addClass('input-invalid');
+      setReadonly();
+      return false;
+    }
+
+    $itemInputEl.removeClass('item-input-invalid item-input-with-error-message');
+    $inputWrapEl.removeClass('input-invalid input-with-error-message');
+    $inputEl.removeClass('input-invalid');
+    setReadonly();
+    return true;
+  },
+
+  validateInputs(el) {
+    const app = this;
+    const validates = $(el).find('input, textarea, select').map(inputEl => app.input.validate(inputEl));
+    return validates.indexOf(false) < 0;
+  },
+
+  focus(inputEl) {
+    const $inputEl = $(inputEl);
+    const type = $inputEl.attr('type');
+    if (Input.ignoreTypes.indexOf(type) >= 0) return;
+    $inputEl.parents('.item-input').addClass('item-input-focused');
+    $inputEl.parents('.input').addClass('input-focused');
+    $inputEl.addClass('input-focused');
+  },
+
+  blur(inputEl) {
+    const $inputEl = $(inputEl);
+    $inputEl.parents('.item-input').removeClass('item-input-focused');
+    $inputEl.parents('.input').removeClass('input-focused');
+    $inputEl.removeClass('input-focused');
+  },
+
+  checkEmptyState(inputEl) {
+    const app = this;
+    let $inputEl = $(inputEl);
+
+    if (!$inputEl.is('input, select, textarea, .item-input [contenteditable]')) {
+      $inputEl = $inputEl.find('input, select, textarea, .item-input [contenteditable]').eq(0);
+    }
+
+    if (!$inputEl.length) return;
+    const isContentEditable = $inputEl[0].hasAttribute('contenteditable');
+    let value;
+
+    if (isContentEditable) {
+      if ($inputEl.find('.text-editor-placeholder').length) value = '';else value = $inputEl.html();
+    } else {
+      value = $inputEl.val();
+    }
+
+    const $itemInputEl = $inputEl.parents('.item-input');
+    const $inputWrapEl = $inputEl.parents('.input');
+
+    if (value && typeof value === 'string' && value.trim() !== '' || Array.isArray(value) && value.length > 0) {
+      $itemInputEl.addClass('item-input-with-value');
+      $inputWrapEl.addClass('input-with-value');
+      $inputEl.addClass('input-with-value');
+      $inputEl.trigger('input:notempty');
+      app.emit('inputNotEmpty', $inputEl[0]);
+    } else {
+      $itemInputEl.removeClass('item-input-with-value');
+      $inputWrapEl.removeClass('input-with-value');
+      $inputEl.removeClass('input-with-value');
+      $inputEl.trigger('input:empty');
+      app.emit('inputEmpty', $inputEl[0]);
+    }
+  },
+
+  scrollIntoView(inputEl, duration = 0, centered, force) {
+    const $inputEl = $(inputEl);
+    const $scrollableEl = $inputEl.parents('.page-content, .panel, .card-expandable .card-content').eq(0);
+
+    if (!$scrollableEl.length) {
+      return false;
+    }
+
+    const contentHeight = $scrollableEl[0].offsetHeight;
+    const contentScrollTop = $scrollableEl[0].scrollTop;
+    const contentPaddingTop = parseInt($scrollableEl.css('padding-top'), 10);
+    const contentPaddingBottom = parseInt($scrollableEl.css('padding-bottom'), 10);
+    const contentOffsetTop = $scrollableEl.offset().top - contentScrollTop;
+    const inputOffsetTop = $inputEl.offset().top - contentOffsetTop;
+    const inputHeight = $inputEl[0].offsetHeight;
+    const min = inputOffsetTop + contentScrollTop - contentPaddingTop;
+    const max = inputOffsetTop + contentScrollTop - contentHeight + contentPaddingBottom + inputHeight;
+    const centeredPosition = min + (max - min) / 2;
+
+    if (contentScrollTop > min) {
+      $scrollableEl.scrollTop(centered ? centeredPosition : min, duration);
+      return true;
+    }
+
+    if (contentScrollTop < max) {
+      $scrollableEl.scrollTop(centered ? centeredPosition : max, duration);
+      return true;
+    }
+
+    if (force) {
+      $scrollableEl.scrollTop(centered ? centeredPosition : max, duration);
+    }
+
+    return false;
+  },
+
+  init() {
+    const app = this;
+    const device = getDevice();
+    const window = getWindow();
+    const document = getDocument();
+    Input.createTextareaResizableShadow();
+
+    function onFocus() {
+      const inputEl = this;
+
+      if (app.params.input.scrollIntoViewOnFocus) {
+        if (device.android) {
+          $(window).once('resize', () => {
+            if (document && document.activeElement === inputEl) {
+              app.input.scrollIntoView(inputEl, app.params.input.scrollIntoViewDuration, app.params.input.scrollIntoViewCentered, app.params.input.scrollIntoViewAlways);
+            }
+          });
+        } else {
+          app.input.scrollIntoView(inputEl, app.params.input.scrollIntoViewDuration, app.params.input.scrollIntoViewCentered, app.params.input.scrollIntoViewAlways);
+        }
+      }
+
+      app.input.focus(inputEl);
+    }
+
+    function onBlur() {
+      const $inputEl = $(this);
+      const tag = $inputEl[0].nodeName.toLowerCase();
+      app.input.blur($inputEl);
+
+      if ($inputEl.dataset().validate || $inputEl.attr('validate') !== null || $inputEl.attr('data-validate-on-blur') !== null) {
+        app.input.validate($inputEl);
+      } // Resize textarea
+
+
+      if (tag === 'textarea' && $inputEl.hasClass('resizable')) {
+        if (Input.textareaResizableShadow) Input.textareaResizableShadow.remove();
+      }
+    }
+
+    function onChange() {
+      const $inputEl = $(this);
+      const type = $inputEl.attr('type');
+      const tag = $inputEl[0].nodeName.toLowerCase();
+      const isContentEditable = $inputEl[0].hasAttribute('contenteditable');
+      if (Input.ignoreTypes.indexOf(type) >= 0) return; // Check Empty State
+
+      app.input.checkEmptyState($inputEl);
+      if (isContentEditable) return; // Check validation
+
+      if ($inputEl.attr('data-validate-on-blur') === null && ($inputEl.dataset().validate || $inputEl.attr('validate') !== null)) {
+        app.input.validate($inputEl);
+      } // Resize textarea
+
+
+      if (tag === 'textarea' && $inputEl.hasClass('resizable')) {
+        app.input.resizeTextarea($inputEl);
+      }
+    }
+
+    function onInvalid(e) {
+      const $inputEl = $(this);
+
+      if ($inputEl.attr('data-validate-on-blur') === null && ($inputEl.dataset().validate || $inputEl.attr('validate') !== null)) {
+        e.preventDefault();
+        app.input.validate($inputEl);
+      }
+    }
+
+    function clearInput() {
+      const $clicked = $(this);
+      const $inputEl = $clicked.siblings('input, textarea').eq(0);
+      const previousValue = $inputEl.val();
+      $inputEl.val('').trigger('input change').focus().trigger('input:clear', previousValue);
+      app.emit('inputClear', previousValue);
+    }
+
+    function preventDefault(e) {
+      e.preventDefault();
+    }
+
+    $(document).on('click', '.input-clear-button', clearInput);
+    $(document).on('mousedown', '.input-clear-button', preventDefault);
+    $(document).on('change input', 'input, textarea, select, .item-input [contenteditable]', onChange, true);
+    $(document).on('focus', 'input, textarea, select, .item-input [contenteditable]', onFocus, true);
+    $(document).on('blur', 'input, textarea, select, .item-input [contenteditable]', onBlur, true);
+    $(document).on('invalid', 'input, textarea, select', onInvalid, true);
+  }
+
+};
+export default {
+  name: 'input',
+  params: {
+    input: {
+      scrollIntoViewOnFocus: undefined,
+      scrollIntoViewCentered: false,
+      scrollIntoViewDuration: 0,
+      scrollIntoViewAlways: false
+    }
+  },
+
+  create() {
+    const app = this;
+
+    if (typeof app.params.input.scrollIntoViewOnFocus === 'undefined') {
+      app.params.input.scrollIntoViewOnFocus = getDevice().android;
+    }
+
+    bindMethods(app, {
+      input: Input
+    });
+  },
+
+  on: {
+    init() {
+      const app = this;
+      app.input.init();
+    },
+
+    tabMounted(tabEl) {
+      const app = this;
+      const $tabEl = $(tabEl);
+      $tabEl.find('.item-input, .input').each(itemInputEl => {
+        const $itemInputEl = $(itemInputEl);
+        $itemInputEl.find('input, select, textarea, [contenteditable]').each(inputEl => {
+          const $inputEl = $(inputEl);
+          if (Input.ignoreTypes.indexOf($inputEl.attr('type')) >= 0) return;
+          app.input.checkEmptyState($inputEl);
+        });
+      });
+      $tabEl.find('textarea.resizable').each(textareaEl => {
+        app.input.resizeTextarea(textareaEl);
+      });
+    },
+
+    pageInit(page) {
+      const app = this;
+      const $pageEl = page.$el;
+      $pageEl.find('.item-input, .input').each(itemInputEl => {
+        const $itemInputEl = $(itemInputEl);
+        $itemInputEl.find('input, select, textarea, [contenteditable]').each(inputEl => {
+          const $inputEl = $(inputEl);
+          if (Input.ignoreTypes.indexOf($inputEl.attr('type')) >= 0) return;
+          app.input.checkEmptyState($inputEl);
+        });
+      });
+      $pageEl.find('textarea.resizable').each(textareaEl => {
+        app.input.resizeTextarea(textareaEl);
+      });
+    },
+
+    'panelBreakpoint panelCollapsedBreakpoint panelResize panelOpen panelSwipeOpen resize viewMasterDetailBreakpoint': function onPanelOpen(instance) {
+      const app = this;
+
+      if (instance && instance.$el) {
+        instance.$el.find('textarea.resizable').each(textareaEl => {
+          app.input.resizeTextarea(textareaEl);
+        });
+      } else {
+        $('textarea.resizable').each(textareaEl => {
+          app.input.resizeTextarea(textareaEl);
+        });
+      }
+    }
+  }
+};

package/components/input/input.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var a=t.$,i=t.utils,n=t.getDevice,s=(t.getSupport,t.Class,t.Modal,t.ConstructorMethods,t.ModalMethods,i.bindMethods);const r={ignoreTypes:["checkbox","button","submit","range","radio","image"],createTextareaResizableShadow(){const t=getDocument(),e=a(t.createElement("textarea"));e.addClass("textarea-resizable-shadow"),e.prop({disabled:!0,readonly:!0}),r.textareaResizableShadow=e},textareaResizableShadow:void 0,resizeTextarea(t){const e=this,i=getWindow(),n=a(t);r.textareaResizableShadow||r.createTextareaResizableShadow();const s=r.textareaResizableShadow;if(!n.length)return;if(!n.hasClass("resizable"))return;0===r.textareaResizableShadow.parents().length&&e.$el.append(s);const l=i.getComputedStyle(n[0]);"padding-top padding-bottom padding-left padding-right margin-left margin-right margin-top margin-bottom width font-size font-family font-style font-weight line-height font-variant text-transform letter-spacing border box-sizing display".split(" ").forEach((t=>{let e=l[t];"font-size line-height letter-spacing width".split(" ").indexOf(t)>=0&&(e=e.replace(",",".")),s.css(t,e)}));const o=n[0].clientHeight;s.val("");const p=s[0].scrollHeight;s.val(n.val()),s.css("height",0);const u=s[0].scrollHeight;o!==u&&(u>p?n.css("height",`${u}px`):u<o&&n.css("height",""),(u>p||u<o)&&(n.trigger("textarea:resize",{initialHeight:p,currentHeight:o,scrollHeight:u}),e.emit("textareaResize",{initialHeight:p,currentHeight:o,scrollHeight:u})))},validate(t){const e=a(t);if(!e.length)return!0;const i=e.parents(".item-input"),n=e.parents(".input");function s(){e[0].f7ValidateReadonly&&(e[0].readOnly=!0)}e[0].f7ValidateReadonly&&(e[0].readOnly=!1);const r=e[0].validity,l=e.dataset().errorMessage||e[0].validationMessage||"";if(!r)return s(),!0;if(!r.valid){let t=e.nextAll(".item-input-error-message, .input-error-message");return l&&(0===t.length&&(t=a(`<div class="${n.length?"input-error-message":"item-input-error-message"}"></div>`),t.insertAfter(e)),t.text(l)),t.length>0&&(i.addClass("item-input-with-error-message"),n.addClass("input-with-error-message")),i.addClass("item-input-invalid"),n.addClass("input-invalid"),e.addClass("input-invalid"),s(),!1}return i.removeClass("item-input-invalid item-input-with-error-message"),n.removeClass("input-invalid input-with-error-message"),e.removeClass("input-invalid"),s(),!0},validateInputs(t){const e=this;return a(t).find("input, textarea, select").map((t=>e.input.validate(t))).indexOf(!1)<0},focus(t){const e=a(t),i=e.attr("type");r.ignoreTypes.indexOf(i)>=0||(e.parents(".item-input").addClass("item-input-focused"),e.parents(".input").addClass("input-focused"),e.addClass("input-focused"))},blur(t){const e=a(t);e.parents(".item-input").removeClass("item-input-focused"),e.parents(".input").removeClass("input-focused"),e.removeClass("input-focused")},checkEmptyState(t){const e=this;let i=a(t);if(i.is("input, select, textarea, .item-input [contenteditable]")||(i=i.find("input, select, textarea, .item-input [contenteditable]").eq(0)),!i.length)return;let n;n=i[0].hasAttribute("contenteditable")?i.find(".text-editor-placeholder").length?"":i.html():i.val();const s=i.parents(".item-input"),r=i.parents(".input");n&&"string"==typeof n&&""!==n.trim()||Array.isArray(n)&&n.length>0?(s.addClass("item-input-with-value"),r.addClass("input-with-value"),i.addClass("input-with-value"),i.trigger("input:notempty"),e.emit("inputNotEmpty",i[0])):(s.removeClass("item-input-with-value"),r.removeClass("input-with-value"),i.removeClass("input-with-value"),i.trigger("input:empty"),e.emit("inputEmpty",i[0]))},scrollIntoView(t,e=0,i,n){const s=a(t),r=s.parents(".page-content, .panel, .card-expandable .card-content").eq(0);if(!r.length)return!1;const l=r[0].offsetHeight,o=r[0].scrollTop,p=parseInt(r.css("padding-top"),10),u=parseInt(r.css("padding-bottom"),10),d=r.offset().top-o,c=s.offset().top-d,h=c+o-p,m=c+o-l+u+s[0].offsetHeight,g=h+(m-h)/2;return o>h?(r.scrollTop(i?g:h,e),!0):o<m?(r.scrollTop(i?g:m,e),!0):(n&&r.scrollTop(i?g:m,e),!1)},init(){const t=this,e=n(),i=getWindow(),s=getDocument();r.createTextareaResizableShadow(),a(s).on("click",".input-clear-button",(function(){const e=a(this).siblings("input, textarea").eq(0),i=e.val();e.val("").trigger("input change").focus().trigger("input:clear",i),t.emit("inputClear",i)})),a(s).on("mousedown",".input-clear-button",(function(t){t.preventDefault()})),a(s).on("change input","input, textarea, select, .item-input [contenteditable]",(function(){const e=a(this),i=e.attr("type"),n=e[0].nodeName.toLowerCase(),s=e[0].hasAttribute("contenteditable");r.ignoreTypes.indexOf(i)>=0||(t.input.checkEmptyState(e),s||(null!==e.attr("data-validate-on-blur")||!e.dataset().validate&&null===e.attr("validate")||t.input.validate(e),"textarea"===n&&e.hasClass("resizable")&&t.input.resizeTextarea(e)))}),!0),a(s).on("focus","input, textarea, select, .item-input [contenteditable]",(function(){const n=this;t.params.input.scrollIntoViewOnFocus&&(e.android?a(i).once("resize",(()=>{s&&s.activeElement===n&&t.input.scrollIntoView(n,t.params.input.scrollIntoViewDuration,t.params.input.scrollIntoViewCentered,t.params.input.scrollIntoViewAlways)})):t.input.scrollIntoView(n,t.params.input.scrollIntoViewDuration,t.params.input.scrollIntoViewCentered,t.params.input.scrollIntoViewAlways)),t.input.focus(n)}),!0),a(s).on("blur","input, textarea, select, .item-input [contenteditable]",(function(){const e=a(this),i=e[0].nodeName.toLowerCase();t.input.blur(e),(e.dataset().validate||null!==e.attr("validate")||null!==e.attr("data-validate-on-blur"))&&t.input.validate(e),"textarea"===i&&e.hasClass("resizable")&&r.textareaResizableShadow&&r.textareaResizableShadow.remove()}),!0),a(s).on("invalid","input, textarea, select",(function(e){const i=a(this);null!==i.attr("data-validate-on-blur")||!i.dataset().validate&&null===i.attr("validate")||(e.preventDefault(),t.input.validate(i))}),!0)}};var l={name:"input",params:{input:{scrollIntoViewOnFocus:void 0,scrollIntoViewCentered:!1,scrollIntoViewDuration:0,scrollIntoViewAlways:!1}},create(){const t=this;void 0===t.params.input.scrollIntoViewOnFocus&&(t.params.input.scrollIntoViewOnFocus=n().android),s(t,{input:r})},on:{init(){this.input.init()},tabMounted(t){const e=this,i=a(t);i.find(".item-input, .input").each((t=>{a(t).find("input, select, textarea, [contenteditable]").each((t=>{const i=a(t);r.ignoreTypes.indexOf(i.attr("type"))>=0||e.input.checkEmptyState(i)}))})),i.find("textarea.resizable").each((t=>{e.input.resizeTextarea(t)}))},pageInit(t){const e=this,i=t.$el;i.find(".item-input, .input").each((t=>{a(t).find("input, select, textarea, [contenteditable]").each((t=>{const i=a(t);r.ignoreTypes.indexOf(i.attr("type"))>=0||e.input.checkEmptyState(i)}))})),i.find("textarea.resizable").each((t=>{e.input.resizeTextarea(t)}))},"panelBreakpoint panelCollapsedBreakpoint panelResize panelOpen panelSwipeOpen resize viewMasterDetailBreakpoint":function(t){const e=this;t&&t.$el?t.$el.find("textarea.resizable").each((t=>{e.input.resizeTextarea(t)})):a("textarea.resizable").each((t=>{e.input.resizeTextarea(t)}))}}};if(e){if(t.prototype.modules&&t.prototype.modules[l.name])return;t.use(l),t.instance&&(t.instance.useModuleParams(l,t.instance.params),t.instance.useModule(l))}return l}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/input/input.less

@@ -428,7 +428,7 @@ textarea {
 }
 
 .if-dark-theme({
-  .theme-dark option {
+  .dark option {
     background-color: var(--f7-page-bg-color);
   }
 });