mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
619 lines
58 KiB
619 lines
58 KiB
/*!
|
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
*/
|
|
import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, Build, h, Host } from '@stencil/core/internal/client';
|
|
import { c as createNotchController, a as checkInvalidState } from './validity.js';
|
|
import { l as debounceEvent, i as inheritAriaAttributes, d as inheritAttributes, c as componentOnReady } from './helpers.js';
|
|
import { c as createSlotMutationController, g as getCounterText } from './input.utils.js';
|
|
import { h as hostContext, c as createColorClasses } from './theme.js';
|
|
import { j as closeCircle, k as closeSharp } from './index6.js';
|
|
import { b as getIonMode } from './ionic-global.js';
|
|
import { d as defineCustomElement$2 } from './icon.js';
|
|
|
|
const inputIosCss = ".sc-ion-input-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--background:transparent;--color:initial;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;padding:0 !important;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item[slot=start].sc-ion-input-ios-h,ion-item [slot=start].sc-ion-input-ios-h,ion-item[slot=end].sc-ion-input-ios-h,ion-item [slot=end].sc-ion-input-ios-h{width:auto}.ion-color.sc-ion-input-ios-h{--highlight-color-focused:var(--ion-color-base)}.input-label-placement-floating.sc-ion-input-ios-h,.input-label-placement-stacked.sc-ion-input-ios-h{min-height:56px}.native-input.sc-ion-input-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-ios::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-ios:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-ios::-ms-clear{display:none}.cloned-input.sc-ion-input-ios{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-input-ios{inset-inline-start:0}.cloned-input.sc-ion-input-ios:disabled{opacity:1}.input-clear-icon.sc-ion-input-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{color:inherit}.input-clear-icon.sc-ion-input-ios:focus{opacity:0.5}.has-value.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{visibility:visible}.input-wrapper.sc-ion-input-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;width:100%}.ion-touched.ion-invalid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}.has-focus.ion-valid.sc-ion-input-ios-h,.ion-touched.ion-invalid.sc-ion-input-ios-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-ios .error-text.sc-ion-input-ios{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-input-ios-h .input-bottom.sc-ion-input-ios .error-text.sc-ion-input-ios{display:block}.ion-touched.ion-invalid.sc-ion-input-ios-h .input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{display:none}.input-bottom.sc-ion-input-ios .counter.sc-ion-input-ios{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.has-focus.sc-ion-input-ios-h input.sc-ion-input-ios{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text.sc-ion-input-ios,.sc-ion-input-ios-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-ios,.input-outline-notch-hidden.sc-ion-input-ios{display:none}.input-wrapper.sc-ion-input-ios input.sc-ion-input-ios{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios{-ms-flex-direction:row;flex-direction:row}.input-label-placement-start.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-end.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-end.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-ios-h .label-text.sc-ion-input-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-ios-h -no-combinator.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h -no-combinator.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].sc-ion-input-ios-h -no-combinator.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h -no-combinator.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ios-h:dir(rtl) .label-text-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h:dir(rtl) .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-stacked.sc-ion-input-ios-h input.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios,.has-value.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{opacity:1}.label-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.sc-ion-input-ios-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-input-ios-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.sc-ion-input-ios-h[disabled].sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[disabled] .sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[readonly].sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[readonly] .sc-ion-input-ios-s>ion-input-password-toggle{visibility:hidden}.sc-ion-input-ios-h{--border-width:0.55px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--highlight-height:0px;font-size:inherit}.input-clear-icon.sc-ion-input-ios ion-icon.sc-ion-input-ios{width:18px;height:18px}.input-disabled.sc-ion-input-ios-h{opacity:0.3}.sc-ion-input-ios-s>ion-button[slot=start].button-has-icon-only,.sc-ion-input-ios-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}";
|
|
|
|
const inputMdCss = ".sc-ion-input-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--background:transparent;--color:initial;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;padding:0 !important;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item[slot=start].sc-ion-input-md-h,ion-item [slot=start].sc-ion-input-md-h,ion-item[slot=end].sc-ion-input-md-h,ion-item [slot=end].sc-ion-input-md-h{width:auto}.ion-color.sc-ion-input-md-h{--highlight-color-focused:var(--ion-color-base)}.input-label-placement-floating.sc-ion-input-md-h,.input-label-placement-stacked.sc-ion-input-md-h{min-height:56px}.native-input.sc-ion-input-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-md::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-md:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-md::-ms-clear{display:none}.cloned-input.sc-ion-input-md{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-input-md{inset-inline-start:0}.cloned-input.sc-ion-input-md:disabled{opacity:1}.input-clear-icon.sc-ion-input-md{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{color:inherit}.input-clear-icon.sc-ion-input-md:focus{opacity:0.5}.has-value.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{visibility:visible}.input-wrapper.sc-ion-input-md{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper.sc-ion-input-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;width:100%}.ion-touched.ion-invalid.sc-ion-input-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-md-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-md{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}.has-focus.ion-valid.sc-ion-input-md-h,.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-md .error-text.sc-ion-input-md{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-md .helper-text.sc-ion-input-md{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-input-md-h .input-bottom.sc-ion-input-md .error-text.sc-ion-input-md{display:block}.ion-touched.ion-invalid.sc-ion-input-md-h .input-bottom.sc-ion-input-md .helper-text.sc-ion-input-md{display:none}.input-bottom.sc-ion-input-md .counter.sc-ion-input-md{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.has-focus.sc-ion-input-md-h input.sc-ion-input-md{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text.sc-ion-input-md,.sc-ion-input-md-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-md,.input-outline-notch-hidden.sc-ion-input-md{display:none}.input-wrapper.sc-ion-input-md input.sc-ion-input-md{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:row;flex-direction:row}.input-label-placement-start.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-end.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-end.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-md-h .label-text.sc-ion-input-md{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-md-h .input-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-md-h -no-combinator.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h -no-combinator.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-stacked.sc-ion-input-md-h input.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md,.has-value.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{opacity:1}.label-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.sc-ion-input-md-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-input-md-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.sc-ion-input-md-h[disabled].sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[disabled] .sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[readonly].sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[readonly] .sc-ion-input-md-s>ion-input-password-toggle{visibility:hidden}.input-fill-solid.sc-ion-input-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-500, var(--ion-background-color-step-500, gray));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.input-fill-solid.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-bottom:var(--border-width) var(--border-style) var(--border-color)}.has-focus.input-fill-solid.ion-valid.sc-ion-input-md-h,.input-fill-solid.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-fill-solid.sc-ion-input-md-h .input-bottom.sc-ion-input-md{border-top:none}@media (any-hover: hover){.input-fill-solid.sc-ion-input-md-h:hover{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.input-fill-solid.has-focus.sc-ion-input-md-h{--background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}.input-fill-solid.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0px;border-end-start-radius:0px}.label-floating.input-fill-solid.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{max-width:calc(100% / 0.75)}.input-fill-outline.sc-ion-input-md-h{--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.input-fill-outline.input-shape-round.sc-ion-input-md-h{--border-radius:28px;--padding-start:32px;--padding-end:32px}.has-focus.input-fill-outline.ion-valid.sc-ion-input-md-h,.input-fill-outline.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}@media (any-hover: hover){.input-fill-outline.sc-ion-input-md-h:hover{--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.input-fill-outline.has-focus.sc-ion-input-md-h{--border-width:var(--highlight-height);--border-color:var(--highlight-color)}.input-fill-outline.sc-ion-input-md-h .input-bottom.sc-ion-input-md{border-top:none}.input-fill-outline.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-bottom:none}.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:left top;transform-origin:left top;position:absolute;max-width:calc(100% - var(--padding-start) - var(--padding-end))}[dir=rtl].sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}}.input-fill-outline.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{position:relative}.label-floating.input-fill-outline.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(-32%) scale(0.75);transform:translateY(-32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75)}.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h input.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:6px;margin-bottom:6px}.input-fill-outline.sc-ion-input-md-h .input-outline-container.sc-ion-input-md{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:100%}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{pointer-events:none}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color)}.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md{max-width:calc(100% - var(--padding-start) - var(--padding-end))}.input-fill-outline.sc-ion-input-md-h .notch-spacer.sc-ion-input-md{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none;-webkit-box-sizing:content-box;box-sizing:content-box}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md{border-start-start-radius:var(--border-radius);border-start-end-radius:0px;border-end-end-radius:0px;border-end-start-radius:var(--border-radius);-webkit-border-start:var(--border-width) var(--border-style) var(--border-color);border-inline-start:var(--border-width) var(--border-style) var(--border-color);width:calc(var(--padding-start) - 4px)}.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{-webkit-border-end:var(--border-width) var(--border-style) var(--border-color);border-inline-end:var(--border-width) var(--border-style) var(--border-color);border-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px;-ms-flex-positive:1;flex-grow:1}.label-floating.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md{border-top:none}.sc-ion-input-md-h{--border-width:1px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--highlight-height:2px;font-size:inherit}.input-clear-icon.sc-ion-input-md ion-icon.sc-ion-input-md{width:22px;height:22px}.input-disabled.sc-ion-input-md-h{opacity:0.38}.has-focus.ion-valid.sc-ion-input-md-h,.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-md .counter.sc-ion-input-md{letter-spacing:0.0333333333em}.input-label-placement-floating.has-focus.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-stacked.has-focus.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{color:var(--highlight-color)}.has-focus.input-label-placement-floating.ion-valid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.ion-touched.ion-invalid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.has-focus.input-label-placement-stacked.ion-valid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-stacked.ion-touched.ion-invalid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{color:var(--highlight-color)}.input-highlight.sc-ion-input-md{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.input-highlight.sc-ion-input-md{inset-inline-start:0}.has-focus.sc-ion-input-md-h .input-highlight.sc-ion-input-md{-webkit-transform:scale(1);transform:scale(1)}.in-item.sc-ion-input-md-h .input-highlight.sc-ion-input-md{bottom:0}.in-item.sc-ion-input-md-h .input-highlight.sc-ion-input-md{inset-inline-start:0}.input-shape-round.sc-ion-input-md-h{--border-radius:16px}.sc-ion-input-md-s>ion-button[slot=start].button-has-icon-only,.sc-ion-input-md-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}";
|
|
|
|
const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
|
|
constructor(registerHost) {
|
|
super();
|
|
if (registerHost !== false) {
|
|
this.__registerHost();
|
|
}
|
|
this.ionInput = createEvent(this, "ionInput", 7);
|
|
this.ionChange = createEvent(this, "ionChange", 7);
|
|
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
this.inputId = `ion-input-${inputIds++}`;
|
|
this.helperTextId = `${this.inputId}-helper-text`;
|
|
this.errorTextId = `${this.inputId}-error-text`;
|
|
this.inheritedAttributes = {};
|
|
this.isComposing = false;
|
|
/**
|
|
* `true` if the input was cleared as a result of the user typing
|
|
* with `clearOnEdit` enabled.
|
|
*
|
|
* Resets when the input loses focus.
|
|
*/
|
|
this.didInputClearOnEdit = false;
|
|
/**
|
|
* The `hasFocus` state ensures the focus class is
|
|
* added regardless of how the element is focused.
|
|
* The `ion-focused` class only applies when focused
|
|
* via tabbing, not by clicking.
|
|
* The `has-focus` logic was added to ensure the class
|
|
* is applied in both cases.
|
|
*/
|
|
this.hasFocus = false;
|
|
/**
|
|
* Track validation state for proper aria-live announcements
|
|
*/
|
|
this.isInvalid = false;
|
|
/**
|
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
*/
|
|
this.autocapitalize = 'off';
|
|
/**
|
|
* Indicates whether the value of the control can be automatically completed by the browser.
|
|
*/
|
|
this.autocomplete = 'off';
|
|
/**
|
|
* Whether auto correction should be enabled when the user is entering/editing the text value.
|
|
*/
|
|
this.autocorrect = 'off';
|
|
/**
|
|
* Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
|
|
*
|
|
* This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
|
|
*/
|
|
this.autofocus = false;
|
|
/**
|
|
* If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
|
|
*/
|
|
this.clearInput = false;
|
|
/**
|
|
* If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
|
|
*/
|
|
this.counter = false;
|
|
/**
|
|
* If `true`, the user cannot interact with the input.
|
|
*/
|
|
this.disabled = false;
|
|
/**
|
|
* Where to place the label relative to the input.
|
|
* `"start"`: The label will appear to the left of the input in LTR and to the right in RTL.
|
|
* `"end"`: The label will appear to the right of the input in LTR and to the left in RTL.
|
|
* `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input.
|
|
* `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.
|
|
* `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
|
|
*/
|
|
this.labelPlacement = 'start';
|
|
/**
|
|
* The name of the control, which is submitted with the form data.
|
|
*/
|
|
this.name = this.inputId;
|
|
/**
|
|
* If `true`, the user cannot modify the value.
|
|
*/
|
|
this.readonly = false;
|
|
/**
|
|
* If `true`, the user must fill in a value before submitting a form.
|
|
*/
|
|
this.required = false;
|
|
/**
|
|
* If `true`, the element will have its spelling and grammar checked.
|
|
*/
|
|
this.spellcheck = false;
|
|
/**
|
|
* The type of control to display. The default type is text.
|
|
*/
|
|
this.type = 'text';
|
|
/**
|
|
* The value of the input.
|
|
*/
|
|
this.value = '';
|
|
this.onInput = (ev) => {
|
|
const input = ev.target;
|
|
if (input) {
|
|
this.value = input.value || '';
|
|
}
|
|
this.emitInputChange(ev);
|
|
};
|
|
this.onChange = (ev) => {
|
|
this.emitValueChange(ev);
|
|
};
|
|
this.onBlur = (ev) => {
|
|
this.hasFocus = false;
|
|
if (this.focusedValue !== this.value) {
|
|
/**
|
|
* Emits the `ionChange` event when the input value
|
|
* is different than the value when the input was focused.
|
|
*/
|
|
this.emitValueChange(ev);
|
|
}
|
|
this.didInputClearOnEdit = false;
|
|
this.ionBlur.emit(ev);
|
|
};
|
|
this.onFocus = (ev) => {
|
|
this.hasFocus = true;
|
|
this.focusedValue = this.value;
|
|
this.ionFocus.emit(ev);
|
|
};
|
|
this.onKeydown = (ev) => {
|
|
this.checkClearOnEdit(ev);
|
|
};
|
|
this.onCompositionStart = () => {
|
|
this.isComposing = true;
|
|
};
|
|
this.onCompositionEnd = () => {
|
|
this.isComposing = false;
|
|
};
|
|
this.clearTextInput = (ev) => {
|
|
if (this.clearInput && !this.readonly && !this.disabled && ev) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
// Attempt to focus input again after pressing clear button
|
|
this.setFocus();
|
|
}
|
|
this.value = '';
|
|
this.emitInputChange(ev);
|
|
};
|
|
/**
|
|
* Stops propagation when the label is clicked,
|
|
* otherwise, two clicks will be triggered.
|
|
*/
|
|
this.onLabelClick = (ev) => {
|
|
// Only stop propagation if the click was directly on the label
|
|
// and not on the input or other child elements
|
|
if (ev.target === ev.currentTarget) {
|
|
ev.stopPropagation();
|
|
}
|
|
};
|
|
}
|
|
debounceChanged() {
|
|
const { ionInput, debounce, originalIonInput } = this;
|
|
/**
|
|
* If debounce is undefined, we have to manually revert the ionInput emitter in case
|
|
* debounce used to be set to a number. Otherwise, the event would stay debounced.
|
|
*/
|
|
this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
|
|
}
|
|
/**
|
|
* Whenever the type on the input changes we need
|
|
* to update the internal type prop on the password
|
|
* toggle so that that correct icon is shown.
|
|
*/
|
|
onTypeChange() {
|
|
const passwordToggle = this.el.querySelector('ion-input-password-toggle');
|
|
if (passwordToggle) {
|
|
passwordToggle.type = this.type;
|
|
}
|
|
}
|
|
/**
|
|
* Update the native input element when the value changes
|
|
*/
|
|
valueChanged() {
|
|
const nativeInput = this.nativeInput;
|
|
const value = this.getValue();
|
|
if (nativeInput && nativeInput.value !== value && !this.isComposing) {
|
|
/**
|
|
* Assigning the native input's value on attribute
|
|
* value change, allows `ionInput` implementations
|
|
* to override the control's value.
|
|
*
|
|
* Used for patterns such as input trimming (removing whitespace),
|
|
* or input masking.
|
|
*/
|
|
nativeInput.value = value;
|
|
}
|
|
}
|
|
/**
|
|
* dir is a globally enumerated attribute.
|
|
* As a result, creating these as properties
|
|
* can have unintended side effects. Instead, we
|
|
* listen for attribute changes and inherit them
|
|
* to the inner `<input>` element.
|
|
*/
|
|
onDirChanged(newValue) {
|
|
this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
|
|
forceUpdate(this);
|
|
}
|
|
/**
|
|
* This prevents the native input from emitting the click event.
|
|
* Instead, the click event from the ion-input is emitted.
|
|
*/
|
|
onClickCapture(ev) {
|
|
const nativeInput = this.nativeInput;
|
|
if (nativeInput && ev.target === nativeInput) {
|
|
ev.stopPropagation();
|
|
this.el.click();
|
|
}
|
|
}
|
|
componentWillLoad() {
|
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
|
|
}
|
|
connectedCallback() {
|
|
const { el } = this;
|
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
|
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
// Watch for class changes to update validation state
|
|
if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
|
|
this.validationObserver = new MutationObserver(() => {
|
|
const newIsInvalid = checkInvalidState(el);
|
|
if (this.isInvalid !== newIsInvalid) {
|
|
this.isInvalid = newIsInvalid;
|
|
// Force a re-render to update aria-describedby immediately
|
|
forceUpdate(this);
|
|
}
|
|
});
|
|
this.validationObserver.observe(el, {
|
|
attributes: true,
|
|
attributeFilter: ['class'],
|
|
});
|
|
}
|
|
// Always set initial state
|
|
this.isInvalid = checkInvalidState(el);
|
|
this.debounceChanged();
|
|
if (Build.isBrowser) {
|
|
document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
|
|
detail: this.el,
|
|
}));
|
|
}
|
|
}
|
|
componentDidLoad() {
|
|
this.originalIonInput = this.ionInput;
|
|
/**
|
|
* Set the type on the password toggle in the event that this input's
|
|
* type was set async and does not match the default type for the password toggle.
|
|
* This can happen when the type is bound using a JS framework binding syntax
|
|
* such as [type] in Angular.
|
|
*/
|
|
this.onTypeChange();
|
|
this.debounceChanged();
|
|
}
|
|
componentDidRender() {
|
|
var _a;
|
|
(_a = this.notchController) === null || _a === void 0 ? void 0 : _a.calculateNotchWidth();
|
|
}
|
|
disconnectedCallback() {
|
|
if (Build.isBrowser) {
|
|
document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
|
|
detail: this.el,
|
|
}));
|
|
}
|
|
if (this.slotMutationController) {
|
|
this.slotMutationController.destroy();
|
|
this.slotMutationController = undefined;
|
|
}
|
|
if (this.notchController) {
|
|
this.notchController.destroy();
|
|
this.notchController = undefined;
|
|
}
|
|
// Clean up validation observer to prevent memory leaks
|
|
if (this.validationObserver) {
|
|
this.validationObserver.disconnect();
|
|
this.validationObserver = undefined;
|
|
}
|
|
}
|
|
/**
|
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
* `input.focus()`.
|
|
*
|
|
* Developers who wish to focus an input when a page enters
|
|
* should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
|
|
*
|
|
* Developers who wish to focus an input when an overlay is presented
|
|
* should call `setFocus` after `didPresent` has resolved.
|
|
*
|
|
* See [managing focus](/docs/developing/managing-focus) for more information.
|
|
*/
|
|
async setFocus() {
|
|
if (this.nativeInput) {
|
|
this.nativeInput.focus();
|
|
}
|
|
}
|
|
/**
|
|
* Returns the native `<input>` element used under the hood.
|
|
*/
|
|
async getInputElement() {
|
|
/**
|
|
* If this gets called in certain early lifecycle hooks (ex: Vue onMounted),
|
|
* nativeInput won't be defined yet with the custom elements build, so wait for it to load in.
|
|
*/
|
|
if (!this.nativeInput) {
|
|
await new Promise((resolve) => componentOnReady(this.el, resolve));
|
|
}
|
|
return Promise.resolve(this.nativeInput);
|
|
}
|
|
/**
|
|
* Emits an `ionChange` event.
|
|
*
|
|
* This API should be called for user committed changes.
|
|
* This API should not be used for external value changes.
|
|
*/
|
|
emitValueChange(event) {
|
|
const { value } = this;
|
|
// Checks for both null and undefined values
|
|
const newValue = value == null ? value : value.toString();
|
|
// Emitting a value change should update the internal state for tracking the focused value
|
|
this.focusedValue = newValue;
|
|
this.ionChange.emit({ value: newValue, event });
|
|
}
|
|
/**
|
|
* Emits an `ionInput` event.
|
|
*/
|
|
emitInputChange(event) {
|
|
const { value } = this;
|
|
// Checks for both null and undefined values
|
|
const newValue = value == null ? value : value.toString();
|
|
this.ionInput.emit({ value: newValue, event });
|
|
}
|
|
shouldClearOnEdit() {
|
|
const { type, clearOnEdit } = this;
|
|
return clearOnEdit === undefined ? type === 'password' : clearOnEdit;
|
|
}
|
|
getValue() {
|
|
return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
|
|
}
|
|
checkClearOnEdit(ev) {
|
|
if (!this.shouldClearOnEdit()) {
|
|
return;
|
|
}
|
|
/**
|
|
* The following keys do not modify the
|
|
* contents of the input. As a result, pressing
|
|
* them should not edit the input.
|
|
*
|
|
* We can't check to see if the value of the input
|
|
* was changed because we call checkClearOnEdit
|
|
* in a keydown listener, and the key has not yet
|
|
* been added to the input.
|
|
*/
|
|
const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
|
|
const pressedIgnoredKey = IGNORED_KEYS.includes(ev.key);
|
|
/**
|
|
* Clear the input if the control has not been previously cleared during focus.
|
|
* Do not clear if the user hitting enter to submit a form.
|
|
*/
|
|
if (!this.didInputClearOnEdit && this.hasValue() && !pressedIgnoredKey) {
|
|
this.value = '';
|
|
this.emitInputChange(ev);
|
|
}
|
|
/**
|
|
* Pressing an IGNORED_KEYS first and
|
|
* then an allowed key will cause the input to not
|
|
* be cleared.
|
|
*/
|
|
if (!pressedIgnoredKey) {
|
|
this.didInputClearOnEdit = true;
|
|
}
|
|
}
|
|
hasValue() {
|
|
return this.getValue().length > 0;
|
|
}
|
|
/**
|
|
* Renders the helper text or error text values
|
|
*/
|
|
renderHintText() {
|
|
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
|
|
return [
|
|
h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
|
|
h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null),
|
|
];
|
|
}
|
|
getHintTextID() {
|
|
const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
|
|
if (isInvalid && errorText) {
|
|
return errorTextId;
|
|
}
|
|
if (helperText) {
|
|
return helperTextId;
|
|
}
|
|
return undefined;
|
|
}
|
|
renderCounter() {
|
|
const { counter, maxlength, counterFormatter, value } = this;
|
|
if (counter !== true || maxlength === undefined) {
|
|
return;
|
|
}
|
|
return h("div", { class: "counter" }, getCounterText(value, maxlength, counterFormatter));
|
|
}
|
|
/**
|
|
* Responsible for rendering helper text,
|
|
* error text, and counter. This element should only
|
|
* be rendered if hint text is set or counter is enabled.
|
|
*/
|
|
renderBottomContent() {
|
|
const { counter, helperText, errorText, maxlength } = this;
|
|
/**
|
|
* undefined and empty string values should
|
|
* be treated as not having helper/error text.
|
|
*/
|
|
const hasHintText = !!helperText || !!errorText;
|
|
const hasCounter = counter === true && maxlength !== undefined;
|
|
if (!hasHintText && !hasCounter) {
|
|
return;
|
|
}
|
|
return (h("div", { class: "input-bottom" }, this.renderHintText(), this.renderCounter()));
|
|
}
|
|
renderLabel() {
|
|
const { label } = this;
|
|
return (h("div", { class: {
|
|
'label-text-wrapper': true,
|
|
'label-text-wrapper-hidden': !this.hasLabel,
|
|
} }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
|
|
}
|
|
/**
|
|
* Gets any content passed into the `label` slot,
|
|
* not the <slot> definition.
|
|
*/
|
|
get labelSlot() {
|
|
return this.el.querySelector('[slot="label"]');
|
|
}
|
|
/**
|
|
* Returns `true` if label content is provided
|
|
* either by a prop or a content. If you want
|
|
* to get the plaintext value of the label use
|
|
* the `labelText` getter instead.
|
|
*/
|
|
get hasLabel() {
|
|
return this.label !== undefined || this.labelSlot !== null;
|
|
}
|
|
/**
|
|
* Renders the border container
|
|
* when fill="outline".
|
|
*/
|
|
renderLabelContainer() {
|
|
const mode = getIonMode(this);
|
|
const hasOutlineFill = mode === 'md' && this.fill === 'outline';
|
|
if (hasOutlineFill) {
|
|
/**
|
|
* The outline fill has a special outline
|
|
* that appears around the input and the label.
|
|
* Certain stacked and floating label placements cause the
|
|
* label to translate up and create a "cut out"
|
|
* inside of that border by using the notch-spacer element.
|
|
*/
|
|
return [
|
|
h("div", { class: "input-outline-container" }, h("div", { class: "input-outline-start" }), h("div", { class: {
|
|
'input-outline-notch': true,
|
|
'input-outline-notch-hidden': !this.hasLabel,
|
|
} }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "input-outline-end" })),
|
|
this.renderLabel(),
|
|
];
|
|
}
|
|
/**
|
|
* If not using the outline style,
|
|
* we can render just the label.
|
|
*/
|
|
return this.renderLabel();
|
|
}
|
|
render() {
|
|
const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, clearInputIcon } = this;
|
|
const mode = getIonMode(this);
|
|
const value = this.getValue();
|
|
const inItem = hostContext('ion-item', this.el);
|
|
const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
|
|
const defaultClearIcon = mode === 'ios' ? closeCircle : closeSharp;
|
|
const clearIconData = clearInputIcon !== null && clearInputIcon !== void 0 ? clearInputIcon : defaultClearIcon;
|
|
const hasValue = this.hasValue();
|
|
const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
|
|
/**
|
|
* If the label is stacked, it should always sit above the input.
|
|
* For floating labels, the label should move above the input if
|
|
* the input has a value, is focused, or has anything in either
|
|
* the start or end slot.
|
|
*
|
|
* If there is content in the start slot, the label would overlap
|
|
* it if not forced to float. This is also applied to the end slot
|
|
* because with the default or solid fills, the input is not
|
|
* vertically centered in the container, but the label is. This
|
|
* causes the slots and label to appear vertically offset from each
|
|
* other when the label isn't floating above the input. This doesn't
|
|
* apply to the outline fill, but this was not accounted for to keep
|
|
* things consistent.
|
|
*
|
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
*/
|
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
return (h(Host, { key: '97b5308021064d9e7434ef2d3d96f27045c1b0c4', class: createColorClasses(this.color, {
|
|
[mode]: true,
|
|
'has-value': hasValue,
|
|
'has-focus': hasFocus,
|
|
'label-floating': labelShouldFloat,
|
|
[`input-fill-${fill}`]: fill !== undefined,
|
|
[`input-shape-${shape}`]: shape !== undefined,
|
|
[`input-label-placement-${labelPlacement}`]: true,
|
|
'in-item': inItem,
|
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
'input-disabled': disabled,
|
|
}) }, h("label", { key: '353f68726ce180299bd9adc81e5ff7d26a48f54f', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '2034b4bad04fc157f3298a1805819216b6f439d0', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '96bb5e30176b2bd76dfb75bfbf6c1c3d4403f4bb', name: "start" }), h("input", Object.assign({ key: '1a1d75b0e414a95c89d5a760757c33548d234aca', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '95f3df17b7691d9a2e7dcd4a51f16a94aa3ca36f', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
/**
|
|
* This prevents mobile browsers from
|
|
* blurring the input when the clear
|
|
* button is activated.
|
|
*/
|
|
ev.preventDefault();
|
|
}, onClick: this.clearTextInput }, h("ion-icon", { key: '16b0af75eed50c8115fb5597f73b5fbf71c2530e', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'c48da0f8ddb3764ac43efa705bb4a6bb2d9cc2fd', name: "end" })), shouldRenderHighlight && h("div", { key: 'f15238481fc20de56ca7ecb6e350b3c024cc755e', class: "input-highlight" })), this.renderBottomContent()));
|
|
}
|
|
get el() { return this; }
|
|
static get watchers() { return {
|
|
"debounce": ["debounceChanged"],
|
|
"type": ["onTypeChange"],
|
|
"value": ["valueChanged"],
|
|
"dir": ["onDirChanged"]
|
|
}; }
|
|
static get style() { return {
|
|
ios: inputIosCss,
|
|
md: inputMdCss
|
|
}; }
|
|
}, [294, "ion-input", {
|
|
"color": [513],
|
|
"autocapitalize": [1],
|
|
"autocomplete": [1],
|
|
"autocorrect": [1],
|
|
"autofocus": [4],
|
|
"clearInput": [4, "clear-input"],
|
|
"clearInputIcon": [1, "clear-input-icon"],
|
|
"clearOnEdit": [4, "clear-on-edit"],
|
|
"counter": [4],
|
|
"counterFormatter": [16],
|
|
"debounce": [2],
|
|
"disabled": [516],
|
|
"enterkeyhint": [1],
|
|
"errorText": [1, "error-text"],
|
|
"fill": [1],
|
|
"inputmode": [1],
|
|
"helperText": [1, "helper-text"],
|
|
"label": [1],
|
|
"labelPlacement": [1, "label-placement"],
|
|
"max": [8],
|
|
"maxlength": [2],
|
|
"min": [8],
|
|
"minlength": [2],
|
|
"multiple": [4],
|
|
"name": [1],
|
|
"pattern": [1],
|
|
"placeholder": [1],
|
|
"readonly": [516],
|
|
"required": [4],
|
|
"shape": [1],
|
|
"spellcheck": [4],
|
|
"step": [1],
|
|
"type": [1],
|
|
"value": [1032],
|
|
"hasFocus": [32],
|
|
"isInvalid": [32],
|
|
"setFocus": [64],
|
|
"getInputElement": [64]
|
|
}, [[2, "click", "onClickCapture"]], {
|
|
"debounce": ["debounceChanged"],
|
|
"type": ["onTypeChange"],
|
|
"value": ["valueChanged"],
|
|
"dir": ["onDirChanged"]
|
|
}]);
|
|
let inputIds = 0;
|
|
function defineCustomElement$1() {
|
|
if (typeof customElements === "undefined") {
|
|
return;
|
|
}
|
|
const components = ["ion-input", "ion-icon"];
|
|
components.forEach(tagName => { switch (tagName) {
|
|
case "ion-input":
|
|
if (!customElements.get(tagName)) {
|
|
customElements.define(tagName, Input);
|
|
}
|
|
break;
|
|
case "ion-icon":
|
|
if (!customElements.get(tagName)) {
|
|
defineCustomElement$2();
|
|
}
|
|
break;
|
|
} });
|
|
}
|
|
|
|
const IonInput = Input;
|
|
const defineCustomElement = defineCustomElement$1;
|
|
|
|
export { IonInput, defineCustomElement };
|
|
|