ids-enterprise-wc 1.0.0-beta.11 → 1.0.0-beta.13

package/chunks/ids-chunk-FK75W3GS.js

@@ -0,0 +1,1023 @@
+import{a as u}from"./ids-chunk-G4EPNT7L.js";import{c as s}from"./ids-chunk-LCUXCSNZ.js";import{a as c,b as p}from"./ids-chunk-XE4WFW5M.js";import{a as r}from"./ids-chunk-EQJWBFQ2.js";import{a as l}from"./ids-chunk-U7OOVFXE.js";var h=`
+@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-radio-group .icon-dirty {
+  margin-inline-start: -1px;
+  margin-block-start: 9px;
+  top: auto;
+  z-index: 1;
+}
+
+.ids-checkbox .icon-dirty {
+  margin-inline-start: -25px;
+}
+.ids-checkbox .icon-dirty[dir=rtl] {
+  margin-inline-start: -20px;
+  transform: none;
+  top: -1px;
+}
+.ids-checkbox.hitbox .icon-dirty {
+  margin-inline-start: -30px;
+}
+.ids-checkbox.hitbox .icon-dirty[dir=rtl] {
+  margin-inline-start: -26px;
+}
+
+.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);
+}
+.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) !important;
+  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.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 .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.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;
+}
+
+.caps-lock-indicator {
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+.ids-input {
+  /* stylelint-disable-next-line no-duplicate-selectors */
+}
+.ids-input .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.readonly .field-container, .ids-input.readonly.hover .field-container, .ids-input.readonly.focus-within .field-container {
+  border-color: var(--ids-input-color-border-readonly);
+  color: var(--ids-input-color-text-readonly);
+}
+.ids-input.readonly .field-container.error, .ids-input.readonly .field-container.error:hover, .ids-input.readonly.hover .field-container.error, .ids-input.readonly.hover .field-container.error:hover, .ids-input.readonly.focus-within .field-container.error, .ids-input.readonly.focus-within .field-container.error:hover {
+  border-color: var(--ids-color-error-default);
+  color: var(--ids-color-error-default);
+}
+.ids-input.readonly:not(.readonly-background):not(.bg-transparent) .field-container, .ids-input.readonly:not(.readonly-background):not(.bg-transparent).hover .field-container, .ids-input.readonly:not(.readonly-background):not(.bg-transparent).focus-within .field-container {
+  background-color: var(--ids-input-color-background-readonly);
+}
+.ids-input.disabled .field-container, .ids-input.disabled:hover .field-container, .ids-input.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.bg-transparent .field-container, .ids-input.bg-transparent.readonly .field-container, .ids-input.bg-transparent.disabled .field-container {
+  background-color: transparent;
+}
+.ids-input.bg-transparent:focus-within .field-container {
+  background-color: transparent;
+}
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .field-container, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .field-container {
+  border-color: var(--ids-input-color-border-hover);
+}
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert:hover,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:hover, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert:hover,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning:hover {
+  border-color: var(--ids-input-color-border-alert-default);
+  color: var(--ids-input-color-text-alert-default);
+}
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert:focus-within, .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert.is-active,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert:hover:focus-within,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert:hover.is-active,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:focus-within,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning.is-active,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:hover:focus-within,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:hover.is-active, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert:focus-within, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert.is-active,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert:hover:focus-within,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert:hover.is-active,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning:focus-within,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning.is-active,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning:hover:focus-within,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .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:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert[disabled],
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .alert:hover[disabled],
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning[disabled],
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .warning:hover[disabled], .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert[disabled],
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .alert:hover[disabled],
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning[disabled],
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .warning:hover[disabled] {
+  border-color: var(--ids-input-color-border-alert-disabled);
+  color: var(--ids-input-color-text-alert-disabled);
+}
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error:hover, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error:hover {
+  border-color: var(--ids-input-color-border-error-default);
+  color: var(--ids-input-error-color-text-error-default);
+}
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error:focus-within, .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error.is-active,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error:hover:focus-within,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error:hover.is-active, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error:focus-within, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error.is-active,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error:hover:focus-within,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .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:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error[disabled],
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .error:hover[disabled], .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error[disabled],
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .error:hover[disabled] {
+  border-color: var(--ids-input-color-border-error-disabled);
+  color: var(--ids-input-color-border-error-disabled);
+}
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info:hover, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info:hover {
+  border-color: var(--ids-input-color-border-info-default);
+  color: var(--ids-input-color-text-info-default);
+}
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info:focus-within, .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info.is-active,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info:hover:focus-within,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info:hover.is-active, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info:focus-within, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info.is-active,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info:hover:focus-within,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .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:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info[disabled],
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .info:hover[disabled], .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info[disabled],
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .info:hover[disabled] {
+  border-color: var(--ids-input-color-border-info-disabled);
+  color: var(--ids-input-color-text-info-disabled);
+}
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success:hover, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success:hover {
+  border-color: var(--ids-input-color-border-success-default);
+  color: var(--ids-input-color-text-success-default);
+}
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success:focus-within, .ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success.is-active,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success:hover:focus-within,
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success:hover.is-active, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success:focus-within, .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success.is-active,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success:hover:focus-within,
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .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:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success[disabled],
+.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless) .success:hover[disabled], .ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success[disabled],
+.ids-input:hover.readonly.readonly-background:not(.color-variant-alternate-formatter) .success:hover[disabled] {
+  border-color: var(--ids-input-color-border-success-disabled);
+  color: var(--ids-input-color-text-success-disabled);
+}
+.ids-input:hover:not(.disabled).readonly.readonly-background.color-variant-alternate-formatter .field-container {
+  border-color: var(--ids-data-grid-filter-input-color-background-hover);
+}
+.ids-input .alert,
+.ids-input .alert:hover,
+.ids-input .warning,
+.ids-input .warning:hover {
+  border-color: var(--ids-input-color-border-alert-default);
+  color: var(--ids-input-color-text-alert-default);
+}
+.ids-input .alert:focus-within, .ids-input .alert.is-active,
+.ids-input .alert:hover:focus-within,
+.ids-input .alert:hover.is-active,
+.ids-input .warning:focus-within,
+.ids-input .warning.is-active,
+.ids-input .warning:hover:focus-within,
+.ids-input .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 .alert[disabled],
+.ids-input .alert:hover[disabled],
+.ids-input .warning[disabled],
+.ids-input .warning:hover[disabled] {
+  border-color: var(--ids-input-color-border-alert-disabled);
+  color: var(--ids-input-color-text-alert-disabled);
+}
+.ids-input .error,
+.ids-input .error:hover {
+  border-color: var(--ids-input-color-border-error-default);
+  color: var(--ids-input-error-color-text-error-default);
+}
+.ids-input .error:focus-within, .ids-input .error.is-active,
+.ids-input .error:hover:focus-within,
+.ids-input .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 .error[disabled],
+.ids-input .error:hover[disabled] {
+  border-color: var(--ids-input-color-border-error-disabled);
+  color: var(--ids-input-color-border-error-disabled);
+}
+.ids-input .info,
+.ids-input .info:hover {
+  border-color: var(--ids-input-color-border-info-default);
+  color: var(--ids-input-color-text-info-default);
+}
+.ids-input .info:focus-within, .ids-input .info.is-active,
+.ids-input .info:hover:focus-within,
+.ids-input .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 .info[disabled],
+.ids-input .info:hover[disabled] {
+  border-color: var(--ids-input-color-border-info-disabled);
+  color: var(--ids-input-color-text-info-disabled);
+}
+.ids-input .success,
+.ids-input .success:hover {
+  border-color: var(--ids-input-color-border-success-default);
+  color: var(--ids-input-color-text-success-default);
+}
+.ids-input .success:focus-within, .ids-input .success.is-active,
+.ids-input .success:hover:focus-within,
+.ids-input .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 .success[disabled],
+.ids-input .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):not(.color-variant-borderless) .field-container, .ids-input.color-variant-alternate-formatter.ids-input:hover:not(.readonly):not(.disabled):not(.color-variant-borderless):hover .field-container {
+  border-color: var(--ids-data-grid-filter-input-color-background-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 .field-container, .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;
+}
+
+.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;
+}
+
+:host([part=trigger-field]) {
+  justify-content: flex-start;
+}
+
+.ids-trigger-field {
+  justify-content: inherit;
+}
+
+.ids-trigger-field-slot-trigger-start,
+::slotted(*[slot=trigger-start]:first-of-type:not([inline]):not([compact]):not([field-height=xs])) {
+  margin-inline-start: var(--ids-trigger-field-button-margin);
+}
+
+.ids-trigger-field-slot-trigger-end,
+::slotted(*[slot=trigger-end]:last-of-type:not([inline]):not([compact]):not([field-height=xs])) {
+  margin-inline-end: var(--ids-trigger-field-button-margin);
+}
+
+.ids-input.color-variant-alternate-formatter:focus-within .field-container {
+  box-shadow: var(--ids-trigger-field-shadow-focus);
+}
+.ids-input.color-variant-alternate-formatter:focus-within .ids-input-field {
+  box-shadow: none;
+}
+
+.ids-search-field:focus-within ids-input::part(input) {
+  box-shadow: none;
+}
+
+:host ids-menu-button {
+  transition: border var(--ids-motion-duration) var(--ids-motion-ease);
+  border: 0;
+  border-inline: 0;
+  border-inline-end: 1px solid var(--ids-input-color-border-default);
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  margin: 0;
+  margin-inline: 0;
+  padding: 0;
+  padding-inline: 0;
+}
+:host ids-menu-button > * {
+  display: inline-flex;
+  align-self: center;
+}
+:host ids-menu-button::part(button) {
+  border: 0;
+  border-radius: 0;
+  margin: 0;
+  margin-inline: 0;
+  padding: 0;
+  padding-inline: 0;
+  padding-inline: var(--ids-search-field-icon-margin);
+}
+:host ids-menu-button::part(button), :host ids-menu-button::part(button):active, :host ids-menu-button::part(button):hover {
+  background: transparent;
+  background-color: transparent;
+}
+
+:host(:focus-within) ids-menu-button,
+:host(:focus-visible) ids-menu-button {
+  border-color: var(--ids-input-color-border-focus);
+}
+:host(:focus-within) ids-menu-button::part(button),
+:host(:focus-visible) ids-menu-button::part(button) {
+  color: var(--ids-button-tertiary-color-text-hover);
+}
+
+:host(:active) ids-menu-button,
+:host(:hover) ids-menu-button {
+  border-color: var(--ids-input-color-border-hover);
+}
+
+.ids-search-field ids-icon.search-icon {
+  margin-inline-start: var(--ids-search-field-icon-margin);
+}
+.ids-search-field .fieldset {
+  display: inline-flex;
+  flex-direction: row;
+}
+.ids-search-field #category-action-button::part(button) {
+  padding: var(--ids-space-40);
+  margin-inline-start: var(--ids-search-field-icon-margin);
+}
+.ids-search-field.color-variant-alternate .field-container {
+  border-style: none;
+  background-color: var(--ids-search-field-header-color-background);
+  color: var(--ids-search-field-header-color-text);
+}
+.ids-search-field.color-variant-alternate ids-icon {
+  color: var(--ids-search-field-header-color-icon-default);
+}
+.ids-search-field.color-variant-card .field-container {
+  background: var(--ids-search-field-card-color-background);
+  color: var(--ids-search-field-card-color-text);
+}
+.ids-search-field.color-variant-card .btn-clear:hover {
+  background-color: transparent;
+}
+.ids-search-field.color-variant-app-menu {
+  color: var(--ids-search-field-app-menu-color-text);
+}
+.ids-search-field.color-variant-app-menu .field-container {
+  border-style: none;
+  border-radius: var(--ids-search-field-border-radius);
+  background-color: var(--ids-search-field-app-menu-color-background);
+  color: var(--ids-search-field-app-menu-color-text);
+}
+.ids-search-field.color-variant-app-menu .ids-input-field {
+  color: var(--ids-search-field-app-menu-color-text);
+}
+.ids-search-field.color-variant-app-menu .btn-clear {
+  color: var(--ids-search-field-app-menu-color-icon-default);
+}
+.ids-search-field.color-variant-app-menu .btn-clear:hover {
+  color: var(--ids-search-field-app-menu-color-icon-hover);
+}
+.ids-search-field.color-variant-app-menu ids-icon::part(search-icon) {
+  color: var(--ids-search-field-app-menu-color-text);
+}
+.ids-search-field.color-variant-app-menu:focus-within ids-icon::part(search-icon) {
+  color: var(--ids-search-field-app-menu-color-icon-hover);
+}
+.ids-search-field.color-variant-app-menu:focus-within .field-container, .ids-search-field.color-variant-app-menu.readonly:focus-within .field-container {
+  box-shadow: var(--ids-search-field-app-menu-shadow-focus);
+}`;var g="Search",m="Type to search",n=class extends u{constructor(){super()}isFormComponent=!0;colorVariants=["alternate","app-menu","card"];onColorVariantRefresh(i){let t=i||"";i==="app-menu"&&(t="alternate");let e=o=>{o.setAttribute(r.COLOR_VARIANT,t)};this.buttons.forEach(e),this.fieldContainer&&[...this.fieldContainer.querySelectorAll("ids-trigger-button")].forEach(e)}static get attributes(){return[...super.attributes,r.CATEGORY]}connectedCallback(){super.connectedCallback(),this.#s(),this.#l(),this.placeholder||(this.placeholder=m),this.label||(this.label=g)}template(){this.templateHostAttributes();let{ariaLabel:i,containerClass:t,inputClass:e,inputState:o,labelHtml:a,placeholder:d,type:v,value:b}=this.templateVariables(),f='<ids-icon class="ids-icon search-icon starting-icon" size="medium" icon="search"></ids-icon>';return`<div id="ids-search-field" class="ids-search-field ids-trigger-field ${t}" part="container">
+      ${a}
+      <div class="fieldset">
+        <div class="field-container" part="field-container">
+          ${this.categories.length?"":f}
+          <slot name="trigger-start"></slot>
+          ${this.templateCategoriesMenu()}
+          <input
+            part="input"
+            id="${this.id}-input"
+            ${v}${e}${d}${o}
+            ${i}
+            ${b}
+            ></input>
+          <slot name="trigger-end"></slot>
+        </div>
+        ${this.templateCategoriesButton()}
+      </div>
+      ${this.autocomplete?`
+        <ids-popup
+          type="menu"
+          align="bottom, left"
+          align-target="#${this.id}-input"
+          part="popup"
+        >
+          <ids-list-box slot="content"></ids-list-box>
+        </ids-popup>`:""}
+    </div>`}templateCategoriesButton(){return this.action?`
+      <ids-button id="category-action-button" appearance="secondary">
+        <span>${this.action}</span>
+      </ids-button>
+    `:""}templateCategoriesMenu(){return this.categories.length?`
+      <ids-menu-button id="menu-button" appearance="tertiary" menu="category-menu" icon="search" dropdown-icon>
+        ${this.category?`<span>${this.category}</span>`:'<span class="audible">Select Search Category</span>'}
+      </ids-menu-button>
+      <ids-popup-menu id="category-menu" target="menu-button" trigger-type="click" align="bottom, right">
+        <ids-menu-group select="${this.multiple?"multiple":"single"}" keep-open="true">
+          ${this.categories.map((t,e)=>`<ids-menu-item value="${e}">${t}</ids-menu-item>`).join("")}
+        </ids-menu-group>
+      </ids-popup-menu>
+    `:""}#o(){let i=this.category,t=this.#n;if(!i||!t)return;let e=this.selectedCategories;e.length===1?t.text=e[0]:e.length>1?t.text=`${e.length} ${this.localeAPI?.translate?.("Selected")}`:t.text=i;let o=this.#i?.popup,a=parseInt(o?.style?.getProperty?.("min-width")??155),d=this.#n?.getBoundingClientRect().width??a;o?.style?.setProperty?.("min-width",`${Math.max(d,a)}px`),this.multiple||this.#i?.hide?.()}get#i(){return this.shadowRoot?.querySelector("ids-popup-menu")}get#n(){return this.shadowRoot?.querySelector("ids-menu-button")}get#a(){return this.shadowRoot?.querySelector("ids-button#category-action-button")}#d=[];get categories(){return this.#d}set categories(i){this.#d=i,this.#r()}set category(i){i?this.setAttribute(r.CATEGORY,i):this.removeAttribute(r.CATEGORY),this.#r()}get category(){return this.getAttribute(r.CATEGORY)??""}get selectedCategories(){let i=this.categories;return(this.#i?.getSelectedValues?.()??[]).map(o=>i[o])}set action(i){i?this.setAttribute(r.ACTION,i):this.removeAttribute(r.ACTION),this.#r()}get action(){return this.getAttribute(r.ACTION)??""}set multiple(i){i?this.setAttribute(r.MULTIPLE,""):this.removeAttribute(r.MULTIPLE)}get multiple(){return this.hasAttribute(r.MULTIPLE)}async search(i){let t=[],e=s(i);return this.#e!==e&&(this.input&&(this.input.value=e),this.#e=e,typeof this.onSearch=="function"&&(t=await this.onSearch(e))),t}set value(i){super.value=i;let t=super.value;this.#e=t,typeof this.onSearch=="function"&&this.onSearch(t)}get value(){return super.value}onSearch(i=void 0){return[`${s(i)}`]}#e=null;#s(){let i=t=>{this.search(t.target?.value)};this.offEvent("change",this.input),this.onEvent("change",this.input,i),this.offEvent("input",this.input),this.onEvent("input",this.input,i),this.offEvent("click",this.#a),this.onEvent("click",this.#a,()=>{this.search(this.value),this.#t("search")}),this.offEvent("selected",this.#i),this.onEvent("selected",this.#i,()=>{this.#o(),this.#t("selected")}),this.offEvent("deselected",this.#i),this.onEvent("deselected",this.#i,()=>{this.#o(),this.#t("deselected")})}#l(){this.offEvent("keydown",this.input),this.onEvent("keydown",this.input,i=>{let t=!i?.path?.length||!i.path[0].classList||!i.path[0].classList.contains("ids-icon-button");switch(["Enter"].indexOf(i.code)>-1&&t&&i.preventDefault(),i.key){case"Enter":t&&(this.onSearch(this.input?.value),this.#t("search"));break;default:break}})}#t(i){this.triggerEvent(i,this,{detail:{elem:this,categories:this.categories,categoriesSelected:this.selectedCategories,value:this.value},bubbles:!0,cancelable:!1,composed:!1})}#r(){this.container&&(this.container.innerHTML=this.template(),this.connectedCallback())}};n=l([c("ids-search-field"),p(h)],n);export{n as a};