@haiilo/catalyst 10.24.2 → 10.25.0

package/dist/components/cat-tag.js.map

@@ -1 +1 @@
-{"file":"cat-tag.js","mappings":"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","names":["CatTag","i18n"],"sources":["src/components/cat-tag/cat-tag.scss?tag=cat-tag&encapsulation=shadow","src/components/cat-tag/cat-tag.tsx"],"sourcesContent":["@use '_snippets/form-label';\n@use 'variables' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  min-width: 20rem;\n  padding: 0.375rem 0;\n  flex: 1 1 auto;\n  border: none;\n  outline: none;\n  background: none;\n  @include cat-ellipsis;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:-webkit-autofill {\n    &,\n    &:hover,\n    &:focus {\n      -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.input-wrapper {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: stretch;\n  gap: 0.25rem;\n  padding: 0.25rem 0.75rem;\n  min-height: 2rem;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n  transition: box-shadow cat-token('time.transition.s') linear;\n  --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\n  flex-wrap: wrap;\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.muted');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled):hover {\n    box-shadow:\n      inset 0 0 0 1px rgb(var(--border-color)),\n      0 0 0 1px rgb(var(--border-color));\n  }\n\n  &:focus-within {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: -1px;\n\n    &:has(.clearable:focus) {\n      outline: none;\n    }\n  }\n\n  &.input-invalid {\n    --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:has(input:-webkit-autofill) {\n    &,\n    &:hover,\n    &:focus {\n      background-color: cat-token('color.ui.background.inputAutofill');\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.tag-pill {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.25rem 0.5rem;\n  background: cat-token('color.ui.background.muted');\n  border-radius: cat-border-radius('s');\n  white-space: nowrap;\n  min-width: 0;\n\n  > span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1 1 0;\n  }\n\n  > cat-button {\n    margin-right: -0.25rem;\n    margin-left: -0.25rem;\n  }\n}\n\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  flex: 1 1 auto;\n  display: flex;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * An input that allows multiple values to be entered as tags.\n *\n * @part input - The native input element.\n * @part label - The native label element.\n */\n@Component({\n  tag: 'cat-tag',\n  styleUrl: 'cat-tag.scss',\n  shadow: true\n})\nexport class CatTag {\n  private readonly _id = `cat-input-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n  private errorMapSrc?: ErrorMap | true;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() tags: string[] = [];\n\n  @State() errorMap?: ErrorMap | true;\n\n  /**\n   * Whether the label need a marker to shown if the select is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the select is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placeholder text to display within the select.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the select.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the select.\n   */\n  @Prop() label = '';\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A value is required or must be checked for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string[];\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors change with the given delay in milliseconds or immediately on blur.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.\n   * Pasted values will also be split by those chars.\n   * Defaults to `[' ']`.\n   */\n  @Prop() tagCreationChars: string[] = [' '];\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string[]>;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onErrorsChanged(this.errors, undefined, false);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent): void {\n    const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;\n    if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {\n      event.preventDefault();\n      if (this.input?.value.trim() && !this.value?.includes(this.input?.value.trim())) {\n        this.value = [...(this.value ?? []), this.input.value.trim()];\n        this.catChange.emit(this.value);\n      }\n      if (this.input) {\n        this.input.value = '';\n      }\n    } else if (\n      ['Backspace'].includes(event.key) &&\n      this.input?.selectionStart === 0 &&\n      (this.value?.length ?? 0) > 0 &&\n      isInputFocused\n    ) {\n      this.value = this.value?.slice(0, -1) ?? [];\n      this.catChange.emit(this.value);\n    }\n  }\n\n  @Watch('errors')\n  onErrorsChanged(newValue?: boolean | string[] | ErrorMap, _oldValue?: unknown, update: boolean = true) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(newValue)\n        ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : newValue || undefined;\n      if (update) {\n        this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={`tags-${this.id}-input`} part=\"label\">\n              <span class=\"label-wrapper\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                <div class=\"label-metadata\">\n                  {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.optional')})\n                    </span>\n                  )}\n                  {this.required && this.requiredMarker?.startsWith('required') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.required')})\n                    </span>\n                  )}\n                </div>\n              </span>\n            </label>\n          )}\n        </div>\n        <div class={{ 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid }}>\n          {this.value?.map(value => (\n            <div class=\"tag-pill\">\n              <span>{value}</span>\n              {!this.disabled && (\n                <cat-button\n                  size=\"xs\"\n                  variant=\"text\"\n                  icon=\"$cat:select-clear\"\n                  iconOnly\n                  a11yLabel={i18n.t('select.deselect')}\n                  onClick={() => this.deselect(value)}\n                  tabIndex={-1}\n                ></cat-button>\n              )}\n            </div>\n          ))}\n          <div class=\"input-inner-wrapper\">\n            <input\n              {...this.nativeAttributes}\n              part=\"input\"\n              id={`tags-${this.id}-input`}\n              class=\"tags-input\"\n              role=\"combobox\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              aria-invalid={this.invalid ? 'true' : undefined}\n              aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n              onInput={this.onInput.bind(this)}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n            ></input>\n            {this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"$cat:input-close\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={i18n.t('input.clear')}\n                onClick={this.clear.bind(this)}\n                data-dropdown-no-close\n              ></cat-button>\n            )}\n            {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n          </div>\n        </div>\n        {this.hasHint && (\n          <CatFormHint\n            id={this.id}\n            hint={this.hint}\n            slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n            errorMap={this.errorMap}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint || this.invalid;\n  }\n\n  private get invalid() {\n    return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    const currentValue = [\n      ...new Set(this.input?.value?.split(this.createSplitRegex(this.tagCreationChars)) ?? [])\n    ].filter(value => !!value && !this.value?.includes(value));\n    if (currentValue.length > 1) {\n      this.value = [...(this.value ?? []), ...currentValue];\n      this.catChange.emit(this.value);\n      if (this.input) {\n        this.input.value = '';\n      }\n    }\n  }\n\n  private clear() {\n    this.value = [];\n    this.catChange.emit(this.value);\n    if (this.input) {\n      this.input.value = '';\n    }\n  }\n\n  private deselect(value: string) {\n    this.value = this.value?.filter(element => element !== value);\n    this.catChange.emit(this.value);\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n\n  private createSplitRegex(delimiters: string[]): RegExp {\n    // Escape special regex characters in the array\n    const escapedDelimiters = delimiters.map(delimiter => delimiter.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'));\n\n    // Add newline characters to the list of delimiters\n    escapedDelimiters.push('\\\\n', '\\\\r');\n\n    // Join the escaped delimiters to create a character class\n    const regexPattern = `[${escapedDelimiters.join('')}]`;\n\n    return new RegExp(regexPattern, 'g');\n  }\n}\n"],"version":3}
+{"file":"cat-tag.js","mappings":"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","names":["CatTag","i18n"],"sources":["src/components/cat-tag/cat-tag.scss?tag=cat-tag&encapsulation=shadow","src/components/cat-tag/cat-tag.tsx"],"sourcesContent":["@use '_snippets/form-label';\n@use 'variables' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use 'utils/color';\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  min-width: 20rem;\n  padding: 0.375rem 0;\n  flex: 1 1 auto;\n  border: none;\n  outline: none;\n  background: none;\n  @include cat-ellipsis;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:-webkit-autofill {\n    &,\n    &:hover,\n    &:focus {\n      -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.input-wrapper {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: stretch;\n  gap: 0.25rem;\n  padding: 0.25rem 0.75rem;\n  min-height: 2rem;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: inset 0 0 0 1px rgb(var(--border-color));\n  transition: box-shadow cat-token('time.transition.s') linear;\n  --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};\n  flex-wrap: wrap;\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.muted');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled):hover {\n    box-shadow:\n      inset 0 0 0 1px rgb(var(--border-color)),\n      0 0 0 1px rgb(var(--border-color));\n  }\n\n  &:focus-within {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: -1px;\n\n    &:has(.clearable:focus) {\n      outline: none;\n    }\n  }\n\n  &.input-invalid {\n    --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};\n  }\n\n  /* stylelint-disable property-no-vendor-prefix */\n  &:has(input:-webkit-autofill) {\n    &,\n    &:hover,\n    &:focus {\n      background-color: cat-token('color.ui.background.inputAutofill');\n    }\n  }\n  /* stylelint-enable property-no-vendor-prefix */\n}\n\n.tag-pill {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.25rem 0.5rem;\n  background: cat-token('color.ui.background.muted');\n  border-radius: cat-border-radius('s');\n  white-space: nowrap;\n  min-width: 0;\n\n  > span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1 1 0;\n  }\n\n  > cat-button {\n    margin-right: -0.25rem;\n    margin-left: -0.25rem;\n  }\n}\n\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  flex: 1 1 auto;\n  display: flex;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * An input that allows multiple values to be entered as tags.\n *\n * @part input - The native input element.\n * @part label - The native label element.\n */\n@Component({\n  tag: 'cat-tag',\n  styleUrl: 'cat-tag.scss',\n  shadow: true\n})\nexport class CatTag {\n  private readonly _id = `cat-input-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n  private errorMapSrc?: ErrorMap | true;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() tags: string[] = [];\n\n  @State() errorMap?: ErrorMap | true;\n\n  /**\n   * Whether the label need a marker to shown if the select is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the select is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placeholder text to display within the select.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the select.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the select.\n   */\n  @Prop() label = '';\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A value is required or must be checked for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string[];\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors change with the given delay in milliseconds or immediately on blur.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.\n   * Pasted values will also be split by those chars.\n   * Defaults to `[' ']`.\n   */\n  @Prop() tagCreationChars: string[] = [' '];\n\n  /**\n   * Whether new tag is added when the input is blurred.\n   */\n  @Prop() addOnBlur = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string[]>;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onErrorsChanged(this.errors, undefined, false);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent): void {\n    const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;\n    if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {\n      event.preventDefault();\n      this.addInputValue();\n    } else if (\n      ['Backspace'].includes(event.key) &&\n      this.input?.selectionStart === 0 &&\n      (this.value?.length ?? 0) > 0 &&\n      isInputFocused\n    ) {\n      this.value = this.value?.slice(0, -1) ?? [];\n      this.catChange.emit(this.value);\n    }\n  }\n\n  @Watch('errors')\n  onErrorsChanged(newValue?: boolean | string[] | ErrorMap, _oldValue?: unknown, update: boolean = true) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(newValue)\n        ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : newValue || undefined;\n      if (update) {\n        this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={`tags-${this.id}-input`} part=\"label\">\n              <span class=\"label-wrapper\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                <div class=\"label-metadata\">\n                  {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.optional')})\n                    </span>\n                  )}\n                  {this.required && this.requiredMarker?.startsWith('required') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.required')})\n                    </span>\n                  )}\n                </div>\n              </span>\n            </label>\n          )}\n        </div>\n        <div class={{ 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid }}>\n          {this.value?.map(value => (\n            <div class=\"tag-pill\">\n              <span>{value}</span>\n              {!this.disabled && (\n                <cat-button\n                  size=\"xs\"\n                  variant=\"text\"\n                  icon=\"$cat:select-clear\"\n                  iconOnly\n                  a11yLabel={i18n.t('select.deselect')}\n                  onClick={() => this.deselect(value)}\n                  tabIndex={-1}\n                ></cat-button>\n              )}\n            </div>\n          ))}\n          <div class=\"input-inner-wrapper\">\n            <input\n              {...this.nativeAttributes}\n              part=\"input\"\n              id={`tags-${this.id}-input`}\n              class=\"tags-input\"\n              role=\"combobox\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              aria-invalid={this.invalid ? 'true' : undefined}\n              aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n              onInput={this.onInput.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n            ></input>\n            {this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"$cat:input-close\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={i18n.t('input.clear')}\n                onClick={this.clear.bind(this)}\n                data-dropdown-no-close\n              ></cat-button>\n            )}\n            {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n          </div>\n        </div>\n        {this.hasHint && (\n          <CatFormHint\n            id={this.id}\n            hint={this.hint}\n            slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n            errorMap={this.errorMap}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint || this.invalid;\n  }\n\n  private get invalid() {\n    return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    const currentValue = [\n      ...new Set(this.input?.value?.split(this.createSplitRegex(this.tagCreationChars)) ?? [])\n    ].filter(value => !!value && !this.value?.includes(value));\n    if (currentValue.length > 1) {\n      this.value = [...(this.value ?? []), ...currentValue];\n      this.catChange.emit(this.value);\n      if (this.input) {\n        this.input.value = '';\n      }\n    }\n  }\n\n  private onBlur() {\n    if (this.addOnBlur) {\n      this.addInputValue();\n    }\n  }\n\n  private addInputValue() {\n    const inputValue = this.input?.value.trim();\n    if (inputValue && !this.value?.includes(inputValue)) {\n      this.value = [...(this.value ?? []), inputValue];\n      this.catChange.emit(this.value);\n    }\n    if (this.input) {\n      this.input.value = '';\n    }\n  }\n\n  private clear() {\n    this.value = [];\n    this.catChange.emit(this.value);\n    if (this.input) {\n      this.input.value = '';\n    }\n  }\n\n  private deselect(value: string) {\n    this.value = this.value?.filter(element => element !== value);\n    this.catChange.emit(this.value);\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n\n  private createSplitRegex(delimiters: string[]): RegExp {\n    // Escape special regex characters in the array\n    const escapedDelimiters = delimiters.map(delimiter => delimiter.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'));\n\n    // Add newline characters to the list of delimiters\n    escapedDelimiters.push('\\\\n', '\\\\r');\n\n    // Join the escaped delimiters to create a character class\n    const regexPattern = `[${escapedDelimiters.join('')}]`;\n\n    return new RegExp(regexPattern, 'g');\n  }\n}\n"],"version":3}

package/dist/esm/cat-alert_30.entry.js

@@ -8555,6 +8555,7 @@ const CatDropdown = class {
             return; // busy or closed
         }
         this.isOpen = null;
+        this.trap?.deactivate();
         this.content.classList.remove('show');
         // give CSS transition time to apply
         setTimeout(() => {
@@ -8562,12 +8563,11 @@ const CatDropdown = class {
             this.content.classList.remove('show');
             this.content.style.display = '';
             this.trigger?.setAttribute('aria-expanded', 'false');
-            this.trap?.deactivate();
             this.catClose.emit();
         }, timeTransitionS);
     }
     render() {
-        return (h(Host, { key: 'c0ec9a85a4b9ea6a739507480d630c8fc8dd15f5' }, h("slot", { key: 'd696c663aeaf62869077994227b12c033c3eaa01', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'b8bb9467fda8b26fdb3d6e88aa2c6ff5c091787f', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '0a65794088d27a74621ce390f7ad21d798b6a0e5', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '41dff5ac88c5175a856f6aca5d0696899d20f848', name: "content" }))));
+        return (h(Host, { key: '3ead90dae1ac492a0cb592d7cf7a50fd42f26ca7' }, h("slot", { key: 'b91bba7772b2a90850be2ac85b82ec7691ae031d', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'f7e07ffed988133cbccafb8f8c73fdb52757d9fb', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '868a0578cd30cac249959e0961b0425e56048af9', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '19fb6b5b92599ed1ae21aac591271957a6e7b060', name: "content" }))));
     }
     componentDidLoad() {
         this.initAnchor();
@@ -13164,6 +13164,7 @@ const CatTag = class {
         this.errors = undefined;
         this.errorUpdate = 0;
         this.tagCreationChars = [' '];
+        this.addOnBlur = false;
     }
     get id() {
         return this.identifier || this._id;
@@ -13179,13 +13180,7 @@ const CatTag = class {
         const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;
         if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {
             event.preventDefault();
-            if (this.input?.value.trim() && !this.value?.includes(this.input?.value.trim())) {
-                this.value = [...(this.value ?? []), this.input.value.trim()];
-                this.catChange.emit(this.value);
-            }
-            if (this.input) {
-                this.input.value = '';
-            }
+            this.addInputValue();
         }
         else if (['Backspace'].includes(event.key) &&
             this.input?.selectionStart === 0 &&
@@ -13209,7 +13204,7 @@ const CatTag = class {
         }
     }
     render() {
-        return (h(Host, { key: '135364ebcdc0a62c65bac513a6b1064471dde605' }, h("div", { key: '4817ca9e3cd93efdc06e22e0b415db48b00185f7', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'b95bcba6027f2fa40b7923366ceb2a1c26129a3e', htmlFor: `tags-${this.id}-input`, part: "label" }, h("span", { key: '9c704843a3c064509204833a3ba6e5eac2d21231', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'e2ab5fe74ed24208728a982af1159dcc72a09c41', name: "label" })) || this.label, h("div", { key: '7469074d3cfc1bf339946d5a442af837dadf0084', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '0d2aef89e70dbaa69158fe258696603e0d677c80', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '7a4aea95cd7d800a08f18f4328480d6f85a0496d', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '1720e39c3bf5ba7985293e61d1dc418e73244811', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (h("div", { class: "tag-pill" }, h("span", null, value), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), h("div", { key: '44dda72d8199e6734bccd7cc04d1b351fadd5aee', class: "input-inner-wrapper" }, h("input", { key: 'c0cf4621bb64972abc2de682ee6fd5c25fcbb204', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (h("cat-button", { key: '3352788f1b1efcd077561c4f2a32ab08a1970447', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && h("cat-icon", { key: 'd699cf0b9b44899618e01d2fec55f020bd45c2b4', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (h(CatFormHint, { key: '2b9e63f062e99069dc43946c236ddb7805b86f41', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))));
+        return (h(Host, { key: '04de7eb41f8c5517c927a416d2d34afd092abed7' }, h("div", { key: 'a459eec9bdb227075df6d9ccfc81508ccd60467d', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'f012f015e602b52ea6b57662bf8f9b3789fbc20d', htmlFor: `tags-${this.id}-input`, part: "label" }, h("span", { key: '3302bde705d78c59003650af8c85ad415997b2af', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '2f8bbb5696d92268d04b162023fdc37a27d62cde', name: "label" })) || this.label, h("div", { key: '8804dd6eaf4c8057c5318694d856d3c28d63a812', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '682da9fc4cfb49b945eaf296d63f9774df570efa', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '860bca7b5fc8cf0c7c555a5e45ce34312362400e', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '04197f0876dac237f865ba4f5948a444a27f2f2e', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (h("div", { class: "tag-pill" }, h("span", null, value), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), h("div", { key: 'b85aa4cd1520f4e477d649f9fd8300eb25fe2d3b', class: "input-inner-wrapper" }, h("input", { key: 'a4a28b1ca647e68970f1a6e3c6d852df7e43d00d', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), onBlur: this.onBlur.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (h("cat-button", { key: 'e29fdad3d4ad47db287ada8544cf71baa12add40', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && h("cat-icon", { key: '8b443ee821d4dfbdaeec41a945c70d60760ffa42', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (h(CatFormHint, { key: '5f8f1115296726c536849ec4c574e8beaa53b157', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -13229,6 +13224,21 @@ const CatTag = class {
             }
         }
     }
+    onBlur() {
+        if (this.addOnBlur) {
+            this.addInputValue();
+        }
+    }
+    addInputValue() {
+        const inputValue = this.input?.value.trim();
+        if (inputValue && !this.value?.includes(inputValue)) {
+            this.value = [...(this.value ?? []), inputValue];
+            this.catChange.emit(this.value);
+        }
+        if (this.input) {
+            this.input.value = '';
+        }
+    }
     clear() {
         this.value = [];
         this.catChange.emit(this.value);