framework7 6.3.16 → 7.0.0-beta.12

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);
   }
 });