ids-enterprise-wc 1.0.0-beta.14 → 1.0.0-beta.16

package/chunks/ids-chunk-RL4NAQQE.js

@@ -0,0 +1,966 @@
+import{a as C}from"./ids-chunk-N4PGPFE5.js";import{a as T}from"./ids-chunk-27XAFGEX.js";import{a as R}from"./ids-chunk-FH6Y4MTJ.js";import{a as D}from"./ids-chunk-V7XUWW5B.js";import{a as s,b as d,c as u,d as N}from"./ids-chunk-SBYA6MC4.js";import{a as O}from"./ids-chunk-FYDKD3TL.js";import{b as P}from"./ids-chunk-SCWD3ICQ.js";import{a as S}from"./ids-chunk-Y4WUDVCZ.js";import{a as I}from"./ids-chunk-NWQJK4KK.js";import{a as k}from"./ids-chunk-B5JKAHB2.js";import{a as L}from"./ids-chunk-CYHGXCKL.js";import{a as x}from"./ids-chunk-MXFCUDLP.js";import{a as w}from"./ids-chunk-T6ZV4PDM.js";import{a as y}from"./ids-chunk-B6P5AQ2Z.js";import{a as E}from"./ids-chunk-VD3FN2LH.js";import{a as g,b as m}from"./ids-chunk-XE4WFW5M.js";import{a as A}from"./ids-chunk-DCNGT4R2.js";import{e as r}from"./ids-chunk-TJKIW3GF.js";import{a as i}from"./ids-chunk-6EMRTLSG.js";import{a as f}from"./ids-chunk-5K6IDMGA.js";var B=`
+@charset "UTF-8";
+/**
+ * Css for clearable mixin
+ */
+.ids-input .ids-input-field .btn-clear,
+.ids-input .ids-textarea-field .btn-clear,
+.ids-textarea .ids-input-field .btn-clear,
+.ids-textarea .ids-textarea-field .btn-clear {
+  outline: 0;
+}
+.ids-input .ids-input-field .btn-clear.is-empty,
+.ids-input .ids-textarea-field .btn-clear.is-empty,
+.ids-textarea .ids-input-field .btn-clear.is-empty,
+.ids-textarea .ids-textarea-field .btn-clear.is-empty {
+  display: none;
+}
+.ids-input .ids-input-field .btn-clear [slot=icon],
+.ids-input .ids-textarea-field .btn-clear [slot=icon],
+.ids-textarea .ids-input-field .btn-clear [slot=icon],
+.ids-textarea .ids-textarea-field .btn-clear [slot=icon] {
+  margin-inline-start: 0;
+  color: inherit;
+}
+.ids-input.has-clearable .btn-clear,
+.ids-textarea.has-clearable .btn-clear {
+  margin-inline-end: 4px;
+}
+.ids-input.has-clearable .btn-clear.is-empty,
+.ids-textarea.has-clearable .btn-clear.is-empty {
+  display: initial;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.ids-trigger-field .ids-input-field.has-clearable {
+  padding-inline-end: 55px;
+}
+.ids-trigger-field .ids-input-field.has-clearable ~ .btn-clear {
+  margin-top: 0;
+  right: -8px;
+}
+
+.btn-clear[part=clearable-button] [slot=icon] {
+  padding: 2px;
+}
+
+.icon-dirty {
+  position: absolute;
+  color: var(--ids-color-caution-30);
+  top: 1px;
+}
+.icon-dirty[dir=rtl] {
+  transform: rotate(90deg);
+  top: 0;
+}
+
+.ids-color-picker .icon-dirty {
+  margin-inline-start: 35px;
+}
+
+.ids-color-picker.compact .icon-dirty {
+  margin-inline-start: 27px;
+}
+
+.ids-textarea .icon-dirty {
+  top: 0;
+  margin-inline-start: 1px;
+}
+.ids-textarea .icon-dirty[dir=rtl] {
+  top: 1px;
+}
+
+.label-state-hidden .ids-label-text.empty::before {
+  content: "\xA0";
+}
+
+.label-state-collapsed .ids-label-text {
+  display: none;
+}
+
+.validation-message {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: flex;
+  font-family: var(--ids-font-family-default);
+  margin-top: var(--ids-space-30);
+}
+.validation-message.has-custom-icon {
+  color: var(--ids-icon-color-default);
+}
+.validation-message.disabled {
+  color: var(--ids-input-color-text-disabled);
+}
+.validation-message .ids-icon {
+  margin-inline-end: var(--ids-space-30);
+}
+.validation-message.alert {
+  color: var(--ids-color-caution-default);
+}
+.validation-message.alert.disabled {
+  color: var(--ids-color-caution-30);
+}
+.validation-message.warning {
+  color: var(--ids-color-warning-default);
+}
+.validation-message.warning.disabled {
+  color: var(--ids-color-warning-30);
+}
+.validation-message.error {
+  color: var(--ids-color-error-default);
+}
+.validation-message.error.disabled {
+  color: var(--ids-color-error-30);
+}
+.validation-message.info {
+  color: var(--ids-color-info-default);
+}
+.validation-message.info.disabled {
+  color: var(--ids-color-info-30);
+}
+.validation-message.success {
+  color: var(--ids-color-success-default);
+}
+.validation-message.success.disabled {
+  color: var(--ids-color-success-30);
+}
+
+/* stylelint-disable */
+/* stylelint-enable */
+/* in case of external label in compound component */
+.ids-label-text {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: var(--ids-font-family-default);
+  color: var(--ids-input-label-color-text-default);
+  display: flex;
+  margin-block-end: var(--ids-input-margin-bottom);
+  align-items: baseline;
+  justify-content: inherit;
+}
+.ids-label-text.empty::before {
+  content: "\xA0";
+}
+.ids-label-text.required::after {
+  position: relative;
+  font-family: var(--ids-font-family-default);
+  margin-inline-start: var(--ids-space-20);
+  margin-inline-end: var(--ids-space-20);
+  font-size: var(--ids-font-size-50);
+  color: var(--ids-input-required-indicator-color-text-default);
+  content: "*";
+  margin-top: -10px;
+  top: 1px;
+  line-height: 0;
+}
+.ids-label-text.required.no-required-indicator::after, .ids-label-text.required.empty::after {
+  content: "";
+}
+.ids-label-text ids-text::part(text),
+.ids-label-text .ids-text {
+  display: inline;
+}
+
+.disabled .ids-label-text {
+  color: var(--ids-color-text-disabled);
+}
+.disabled .ids-label-text.required::after {
+  color: var(--ids-input-required-indicator-color-text-disabled);
+}
+
+:host {
+  display: block;
+  max-width: var(--ids-input-width-full);
+}
+:host .ids-input {
+  display: inline-block;
+}
+
+:host([size=full]) {
+  width: 100%;
+}
+
+:host([label-wrap=ellipsis]) .ids-label-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:host([label-wrap=ellipsis]) .ids-label-text.required {
+  padding-inline-end: 8px;
+}
+:host([label-wrap=ellipsis]) .ids-label-text.required::after {
+  display: block;
+  margin-top: unset;
+  margin-inline-start: 100%;
+  top: -8px;
+}
+
+:host([label-wrap=ellipsis-no-stretch]) .ids-label-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:host([label-wrap=ellipsis-no-stretch]) .ids-label-text.required {
+  padding-inline-end: 8px;
+}
+:host([label-wrap=ellipsis-no-stretch]) .ids-label-text.required::after {
+  display: block;
+  margin-top: unset;
+  margin-inline-start: 100%;
+  top: -8px;
+}
+:host([label-wrap=ellipsis-no-stretch]) .xs .ids-label-text {
+  max-width: calc(var(--ids-input-width-10) - 2px);
+}
+:host([label-wrap=ellipsis-no-stretch]) .sm .ids-label-text {
+  max-width: calc(var(--ids-input-width-20) - 2px - 8px);
+}
+:host([label-wrap=ellipsis-no-stretch]) .mm .ids-label-text {
+  max-width: calc(var(--ids-input-width-30) - 2px - 8px);
+}
+:host([label-wrap=ellipsis-no-stretch]) .md .ids-label-text {
+  max-width: calc(var(--ids-input-width-40) - 2px - 8px);
+}
+:host([label-wrap=ellipsis-no-stretch]) .lg .ids-label-text {
+  max-width: calc(var(--ids-input-width-50) - 2px - 8px);
+}
+:host([label-wrap=ellipsis-no-stretch]) .full .ids-label-text {
+  max-width: calc(100% - 8px);
+}
+
+:host([label-wrap=wrap-no-stretch]) .xs .ids-label-text {
+  max-width: calc(var(--ids-input-width-10) - 2px);
+}
+:host([label-wrap=wrap-no-stretch]) .sm .ids-label-text {
+  max-width: calc(var(--ids-input-width-20) - 2px - 8px);
+}
+:host([label-wrap=wrap-no-stretch]) .mm .ids-label-text {
+  max-width: calc(var(--ids-input-width-30) - 2px - 8px);
+}
+:host([label-wrap=wrap-no-stretch]) .md .ids-label-text {
+  max-width: calc(var(--ids-input-width-40) - 2px - 8px);
+}
+:host([label-wrap=wrap-no-stretch]) .lg .ids-label-text {
+  max-width: calc(var(--ids-input-width-50) - 2px - 8px);
+}
+:host([label-wrap=wrap-no-stretch]) .full .ids-label-text {
+  max-width: calc(100% - 8px);
+}
+
+.ids-input {
+  position: relative;
+  display: block;
+  margin-block-end: var(--ids-space-60);
+  max-width: var(--ids-input-width-full);
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  /* stylelint-disable-next-line no-duplicate-selectors */
+}
+.ids-input .field-container {
+  transition: border var(--ids-motion-duration) var(--ids-motion-ease);
+  margin: var(--ids-space-none);
+  padding: var(--ids-space-none);
+  position: relative;
+  border: 1px solid;
+  align-items: center;
+  border-collapse: separate;
+  border-radius: 2px;
+  color: inherit;
+  display: flex;
+  resize: none;
+  text-align: left;
+  max-width: var(--ids-input-width-full);
+}
+.ids-input:focus-within .ids-input-field, .ids-input.readonly:focus-within .ids-input-field, .ids-input.is-active .ids-input-field {
+  outline: none;
+  outline-color: transparent;
+}
+.ids-input:focus-within .field-container, .ids-input.readonly:focus-within .field-container, .ids-input.is-active .field-container {
+  border-color: var(--ids-input-color-border-focus);
+  box-shadow: var(--ids-shadow-focus);
+}
+.ids-input .ids-icon.starting-icon {
+  margin-inline-start: var(--ids-space-40);
+}
+.ids-input .ids-icon.ending-icon {
+  margin-inline-end: var(--ids-space-40);
+}
+.ids-input .ids-input-field {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+  background-color: transparent;
+  border: none;
+  font-family: var(--ids-font-family-default);
+  padding-block-start: var(--ids-space-30);
+  padding-block-end: var(--ids-space-30);
+  padding-inline-start: var(--ids-space-40);
+  padding-inline-end: var(--ids-space-40);
+  font-size: var(--ids-input-font-size);
+  width: 100%;
+  appearance: none;
+  color: currentColor;
+  display: inline-block;
+  height: fit-content;
+  resize: none;
+  text-align: left;
+}
+.ids-input .ids-input-field:focus-visible {
+  outline: none;
+}
+.ids-input .ids-input-field.text-ellipsis {
+  text-overflow: ellipsis;
+}
+.ids-input .ids-input-field.start {
+  text-align: start;
+}
+.ids-input .ids-input-field::placeholder {
+  color: var(--ids-input-color-text-placeholder);
+}
+.ids-input .ids-input-field.center {
+  text-align: center;
+}
+.ids-input .ids-input-field.end {
+  text-align: end;
+}
+.ids-input .validation-message {
+  margin-block-start: var(--ids-space-30);
+  margin-bottom: 0;
+}
+.ids-input.no-margins, .ids-input.no-margins.compact {
+  margin: 0;
+}
+.ids-input.no-margins.field-height-xs, .ids-input.no-margins.compact.field-height-xs {
+  margin-block-end: 0;
+}
+.ids-input.no-margins .field-container, .ids-input.no-margins.compact .field-container {
+  margin-bottom: 0;
+}
+.ids-input.no-margins .ids-input-field, .ids-input.no-margins.compact .ids-input-field {
+  margin: 0;
+}
+.ids-input.no-margins .validation-message, .ids-input.no-margins.compact .validation-message {
+  margin-bottom: 0;
+  margin-block-start: var(--ids-space-30);
+}
+.ids-input.no-margins .ids-label-text.empty, .ids-input.no-margins.compact .ids-label-text.empty {
+  margin: 0;
+  visibility: hidden;
+  height: 0;
+}
+.ids-input.xs .field-container {
+  width: calc(var(--ids-input-width-10) - 2px);
+}
+.ids-input.sm .field-container {
+  width: calc(var(--ids-input-width-20) - 2px);
+}
+.ids-input.mm .field-container {
+  width: calc(var(--ids-input-width-30) - 2px);
+}
+.ids-input.md .field-container {
+  width: calc(var(--ids-input-width-40) - 2px);
+}
+.ids-input.lg .field-container {
+  width: calc(var(--ids-input-width-50) - 2px);
+}
+.ids-input.full {
+  display: block;
+}
+.ids-input.full .field-container {
+  width: var(--ids-input-width-full);
+}
+@media (max-width: 360px) {
+  .ids-input .field-container {
+    max-width: calc(var(--ids-input-width-30) - 2px);
+  }
+}
+.ids-input.field-height-xs {
+  margin-block-end: var(--ids-font-size-20);
+}
+.ids-input.field-height-xs .ids-label-text {
+  font-size: var(--ids-input-label-font-size);
+}
+.ids-input.field-height-xs .ids-input-field {
+  padding-inline-start: var(--ids-space-30);
+  padding-inline-end: var(--ids-space-30);
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: var(--ids-input-font-size-sm);
+  height: calc(var(--ids-input-height-10) - 2px);
+}
+.ids-input.field-height-xs.no-margin-bottom {
+  margin-bottom: 0;
+}
+.ids-input.field-height-xs.no-margin-bottom .field-container,
+.ids-input.field-height-xs.no-margin-bottom .ids-input-field {
+  margin-bottom: 0;
+}
+.ids-input.field-height-sm .ids-input-field {
+  height: calc(var(--ids-input-height-20) - 2px);
+}
+.ids-input.field-height-md .ids-input-field {
+  height: calc(var(--ids-input-height-30) - 2px);
+}
+.ids-input.field-height-lg .ids-input-field {
+  height: calc(var(--ids-input-height-40) - 2px);
+}
+.ids-input.compact {
+  margin-block-end: var(--ids-font-size-20);
+}
+.ids-input.compact .ids-label-text {
+  font-size: var(--ids-input-label-font-size);
+}
+.ids-input.compact .ids-input-field {
+  padding-inline-start: var(--ids-space-30);
+  padding-inline-end: var(--ids-space-30);
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: var(--ids-input-font-size-sm);
+  height: calc(var(--ids-input-height-10) - 2px);
+}
+.ids-input.compact.no-margin-bottom {
+  margin-bottom: 0;
+}
+.ids-input.compact.no-margin-bottom .field-container,
+.ids-input.compact.no-margin-bottom .ids-input-field {
+  margin-bottom: 0;
+  height: calc(var(--ids-input-height-10) - 2px);
+}
+.ids-input.color-variant-borderless {
+  --ids-input-color-border-focus: transparent;
+  margin: 1px;
+  border-radius: 0;
+}
+.ids-input.color-variant-borderless input {
+  font-size: var(--ids-font-size-40);
+}
+.ids-input.color-variant-borderless slot[name=trigger-start],
+.ids-input.color-variant-borderless slot[name=trigger-end] {
+  display: flex;
+}
+.ids-input.color-variant-borderless slot[name=trigger-end] {
+  padding-inline-end: 6px;
+}
+.ids-input.color-variant-borderless .icon-dirty {
+  display: none;
+}
+.ids-input.color-variant-borderless .validation-message {
+  display: none;
+}
+.ids-input.color-variant-borderless .field-container {
+  background-color: transparent;
+  border-color: transparent !important;
+}
+.ids-input.color-variant-borderless:focus-within .field-container {
+  box-shadow: none;
+}
+.ids-input.color-variant-borderless.ids-input.field-height-lg .ids-input-field {
+  padding-inline: calc(var(--ids-space-60) - 2px);
+}
+.ids-input.color-variant-borderless.ids-input.field-height-md .ids-input-field {
+  padding-inline: calc(var(--ids-space-50) - 2px);
+}
+.ids-input.color-variant-borderless.ids-input.field-height-sm .ids-input-field {
+  padding-inline: calc(var(--ids-space-40) - 2px);
+}
+.ids-input.color-variant-borderless.ids-input.field-height-xs .ids-input-field {
+  font-size: var(--ids-data-grid-font-size-sm);
+  padding-inline: var(--ids-space-20);
+}
+.ids-input.color-variant-borderless.ids-input.field-height-xxs .ids-input-field {
+  font-size: var(--ids-data-grid-font-size-sm);
+  padding-inline: var(--ids-space-10);
+}
+.ids-input.color-variant-in-cell {
+  margin: 1px;
+}
+.ids-input.color-variant-in-cell input {
+  font-size: var(--ids-font-size-40);
+}
+.ids-input.color-variant-in-cell .validation-message {
+  display: none;
+}
+.ids-input.color-variant-in-cell.ids-input.field-height-lg .ids-input-field {
+  padding-inline: 11px;
+  height: 40px;
+}
+.ids-input.color-variant-in-cell.ids-input.full .field-container {
+  margin-inline: 3px;
+  width: initial;
+}
+.ids-input.color-variant-in-cell.ids-input.field-height-md .ids-input-field {
+  padding-inline: 6px;
+  height: 30px;
+}
+.ids-input.color-variant-in-cell.ids-input.field-height-sm .ids-input-field {
+  padding-inline: 4px;
+  height: 27px;
+}
+.ids-input.color-variant-in-cell.ids-input.field-height-sm.full .field-container {
+  margin-inline: 2px;
+}
+.ids-input.color-variant-in-cell.ids-input.field-height-xs .ids-input-field {
+  padding-inline: 1px;
+  height: 24px;
+}
+.ids-input.color-variant-in-cell.ids-input.field-height-xs.full .field-container {
+  margin-inline: 1px;
+}
+.ids-input.color-variant-module-nav {
+  margin-block-end: 0;
+  transform: background-color var(--ids-motion-duration) var(--ids-motion-ease), border-color var(--ids-motion-duration) var(--ids-motion-ease), color var(--ids-motion-duration) var(--ids-motion-ease);
+}
+.ids-input.color-variant-module-nav .field-container {
+  border-radius: var(--ids-module-nav-common-border-radius);
+  border: var(--ids-module-nav-input-border-width) solid transparent;
+}
+.ids-input.color-variant-module-nav input {
+  background-color: transparent;
+  color: inherit;
+}
+.ids-input.color-variant-module-nav input::placeholder {
+  color: var(--ids-module-nav-search-input-placeholder-text-color);
+}
+.ids-input.color-variant-module-nav input:active {
+  color: var(--ids-module-nav-search-input-text-color);
+}
+.ids-input.color-variant-module-nav:not([class*=field-height-]) {
+  height: var(--ids-module-nav-search-wrapper-height);
+}
+.ids-input.color-variant-module-nav:not([class*=field-height-]) input {
+  height: var(--ids-module-nav-search-input-height);
+}
+.ids-input:not([class*=color-variant-]) {
+  /* stylelint-disable-next-line no-duplicate-selectors */
+}
+.ids-input:not([class*=color-variant-]) .field-container {
+  background-color: var(--ids-input-color-background-default);
+  border-color: var(--ids-input-color-border-default);
+  color: var(--ids-input-color-text);
+}
+.ids-input:not([class*=color-variant-]).readonly .field-container.error, .ids-input:not([class*=color-variant-]).readonly .field-container.error:hover, .ids-input:not([class*=color-variant-]).readonly.hover .field-container.error, .ids-input:not([class*=color-variant-]).readonly.hover .field-container.error:hover, .ids-input:not([class*=color-variant-]).readonly.focus-within .field-container.error, .ids-input:not([class*=color-variant-]).readonly.focus-within .field-container.error:hover {
+  border-color: var(--ids-color-error-default);
+  color: var(--ids-color-error-default);
+}
+.ids-input:not([class*=color-variant-]).readonly:not(.readonly-background):not(.bg-transparent) .field-container, .ids-input:not([class*=color-variant-]).readonly:not(.readonly-background):not(.bg-transparent).hover .field-container, .ids-input:not([class*=color-variant-]).readonly:not(.readonly-background):not(.bg-transparent).focus-within .field-container {
+  background-color: var(--ids-input-color-background-readonly);
+}
+.ids-input:not([class*=color-variant-]).disabled .field-container, .ids-input:not([class*=color-variant-]).disabled:hover .field-container, .ids-input:not([class*=color-variant-]).disabled:focus-within .field-container {
+  border-color: var(--ids-input-color-border-disabled);
+  color: var(--ids-input-color-text-disabled);
+  -webkit-text-fill-color: var(--ids-input-color-text-disabled);
+}
+.ids-input:not([class*=color-variant-]).bg-transparent .field-container, .ids-input:not([class*=color-variant-]).bg-transparent.readonly .field-container, .ids-input:not([class*=color-variant-]).bg-transparent.disabled .field-container {
+  background-color: transparent;
+}
+.ids-input:not([class*=color-variant-]).bg-transparent:focus-within .field-container {
+  background-color: transparent;
+}
+.ids-input:not([class*=color-variant-]).is-active .field-container, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .field-container, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container {
+  border-color: var(--ids-input-color-border-hover);
+}
+.ids-input:not([class*=color-variant-]).is-active .alert,
+.ids-input:not([class*=color-variant-]).is-active .alert:hover,
+.ids-input:not([class*=color-variant-]).is-active .warning,
+.ids-input:not([class*=color-variant-]).is-active .warning:hover, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert:hover,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:hover {
+  border-color: var(--ids-input-color-border-alert-default);
+  color: var(--ids-input-color-text-alert-default);
+}
+.ids-input:not([class*=color-variant-]).is-active .alert:focus-within, .ids-input:not([class*=color-variant-]).is-active .alert.is-active,
+.ids-input:not([class*=color-variant-]).is-active .alert:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .alert:hover.is-active,
+.ids-input:not([class*=color-variant-]).is-active .warning:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .warning.is-active,
+.ids-input:not([class*=color-variant-]).is-active .warning:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .warning:hover.is-active, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert:hover.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:hover.is-active {
+  border-color: var(--ids-input-color-border-alert-default);
+  box-shadow: var(--ids-input-shadow-alert-focus) 0 0 3px 2px;
+}
+.ids-input:not([class*=color-variant-]).is-active .alert[disabled],
+.ids-input:not([class*=color-variant-]).is-active .alert:hover[disabled],
+.ids-input:not([class*=color-variant-]).is-active .warning[disabled],
+.ids-input:not([class*=color-variant-]).is-active .warning:hover[disabled], .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .alert:hover[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .warning:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:hover[disabled] {
+  border-color: var(--ids-input-color-border-alert-disabled);
+  color: var(--ids-input-color-text-alert-disabled);
+}
+.ids-input:not([class*=color-variant-]).is-active .error,
+.ids-input:not([class*=color-variant-]).is-active .error:hover, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error:hover {
+  border-color: var(--ids-input-color-border-error-default);
+  color: var(--ids-input-error-color-text-error-default);
+}
+.ids-input:not([class*=color-variant-]).is-active .error:focus-within, .ids-input:not([class*=color-variant-]).is-active .error.is-active,
+.ids-input:not([class*=color-variant-]).is-active .error:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .error:hover.is-active, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error:hover.is-active {
+  border-color: var(--ids-input-color-border-error-default);
+  box-shadow: var(--ids-input-color-shadow-error-focus) 0 0 3px 2px;
+}
+.ids-input:not([class*=color-variant-]).is-active .error[disabled],
+.ids-input:not([class*=color-variant-]).is-active .error:hover[disabled], .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .error:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .error:hover[disabled] {
+  border-color: var(--ids-input-color-border-error-disabled);
+  color: var(--ids-input-color-border-error-disabled);
+}
+.ids-input:not([class*=color-variant-]).is-active .info,
+.ids-input:not([class*=color-variant-]).is-active .info:hover, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:hover {
+  border-color: var(--ids-input-color-border-info-default);
+  color: var(--ids-input-color-text-info-default);
+}
+.ids-input:not([class*=color-variant-]).is-active .info:focus-within, .ids-input:not([class*=color-variant-]).is-active .info.is-active,
+.ids-input:not([class*=color-variant-]).is-active .info:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .info:hover.is-active, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:hover.is-active {
+  border-color: var(--ids-input-color-border-info-default);
+  box-shadow: var(--ids-input-shadow-info-focus) 0 0 3px 2px;
+}
+.ids-input:not([class*=color-variant-]).is-active .info[disabled],
+.ids-input:not([class*=color-variant-]).is-active .info:hover[disabled], .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .info:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:hover[disabled] {
+  border-color: var(--ids-input-color-border-info-disabled);
+  color: var(--ids-input-color-text-info-disabled);
+}
+.ids-input:not([class*=color-variant-]).is-active .success,
+.ids-input:not([class*=color-variant-]).is-active .success:hover, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:hover {
+  border-color: var(--ids-input-color-border-success-default);
+  color: var(--ids-input-color-text-success-default);
+}
+.ids-input:not([class*=color-variant-]).is-active .success:focus-within, .ids-input:not([class*=color-variant-]).is-active .success.is-active,
+.ids-input:not([class*=color-variant-]).is-active .success:hover:focus-within,
+.ids-input:not([class*=color-variant-]).is-active .success:hover.is-active, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success.is-active,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success.is-active,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:hover:focus-within,
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:hover.is-active {
+  border-color: var(--ids-input-color-border-success-default);
+  box-shadow: var(--ids-input-shadow-success-focus) 0 0 3px 2px;
+}
+.ids-input:not([class*=color-variant-]).is-active .success[disabled],
+.ids-input:not([class*=color-variant-]).is-active .success:hover[disabled], .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success[disabled],
+.ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled) .success:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success[disabled],
+.ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:hover[disabled] {
+  border-color: var(--ids-input-color-border-success-disabled);
+  color: var(--ids-input-color-text-success-disabled);
+}
+.ids-input:not([class*=color-variant-]):hover:not(.disabled).readonly.readonly-background.color-variant-alternate-formatter .field-container {
+  border-color: var(--ids-data-grid-filter-input-color-border-hover);
+}
+.ids-input:not([class*=color-variant-]) .alert,
+.ids-input:not([class*=color-variant-]) .alert:hover,
+.ids-input:not([class*=color-variant-]) .warning,
+.ids-input:not([class*=color-variant-]) .warning:hover {
+  border-color: var(--ids-input-color-border-alert-default);
+  color: var(--ids-input-color-text-alert-default);
+}
+.ids-input:not([class*=color-variant-]) .alert:focus-within, .ids-input:not([class*=color-variant-]) .alert.is-active,
+.ids-input:not([class*=color-variant-]) .alert:hover:focus-within,
+.ids-input:not([class*=color-variant-]) .alert:hover.is-active,
+.ids-input:not([class*=color-variant-]) .warning:focus-within,
+.ids-input:not([class*=color-variant-]) .warning.is-active,
+.ids-input:not([class*=color-variant-]) .warning:hover:focus-within,
+.ids-input:not([class*=color-variant-]) .warning:hover.is-active {
+  border-color: var(--ids-input-color-border-alert-default);
+  box-shadow: var(--ids-input-shadow-alert-focus) 0 0 3px 2px;
+}
+.ids-input:not([class*=color-variant-]) .alert[disabled],
+.ids-input:not([class*=color-variant-]) .alert:hover[disabled],
+.ids-input:not([class*=color-variant-]) .warning[disabled],
+.ids-input:not([class*=color-variant-]) .warning:hover[disabled] {
+  border-color: var(--ids-input-color-border-alert-disabled);
+  color: var(--ids-input-color-text-alert-disabled);
+}
+.ids-input:not([class*=color-variant-]) .error,
+.ids-input:not([class*=color-variant-]) .error:hover {
+  border-color: var(--ids-input-color-border-error-default);
+  color: var(--ids-input-error-color-text-error-default);
+}
+.ids-input:not([class*=color-variant-]) .error:focus-within, .ids-input:not([class*=color-variant-]) .error.is-active,
+.ids-input:not([class*=color-variant-]) .error:hover:focus-within,
+.ids-input:not([class*=color-variant-]) .error:hover.is-active {
+  border-color: var(--ids-input-color-border-error-default);
+  box-shadow: var(--ids-input-color-shadow-error-focus) 0 0 3px 2px;
+}
+.ids-input:not([class*=color-variant-]) .error[disabled],
+.ids-input:not([class*=color-variant-]) .error:hover[disabled] {
+  border-color: var(--ids-input-color-border-error-disabled);
+  color: var(--ids-input-color-border-error-disabled);
+}
+.ids-input:not([class*=color-variant-]) .info,
+.ids-input:not([class*=color-variant-]) .info:hover {
+  border-color: var(--ids-input-color-border-info-default);
+  color: var(--ids-input-color-text-info-default);
+}
+.ids-input:not([class*=color-variant-]) .info:focus-within, .ids-input:not([class*=color-variant-]) .info.is-active,
+.ids-input:not([class*=color-variant-]) .info:hover:focus-within,
+.ids-input:not([class*=color-variant-]) .info:hover.is-active {
+  border-color: var(--ids-input-color-border-info-default);
+  box-shadow: var(--ids-input-shadow-info-focus) 0 0 3px 2px;
+}
+.ids-input:not([class*=color-variant-]) .info[disabled],
+.ids-input:not([class*=color-variant-]) .info:hover[disabled] {
+  border-color: var(--ids-input-color-border-info-disabled);
+  color: var(--ids-input-color-text-info-disabled);
+}
+.ids-input:not([class*=color-variant-]) .success,
+.ids-input:not([class*=color-variant-]) .success:hover {
+  border-color: var(--ids-input-color-border-success-default);
+  color: var(--ids-input-color-text-success-default);
+}
+.ids-input:not([class*=color-variant-]) .success:focus-within, .ids-input:not([class*=color-variant-]) .success.is-active,
+.ids-input:not([class*=color-variant-]) .success:hover:focus-within,
+.ids-input:not([class*=color-variant-]) .success:hover.is-active {
+  border-color: var(--ids-input-color-border-success-default);
+  box-shadow: var(--ids-input-shadow-success-focus) 0 0 3px 2px;
+}
+.ids-input:not([class*=color-variant-]) .success[disabled],
+.ids-input:not([class*=color-variant-]) .success:hover[disabled] {
+  border-color: var(--ids-input-color-border-success-disabled);
+  color: var(--ids-input-color-text-success-disabled);
+}
+.ids-input.color-variant-alternate .field-container {
+  border-color: transparent;
+  color: var(--ids-input-header-color-text-default);
+  background-color: var(--ids-input-header-color-background);
+  border-bottom: 1px solid var(--ids-input-header-color-border);
+  box-shadow: none;
+}
+.ids-input.color-variant-alternate .ids-input-field::placeholder {
+  color: var(--ids-input-header-color-text-placeholder);
+}
+.ids-input.color-variant-alternate-formatter .field-container {
+  background-color: var(--ids-data-grid-filter-input-color-background);
+  border-color: var(--ids-data-grid-filter-input-color-border-default);
+  color: var(--ids-data-grid-filter-input-color-text-default);
+}
+.ids-input.color-variant-alternate-formatter:hover.readonly.readonly-background .field-container, .ids-input.color-variant-alternate-formatter:hover:not(.readonly):not(.disabled) .field-container {
+  border-color: var(--ids-data-grid-filter-input-color-border-hover);
+}
+.ids-input.color-variant-alternate-formatter:focus-within .field-container, .ids-input.color-variant-alternate-formatter:focus-within:hover .field-container {
+  border-color: var(--ids-data-grid-filter-input-color-border-focus);
+}
+.ids-input.color-variant-alternate-formatter:focus-within .ids-input-field {
+  box-shadow: 0 0 3px 1px var(--ids-shadow-focus);
+}
+.ids-input.color-variant-alternate-formatter.disabled .ids-input.color-variant-alternate-formatter.disabled:hover .field-container {
+  border-color: var(--ids-data-grid-filter-input-color-border-disabled);
+  color: var(--ids-data-grid-filter-input-color-text-disabled);
+}
+.ids-input.color-variant-alternate-formatter.readonly:not(.readonly-background):not(.bg-transparent) .field-container {
+  background-color: var(--ids-data-grid-filter-input-color-background-readonly);
+  border-color: var(--ids-data-grid-filter-input-color-border-readonly);
+  color: var(--ids-data-grid-filter-input-color-text-readonly);
+}
+.ids-input.color-variant-alternate-formatter .ids-input-field::placeholder {
+  color: var(--ids-data-grid-filter-input-color-text-placeholder);
+}
+.ids-input.color-variant-alternate .field-container, .ids-input.color-variant-app-menu .field-container {
+  color: var(--ids-input-color-text-default);
+}
+.ids-input.color-variant-list-builder .field-container {
+  background-color: transparent;
+  color: var(--ids-list-builder-input-text-color);
+  border: 0;
+}
+.ids-input.color-variant-module-nav {
+  color: var(--ids-module-nav-search-input-text-color);
+  /* stylelint-disable-next-line no-duplicate-selectors */
+}
+.ids-input.color-variant-module-nav .field-container {
+  background-color: transparent;
+  border-color: transparent;
+  color: inherit;
+}
+.ids-input.color-variant-module-nav .ids-input-field {
+  background-color: transparent;
+  color: inherit;
+}
+.ids-input.color-variant-module-nav .ids-input-field::placeholder {
+  color: var(--ids-module-nav-search-input-placeholder-text-color);
+}
+.ids-input.color-variant-module-nav .ids-input-field:active {
+  color: var(--ids-module-nav-search-input-text-color);
+}
+.ids-input.color-variant-module-nav:hover .field-container {
+  background-color: var(--ids-module-nav-item-hover-bg-color);
+}
+.ids-input.color-variant-module-nav:hover .ids-input-field::placeholder {
+  color: var(--ids-module-nav-search-input-placeholder-text-color);
+}
+.ids-input.color-variant-module-nav:hover .ids-input-field {
+  color: var(--ids-module-nav-input-text-color);
+}
+.ids-input.color-variant-module-nav:focus-within .field-container, .ids-input.color-variant-module-nav.readonly:focus-within .ids-input.color-variant-module-nav.is-active .field-container {
+  background-color: var(--ids-module-nav-input-focus-bg-color);
+  border-color: var(--ids-module-nav-item-selected-text-color);
+  box-shadow: none;
+}
+.ids-input.color-variant-module-nav:focus-within .ids-input-field::placeholder, .ids-input.color-variant-module-nav.readonly:focus-within .ids-input.color-variant-module-nav.is-active .ids-input-field::placeholder {
+  color: var(--ids-module-nav-search-input-focused-placeholder-text-color);
+}
+.ids-input.color-variant-module-nav:focus-within .ids-input-field, .ids-input.color-variant-module-nav.readonly:focus-within .ids-input.color-variant-module-nav.is-active .ids-input-field {
+  color: var(--ids-module-nav-input-text-color);
+}
+
+.caps-lock-indicator {
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+}
+
+.is-uppercase {
+  text-transform: uppercase;
+}
+
+.highlight {
+  font-weight: var(--ids-font-weight-bold);
+}
+
+.ids-input-field[type=number]::-webkit-inner-spin-button,
+.ids-input-field[type=number]::-webkit-outer-spin-button {
+  appearance: none;
+}
+
+.ids-input-field::-webkit-caps-lock-indicator {
+  visibility: hidden;
+}
+
+:host ids-popup[type=dropdown] {
+  width: 100%;
+  max-width: var(--ids-input-width-40);
+}
+
+:host([size=xs]) ids-popup[type=dropdown] {
+  max-width: var(--ids-input-width-10);
+}
+
+:host([size=sm]) ids-popup[type=dropdown] {
+  max-width: var(--ids-input-width-20);
+}
+
+:host([size=mm]) ids-popup[type=dropdown] {
+  max-width: var(--ids-input-width-30);
+}
+
+:host([size=md]) ids-popup[type=dropdown] {
+  max-width: var(--ids-input-width-40);
+}
+
+:host([size=lg]) ids-popup[type=dropdown] {
+  max-width: var(--ids-input-width-50);
+}
+
+:host([size=full]) ids-popup[type=dropdown] {
+  max-width: var(--ids-input-width-full);
+}
+
+:host(:not([show-loading-indicator=true])) ::slotted(.slot-loading-indicator) {
+  display: none;
+}
+
+:host([show-loading-indicator=true]) {
+  pointer-events: none;
+}
+:host([show-loading-indicator=true]) ::slotted(ids-loading-indicator) {
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+:host([show-loading-indicator=true]) ::slotted(ids-trigger-button[slot=trigger-end]) {
+  display: none;
+}
+:host([show-loading-indicator=true]) ::slotted(.slot-loading-indicator) {
+  margin-inline-end: 12px;
+  margin-inline-start: 8px;
+}
+
+:host([show-loading-indicator=true][field-height=xs]) ::slotted(.slot-loading-indicator) {
+  margin-inline-start: 4px;
+  margin-inline-end: 4px;
+}
+
+:host([show-loading-indicator=true][field-height=sm]) ::slotted(.slot-loading-indicator) {
+  margin-inline-end: 8px;
+  margin-inline-start: 4px;
+}
+
+::slotted(.audible) {
+  clip: rect(0, 0, 0, 0);
+  height: 0;
+  line-height: 0;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}`;var M=0,H=L(S(k(O(P(T(R(E(C(I(x(w(D(y(A)))))))))))))),c=class extends H{generatedId="";triggeredByChange=!1;constructor(){super(),Object.defineProperty(this,"id",{get:()=>this.#o,set:t=>{this.#o=t},configurable:!0,enumerable:!0})}isFormComponent=!0;colorVariants=["alternate","alternate-formatter","borderless","in-cell","list-builder","module-nav"];static get attributes(){return[...super.attributes,i.ACTIVE,i.AUTOSELECT,i.BG_TRANSPARENT,i.CAPS_LOCK,i.CURSOR,i.DISABLED,i.FORMAT,i.ID,i.LABEL_WRAP,i.MAXLENGTH,i.NO_MARGINS,i.PADDING,i.PASSWORD_VISIBLE,i.PLACEHOLDER,i.READONLY_BACKGROUND,i.READONLY,i.REVEALABLE_PASSWORD,i.SIZE,i.TABBABLE,i.TEXT_ALIGN,i.TEXT_ELLIPSIS,i.TYPE,i.UPPERCASE,i.VALUE]}connectedCallback(){super.connectedCallback(),this.#s(),this.hasAttribute(i.AUTOSELECT)&&this.handleAutoselect(),this.isPasswordVisible&&this.#t(!0),this.capsLock&&this.#i(!0),this.#r(),this.getAttribute("maxlength")&&(this.maxlength=this.getAttribute("maxlength"))}template(){this.templateHostAttributes();let{ariaLabel:t,capsLock:o,containerClass:e,inputClass:n,inputState:p,labelHtml:v,placeholder:a,showHide:l,type:h,value:b}=this.templateVariables();return`<div class="${e}" part="container">
+      ${v}
+      <div class="field-container" part="field-container">
+        <input
+          part="input"
+          id="${this.id}-input"
+          ${h}${n}${a}${p}
+          ${t}
+          ${b}
+          ></input>
+        ${l}
+        ${o}
+        <slot name="loading-indicator"></slot>
+      </div>
+      ${this.autocomplete?`
+        <ids-popup
+          type="dropdown"
+          align="bottom, left"
+          align-target="#${this.id}-input"
+          part="popup"
+        >
+          <ids-list-box slot="content" size="${this.size}"></ids-list-box>
+        </ids-popup>`:""}
+    </div>`}templateHostAttributes(){this.id||(this.generatedId=`ids-input-${M++}`)}templateVariables(){let t={readonly:this.readonly?"readonly":"",disabled:this.disabled?"disabled":"",required:this.validate?"required":"",noMargins:this.noMargins?"no-margins":""},o=this.placeholder?` placeholder="${this.placeholder}"`:"",e=` type="${this.isPasswordVisible&&this.passwordVisible?"text":this.type||s.default}"`,n=`ids-input-field ${this.textAlign}`,p=this.templateShowHide(),v=this.templateCapsLock();n+=r(this.bgTransparent)?" bg-transparent":"",n+=r(this.readonlyBackground)?"":" readonly-background",n+=r(this.textEllipsis)?" text-ellipsis":"",n=` class="${n}"`;let a=r(this.readonly)?" readonly":"";a=r(this.disabled)?" disabled":a;let l=`ids-input${a} ${this.size}`;l+=r(this.compact)?" compact":"",l+=r(this.noMargins)?" no-margins":"";let h=this.hasAttribute(i.LABEL_STATE)&&this.label?`aria-label="${this.label}"`:"",b=!this.label.length||this.labelState==="hidden"?" empty":"",V=`<label
+      class="ids-label-text${this.labelRequired?"":" no-required-indicator"}${b}"
+      for="${this.id}-input"
+      part="label"
+      ${t.readonly}
+      ${t.disabled}
+      ${t.required}
+    >
+      <slot name="label-pre"></slot>
+      <ids-text part="label" label ${t.disabled} color-unset>
+        ${this.label}
+      </ids-text>
+      <slot name="label-post"></slot>
+    </label>`,z=this.hasAttribute(i.VALUE)?` value="${this.getAttribute(i.VALUE)}" `:"";return{ariaLabel:h,capsLock:v,containerClass:l,inputClass:n,inputState:a,labelHtml:V,placeholder:o,showHide:p,type:e,value:z}}get isPasswordVisible(){return this.revealablePassword&&this.type===s.password}templateShowHide(){return this.isPasswordVisible?`<ids-button id="show-hide-password" class="show-hide-password" no-padding text="${this.passwordVisible?"HIDE":"SHOW"}"></ids-button>`:""}templateCapsLock(){return this.capsLock?'<ids-icon id="caps-lock-indicator" class="caps-lock-indicator" icon="capslock"></ids-icon>':""}onColorVariantRefresh(t){super.colorVariant=t,this.clearable&&this.refreshClearableButtonStyles()}get input(){return this.container?.querySelector('input[part="input"]')??null}get formInput(){return this.input}get capsLockIcon(){return this.container?.querySelector("#caps-lock-indicator")}get fieldContainer(){return this.container?.querySelector(".field-container")}get labelEl(){return this.#a||this.shadowRoot?.querySelector(`[for="${this.id}-input"]`)}get revealablePassword(){return r(this.getAttribute(i.REVEALABLE_PASSWORD))}set revealablePassword(t){let o=r(t);this.type===s.password?o?(this.setAttribute(i.REVEALABLE_PASSWORD,"true"),this.#t(!0)):(this.setAttribute(i.REVEALABLE_PASSWORD,"false"),this.#t(!1)):this.removeAttribute(i.REVEALABLE_PASSWORD)}get capsLock(){return r(this.getAttribute(i.CAPS_LOCK))}set capsLock(t){r(t)?(this.setAttribute(i.CAPS_LOCK,"true"),this.#i(!0)):(this.removeAttribute(i.CAPS_LOCK),this.#i(!1))}get passwordVisible(){return r(this.getAttribute(i.PASSWORD_VISIBLE))}set passwordVisible(t){let o=r(t);o!==this.passwordVisible&&(o?this.setAttribute(i.PASSWORD_VISIBLE,"true"):this.setAttribute(i.PASSWORD_VISIBLE,"false")),this.#e()}setInputState(t){if(t===i.READONLY||t===i.DISABLED){if(!this.shadowRoot)return;let o=[].slice.call(this.shadowRoot.querySelectorAll(".validation-message")),e={prop1:t,prop2:t!==i.READONLY?i.READONLY:i.DISABLED,val:r(this[t])};e.val?(this.input?.removeAttribute(e.prop2),this.container?.classList?.remove?.(e.prop2),this.container?.querySelector?.("ids-text")?.removeAttribute(e.prop2),o.forEach(n=>n.classList.remove(e.prop2)),this.input?.setAttribute(e.prop1,"true"),this.container?.classList.add(e.prop1),this.container?.querySelector?.("ids-text")?.setAttribute?.(e.prop1,"true"),o.forEach(n=>n.classList.add(e.prop1))):(this.input?.removeAttribute(e.prop1),this.container?.classList.remove(e.prop1),this.container?.querySelector("ids-text")?.removeAttribute(e.prop1),o.forEach(n=>n.classList.remove(e.prop1)))}}setLabelText(t){return super.setLabelText(t,`[for="${this.id}-input"]`)}handleAutoselect(){this.autoselect?this.handleInputFocusEvent():this.handleInputFocusEvent("remove")}handleInputFocusEvent(t){let o="focus";if(t==="remove"){let e=this?.handledEvents?.get(o);e&&e.target===this.input&&this.offEvent(o,this.input)}else this.onEvent(o,this.input,()=>{requestAnimationFrame(()=>{this.input?.select()})})}#i(t){let o=e=>{this.capsLockIcon&&e.getModifierState&&(this.capsLockIcon.hidden=!e.getModifierState("CapsLock"))};t?(!this.capsLockIcon&&this.input&&this.input.insertAdjacentHTML("afterend",this.templateCapsLock()),this.offEvent("keydown.input-capslock"),this.onEvent("keydown.input-capslock",this,o),this.offEvent("keyup.input-capslock"),this.onEvent("keyup.input-capslock",this,o),this.capsLockIcon&&(this.capsLockIcon.hidden=!0)):(this.offEvent("keydown.input-capslock"),this.offEvent("keyup.input-capslock"),this.capsLockIcon?.remove())}#n(){return this.input?(["focus","select","keydown","keypress","keyup","click","dbclick"].forEach(o=>{this.onEvent(o,this.input,e=>{this.triggerEvent(e.type,this,{detail:{elem:this,nativeEvent:e,value:this.value}})})}),this):this}#s(){this.#n()}#t(t){let o=this.container?.querySelector(".show-hide-password");if(t){if(!o&&this.isPasswordVisible){let e=document.createElement("ids-button");e.text=this.passwordVisible?"HIDE":"SHOW",e.id="show-hide-password",e.classList.add("show-hide-password"),e.noPadding=!0,this.input&&(this.input.insertAdjacentElement("afterend",e),this.input.type=`${this.passwordVisible?"text":this.type}`)}this.offEvent("click.input-showhidepassword"),this.onEvent("click.input-showhidepassword",o,()=>{this.passwordVisible=!this.passwordVisible,this.#e()})}else this.offEvent("click.input-showhidepassword"),this.input?.setAttribute("type",this.type),o?.remove()}#e(){if(!this.shadowRoot)return;let t=this.shadowRoot.querySelector(".show-hide-password"),o=this.shadowRoot.querySelector(".ids-input-field");this.passwordVisible?(t?.setAttribute("text","HIDE"),o?.setAttribute("type","text")):(t?.setAttribute("text","SHOW"),o?.setAttribute("type","password"))}set active(t){let o=r(t),e="is-active";o?(this.setAttribute(i.ACTIVE,o.toString()),this.container?.classList.add(e)):(this.removeAttribute(i.ACTIVE),this.container?.classList.remove(e))}get active(){return r(this.hasAttribute(i.ACTIVE))}set autoselect(t){let o=r(t);o?this.setAttribute(i.AUTOSELECT,o.toString()):this.removeAttribute(i.AUTOSELECT),this.handleAutoselect()}get autoselect(){return r(this.getAttribute(i.AUTOSELECT))}set bgTransparent(t){let o=r(t),e="bg-transparent";o?(this.setAttribute(i.BG_TRANSPARENT,o.toString()),this.container?.classList.add(e),this.input?.classList.add(e)):(this.removeAttribute(i.BG_TRANSPARENT),this.container?.classList.remove(e),this.input?.classList.remove(e))}get bgTransparent(){return r(this.getAttribute(i.BG_TRANSPARENT))}set textEllipsis(t){let o=r(t),e="text-ellipsis";o?(this.setAttribute(i.TEXT_ELLIPSIS,o.toString()),this.input?.classList.add(e)):(this.removeAttribute(i.TEXT_ELLIPSIS),this.input?.classList.remove(e))}get textEllipsis(){return r(this.getAttribute(i.TEXT_ELLIPSIS))}set disabled(t){r(t)?this.setAttribute(i.DISABLED,"true"):this.removeAttribute(i.DISABLED),this.setInputState(i.DISABLED)}get disabled(){return r(this.getAttribute(i.DISABLED))}#a;set placeholder(t){if(t){this.setAttribute(i.PLACEHOLDER,t),this.input?.setAttribute(i.PLACEHOLDER,t);return}this.removeAttribute(i.PLACEHOLDER),this.input?.removeAttribute(i.PLACEHOLDER)}get placeholder(){return this.getAttribute(i.PLACEHOLDER)}set readonly(t){let o=r(t);o?this.setAttribute(i.READONLY,o.toString()):this.removeAttribute(i.READONLY),this.setInputState(i.READONLY)}get readonly(){return r(this.getAttribute(i.READONLY))}set readonlyBackground(t){let o=r(t);o?this.setAttribute(i.READONLY_BACKGROUND,o.toString()):this.removeAttribute(i.READONLY_BACKGROUND),this.#r()}get readonlyBackground(){return r(this.getAttribute(i.READONLY_BACKGROUND))}#r(){this.container?.classList.toggle(i.READONLY_BACKGROUND,this.readonlyBackground)}set labelWrap(t){!t||N.indexOf(t)<0?this.removeAttribute(i.LABEL_WRAP):this.setAttribute(i.LABEL_WRAP,t)}get labelWrap(){return this.getAttribute(i.LABEL_WRAP)||"wrap"}set size(t){let o=d[t]||d.default;this.setAttribute(i.SIZE,o),this.container?.classList.remove(...Object.values(d)),this.container?.classList.add(o)}get size(){return this.getAttribute(i.SIZE)||d.default}set textAlign(t){let o=u[t]||u.default;this.setAttribute(i.TEXT_ALIGN,o),this.input?.classList.remove("start","center","end"),this.input?.classList.add(o)}get textAlign(){return this.getAttribute(i.TEXT_ALIGN)||u.default}set type(t){let o=s[t];if(o){this.setAttribute(i.TYPE,t),this.input?.setAttribute(i.TYPE,o);return}this.setAttribute(i.TYPE,s.default),this.input?.setAttribute(i.TYPE,s.default)}get type(){return this.getAttribute(i.TYPE)??s.default}set value(t){let o=["string","number"].includes(typeof t)?String(t):String(t||""),e=this.value;this.mask&&(o=this.processMaskFromProperty(t)||o),e!==o&&this.setAttribute(i.VALUE,o)}get value(){return this.input?.value??""}set#o(t){t!==""&&(this.setAttribute(i.ID,t),this.input?.setAttribute(i.ID,`${t}-input`))}get#o(){return this.getAttribute(i.ID)||this.generatedId}set cursor(t){this.setAttribute(i.CURSOR,t),this.input?.style.setProperty("cursor",t)}get cursor(){return this.getAttribute(i.CURSOR)??""}set maxlength(t){if(t){this.setAttribute(i.MAXLENGTH,t.toString()),this.input?.setAttribute(i.MAXLENGTH,t.toString());return}this.removeAttribute(i.MAXLENGTH),this.input?.removeAttribute(i.MAXLENGTH)}get maxlength(){return Number(this.getAttribute(i.MAXLENGTH))}set uppercase(t){if(r(t)){this.setAttribute(i.UPPERCASE,""),this.input?.classList.add("is-uppercase");return}this.removeAttribute(i.UPPERCASE),this.input?.classList.remove("is-uppercase")}get uppercase(){return r(this.getAttribute(i.UPPERCASE))}set noMargins(t){if(r(t)){this.setAttribute(i.NO_MARGINS,""),this.container?.classList.add("no-margins");return}this.removeAttribute(i.NO_MARGINS),this.container?.classList.remove("no-margins")}get noMargins(){return r(this.getAttribute(i.NO_MARGINS))}set padding(t){if(t){this.setAttribute(i.PADDING,String(t)),this.input?.style.setProperty("padding-inline-start",`${t}px`),this.input?.style.setProperty("padding-inline-end",`${t}px`);return}this.removeAttribute(i.PADDING),this.input?.style.setProperty("padding-inline-start",""),this.input?.style.setProperty("padding-inline-end","")}get padding(){return this.getAttribute(i.PADDING)||""}get format(){return this.getAttribute(i.FORMAT)}blur(){this.input?.blur()}focus(){this.input?.focus()}};c=f([g("ids-input"),m(B)],c);export{c as a};