feat(core): add new cat-date picker and cat-time picker (#486)

haiilo · Mar 21, 2024 · 5b97a7b · 5b97a7b
1 parent e6fad1a
commit 5b97a7b
Show file tree

Hide file tree

Showing 63 changed files with 2,701 additions and 380 deletions.
diff --git a/angular/projects/catalyst-demo/src/app/app.component.html b/angular/projects/catalyst-demo/src/app/app.component.html
@@ -3,6 +3,10 @@ <h2>Dialog</h2>
 <button (click)="openDialog()">Open</button>
 <h2>Form Components</h2>
 <form [formGroup]="form">
+  <h1>new datepicker & timepicker</h1>
+  <cat-date label="Date" formControlName="date2" clearable></cat-date>
+  <cat-time label="Time" formControlName="time" clearable></cat-time>
+  <pre>{{ form.getRawValue() | json }}</pre>
   <cat-input
     label="Input"
     formControlName="test"

diff --git a/angular/projects/catalyst-demo/src/app/app.component.ts b/angular/projects/catalyst-demo/src/app/app.component.ts
@@ -29,6 +29,8 @@ export class AppComponent implements OnInit {
     relatedInput: new FormControl(null, [this.equalTo('test')]),
     option: new FormControl(null, [Validators.required]),
     date: new FormControl(null, [Validators.required]),
+    date2: new FormControl(null, [Validators.required]),
+    time: new FormControl('20:20', [Validators.required]),
     datepickerDisabled: new FormControl(true)
   });
 

diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts
@@ -278,6 +278,95 @@ export declare interface CatCheckbox extends Components.CatCheckbox {
   catBlur: EventEmitter<CustomEvent<FocusEvent>>;
 }
 
+@ProxyCmp({
+  inputs: [
+    'autoComplete',
+    'clearable',
+    'disabled',
+    'errorUpdate',
+    'errors',
+    'hint',
+    'horizontal',
+    'icon',
+    'iconRight',
+    'identifier',
+    'label',
+    'labelHidden',
+    'max',
+    'min',
+    'name',
+    'nativeAttributes',
+    'placeholder',
+    'placement',
+    'readonly',
+    'required',
+    'requiredMarker',
+    'textPrefix',
+    'textSuffix',
+    'value'
+  ],
+  methods: ['select', 'doFocus', 'doBlur', 'clear']
+})
+@Component({
+  selector: 'cat-date',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [
+    'autoComplete',
+    'clearable',
+    'disabled',
+    'errorUpdate',
+    'errors',
+    'hint',
+    'horizontal',
+    'icon',
+    'iconRight',
+    'identifier',
+    'label',
+    'labelHidden',
+    'max',
+    'min',
+    'name',
+    'nativeAttributes',
+    'placeholder',
+    'placement',
+    'readonly',
+    'required',
+    'requiredMarker',
+    'textPrefix',
+    'textSuffix',
+    'value'
+  ]
+})
+export class CatDate {
+  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 CatDate extends Components.CatDate {
+  /**
+   * 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: [
     'attachToElement',
@@ -406,15 +495,15 @@ export declare interface CatDatepickerInline extends Components.CatDatepickerInl
 }
 
 @ProxyCmp({
-  inputs: ['noAutoClose', 'overflow', 'placement'],
-  methods: ['close']
+  inputs: ['noAutoClose', 'noKeybindings', 'overflow', 'placement'],
+  methods: ['toggle', 'open', 'close']
 })
 @Component({
   selector: 'cat-dropdown',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['noAutoClose', 'overflow', 'placement']
+  inputs: ['noAutoClose', 'noKeybindings', 'overflow', 'placement']
 })
 export class CatDropdown {
   protected el: HTMLElement;
@@ -519,7 +608,7 @@ export declare interface CatIcon extends Components.CatIcon {}
     'type',
     'value'
   ],
-  methods: ['doFocus', 'doBlur', 'clear']
+  methods: ['doFocus', 'doBlur', 'clear', 'mask']
 })
 @Component({
   selector: 'cat-input',
@@ -1075,6 +1164,97 @@ export declare interface CatTextarea extends Components.CatTextarea {
   catBlur: EventEmitter<CustomEvent<FocusEvent>>;
 }
 
+@ProxyCmp({
+  inputs: [
+    'autoComplete',
+    'clearable',
+    'disabled',
+    'errorUpdate',
+    'errors',
+    'hint',
+    'horizontal',
+    'icon',
+    'iconRight',
+    'identifier',
+    'label',
+    'labelHidden',
+    'max',
+    'min',
+    'name',
+    'nativeAttributes',
+    'placeholder',
+    'placement',
+    'readonly',
+    'required',
+    'requiredMarker',
+    'step',
+    'textPrefix',
+    'textSuffix',
+    'value'
+  ],
+  methods: ['select', 'doFocus', 'doBlur', 'clear']
+})
+@Component({
+  selector: 'cat-time',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [
+    'autoComplete',
+    'clearable',
+    'disabled',
+    'errorUpdate',
+    'errors',
+    'hint',
+    'horizontal',
+    'icon',
+    'iconRight',
+    'identifier',
+    'label',
+    'labelHidden',
+    'max',
+    'min',
+    'name',
+    'nativeAttributes',
+    'placeholder',
+    'placement',
+    'readonly',
+    'required',
+    'requiredMarker',
+    'step',
+    'textPrefix',
+    'textSuffix',
+    'value'
+  ]
+})
+export class CatTime {
+  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 CatTime extends Components.CatTime {
+  /**
+   * 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: [
     'checked',

diff --git a/angular/projects/catalyst/src/lib/directives/text-value-accessor.ts b/angular/projects/catalyst/src/lib/directives/text-value-accessor.ts
@@ -5,7 +5,7 @@ import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
-  selector: 'cat-input, cat-textarea, cat-datepicker, cat-datepicker-inline',
+  selector: 'cat-input, cat-textarea, cat-datepicker, cat-datepicker-inline, cat-date, cat-time',
   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',
+  selector: 'cat-input, cat-textarea, cat-datepicker, cat-select, cat-date, cat-time',
   host: {
     '(catBlur)': 'updateErrors()'
   }

diff --git a/core/package.json b/core/package.json
@@ -30,7 +30,7 @@
     "postbuild": "node replace",
     "postbuild:ci": "node replace",
     "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
+    "test": "stencil test --spec --e2e --runInBand",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "prettier": "prettier --write .",
@@ -48,8 +48,10 @@
     "@floating-ui/dom": "1.6.3",
     "@haiilo/catalyst-tokens": "workspace:*",
     "@stencil/core": "4.12.6",
+    "@types/cleave.js": "^1.4.12",
     "autosize": "6.0.1",
     "autosize-input": "1.0.2",
+    "cleave.js": "^1.6.0",
     "flatpickr": "4.6.13",
     "focus-trap": "7.5.4",
     "loglevel": "1.9.1",
@@ -59,7 +61,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.3",
-    "@haiilo/catalyst-icons": "^2.1.0",
+    "@haiilo/catalyst-icons": "^2.2.5",
     "@stencil/angular-output-target": "^0.8.4",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.10",