From 21a58e4c879609b07ee4a737ed7358b8077c638c Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 7 Mar 2023 23:58:35 +0100 Subject: [PATCH 1/2] refactor: added missing attributes --- .../src/components/db-input/db-input.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx index 2633fc7383..6f7ac9b882 100644 --- a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx +++ b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx @@ -81,6 +81,21 @@ export class DbInput { */ @Prop({ reflect: true }) pattern: string; + /** + * The step attribute specifies the granularity that the value must obey to on increasing or decreasing by the users selection. + */ + @Prop({ reflect: true }) step: number; + + /** + * The min attribute specifies the minimum value that is sufficient for this input. + */ + @Prop({ reflect: true }) min: number; + + /** + * The max attribute specifies the maximum value that is sufficient for this input. + */ + @Prop({ reflect: true }) max: number; + /** * The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. */ @@ -143,7 +158,9 @@ export class DbInput { data-dirname={this.dirname} disabled={this.disabled} list={this.list} + max={this.max} maxlength={this.maxlength} + min={this.min} minlength={this.minlength} name={this.name} pattern={this.pattern} @@ -151,6 +168,7 @@ export class DbInput { readonly={this.readonly} required={this.required} size={this.size} + step={this.step} value={this.value} aria-labelledby={this.input_id + '-label'} data-variant={this.variant} From 680487cf717104c3455fa730ce2dce71b34ed541 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 8 Mar 2023 06:44:38 +0100 Subject: [PATCH 2/2] chore: regenerated those files --- .../db-ui-elements-stencil/src/components/db-card/readme.md | 2 +- .../db-ui-elements-stencil/src/components/db-input/readme.md | 3 +++ .../db-ui-elements-stencil/src/components/db-link/readme.md | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/db-ui-elements-stencil/src/components/db-card/readme.md b/packages/db-ui-elements-stencil/src/components/db-card/readme.md index 6494b55665..37544e6ad7 100644 --- a/packages/db-ui-elements-stencil/src/components/db-card/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-card/readme.md @@ -12,7 +12,7 @@ | `alt` | `alt` | The alt attribute for the image. | `string` | `undefined` | | `content` | `content` | The content represents the content of the card. It's optional and you can use slot for custom tags. | `string` | `undefined` | | `header` | `header` | The header represents the title of the card. It's optional and you can use slot for custom tags. | `string` | `undefined` | -| `illustration` | `illustration` | The illustration which will show a predefined svg. -Development: enum can be generated with /scripts/illustration-generator- | `"alarm-clock" \| "bicycle" \| "blizzard" \| "broken" \| "buggy" \| "bus" \| "calendar" \| "car" \| "chat" \| "christmas" \| "clock-moving" \| "coffee-cup" \| "compass" \| "construction-sign" \| "construction-worker" \| "customer-feedback" \| "db-clock" \| "db-comfort-checkin" \| "db-ticket-shop" \| "db-ticket-vending-machine" \| "db-trainstation-with-train" \| "db-trainstation" \| "db-travel-center" \| "db-video-travel-center" \| "delayed" \| "der-kleine-ice" \| "diamond" \| "disruptions" \| "distance" \| "error" \| "ffp2-mask-with-sign" \| "ffp2-mask" \| "fokus" \| "gaming-no-wire" \| "gaming" \| "green-energy" \| "green" \| "handshake" \| "handwashing" \| "hashtag" \| "heart" \| "home" \| "information" \| "itinerary" \| "kiosk" \| "laptop" \| "local-train" \| "location" \| "lost-and-found" \| "luggage" \| "mask" \| "mini-store" \| "mobileticket-brand" \| "mobileticket-feature" \| "movie" \| "news" \| "newsletter" \| "newspaper" \| "no-handshaking" \| "onlineshop-brand" \| "onlineshop-feature" \| "onlineticket-brand" \| "onlineticket-feature" \| "passenger-rights" \| "podcast" \| "poi-berlin-copy" \| "poi-berlin" \| "restaurant" \| "savings" \| "scan-ticket-printout" \| "search" \| "self-driving" \| "show-ticket" \| "single-entry" \| "smartphone" \| "sport" \| "suitcase" \| "tablet" \| "thunderstorm" \| "tickets" \| "timetable" \| "tips" \| "transportation-advertising" \| "whats-schmutzig" \| "wifi"` | `undefined` | +| `illustration` | `illustration` | The illustration which will show a predefined svg. -Development: enum can be generated with /scripts/illustration-generator- | `"error" \| "mask" \| "location" \| "alarm-clock" \| "bicycle" \| "blizzard" \| "broken" \| "buggy" \| "bus" \| "calendar" \| "car" \| "chat" \| "christmas" \| "clock-moving" \| "coffee-cup" \| "compass" \| "construction-sign" \| "construction-worker" \| "customer-feedback" \| "db-clock" \| "db-comfort-checkin" \| "db-ticket-shop" \| "db-ticket-vending-machine" \| "db-trainstation-with-train" \| "db-trainstation" \| "db-travel-center" \| "db-video-travel-center" \| "delayed" \| "der-kleine-ice" \| "diamond" \| "disruptions" \| "distance" \| "ffp2-mask-with-sign" \| "ffp2-mask" \| "fokus" \| "gaming-no-wire" \| "gaming" \| "green-energy" \| "green" \| "handshake" \| "handwashing" \| "hashtag" \| "heart" \| "home" \| "information" \| "itinerary" \| "kiosk" \| "laptop" \| "local-train" \| "lost-and-found" \| "luggage" \| "mini-store" \| "mobileticket-brand" \| "mobileticket-feature" \| "movie" \| "news" \| "newsletter" \| "newspaper" \| "no-handshaking" \| "onlineshop-brand" \| "onlineshop-feature" \| "onlineticket-brand" \| "onlineticket-feature" \| "passenger-rights" \| "podcast" \| "poi-berlin-copy" \| "poi-berlin" \| "restaurant" \| "savings" \| "scan-ticket-printout" \| "search" \| "self-driving" \| "show-ticket" \| "single-entry" \| "smartphone" \| "sport" \| "suitcase" \| "tablet" \| "thunderstorm" \| "tickets" \| "timetable" \| "tips" \| "transportation-advertising" \| "whats-schmutzig" \| "wifi"` | `undefined` | | `image` | `image` | The prop image can be used instead of illustration to show a custom img. | `string` | `undefined` | | `uiCoreIllustrationPath` | `illustration-path` | The illustration-path defines the path to DB UI Core illustrations. If you want to use other/custom images use the image prop instead. | `string` | `'./icons/illustrative'` | | `variant` | `variant` | The variant which is banner or title. | `"banner" \| "title"` | `'banner'` | diff --git a/packages/db-ui-elements-stencil/src/components/db-input/readme.md b/packages/db-ui-elements-stencil/src/components/db-input/readme.md index 2c8bdf0fcb..dd2c49593f 100644 --- a/packages/db-ui-elements-stencil/src/components/db-input/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-input/readme.md @@ -19,7 +19,9 @@ | `input_id` | `input_id` | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. | `string` | `'input-' + uuid()` | | `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `undefined` | | `list` | `list` | The list attribute is used to identify an element that lists predefined options suggested to the user. | `string` | `undefined` | +| `max` | `max` | The max attribute specifies the maximum value that is sufficient for this input. | `number` | `undefined` | | `maxlength` | `maxlength` | /* The maxlength attribute, controlled by a dirty value flag, declares a limit on the number of characters a user can input. | `number` | `undefined` | +| `min` | `min` | The min attribute specifies the minimum value that is sufficient for this input. | `number` | `undefined` | | `minlength` | `minlength` | /* The minlength attribute, when it applies, is a form control minlength attribute. | `number` | `undefined` | | `name` _(required)_ | `name` | The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string. | `string` | `undefined` | | `pattern` | `pattern` | The pattern attribute specifies a regular expression against which the control's value is to be checked. | `string` | `undefined` | @@ -27,6 +29,7 @@ | `readonly` | `readonly` | The readonly attribute controls whether or not the user can edit the form control. | `boolean` | `undefined` | | `required` | `required` | The required attribute is a boolean attribute. When specified, the element is required. | `boolean` | `undefined` | | `size` | `size` | The size attribute gives the number of characters that, in a visual rendering, the user agent is to allow the user to see while editing the element's value. | `number` | `undefined` | +| `step` | `step` | The step attribute specifies the granularity that the value must obey to on increasing or decreasing by the users selection. | `number` | `undefined` | | `type` | `type` | The type attribute changes the input type to text, number etc. | `string` | `'text'` | | `value` | `value` | The value content attribute gives the default value of the input element. | `string` | `undefined` | | `variant` | `variant` | The variant attribute specifies a visual expression of a select. | `"outline" \| "semitransparent" \| "solid" \| "white"` | `'semitransparent'` | diff --git a/packages/db-ui-elements-stencil/src/components/db-link/readme.md b/packages/db-ui-elements-stencil/src/components/db-link/readme.md index b81eea3c2c..936994377e 100644 --- a/packages/db-ui-elements-stencil/src/components/db-link/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-link/readme.md @@ -16,7 +16,7 @@ | `iconVariant` | `icon-variant` | The variant attribute specifies the style and size of an icon. | `"16-filled" \| "16-outline" \| "20-filled" \| "20-outline" \| "24-filled" \| "24-outline" \| "32-filled" \| "32-outline" \| "48-filled" \| "48-outline" \| "64-filled" \| "64-outline"` | `'24-outline'` | | `icononly` | `icononly` | Define the text next to the icon specified via the icon Property to get hidden. | `boolean` | `undefined` | | `media` | `media` | The media attribute describes for which media the target document was designed. The value must be a valid media query. The default, if the media attribute is omitted, is "all". | `string` | `undefined` | -| `rel` | `rel` | The rel attribute controls what kinds of links the elements create. The attribue's value must be a set of space-separated tokens. The allowed keywords and their meanings are defined below. | `"search" \| "alternate" \| "appendix" \| "author" \| "bookmark" \| "chapter" \| "contents" \| "copyright" \| "glossary" \| "help" \| "index" \| "license" \| "next" \| "nofollow" \| "noopener" \| "noreferrer" \| "prefetch" \| "prev" \| "section" \| "start" \| "subsection" \| "tag"` | `undefined` | +| `rel` | `rel` | The rel attribute controls what kinds of links the elements create. The attribue's value must be a set of space-separated tokens. The allowed keywords and their meanings are defined below. | `"help" \| "section" \| "start" \| "search" \| "alternate" \| "appendix" \| "author" \| "bookmark" \| "chapter" \| "contents" \| "copyright" \| "glossary" \| "index" \| "license" \| "next" \| "nofollow" \| "noopener" \| "noreferrer" \| "prefetch" \| "prev" \| "subsection" \| "tag"` | `undefined` | | `target` | `target` | The target attribute gives the name of the browsing context that will be used. User agents use this name when following hyperlinks. | `"_blank" \| "_parent" \| "_self" \| "_top"` | `undefined` | | `text` | `text` | The text attribute can be used to set the text inside the anchor tag without slot. | `string` | `undefined` | | `type` | `type` | The type attribute, if present, gives the MIME type of the linked resource. The value must be a valid MIME type. User agents must not consider the type attribute authoritative — upon fetching the resource, user agents must not use metadata included in the link to the resource to determine its type. | `string` | `undefined` |