input.ionic.scss

@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./input.common";
@forward "./input.ionic.outline.scss";
@forward "./input.ionic.solid.scss";
// Ionic Input
// --------------------------------------------------

:host {
  --color: #{globals.$ion-primitives-neutral-1200};
  --border-width: #{globals.$ion-border-size-025};
  --highlight-color-valid: #{globals.$ion-semantics-success-900};
  --highlight-color-invalid: #{globals.$ion-border-danger-default};
  --placeholder-color: #{globals.$ion-primitives-neutral-800};
  --placeholder-opacity: 1;

  @include globals.typography(globals.$ion-body-md-regular);
}

// Input Outline Container
// ----------------------------------------------------------------

.input-outline {
  @include globals.position(0, 0, 0, 0);
  @include globals.border-radius(var(--border-radius));

  position: absolute;

  width: 100%;
  height: 100%;

  pointer-events: none;

  border: var(--border-width) var(--border-style) var(--border-color);
}

// Input Label Placement: Stacked
// ----------------------------------------------------------------

// This makes the label sit above the input.
:host(.label-floating.input-label-placement-stacked) .label-text-wrapper {
  @include globals.margin(0);
  @include globals.padding(globals.$ion-space-100, null);
}

.input-wrapper {
  /**
   * For the ionic theme, the padding needs to sit on the
   * native wrapper instead, so that it sits within the
   * outline container but does not always affect the
   * label text.
   */
  @include globals.padding(0);

  /**
   * Outline inputs do not have a bottom border.
   * Instead, they have a border that wraps the
   * input + label.
   */
  border-bottom: none;

  /**
   * Do not show a background on the input wrapper as
   * this includes the label, instead we apply the
   * background to the native wrapper.
   */
  background: transparent;
}

.label-text-wrapper {
  /**
   * The label should appear on top of an outline
   * container that overlaps it so it is always clickable.
   */
  position: relative;
}

:host(.input-label-placement-stacked) .label-text-wrapper {
  @include globals.transform-origin(start, top);

  /**
   * Label text should not extend
   * beyond the bounds of the input.
   */
  max-width: calc(100% - var(--padding-start) - var(--padding-end));
}

/**
 * The bottom content should never have
 * a border with the outline style.
 */
.input-bottom {
  border-top: none;
}

.native-wrapper {
  @include globals.border-radius(inherit);
  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));

  min-height: globals.$ion-scale-1000;

  /**
  * Apply the background to the native input
  * wrapper to only style the input.
  */
  background: var(--background);
}

// Ionic Input Sizes
// --------------------------------------------------

:host(.input-size-medium) {
  --padding-start: #{globals.$ion-space-300};
  --padding-end: #{globals.$ion-space-300};
}

:host(.input-size-large) {
  --padding-start: #{globals.$ion-space-400};
  --padding-end: #{globals.$ion-space-400};
}

:host(.input-size-xlarge) {
  --padding-start: #{globals.$ion-space-500};
  --padding-end: #{globals.$ion-space-500};
}

:host(.input-size-medium) .native-wrapper {
  min-height: globals.$ion-scale-1000;
}

:host(.input-size-large) .native-wrapper {
  min-height: globals.$ion-scale-1200;
}

:host(.input-size-xlarge) .native-wrapper {
  min-height: globals.$ion-scale-1400;
}

// Input Shapes
// --------------------------------------------------

:host(.input-shape-soft) {
  --border-radius: #{globals.$ion-soft-xl};
}

:host(.input-shape-round) {
  --border-radius: #{globals.$ion-round-xl};
}

:host(.input-shape-rectangular) {
  --border-radius: #{globals.$ion-rectangular-xl};
}

// Ionic Input Password Toggle Sizes
// --------------------------------------------------

:host(.input-size-medium) ion-input-password-toggle {
  --size: #{globals.$ion-scale-1000};
}

:host(.input-size-large) ion-input-password-toggle {
  --size: #{globals.$ion-scale-1200};
}

:host(.input-size-xlarge) ion-input-password-toggle {
  --size: #{globals.$ion-scale-1400};
}

// Target area
// --------------------------------------------------

.native-wrapper::after {
  @include globals.position(50%, 0, null, 0);

  position: absolute;

  height: 100%;
  min-height: globals.$ion-scale-1200;

  transform: translateY(-50%);

  content: "";

  // Cursor should match the native input when hovering over the target area.
  cursor: text;
}

::slotted([slot="start"]),
::slotted([slot="end"]),
.input-clear-icon {
  /**
   * The target area has a z-index of 1, so the slotted elements
   * should be higher. Otherwise, the slotted elements will not
   * be interactable. This is especially important for the clear
   * button, which should be clickable.
   */
  z-index: 2;
}

// Start/End Slots
// ----------------------------------------------------------------

::slotted([slot="start"]) {
  margin-inline-end: globals.$ion-space-200;
}

::slotted([slot="end"]) {
  margin-inline-start: globals.$ion-space-200;
}

// Input Clear Button
// ----------------------------------------------------------------

.input-clear-icon {
  width: globals.$ion-scale-400;
  height: globals.$ion-scale-400;

  color: globals.$ion-primitives-neutral-1000;
}

.input-clear-icon:focus-visible {
  @include globals.border-radius(globals.$ion-border-radius-100);

  outline: globals.$ion-border-size-050 globals.$ion-border-style-solid globals.$ion-border-focus-default;

  opacity: 1;
}

.input-clear-icon ion-icon {
  width: 100%;
  height: 100%;
}

/**
 * The clear button should be visible if the native input
 * OR any other interactive elements in the component (the
 * clear button, slotted buttons, etc.) are focused. If we
 * only looked at the native input, tabbing to the clear
 * button would immediately hide it.
 *
 * Note that the clear button also requires the native input
 * to have any value, but this is not specific to the ionic
 * theme, so it is handled elsewhere.
 */
:host(:not(:focus-within)) .input-clear-icon {
  display: none;
}

// Input Label
// ----------------------------------------------------------------

.label-text-wrapper {
  @include globals.typography(globals.$ion-body-sm-medium);

  color: globals.$ion-primitives-neutral-1000;
}

:host(.label-floating) .label-text-wrapper {
  @include globals.transform(none);
}

// Input Bottom Content
// ----------------------------------------------------------------

.input-bottom {
  @include globals.padding(globals.$ion-space-100, 0, 0, 0);
  @include globals.typography(globals.$ion-body-sm-medium);
}

.input-bottom .helper-text,
.input-bottom .counter {
  color: globals.$ion-primitives-neutral-800;
}

:host(.has-focus.ion-valid) .helper-text {
  color: var(--highlight-color-valid);
}

:host(.has-focus.ion-valid),
:host(.ion-touched.ion-invalid) {
  --border-width: #{globals.$ion-border-size-025};
}

// Input Hover
// ----------------------------------------------------------------

@media (any-hover: hover) {
  :host(:hover) {
    --border-color: #{globals.$ion-primitives-neutral-600};
  }
}

// Input - Disabled
// ----------------------------------------------------------------

:host(.input-disabled) {
  --color: #{globals.$ion-primitives-neutral-500};
  --background: #{globals.$ion-primitives-neutral-100};
  --border-color: #{globals.$ion-primitives-neutral-300};
  --placeholder-color: #{globals.$ion-primitives-neutral-500};

  pointer-events: none;
}

:host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text,
:host(.input-disabled) .input-bottom .counter,
:host(.input-disabled) .label-text-wrapper {
  color: globals.$ion-text-disabled;
}

:host(.input-disabled.has-focus.ion-valid) {
  --border-color: rgba(#{globals.$ion-semantics-success-base-rgb}, 0.6);
}

:host(.input-disabled.ion-touched.ion-invalid) {
  --border-color: rgba(#{globals.$ion-semantics-danger-base-rgb}, 0.6);
}

:host(.input-disabled.ion-color) {
  --border-color: #{globals.current-color(base, 0.6)};
}

:host(.input-disabled.has-focus.ion-valid) .input-bottom .helper-text,
:host(.input-disabled.ion-touched.ion-invalid) .error-text {
  opacity: 0.6;
}

// Input - Readonly
// ----------------------------------------------------------------

:host(.input-readonly) {
  --background: #{globals.$ion-primitives-neutral-100};
}

// Input Focus
// ----------------------------------------------------------------

:host(.has-focus) {
  --border-color: #{globals.$ion-border-focus-default};
  --border-width: #{globals.$ion-border-size-050};
}

:host(.has-focus) .input-highlight {
  transform: scale(1);
}