@ukic/web-components 2.1.0-beta.14 → 2.1.0-beta.16

package/dist/collection/components/ic-text-field/ic-text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-text-field.js","sourceRoot":"","sources":["../../../src/components/ic-text-field/ic-text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  Method,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  IcAutocompleteTypes,\n  IcAutocorrectStates,\n  IcInformationStatusOrEmpty,\n  IcValueEventDetail,\n} from \"../../interface\";\nimport { IcInformationStatus } from \"../../utils/types\";\nimport {\n  inheritAttributes,\n  debounceEvent,\n  getInputDescribedByText,\n  renderHiddenInput,\n  isEmptyString,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcAriaAutocompleteTypes,\n  IcTextFieldInputModes,\n  IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n  tag: \"ic-text-field\",\n  styleUrl: \"ic-text-field.css\",\n  shadow: true,\n})\nexport class TextField {\n  @Element() el: HTMLIcTextFieldElement;\n\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  /**\n   * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n   * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n   * @slot menu - an ic-menu component will appear below the input.\n   */\n\n  /**\n   * The ID for the input.\n   */\n  @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the input will require a value.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the read only state will be set.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The placeholder value to be displayed.\n   */\n  @Prop() placeholder: string = \"\";\n\n  /**\n   * Specify whether the text field fills the full width of the container.\n   * If `true`, this overrides the --input-width CSS variable.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The number of rows to transform the text field into a text area with a specific height.\n   */\n  @Prop() rows: number = 1;\n\n  /**\n   * If `true`, the multiline text area will be resizeable.\n   */\n  @Prop() resize: boolean = false;\n\n  /**\n   * If `true`, the small styling will be applied to the text field.\n   */\n  @Prop({ reflect: true }) small: boolean = false;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n  /**\n   * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n   */\n  @Prop() min: string | number = undefined;\n\n  /**\n   * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n   */\n  @Prop() max: string | number = undefined;\n\n  /**\n   * The maximum number of characters that can be entered in the field.\n   */\n  @Prop() maxLength: number = 0;\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   *  @internal If `true`, the validation will display inline.\n   */\n  @Prop() validationInlineInternal: boolean = false;\n\n  /**\n   * The automatic capitalisation of the text value as it is entered/edited by the user.\n   * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n   */\n  @Prop() autocapitalize = \"off\";\n\n  /**\n   * The state of autocompletion the browser can apply on the text value.\n   */\n  @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n  /**\n   * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n  /**\n   * If `true`, the form control will have input focus when the page loads.\n   */\n  @Prop() autoFocus = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n   */\n  @Prop() debounce: number = 0;\n\n  private showLeftIcon: boolean = this.hasLeftIconSlot();\n\n  @Watch(\"debounce\")\n  private debounceChanged() {\n    this.icChange = debounceEvent(this.icChange, this.debounce);\n  }\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: IcTextFieldTypes = \"text\";\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n   * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n   */\n  @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the value of the text field will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n  /**\n   * @internal The active element when focus is on the ic-menu items.\n   */\n  @Prop() ariaActiveDescendant?: string;\n  /**\n   * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n   */\n  @Prop() truncateValue?: boolean;\n\n  /**\n   * @internal Used to identify if the slotted menu is rendered\n   */\n  @Prop() ariaExpanded: string;\n\n  /**\n   * @internal Used to identify any related child component\n   */\n  @Prop() ariaOwns: string;\n\n  /**\n   * @internal Used to identify whether inputting any text triggers more predictions\n   */\n  @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n  /**\n   * @internal Used to set the role if not default textbox;\n   */\n  @Prop() role: string;\n\n  /**\n   * @internal If `true`, the hidden form input will stop rendering for form submission.\n   */\n  @Prop() hiddenInput: boolean = true;\n\n  @State() numChars: number = 0;\n  @State() maxLengthExceeded: boolean = false;\n  @State() minValueUnattained: boolean = false;\n  @State() maxValueExceeded: boolean = false;\n  @State() initialValue = this.value;\n\n  @Watch(\"value\")\n  watchValueHandler(newValue: string): void {\n    if (this.inputEl && this.inputEl.value !== newValue) {\n      this.inputEl.value = newValue;\n    }\n\n    this.numChars = newValue.length;\n\n    if (this.type === \"number\") {\n      if (newValue && Number(newValue) < Number(this.min)) {\n        this.minValueUnattained = true;\n      } else {\n        this.minValueUnattained = false;\n      }\n      if (Number(newValue) > Number(this.max)) {\n        this.maxValueExceeded = true;\n      } else {\n        this.maxValueExceeded = false;\n      }\n    }\n\n    if (this.maxLength > 0) {\n      if (newValue.length > this.maxLength) {\n        this.maxLengthExceeded = true;\n      } else {\n        this.maxLengthExceeded = false;\n      }\n    }\n    this.icChange.emit({ value: newValue });\n  }\n\n  /**\n   * Sets focus on the native `input`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.inputEl) {\n      this.inputEl.focus();\n    }\n  }\n\n  //stop keydown event bubbling up to storybook\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    this.icKeydown.emit({ event: ev });\n    ev.cancelBubble = true;\n  }\n\n  /**\n   * Emitted when a keydown event occurred.\n   */\n  @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() icInput: EventEmitter<IcValueEventDetail>;\n  private onInput = (ev: Event) => {\n    this.value = (ev.target as HTMLInputElement).value;\n    this.icInput.emit({ value: this.value });\n  };\n\n  /**\n   * Emitted when input loses focus.\n   */\n  @Event() icBlur: EventEmitter<IcValueEventDetail>;\n  private onBlur = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icBlur.emit({ value: value });\n  };\n\n  /**\n   * Emitted when input gains focus.\n   */\n  @Event() icFocus: EventEmitter<IcValueEventDetail>;\n  private onFocus = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icFocus.emit({ value: value });\n  };\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n  private isTextArea = (): boolean => {\n    return this.rows > 1;\n  };\n\n  /**\n   * @internal Emitted when the validationInlineInternal is `true`\n   */\n  @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n  private getInlineValidationText = () => {\n    this.getValidationText.emit({ value: this.validationText });\n  };\n\n  private hasLeftIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private hasStatus = (status: IcInformationStatusOrEmpty): boolean => {\n    return status !== \"\" && !this.disabled;\n  };\n\n  private showStatusText = (status: IcInformationStatusOrEmpty): boolean => {\n    if (\n      this.hasStatus(status) &&\n      !(status == IcInformationStatus.Success && this.validationInline) &&\n      !this.validationInlineInternal\n    ) {\n      return true;\n    }\n    return false;\n  };\n\n  private handleFormReset = (): void => {\n    this.value = this.initialValue;\n  };\n\n  connectedCallback(): void {\n    this.debounceChanged();\n  }\n\n  componentWillLoad(): void {\n    this.watchValueHandler(this.value);\n\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n      \"aria-autocomplete\",\n      \"aria-haspopup\",\n    ]);\n\n    if (this.readonly) {\n      this.maxLengthExceeded = false;\n      this.maxValueExceeded = false;\n      this.minValueUnattained = false;\n    }\n\n    addFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Text Field\"\n    );\n    if (this.validationInlineInternal) {\n      this.getInlineValidationText();\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  render() {\n    const {\n      inputId,\n      name,\n      label,\n      required,\n      small,\n      placeholder,\n      helperText,\n      rows,\n      resize,\n      disabled,\n      value,\n      min,\n      max,\n      maxLength,\n      numChars,\n      readonly,\n      maxLengthExceeded,\n      minValueUnattained,\n      maxValueExceeded,\n      validationStatus,\n      validationText,\n      validationInline,\n      validationInlineInternal,\n      spellcheck,\n      inputmode,\n      fullWidth,\n      truncateValue,\n      hiddenInput,\n    } = this;\n\n    const disabledMode = readonly ? true : disabled;\n\n    const placeholderText = disabled ? \"\" : placeholder;\n\n    const currentStatus =\n      maxLengthExceeded || maxValueExceeded || minValueUnattained\n        ? IcInformationStatus.Error\n        : validationStatus;\n\n    const currentValidationText = maxLengthExceeded\n      ? \"Maximum length exceeded\"\n      : maxValueExceeded\n      ? `Maximum value of ${max} exceeded`\n      : minValueUnattained\n      ? `Minimum value of ${min} not met`\n      : validationText;\n\n    const maxNumChars = readonly ? 0 : maxLength;\n\n    const messageAriaLive =\n      maxLengthExceeded ||\n      maxValueExceeded ||\n      minValueUnattained ||\n      (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n        ? \"assertive\"\n        : \"polite\";\n\n    const showStatusText = this.showStatusText(currentStatus);\n    const multiline = this.isTextArea();\n    const hiddenCharCountDescId =\n      maxLength > 0 ? inputId + \"-charcount-desc\" : \"\";\n    const describedBy = (\n      hiddenCharCountDescId +\n      \" \" +\n      getInputDescribedByText(inputId, helperText !== \"\", showStatusText)\n    ).trim();\n\n    if (this.showLeftIcon) {\n      if (!readonly && disabledMode) {\n        this.showLeftIcon = false;\n      }\n    }\n\n    const invalid =\n      currentStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n    const disabledText = disabledMode && !readonly;\n\n    if (hiddenInput) {\n      renderHiddenInput(true, this.el, name, value, disabledMode);\n    }\n    return (\n      <Host class={{ [\"fullwidth\"]: fullWidth }}>\n        <ic-input-container readonly={readonly} disabled={disabledMode}>\n          {!this.hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabledText}\n              readonly={readonly}\n            ></ic-input-label>\n          )}\n\n          <ic-input-component-container\n            small={small}\n            validationStatus={currentStatus}\n            multiLine={multiline}\n            disabled={disabledMode}\n            readonly={readonly}\n            validationInline={validationInline}\n            fullWidth={fullWidth}\n          >\n            {this.showLeftIcon && (\n              <span\n                class={{\n                  [\"readonly\"]: readonly,\n                  [\"has-value\"]: value.length > 0,\n                }}\n                slot=\"left-icon\"\n              >\n                <slot name=\"icon\" />\n              </span>\n            )}\n\n            {!multiline && (\n              <input\n                id={inputId}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                type={this.type}\n                min={min}\n                max={max}\n                value={value}\n                class={{\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                  [\"truncate-value\"]: truncateValue,\n                }}\n                placeholder={placeholderText}\n                required={required}\n                disabled={disabledMode}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                aria-activedescendant={this.ariaActiveDescendant}\n                aria-expanded={this.ariaExpanded}\n                aria-owns={this.ariaOwns}\n                autocomplete={this.autocomplete}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                role={this.role}\n                {...this.inheritedAttributes}\n              ></input>\n            )}\n            {multiline && (\n              <textarea\n                id={inputId}\n                class={{\n                  [\"no-resize\"]: resize === false || readonly,\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                }}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n                value={value}\n                rows={rows}\n                required={required}\n                disabled={disabledMode}\n                placeholder={placeholderText}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                {...this.inheritedAttributes}\n              ></textarea>\n            )}\n            {isSlotUsed(this.el, \"clear-button\") && (\n              <slot name=\"clear-button\"></slot>\n            )}\n            {isSlotUsed(this.el, \"search-submit-button\") && (\n              <slot name=\"search-submit-button\"></slot>\n            )}\n          </ic-input-component-container>\n          {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n          {(!isEmptyString(validationStatus) ||\n            !isEmptyString(validationText) ||\n            maxNumChars > 0 ||\n            maxValueExceeded ||\n            minValueUnattained) &&\n            !validationInlineInternal && (\n              <ic-input-validation\n                status={\n                  this.hasStatus(currentStatus) === false ||\n                  (currentStatus === IcInformationStatus.Success &&\n                    validationInline) ||\n                  validationInlineInternal\n                    ? \"\"\n                    : currentStatus\n                }\n                message={showStatusText ? currentValidationText : \"\"}\n                ariaLiveMode={messageAriaLive}\n                for={inputId}\n                fullWidth={fullWidth}\n              >\n                {!readonly && maxNumChars > 0 && (\n                  <div slot=\"validation-message-adornment\">\n                    <ic-typography\n                      variant=\"caption\"\n                      class={{\n                        [\"maxlengthtext\"]: true,\n                        [\"error\"]: maxLengthExceeded,\n                        [\"disabled\"]: disabledText,\n                      }}\n                    >\n                      <span\n                        aria-live=\"polite\"\n                        id={`${inputId}-charcount`}\n                        class=\"charcount\"\n                      >\n                        {numChars}/{maxNumChars}\n                      </span>\n                      <span hidden={true} id={hiddenCharCountDescId}>\n                        Field can contain a maximum of {maxNumChars} characters.\n                      </span>\n                    </ic-typography>\n                  </div>\n                )}\n              </ic-input-validation>\n            )}\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-text-field.js","sourceRoot":"","sources":["../../../src/components/ic-text-field/ic-text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,mBAAmB,GAKpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,uBAAuB,EACvB,iBAAiB,EACjB,aAAa,EACb,gCAAgC,EAChC,oBAAoB,EACpB,uBAAuB,EACvB,UAAU,EACV,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAO1D,IAAI,QAAQ,GAAG,CAAC,CAAC;AAEjB;;GAEG;AAMH,MAAM,OAAO,SAAS;;IAIZ,wBAAmB,GAA6B,EAAE,CAAC;IAsInD,iBAAY,GAAY,IAAI,CAAC,eAAe,EAAE,CAAC;IA4H/C,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,IAAI,CAAC,KAAK,GAAI,EAAE,CAAC,MAA2B,CAAC,KAAK,CAAC;MACnD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;IAMM,WAAM,GAAG,CAAC,EAAS,EAAE,EAAE;MAC7B,MAAM,KAAK,GAAI,EAAE,CAAC,MAA2B,CAAC,KAAK,CAAC;MACpD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IACrC,CAAC,CAAC;IAMM,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,MAAM,KAAK,GAAI,EAAE,CAAC,MAA2B,CAAC,KAAK,CAAC;MACpD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC;IAOM,eAAU,GAAG,GAAY,EAAE;MACjC,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACvB,CAAC,CAAC;IAOM,4BAAuB,GAAG,GAAG,EAAE;MACrC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;IAC9D,CAAC,CAAC;IAOM,cAAS,GAAG,CAAC,MAAkC,EAAW,EAAE;MAClE,OAAO,MAAM,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IACzC,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,MAAkC,EAAW,EAAE;MACvE,OAAO,CACL,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;QACtB,CAAC,CAAC,MAAM,IAAI,mBAAmB,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC;QACjE,CAAC,IAAI,CAAC,wBAAwB,CAC/B,CAAC;IACJ,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAS,EAAE;MACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;IACjC,CAAC,CAAC;mBAnTyB,uBAAuB,QAAQ,EAAE,EAAE;;oBAUlC,KAAK;oBAIL,KAAK;oBAKY,KAAK;uBAKpB,EAAE;qBAMH,KAAK;qBAKL,KAAK;sBAKL,EAAE;gBAKR,CAAC;kBAKE,KAAK;iBAKW,KAAK;iBAKS,EAAE;eAK3B,SAAS;eAKT,SAAS;qBAKZ,CAAC;4BAK0B,EAAE;0BAKxB,EAAE;4BAKC,KAAK;oCAKG,KAAK;0BAMxB,KAAK;wBAKc,KAAK;uBAKN,KAAK;qBAK5B,KAAK;oBAKE,CAAC;gBAYK,MAAM;qBAOI,MAAM;gBAK1B,IAAI,CAAC,OAAO;sBAKL,KAAK;;;;;4BAwBiB,SAAS;;uBAU9B,IAAI;oBAEP,CAAC;6BACS,KAAK;8BACJ,KAAK;4BACP,KAAK;wBAClB,IAAI,CAAC,KAAK;;EAhE1B,eAAe;IACrB,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC9D,CAAC;EAiED,iBAAiB,CAAC,QAAgB;IAChC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,QAAQ,EAAE;MACnD,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,QAAQ,CAAC;KAC/B;IAED,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC;IAEhC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,IAAI,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;QACnD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;OAChC;WAAM;QACL,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;OACjC;MACD,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;QACvC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;OAC9B;WAAM;QACL,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;OAC/B;KACF;IAED,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,EAAE;MACtB,IAAI,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;QACpC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;OAC/B;WAAM;QACL,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;OAChC;KACF;IACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;EAC1C,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB;EACH,CAAC;EAGD,aAAa,CAAC,EAAiB;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;EACrC,CAAC;EAoDO,eAAe;IACrB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACtD,OAAO,MAAM,KAAK,IAAI,CAAC;EACzB,CAAC;EAkBD,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEnC,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE;MACpD,GAAG,iBAAiB;MACpB,OAAO;MACP,mBAAmB;MACnB,eAAe;KAChB,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;MAC/B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;MAC9B,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;KACjC;IAED,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAEpD,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;EAC9C,CAAC;EAED,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;IACF,IAAI,IAAI,CAAC,wBAAwB,EAAE;MACjC,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;EACH,CAAC;EAED,oBAAoB;IAClB,uBAAuB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;EACzD,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,UAAU,EACV,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,GAAG,EACH,GAAG,EACH,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,wBAAwB,EACxB,UAAU,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,WAAW,GACZ,GAAG,IAAI,CAAC;IAET,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEhD,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;IAEpD,MAAM,aAAa,GACjB,iBAAiB,IAAI,gBAAgB,IAAI,kBAAkB;MACzD,CAAC,CAAC,mBAAmB,CAAC,KAAK;MAC3B,CAAC,CAAC,gBAAgB,CAAC;IAEvB,MAAM,qBAAqB,GAAG,iBAAiB;MAC7C,CAAC,CAAC,yBAAyB;MAC3B,CAAC,CAAC,gBAAgB;QAClB,CAAC,CAAC,oBAAoB,GAAG,WAAW;QACpC,CAAC,CAAC,kBAAkB;UACpB,CAAC,CAAC,oBAAoB,GAAG,UAAU;UACnC,CAAC,CAAC,cAAc,CAAC;IAEnB,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GACnB,iBAAiB;MACjB,gBAAgB;MAChB,kBAAkB;MAClB,CAAC,SAAS,KAAK,CAAC,IAAI,aAAa,KAAK,mBAAmB,CAAC,KAAK,CAAC;MAC9D,CAAC,CAAC,WAAW;MACb,CAAC,CAAC,QAAQ,CAAC;IAEf,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IACpC,MAAM,qBAAqB,GACzB,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnD,MAAM,WAAW,GAAG,CAClB,qBAAqB;MACrB,GAAG;MACH,uBAAuB,CAAC,OAAO,EAAE,UAAU,KAAK,EAAE,EAAE,cAAc,CAAC,CACpE,CAAC,IAAI,EAAE,CAAC;IAET,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ,IAAI,YAAY,EAAE;MAClD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;KAC3B;IAED,MAAM,OAAO,GACX,aAAa,KAAK,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IACjE,MAAM,YAAY,GAAG,YAAY,IAAI,CAAC,QAAQ,CAAC;IAE/C,IAAI,WAAW,EAAE;MACf,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC;KAC7D;IACD,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,SAAS,EAAE;MACvC,0BAAoB,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY;QAC3D,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,sBACE,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,GACF,CACnB;QAED,oCACE,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,aAAa,EAC/B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS;UAEnB,IAAI,CAAC,YAAY,IAAI,CACpB,YACE,KAAK,EAAE;cACL,CAAC,UAAU,CAAC,EAAE,QAAQ;cACtB,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC;aAChC,EACD,IAAI,EAAC,WAAW;YAEhB,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACR;UAEA,CAAC,SAAS,IAAI,CACb,2BACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAsB,CAAC,EACpD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;cACL,CAAC,aAAa,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,IAAI,QAAQ;cAC/C,CAAC,UAAU,CAAC,EAAE,QAAQ;cACtB,CAAC,gBAAgB,CAAC,EAAE,aAAa;aAClC,EACD,WAAW,EAAE,eAAe,EAC5B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,gBACT,KAAK,sBACC,WAAW,kBACf,OAAO,2BACE,IAAI,CAAC,oBAAoB,mBACjC,IAAI,CAAC,YAAY,eACrB,IAAI,CAAC,QAAQ,EACxB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,IACX,IAAI,CAAC,mBAAmB,EACrB,CACV;UACA,SAAS,IAAI,CACZ,8BACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAE;cACL,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,KAAK,IAAI,QAAQ;cAC3C,CAAC,aAAa,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,IAAI,QAAQ;cAC/C,CAAC,UAAU,CAAC,EAAE,QAAQ;aACvB,EACD,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAyB,CAAC,EACvD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,EAC5B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,gBACT,KAAK,sBACC,WAAW,kBACf,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,IAChB,IAAI,CAAC,mBAAmB,EAClB,CACb;UACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CACtC,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC;UACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,sBAAsB,CAAC,IAAI,CAC9C,YAAM,IAAI,EAAC,sBAAsB,GAAQ,CAC1C,CAC4B;QAC9B,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ;QACxD,CAAC,CAAC,aAAa,CAAC,gBAAgB,CAAC;UAChC,CAAC,aAAa,CAAC,cAAc,CAAC;UAC9B,WAAW,GAAG,CAAC;UACf,gBAAgB;UAChB,kBAAkB,CAAC;UACnB,CAAC,wBAAwB,IAAI,CAC3B,2BACE,MAAM,EACJ,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,KAAK;YACvC,CAAC,aAAa,KAAK,mBAAmB,CAAC,OAAO;cAC5C,gBAAgB,CAAC;YACnB,wBAAwB;YACtB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,aAAa,EAEnB,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EACpD,YAAY,EAAE,eAAe,EAC7B,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,SAAS,IAEnB,CAAC,QAAQ,IAAI,WAAW,GAAG,CAAC,IAAI,CAC/B,WAAK,IAAI,EAAC,8BAA8B;UACtC,qBACE,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;cACL,CAAC,eAAe,CAAC,EAAE,IAAI;cACvB,CAAC,OAAO,CAAC,EAAE,iBAAiB;cAC5B,CAAC,UAAU,CAAC,EAAE,YAAY;aAC3B;YAED,yBACY,QAAQ,EAClB,EAAE,EAAE,GAAG,OAAO,YAAY,EAC1B,KAAK,EAAC,WAAW;cAEhB,QAAQ;;cAAG,WAAW,CAClB;YACP,YAAM,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,qBAAqB;;cACX,WAAW;6BACtC,CACO,CACZ,CACP,CACmB,CACvB,CACgB,CAChB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  Method,\n  h,\n} from \"@stencil/core\";\nimport {\n  IcInformationStatus,\n  IcAutocompleteTypes,\n  IcAutocorrectStates,\n  IcInformationStatusOrEmpty,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n  inheritAttributes,\n  debounceEvent,\n  getInputDescribedByText,\n  renderHiddenInput,\n  isEmptyString,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  isSlotUsed,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcAriaAutocompleteTypes,\n  IcTextFieldInputModes,\n  IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n  tag: \"ic-text-field\",\n  styleUrl: \"ic-text-field.css\",\n  shadow: true,\n})\nexport class TextField {\n  @Element() el: HTMLIcTextFieldElement;\n\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  /**\n   * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n   * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n   * @slot menu - an ic-menu component will appear below the input.\n   */\n\n  /**\n   * The ID for the input.\n   */\n  @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the input will require a value.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the read only state will be set.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The placeholder value to be displayed.\n   */\n  @Prop() placeholder: string = \"\";\n\n  /**\n   * Specify whether the text field fills the full width of the container.\n   * If `true`, this overrides the --input-width CSS variable.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The number of rows to transform the text field into a text area with a specific height.\n   */\n  @Prop() rows: number = 1;\n\n  /**\n   * If `true`, the multiline text area will be resizeable.\n   */\n  @Prop() resize: boolean = false;\n\n  /**\n   * If `true`, the small styling will be applied to the text field.\n   */\n  @Prop({ reflect: true }) small: boolean = false;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n  /**\n   * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n   */\n  @Prop() min: string | number = undefined;\n\n  /**\n   * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n   */\n  @Prop() max: string | number = undefined;\n\n  /**\n   * The maximum number of characters that can be entered in the field.\n   */\n  @Prop() maxLength: number = 0;\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   *  @internal If `true`, the validation will display inline.\n   */\n  @Prop() validationInlineInternal: boolean = false;\n\n  /**\n   * The automatic capitalisation of the text value as it is entered/edited by the user.\n   * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n   */\n  @Prop() autocapitalize = \"off\";\n\n  /**\n   * The state of autocompletion the browser can apply on the text value.\n   */\n  @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n  /**\n   * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n  /**\n   * If `true`, the form control will have input focus when the page loads.\n   */\n  @Prop() autoFocus = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n   */\n  @Prop() debounce: number = 0;\n\n  private showLeftIcon: boolean = this.hasLeftIconSlot();\n\n  @Watch(\"debounce\")\n  private debounceChanged() {\n    this.icChange = debounceEvent(this.icChange, this.debounce);\n  }\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: IcTextFieldTypes = \"text\";\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n   * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n   */\n  @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the value of the text field will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n  /**\n   * @internal The active element when focus is on the ic-menu items.\n   */\n  @Prop() ariaActiveDescendant?: string;\n  /**\n   * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n   */\n  @Prop() truncateValue?: boolean;\n\n  /**\n   * @internal Used to identify if the slotted menu is rendered\n   */\n  @Prop() ariaExpanded: string;\n\n  /**\n   * @internal Used to identify any related child component\n   */\n  @Prop() ariaOwns: string;\n\n  /**\n   * @internal Used to identify whether inputting any text triggers more predictions\n   */\n  @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n  /**\n   * @internal Used to set the role if not default textbox;\n   */\n  @Prop() role: string;\n\n  /**\n   * @internal If `true`, the hidden form input will stop rendering for form submission.\n   */\n  @Prop() hiddenInput: boolean = true;\n\n  @State() numChars: number = 0;\n  @State() maxLengthExceeded: boolean = false;\n  @State() minValueUnattained: boolean = false;\n  @State() maxValueExceeded: boolean = false;\n  @State() initialValue = this.value;\n\n  @Watch(\"value\")\n  watchValueHandler(newValue: string): void {\n    if (this.inputEl && this.inputEl.value !== newValue) {\n      this.inputEl.value = newValue;\n    }\n\n    this.numChars = newValue.length;\n\n    if (this.type === \"number\") {\n      if (newValue && Number(newValue) < Number(this.min)) {\n        this.minValueUnattained = true;\n      } else {\n        this.minValueUnattained = false;\n      }\n      if (Number(newValue) > Number(this.max)) {\n        this.maxValueExceeded = true;\n      } else {\n        this.maxValueExceeded = false;\n      }\n    }\n\n    if (this.maxLength > 0) {\n      if (newValue.length > this.maxLength) {\n        this.maxLengthExceeded = true;\n      } else {\n        this.maxLengthExceeded = false;\n      }\n    }\n    this.icChange.emit({ value: newValue });\n  }\n\n  /**\n   * Sets focus on the native `input`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.inputEl) {\n      this.inputEl.focus();\n    }\n  }\n\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    this.icKeydown.emit({ event: ev });\n  }\n\n  /**\n   * Emitted when a keydown event occurred.\n   */\n  @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() icInput: EventEmitter<IcValueEventDetail>;\n  private onInput = (ev: Event) => {\n    this.value = (ev.target as HTMLInputElement).value;\n    this.icInput.emit({ value: this.value });\n  };\n\n  /**\n   * Emitted when input loses focus.\n   */\n  @Event() icBlur: EventEmitter<IcValueEventDetail>;\n  private onBlur = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icBlur.emit({ value: value });\n  };\n\n  /**\n   * Emitted when input gains focus.\n   */\n  @Event() icFocus: EventEmitter<IcValueEventDetail>;\n  private onFocus = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icFocus.emit({ value: value });\n  };\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n  private isTextArea = (): boolean => {\n    return this.rows > 1;\n  };\n\n  /**\n   * @internal Emitted when the validationInlineInternal is `true`\n   */\n  @Event() getValidationText: EventEmitter<IcValueEventDetail>;\n\n  private getInlineValidationText = () => {\n    this.getValidationText.emit({ value: this.validationText });\n  };\n\n  private hasLeftIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    return iconEl !== null;\n  }\n\n  private hasStatus = (status: IcInformationStatusOrEmpty): boolean => {\n    return status !== \"\" && !this.disabled;\n  };\n\n  private showStatusText = (status: IcInformationStatusOrEmpty): boolean => {\n    return (\n      this.hasStatus(status) &&\n      !(status == IcInformationStatus.Success && this.validationInline) &&\n      !this.validationInlineInternal\n    );\n  };\n\n  private handleFormReset = (): void => {\n    this.value = this.initialValue;\n  };\n\n  connectedCallback(): void {\n    this.debounceChanged();\n  }\n\n  componentWillLoad(): void {\n    this.watchValueHandler(this.value);\n\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n      \"aria-autocomplete\",\n      \"aria-haspopup\",\n    ]);\n\n    if (this.readonly) {\n      this.maxLengthExceeded = false;\n      this.maxValueExceeded = false;\n      this.minValueUnattained = false;\n    }\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Text Field\"\n    );\n    if (this.validationInlineInternal) {\n      this.getInlineValidationText();\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  render() {\n    const {\n      inputId,\n      name,\n      label,\n      required,\n      small,\n      placeholder,\n      helperText,\n      rows,\n      resize,\n      disabled,\n      value,\n      min,\n      max,\n      maxLength,\n      numChars,\n      readonly,\n      maxLengthExceeded,\n      minValueUnattained,\n      maxValueExceeded,\n      validationStatus,\n      validationText,\n      validationInline,\n      validationInlineInternal,\n      spellcheck,\n      inputmode,\n      fullWidth,\n      truncateValue,\n      hiddenInput,\n    } = this;\n\n    const disabledMode = readonly ? true : disabled;\n\n    const placeholderText = disabled ? \"\" : placeholder;\n\n    const currentStatus =\n      maxLengthExceeded || maxValueExceeded || minValueUnattained\n        ? IcInformationStatus.Error\n        : validationStatus;\n\n    const currentValidationText = maxLengthExceeded\n      ? \"Maximum length exceeded\"\n      : maxValueExceeded\n      ? `Maximum value of ${max} exceeded`\n      : minValueUnattained\n      ? `Minimum value of ${min} not met`\n      : validationText;\n\n    const maxNumChars = readonly ? 0 : maxLength;\n\n    const messageAriaLive =\n      maxLengthExceeded ||\n      maxValueExceeded ||\n      minValueUnattained ||\n      (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n        ? \"assertive\"\n        : \"polite\";\n\n    const showStatusText = this.showStatusText(currentStatus);\n    const multiline = this.isTextArea();\n    const hiddenCharCountDescId =\n      maxLength > 0 ? inputId + \"-charcount-desc\" : \"\";\n    const describedBy = (\n      hiddenCharCountDescId +\n      \" \" +\n      getInputDescribedByText(inputId, helperText !== \"\", showStatusText)\n    ).trim();\n\n    if (this.showLeftIcon && !readonly && disabledMode) {\n      this.showLeftIcon = false;\n    }\n\n    const invalid =\n      currentStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n    const disabledText = disabledMode && !readonly;\n\n    if (hiddenInput) {\n      renderHiddenInput(true, this.el, name, value, disabledMode);\n    }\n    return (\n      <Host class={{ [\"fullwidth\"]: fullWidth }}>\n        <ic-input-container readonly={readonly} disabled={disabledMode}>\n          {!this.hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabledText}\n              readonly={readonly}\n            ></ic-input-label>\n          )}\n\n          <ic-input-component-container\n            small={small}\n            validationStatus={currentStatus}\n            multiLine={multiline}\n            disabled={disabledMode}\n            readonly={readonly}\n            validationInline={validationInline}\n            fullWidth={fullWidth}\n          >\n            {this.showLeftIcon && (\n              <span\n                class={{\n                  [\"readonly\"]: readonly,\n                  [\"has-value\"]: value.length > 0,\n                }}\n                slot=\"left-icon\"\n              >\n                <slot name=\"icon\" />\n              </span>\n            )}\n\n            {!multiline && (\n              <input\n                id={inputId}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                type={this.type}\n                min={min}\n                max={max}\n                value={value}\n                class={{\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                  [\"truncate-value\"]: truncateValue,\n                }}\n                placeholder={placeholderText}\n                required={required}\n                disabled={disabledMode}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                aria-activedescendant={this.ariaActiveDescendant}\n                aria-expanded={this.ariaExpanded}\n                aria-owns={this.ariaOwns}\n                autocomplete={this.autocomplete}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                role={this.role}\n                {...this.inheritedAttributes}\n              ></input>\n            )}\n            {multiline && (\n              <textarea\n                id={inputId}\n                class={{\n                  [\"no-resize\"]: resize === false || readonly,\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                }}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n                value={value}\n                rows={rows}\n                required={required}\n                disabled={disabledMode}\n                placeholder={placeholderText}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                {...this.inheritedAttributes}\n              ></textarea>\n            )}\n            {isSlotUsed(this.el, \"clear-button\") && (\n              <slot name=\"clear-button\"></slot>\n            )}\n            {isSlotUsed(this.el, \"search-submit-button\") && (\n              <slot name=\"search-submit-button\"></slot>\n            )}\n          </ic-input-component-container>\n          {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n          {(!isEmptyString(validationStatus) ||\n            !isEmptyString(validationText) ||\n            maxNumChars > 0 ||\n            maxValueExceeded ||\n            minValueUnattained) &&\n            !validationInlineInternal && (\n              <ic-input-validation\n                status={\n                  this.hasStatus(currentStatus) === false ||\n                  (currentStatus === IcInformationStatus.Success &&\n                    validationInline) ||\n                  validationInlineInternal\n                    ? \"\"\n                    : currentStatus\n                }\n                message={showStatusText ? currentValidationText : \"\"}\n                ariaLiveMode={messageAriaLive}\n                for={inputId}\n                fullWidth={fullWidth}\n              >\n                {!readonly && maxNumChars > 0 && (\n                  <div slot=\"validation-message-adornment\">\n                    <ic-typography\n                      variant=\"caption\"\n                      class={{\n                        [\"maxlengthtext\"]: true,\n                        [\"error\"]: maxLengthExceeded,\n                        [\"disabled\"]: disabledText,\n                      }}\n                    >\n                      <span\n                        aria-live=\"polite\"\n                        id={`${inputId}-charcount`}\n                        class=\"charcount\"\n                      >\n                        {numChars}/{maxNumChars}\n                      </span>\n                      <span hidden={true} id={hiddenCharCountDescId}>\n                        Field can contain a maximum of {maxNumChars} characters.\n                      </span>\n                    </ic-typography>\n                  </div>\n                )}\n              </ic-input-validation>\n            )}\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-text-field/ic-text-field.textarea.spec.js

@@ -0,0 +1,310 @@
+import { TextField } from "./ic-text-field";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-text-field", () => {
+  it("renders a textarea", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" value="">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-0" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-0" inputmode="text" name="ic-text-field-input-0" placeholder="" rows="6" value=""></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-0" type="hidden" value="">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with placeholder", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" placeholder="placeholder"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" placeholder="placeholder" rows="6" value="">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-1" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-1" inputmode="text" name="ic-text-field-input-1" placeholder="placeholder" rows="6" value=""></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-1" type="hidden" value="">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with value", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-2" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-2" inputmode="text" name="ic-text-field-input-2" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-2" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with helperText, required and small", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" helper-text="helper text value" required=true small=true></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field small="" helper-text="helper text value" label="Test label" required="true" rows="6" value="">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-3" helpertext="helper text value" label="Test label" required=""></ic-input-label>
+            <ic-input-component-container small="" multiline="" validationstatus=""><textarea aria-describedby="ic-text-field-input-3-helper-text" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-3" inputmode="text" name="ic-text-field-input-3" placeholder="" required="" rows="6" value=""></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-3" type="hidden" value="">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with autoprops", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" value="test value" autofocus=true autocapitalize="on" autocomplete="on" autocorrect="on"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field autocapitalize="on" autocomplete="on" autocorrect="on" autofocus="true" label="Test label" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-4" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="on" class="no-resize" id="ic-text-field-input-4" inputmode="text" name="ic-text-field-input-4" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-4" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with hidden label", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" value="test value" hide-label=true></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field hide-label="true" label="Test label" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-5" inputmode="text" name="ic-text-field-input-5" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-5" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with icon", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label">
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" value="">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-6" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus="">
+              <span slot="left-icon">
+                <slot name="icon"></slot>
+              </span><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-6" inputmode="text" name="ic-text-field-input-6" placeholder="" rows="6" value=""></textarea>
+            </ic-input-component-container>
+        </ic-input-container>
+        </mock:shadow-root>
+        <svg fill="#000000" height="24px" slot="icon" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"></path>
+        </svg>
+        <input class="ic-input" name="ic-text-field-input-6" type="hidden" value="">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea disabled", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" value="test value" disabled=true></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field disabled="true" label="Test label" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container disabled="">
+            <ic-input-label disabled="" for="ic-text-field-input-7" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container disabled="" multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" disabled="" id="ic-text-field-input-7" inputmode="text" name="ic-text-field-input-7" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" disabled="" name="ic-text-field-input-7" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea readonly", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows="6" label="Test label" value="test value" readonly=true></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" readonly="" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container disabled="" readonly="">
+            <ic-input-label for="ic-text-field-input-8" helpertext="" label="Test label" readonly=""></ic-input-label>
+            <ic-input-component-container disabled="" multiline="" readonly="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-left-pad no-resize readonly" disabled="" id="ic-text-field-input-8" inputmode="text" name="ic-text-field-input-8" placeholder="" readonly="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" disabled="" name="ic-text-field-input-8" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with max length", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=6 label="Test label" value="a long test value to exceed limit" max-length=25></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-text-field label="Test label" max-length="25" rows="6" value="a long test value to exceed limit">
+      <mock:shadow-root>
+        <ic-input-container>
+          <ic-input-label for="ic-text-field-input-9" helpertext="" label="Test label"></ic-input-label>
+          <ic-input-component-container multiline="" validationstatus="error"><textarea aria-describedby="ic-text-field-input-9-charcount-desc ic-text-field-input-9-validation-text" aria-invalid="true" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-9" inputmode="text" name="ic-text-field-input-9" placeholder="" rows="6" value="a long test value to exceed limit"></textarea>
+        </ic-input-component-container>
+    <ic-input-validation arialivemode="assertive" for="ic-text-field-input-9" message="Maximum length exceeded" status="error">
+            <div slot="validation-message-adornment">
+              <ic-typography class="error maxlengthtext" variant="caption">
+                <span aria-live="polite" id="ic-text-field-input-9-charcount" class="charcount">
+                  33/25
+                </span>
+                <span hidden="" id="ic-text-field-input-9-charcount-desc">
+                  Field can contain a maximum of 25 characters.
+                </span>
+              </ic-typography>
+            </div>
+          </ic-input-validation>
+        </ic-input-container>
+      </mock:shadow-root>
+      <input class="ic-input" name="ic-text-field-input-9" type="hidden" value="a long test value to exceed limit">
+    </ic-text-field>
+    `);
+  });
+  it("renders textarea with name & full width", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=2 label="Test label" value="test value" name="mycontolname" full-width=true></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field class="fullwidth" full-width="true" label="Test label" name="mycontolname" rows="2" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-10" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container fullwidth="" multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-10" inputmode="text" name="mycontolname" placeholder="" rows="2" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="mycontolname" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with success validation", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=6 label="Test label" validation-status="success" validation-text="Good choice!" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" validation-status="success" validation-text="Good choice!" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-11" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus="success"><textarea aria-describedby="ic-text-field-input-11-validation-text" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-11" inputmode="text" name="ic-text-field-input-11" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+        <ic-input-validation arialivemode="polite" for="ic-text-field-input-11" message="Good choice!" status="success"></ic-input-validation>
+          </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-11" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with warning validation", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=6 label="Test label" validation-status="warning" validation-text="warning text" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" validation-status="warning" validation-text="warning text" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-12" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus="warning"><textarea aria-describedby="ic-text-field-input-12-validation-text" aria-invalid="false" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-12" inputmode="text" name="ic-text-field-input-12" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+        <ic-input-validation arialivemode="polite" for="ic-text-field-input-12" message="warning text" status="warning"></ic-input-validation>
+          </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-12" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with error validation", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=6 label="Test label" validation-status="error" validation-text="error text" value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" rows="6" validation-status="error" validation-text="error text" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-13" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus="error"><textarea aria-describedby="ic-text-field-input-13-validation-text" aria-invalid="true" aria-label="Test label" autocapitalize="off" class="no-resize" id="ic-text-field-input-13" inputmode="text" name="ic-text-field-input-13" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+        <ic-input-validation arialivemode="assertive" for="ic-text-field-input-13" message="error text" status="error"></ic-input-validation>
+          </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-13" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+  it("renders textarea with resize", async () => {
+    const page = await newSpecPage({
+      components: [TextField],
+      html: `<ic-text-field rows=6 label="Test label" resize=true value="test value"></ic-text-field>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-text-field label="Test label" resize="true" rows="6" value="test value">
+        <mock:shadow-root>
+          <ic-input-container>
+            <ic-input-label for="ic-text-field-input-14" helpertext="" label="Test label"></ic-input-label>
+            <ic-input-component-container multiline="" validationstatus=""><textarea aria-describedby="" aria-invalid="false" aria-label="Test label" autocapitalize="off" id="ic-text-field-input-14" inputmode="text" name="ic-text-field-input-14" placeholder="" rows="6" value="test value"></textarea>
+          </ic-input-component-container>
+      </ic-input-container>
+        </mock:shadow-root>
+        <input class="ic-input" name="ic-text-field-input-14" type="hidden" value="test value">
+      </ic-text-field>
+    `);
+  });
+});
+//# sourceMappingURL=ic-text-field.textarea.spec.js.map

package/dist/collection/components/ic-text-field/ic-text-field.textarea.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-text-field.textarea.spec.js","sourceRoot":"","sources":["../../../src/components/ic-text-field/ic-text-field.textarea.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TextField } from \"./ic-text-field\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-text-field\", () => {\n  it(\"renders a textarea\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" value=\"\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-0\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-0\" inputmode=\"text\" name=\"ic-text-field-input-0\" placeholder=\"\" rows=\"6\" value=\"\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-0\" type=\"hidden\" value=\"\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with placeholder\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" placeholder=\"placeholder\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" placeholder=\"placeholder\" rows=\"6\" value=\"\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-1\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-1\" inputmode=\"text\" name=\"ic-text-field-input-1\" placeholder=\"placeholder\" rows=\"6\" value=\"\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-1\" type=\"hidden\" value=\"\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with value\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-2\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-2\" inputmode=\"text\" name=\"ic-text-field-input-2\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-2\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with helperText, required and small\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" helper-text=\"helper text value\" required=true small=true></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field small=\"\" helper-text=\"helper text value\" label=\"Test label\" required=\"true\" rows=\"6\" value=\"\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-3\" helpertext=\"helper text value\" label=\"Test label\" required=\"\"></ic-input-label>\n            <ic-input-component-container small=\"\" multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"ic-text-field-input-3-helper-text\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-3\" inputmode=\"text\" name=\"ic-text-field-input-3\" placeholder=\"\" required=\"\" rows=\"6\" value=\"\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-3\" type=\"hidden\" value=\"\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with autoprops\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" autofocus=true autocapitalize=\"on\" autocomplete=\"on\" autocorrect=\"on\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field autocapitalize=\"on\" autocomplete=\"on\" autocorrect=\"on\" autofocus=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-4\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"on\" class=\"no-resize\" id=\"ic-text-field-input-4\" inputmode=\"text\" name=\"ic-text-field-input-4\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-4\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with hidden label\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" hide-label=true></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field hide-label=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-5\" inputmode=\"text\" name=\"ic-text-field-input-5\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-5\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with icon\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path\n            d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\"\n          />\n        </svg>\n      </ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" value=\"\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-6\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\">\n              <span slot=\"left-icon\">\n                <slot name=\"icon\"></slot>\n              </span><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-6\" inputmode=\"text\" name=\"ic-text-field-input-6\" placeholder=\"\" rows=\"6\" value=\"\"></textarea>\n            </ic-input-component-container>\n        </ic-input-container>\n        </mock:shadow-root>\n        <svg fill=\"#000000\" height=\"24px\" slot=\"icon\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n          <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\"></path>\n        </svg>\n        <input class=\"ic-input\" name=\"ic-text-field-input-6\" type=\"hidden\" value=\"\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea disabled\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" disabled=true></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field disabled=\"true\" label=\"Test label\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container disabled=\"\">\n            <ic-input-label disabled=\"\" for=\"ic-text-field-input-7\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container disabled=\"\" multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" disabled=\"\" id=\"ic-text-field-input-7\" inputmode=\"text\" name=\"ic-text-field-input-7\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" disabled=\"\" name=\"ic-text-field-input-7\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea readonly\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=\"6\" label=\"Test label\" value=\"test value\" readonly=true></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" readonly=\"\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container disabled=\"\" readonly=\"\">\n            <ic-input-label for=\"ic-text-field-input-8\" helpertext=\"\" label=\"Test label\" readonly=\"\"></ic-input-label>\n            <ic-input-component-container disabled=\"\" multiline=\"\" readonly=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-left-pad no-resize readonly\" disabled=\"\" id=\"ic-text-field-input-8\" inputmode=\"text\" name=\"ic-text-field-input-8\" placeholder=\"\" readonly=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" disabled=\"\" name=\"ic-text-field-input-8\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with max length\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=6 label=\"Test label\" value=\"a long test value to exceed limit\" max-length=25></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-text-field label=\"Test label\" max-length=\"25\" rows=\"6\" value=\"a long test value to exceed limit\">\n      <mock:shadow-root>\n        <ic-input-container>\n          <ic-input-label for=\"ic-text-field-input-9\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n          <ic-input-component-container multiline=\"\" validationstatus=\"error\"><textarea aria-describedby=\"ic-text-field-input-9-charcount-desc ic-text-field-input-9-validation-text\" aria-invalid=\"true\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-9\" inputmode=\"text\" name=\"ic-text-field-input-9\" placeholder=\"\" rows=\"6\" value=\"a long test value to exceed limit\"></textarea>\n        </ic-input-component-container>\n    <ic-input-validation arialivemode=\"assertive\" for=\"ic-text-field-input-9\" message=\"Maximum length exceeded\" status=\"error\">\n            <div slot=\"validation-message-adornment\">\n              <ic-typography class=\"error maxlengthtext\" variant=\"caption\">\n                <span aria-live=\"polite\" id=\"ic-text-field-input-9-charcount\" class=\"charcount\">\n                  33/25\n                </span>\n                <span hidden=\"\" id=\"ic-text-field-input-9-charcount-desc\">\n                  Field can contain a maximum of 25 characters.\n                </span>\n              </ic-typography>\n            </div>\n          </ic-input-validation>\n        </ic-input-container>\n      </mock:shadow-root>\n      <input class=\"ic-input\" name=\"ic-text-field-input-9\" type=\"hidden\" value=\"a long test value to exceed limit\">\n    </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with name & full width\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=2 label=\"Test label\" value=\"test value\" name=\"mycontolname\" full-width=true></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field class=\"fullwidth\" full-width=\"true\" label=\"Test label\" name=\"mycontolname\" rows=\"2\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-10\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container fullwidth=\"\" multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-10\" inputmode=\"text\" name=\"mycontolname\" placeholder=\"\" rows=\"2\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"mycontolname\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with success validation\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"success\" validation-text=\"Good choice!\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"success\" validation-text=\"Good choice!\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-11\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"success\"><textarea aria-describedby=\"ic-text-field-input-11-validation-text\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-11\" inputmode=\"text\" name=\"ic-text-field-input-11\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n        <ic-input-validation arialivemode=\"polite\" for=\"ic-text-field-input-11\" message=\"Good choice!\" status=\"success\"></ic-input-validation>\n          </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-11\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with warning validation\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"warning\" validation-text=\"warning text\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"warning\" validation-text=\"warning text\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-12\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"warning\"><textarea aria-describedby=\"ic-text-field-input-12-validation-text\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-12\" inputmode=\"text\" name=\"ic-text-field-input-12\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n        <ic-input-validation arialivemode=\"polite\" for=\"ic-text-field-input-12\" message=\"warning text\" status=\"warning\"></ic-input-validation>\n          </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-12\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with error validation\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=6 label=\"Test label\" validation-status=\"error\" validation-text=\"error text\" value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" rows=\"6\" validation-status=\"error\" validation-text=\"error text\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-13\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"error\"><textarea aria-describedby=\"ic-text-field-input-13-validation-text\" aria-invalid=\"true\" aria-label=\"Test label\" autocapitalize=\"off\" class=\"no-resize\" id=\"ic-text-field-input-13\" inputmode=\"text\" name=\"ic-text-field-input-13\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n        <ic-input-validation arialivemode=\"assertive\" for=\"ic-text-field-input-13\" message=\"error text\" status=\"error\"></ic-input-validation>\n          </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-13\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n\n  it(\"renders textarea with resize\", async () => {\n    const page = await newSpecPage({\n      components: [TextField],\n      html: `<ic-text-field rows=6 label=\"Test label\" resize=true value=\"test value\"></ic-text-field>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-text-field label=\"Test label\" resize=\"true\" rows=\"6\" value=\"test value\">\n        <mock:shadow-root>\n          <ic-input-container>\n            <ic-input-label for=\"ic-text-field-input-14\" helpertext=\"\" label=\"Test label\"></ic-input-label>\n            <ic-input-component-container multiline=\"\" validationstatus=\"\"><textarea aria-describedby=\"\" aria-invalid=\"false\" aria-label=\"Test label\" autocapitalize=\"off\" id=\"ic-text-field-input-14\" inputmode=\"text\" name=\"ic-text-field-input-14\" placeholder=\"\" rows=\"6\" value=\"test value\"></textarea>\n          </ic-input-component-container>\n      </ic-input-container>\n        </mock:shadow-root>\n        <input class=\"ic-input\" name=\"ic-text-field-input-14\" type=\"hidden\" value=\"test value\">\n      </ic-text-field>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-theme/ic-theme.e2e.js

@@ -0,0 +1,72 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-theme", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-theme></ic-theme>`);
+    const element = await page.find("ic-theme");
+    expect(element).toHaveClass("hydrated");
+  });
+  it("should emit themeChange when setThemeRGB method called", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-theme></ic-theme>`);
+    const spy = await page.spyOnEvent("themeChange");
+    await page.$eval("ic-theme", (elm) => {
+      elm.color = "rgb(255, 201, 60)";
+    });
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventDetail({
+      mode: "dark",
+      color: {
+        a: 1,
+        b: 60,
+        g: 201,
+        r: 255,
+      },
+    });
+    await page.$eval("ic-theme", (elm) => {
+      elm.color = "rgb(35, 81, 142)";
+    });
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventDetail({
+      mode: "light",
+      color: {
+        a: 1,
+        b: 142,
+        g: 81,
+        r: 35,
+      },
+    });
+  });
+  it("should emit correct textColor when rgb values invalid", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<ic-theme></ic-theme>");
+    const spy = await page.spyOnEvent("themeChange");
+    await page.$eval("ic-theme", (elm) => {
+      elm.color = "rgb(1000, 1000, 1000)";
+    });
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventDetail({
+      mode: "dark",
+      color: {
+        a: 1,
+        b: 1000,
+        g: 1000,
+        r: 1000,
+      },
+    });
+    await page.$eval("ic-theme", (elm) => {
+      elm.color = "rgb(-1, -1, -1)";
+    });
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventDetail({
+      mode: "light",
+      color: {
+        a: 1,
+        b: -1,
+        g: -1,
+        r: -1,
+      },
+    });
+  });
+});
+//# sourceMappingURL=ic-theme.e2e.js.map

package/dist/collection/components/ic-theme/ic-theme.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-theme.e2e.js","sourceRoot":"","sources":["../../../src/components/ic-theme/ic-theme.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-theme\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const element = await page.find(\"ic-theme\");\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should emit themeChange when setThemeRGB method called\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(255, 201, 60)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 60,\n        g: 201,\n        r: 255,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(35, 81, 142)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: 142,\n        g: 81,\n        r: 35,\n      },\n    });\n  });\n\n  it(\"should emit correct textColor when rgb values invalid\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\"<ic-theme></ic-theme>\");\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(1000, 1000, 1000)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 1000,\n        g: 1000,\n        r: 1000,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(-1, -1, -1)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: -1,\n        g: -1,\n        r: -1,\n      },\n    });\n  });\n});\n"]}