+
+
+
+
diff --git a/angular/projects/catalyst-demo/src/app/app.component.ts b/angular/projects/catalyst-demo/src/app/app.component.ts
index 339f23d76..3776c1f57 100644
--- a/angular/projects/catalyst-demo/src/app/app.component.ts
+++ b/angular/projects/catalyst-demo/src/app/app.component.ts
@@ -36,6 +36,8 @@ export class AppComponent implements OnInit {
datepickerDisabled: new FormControl(true)
});
+ tagFormControl = new FormControl(['tag1', 'tag2'], [Validators.required]);
+
countryConnector = countryConnector;
fields: FormlyFieldConfig[] = [
@@ -182,4 +184,8 @@ export class AppComponent implements OnInit {
panelClass: ['cat-panel']
});
}
+
+ logChanges($event: any) {
+ console.log($event);
+ }
}
diff --git a/angular/projects/catalyst/src/lib/catalyst.module.ts b/angular/projects/catalyst/src/lib/catalyst.module.ts
index fbfa7c237..b03bb5e5e 100644
--- a/angular/projects/catalyst/src/lib/catalyst.module.ts
+++ b/angular/projects/catalyst/src/lib/catalyst.module.ts
@@ -43,7 +43,8 @@ const CatComponents = [
Components.CatTextarea,
Components.CatTime,
Components.CatToggle,
- Components.CatTooltip
+ Components.CatTooltip,
+ Components.CatTag
];
const CatDirectives = [
diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts
index 55cace5db..1a7f43704 100644
--- a/angular/projects/catalyst/src/lib/directives/proxies.ts
+++ b/angular/projects/catalyst/src/lib/directives/proxies.ts
@@ -1160,6 +1160,76 @@ export declare interface CatTabs extends Components.CatTabs {
catChange: EventEmitter>;
}
+@ProxyCmp({
+ inputs: [
+ 'clearable',
+ 'disabled',
+ 'errorUpdate',
+ 'errors',
+ 'hint',
+ 'identifier',
+ 'label',
+ 'labelHidden',
+ 'name',
+ 'nativeAttributes',
+ 'placeholder',
+ 'required',
+ 'requiredMarker',
+ 'tagCreationChars',
+ 'value'
+ ]
+})
+@Component({
+ selector: 'cat-tag',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: '',
+ // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+ inputs: [
+ 'clearable',
+ 'disabled',
+ 'errorUpdate',
+ 'errors',
+ 'hint',
+ 'identifier',
+ 'label',
+ 'labelHidden',
+ 'name',
+ 'nativeAttributes',
+ 'placeholder',
+ 'required',
+ 'requiredMarker',
+ 'tagCreationChars',
+ 'value'
+ ]
+})
+export class CatTag {
+ protected el: HTMLElement;
+ constructor(
+ c: ChangeDetectorRef,
+ r: ElementRef,
+ protected z: NgZone
+ ) {
+ c.detach();
+ this.el = r.nativeElement;
+ proxyOutputs(this, this.el, ['catChange', 'catFocus', 'catBlur']);
+ }
+}
+
+export declare interface CatTag extends Components.CatTag {
+ /**
+ * Emitted when the value is changed.
+ */
+ catChange: EventEmitter>;
+ /**
+ * Emitted when the input received focus.
+ */
+ catFocus: EventEmitter>;
+ /**
+ * Emitted when the input loses focus.
+ */
+ catBlur: EventEmitter>;
+}
+
@ProxyCmp({
inputs: [
'disabled',
diff --git a/angular/projects/catalyst/src/lib/directives/select-value-accessor.ts b/angular/projects/catalyst/src/lib/directives/select-value-accessor.ts
index 463bf3e69..7bacefcaa 100644
--- a/angular/projects/catalyst/src/lib/directives/select-value-accessor.ts
+++ b/angular/projects/catalyst/src/lib/directives/select-value-accessor.ts
@@ -5,7 +5,7 @@ import { ValueAccessor } from './value-accessor';
@Directive({
/* tslint:disable-next-line:directive-selector */
- selector: 'cat-select',
+ selector: 'cat-select, cat-tag',
host: {
'(catChange)': 'handleChangeEvent($event.target.value)'
},
diff --git a/angular/projects/catalyst/src/lib/directives/value-accessor-decorator.ts b/angular/projects/catalyst/src/lib/directives/value-accessor-decorator.ts
index 60a44f101..2cff8a916 100644
--- a/angular/projects/catalyst/src/lib/directives/value-accessor-decorator.ts
+++ b/angular/projects/catalyst/src/lib/directives/value-accessor-decorator.ts
@@ -3,7 +3,7 @@ import { ControlContainer, NgControl, Validators } from '@angular/forms';
@Directive({
/* tslint:disable-next-line:directive-selector */
- selector: 'cat-input, cat-textarea, cat-datepicker, cat-select, cat-date, cat-time',
+ selector: 'cat-input, cat-textarea, cat-datepicker, cat-select, cat-date, cat-time, cat-tag',
host: {
'(catBlur)': 'updateErrors()'
}
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index d5a29e326..888746e3f 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1262,6 +1262,68 @@ export namespace Components {
*/
"tabsAlign": 'left' | 'center' | 'right' | 'justify';
}
+ interface CatTag {
+ /**
+ * Whether the input should show a clear button.
+ */
+ "clearable": boolean;
+ /**
+ * Whether the select is disabled.
+ */
+ "disabled": boolean;
+ /**
+ * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors on change with the given delay in milliseconds.
+ */
+ "errorUpdate": boolean | number;
+ /**
+ * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
+ */
+ "errors"?: boolean | string[] | ErrorMap;
+ /**
+ * Optional hint text(s) to be displayed with the select.
+ */
+ "hint"?: string | string[];
+ /**
+ * A unique identifier for the input.
+ */
+ "identifier"?: string;
+ /**
+ * The label for the select.
+ */
+ "label": string;
+ /**
+ * Visually hide the label, but still show it to assistive technologies like screen readers.
+ */
+ "labelHidden": boolean;
+ /**
+ * The name of the form control. Submitted with the form as part of a name/value pair.
+ */
+ "name"?: string;
+ /**
+ * Attributes that will be added to the native HTML input element.
+ */
+ "nativeAttributes"?: { [key: string]: string };
+ /**
+ * The placeholder text to display within the select.
+ */
+ "placeholder"?: string;
+ /**
+ * A value is required or must be checked for the form to be submittable.
+ */
+ "required": boolean;
+ /**
+ * Whether the label need a marker to shown if the select is required or optional.
+ */
+ "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
+ /**
+ * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`. Pasted values will also be split by those chars. Defaults to `[' ']`.
+ */
+ "tagCreationChars": string[];
+ /**
+ * The value of the control.
+ */
+ "value"?: string[];
+ }
/**
* Textarea specifies a control that allows user to write text over multiple
* rows. Used when the expected user input is long. For shorter input, use the
@@ -1652,6 +1714,10 @@ export interface CatTabsCustomEvent extends CustomEvent {
detail: T;
target: HTMLCatTabsElement;
}
+export interface CatTagCustomEvent extends CustomEvent {
+ detail: T;
+ target: HTMLCatTagElement;
+}
export interface CatTextareaCustomEvent extends CustomEvent {
detail: T;
target: HTMLCatTextareaElement;
@@ -2096,6 +2162,25 @@ declare global {
prototype: HTMLCatTabsElement;
new (): HTMLCatTabsElement;
};
+ interface HTMLCatTagElementEventMap {
+ "catChange": string[];
+ "catFocus": FocusEvent;
+ "catBlur": FocusEvent;
+ }
+ interface HTMLCatTagElement extends Components.CatTag, HTMLStencilElement {
+ addEventListener(type: K, listener: (this: HTMLCatTagElement, ev: CatTagCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
+ addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+ addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+ removeEventListener(type: K, listener: (this: HTMLCatTagElement, ev: CatTagCustomEvent) => any, options?: boolean | EventListenerOptions): void;
+ removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+ removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+ }
+ var HTMLCatTagElement: {
+ prototype: HTMLCatTagElement;
+ new (): HTMLCatTagElement;
+ };
interface HTMLCatTextareaElementEventMap {
"catChange": string;
"catFocus": FocusEvent;
@@ -2202,6 +2287,7 @@ declare global {
"cat-spinner": HTMLCatSpinnerElement;
"cat-tab": HTMLCatTabElement;
"cat-tabs": HTMLCatTabsElement;
+ "cat-tag": HTMLCatTagElement;
"cat-textarea": HTMLCatTextareaElement;
"cat-time": HTMLCatTimeElement;
"cat-toggle": HTMLCatToggleElement;
@@ -3464,6 +3550,80 @@ declare namespace LocalJSX {
*/
"tabsAlign"?: 'left' | 'center' | 'right' | 'justify';
}
+ interface CatTag {
+ /**
+ * Whether the input should show a clear button.
+ */
+ "clearable"?: boolean;
+ /**
+ * Whether the select is disabled.
+ */
+ "disabled"?: boolean;
+ /**
+ * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors on change with the given delay in milliseconds.
+ */
+ "errorUpdate"?: boolean | number;
+ /**
+ * The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input.
+ */
+ "errors"?: boolean | string[] | ErrorMap;
+ /**
+ * Optional hint text(s) to be displayed with the select.
+ */
+ "hint"?: string | string[];
+ /**
+ * A unique identifier for the input.
+ */
+ "identifier"?: string;
+ /**
+ * The label for the select.
+ */
+ "label"?: string;
+ /**
+ * Visually hide the label, but still show it to assistive technologies like screen readers.
+ */
+ "labelHidden"?: boolean;
+ /**
+ * The name of the form control. Submitted with the form as part of a name/value pair.
+ */
+ "name"?: string;
+ /**
+ * Attributes that will be added to the native HTML input element.
+ */
+ "nativeAttributes"?: { [key: string]: string };
+ /**
+ * Emitted when the input loses focus.
+ */
+ "onCatBlur"?: (event: CatTagCustomEvent) => void;
+ /**
+ * Emitted when the value is changed.
+ */
+ "onCatChange"?: (event: CatTagCustomEvent) => void;
+ /**
+ * Emitted when the input received focus.
+ */
+ "onCatFocus"?: (event: CatTagCustomEvent) => void;
+ /**
+ * The placeholder text to display within the select.
+ */
+ "placeholder"?: string;
+ /**
+ * A value is required or must be checked for the form to be submittable.
+ */
+ "required"?: boolean;
+ /**
+ * Whether the label need a marker to shown if the select is required or optional.
+ */
+ "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
+ /**
+ * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`. Pasted values will also be split by those chars. Defaults to `[' ']`.
+ */
+ "tagCreationChars"?: string[];
+ /**
+ * The value of the control.
+ */
+ "value"?: string[];
+ }
/**
* Textarea specifies a control that allows user to write text over multiple
* rows. Used when the expected user input is long. For shorter input, use the
@@ -3811,6 +3971,7 @@ declare namespace LocalJSX {
"cat-spinner": CatSpinner;
"cat-tab": CatTab;
"cat-tabs": CatTabs;
+ "cat-tag": CatTag;
"cat-textarea": CatTextarea;
"cat-time": CatTime;
"cat-toggle": CatToggle;
@@ -3930,6 +4091,7 @@ declare module "@stencil/core" {
* window, using tabs as a navigational element.
*/
"cat-tabs": LocalJSX.CatTabs & JSXBase.HTMLAttributes;
+ "cat-tag": LocalJSX.CatTag & JSXBase.HTMLAttributes;
/**
* Textarea specifies a control that allows user to write text over multiple
* rows. Used when the expected user input is long. For shorter input, use the
diff --git a/core/src/components/cat-button/readme.md b/core/src/components/cat-button/readme.md
index 223caaf01..5ee075282 100644
--- a/core/src/components/cat-button/readme.md
+++ b/core/src/components/cat-button/readme.md
@@ -107,6 +107,7 @@ Type: `Promise`
- [cat-select](../cat-select)
- [cat-select-demo](../cat-select-demo)
- [cat-tabs](../cat-tabs)
+ - [cat-tag](../cat-tag)
- [cat-time](../cat-time)
### Depends on
@@ -126,6 +127,7 @@ graph TD;
cat-select --> cat-button
cat-select-demo --> cat-button
cat-tabs --> cat-button
+ cat-tag --> cat-button
cat-time --> cat-button
style cat-button fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/core/src/components/cat-icon/readme.md b/core/src/components/cat-icon/readme.md
index f3f949b64..2803987e5 100644
--- a/core/src/components/cat-icon/readme.md
+++ b/core/src/components/cat-icon/readme.md
@@ -41,6 +41,7 @@ doesn't fit.
- [cat-button](../cat-button)
- [cat-input](../cat-input)
- [cat-select](../cat-select)
+ - [cat-tag](../cat-tag)
- [cat-textarea](../cat-textarea)
### Graph
@@ -51,6 +52,7 @@ graph TD;
cat-button --> cat-icon
cat-input --> cat-icon
cat-select --> cat-icon
+ cat-tag --> cat-icon
cat-textarea --> cat-icon
style cat-icon fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/core/src/components/cat-tag/cat-tag.e2e.ts b/core/src/components/cat-tag/cat-tag.e2e.ts
new file mode 100644
index 000000000..2aab35b5b
--- /dev/null
+++ b/core/src/components/cat-tag/cat-tag.e2e.ts
@@ -0,0 +1,16 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('cat-tag', () => {
+ beforeAll(() => {
+ console.error = jest.fn();
+ console.warn = jest.fn();
+ });
+
+ it('renders', async () => {
+ const page = await newE2EPage();
+ await page.setContent('');
+
+ const element = await page.find('cat-tag');
+ expect(element).toHaveClass('hydrated');
+ });
+});
diff --git a/core/src/components/cat-tag/cat-tag.scss b/core/src/components/cat-tag/cat-tag.scss
new file mode 100644
index 000000000..5e05c176a
--- /dev/null
+++ b/core/src/components/cat-tag/cat-tag.scss
@@ -0,0 +1,123 @@
+@use '_snippets/form-label';
+@use 'variables' as *;
+@use 'src/components/cat-form-hint/cat-form-hint';
+@use 'utils/color';
+@use 'mixins' as *;
+
+:host {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+input {
+ font: inherit;
+ margin: 0;
+ min-width: 20rem;
+ padding: 0.375rem 0;
+ flex: 1 1 auto;
+ border: none;
+ outline: none;
+ background: none;
+ @include cat-ellipsis;
+
+ .input-disabled & {
+ cursor: not-allowed;
+ color: cat-token('color.ui.font.muted');
+ }
+
+ &::placeholder {
+ color: cat-token('color.ui.font.muted');
+ }
+
+ /* stylelint-disable property-no-vendor-prefix */
+ &:-webkit-autofill {
+ &,
+ &:hover,
+ &:focus {
+ -webkit-box-shadow: 0 0 0 9999px cat-token('color.ui.background.inputAutofill') inset;
+ }
+ }
+ /* stylelint-enable property-no-vendor-prefix */
+}
+
+.input-wrapper {
+ flex: 1 1 auto;
+ display: flex;
+ align-items: stretch;
+ gap: 0.25rem;
+ padding: 0.25rem 0.75rem;
+ min-height: 2rem;
+ background: cat-token('color.ui.background.input');
+ border-radius: cat-border-radius('m');
+ box-shadow: inset 0 0 0 1px rgb(var(--border-color));
+ transition: box-shadow cat-token('time.transition.s') linear;
+ --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};
+ flex-wrap: wrap;
+
+ &.input-disabled {
+ background: cat-token('color.ui.background.muted');
+ cursor: not-allowed;
+ color: cat-token('color.ui.font.muted');
+ }
+
+ &:not(.input-disabled):hover {
+ box-shadow:
+ inset 0 0 0 1px rgb(var(--border-color)),
+ 0 0 0 1px rgb(var(--border-color));
+ }
+
+ &:focus-within {
+ outline: 2px solid cat-token('color.ui.border.focus');
+ outline-offset: -1px;
+
+ &:has(.clearable:focus) {
+ outline: none;
+ }
+ }
+
+ &.input-invalid {
+ --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};
+ }
+
+ /* stylelint-disable property-no-vendor-prefix */
+ &:has(input:-webkit-autofill) {
+ &,
+ &:hover,
+ &:focus {
+ background-color: cat-token('color.ui.background.inputAutofill');
+ }
+ }
+ /* stylelint-enable property-no-vendor-prefix */
+}
+
+.tag-pill {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.25rem 0.5rem;
+ background: cat-token('color.ui.background.muted');
+ border-radius: cat-border-radius('s');
+ white-space: nowrap;
+ min-width: 0;
+
+ > span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex: 1 1 0;
+ }
+
+ > cat-button {
+ margin-right: -0.25rem;
+ margin-left: -0.25rem;
+ }
+}
+
+.icon-suffix {
+ align-self: center;
+}
+
+.input-inner-wrapper {
+ flex: 1 1 auto;
+ display: flex;
+}
diff --git a/core/src/components/cat-tag/cat-tag.spec.tsx b/core/src/components/cat-tag/cat-tag.spec.tsx
new file mode 100644
index 000000000..fb8856ecc
--- /dev/null
+++ b/core/src/components/cat-tag/cat-tag.spec.tsx
@@ -0,0 +1,23 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { CatTag } from './cat-tag';
+
+describe('cat-tag', () => {
+ it('renders', async () => {
+ const page = await newSpecPage({
+ components: [CatTag],
+ html: ``
+ });
+ expect(page.root).toEqualHtml(`
+
+
+
+
+
+
+
+
+
+
+ `);
+ });
+});
diff --git a/core/src/components/cat-tag/cat-tag.tsx b/core/src/components/cat-tag/cat-tag.tsx
new file mode 100644
index 000000000..8aec7c3af
--- /dev/null
+++ b/core/src/components/cat-tag/cat-tag.tsx
@@ -0,0 +1,324 @@
+import { Component, Host, h, State, Prop, Event, EventEmitter, Listen, Element, Watch } from '@stencil/core';
+import { coerceBoolean, coerceNumber } from '../../utils/coerce';
+import { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';
+import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
+
+let nextUniqueId = 0;
+
+@Component({
+ tag: 'cat-tag',
+ styleUrl: 'cat-tag.scss',
+ shadow: true
+})
+export class CatTag {
+ private readonly _id = `cat-input-${nextUniqueId++}`;
+
+ private input?: HTMLInputElement;
+ private errorMapSrc?: ErrorMap;
+
+ private get id() {
+ return this.identifier || this._id;
+ }
+
+ private get invalid() {
+ return !!Object.keys(this.errorMap || {}).length;
+ }
+
+ private get hasHint() {
+ return !!this.hint || this.invalid;
+ }
+
+ @Element() hostElement!: HTMLElement;
+
+ @State() hasSlottedLabel = false;
+ @State() hasSlottedHint = false;
+
+ @State() tags: string[] = [];
+
+ @State() errorMap?: ErrorMap;
+
+ /**
+ * Whether the label need a marker to shown if the select is required or optional.
+ */
+ @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';
+
+ /**
+ * Whether the select is disabled.
+ */
+ @Prop() disabled = false;
+
+ /**
+ * The placeholder text to display within the select.
+ */
+ @Prop() placeholder?: string;
+
+ /**
+ * Optional hint text(s) to be displayed with the select.
+ */
+ @Prop() hint?: string | string[];
+
+ /**
+ * A unique identifier for the input.
+ */
+ @Prop() identifier?: string;
+
+ /**
+ * The label for the select.
+ */
+ @Prop() label = '';
+
+ /**
+ * The name of the form control. Submitted with the form as part of a name/value pair.
+ */
+ @Prop() name?: string;
+
+ /**
+ * Visually hide the label, but still show it to assistive technologies like screen readers.
+ */
+ @Prop() labelHidden = false;
+
+ /**
+ * A value is required or must be checked for the form to be submittable.
+ */
+ @Prop() required = false;
+
+ /**
+ * Attributes that will be added to the native HTML input element.
+ */
+ @Prop() nativeAttributes?: { [key: string]: string };
+
+ /**
+ * The value of the control.
+ */
+ @Prop({ mutable: true }) value?: string[];
+
+ /**
+ * Whether the input should show a clear button.
+ */
+ @Prop() clearable = false;
+
+ /**
+ * The validation errors for this input. Will render a hint under the input
+ * with the translated error message(s) `error.${key}`. If an object is
+ * passed, the keys will be used as error keys and the values translation
+ * parameters.
+ * If the value is `true`, the input will be marked as invalid without any
+ * hints under the input.
+ */
+ @Prop() errors?: boolean | string[] | ErrorMap;
+
+ /**
+ * Fine-grained control over when the errors are shown. Can be `false` to
+ * never show errors, `true` to show errors on blur, or a number to show
+ * errors on change with the given delay in milliseconds.
+ */
+ @Prop() errorUpdate: boolean | number = 0;
+
+ /**
+ * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.
+ * Pasted values will also be split by those chars.
+ * Defaults to `[' ']`.
+ */
+ @Prop() tagCreationChars: string[] = [' '];
+
+ /**
+ * Emitted when the value is changed.
+ */
+ @Event() catChange!: EventEmitter;
+
+ /**
+ * Emitted when the input received focus.
+ */
+ @Event() catFocus!: EventEmitter;
+
+ /**
+ * Emitted when the input loses focus.
+ */
+ @Event() catBlur!: EventEmitter;
+
+ @Listen('keydown')
+ onKeyDown(event: KeyboardEvent): void {
+ 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 = '';
+ }
+ } else if (
+ ['Backspace'].includes(event.key) &&
+ this.input?.selectionStart === 0 &&
+ (this.value?.length ?? 0) > 0 &&
+ isInputFocused
+ ) {
+ this.value = this.value?.slice(0, -1) ?? [];
+ this.catChange.emit(this.value);
+ }
+ }
+
+ @Watch('errors')
+ onErrorsChanged(value?: boolean | string[] | ErrorMap) {
+ if (!coerceBoolean(this.errorUpdate)) {
+ this.errorMap = undefined;
+ } else {
+ this.errorMapSrc = Array.isArray(value)
+ ? (value as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
+ : value === true
+ ? {}
+ : value || undefined;
+ this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
+ }
+ }
+
+ componentWillRender(): void {
+ this.onErrorsChanged(this.errors);
+ this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+ this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+ }
+
+ render() {
+ return (
+
+
+ {this.hasHint && (
+ }
+ errorMap={this.errorMap}
+ />
+ )}
+
+ );
+ }
+
+ private onInput() {
+ const currentValue = [
+ ...new Set(this.input?.value?.split(this.createSplitRegex(this.tagCreationChars)) ?? [])
+ ].filter(value => !!value && !this.value?.includes(value));
+ if (currentValue.length > 1) {
+ this.value = [...(this.value ?? []), ...currentValue];
+ this.catChange.emit(this.value);
+ if (this.input) {
+ this.input.value = '';
+ }
+ }
+ }
+
+ private clear() {
+ this.value = [];
+ this.catChange.emit(this.value);
+ if (this.input) {
+ this.input.value = '';
+ }
+ }
+
+ private deselect(value: string) {
+ this.value = this.value?.filter(element => element !== value);
+ }
+
+ private showErrors() {
+ this.errorMap = this.errorMapSrc;
+ }
+
+ private errorUpdateTimeoutId?: number;
+ private showErrorsIfTimeout() {
+ const errorUpdate = coerceNumber(this.errorUpdate, null);
+ if (errorUpdate !== null) {
+ typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
+ this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);
+ return true;
+ }
+ return false;
+ }
+
+ private showErrorsIfNoFocus() {
+ const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
+ if (!hasFocus) {
+ this.showErrors();
+ }
+ }
+
+ private createSplitRegex(delimiters: string[]): RegExp {
+ // Escape special regex characters in the array
+ const escapedDelimiters = delimiters.map(delimiter => delimiter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+
+ // Add newline characters to the list of delimiters
+ escapedDelimiters.push('\\n', '\\r');
+
+ // Join the escaped delimiters to create a character class
+ const regexPattern = `[${escapedDelimiters.join('')}]`;
+
+ // Return a new RegExp object with the global flag for splitting
+ return new RegExp(regexPattern, 'g');
+ }
+}
diff --git a/core/src/components/cat-tag/readme.md b/core/src/components/cat-tag/readme.md
new file mode 100644
index 000000000..fb5c36caf
--- /dev/null
+++ b/core/src/components/cat-tag/readme.md
@@ -0,0 +1,65 @@
+# cat-tag
+
+
+
+
+
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------ |
+| `clearable` | `clearable` | Whether the input should show a clear button. | `boolean` | `false` |
+| `disabled` | `disabled` | Whether the select is disabled. | `boolean` | `false` |
+| `errorUpdate` | `error-update` | Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors on change with the given delay in milliseconds. | `boolean \| number` | `0` |
+| `errors` | `errors` | The validation errors for this input. Will render a hint under the input with the translated error message(s) `error.${key}`. If an object is passed, the keys will be used as error keys and the values translation parameters. If the value is `true`, the input will be marked as invalid without any hints under the input. | `boolean \| string[] \| undefined \| { [key: string]: any; }` | `undefined` |
+| `hint` | `hint` | Optional hint text(s) to be displayed with the select. | `string \| string[] \| undefined` | `undefined` |
+| `identifier` | `identifier` | A unique identifier for the input. | `string \| undefined` | `undefined` |
+| `label` | `label` | The label for the select. | `string` | `''` |
+| `labelHidden` | `label-hidden` | Visually hide the label, but still show it to assistive technologies like screen readers. | `boolean` | `false` |
+| `name` | `name` | The name of the form control. Submitted with the form as part of a name/value pair. | `string \| undefined` | `undefined` |
+| `nativeAttributes` | -- | Attributes that will be added to the native HTML input element. | `undefined \| { [key: string]: string; }` | `undefined` |
+| `placeholder` | `placeholder` | The placeholder text to display within the select. | `string \| undefined` | `undefined` |
+| `required` | `required` | A value is required or must be checked for the form to be submittable. | `boolean` | `false` |
+| `requiredMarker` | `required-marker` | Whether the label need a marker to shown if the select is required or optional. | `"none!" \| "none" \| "optional!" \| "optional" \| "required!" \| "required" \| undefined` | `'optional'` |
+| `tagCreationChars` | -- | List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`. Pasted values will also be split by those chars. Defaults to `[' ']`. | `string[]` | `[' ']` |
+| `value` | -- | The value of the control. | `string[] \| undefined` | `undefined` |
+
+
+## Events
+
+| Event | Description | Type |
+| ----------- | -------------------------------------- | ------------------------- |
+| `catBlur` | Emitted when the input loses focus. | `CustomEvent` |
+| `catChange` | Emitted when the value is changed. | `CustomEvent` |
+| `catFocus` | Emitted when the input received focus. | `CustomEvent` |
+
+
+## Shadow Parts
+
+| Part | Description |
+| --------- | ----------- |
+| `"input"` | |
+| `"label"` | |
+
+
+## Dependencies
+
+### Depends on
+
+- [cat-button](../cat-button)
+- [cat-icon](../cat-icon)
+
+### Graph
+```mermaid
+graph TD;
+ cat-tag --> cat-button
+ cat-tag --> cat-icon
+ cat-button --> cat-icon
+ cat-button --> cat-spinner
+ style cat-tag fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Made with love in Hamburg, Germany
diff --git a/core/src/index.html b/core/src/index.html
index be9d9f4b1..d03322354 100644
--- a/core/src/index.html
+++ b/core/src/index.html
@@ -251,6 +251,7 @@