feat(core): enable tag inputs without dropdowns (#586)

* feat(core): enable tag inputs without dropdowns * feat(core): enable tag inputs without dropdowns * feat(core): add cat-tag component for tag inputs without search * Revert "feat(core): enable tag inputs without dropdowns" This reverts commit c737b0f. * Revert "feat(core): enable tag inputs without dropdowns" This reverts commit 440fa09 * fix(core): fix pipeline * fix(core): review improvements * fix(core): review improvements --------- Co-authored-by: Tim Sielemann <[email protected]>
haiilo · Oct 18, 2024 · e3b76e3 · e3b76e3
1 parent 74e2c76
commit e3b76e3
Show file tree

Hide file tree

Showing 19 changed files with 838 additions and 43 deletions.
diff --git a/angular/projects/catalyst-demo/src/app/app.component.html b/angular/projects/catalyst-demo/src/app/app.component.html
@@ -116,4 +116,15 @@ <h1>new datetime picker</h1>
   <cat-checkbox label="Label 1" [required]="true" requiredMarker="required"> </cat-checkbox>
   <cat-checkbox label="Label 2" requiredMarker="optional"> </cat-checkbox>
   <cat-scrollable>abxcasds</cat-scrollable>
+
+  <cat-tag hint="this is a hint"><div slot="label">TEST SLOTTED LABEL</div></cat-tag>
+  <cat-tag label="This is my tag select with values" [value]="['1', '2', '3']" (catChange)="logChanges($event)">
+  </cat-tag>
+  <cat-tag
+    label="Tag select with form control"
+    [formControl]="tagFormControl"
+    [tagCreationChars]="[' ', ',']"
+    [clearable]="true"
+  >
+  </cat-tag>
 </form>
diff --git 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<string[]>(['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
@@ -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
@@ -1160,6 +1160,76 @@ export declare interface CatTabs extends Components.CatTabs {
   catChange: EventEmitter<CustomEvent<{ id: string; index: number }>>;
 }
 
+@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: '<ng-content></ng-content>',
+  // 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<CustomEvent<string[]>>;
+  /**
+   * Emitted when the input received focus.
+   */
+  catFocus: EventEmitter<CustomEvent<FocusEvent>>;
+  /**
+   * Emitted when the input loses focus.
+   */
+  catBlur: EventEmitter<CustomEvent<FocusEvent>>;
+}
+
 @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
@@ -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
@@ -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
@@ -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<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatTabsElement;
 }
+export interface CatTagCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCatTagElement;
+}
 export interface CatTextareaCustomEvent<T> extends CustomEvent<T> {
     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<K extends keyof HTMLCatTagElementEventMap>(type: K, listener: (this: HTMLCatTagElement, ev: CatTagCustomEvent<HTMLCatTagElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCatTagElementEventMap>(type: K, listener: (this: HTMLCatTagElement, ev: CatTagCustomEvent<HTMLCatTagElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(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<FocusEvent>) => void;
+        /**
+          * Emitted when the value is changed.
+         */
+        "onCatChange"?: (event: CatTagCustomEvent<string[]>) => void;
+        /**
+          * Emitted when the input received focus.
+         */
+        "onCatFocus"?: (event: CatTagCustomEvent<FocusEvent>) => 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<HTMLCatTabsElement>;
+            "cat-tag": LocalJSX.CatTag & JSXBase.HTMLAttributes<HTMLCatTagElement>;
             /**
              * 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
@@ -107,6 +107,7 @@ Type: `Promise<void>`
  - [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
@@ -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
@@ -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('<cat-tag label="Label"></cat-tag>');
+
+    const element = await page.find('cat-tag');
+    expect(element).toHaveClass('hydrated');
+  });
+});