diff --git a/angular/projects/catalyst-demo/src/app/app.component.html b/angular/projects/catalyst-demo/src/app/app.component.html index 686c85c5..1f095cd5 100644 --- a/angular/projects/catalyst-demo/src/app/app.component.html +++ b/angular/projects/catalyst-demo/src/app/app.component.html @@ -3,6 +3,10 @@

Dialog

Form Components

+

new datepicker & timepicker

+ + + 
{{ form.getRawValue() | json }}
>; } +@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: '', + // 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>; + /** + * Emitted when the input received focus. + */ + catFocus: EventEmitter>; + /** + * Emitted when the input loses focus. + */ + catBlur: EventEmitter>; +} + @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: '', // 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>; } +@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: '', + // 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>; + /** + * Emitted when the input received focus. + */ + catFocus: EventEmitter>; + /** + * Emitted when the input loses focus. + */ + catBlur: EventEmitter>; +} + @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 index 0643f783..0085f46a 100644 --- 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 index 537e8214..60a44f10 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', + 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 index e8683990..45478a76 100644 --- 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", diff --git a/core/src/components.d.ts b/core/src/components.d.ts index e2a4bb73..f261718d 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -6,19 +6,21 @@ */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { Breakpoint } from "./utils/breakpoints"; +import { ErrorMap } from "./components/cat-form-hint/cat-form-hint"; +import { Placement } from "@floating-ui/dom"; import { CatDatepickerMode } from "./components/cat-datepicker/cat-datepicker.mode"; import { BaseOptions } from "flatpickr/dist/types/options"; -import { Placement } from "@floating-ui/dom"; -import { ErrorMap } from "./components/cat-form-hint/cat-form-hint"; import { InputType } from "./components/cat-input/input-type"; +import { CleaveOptions } from "cleave.js/options"; import { CatSelectConnector, CatSelectMultipleTaggingValue, CatSelectTaggingValue, Item } from "./components/cat-select/cat-select"; import { Observable } from "rxjs"; export { Breakpoint } from "./utils/breakpoints"; +export { ErrorMap } from "./components/cat-form-hint/cat-form-hint"; +export { Placement } from "@floating-ui/dom"; export { CatDatepickerMode } from "./components/cat-datepicker/cat-datepicker.mode"; export { BaseOptions } from "flatpickr/dist/types/options"; -export { Placement } from "@floating-ui/dom"; -export { ErrorMap } from "./components/cat-form-hint/cat-form-hint"; export { InputType } from "./components/cat-input/input-type"; +export { CleaveOptions } from "cleave.js/options"; export { CatSelectConnector, CatSelectMultipleTaggingValue, CatSelectTaggingValue, Item } from "./components/cat-select/cat-select"; export { Observable } from "rxjs"; export namespace Components { @@ -297,6 +299,122 @@ export namespace Components { */ "value"?: any; } + interface CatDate { + /** + * Hint for form autofill feature. + */ + "autoComplete"?: string; + /** + * Clear the input. + */ + "clear": () => Promise; + /** + * Whether the input should show a clear button. + */ + "clearable": boolean; + /** + * Whether the input is disabled. + */ + "disabled": boolean; + /** + * Programmatically remove focus from the input. Use this method instead of `input.blur()`. + */ + "doBlur": () => Promise; + /** + * Programmatically move focus to the input. Use this method instead of `input.focus()`. + * @param options An optional object providing options to control aspects of the focusing process. + */ + "doFocus": (options?: FocusOptions) => Promise; + /** + * 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 input. + */ + "hint"?: string | string[]; + /** + * Whether the label is on top or left. + */ + "horizontal": boolean; + /** + * The name of an icon to be displayed in the input. + */ + "icon"?: string; + /** + * Display the icon on the right. + */ + "iconRight": boolean; + /** + * A unique identifier for the input. + */ + "identifier"?: string; + /** + * The label for the input. + */ + "label": string; + /** + * Visually hide the label, but still show it to assistive technologies like screen readers. + */ + "labelHidden": boolean; + /** + * A maximum value for the date, given in local ISO 8601 date format YYYY-MM-DD. + */ + "max"?: string; + /** + * A minimum value for the date, given in local ISO 8601 date format YYYY-MM-DD. + */ + "min"?: string; + /** + * 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 input. + */ + "placeholder"?: string; + /** + * The placement of the dropdown. + */ + "placement": Placement; + /** + * The value is not editable. + */ + "readonly": boolean; + /** + * A value is required or must be check for the form to be submittable. + */ + "required": boolean; + /** + * Whether the label need a marker to shown if the input is required or optional. + */ + "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'; + /** + * Select a date in the picker. + * @param date The date to select. + */ + "select": (date: Date) => Promise; + /** + * A textual prefix to be displayed in the input. + */ + "textPrefix"?: string; + /** + * A textual suffix to be displayed in the input. + */ + "textSuffix"?: string; + /** + * The value of the control, given in local ISO 8601 date format YYYY-MM-DD. + */ + "value"?: string; + } interface CatDatepicker { /** * Instead of body, appends the calendar to the cat-datepicker element instead @@ -464,6 +582,14 @@ export namespace Components { * Do not close the dropdown on outside clicks. */ "noAutoClose": boolean; + /** + * Do not navigate focus inside the dropdown via vertical arrow keys. + */ + "noKeybindings": boolean; + /** + * Opens the dropdown. + */ + "open": () => Promise; /** * Allow overflow when dropdown is open. */ @@ -472,6 +598,10 @@ export namespace Components { * The placement of the dropdown. */ "placement": Placement; + /** + * Toggles the dropdown. + */ + "toggle": () => Promise; } interface CatFormGroup { /** @@ -577,7 +707,12 @@ export namespace Components { */ "labelHidden": boolean; /** - * A maximum value for date, time and numeric values. + * Adds a Cleave.js mask to the input. + * @param options The Cleave.js options. + */ + "mask": (options: CleaveOptions) => Promise; + /** + * A maximum value for numeric values. */ "max"?: number | string; /** @@ -585,7 +720,7 @@ export namespace Components { */ "maxLength"?: number; /** - * A minimum value for date, time and numeric values. + * A minimum value for numeric values. */ "min"?: number | string; /** @@ -1109,6 +1244,126 @@ export namespace Components { */ "value"?: string; } + interface CatTime { + /** + * Hint for form autofill feature. + */ + "autoComplete"?: string; + /** + * Clear the input. + */ + "clear": () => Promise; + /** + * Whether the input should show a clear button. + */ + "clearable": boolean; + /** + * Whether the input is disabled. + */ + "disabled": boolean; + /** + * Programmatically remove focus from the input. Use this method instead of `input.blur()`. + */ + "doBlur": () => Promise; + /** + * Programmatically move focus to the input. Use this method instead of `input.focus()`. + * @param options An optional object providing options to control aspects of the focusing process. + */ + "doFocus": (options?: FocusOptions) => Promise; + /** + * 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 input. + */ + "hint"?: string | string[]; + /** + * Whether the label is on top or left. + */ + "horizontal": boolean; + /** + * The name of an icon to be displayed in the input. + */ + "icon"?: string; + /** + * Display the icon on the right. + */ + "iconRight": boolean; + /** + * A unique identifier for the input. + */ + "identifier"?: string; + /** + * The label for the input. + */ + "label": string; + /** + * Visually hide the label, but still show it to assistive technologies like screen readers. + */ + "labelHidden": boolean; + /** + * A maximum time value given in HH:mm format. + */ + "max"?: string; + /** + * A minimum value given in HH:mm format. + */ + "min"?: string; + /** + * 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 input. + */ + "placeholder"?: string; + /** + * The placement of the dropdown. + */ + "placement": Placement; + /** + * The value is not editable. + */ + "readonly": boolean; + /** + * A value is required or must be check for the form to be submittable. + */ + "required": boolean; + /** + * Whether the label need a marker to shown if the input is required or optional. + */ + "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'; + /** + * Select a time in the picker. + * @param date The time to select. + */ + "select": (date: Date | null) => Promise; + /** + * The step size for times in minutes. + */ + "step": number; + /** + * A textual prefix to be displayed in the input. + */ + "textPrefix"?: string; + /** + * A textual suffix to be displayed in the input. + */ + "textSuffix"?: string; + /** + * The value of the control given in HH:mm format + */ + "value"?: string; + } /** * Toggles are graphical interface switches that give user control over a * feature or option that can be turned on or off. @@ -1219,6 +1474,10 @@ export interface CatCheckboxCustomEvent extends CustomEvent { detail: T; target: HTMLCatCheckboxElement; } +export interface CatDateCustomEvent extends CustomEvent { + detail: T; + target: HTMLCatDateElement; +} export interface CatDatepickerCustomEvent extends CustomEvent { detail: T; target: HTMLCatDatepickerElement; @@ -1267,6 +1526,10 @@ export interface CatTextareaCustomEvent extends CustomEvent { detail: T; target: HTMLCatTextareaElement; } +export interface CatTimeCustomEvent extends CustomEvent { + detail: T; + target: HTMLCatTimeElement; +} export interface CatToggleCustomEvent extends CustomEvent { detail: T; target: HTMLCatToggleElement; @@ -1367,6 +1630,25 @@ declare global { prototype: HTMLCatCheckboxElement; new (): HTMLCatCheckboxElement; }; + interface HTMLCatDateElementEventMap { + "catChange": string; + "catFocus": FocusEvent; + "catBlur": FocusEvent; + } + interface HTMLCatDateElement extends Components.CatDate, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCatDateElement, ev: CatDateCustomEvent) => 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: HTMLCatDateElement, ev: CatDateCustomEvent) => 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 HTMLCatDateElement: { + prototype: HTMLCatDateElement; + new (): HTMLCatDateElement; + }; interface HTMLCatDatepickerElementEventMap { "catChange": string; "catFocus": FocusEvent; @@ -1667,6 +1949,25 @@ declare global { prototype: HTMLCatTextareaElement; new (): HTMLCatTextareaElement; }; + interface HTMLCatTimeElementEventMap { + "catChange": string; + "catFocus": FocusEvent; + "catBlur": FocusEvent; + } + interface HTMLCatTimeElement extends Components.CatTime, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCatTimeElement, ev: CatTimeCustomEvent) => 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: HTMLCatTimeElement, ev: CatTimeCustomEvent) => 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 HTMLCatTimeElement: { + prototype: HTMLCatTimeElement; + new (): HTMLCatTimeElement; + }; interface HTMLCatToggleElementEventMap { "catChange": any; "catFocus": FocusEvent; @@ -1704,6 +2005,7 @@ declare global { "cat-button-group": HTMLCatButtonGroupElement; "cat-card": HTMLCatCardElement; "cat-checkbox": HTMLCatCheckboxElement; + "cat-date": HTMLCatDateElement; "cat-datepicker": HTMLCatDatepickerElement; "cat-datepicker-inline": HTMLCatDatepickerInlineElement; "cat-dropdown": HTMLCatDropdownElement; @@ -1721,6 +2023,7 @@ declare global { "cat-tab": HTMLCatTabElement; "cat-tabs": HTMLCatTabsElement; "cat-textarea": HTMLCatTextareaElement; + "cat-time": HTMLCatTimeElement; "cat-toggle": HTMLCatToggleElement; "cat-tooltip": HTMLCatTooltipElement; } @@ -2003,6 +2306,116 @@ declare namespace LocalJSX { */ "value"?: any; } + interface CatDate { + /** + * Hint for form autofill feature. + */ + "autoComplete"?: string; + /** + * Whether the input should show a clear button. + */ + "clearable"?: boolean; + /** + * Whether the input 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 input. + */ + "hint"?: string | string[]; + /** + * Whether the label is on top or left. + */ + "horizontal"?: boolean; + /** + * The name of an icon to be displayed in the input. + */ + "icon"?: string; + /** + * Display the icon on the right. + */ + "iconRight"?: boolean; + /** + * A unique identifier for the input. + */ + "identifier"?: string; + /** + * The label for the input. + */ + "label"?: string; + /** + * Visually hide the label, but still show it to assistive technologies like screen readers. + */ + "labelHidden"?: boolean; + /** + * A maximum value for the date, given in local ISO 8601 date format YYYY-MM-DD. + */ + "max"?: string; + /** + * A minimum value for the date, given in local ISO 8601 date format YYYY-MM-DD. + */ + "min"?: string; + /** + * 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: CatDateCustomEvent) => void; + /** + * Emitted when the value is changed. + */ + "onCatChange"?: (event: CatDateCustomEvent) => void; + /** + * Emitted when the input received focus. + */ + "onCatFocus"?: (event: CatDateCustomEvent) => void; + /** + * The placeholder text to display within the input. + */ + "placeholder"?: string; + /** + * The placement of the dropdown. + */ + "placement"?: Placement; + /** + * The value is not editable. + */ + "readonly"?: boolean; + /** + * A value is required or must be check for the form to be submittable. + */ + "required"?: boolean; + /** + * Whether the label need a marker to shown if the input is required or optional. + */ + "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'; + /** + * A textual prefix to be displayed in the input. + */ + "textPrefix"?: string; + /** + * A textual suffix to be displayed in the input. + */ + "textSuffix"?: string; + /** + * The value of the control, given in local ISO 8601 date format YYYY-MM-DD. + */ + "value"?: string; + } interface CatDatepicker { /** * Instead of body, appends the calendar to the cat-datepicker element instead @@ -2173,6 +2586,10 @@ declare namespace LocalJSX { * Do not close the dropdown on outside clicks. */ "noAutoClose"?: boolean; + /** + * Do not navigate focus inside the dropdown via vertical arrow keys. + */ + "noKeybindings"?: boolean; /** * Emitted when the dropdown is closed. */ @@ -2281,7 +2698,7 @@ declare namespace LocalJSX { */ "labelHidden"?: boolean; /** - * A maximum value for date, time and numeric values. + * A maximum value for numeric values. */ "max"?: number | string; /** @@ -2289,7 +2706,7 @@ declare namespace LocalJSX { */ "maxLength"?: number; /** - * A minimum value for date, time and numeric values. + * A minimum value for numeric values. */ "min"?: number | string; /** @@ -2855,6 +3272,120 @@ declare namespace LocalJSX { */ "value"?: string; } + interface CatTime { + /** + * Hint for form autofill feature. + */ + "autoComplete"?: string; + /** + * Whether the input should show a clear button. + */ + "clearable"?: boolean; + /** + * Whether the input 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 input. + */ + "hint"?: string | string[]; + /** + * Whether the label is on top or left. + */ + "horizontal"?: boolean; + /** + * The name of an icon to be displayed in the input. + */ + "icon"?: string; + /** + * Display the icon on the right. + */ + "iconRight"?: boolean; + /** + * A unique identifier for the input. + */ + "identifier"?: string; + /** + * The label for the input. + */ + "label"?: string; + /** + * Visually hide the label, but still show it to assistive technologies like screen readers. + */ + "labelHidden"?: boolean; + /** + * A maximum time value given in HH:mm format. + */ + "max"?: string; + /** + * A minimum value given in HH:mm format. + */ + "min"?: string; + /** + * 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: CatTimeCustomEvent) => void; + /** + * Emitted when the value is changed. + */ + "onCatChange"?: (event: CatTimeCustomEvent) => void; + /** + * Emitted when the input received focus. + */ + "onCatFocus"?: (event: CatTimeCustomEvent) => void; + /** + * The placeholder text to display within the input. + */ + "placeholder"?: string; + /** + * The placement of the dropdown. + */ + "placement"?: Placement; + /** + * The value is not editable. + */ + "readonly"?: boolean; + /** + * A value is required or must be check for the form to be submittable. + */ + "required"?: boolean; + /** + * Whether the label need a marker to shown if the input is required or optional. + */ + "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!'; + /** + * The step size for times in minutes. + */ + "step"?: number; + /** + * A textual prefix to be displayed in the input. + */ + "textPrefix"?: string; + /** + * A textual suffix to be displayed in the input. + */ + "textSuffix"?: string; + /** + * The value of the control given in HH:mm format + */ + "value"?: string; + } /** * Toggles are graphical interface switches that give user control over a * feature or option that can be turned on or off. @@ -2967,6 +3498,7 @@ declare namespace LocalJSX { "cat-button-group": CatButtonGroup; "cat-card": CatCard; "cat-checkbox": CatCheckbox; + "cat-date": CatDate; "cat-datepicker": CatDatepicker; "cat-datepicker-inline": CatDatepickerInline; "cat-dropdown": CatDropdown; @@ -2984,6 +3516,7 @@ declare namespace LocalJSX { "cat-tab": CatTab; "cat-tabs": CatTabs; "cat-textarea": CatTextarea; + "cat-time": CatTime; "cat-toggle": CatToggle; "cat-tooltip": CatTooltip; } @@ -3026,6 +3559,7 @@ declare module "@stencil/core" { * number of options. */ "cat-checkbox": LocalJSX.CatCheckbox & JSXBase.HTMLAttributes; + "cat-date": LocalJSX.CatDate & JSXBase.HTMLAttributes; "cat-datepicker": LocalJSX.CatDatepicker & JSXBase.HTMLAttributes; "cat-datepicker-inline": LocalJSX.CatDatepickerInline & JSXBase.HTMLAttributes; "cat-dropdown": LocalJSX.CatDropdown & JSXBase.HTMLAttributes; @@ -3092,6 +3626,7 @@ declare module "@stencil/core" { * input component. */ "cat-textarea": LocalJSX.CatTextarea & JSXBase.HTMLAttributes; + "cat-time": LocalJSX.CatTime & JSXBase.HTMLAttributes; /** * Toggles are graphical interface switches that give user control over a * feature or option that can be turned on or off. diff --git a/core/src/components/cat-alert/cat-alert.spec.tsx b/core/src/components/cat-alert/cat-alert.spec.tsx index 0035a7be..8f3c72fe 100644 --- a/core/src/components/cat-alert/cat-alert.spec.tsx +++ b/core/src/components/cat-alert/cat-alert.spec.tsx @@ -7,15 +7,8 @@ describe('cat-alert', () => { components: [CatAlert], html: `` }); - expect(page.root).toEqualHtml(` - - - -
- -
- - + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-avatar/cat-avatar.spec.tsx b/core/src/components/cat-avatar/cat-avatar.spec.tsx index 954008e8..be17a700 100644 --- a/core/src/components/cat-avatar/cat-avatar.spec.tsx +++ b/core/src/components/cat-avatar/cat-avatar.spec.tsx @@ -5,14 +5,10 @@ describe('cat-avatar', () => { it('renders', async () => { const page = await newSpecPage({ components: [CatAvatar], - html: `` + html: `` }); - expect(page.root).toEqualHtml(` - - - MA - - + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-badge/cat-badge.spec.tsx b/core/src/components/cat-badge/cat-badge.spec.tsx index 4024c478..a38b983d 100644 --- a/core/src/components/cat-badge/cat-badge.spec.tsx +++ b/core/src/components/cat-badge/cat-badge.spec.tsx @@ -7,12 +7,8 @@ describe('cat-badge', () => { components: [CatBadge], html: `` }); - expect(page.root).toEqualHtml(` - - - - - + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-button-group/cat-button-group.spec.tsx b/core/src/components/cat-button-group/cat-button-group.spec.tsx index e6877d5e..0d3cd800 100644 --- a/core/src/components/cat-button-group/cat-button-group.spec.tsx +++ b/core/src/components/cat-button-group/cat-button-group.spec.tsx @@ -7,12 +7,8 @@ describe('cat-button-group', () => { components: [CatButtonGroup], html: `` }); - expect(page.root).toEqualHtml(` - - - - - + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-button/cat-button.scss b/core/src/components/cat-button/cat-button.scss index efcd4461..05ca3ce2 100644 --- a/core/src/components/cat-button/cat-button.scss +++ b/core/src/components/cat-button/cat-button.scss @@ -364,3 +364,39 @@ $button-sizes: ( } } } + +// ----- datepicker + +:host(.cat-time-format) { + .cat-button { + border-radius: 0; + + &:focus { + z-index: 1; + } + } +} + +:host(.cat-time-toggle), +:host(.cat-picker-toggle) { + .cat-button { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + &:focus { + z-index: 1; + } + } +} + +:host(.cat-picker-item) { + .cat-button { + padding-left: 0; + padding-right: 0; + + &:focus { + z-index: 1; + } + } +} diff --git a/core/src/components/cat-button/cat-button.spec.tsx b/core/src/components/cat-button/cat-button.spec.tsx index a0c7a054..2d91cfd2 100644 --- a/core/src/components/cat-button/cat-button.spec.tsx +++ b/core/src/components/cat-button/cat-button.spec.tsx @@ -7,7 +7,7 @@ describe('cat-button', () => { components: [CatButton], html: `` }); - expect(page.root?.shadowRoot).toEqualHtml(` + expect(page.root?.shadowRoot).toEqualLightHtml(` - + `); }); }); diff --git a/core/src/components/cat-dropdown/cat-dropdown.tsx b/core/src/components/cat-dropdown/cat-dropdown.tsx index ca37ea3a..58e551ad 100644 --- a/core/src/components/cat-dropdown/cat-dropdown.tsx +++ b/core/src/components/cat-dropdown/cat-dropdown.tsx @@ -32,6 +32,11 @@ export class CatDropdown { */ @Prop() noAutoClose = false; + /** + * Do not navigate focus inside the dropdown via vertical arrow keys. + */ + @Prop() noKeybindings = false; + /** * Allow overflow when dropdown is open. */ @@ -75,6 +80,7 @@ export class CatDropdown { /** * Toggles the dropdown. */ + @Method() async toggle(): Promise { this.isOpen ? this.close() : this.open(); } @@ -82,6 +88,7 @@ export class CatDropdown { /** * Opens the dropdown. */ + @Method() async open(): Promise { if (this.isOpen === null || this.isOpen) { return; // busy or open @@ -137,6 +144,9 @@ export class CatDropdown { } componentDidLoad(): void { + if (this.noKeybindings) { + return; + } this.keyListener = event => { if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) { const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true }); diff --git a/core/src/components/cat-dropdown/readme.md b/core/src/components/cat-dropdown/readme.md index 54f9f1ef..fa1c56da 100644 --- a/core/src/components/cat-dropdown/readme.md +++ b/core/src/components/cat-dropdown/readme.md @@ -7,11 +7,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -| `noAutoClose` | `no-auto-close` | Do not close the dropdown on outside clicks. | `boolean` | `false` | -| `overflow` | `overflow` | Allow overflow when dropdown is open. | `boolean` | `false` | -| `placement` | `placement` | The placement of the dropdown. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom-start'` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | +| `noAutoClose` | `no-auto-close` | Do not close the dropdown on outside clicks. | `boolean` | `false` | +| `noKeybindings` | `no-keybindings` | Do not navigate focus inside the dropdown via vertical arrow keys. | `boolean` | `false` | +| `overflow` | `overflow` | Allow overflow when dropdown is open. | `boolean` | `false` | +| `placement` | `placement` | The placement of the dropdown. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom-start'` | ## Events @@ -34,17 +35,41 @@ Type: `Promise` +### `open() => Promise` + +Opens the dropdown. + +#### Returns + +Type: `Promise` + + + +### `toggle() => Promise` + +Toggles the dropdown. + +#### Returns + +Type: `Promise` + + + ## Dependencies ### Used by + - [cat-date](../cat-date) - [cat-select-demo](../cat-select-demo) + - [cat-time](../cat-time) ### Graph ```mermaid graph TD; + cat-date --> cat-dropdown cat-select-demo --> cat-dropdown + cat-time --> cat-dropdown style cat-dropdown fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/core/src/components/cat-form-group/cat-form-group.spec.tsx b/core/src/components/cat-form-group/cat-form-group.spec.tsx index b8987d18..952da9de 100644 --- a/core/src/components/cat-form-group/cat-form-group.spec.tsx +++ b/core/src/components/cat-form-group/cat-form-group.spec.tsx @@ -7,12 +7,8 @@ describe('cat-form-group', () => { components: [CatFormGroup], html: `` }); - expect(page.root).toEqualHtml(` - - - - - + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-form-hint/cat-form-hint.spec.tsx b/core/src/components/cat-form-hint/cat-form-hint.spec.tsx index ab81536a..cf634944 100644 --- a/core/src/components/cat-form-hint/cat-form-hint.spec.tsx +++ b/core/src/components/cat-form-hint/cat-form-hint.spec.tsx @@ -8,7 +8,7 @@ describe('CatFormHint', () => { components: [], template: () => }); - expect(page.root).toEqualHtml(` + expect(page.root).toEqualLightHtml(`
`); }); diff --git a/core/src/components/cat-icon/cat-icon-registry.ts b/core/src/components/cat-icon/cat-icon-registry.ts index 11d12107..c3993d2a 100644 --- a/core/src/components/cat-icon/cat-icon-registry.ts +++ b/core/src/components/cat-icon/cat-icon-registry.ts @@ -1,18 +1,24 @@ -import cross16 from '@haiilo/catalyst-icons/tmp/assets/16-cross.svg'; -import alertCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/alert-circle-outlined.svg'; -import checkCircleFilled from '@haiilo/catalyst-icons/tmp/assets/check-circle-filled.svg'; -import chevronDownOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-down-outlined.svg'; -import chevronLeftOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-left-outlined.svg'; -import chevronRightOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-right-outlined.svg'; -import clockFilled from '@haiilo/catalyst-icons/tmp/assets/clock-filled.svg'; -import crossCircleFilled from '@haiilo/catalyst-icons/tmp/assets/cross-circle-filled.svg'; -import crossCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-circle-outlined.svg'; -import crossOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-outlined.svg'; -import dangerFilled from '@haiilo/catalyst-icons/tmp/assets/danger-filled.svg'; -import eyeClosedOutlined from '@haiilo/catalyst-icons/tmp/assets/eye-closed-outlined.svg'; -import eyeOpenOutlined from '@haiilo/catalyst-icons/tmp/assets/eye-open-outlined.svg'; -import infoCircleFilled from '@haiilo/catalyst-icons/tmp/assets/info-circle-filled.svg'; -import starCircleFilled from '@haiilo/catalyst-icons/tmp/assets/star-circle-filled.svg'; +import chevronDoubleLeft16 from '@haiilo/catalyst-icons/src/16-chevron-double-left.svg'; +import chevronDoubleRight16 from '@haiilo/catalyst-icons/src/16-chevron-double-right.svg'; +import chevronLeft16 from '@haiilo/catalyst-icons/src/16-chevron-left.svg'; +import chevronRight16 from '@haiilo/catalyst-icons/src/16-chevron-right.svg'; +import cross16 from '@haiilo/catalyst-icons/src/16-cross.svg'; +import alertCircleOutlined from '@haiilo/catalyst-icons/src/alert-circle-outlined.svg'; +import calendarOutlined from '@haiilo/catalyst-icons/src/calendar-outlined.svg'; +import checkCircleFilled from '@haiilo/catalyst-icons/src/check-circle-filled.svg'; +import chevronDownOutlined from '@haiilo/catalyst-icons/src/chevron-down-outlined.svg'; +import chevronLeftOutlined from '@haiilo/catalyst-icons/src/chevron-left-outlined.svg'; +import chevronRightOutlined from '@haiilo/catalyst-icons/src/chevron-right-outlined.svg'; +import clockFilled from '@haiilo/catalyst-icons/src/clock-filled.svg'; +import clockOutlined from '@haiilo/catalyst-icons/src/clock-outlined.svg'; +import crossCircleFilled from '@haiilo/catalyst-icons/src/cross-circle-filled.svg'; +import crossCircleOutlined from '@haiilo/catalyst-icons/src/cross-circle-outlined.svg'; +import crossOutlined from '@haiilo/catalyst-icons/src/cross-outlined.svg'; +import dangerFilled from '@haiilo/catalyst-icons/src/danger-filled.svg'; +import eyeClosedOutlined from '@haiilo/catalyst-icons/src/eye-closed-outlined.svg'; +import eyeOpenOutlined from '@haiilo/catalyst-icons/src/eye-open-outlined.svg'; +import infoCircleFilled from '@haiilo/catalyst-icons/src/info-circle-filled.svg'; +import starCircleFilled from '@haiilo/catalyst-icons/src/star-circle-filled.svg'; import log from 'loglevel'; export class CatIconRegistry { @@ -33,6 +39,12 @@ export class CatIconRegistry { 'alert-success': checkCircleFilled, 'alert-warning': dangerFilled, 'alert-danger': crossCircleFilled, + 'datepicker-month-prev': chevronLeft16, + 'datepicker-month-next': chevronRight16, + 'datepicker-year-prev': chevronDoubleLeft16, + 'datepicker-year-next': chevronDoubleRight16, + 'datepicker-calendar': calendarOutlined, + 'timepicker-clock': clockOutlined, 'dialog-close': crossOutlined, 'input-close': crossCircleOutlined, 'input-error': alertCircleOutlined, diff --git a/core/src/components/cat-icon/cat-icon.spec.tsx b/core/src/components/cat-icon/cat-icon.spec.tsx index 11bb4134..f2d50801 100644 --- a/core/src/components/cat-icon/cat-icon.spec.tsx +++ b/core/src/components/cat-icon/cat-icon.spec.tsx @@ -8,7 +8,7 @@ describe('cat-icon', () => { components: [CatIcon], html: `` }); - expect(page.root?.shadowRoot).toEqualHtml(` + expect(page.root?.shadowRoot).toEqualLightHtml(` `); }); diff --git a/core/src/components/cat-input/cat-input.scss b/core/src/components/cat-input/cat-input.scss index 4b491fa2..8012c9bf 100644 --- a/core/src/components/cat-input/cat-input.scss +++ b/core/src/components/cat-input/cat-input.scss @@ -27,6 +27,7 @@ } .input-wrapper { + flex: 1 1 auto; display: flex; align-items: stretch; gap: 0.75rem; @@ -101,6 +102,10 @@ align-self: center; } +.input-outer-wrapper { + display: flex; +} + .input-inner-wrapper { display: flex; align-items: center; @@ -163,3 +168,14 @@ input { right: 1.5rem; } } + +// ----- date- & timepicker + +:host(.cat-date-input), +:host(.cat-time-input) { + .input-wrapper { + z-index: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} diff --git a/core/src/components/cat-input/cat-input.spec.tsx b/core/src/components/cat-input/cat-input.spec.tsx index efc7f564..98dbfa93 100644 --- a/core/src/components/cat-input/cat-input.spec.tsx +++ b/core/src/components/cat-input/cat-input.spec.tsx @@ -9,29 +9,8 @@ describe('cat-input', () => { components: [CatInput], html: `` }); - expect(page.root).toEqualHtml(` - - -
-
- -
-
-
-
- -
-
-
-
- - + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-input/cat-input.tsx b/core/src/components/cat-input/cat-input.tsx index 75ed28cc..83e63f6c 100644 --- a/core/src/components/cat-input/cat-input.tsx +++ b/core/src/components/cat-input/cat-input.tsx @@ -1,4 +1,6 @@ import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core'; +import Cleave from 'cleave.js'; +import type { CleaveOptions } from 'cleave.js/options'; import log from 'loglevel'; import { coerceBoolean, coerceNumber } from '../../utils/coerce'; import { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint'; @@ -104,7 +106,7 @@ export class CatInput { @Prop() labelHidden = false; /** - * A maximum value for date, time and numeric values. + * A maximum value for numeric values. */ @Prop() max?: number | string; @@ -114,7 +116,7 @@ export class CatInput { @Prop() maxLength?: number; /** - * A minimum value for date, time and numeric values. + * A minimum value for numeric values. */ @Prop() min?: number | string; @@ -248,6 +250,16 @@ export class CatInput { this.catChange.emit(this.value); } + /** + * Adds a Cleave.js mask to the input. + * + * @param options The Cleave.js options. + */ + @Method() + async mask(options: CleaveOptions): Promise { + new Cleave(this.input, options); + } + @Watch('errors') onErrorsChanged(value?: boolean | string[] | ErrorMap) { if (!coerceBoolean(this.errorUpdate)) { @@ -297,85 +309,90 @@ export class CatInput { )}
-
this.input.focus()} - > - {this.textPrefix && ( - - {this.textPrefix} - - )} - {this.icon && !this.iconRight && ( - this.doFocus()}> - )} -
- (this.input = el as HTMLInputElement)} - id={this.id} - class={{ - 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value, - 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value - }} - autocomplete={this.autoComplete} - disabled={this.disabled} - max={this.max} - maxlength={this.maxLength} - min={this.min} - minlength={this.minLength} - name={this.name} - placeholder={this.placeholder} - readonly={this.readonly} - required={this.required} - type={this.isPasswordShown ? 'text' : this.type} - value={this.value} - onInput={this.onInput.bind(this)} - onFocus={this.onFocus.bind(this)} - onBlur={this.onBlur.bind(this)} - aria-invalid={this.invalid ? 'true' : undefined} - aria-describedby={this.hasHint ? this.id + '-hint' : undefined} - > - {this.clearable && !this.disabled && !this.readonly && this.value && ( - +
+
this.input.focus()} + > + {this.textPrefix && ( + + {this.textPrefix} + + )} + {this.icon && !this.iconRight && ( + this.doFocus()}> + )} +
+ (this.input = el as HTMLInputElement)} + id={this.id} + class={{ + 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value, + 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value + }} + autocomplete={this.autoComplete} + disabled={this.disabled} + max={this.max} + maxlength={this.maxLength} + min={this.min} + minlength={this.minLength} + name={this.name} + placeholder={this.placeholder} + readonly={this.readonly} + required={this.required} + type={this.isPasswordShown ? 'text' : this.type} + value={this.value} + onInput={this.onInput.bind(this)} + onFocus={this.onFocus.bind(this)} + onBlur={this.onBlur.bind(this)} + aria-invalid={this.invalid ? 'true' : undefined} + aria-describedby={this.hasHint ? this.id + '-hint' : undefined} + > + {this.clearable && !this.disabled && !this.readonly && this.value && ( + + )} + {this.togglePassword && !this.disabled && !this.readonly && this.value && ( + + )} +
+ {!this.invalid && this.icon && this.iconRight && ( + this.doFocus()}> )} - {this.togglePassword && !this.disabled && !this.readonly && this.value && ( - + {this.invalid && ( + + )} + {this.textSuffix && ( + + {this.textSuffix} + )}
- {!this.invalid && this.icon && this.iconRight && ( - this.doFocus()}> - )} - {this.invalid && } - {this.textSuffix && ( - - {this.textSuffix} - - )} +
{this.hasHint && ( ` +### `mask(options: CleaveOptions) => Promise` + +Adds a Cleave.js mask to the input. + +#### Parameters + +| Name | Type | Description | +| --------- | --------------- | ---------------------- | +| `options` | `CleaveOptions` | The Cleave.js options. | + +#### Returns + +Type: `Promise` + + + ## Slots @@ -117,7 +133,9 @@ Type: `Promise` ### Used by + - [cat-date](../cat-date) - [cat-datepicker](../cat-datepicker) + - [cat-time](../cat-time) ### Depends on @@ -131,7 +149,9 @@ graph TD; cat-input --> cat-button cat-button --> cat-icon cat-button --> cat-spinner + cat-date --> cat-input cat-datepicker --> cat-input + cat-time --> cat-input style cat-input fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/core/src/components/cat-pagination/cat-pagination.spec.tsx b/core/src/components/cat-pagination/cat-pagination.spec.tsx index 3369cd21..f4d420b9 100644 --- a/core/src/components/cat-pagination/cat-pagination.spec.tsx +++ b/core/src/components/cat-pagination/cat-pagination.spec.tsx @@ -8,24 +8,8 @@ describe('cat-pagination', () => { components: [CatPagination], html: `` }); - expect(page.root).toEqualHtml(` - - - - - + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-radio-group/cat-radio-group.spec.tsx b/core/src/components/cat-radio-group/cat-radio-group.spec.tsx index ab34d6e0..2b170e7f 100644 --- a/core/src/components/cat-radio-group/cat-radio-group.spec.tsx +++ b/core/src/components/cat-radio-group/cat-radio-group.spec.tsx @@ -7,14 +7,8 @@ describe('cat-radio-group', () => { components: [CatRadioGroup], html: `` }); - expect(page.root).toEqualHtml(` - - -
- -
- - + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-radio/cat-radio.spec.tsx b/core/src/components/cat-radio/cat-radio.spec.tsx index 32e0c62a..75be609c 100644 --- a/core/src/components/cat-radio/cat-radio.spec.tsx +++ b/core/src/components/cat-radio/cat-radio.spec.tsx @@ -5,20 +5,10 @@ describe('cat-radio', () => { it('renders', async () => { const page = await newSpecPage({ components: [CatRadio], - html: `` + html: `` }); - expect(page.root).toEqualHtml(` - - - - - + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-scrollable/cat-scrollable.spec.tsx b/core/src/components/cat-scrollable/cat-scrollable.spec.tsx index 7cb78435..03e4ed1b 100644 --- a/core/src/components/cat-scrollable/cat-scrollable.spec.tsx +++ b/core/src/components/cat-scrollable/cat-scrollable.spec.tsx @@ -7,19 +7,8 @@ describe('cat-scrollable', () => { components: [CatScrollable], html: `` }); - expect(page.root).toEqualHtml(` - - -
-
-
-
-
-
-
- -
- + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-select-demo/cat-select-demo.tsx b/core/src/components/cat-select-demo/cat-select-demo.tsx index 34a87e11..3bc39268 100644 --- a/core/src/components/cat-select-demo/cat-select-demo.tsx +++ b/core/src/components/cat-select-demo/cat-select-demo.tsx @@ -177,7 +177,7 @@ export class CatSelectTest { render() { return ( - + { components: [CatSelect], html: `` }); - expect(page.root).toEqualHtml(` - - -
-
- -
- -
-
-
- -
- -
-
-
-
- - + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-skeleton/cat-skeleton.spec.tsx b/core/src/components/cat-skeleton/cat-skeleton.spec.tsx index 0f20020b..9540498b 100644 --- a/core/src/components/cat-skeleton/cat-skeleton.spec.tsx +++ b/core/src/components/cat-skeleton/cat-skeleton.spec.tsx @@ -7,12 +7,8 @@ describe('cat-skeleton', () => { components: [CatSkeleton], html: `` }); - expect(page.root).toEqualHtml(` - - -
- - + expect(page.root).toEqualLightHtml(` + `); }); }); diff --git a/core/src/components/cat-spinner/cat-spinner.spec.tsx b/core/src/components/cat-spinner/cat-spinner.spec.tsx index f62d2053..98ccd731 100644 --- a/core/src/components/cat-spinner/cat-spinner.spec.tsx +++ b/core/src/components/cat-spinner/cat-spinner.spec.tsx @@ -7,7 +7,7 @@ describe('cat-spinner', () => { components: [CatSpinner], html: `` }); - expect(page.root?.shadowRoot).toEqualHtml(` + expect(page.root?.shadowRoot).toEqualLightHtml(`