diff --git a/src/components/calcite-icon/readme.md b/src/components/calcite-icon/readme.md index 89bffddbc08..2381d3b224d 100644 --- a/src/components/calcite-icon/readme.md +++ b/src/components/calcite-icon/readme.md @@ -60,6 +60,7 @@ To use a custom color for the icon fill, you can add a class to the `calcite-ico - [calcite-stepper-item](../calcite-stepper-item) - [calcite-tab-title](../calcite-tab-title) - [calcite-tile](../calcite-tile) +- [calcite-time-picker](../calcite-time-picker) - [calcite-tree-item](../calcite-tree-item) - [calcite-value-list-item](../calcite-value-list-item) @@ -96,6 +97,7 @@ graph TD; calcite-stepper-item --> calcite-icon calcite-tab-title --> calcite-icon calcite-tile --> calcite-icon + calcite-time-picker --> calcite-icon calcite-tree-item --> calcite-icon calcite-value-list-item --> calcite-icon style calcite-icon fill:#f9f,stroke:#333,stroke-width:4px diff --git a/src/components/calcite-input-time-picker/readme.md b/src/components/calcite-input-time-picker/readme.md index 896bc775773..e8e61365fdb 100644 --- a/src/components/calcite-input-time-picker/readme.md +++ b/src/components/calcite-input-time-picker/readme.md @@ -6,19 +6,31 @@ | Property | Attribute | Description | Type | Default | | ------------------- | --------------------- | ------------------------------------------------------------------------------------------ | ------------------- | ----------- | +| `active` | `active` | The active state of the time input | `boolean` | `false` | | `disabled` | `disabled` | The disabled state of the time input | `boolean` | `false` | | `hourDisplayFormat` | `hour-display-format` | Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) | `"12" \| "24"` | `"12"` | +| `intlHour` | `intl-hour` | aria-label for the hour input | `string` | `undefined` | +| `intlHourDown` | `intl-hour-down` | aria-label for the hour down button | `string` | `undefined` | +| `intlHourUp` | `intl-hour-up` | aria-label for the hour up button | `string` | `undefined` | +| `intlMeridiem` | `intl-meridiem` | aria-label for the meridiem (am/pm) input | `string` | `undefined` | +| `intlMeridiemDown` | `intl-meridiem-down` | aria-label for the meridiem (am/pm) down button | `string` | `undefined` | +| `intlMeridiemUp` | `intl-meridiem-up` | aria-label for the meridiem (am/pm) up button | `string` | `undefined` | +| `intlMinute` | `intl-minute` | aria-label for the minute input | `string` | `undefined` | +| `intlMinuteDown` | `intl-minute-down` | aria-label for the minute down button | `string` | `undefined` | +| `intlMinuteUp` | `intl-minute-up` | aria-label for the minute up button | `string` | `undefined` | +| `intlSecond` | `intl-second` | aria-label for the second input | `string` | `undefined` | +| `intlSecondDown` | `intl-second-down` | aria-label for the second down button | `string` | `undefined` | +| `intlSecondUp` | `intl-second-up` | aria-label for the second up button | `string` | `undefined` | | `name` | `name` | The name of the time input | `string` | `undefined` | | `scale` | `scale` | The scale (size) of the time input | `"l" \| "m" \| "s"` | `"m"` | | `step` | `step` | number that specifies the granularity that the value must adhere to | `number` | `60` | -| `theme` | `theme` | The color theme of the time-picker | `"dark" \| "light"` | `undefined` | -| `value` | `value` | The selected time | `string` | `undefined` | +| `value` | `value` | The selected time | `string` | `null` | ## Events -| Event | Description | Type | -| ------------------------------ | -------------------------------------- | --------------------- | -| `calciteInputTimePickerChange` | Fires when the time value has changed. | `CustomEvent` | +| Event | Description | Type | +| ------------------------------ | --------------------------------------------------------------- | --------------------- | +| `calciteInputTimePickerChange` | Fires when the time value is changed as a result of user input. | `CustomEvent` | ## Methods @@ -45,7 +57,10 @@ graph TD; calcite-input-time-picker --> calcite-time-picker calcite-input --> calcite-progress calcite-input --> calcite-icon + calcite-popover --> calcite-action calcite-popover --> calcite-icon + calcite-action --> calcite-loader + calcite-action --> calcite-icon calcite-time-picker --> calcite-icon style calcite-input-time-picker fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/calcite-input/readme.md b/src/components/calcite-input/readme.md index c1a70c1eda1..e3632d07cb8 100644 --- a/src/components/calcite-input/readme.md +++ b/src/components/calcite-input/readme.md @@ -80,7 +80,7 @@ Using a wrapping `calcite-label` component lets consumers set the status attribu | `maxlength` | `maxlength` | **[DEPRECATED]** use maxLength instead

Maximum length of text input. | `number` | `undefined` | | `min` | `min` | input min | `number` | `undefined` | | `minLength` | `min-length` | Minimum length of the text input | `number` | `undefined` | -| `name` | `name` | | `string` | `undefined` | +| `name` | `name` | The name of the input | `string` | `undefined` | | `numberButtonType` | `number-button-type` | specify the placement of the number buttons | `"horizontal" \| "none" \| "vertical"` | `"vertical"` | | `placeholder` | `placeholder` | explicitly whitelist placeholder attribute | `string` | `undefined` | | `prefixText` | `prefix-text` | optionally add prefix | `string` | `undefined` | @@ -94,9 +94,9 @@ Using a wrapping `calcite-label` component lets consumers set the status attribu ## Events -| Event | Description | Type | -| ------------------- | --------------------------------------------------- | ------------------ | -| `calciteInputInput` | This event fires as the value of the input changes. | `CustomEvent` | +| Event | Description | Type | +| ------------------- | ------------------------------------------------ | ------------------ | +| `calciteInputInput` | This event fires each time a new value is typed. | `CustomEvent` | ## Methods @@ -121,6 +121,7 @@ Type: `Promise` - [calcite-color-picker](../calcite-color-picker) - [calcite-color-picker-hex-input](../calcite-color-picker-hex-input) - [calcite-input-date-picker](../calcite-input-date-picker) +- [calcite-input-time-picker](../calcite-input-time-picker) ### Depends on @@ -136,6 +137,7 @@ graph TD; calcite-color-picker --> calcite-input calcite-color-picker-hex-input --> calcite-input calcite-input-date-picker --> calcite-input + calcite-input-time-picker --> calcite-input style calcite-input fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/calcite-time-picker/readme.md b/src/components/calcite-time-picker/readme.md index 9e095d962cf..2131483385f 100644 --- a/src/components/calcite-time-picker/readme.md +++ b/src/components/calcite-time-picker/readme.md @@ -6,29 +6,28 @@ | Property | Attribute | Description | Type | Default | | ------------------- | --------------------- | ------------------------------------------------------------------------------------------ | ------------------- | ------------------- | -| `hour` | `hour` | The hour value (24-hour format) | `string` | `"--"` | +| `hour` | `hour` | The hour value (24-hour format) | `string` | `null` | | `hourDisplayFormat` | `hour-display-format` | Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) | `"12" \| "24"` | `"12"` | -| `intlHour` | `intl-hour` | aria-label for the hour input | `string` | `"hour"` | -| `intlHourDown` | `intl-hour-down` | aria-label for the hour down button | `string` | `"decrease hour"` | -| `intlHourUp` | `intl-hour-up` | aria-label for the hour up button | `string` | `"increase hour"` | -| `intlMeridiem` | `intl-meridiem` | aria-label for the meridiem (am/pm) input | `string` | `"AM/PM"` | -| `intlMeridiemDown` | `intl-meridiem-down` | aria-label for the meridiem (am/pm) down button | `string` | `"decrease AM/PM"` | -| `intlMeridiemUp` | `intl-meridiem-up` | aria-label for the meridiem (am/pm) up button | `string` | `"increase AM/PM"` | -| `intlMinute` | `intl-minute` | aria-label for the minute input | `string` | `"minute"` | -| `intlMinuteDown` | `intl-minute-down` | aria-label for the minute down button | `string` | `"decrease minute"` | -| `intlMinuteUp` | `intl-minute-up` | aria-label for the minute up button | `string` | `"increase minute"` | -| `intlSecond` | `intl-second` | aria-label for the second input | `string` | `"second"` | -| `intlSecondDown` | `intl-second-down` | aria-label for the second down button | `string` | `"decrease second"` | -| `intlSecondUp` | `intl-second-up` | aria-label for the second up button | `string` | `"increase second"` | -| `minute` | `minute` | The minute value | `string` | `"--"` | +| `intlHour` | `intl-hour` | aria-label for the hour input | `string` | `TEXT.hour` | +| `intlHourDown` | `intl-hour-down` | aria-label for the hour down button | `string` | `TEXT.hourDown` | +| `intlHourUp` | `intl-hour-up` | aria-label for the hour up button | `string` | `TEXT.hourUp` | +| `intlMeridiem` | `intl-meridiem` | aria-label for the meridiem (am/pm) input | `string` | `TEXT.meridiem` | +| `intlMeridiemDown` | `intl-meridiem-down` | aria-label for the meridiem (am/pm) down button | `string` | `TEXT.meridiemDown` | +| `intlMeridiemUp` | `intl-meridiem-up` | aria-label for the meridiem (am/pm) up button | `string` | `TEXT.meridiemUp` | +| `intlMinute` | `intl-minute` | aria-label for the minute input | `string` | `TEXT.minute` | +| `intlMinuteDown` | `intl-minute-down` | aria-label for the minute down button | `string` | `TEXT.minuteDown` | +| `intlMinuteUp` | `intl-minute-up` | aria-label for the minute up button | `string` | `TEXT.minuteUp` | +| `intlSecond` | `intl-second` | aria-label for the second input | `string` | `TEXT.second` | +| `intlSecondDown` | `intl-second-down` | aria-label for the second down button | `string` | `TEXT.secondDown` | +| `intlSecondUp` | `intl-second-up` | aria-label for the second up button | `string` | `TEXT.secondUp` | +| `minute` | `minute` | The minute value | `string` | `null` | | `scale` | `scale` | The scale (size) of the time picker | `"l" \| "m" \| "s"` | `"m"` | -| `second` | `second` | The second value | `string` | `"--"` | +| `second` | `second` | The second value | `string` | `null` | | `step` | `step` | number that specifies the granularity that the value must adhere to | `number` | `60` | -| `theme` | `theme` | The color theme of the time-picker | `"dark" \| "light"` | `undefined` | ## Methods -### `setFocus() => Promise` +### `setFocus(target: TimeFocusId) => Promise` #### Returns