TextAreaWithPrefix.ts

import { css } from '../utils';

import {
  fullStyles as textareaStyles,
  textareaWrapperStyles
} from './TextAreaCore';

export type { Props, DefaultedProps } from './TextAreaCore';
export { configurableDefaultProps } from './InputCore';

export const className = 'textarea-with-prefix';

export const fullStyles = css`
  ${textareaStyles};
  ${textareaWrapperStyles};
  display: grid;
  --tk-input-icon-gap: var(--spacing-l2);
  --tk-input-icon-end-padding: calc(
    var(--tk-input-horizontal-padding) - var(--tk-input-border-width) -
      var(--tk-input-icon-gap)
  );
  grid-template-columns:
    min-content
    auto
    var(--tk-input-icon-gap)
    var(--tk-input-icon-size)
    var(--tk-input-icon-gap)
    var(--tk-input-icon-end-padding);
  grid-template-rows: var(--tk-textarea-height) auto;
  gap: 0;
  align-items: center;
  cursor: text;
  padding: 0;

  & > :not(textarea) {
    z-index: 1;
  }

  & > :not(textarea):not(button):not(a) {
    pointer-events: none;
  }

  & > :nth-child(1) {
    grid-area: 1/1/3/1;
    border-inline-end: var(--tk-input-border-width) solid var(--border);
    background: var(--surface-raised);
    padding: 0 var(--spacing-l3);
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    line-height: var(--tk-textarea-height);
    white-space: nowrap;
    [dir='rtl'] & {
      border-top-right-radius: var(--border-radius-small);
      border-bottom-right-radius: var(--border-radius-small);
    }
    [dir='ltr'] & {
      border-top-left-radius: var(--border-radius-small);
      border-bottom-left-radius: var(--border-radius-small);
    }
  }

  & > :nth-child(3) {
    z-index: 1;
    grid-area: 1/4;
  }

  & > textarea {
    color: currentColor;
    &,
    &[data-pseudo='focus'],
    &:focus {
      outline: none;
    }
    min-width: 0;
    border: none;
    background: transparent;
    grid-area: 1/2/3/6;
    padding: calc(
        var(--tk-input-vertical-padding) - var(--tk-input-border-width)
      )
      var(--tk-input-horizontal-padding);

    &:not(:last-child) {
      padding-inline-end: calc(
        var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) +
          var(--tk-input-icon-gap)
      );
    }
  }
  &:after {
    grid-area: 1/2/3/6;
  }
  &[data-with-icon='after']:after {
    padding-inline-end: calc(
      var(--tk-input-horizontal-padding) + var(--tk-input-icon-size) +
        var(--tk-input-icon-gap)
    );
  }

  & > [data-mode='input-append'] {
    grid-area: 1/4/1/5;
    height: calc(var(--tk-input-height) - var(--tk-input-border-width) * 2);
    width: calc(
      var(--tk-input-icon-size)+ var(--tk-input-icon-gap)+
        var(--tk-input-icon-end-padding)
    );
    --tk-icon-button-padding: 8px !important;
    margin-top: 0;
    margin-bottom: 0;
    margin-inline-start: -8px;
    -webkit-margin-start: -8px;
    margin-inline-end: -11px;
    -webkit-margin-end: -11px;
  }
  &[data-size='small'] > [data-mode='input-append'] {
    margin-top: 0;
    margin-bottom: 0;
    margin-inline-start: -3px;
    -webkit-margin-start: -3px;
    margin-inline-end: -11px;
    -webkit-margin-end: -11px;
  }
`;