From e862125866390d7e5e45b6432d0abe7c030eb4ab Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Thu, 26 Jan 2023 11:33:07 +0100 Subject: [PATCH] chore: build and code formatting (#909) --- .github/actions/extract-branch/action.yml | 2 +- .github/dependabot.yml | 4 +- .../src/components/db-card/readme.md | 2 +- .../src/components/db-checkbox/readme.md | 22 ++++----- .../src/components/db-chip/readme.md | 18 ++++---- .../src/components/db-image/readme.md | 24 +++++----- .../src/components/db-input/readme.md | 46 +++++++++---------- .../src/components/db-link/readme.md | 2 +- .../src/components/db-pagination/readme.md | 28 +++++------ .../src/components/db-progress/readme.md | 16 +++---- .../src/components/db-radio/readme.md | 20 ++++---- .../src/components/db-select/readme.md | 24 +++++----- .../src/components/db-textarea/readme.md | 42 ++++++++--------- .../src/components/db-toggle/readme.md | 10 ++-- 14 files changed, 130 insertions(+), 130 deletions(-) diff --git a/.github/actions/extract-branch/action.yml b/.github/actions/extract-branch/action.yml index b0f7a7820..62e4f98f3 100644 --- a/.github/actions/extract-branch/action.yml +++ b/.github/actions/extract-branch/action.yml @@ -3,7 +3,7 @@ name: 'Extract branch name' description: 'Extract branch name based on pr or push' outputs: branch-name: - description: "Branch name" + description: 'Branch name' value: ${{ steps.branch-name.outputs.branch-name }} runs: using: 'composite' diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 106eacecc..6c9fb641f 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -35,8 +35,8 @@ updates: update-types: ['version-update:semver-major'] - dependency-name: 'typescript' update-types: ['version-update:semver-major'] - - dependency-name: "eslint" - update-types: ["version-update:semver-patch"] + - dependency-name: 'eslint' + update-types: ['version-update:semver-patch'] pull-request-branch-name: separator: '-' # https://github.com/dependabot/dependabot-core/issues/5226#issuecomment-1179434437 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 37544e6ad..950c7656e 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- | `"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` | +| `illustration` | `illustration` | The illustration which will show a predefined svg. -Development: enum can be generated with /scripts/illustration-generator- | `"mask" \| "error" \| "location" \| "calendar" \| "heart" \| "search" \| "chat" \| "wifi" \| "coffee-cup" \| "restaurant" \| "home" \| "timetable" \| "bicycle" \| "car" \| "alarm-clock" \| "blizzard" \| "broken" \| "buggy" \| "bus" \| "christmas" \| "clock-moving" \| "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" \| "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" \| "savings" \| "scan-ticket-printout" \| "self-driving" \| "show-ticket" \| "single-entry" \| "smartphone" \| "sport" \| "suitcase" \| "tablet" \| "thunderstorm" \| "tickets" \| "tips" \| "transportation-advertising" \| "whats-schmutzig"` | `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-checkbox/readme.md b/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md index 185eaecef..3504dae79 100644 --- a/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-checkbox/readme.md @@ -21,17 +21,17 @@ Add the following styles to your application, if like to use a special theme. If ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------------------------------- | -| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `undefined` | -| `checked` | `checked` | The checked content attribute is a boolean attribute that gives the default checkedness of the input element. | `boolean` | `undefined` | -| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` | -| `indeterminate` | `indeterminate` | The indeterminate attribute is a boolean attribute. When specified, the element is is displayed in an indeterminate state (neither checked, nor unchecked). | `boolean` | `undefined` | -| `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` | `'checkbox-' + uuid();()` | -| `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `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` | -| `required` | `required` | The required attribute is a boolean attribute. When specified, the element is required. | `boolean` | `undefined` | -| `value` | `value` | The value content attribute gives the default value of the input element. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ---------------------- | +| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `undefined` | +| `checked` | `checked` | The checked content attribute is a boolean attribute that gives the default checkedness of the input element. | `boolean` | `undefined` | +| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` | +| `indeterminate` | `indeterminate` | The indeterminate attribute is a boolean attribute. When specified, the element is is displayed in an indeterminate state (neither checked, nor unchecked). | `boolean` | `undefined` | +| `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` | `'checkbox-' + uuid()` | +| `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `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` | +| `required` | `required` | The required attribute is a boolean attribute. When specified, the element is required. | `boolean` | `undefined` | +| `value` | `value` | The value content attribute gives the default value of the input element. | `string` | `undefined` | ## Events diff --git a/packages/db-ui-elements-stencil/src/components/db-chip/readme.md b/packages/db-ui-elements-stencil/src/components/db-chip/readme.md index 133cb2d5e..516f56285 100644 --- a/packages/db-ui-elements-stencil/src/components/db-chip/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-chip/readme.md @@ -7,15 +7,15 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -| `datatype` | `datatype` | Decides which datatype you want to use: filter (1-n); selection (1); | `"filter" \| "selection"` | `'selection'` | -| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the chip. | `boolean` | `false` | -| `icon` | `icon` | Attribute to add icon before chip. | `string` | `undefined` | -| `iconafter` | `iconafter` | Attribute to add icon after chip. | `string` | `undefined` | -| `input_id` | `input_id` | The input_id of a label 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 label element. | `string` | `'chip-' + uuid();()` | -| `name` | `name` | Name to group multiple chips. | `string` | `'chips'` | -| `variant` | `variant` | Predefined variants to change background color and font color. | `"error" \| "informative" \| "poi-db-services-einrichtung" \| "poi-dienstleistungen" \| "poi-einkaufen" \| "poi-essen-trinken" \| "poi-freizeit" \| "poi-gesundheit" \| "poi-kunst-kultur" \| "poi-wegeleitung" \| "poi-wissenswertes" \| "poi-zivile-rel-einrichtungen" \| "success" \| "track" \| "warning"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | +| `datatype` | `datatype` | Decides which datatype you want to use: filter (1-n); selection (1); | `"filter" \| "selection"` | `'selection'` | +| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the chip. | `boolean` | `false` | +| `icon` | `icon` | Attribute to add icon before chip. | `string` | `undefined` | +| `iconafter` | `iconafter` | Attribute to add icon after chip. | `string` | `undefined` | +| `input_id` | `input_id` | The input_id of a label 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 label element. | `string` | `'chip-' + uuid()` | +| `name` | `name` | Name to group multiple chips. | `string` | `'chips'` | +| `variant` | `variant` | Predefined variants to change background color and font color. | `"error" \| "informative" \| "poi-db-services-einrichtung" \| "poi-dienstleistungen" \| "poi-einkaufen" \| "poi-essen-trinken" \| "poi-freizeit" \| "poi-gesundheit" \| "poi-kunst-kultur" \| "poi-wegeleitung" \| "poi-wissenswertes" \| "poi-zivile-rel-einrichtungen" \| "success" \| "track" \| "warning"` | `undefined` | ## Dependencies diff --git a/packages/db-ui-elements-stencil/src/components/db-image/readme.md b/packages/db-ui-elements-stencil/src/components/db-image/readme.md index 3620a9329..53b4b651e 100644 --- a/packages/db-ui-elements-stencil/src/components/db-image/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-image/readme.md @@ -7,18 +7,18 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------- | -| `alt` _(required)_ | `alt` | The alt attribute is used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element. | `string` | `undefined` | -| `ariaid` | `ariaid` | Optional id for the caption aria label - otherwise random id will be set | `string` | `'db-' + uuid();()` | -| `caption` | `caption` | Optional caption for the image | `string` | `undefined` | -| `height` _(required)_ | `height` | Height for the image | `number` | `undefined` | -| `loading` | `loading` | Optional lazy loading attribute | `"lazy"` | `undefined` | -| `modernformat` | `modernformat` | Optional modern image format srcset URL (like avif or webp). | `string` | `undefined` | -| `responsivemediaquery` | `responsivemediaquery` | Optional responsive media queries as array of objects '[{srcset:"/path/to/picture.extension", media:"(min-width: 768px)"}]' | `string` | `undefined` | -| `src` _(required)_ | `src` | The image src URL. | `string` | `undefined` | -| `srcset` | `srcset` | Optional srcset for high density images | `string` | `undefined` | -| `width` _(required)_ | `width` | Width for the image | `number` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------- | +| `alt` _(required)_ | `alt` | The alt attribute is used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element. | `string` | `undefined` | +| `ariaid` | `ariaid` | Optional id for the caption aria label - otherwise random id will be set | `string` | `'image-' + uuid()` | +| `caption` | `caption` | Optional caption for the image | `string` | `undefined` | +| `height` _(required)_ | `height` | Height for the image | `number` | `undefined` | +| `loading` | `loading` | Optional lazy loading attribute | `"lazy"` | `undefined` | +| `modernformat` | `modernformat` | Optional modern image format srcset URL (like avif or webp). | `string` | `undefined` | +| `responsivemediaquery` | `responsivemediaquery` | Optional responsive media queries as array of objects '[{srcset:"/path/to/picture.extension", media:"(min-width: 768px)"}]' | `string` | `undefined` | +| `src` _(required)_ | `src` | The image src URL. | `string` | `undefined` | +| `srcset` | `srcset` | Optional srcset for high density images | `string` | `undefined` | +| `width` _(required)_ | `width` | Width for the image | `number` | `undefined` | ---------------------------------------------- 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 5bbc359ff..fb5d173a4 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 @@ -21,29 +21,29 @@ Add the following styles to your application. If you have added the base depende ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | -------------------------------- | -| `ariainvalid` | `ariainvalid` | The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application. | `"false" \| "grammar" \| "spelling" \| "true"` | `undefined` | -| `ariarequired` | `ariarequired` | The ariarequired attribute can be applied to a form element, to indicate to an AT that it is required to complete the form. | `"false" \| "true"` | `undefined` | -| `autocomplete` | `autocomplete` | User agents sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input. | `"off" \| "on"` | `undefined` | -| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `undefined` | -| `description` | `description` | The description attribute specifies the description/hint of the input. | `string` | `undefined` | -| `dirname` | `dirname` | The dirname attribute on a form control element enables the submission of the directionality of the element, and gives the name of the control that contains this value during form submission. If such an attribute is specified, its value must not be the empty string. | `string` | `undefined` | -| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` | -| `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` | -| `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` | -| `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` | -| `placeholder` | `placeholder` | The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. | `string` | `undefined` | -| `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` | -| `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'` | +| Property | Attribute | Description | Type | Default | +| -------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------------------- | +| `ariainvalid` | `ariainvalid` | The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application. | `"false" \| "grammar" \| "spelling" \| "true"` | `undefined` | +| `ariarequired` | `ariarequired` | The ariarequired attribute can be applied to a form element, to indicate to an AT that it is required to complete the form. | `"false" \| "true"` | `undefined` | +| `autocomplete` | `autocomplete` | User agents sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input. | `"off" \| "on"` | `undefined` | +| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `undefined` | +| `description` | `description` | The description attribute specifies the description/hint of the input. | `string` | `undefined` | +| `dirname` | `dirname` | The dirname attribute on a form control element enables the submission of the directionality of the element, and gives the name of the control that contains this value during form submission. If such an attribute is specified, its value must not be the empty string. | `string` | `undefined` | +| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` | +| `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` | +| `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` | +| `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` | +| `placeholder` | `placeholder` | The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. | `string` | `undefined` | +| `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` | +| `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'` | ## Events 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 ea967c771..5fc0fc4c8 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 @@ -46,7 +46,7 @@ Add the following styles to your application. If you have added the base depende | `iconVariant` | `icon-variant` | The variant attribute specifies the style and size of an icon. | `"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. | `"help" \| "section" \| "start" \| "search" \| "alternate" \| "appendix" \| "author" \| "bookmark" \| "chapter" \| "contents" \| "copyright" \| "glossary" \| "index" \| "license" \| "next" \| "nofollow" \| "noopener" \| "noreferrer" \| "prefetch" \| "prev" \| "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. | `"section" \| "start" \| "help" \| "search" \| "copyright" \| "alternate" \| "appendix" \| "author" \| "bookmark" \| "chapter" \| "contents" \| "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` | diff --git a/packages/db-ui-elements-stencil/src/components/db-pagination/readme.md b/packages/db-ui-elements-stencil/src/components/db-pagination/readme.md index 40e6e7453..bf7ac478d 100644 --- a/packages/db-ui-elements-stencil/src/components/db-pagination/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-pagination/readme.md @@ -7,20 +7,20 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------------------------- | -| `ariaid` | `ariaid` | Optional id for the caption aria label - otherwise random id will be set | `string` | `'db-' + uuid();()` | -| `arialabel` | `arialabel` | The arialabel attribute is a string attribute and defines the text content of the aria-label in the pagination. | `string` | `'Pagination'` | -| `count` | `count` | The count attribute is a number attribute and defines the number of pages displayed apart from the first and last page (except if currentpage is the first or last page, then these pages are included in the count). | `number` | `2` | -| `currentpage` | `currentpage` | The currentpage attribute is a obligatory number attribute and indicates which page number is highlighted in the pagination. | `number` | `1` | -| `ellipsisend` | `ellipsisend` | The ellipsisend attribute only needs to be passed when working with slots. Should to be set to true if an ellipsis needs to be shown at the end of the pagination. | `boolean` | `undefined` | -| `ellipsisstart` | `ellipsisstart` | The ellipsisstart attribute only needs to be passed when working with slots. Should to be set to true if an ellipsis needs to be shown at the start of the pagination. | `boolean` | `undefined` | -| `pages` | `pages` | The pages attribute is a obligatory number attribute and indicates how many pages the pagination knows about. | `number` | `2` | -| `textnext` | `textnext` | The textnext attribute is a string attribute and defines the text content of the right arrow in the pagination. | `string` | `'Next'` | -| `textprevious` | `textprevious` | The textprevious attribute is a string attribute and defines the text content of the left arrow in the pagination. | `string` | `'Previous'` | -| `titlenext` | `titlenext` | The titlenext attribute is a string attribute and defines the title of the right arrow in the pagination. | `string` | `'Goto next page'` | -| `titlepagination` | `titlepagination` | The titlepagination attribute is a string attribute and defines the title of each page number (except first and last) displayed in the pagination. | `string` | `'Page Number'` | -| `titleprevious` | `titleprevious` | The titleprevious attribute is a string attribute and defines the title of the left arrow in the pagination. | `string` | `'Goto previous page'` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------------ | +| `ariaid` | `ariaid` | Optional id for the caption aria label - otherwise random id will be set | `string` | `'pagination-' + uuid()` | +| `arialabel` | `arialabel` | The arialabel attribute is a string attribute and defines the text content of the aria-label in the pagination. | `string` | `'Pagination'` | +| `count` | `count` | The count attribute is a number attribute and defines the number of pages displayed apart from the first and last page (except if currentpage is the first or last page, then these pages are included in the count). | `number` | `2` | +| `currentpage` | `currentpage` | The currentpage attribute is a obligatory number attribute and indicates which page number is highlighted in the pagination. | `number` | `1` | +| `ellipsisend` | `ellipsisend` | The ellipsisend attribute only needs to be passed when working with slots. Should to be set to true if an ellipsis needs to be shown at the end of the pagination. | `boolean` | `undefined` | +| `ellipsisstart` | `ellipsisstart` | The ellipsisstart attribute only needs to be passed when working with slots. Should to be set to true if an ellipsis needs to be shown at the start of the pagination. | `boolean` | `undefined` | +| `pages` | `pages` | The pages attribute is a obligatory number attribute and indicates how many pages the pagination knows about. | `number` | `2` | +| `textnext` | `textnext` | The textnext attribute is a string attribute and defines the text content of the right arrow in the pagination. | `string` | `'Next'` | +| `textprevious` | `textprevious` | The textprevious attribute is a string attribute and defines the text content of the left arrow in the pagination. | `string` | `'Previous'` | +| `titlenext` | `titlenext` | The titlenext attribute is a string attribute and defines the title of the right arrow in the pagination. | `string` | `'Goto next page'` | +| `titlepagination` | `titlepagination` | The titlepagination attribute is a string attribute and defines the title of each page number (except first and last) displayed in the pagination. | `string` | `'Page Number'` | +| `titleprevious` | `titleprevious` | The titleprevious attribute is a string attribute and defines the title of the left arrow in the pagination. | `string` | `'Goto previous page'` | ## Events diff --git a/packages/db-ui-elements-stencil/src/components/db-progress/readme.md b/packages/db-ui-elements-stencil/src/components/db-progress/readme.md index 7f9398d5a..239262a2e 100644 --- a/packages/db-ui-elements-stencil/src/components/db-progress/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-progress/readme.md @@ -7,14 +7,14 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ---------------- | -------------------------------------------------- | --------- | ----------------------------- | -| `circle` | `circle` | As a circle | `boolean` | `undefined` | -| `htmlid` | `htmlid` | Optional id - otherwise random id will be provided | `string` | `'db-' + uuid();()` | -| `indeterminate` | `indeterminate` | Indeterminate | `boolean` | `false` | -| `max` | `max` | The currentValue of the progress indicator. | `number` | `undefined` | -| `percentagesign` | `percentagesign` | The percentage sign - default %. | `string` | `'%'` | -| `value` | `value` | The currentValue of the progress indicator. | `number` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ---------------- | -------------------------------------------------- | --------- | ---------------------- | +| `circle` | `circle` | As a circle | `boolean` | `undefined` | +| `htmlid` | `htmlid` | Optional id - otherwise random id will be provided | `string` | `'progress-' + uuid()` | +| `indeterminate` | `indeterminate` | Indeterminate | `boolean` | `false` | +| `max` | `max` | The currentValue of the progress indicator. | `number` | `undefined` | +| `percentagesign` | `percentagesign` | The percentage sign - default %. | `string` | `'%'` | +| `value` | `value` | The currentValue of the progress indicator. | `number` | `undefined` | ---------------------------------------------- diff --git a/packages/db-ui-elements-stencil/src/components/db-radio/readme.md b/packages/db-ui-elements-stencil/src/components/db-radio/readme.md index cea12cbe1..a0d6b6ff2 100644 --- a/packages/db-ui-elements-stencil/src/components/db-radio/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-radio/readme.md @@ -21,16 +21,16 @@ Add the following styles to your application, if like to use a special theme. If ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------------------------- | -| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `undefined` | -| `checked` | `checked` | The checked content attribute is a boolean attribute that gives the default checkedness of the input element. | `boolean` | `undefined` | -| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` | -| `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` | `'radio-' + uuid();()` | -| `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `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` | -| `required` | `required` | The required attribute is a boolean attribute. When specified, the element is required. | `boolean` | `undefined` | -| `value` | `value` | The value content attribute gives the default value of the input element. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- | +| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `undefined` | +| `checked` | `checked` | The checked content attribute is a boolean attribute that gives the default checkedness of the input element. | `boolean` | `undefined` | +| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` | +| `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` | `'radio-' + uuid()` | +| `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `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` | +| `required` | `required` | The required attribute is a boolean attribute. When specified, the element is required. | `boolean` | `undefined` | +| `value` | `value` | The value content attribute gives the default value of the input element. | `string` | `undefined` | ## Events diff --git a/packages/db-ui-elements-stencil/src/components/db-select/readme.md b/packages/db-ui-elements-stencil/src/components/db-select/readme.md index 825df1e48..9ea39faa2 100644 --- a/packages/db-ui-elements-stencil/src/components/db-select/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-select/readme.md @@ -5,18 +5,18 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | --------------------------------- | -| `ariainvalid` | `ariainvalid` | The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application. | `boolean` | `false` | -| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the select. | `boolean` | `false` | -| `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` | `'select-' + uuid();()` | -| `label` _(required)_ | `label` | The label attribute specifies the caption of the selectbox. | `string` | `undefined` | -| `multiple` | `multiple` | If the multiple attribute is present, then the select element represents a control for selecting zero or more options from the list of options. If the attribute is absent, then the select element represents a control for selecting a single option from the list of options. | `boolean` | `false` | -| `name` _(required)_ | `name` | The name 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` | -| `required` | `required` | When the required attribute specified, the user will be required to select a value before submitting the form. | `boolean` | `false` | -| `size` | `size` | The size attribute gives the number of options to show to the user. The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero. If the multiple attribute is present, then the size attribute's default value is 4. If the multiple attribute is absent, then the size attribute's default value is 1. | `number` | `undefined` | -| `value` | `value` | The value property is to receive results from the native element. Use 'this.value' to process the expected value when onchange is used. | `string` | `undefined` | -| `variant` | `variant` | The variant attribute specifies a visual expression of a select. | `"outline" \| "semitransparent" \| "solid" \| "white"` | `'semitransparent'` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------- | +| `ariainvalid` | `ariainvalid` | The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application. | `boolean` | `false` | +| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the select. | `boolean` | `false` | +| `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` | `'select-' + uuid()` | +| `label` _(required)_ | `label` | The label attribute specifies the caption of the selectbox. | `string` | `undefined` | +| `multiple` | `multiple` | If the multiple attribute is present, then the select element represents a control for selecting zero or more options from the list of options. If the attribute is absent, then the select element represents a control for selecting a single option from the list of options. | `boolean` | `false` | +| `name` _(required)_ | `name` | The name 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` | +| `required` | `required` | When the required attribute specified, the user will be required to select a value before submitting the form. | `boolean` | `false` | +| `size` | `size` | The size attribute gives the number of options to show to the user. The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero. If the multiple attribute is present, then the size attribute's default value is 4. If the multiple attribute is absent, then the size attribute's default value is 1. | `number` | `undefined` | +| `value` | `value` | The value property is to receive results from the native element. Use 'this.value' to process the expected value when onchange is used. | `string` | `undefined` | +| `variant` | `variant` | The variant attribute specifies a visual expression of a select. | `"outline" \| "semitransparent" \| "solid" \| "white"` | `'semitransparent'` | ## Events diff --git a/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md b/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md index a8ea69bca..8dcb50fdf 100644 --- a/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-textarea/readme.md @@ -5,27 +5,27 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------------------------------- | -| `ariainvalid` | `ariainvalid` | The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application. | `"false" \| "grammar" \| "spelling" \| "true"` | `undefined` | -| `ariarequired` | `ariarequired` | The ariarequired attribute can be applied to a form element, to indicate to an AT that it is required to complete the form. | `"false" \| "true"` | `undefined` | -| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `undefined` | -| `cols` | `cols` | The cols attribute specifies the expected maximum number of characters per line. | `number` | `undefined` | -| `description` | `description` | The description attribute specifies the description/hint of the textarea. | `string` | `undefined` | -| `dirname` | `dirname` | The dirname attribute on a form control element enables the submission of the directionality of the element, and gives the name of the control that contains this value during form submission. If such an attribute is specified, its value must not be the empty string. | `string` | `undefined` | -| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` | -| `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` | `'textarea-' + uuid();()` | -| `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `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` | -| `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` | -| `placeholder` | `placeholder` | The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. | `string` | `undefined` | -| `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` | -| `rows` | `rows` | The rows attribute specifies the number of lines to show. | `number` | `undefined` | -| `value` | `value` | The value attribute reflects the changes to the textarea which are also emitted via event | `string` | `undefined` | -| `variant` | `variant` | The variant attribute specifies a visual expression of a select. | `"outline" \| "semitransparent" \| "solid" \| "white"` | `'semitransparent'` | -| `wrap` | `wrap` | The wrap attribute indicates how the control wraps text. | `"hard" \| "off " \| "soft"` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ---------------------- | +| `ariainvalid` | `ariainvalid` | The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application. | `"false" \| "grammar" \| "spelling" \| "true"` | `undefined` | +| `ariarequired` | `ariarequired` | The ariarequired attribute can be applied to a form element, to indicate to an AT that it is required to complete the form. | `"false" \| "true"` | `undefined` | +| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `undefined` | +| `cols` | `cols` | The cols attribute specifies the expected maximum number of characters per line. | `number` | `undefined` | +| `description` | `description` | The description attribute specifies the description/hint of the textarea. | `string` | `undefined` | +| `dirname` | `dirname` | The dirname attribute on a form control element enables the submission of the directionality of the element, and gives the name of the control that contains this value during form submission. If such an attribute is specified, its value must not be the empty string. | `string` | `undefined` | +| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` | +| `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` | `'textarea-' + uuid()` | +| `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `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` | +| `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` | +| `placeholder` | `placeholder` | The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. | `string` | `undefined` | +| `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` | +| `rows` | `rows` | The rows attribute specifies the number of lines to show. | `number` | `undefined` | +| `value` | `value` | The value attribute reflects the changes to the textarea which are also emitted via event | `string` | `undefined` | +| `variant` | `variant` | The variant attribute specifies a visual expression of a select. | `"outline" \| "semitransparent" \| "solid" \| "white"` | `'semitransparent'` | +| `wrap` | `wrap` | The wrap attribute indicates how the control wraps text. | `"hard" \| "off " \| "soft"` | `undefined` | ## Events diff --git a/packages/db-ui-elements-stencil/src/components/db-toggle/readme.md b/packages/db-ui-elements-stencil/src/components/db-toggle/readme.md index 17be4a61c..3bbe4f56e 100644 --- a/packages/db-ui-elements-stencil/src/components/db-toggle/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-toggle/readme.md @@ -7,11 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ----------------------------------------------------------- | --------- | ----------------------------- | -| `checked` | `checked` | Checked property | `boolean` | `undefined` | -| `disabled` | `disabled` | Disabled property | `boolean` | `undefined` | -| `htmlid` | `htmlid` | Optional id for the label - otherwise random id will be set | `string` | `'db-' + uuid();()` | +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ----------------------------------------------------------- | --------- | -------------------- | +| `checked` | `checked` | Checked property | `boolean` | `undefined` | +| `disabled` | `disabled` | Disabled property | `boolean` | `undefined` | +| `htmlid` | `htmlid` | Optional id for the label - otherwise random id will be set | `string` | `'toggle-' + uuid()` | ## Events