@umbraco-ui/uui 1.5.0-rc.0 → 1.5.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +400 -355
- package/dist/uui.min.js +33 -33
- package/dist/uui.min.js.map +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -0
- package/package.json +81 -81
- package/vscode-html-custom-data.json +103 -78
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
},
|
|
9
9
|
{
|
|
10
10
|
"name": "uui-avatar-group",
|
|
11
|
-
"description": "Group a set of avatars, set a limit to minimize the visual space.\n\nSlots:\n\n * ` ` {} - Insert the `<uui-avatar>` elements in the default slot\n\nAttributes:\n\n * `limit` {number} - This sets a limit of how many avatars can be shown. It will ad a +{number} after the avatars to show the number of hidden avatars.\n\nProperties:\n\n * `
|
|
11
|
+
"description": "Group a set of avatars, set a limit to minimize the visual space.\n\nSlots:\n\n * ` ` {} - Insert the `<uui-avatar>` elements in the default slot\n\nAttributes:\n\n * `limit` {number} - This sets a limit of how many avatars can be shown. It will ad a +{number} after the avatars to show the number of hidden avatars.\n\nProperties:\n\n * `_avatarNodes` {`UUIAvatarElement[] | undefined`} - \n\n * `_avatarArray` {`UUIAvatarElement[]`} - \n\n * `limit` {number} - This sets a limit of how many avatars can be shown. It will ad a +{number} after the avatars to show the number of hidden avatars.\n\n * `styles` {`CSSResult[]`} - ",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "limit",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
20
|
"name": "uui-avatar",
|
|
21
|
-
"description": "Avatar for displaying users\n\nSlots:\n\n * ` ` {} - For anything other than initials (no more than 2-3 characters)\n\nAttributes:\n\n * `overflow` {boolean} - Set to true to prevent content from getting hidden if going outside the parent. Useful in combination with something like a Badge.\n\n * `img-src` {string} - Use this to apply a image src\n\n * `img-srcset` {string} - Use this to apply a image srcset\n\n * `name` {string} - Provide the name used for labels and to generate the initials.\n\nProperties:\n\n * `
|
|
21
|
+
"description": "Avatar for displaying users\n\nSlots:\n\n * ` ` {} - For anything other than initials (no more than 2-3 characters)\n\nAttributes:\n\n * `overflow` {boolean} - Set to true to prevent content from getting hidden if going outside the parent. Useful in combination with something like a Badge.\n\n * `img-src` {string} - Use this to apply a image src\n\n * `img-srcset` {string} - Use this to apply a image srcset\n\n * `name` {string} - Provide the name used for labels and to generate the initials.\n\nProperties:\n\n * `overflow` {boolean} - Set to true to prevent content from getting hidden if going outside the parent. Useful in combination with something like a Badge.\n\n * `imgSrc` {string} - Use this to apply a image src\n\n * `imgSrcset` {string} - Use this to apply a image srcset\n\n * `name` {string} - Provide the name used for labels and to generate the initials.\n\n * `_name` {`string`} - \n\n * `initials` {`string`} - \n\n * `styles` {`CSSResult[]`} - ",
|
|
22
22
|
"attributes": [
|
|
23
23
|
{
|
|
24
24
|
"name": "overflow",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
"name": "uui-badge",
|
|
44
|
-
"description": "A badge to notify that there is something that requires attention of the user. The badge is positioned with `position: absolute`. It will determine its position against the first ancestor with `position: relative`.\n\nSlots:\n\n * ` ` {} - The slot for badge contents\n\nAttributes:\n\n * `color` {\"default\" | \"positive\" | \"warning\" | \"danger\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `look` {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `attention` {`boolean`} - Bring attention to this badge by applying a bounce animation.\n\nProperties:\n\n * `
|
|
44
|
+
"description": "A badge to notify that there is something that requires attention of the user. The badge is positioned with `position: absolute`. It will determine its position against the first ancestor with `position: relative`.\n\nSlots:\n\n * ` ` {} - The slot for badge contents\n\nAttributes:\n\n * `color` {\"default\" | \"positive\" | \"warning\" | \"danger\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `look` {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `attention` {`boolean`} - Bring attention to this badge by applying a bounce animation.\n\nProperties:\n\n * `color` {\"default\" | \"positive\" | \"warning\" | \"danger\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `look` {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `attention` {`boolean`} - Bring attention to this badge by applying a bounce animation.\n\n * `styles` {`CSSResult[]`} - ",
|
|
45
45
|
"attributes": [
|
|
46
46
|
{
|
|
47
47
|
"name": "color",
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
},
|
|
98
98
|
{
|
|
99
99
|
"name": "uui-box",
|
|
100
|
-
"description": "A box for grouping elements\n\nSlots:\n\n * `headline` {} - headline area, this area is placed within the headline tag which is located inside the header. Use this to ensure the right headline styling.\n\n * `header` {} - header area, use this for things that is not the headline but located in the header.\n\n * ` ` {} - area for the content of the box\n\nAttributes:\n\n * `headline` {`string | null`} - Headline for this box, can also be set via the 'box' slot.\n\n * `headline-variant` {\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"} - Changes the headline variant for accessibility for this box.\nNotice this does not change the visual representation of the headline. (Umbraco does only recommend displaying a h5 sizes headline in the UUI-BOX)\n\nProperties:\n\n * `
|
|
100
|
+
"description": "A box for grouping elements\n\nSlots:\n\n * `headline` {} - headline area, this area is placed within the headline tag which is located inside the header. Use this to ensure the right headline styling.\n\n * `header` {} - header area, use this for things that is not the headline but located in the header.\n\n * ` ` {} - area for the content of the box\n\nAttributes:\n\n * `headline` {`string | null`} - Headline for this box, can also be set via the 'box' slot.\n\n * `headline-variant` {\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"} - Changes the headline variant for accessibility for this box.\nNotice this does not change the visual representation of the headline. (Umbraco does only recommend displaying a h5 sizes headline in the UUI-BOX)\n\nProperties:\n\n * `headline` {`string | null`} - Headline for this box, can also be set via the 'box' slot.\n\n * `headlineVariant` {\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"} - Changes the headline variant for accessibility for this box.\nNotice this does not change the visual representation of the headline. (Umbraco does only recommend displaying a h5 sizes headline in the UUI-BOX)\n\n * `_headlineVariantTag` {`StaticValue`} - \n\n * `_headlineSlotHasContent` {`boolean`} - \n\n * `_headlineSlotChanged` - \n\n * `_headerSlotHasContent` {`boolean`} - \n\n * `_headerSlotChanged` - \n\n * `styles` {`CSSResult[]`} - ",
|
|
101
101
|
"attributes": [
|
|
102
102
|
{
|
|
103
103
|
"name": "headline",
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
},
|
|
136
136
|
{
|
|
137
137
|
"name": "uui-breadcrumb-item",
|
|
138
|
-
"description": "A breadcrumb-item to be used with the breadcrumbs component.\n\nSlots:\n\n * ` ` {} - This slot displays elements inside the breadcrumb\n\nAttributes:\n\n * `href` {String} - Specifies the link href.\n\n * `last-item` {Boolean} - Specifies if the element is the last item in the uui-breadcrumbs. Last item will not render as a link\n\nProperties:\n\n * `
|
|
138
|
+
"description": "A breadcrumb-item to be used with the breadcrumbs component.\n\nSlots:\n\n * ` ` {} - This slot displays elements inside the breadcrumb\n\nAttributes:\n\n * `href` {String} - Specifies the link href.\n\n * `last-item` {Boolean} - Specifies if the element is the last item in the uui-breadcrumbs. Last item will not render as a link\n\nProperties:\n\n * `href` {String} - Specifies the link href.\n\n * `lastItem` {Boolean} - Specifies if the element is the last item in the uui-breadcrumbs. Last item will not render as a link\n\n * `styles` {`CSSResult[]`} - ",
|
|
139
139
|
"attributes": [
|
|
140
140
|
{
|
|
141
141
|
"name": "href",
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
},
|
|
151
151
|
{
|
|
152
152
|
"name": "uui-breadcrumbs",
|
|
153
|
-
"description": "A breadcrumbs component to be used in combination with the uui-breadcrumb-item.\n\nSlots:\n\n * ` ` {} - Slot to display nested breadcrumb items. It supports `<uui-breadcrumb-item>` elements or elements containing the `role=\"listitem\"` attribute\n\nProperties:\n\n * `
|
|
153
|
+
"description": "A breadcrumbs component to be used in combination with the uui-breadcrumb-item.\n\nSlots:\n\n * ` ` {} - Slot to display nested breadcrumb items. It supports `<uui-breadcrumb-item>` elements or elements containing the `role=\"listitem\"` attribute\n\nProperties:\n\n * `slotNodes` {`HTMLElement[]`} - \n\n * `styles` {`CSSResult[]`} - ",
|
|
154
154
|
"attributes": []
|
|
155
155
|
},
|
|
156
156
|
{
|
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
},
|
|
161
161
|
{
|
|
162
162
|
"name": "uui-button-inline-create",
|
|
163
|
-
"description": "Events:\n\n * `click` {} - on user click\n\nAttributes:\n\n * `label` {string} - Label to be used for aria-label and eventually as visual label\n\n * `vertical` {Boolean} - Place the button vertically\n\nProperties:\n\n * `
|
|
163
|
+
"description": "Events:\n\n * `click` {} - on user click\n\nAttributes:\n\n * `label` {string} - Label to be used for aria-label and eventually as visual label\n\n * `vertical` {Boolean} - Place the button vertically\n\nProperties:\n\n * `_position` {`number`} - \n\n * `label` {string} - Label to be used for aria-label and eventually as visual label\n\n * `styles` {`CSSResult[]`} - \n\n * `vertical` {Boolean} - Place the button vertically",
|
|
164
164
|
"attributes": [
|
|
165
165
|
{
|
|
166
166
|
"name": "label",
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
},
|
|
181
181
|
{
|
|
182
182
|
"name": "uui-button",
|
|
183
|
-
"description": "Events:\n\n * `click` - fires when the element is clicked\n\nSlots:\n\n * ` ` {} - for default content\n\n * `label` {} - for label content\n\n * `extra` {} - for extra\n\nAttributes:\n\n * `type` { \"submit\" | \"button\" | \"reset\" } - Specifies the type of button\n\n * `disabled` {boolean} - Disables the button, changes the looks of it and prevents if from emitting the click event\n\n * `look` {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `color` {\"default\" | \"positive\" | \"warning\" | \"danger\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `compact` {boolean} - Makes the left and right padding of the button narrower.\n\n * `state` {undefined |'waiting' | 'success' | 'failed'} - Sets the state of the button. With waiting state a loader will show, the success state and fail states display icons. State is reset do default automatically after 3 seconds.\n\n * `href` {string} - Set an href, this will turns the button into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `popovertarget` {string} - Set a popovertarget.\n\nProperties:\n\n * `
|
|
183
|
+
"description": "Events:\n\n * `click` - fires when the element is clicked\n\nSlots:\n\n * ` ` {} - for default content\n\n * `label` {} - for label content\n\n * `extra` {} - for extra\n\nAttributes:\n\n * `type` { \"submit\" | \"button\" | \"reset\" } - Specifies the type of button\n\n * `disabled` {boolean} - Disables the button, changes the looks of it and prevents if from emitting the click event\n\n * `look` {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `color` {\"default\" | \"positive\" | \"warning\" | \"danger\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `compact` {boolean} - Makes the left and right padding of the button narrower.\n\n * `state` {undefined |'waiting' | 'success' | 'failed'} - Sets the state of the button. With waiting state a loader will show, the success state and fail states display icons. State is reset do default automatically after 3 seconds.\n\n * `href` {string} - Set an href, this will turns the button into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `popovertarget` {string} - Set a popovertarget.\n\nProperties:\n\n * `type` { \"submit\" | \"button\" | \"reset\" } - Specifies the type of button\n\n * `disabled` {boolean} - Disables the button, changes the looks of it and prevents if from emitting the click event\n\n * `look` {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `color` {\"default\" | \"positive\" | \"warning\" | \"danger\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `compact` {boolean} - Makes the left and right padding of the button narrower.\n\n * `state` {undefined |'waiting' | 'success' | 'failed'} - Sets the state of the button. With waiting state a loader will show, the success state and fail states display icons. State is reset do default automatically after 3 seconds.\n\n * `href` {string} - Set an href, this will turns the button into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `_button` {`HTMLInputElement`} - \n\n * `_resetStateTimeout` {`number | undefined`} - \n\n * `styles` {`CSSResult[]`} - \n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events.\nIt may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\nRead more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - \n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - \n\n * `popoverContainerElement` {string} - Set a popovertarget.\n\n * `_togglePopover` - ",
|
|
184
184
|
"attributes": [
|
|
185
185
|
{
|
|
186
186
|
"name": "type",
|
|
@@ -339,7 +339,7 @@
|
|
|
339
339
|
},
|
|
340
340
|
{
|
|
341
341
|
"name": "uui-card-content-node",
|
|
342
|
-
"description": "Events:\n\n * `open` - fires when the card title is clicked.\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - slot for the default content area\n\n * `icon` {} - slot for the icon with support for `<uui-icon>` elements\n\n * `tag` {} - slot for the tag with support for `<uui-tag>` elements\n\n * `actions` {} - slot for the actions with support for the `<uui-action-bar>` element\n\nAttributes:\n\n * `name` {string} - Node name\n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `name` {string} - Node name\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `
|
|
342
|
+
"description": "Events:\n\n * `open` - fires when the card title is clicked.\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - slot for the default content area\n\n * `icon` {} - slot for the icon with support for `<uui-icon>` elements\n\n * `tag` {} - slot for the tag with support for `<uui-tag>` elements\n\n * `actions` {} - slot for the actions with support for the `<uui-action-bar>` element\n\nAttributes:\n\n * `name` {string} - Node name\n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `name` {string} - Node name\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
343
343
|
"attributes": [
|
|
344
344
|
{
|
|
345
345
|
"name": "name",
|
|
@@ -409,7 +409,7 @@
|
|
|
409
409
|
},
|
|
410
410
|
{
|
|
411
411
|
"name": "uui-card-media",
|
|
412
|
-
"description": "Events:\n\n * `open` - fires when the card title is clicked.\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * `tag` {} - slot for the tag with support for `<uui-tag>` elements\n\n * `actions` {} - slot for the actions with support for the `<uui-action-bar>` element\n\n * ` ` {} - slot for the default content area\n\nAttributes:\n\n * `name` {string} - Media name\n\n * `file-ext` {string} - Media file extension, without \".\"\n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `name` {string} - Media name\n\n * `fileExt` {string} - Media file extension, without \".\"\n\n * `hasPreview` {`boolean`} - \n\n * `
|
|
412
|
+
"description": "Events:\n\n * `open` - fires when the card title is clicked.\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * `tag` {} - slot for the tag with support for `<uui-tag>` elements\n\n * `actions` {} - slot for the actions with support for the `<uui-action-bar>` element\n\n * ` ` {} - slot for the default content area\n\nAttributes:\n\n * `name` {string} - Media name\n\n * `file-ext` {string} - Media file extension, without \".\"\n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `name` {string} - Media name\n\n * `fileExt` {string} - Media file extension, without \".\"\n\n * `hasPreview` {`boolean`} - \n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
413
413
|
"attributes": [
|
|
414
414
|
{
|
|
415
415
|
"name": "name",
|
|
@@ -483,7 +483,7 @@
|
|
|
483
483
|
},
|
|
484
484
|
{
|
|
485
485
|
"name": "uui-card-user",
|
|
486
|
-
"description": "Events:\n\n * `open` - fires when the card title is clicked.\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - slot for the default content area\n\n * `tag` {} - slot for the tag with support for `<uui-tag>` elements\n\n * `actions` {} - slot for the actions with support for the `<uui-action-bar>` element\n\nAttributes:\n\n * `name` {string} - User name\n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `name` {string} - User name\n\n * `
|
|
486
|
+
"description": "Events:\n\n * `open` - fires when the card title is clicked.\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - slot for the default content area\n\n * `tag` {} - slot for the tag with support for `<uui-tag>` elements\n\n * `actions` {} - slot for the actions with support for the `<uui-action-bar>` element\n\nAttributes:\n\n * `name` {string} - User name\n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `name` {string} - User name\n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
487
487
|
"attributes": [
|
|
488
488
|
{
|
|
489
489
|
"name": "name",
|
|
@@ -553,7 +553,7 @@
|
|
|
553
553
|
},
|
|
554
554
|
{
|
|
555
555
|
"name": "uui-card",
|
|
556
|
-
"description": "Events:\n\n * `open` - fires when the card title is clicked.\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - Default content.\n\nAttributes:\n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `
|
|
556
|
+
"description": "Events:\n\n * `open` - fires when the card title is clicked.\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - Default content.\n\nAttributes:\n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `disabled` {boolean} - Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'\n\n * `error` {boolean} - Set to true to highlight there is an error with this item.\n\n * `href` {string} - Set an href, this will turns the name of the card into an anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
557
557
|
"attributes": [
|
|
558
558
|
{
|
|
559
559
|
"name": "disabled",
|
|
@@ -619,7 +619,7 @@
|
|
|
619
619
|
},
|
|
620
620
|
{
|
|
621
621
|
"name": "uui-caret",
|
|
622
|
-
"description": "DEPRECATED: Please use uui-symbol-expand or uui-symbol-sort. A caret that rotates on click. Color will be `currentColor`\n\nAttributes:\n\n * `open` {boolean} - Turns the arrow around.\n\nProperties:\n\n * `
|
|
622
|
+
"description": "DEPRECATED: Please use uui-symbol-expand or uui-symbol-sort. A caret that rotates on click. Color will be `currentColor`\n\nAttributes:\n\n * `open` {boolean} - Turns the arrow around.\n\nProperties:\n\n * `open` {boolean} - Turns the arrow around.\n\n * `styles` {`CSSResult[]`} - ",
|
|
623
623
|
"attributes": [
|
|
624
624
|
{
|
|
625
625
|
"name": "open",
|
|
@@ -630,7 +630,7 @@
|
|
|
630
630
|
},
|
|
631
631
|
{
|
|
632
632
|
"name": "uui-checkbox",
|
|
633
|
-
"description": "Umbraco checkbox, toggles between checked and uncheck\n\nEvents:\n\n * `change` - fires when the element is begin checked by a user action\n\nAttributes:\n\n * `label-position` {'left' | 'right' | 'top' | 'bottom'} - Specifies the label position of the checkbox or the toggle\n\n * `checked` {boolean} - Reflects the state of the element.\nTrue if checkbox or toggle is checked. Change this to switch the state programmatically.\n\n * `disabled` {boolean} - Disables the input.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - intentional overwrite of FormControlMixins value getter and setter method.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `
|
|
633
|
+
"description": "Umbraco checkbox, toggles between checked and uncheck\n\nEvents:\n\n * `change` - fires when the element is begin checked by a user action\n\nAttributes:\n\n * `label-position` {'left' | 'right' | 'top' | 'bottom'} - Specifies the label position of the checkbox or the toggle\n\n * `checked` {boolean} - Reflects the state of the element.\nTrue if checkbox or toggle is checked. Change this to switch the state programmatically.\n\n * `disabled` {boolean} - Disables the input.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - intentional overwrite of FormControlMixins value getter and setter method.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `labelPosition` {'left' | 'right' | 'top' | 'bottom'} - Specifies the label position of the checkbox or the toggle\n\n * `_checked` {`boolean`} - \n\n * `checked` {boolean} - Reflects the state of the element.\nTrue if checkbox or toggle is checked. Change this to switch the state programmatically.\n\n * `disabled` {boolean} - Disables the input.\n\n * `_input` {`HTMLInputElement`} - \n\n * `styles` {`CSSResult[]`} - \n\n * `inputRole` {`\"checkbox\" | \"switch\"`} - \n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - intentional overwrite of FormControlMixins value getter and setter method.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - \n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
634
634
|
"attributes": [
|
|
635
635
|
{
|
|
636
636
|
"name": "label-position",
|
|
@@ -703,7 +703,7 @@
|
|
|
703
703
|
},
|
|
704
704
|
{
|
|
705
705
|
"name": "uui-color-area",
|
|
706
|
-
"description": "Attributes:\n\n * `hue` {`number`} - The current hue.\n\n * `saturation` {`number`} - The current saturation.\n\n * `lightness` {`number`} - The current lightness.\n\n * `brightness` {`number`} - The current brightness.\n\n * `alpha` {`number`} - The current alpha.\n\n * `value` {`string`} - The current value.\n\n * `disabled` {`boolean`} - Disables the color area.\n\nProperties:\n\n * `
|
|
706
|
+
"description": "Attributes:\n\n * `hue` {`number`} - The current hue.\n\n * `saturation` {`number`} - The current saturation.\n\n * `lightness` {`number`} - The current lightness.\n\n * `brightness` {`number`} - The current brightness.\n\n * `alpha` {`number`} - The current alpha.\n\n * `value` {`string`} - The current value.\n\n * `disabled` {`boolean`} - Disables the color area.\n\nProperties:\n\n * `isDraggingGridHandle` {`boolean`} - \n\n * `hue` {`number`} - The current hue.\n\n * `saturation` {`number`} - The current saturation.\n\n * `lightness` {`number`} - The current lightness.\n\n * `brightness` {`number`} - The current brightness.\n\n * `alpha` {`number`} - The current alpha.\n\n * `_value` {`string`} - \n\n * `value` {`string`} - The current value.\n\n * `disabled` {`boolean`} - Disables the color area.\n\n * `styles` {`CSSResult[]`} - ",
|
|
707
707
|
"attributes": [
|
|
708
708
|
{
|
|
709
709
|
"name": "hue",
|
|
@@ -738,7 +738,7 @@
|
|
|
738
738
|
},
|
|
739
739
|
{
|
|
740
740
|
"name": "uui-color-picker",
|
|
741
|
-
"description": "Events:\n\n * `change` - Fired when the color changes\n\nAttributes:\n\n * `value` {string} - The current color.\n\n * `format` {UUIColorPickerFormat} - The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and
|
|
741
|
+
"description": "Events:\n\n * `change` - Fired when the color changes\n\nAttributes:\n\n * `value` {string} - The current color.\n\n * `format` {UUIColorPickerFormat} - The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA\nrespectively. The color picker will always accept user input in any format (including CSS color names) and convert\nit to the desired format.\n\n * `name` {string} - The input's name attribute.\n\n * `size` {UUIColorPickerSize} - Determines the size of the color picker's trigger. This has no effect on inline color pickers.\n\n * `no-format-toggle` {boolean} - Removes the format toggle.\n\n * `inline` {boolean} - Renders the color picker inline rather than inside a dropdown.\n\n * `disabled` {boolean} - Disables the color picker.\n\n * `opacity` {boolean} - Whether to show the opacity slider.\n\n * `uppercase` {boolean} - By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `_input` - \n\n * `_previewButton` {`HTMLButtonElement`} - \n\n * `_swatches` - \n\n * `inputValue` {`string`} - \n\n * `hue` {`number`} - \n\n * `saturation` {`number`} - \n\n * `lightness` {`number`} - \n\n * `alpha` {`number`} - \n\n * `_colord` - \n\n * `value` {string} - The current color.\n\n * `format` {UUIColorPickerFormat} - The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA\nrespectively. The color picker will always accept user input in any format (including CSS color names) and convert\nit to the desired format.\n\n * `name` {string} - The input's name attribute.\n\n * `size` {UUIColorPickerSize} - Determines the size of the color picker's trigger. This has no effect on inline color pickers.\n\n * `noFormatToggle` {boolean} - Removes the format toggle.\n\n * `inline` {boolean} - Renders the color picker inline rather than inside a dropdown.\n\n * `disabled` {boolean} - Disables the color picker.\n\n * `opacity` {boolean} - Whether to show the opacity slider.\n\n * `uppercase` {boolean} - By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.\n\n * `swatches` {`string[]`} - An array of predefined color swatches to display. Can include any format the color picker can parse, including\nHEX(A), RGB(A), HSL(A), HSV(A), and CSS color names.\n\n * `styles` {`CSSResult[]`} - \n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
742
742
|
"attributes": [
|
|
743
743
|
{
|
|
744
744
|
"name": "value",
|
|
@@ -746,7 +746,7 @@
|
|
|
746
746
|
},
|
|
747
747
|
{
|
|
748
748
|
"name": "format",
|
|
749
|
-
"description": "`format` {UUIColorPickerFormat} - The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and
|
|
749
|
+
"description": "`format` {UUIColorPickerFormat} - The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA\nrespectively. The color picker will always accept user input in any format (including CSS color names) and convert\nit to the desired format.\n\nProperty: format\n\nDefault: 'hex'",
|
|
750
750
|
"values": [
|
|
751
751
|
{
|
|
752
752
|
"name": "hex"
|
|
@@ -756,6 +756,9 @@
|
|
|
756
756
|
},
|
|
757
757
|
{
|
|
758
758
|
"name": "hsl"
|
|
759
|
+
},
|
|
760
|
+
{
|
|
761
|
+
"name": "hsv"
|
|
759
762
|
}
|
|
760
763
|
]
|
|
761
764
|
},
|
|
@@ -815,7 +818,7 @@
|
|
|
815
818
|
},
|
|
816
819
|
{
|
|
817
820
|
"name": "uui-color-slider",
|
|
818
|
-
"description": "Events:\n\n * `change` - Fires when the value of the slider changes.\n\nAttributes:\n\n * `type` {UUIColorSliderType} - The type of the slider.\n\n * `color` {string} - The color value.\n\n * `min` {number} - This is a minimum value of the slider.\n\n * `max` {number} - This is a maximum value of the slider.\n\n * `precision` {number} - The minimum increment value allowed by the slider.\n\n * `vertical` {boolean} - Draws the slider in a vertical orientation.\n\n * `value` {number} - The current value of the slider.\n\n * `disabled` {boolean} - Disables the color slider.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `
|
|
821
|
+
"description": "Events:\n\n * `change` - Fires when the value of the slider changes.\n\nAttributes:\n\n * `type` {UUIColorSliderType} - The type of the slider.\n\n * `color` {string} - The color value.\n\n * `min` {number} - This is a minimum value of the slider.\n\n * `max` {number} - This is a maximum value of the slider.\n\n * `precision` {number} - The minimum increment value allowed by the slider.\n\n * `vertical` {boolean} - Draws the slider in a vertical orientation.\n\n * `value` {number} - The current value of the slider.\n\n * `disabled` {boolean} - Disables the color slider.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `type` {UUIColorSliderType} - The type of the slider.\n\n * `color` {string} - The color value.\n\n * `min` {number} - This is a minimum value of the slider.\n\n * `max` {number} - This is a maximum value of the slider.\n\n * `precision` {number} - The minimum increment value allowed by the slider.\n\n * `vertical` {boolean} - Draws the slider in a vertical orientation.\n\n * `value` {number} - The current value of the slider.\n\n * `disabled` {boolean} - Disables the color slider.\n\n * `container` {`HTMLElement`} - \n\n * `handle` {`HTMLElement`} - \n\n * `ccsPropCurrentValue` {`number`} - \n\n * `styles` {`CSSResult[]`} - \n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
819
822
|
"attributes": [
|
|
820
823
|
{
|
|
821
824
|
"name": "type",
|
|
@@ -871,7 +874,7 @@
|
|
|
871
874
|
},
|
|
872
875
|
{
|
|
873
876
|
"name": "uui-color-swatch",
|
|
874
|
-
"description": "Color swatch, can have label and be selectable. Depends on colord library and exposes it's utility functions under color property.\n\nEvents:\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * `label` {} - Default slot for the label.\n\nAttributes:\n\n * `value` {`string`} - Value of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.\n\n * `disabled` {`boolean`} - Determines if the options is disabled. If true the option can't be selected\n\n * `show-label` {`boolean`} - When true shows element label below the color checkbox\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\nProperties:\n\n * `
|
|
877
|
+
"description": "Color swatch, can have label and be selectable. Depends on colord library and exposes it's utility functions under color property.\n\nEvents:\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * `label` {} - Default slot for the label.\n\nAttributes:\n\n * `value` {`string`} - Value of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.\n\n * `disabled` {`boolean`} - Determines if the options is disabled. If true the option can't be selected\n\n * `show-label` {`boolean`} - When true shows element label below the color checkbox\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\nProperties:\n\n * `_value` {`string | undefined`} - \n\n * `value` {`string`} - Value of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.\n\n * `disabled` {`boolean`} - Determines if the options is disabled. If true the option can't be selected\n\n * `showLabel` {`boolean`} - When true shows element label below the color checkbox\n\n * `color` - Colord object instance based on the value provided to the element. If the value is not a valid color, it falls back to black (like Amy Winehouse). For more information about Colord, see [Colord](https://omgovich.github.io/colord/)\n\n * `_color` - \n\n * `isLight` {`boolean`} - Returns true if the color brightness is >= 0.5\n\n * `styles` {`CSSResult[]`} - \n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - \n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - \n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.",
|
|
875
878
|
"attributes": [
|
|
876
879
|
{
|
|
877
880
|
"name": "value",
|
|
@@ -918,12 +921,17 @@
|
|
|
918
921
|
},
|
|
919
922
|
{
|
|
920
923
|
"name": "uui-color-swatches",
|
|
921
|
-
"description": "Put uui-stacked-color-swatch elements inside this element to create a color swatch selector.\n\nEvents:\n\n * `change` - Fires when a color swatch is selected.\n\nSlots:\n\n * ` ` {} - Default slot for content.\n\nAttributes:\n\n * `value` {`string`} - Value of selected option.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `
|
|
924
|
+
"description": "Put uui-stacked-color-swatch elements inside this element to create a color swatch selector.\n\nEvents:\n\n * `change` - Fires when a color swatch is selected.\n\nSlots:\n\n * ` ` {} - Default slot for content.\n\nAttributes:\n\n * `value` {`string`} - Value of selected option.\n\n * `disabled` {boolean} - Disables the color swatches.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `value` {`string`} - Value of selected option.\n\n * `disabled` {boolean} - Disables the color swatches.\n\n * `swatches` {`UUIColorSwatchElement[]`} - \n\n * `__activeElement` - \n\n * `_activeElement` - \n\n * `_selectedElement` - \n\n * `_onSelected` - \n\n * `_onDeselected` - \n\n * `styles` {`CSSResult[]`} - \n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
922
925
|
"attributes": [
|
|
923
926
|
{
|
|
924
927
|
"name": "value",
|
|
925
928
|
"description": "`value` {`string`} - Value of selected option.\n\nProperty: value\n\nDefault: "
|
|
926
929
|
},
|
|
930
|
+
{
|
|
931
|
+
"name": "disabled",
|
|
932
|
+
"description": "`disabled` {boolean} - Disables the color swatches.\n\nProperty: disabled\n\nDefault: false",
|
|
933
|
+
"valueSet": "v"
|
|
934
|
+
},
|
|
927
935
|
{
|
|
928
936
|
"name": "label",
|
|
929
937
|
"description": "`label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperty: label"
|
|
@@ -936,7 +944,7 @@
|
|
|
936
944
|
},
|
|
937
945
|
{
|
|
938
946
|
"name": "uui-combobox-list-option",
|
|
939
|
-
"description": "Events:\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - For option content\n\nAttributes:\n\n * `value` { string } - Value of the option.\n\n * `display-value` { string } - A readable value.\n\n * `disabled` { boolean } - Determines if the options is disabled. If true the option can't be selected\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\nProperties:\n\n * `
|
|
947
|
+
"description": "Events:\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - For option content\n\nAttributes:\n\n * `value` { string } - Value of the option.\n\n * `display-value` { string } - A readable value.\n\n * `disabled` { boolean } - Determines if the options is disabled. If true the option can't be selected\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\nProperties:\n\n * `_value` {`string | undefined`} - \n\n * `_disabled` {`boolean`} - \n\n * `_displayValue` {`string`} - \n\n * `value` { string } - Value of the option.\n\n * `displayValue` { string } - A readable value.\n\n * `disabled` { boolean } - Determines if the options is disabled. If true the option can't be selected\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - \n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.",
|
|
940
948
|
"attributes": [
|
|
941
949
|
{
|
|
942
950
|
"name": "value",
|
|
@@ -978,7 +986,7 @@
|
|
|
978
986
|
},
|
|
979
987
|
{
|
|
980
988
|
"name": "uui-combobox-list",
|
|
981
|
-
"description": "Events:\n\n * `change` - fires when selection is changed\n\nSlots:\n\n * ` ` {} - for uui-combobox-list-options\n\nAttributes:\n\n * `value` { FormDataEntryValue | FormData } - Value of selected option.\n\n * `displayValue` { string } - A readable value to display to show the selected value.\n\n * `for` { HTMLElement } - provide another element of which keyboard navigation\n\nProperties:\n\n * `
|
|
989
|
+
"description": "Events:\n\n * `change` - fires when selection is changed\n\nSlots:\n\n * ` ` {} - for uui-combobox-list-options\n\nAttributes:\n\n * `value` { FormDataEntryValue | FormData } - Value of selected option.\n\n * `displayValue` { string } - A readable value to display to show the selected value.\n\n * `for` { HTMLElement } - provide another element of which keyboard navigation\n\nProperties:\n\n * `value` { FormDataEntryValue | FormData } - Value of selected option.\n\n * `displayValue` { string } - A readable value to display to show the selected value.\n\n * `_for` {`HTMLElement | undefined`} - \n\n * `for` { HTMLElement } - provide another element of which keyboard navigation\n\n * `_options` {`UUIComboboxListOptionElement[]`} - \n\n * `_activeOptions` {`UUIComboboxListOptionElement[]`} - \n\n * `_value` {`string | File | FormData`} - \n\n * `__activeElement` - \n\n * `_activeElement` - \n\n * `_selectedElement` - \n\n * `_onSlotChange` - \n\n * `_onSelected` - \n\n * `_onDeselected` - \n\n * `_moveIndex` - \n\n * `_onKeyDown` - \n\n * `styles` {`CSSResult[]`} - ",
|
|
982
990
|
"attributes": [
|
|
983
991
|
{
|
|
984
992
|
"name": "value",
|
|
@@ -1002,7 +1010,7 @@
|
|
|
1002
1010
|
},
|
|
1003
1011
|
{
|
|
1004
1012
|
"name": "uui-combobox",
|
|
1005
|
-
"description": "Events:\n\n * `input` - fires when search input is changed\n\n * `change` - fires when selection is changed\n\nSlots:\n\n * ` ` {} - for uui-combobox-list-options\n\n * `input-prepend` {} - prepend for the uui-input\n\n * `input-append` {} - append for the uui-input\n\nAttributes:\n\n * `search` { string } - The search input.\n\n * `open` { boolean } - Specifies if the popover should be open.\n\n * `closeLabel` { string } - Specifies the button label for the close button in mobile mode\n\n * `disabled` {boolean} - Disables the uui-combobox.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `
|
|
1013
|
+
"description": "Events:\n\n * `input` - fires when search input is changed\n\n * `change` - fires when selection is changed\n\nSlots:\n\n * ` ` {} - for uui-combobox-list-options\n\n * `input-prepend` {} - prepend for the uui-input\n\n * `input-append` {} - append for the uui-input\n\nAttributes:\n\n * `search` { string } - The search input.\n\n * `open` { boolean } - Specifies if the popover should be open.\n\n * `closeLabel` { string } - Specifies the button label for the close button in mobile mode\n\n * `disabled` {boolean} - Disables the uui-combobox.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `search` { string } - The search input.\n\n * `open` { boolean } - Specifies if the popover should be open.\n\n * `closeLabel` { string } - Specifies the button label for the close button in mobile mode\n\n * `disabled` {boolean} - Disables the uui-combobox.\n\n * `_input` {`HTMLInputElement`} - \n\n * `_comboboxListElements` {`UUIComboboxListElement[] | undefined`} - \n\n * `_comboboxList` - \n\n * `phoneMediaQuery` {`MediaQueryList`} - \n\n * `_displayValue` {`string`} - \n\n * `_search` {`string`} - \n\n * `_isPhone` {`boolean`} - \n\n * `_onPhoneChange` - \n\n * `_onMouseDown` - \n\n * `_onBlur` - \n\n * `_onInput` - \n\n * `_onSlotChange` - \n\n * `_onChange` - \n\n * `_open` - \n\n * `_onClose` - \n\n * `_onKeyDown` - \n\n * `_onClear` - \n\n * `_renderInput` - \n\n * `_renderCaret` - \n\n * `_renderClearButton` - \n\n * `_renderDropdown` - \n\n * `styles` {`CSSResult[]`} - \n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events.\nIt may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\nRead more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - ",
|
|
1006
1014
|
"attributes": [
|
|
1007
1015
|
{
|
|
1008
1016
|
"name": "search",
|
|
@@ -1066,7 +1074,7 @@
|
|
|
1066
1074
|
},
|
|
1067
1075
|
{
|
|
1068
1076
|
"name": "uui-dialog-layout",
|
|
1069
|
-
"description": "Slots:\n\n * ` ` {} - Use this for the text content\n\n * `headline` {} - Use this for slotted headline\n\n * `actions` {} - Use this for actions\n\nAttributes:\n\n * `headline` {`string | null`} - Headline for this notification, can also be set via the 'headline' slot.\n\nProperties:\n\n * `
|
|
1077
|
+
"description": "Slots:\n\n * ` ` {} - Use this for the text content\n\n * `headline` {} - Use this for slotted headline\n\n * `actions` {} - Use this for actions\n\nAttributes:\n\n * `headline` {`string | null`} - Headline for this notification, can also be set via the 'headline' slot.\n\nProperties:\n\n * `headline` {`string | null`} - Headline for this notification, can also be set via the 'headline' slot.\n\n * `_headlineSlotHasContent` {`boolean`} - \n\n * `_headlineSlotChanged` - \n\n * `styles` {`CSSResult[]`} - ",
|
|
1070
1078
|
"attributes": [
|
|
1071
1079
|
{
|
|
1072
1080
|
"name": "headline",
|
|
@@ -1082,7 +1090,7 @@
|
|
|
1082
1090
|
},
|
|
1083
1091
|
{
|
|
1084
1092
|
"name": "uui-file-dropzone",
|
|
1085
|
-
"description": "Events:\n\n * `change` - fires when the a file has been selected.\n\nSlots:\n\n * ` ` {} - For the content of the dropzone\n\nAttributes:\n\n * `accept` {string} - Comma-separated list of accepted mime types or file extensions (denoted with a `.`).\nIf this is left empty, it will allow all types.\n\n * `multiple` {boolean} - Allows for multiple files to be selected.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `
|
|
1093
|
+
"description": "Events:\n\n * `change` - fires when the a file has been selected.\n\nSlots:\n\n * ` ` {} - For the content of the dropzone\n\nAttributes:\n\n * `accept` {string} - Comma-separated list of accepted mime types or file extensions (denoted with a `.`).\nIf this is left empty, it will allow all types.\n\n * `multiple` {boolean} - Allows for multiple files to be selected.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `_input` {`HTMLInputElement`} - \n\n * `_dropzone` {`HTMLElement`} - \n\n * `_acceptedFileExtensions` {`string[]`} - \n\n * `_acceptedMimeTypes` {`string[]`} - \n\n * `accept` {string} - Comma-separated list of accepted mime types or file extensions (denoted with a `.`).\nIf this is left empty, it will allow all types.\n\n * `multiple` {boolean} - Allows for multiple files to be selected.\n\n * `styles` {`CSSResult[]`} - \n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
1086
1094
|
"attributes": [
|
|
1087
1095
|
{
|
|
1088
1096
|
"name": "accept",
|
|
@@ -1105,7 +1113,7 @@
|
|
|
1105
1113
|
},
|
|
1106
1114
|
{
|
|
1107
1115
|
"name": "uui-file-preview",
|
|
1108
|
-
"description": "Slots:\n\n * `actions` {} - To display one or more actions that can be executed on the file.\n\nAttributes:\n\n * `_name` {string} - Name of the file.\n\n * `_url` {string} - Link to the source of the file. Applied on the file name.\n\n * `_extension` {string} - File extension. Will be shown in the square on the file symbol. If a thumbnail is provided, then that will show instead.\n\n * `_src` {string} - Source of a thumbnail to be displayed as the file symbol. Often used for images and video thumbnails.\n\n * `_size` {number} - Size of the file in bytes. It will be formatted to a more readable format.\n\n * `_isDirectory` {boolean} - Dertermines if a folder symbol should be used instead of file symbol.\n\nProperties:\n\n * `
|
|
1116
|
+
"description": "Slots:\n\n * `actions` {} - To display one or more actions that can be executed on the file.\n\nAttributes:\n\n * `_name` {string} - Name of the file.\n\n * `_url` {string} - Link to the source of the file. Applied on the file name.\n\n * `_extension` {string} - File extension. Will be shown in the square on the file symbol. If a thumbnail is provided, then that will show instead.\n\n * `_src` {string} - Source of a thumbnail to be displayed as the file symbol. Often used for images and video thumbnails.\n\n * `_size` {number} - Size of the file in bytes. It will be formatted to a more readable format.\n\n * `_isDirectory` {boolean} - Dertermines if a folder symbol should be used instead of file symbol.\n\nProperties:\n\n * `_name` {string} - Name of the file.\n\n * `_url` {string} - Link to the source of the file. Applied on the file name.\n\n * `_extension` {string} - File extension. Will be shown in the square on the file symbol. If a thumbnail is provided, then that will show instead.\n\n * `_src` {string} - Source of a thumbnail to be displayed as the file symbol. Often used for images and video thumbnails.\n\n * `_size` {number} - Size of the file in bytes. It will be formatted to a more readable format.\n\n * `_isDirectory` {boolean} - Dertermines if a folder symbol should be used instead of file symbol.\n\n * `_file` {`File | undefined`} - \n\n * `_isImage` {`boolean | undefined`} - \n\n * `file` {`File | undefined`} - \n\n * `styles` {`CSSResult[]`} - ",
|
|
1109
1117
|
"attributes": [
|
|
1110
1118
|
{
|
|
1111
1119
|
"name": "_name",
|
|
@@ -1136,7 +1144,7 @@
|
|
|
1136
1144
|
},
|
|
1137
1145
|
{
|
|
1138
1146
|
"name": "uui-form-layout-item",
|
|
1139
|
-
"description": "Slots:\n\n * ` ` {} - for button contents\n\n * `message` {} - for extras in the messages container\n\n * `description` {} - for extras in the description container\n\n * `label` {} - for label contents\n\nAttributes:\n\n * `description` {`string | null`} - \n\nProperties:\n\n * `
|
|
1147
|
+
"description": "Slots:\n\n * ` ` {} - for button contents\n\n * `message` {} - for extras in the messages container\n\n * `description` {} - for extras in the description container\n\n * `label` {} - for label contents\n\nAttributes:\n\n * `description` {`string | null`} - \n\nProperties:\n\n * `description` {`string | null`} - \n\n * `_labelSlotHasContent` {`boolean`} - \n\n * `_labelSlotChanged` - \n\n * `_descriptionSlotHasContent` {`boolean`} - \n\n * `_descriptionSlotChanged` - \n\n * `styles` {`CSSResult[]`} - ",
|
|
1140
1148
|
"attributes": [
|
|
1141
1149
|
{
|
|
1142
1150
|
"name": "description",
|
|
@@ -1147,7 +1155,7 @@
|
|
|
1147
1155
|
},
|
|
1148
1156
|
{
|
|
1149
1157
|
"name": "uui-form-validation-message",
|
|
1150
|
-
"description": "Slots:\n\n * ` ` {} - for button contents\n\n * `message` {} - for extras in the messages container\n\nAttributes:\n\n * `for` {string} - Set the element containing Form Controls of interest.\n\nProperties:\n\n * `
|
|
1158
|
+
"description": "Slots:\n\n * ` ` {} - for button contents\n\n * `message` {} - for extras in the messages container\n\nAttributes:\n\n * `for` {string} - Set the element containing Form Controls of interest.\n\nProperties:\n\n * `for` {string} - Set the element containing Form Controls of interest.\n\n * `_for` {`HTMLElement | null`} - \n\n * `_messages` {`Map<FormControlMixinInterface, string>`} - \n\n * `_onControlInvalid` - \n\n * `_onControlValid` - \n\n * `styles` {`CSSResult[]`} - ",
|
|
1151
1159
|
"attributes": [
|
|
1152
1160
|
{
|
|
1153
1161
|
"name": "for",
|
|
@@ -1173,8 +1181,12 @@
|
|
|
1173
1181
|
},
|
|
1174
1182
|
{
|
|
1175
1183
|
"name": "uui-icon",
|
|
1176
|
-
"description": "Events:\n\n * `icon_request` - fires when the name property is defined to retrieve the icon source.\n\nAttributes:\n\n * `name` {string} - Icon name is used to retrieve the icon from a parent Icon Registry.\nIf no Icon Registry responds to the given name, the fallback svg will be used.\n\n * `svg` {string} - Define the raw SVG string to be displayed by this component.\n\n * `fallback` {string} - Fallback SVG is a raw SVG string, this is used then 'name' hasn't been accepted by any parent Icon Registry.\n\nProperties:\n\n * `
|
|
1184
|
+
"description": "Events:\n\n * `icon_request` - fires when the name property is defined to retrieve the icon source.\n\nAttributes:\n\n * `label` {string} - An alternate description to use for assistive devices.\nIf omitted, the icon will be considered presentational and ignored by assistive devices.\n\n * `name` {string} - Icon name is used to retrieve the icon from a parent Icon Registry.\nIf no Icon Registry responds to the given name, the fallback svg will be used.\n\n * `svg` {string} - Define the raw SVG string to be displayed by this component.\n\n * `fallback` {string} - Fallback SVG is a raw SVG string, this is used then 'name' hasn't been accepted by any parent Icon Registry.\n\nProperties:\n\n * `_name` {`string | null`} - \n\n * `_retrievedNameIcon` {`boolean`} - \n\n * `_nameSvg` {`string | null`} - \n\n * `label` {string} - An alternate description to use for assistive devices.\nIf omitted, the icon will be considered presentational and ignored by assistive devices.\n\n * `name` {string} - Icon name is used to retrieve the icon from a parent Icon Registry.\nIf no Icon Registry responds to the given name, the fallback svg will be used.\n\n * `svg` {string} - Define the raw SVG string to be displayed by this component.\n\n * `fallback` {string} - Fallback SVG is a raw SVG string, this is used then 'name' hasn't been accepted by any parent Icon Registry.\n\n * `_useFallback` {`boolean`} - \n\n * `styles` {`CSSResult[]`} - ",
|
|
1177
1185
|
"attributes": [
|
|
1186
|
+
{
|
|
1187
|
+
"name": "label",
|
|
1188
|
+
"description": "`label` {string} - An alternate description to use for assistive devices.\nIf omitted, the icon will be considered presentational and ignored by assistive devices.\n\nProperty: label"
|
|
1189
|
+
},
|
|
1178
1190
|
{
|
|
1179
1191
|
"name": "name",
|
|
1180
1192
|
"description": "`name` {string} - Icon name is used to retrieve the icon from a parent Icon Registry.\nIf no Icon Registry responds to the given name, the fallback svg will be used.\n\nProperty: name\n\nDefault: null",
|
|
@@ -1198,7 +1210,7 @@
|
|
|
1198
1210
|
},
|
|
1199
1211
|
{
|
|
1200
1212
|
"name": "uui-input-file",
|
|
1201
|
-
"description": "Attributes:\n\n * `accept` {string} - Accepted filetypes. Will allow all types if empty.\n\n * `multiple` {boolean} - Allows for multiple files to be selected.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `
|
|
1213
|
+
"description": "Attributes:\n\n * `accept` {string} - Accepted filetypes. Will allow all types if empty.\n\n * `multiple` {boolean} - Allows for multiple files to be selected.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `_dropzone` - \n\n * `_dropZone` - \n\n * `accept` {string} - Accepted filetypes. Will allow all types if empty.\n\n * `multiple` {boolean} - Allows for multiple files to be selected.\n\n * `_files` {`File[]`} - \n\n * `_updateFileWrappers` - \n\n * `styles` {`CSSResult[]`} - \n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events.\nIt may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\nRead more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - ",
|
|
1202
1214
|
"attributes": [
|
|
1203
1215
|
{
|
|
1204
1216
|
"name": "accept",
|
|
@@ -1245,7 +1257,7 @@
|
|
|
1245
1257
|
},
|
|
1246
1258
|
{
|
|
1247
1259
|
"name": "uui-input-lock",
|
|
1248
|
-
"description": "Events:\n\n * `change` {} - on change\n\n * `input` {} - on input\n\n * `keyup` {} - on keyup\n\nSlots:\n\n * `prepend` {} - for components to render to the left of the input.\n\n * `append` {} - for components to render to the right of the input.\n\nAttributes:\n\n * `locked` {boolean} - Determine the inputs locked state.\n\n * `min` {number | string} - Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.\n\n * `minlength` {number} - Sets the minimum length of the value of the input.\n\n * `minlength-message` {`string`} - Minlength validation message.\n\n * `max` {number | string} - Sets the max value of the input.\nExamples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.\n\n * `maxlength` {number} - Sets the maximum length of the value of the input.\n\n * `maxlength-message` {`string`} - Maxlength validation message.\n\n * `step` {number} - Specifies the interval between legal numbers of the input\n\n * `disabled` {boolean} - Disables the input.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `placeholder` {string} - Defines the input placeholder.\n\n * `autocomplete` {string} - Defines the input autocomplete.\n\n * `auto-width` {boolean} - Sets the input width to fit the value or placeholder if empty\n\n * `type` {'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'} - This property specifies the type of input that will be rendered.\n\n * `pattern` {string} - Validates the input based on the Regex pattern\n\n * `inputMode` {string} - The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.\n\n * `spellcheck` {boolean} - get/set native spellcheck attribute\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `locked` {boolean} - Determine the inputs locked state.\n\n * `
|
|
1260
|
+
"description": "Events:\n\n * `change` {} - on change\n\n * `input` {} - on input\n\n * `keyup` {} - on keyup\n\nSlots:\n\n * `prepend` {} - for components to render to the left of the input.\n\n * `append` {} - for components to render to the right of the input.\n\nAttributes:\n\n * `locked` {boolean} - Determine the inputs locked state.\n\n * `min` {number | string} - Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.\n\n * `minlength` {number} - Sets the minimum length of the value of the input.\n\n * `minlength-message` {`string`} - Minlength validation message.\n\n * `max` {number | string} - Sets the max value of the input.\nExamples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.\n\n * `maxlength` {number} - Sets the maximum length of the value of the input.\n\n * `maxlength-message` {`string`} - Maxlength validation message.\n\n * `step` {number} - Specifies the interval between legal numbers of the input\n\n * `disabled` {boolean} - Disables the input.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `placeholder` {string} - Defines the input placeholder.\n\n * `autocomplete` {string} - Defines the input autocomplete.\n\n * `auto-width` {boolean} - Sets the input width to fit the value or placeholder if empty\n\n * `type` {'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'} - This property specifies the type of input that will be rendered.\n\n * `pattern` {string} - Validates the input based on the Regex pattern\n\n * `inputMode` {string} - The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.\n\n * `spellcheck` {boolean} - get/set native spellcheck attribute\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `locked` {boolean} - Determine the inputs locked state.\n\n * `min` {number | string} - Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.\n\n * `minlength` {number} - Sets the minimum length of the value of the input.\n\n * `minlengthMessage` {`string`} - Minlength validation message.\n\n * `max` {number | string} - Sets the max value of the input.\nExamples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.\n\n * `maxlength` {number} - Sets the maximum length of the value of the input.\n\n * `maxlengthMessage` {`string`} - Maxlength validation message.\n\n * `step` {number} - Specifies the interval between legal numbers of the input\n\n * `disabled` {boolean} - Disables the input.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `placeholder` {string} - Defines the input placeholder.\n\n * `autocomplete` {string} - Defines the input autocomplete.\n\n * `autoWidth` {boolean} - Sets the input width to fit the value or placeholder if empty\n\n * `type` {'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'} - This property specifies the type of input that will be rendered.\n\n * `pattern` {string} - Validates the input based on the Regex pattern\n\n * `inputMode` {string} - The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.\n\n * `_input` {`HTMLInputElement`} - \n\n * `_type` {`InputType`} - \n\n * `styles` {`CSSResult[]`} - \n\n * `spellcheck` {boolean} - get/set native spellcheck attribute\n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - \n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
1249
1261
|
"attributes": [
|
|
1250
1262
|
{
|
|
1251
1263
|
"name": "locked",
|
|
@@ -1417,7 +1429,7 @@
|
|
|
1417
1429
|
},
|
|
1418
1430
|
{
|
|
1419
1431
|
"name": "uui-input-password",
|
|
1420
|
-
"description": "Events:\n\n * `change` {} - on change\n\n * `input` {} - on input\n\n * `keyup` {} - on keyup\n\nSlots:\n\n * `prepend` {} - for components to render to the left of the input.\n\n * `append` {} - for components to render to the right of the input.\n\nAttributes:\n\n * `min` {number | string} - Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.\n\n * `minlength` {number} - Sets the minimum length of the value of the input.\n\n * `minlength-message` {`string`} - Minlength validation message.\n\n * `max` {number | string} - Sets the max value of the input.\nExamples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.\n\n * `maxlength` {number} - Sets the maximum length of the value of the input.\n\n * `maxlength-message` {`string`} - Maxlength validation message.\n\n * `step` {number} - Specifies the interval between legal numbers of the input\n\n * `disabled` {boolean} - Disables the input.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `placeholder` {string} - Defines the input placeholder.\n\n * `autocomplete` {string} - Defines the input autocomplete.\n\n * `auto-width` {boolean} - Sets the input width to fit the value or placeholder if empty\n\n * `type` {'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'} - This property specifies the type of input that will be rendered.\n\n * `pattern` {string} - Validates the input based on the Regex pattern\n\n * `inputMode` {string} - The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.\n\n * `spellcheck` {boolean} - get/set native spellcheck attribute\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `passwordType` {`InputType`} - \n\n * `
|
|
1432
|
+
"description": "Events:\n\n * `change` {} - on change\n\n * `input` {} - on input\n\n * `keyup` {} - on keyup\n\nSlots:\n\n * `prepend` {} - for components to render to the left of the input.\n\n * `append` {} - for components to render to the right of the input.\n\nAttributes:\n\n * `min` {number | string} - Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.\n\n * `minlength` {number} - Sets the minimum length of the value of the input.\n\n * `minlength-message` {`string`} - Minlength validation message.\n\n * `max` {number | string} - Sets the max value of the input.\nExamples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.\n\n * `maxlength` {number} - Sets the maximum length of the value of the input.\n\n * `maxlength-message` {`string`} - Maxlength validation message.\n\n * `step` {number} - Specifies the interval between legal numbers of the input\n\n * `disabled` {boolean} - Disables the input.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `placeholder` {string} - Defines the input placeholder.\n\n * `autocomplete` {string} - Defines the input autocomplete.\n\n * `auto-width` {boolean} - Sets the input width to fit the value or placeholder if empty\n\n * `type` {'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'} - This property specifies the type of input that will be rendered.\n\n * `pattern` {string} - Validates the input based on the Regex pattern\n\n * `inputMode` {string} - The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.\n\n * `spellcheck` {boolean} - get/set native spellcheck attribute\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `passwordType` {`InputType`} - \n\n * `min` {number | string} - Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.\n\n * `minlength` {number} - Sets the minimum length of the value of the input.\n\n * `minlengthMessage` {`string`} - Minlength validation message.\n\n * `max` {number | string} - Sets the max value of the input.\nExamples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.\n\n * `maxlength` {number} - Sets the maximum length of the value of the input.\n\n * `maxlengthMessage` {`string`} - Maxlength validation message.\n\n * `step` {number} - Specifies the interval between legal numbers of the input\n\n * `disabled` {boolean} - Disables the input.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `placeholder` {string} - Defines the input placeholder.\n\n * `autocomplete` {string} - Defines the input autocomplete.\n\n * `autoWidth` {boolean} - Sets the input width to fit the value or placeholder if empty\n\n * `type` {'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'} - This property specifies the type of input that will be rendered.\n\n * `pattern` {string} - Validates the input based on the Regex pattern\n\n * `inputMode` {string} - The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.\n\n * `_input` {`HTMLInputElement`} - \n\n * `_type` {`InputType`} - \n\n * `styles` {`CSSResult[]`} - \n\n * `spellcheck` {boolean} - get/set native spellcheck attribute\n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - \n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
1421
1433
|
"attributes": [
|
|
1422
1434
|
{
|
|
1423
1435
|
"name": "min",
|
|
@@ -1584,7 +1596,7 @@
|
|
|
1584
1596
|
},
|
|
1585
1597
|
{
|
|
1586
1598
|
"name": "uui-input",
|
|
1587
|
-
"description": "Custom element wrapping the native input element.This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.\n\nEvents:\n\n * `change` {} - on change\n\n * `input` {} - on input\n\n * `keyup` {} - on keyup\n\nSlots:\n\n * `prepend` {} - for components to render to the left of the input.\n\n * `append` {} - for components to render to the right of the input.\n\nAttributes:\n\n * `min` {number | string} - Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.\n\n * `minlength` {number} - Sets the minimum length of the value of the input.\n\n * `minlength-message` {`string`} - Minlength validation message.\n\n * `max` {number | string} - Sets the max value of the input.\nExamples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.\n\n * `maxlength` {number} - Sets the maximum length of the value of the input.\n\n * `maxlength-message` {`string`} - Maxlength validation message.\n\n * `step` {number} - Specifies the interval between legal numbers of the input\n\n * `disabled` {boolean} - Disables the input.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `placeholder` {string} - Defines the input placeholder.\n\n * `autocomplete` {string} - Defines the input autocomplete.\n\n * `auto-width` {boolean} - Sets the input width to fit the value or placeholder if empty\n\n * `type` {'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'} - This property specifies the type of input that will be rendered.\n\n * `pattern` {string} - Validates the input based on the Regex pattern\n\n * `inputMode` {string} - The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.\n\n * `spellcheck` {boolean} - get/set native spellcheck attribute\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `
|
|
1599
|
+
"description": "Custom element wrapping the native input element.This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.\n\nEvents:\n\n * `change` {} - on change\n\n * `input` {} - on input\n\n * `keyup` {} - on keyup\n\nSlots:\n\n * `prepend` {} - for components to render to the left of the input.\n\n * `append` {} - for components to render to the right of the input.\n\nAttributes:\n\n * `min` {number | string} - Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.\n\n * `minlength` {number} - Sets the minimum length of the value of the input.\n\n * `minlength-message` {`string`} - Minlength validation message.\n\n * `max` {number | string} - Sets the max value of the input.\nExamples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.\n\n * `maxlength` {number} - Sets the maximum length of the value of the input.\n\n * `maxlength-message` {`string`} - Maxlength validation message.\n\n * `step` {number} - Specifies the interval between legal numbers of the input\n\n * `disabled` {boolean} - Disables the input.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `placeholder` {string} - Defines the input placeholder.\n\n * `autocomplete` {string} - Defines the input autocomplete.\n\n * `auto-width` {boolean} - Sets the input width to fit the value or placeholder if empty\n\n * `type` {'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'} - This property specifies the type of input that will be rendered.\n\n * `pattern` {string} - Validates the input based on the Regex pattern\n\n * `inputMode` {string} - The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.\n\n * `spellcheck` {boolean} - get/set native spellcheck attribute\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `min` {number | string} - Sets the min value of the input.\nExamples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.\n\n * `minlength` {number} - Sets the minimum length of the value of the input.\n\n * `minlengthMessage` {`string`} - Minlength validation message.\n\n * `max` {number | string} - Sets the max value of the input.\nExamples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.\n\n * `maxlength` {number} - Sets the maximum length of the value of the input.\n\n * `maxlengthMessage` {`string`} - Maxlength validation message.\n\n * `step` {number} - Specifies the interval between legal numbers of the input\n\n * `disabled` {boolean} - Disables the input.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `placeholder` {string} - Defines the input placeholder.\n\n * `autocomplete` {string} - Defines the input autocomplete.\n\n * `autoWidth` {boolean} - Sets the input width to fit the value or placeholder if empty\n\n * `type` {'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'} - This property specifies the type of input that will be rendered.\n\n * `pattern` {string} - Validates the input based on the Regex pattern\n\n * `inputMode` {string} - The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.\n\n * `_input` {`HTMLInputElement`} - \n\n * `_type` {`InputType`} - \n\n * `styles` {`CSSResult[]`} - \n\n * `spellcheck` {boolean} - get/set native spellcheck attribute\n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - \n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
1588
1600
|
"attributes": [
|
|
1589
1601
|
{
|
|
1590
1602
|
"name": "min",
|
|
@@ -1761,7 +1773,7 @@
|
|
|
1761
1773
|
},
|
|
1762
1774
|
{
|
|
1763
1775
|
"name": "uui-label",
|
|
1764
|
-
"description": "Label element for Custom Element\n\nSlots:\n\n * ` ` {} - for the label text.\n\nAttributes:\n\n * `disabled` {boolean} - Disables the label.\n\n * `for` {string | HTMLElement} - Define the related element to this label.\n\n * `required` {boolean} - Highlight that the related element is required.\n\nProperties:\n\n * `
|
|
1776
|
+
"description": "Label element for Custom Element\n\nSlots:\n\n * ` ` {} - for the label text.\n\nAttributes:\n\n * `disabled` {boolean} - Disables the label.\n\n * `for` {string | HTMLElement} - Define the related element to this label.\n\n * `required` {boolean} - Highlight that the related element is required.\n\nProperties:\n\n * `disabled` {boolean} - Disables the label.\n\n * `for` {string | HTMLElement} - Define the related element to this label.\n\n * `required` {boolean} - Highlight that the related element is required.\n\n * `styles` {`CSSResult[]`} - ",
|
|
1765
1777
|
"attributes": [
|
|
1766
1778
|
{
|
|
1767
1779
|
"name": "disabled",
|
|
@@ -1782,7 +1794,7 @@
|
|
|
1782
1794
|
},
|
|
1783
1795
|
{
|
|
1784
1796
|
"name": "uui-loader-bar",
|
|
1785
|
-
"description": "Attributes:\n\n * `progress` {number} - Set this to a number between 0 and 100 to reflect the progress of some operation. When the value is left at 0 loader will looped animation\n\n * `animationDuration` {number} - Set this to a number greater then 0 to define the length of loader animation in seconds. Passing 0 or a negative number as a value will set it to 1 second. This is because negative values are illegal in the `animation-duration` css property, and value of 0 just stops the animation.\n\nProperties:\n\n * `
|
|
1797
|
+
"description": "Attributes:\n\n * `progress` {number} - Set this to a number between 0 and 100 to reflect the progress of some operation. When the value is left at 0 loader will looped animation\n\n * `animationDuration` {number} - Set this to a number greater then 0 to define the length of loader animation in seconds. Passing 0 or a negative number as a value will set it to 1 second. This is because negative values are illegal in the `animation-duration` css property, and value of 0 just stops the animation.\n\nProperties:\n\n * `_progress` {`number`} - \n\n * `progress` {number} - Set this to a number between 0 and 100 to reflect the progress of some operation. When the value is left at 0 loader will looped animation\n\n * `_animationDuration` {`number`} - \n\n * `animationDuration` {number} - Set this to a number greater then 0 to define the length of loader animation in seconds. Passing 0 or a negative number as a value will set it to 1 second. This is because negative values are illegal in the `animation-duration` css property, and value of 0 just stops the animation.\n\n * `styles` {`CSSResult[]`} - ",
|
|
1786
1798
|
"attributes": [
|
|
1787
1799
|
{
|
|
1788
1800
|
"name": "progress",
|
|
@@ -1796,7 +1808,7 @@
|
|
|
1796
1808
|
},
|
|
1797
1809
|
{
|
|
1798
1810
|
"name": "uui-loader-circle",
|
|
1799
|
-
"description": "Attributes:\n\n * `progress` {number} - Sets the progress that loader shows\n\n * `show-progress` {boolean} - If true then element displays progress number at bigger sizes\n\nProperties:\n\n * `
|
|
1811
|
+
"description": "Attributes:\n\n * `progress` {number} - Sets the progress that loader shows\n\n * `show-progress` {boolean} - If true then element displays progress number at bigger sizes\n\nProperties:\n\n * `progress` {number} - Sets the progress that loader shows\n\n * `showProgress` {boolean} - If true then element displays progress number at bigger sizes\n\n * `_resizeObserver` - \n\n * `_isLarge` {`boolean`} - \n\n * `styles` {`CSSResult[]`} - ",
|
|
1800
1812
|
"attributes": [
|
|
1801
1813
|
{
|
|
1802
1814
|
"name": "progress",
|
|
@@ -1816,7 +1828,7 @@
|
|
|
1816
1828
|
},
|
|
1817
1829
|
{
|
|
1818
1830
|
"name": "uui-menu-item",
|
|
1819
|
-
"description": "Events:\n\n * `show-children` - fires when the expand icon is clicked to show nested menu items\n\n * `hide-children` - fires when the expend icon is clicked to hide nested menu items\n\n * `click-label` - fires when the label is clicked\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - nested menu items go here\n\n * `icon` {} - icon area\n\n * `actions` {} - actions area\n\n * `label` {} - area to place the label\n\nAttributes:\n\n * `disabled` {boolean} - Disables the menu item, changes the looks of it and prevents it from emitting the click event\n\n * `show-children` {boolean} - Controls if nested items should be shown.\n\n * `has-children` {boolean} - Shows/hides the caret.\n\n * `loading` {boolean} - Shows/hides the loading indicator\n\n * `href` {string} - Set an href, this will turns the label into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `select-mode` {string} - Sets the selection mode.\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `
|
|
1831
|
+
"description": "Events:\n\n * `show-children` - fires when the expand icon is clicked to show nested menu items\n\n * `hide-children` - fires when the expend icon is clicked to hide nested menu items\n\n * `click-label` - fires when the label is clicked\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - nested menu items go here\n\n * `icon` {} - icon area\n\n * `actions` {} - actions area\n\n * `label` {} - area to place the label\n\nAttributes:\n\n * `disabled` {boolean} - Disables the menu item, changes the looks of it and prevents it from emitting the click event\n\n * `show-children` {boolean} - Controls if nested items should be shown.\n\n * `has-children` {boolean} - Shows/hides the caret.\n\n * `loading` {boolean} - Shows/hides the loading indicator\n\n * `href` {string} - Set an href, this will turns the label into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `select-mode` {string} - Sets the selection mode.\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `disabled` {boolean} - Disables the menu item, changes the looks of it and prevents it from emitting the click event\n\n * `showChildren` {boolean} - Controls if nested items should be shown.\n\n * `hasChildren` {boolean} - Shows/hides the caret.\n\n * `loading` {boolean} - Shows/hides the loading indicator\n\n * `href` {string} - Set an href, this will turns the label into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `selectMode` {string} - Sets the selection mode.\n\n * `iconSlotHasContent` {`boolean`} - \n\n * `_labelButtonChanged` - \n\n * `_iconSlotChanged` - \n\n * `_onCaretClicked` - \n\n * `_onLabelClicked` - \n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - \n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
1820
1832
|
"attributes": [
|
|
1821
1833
|
{
|
|
1822
1834
|
"name": "disabled",
|
|
@@ -1926,7 +1938,7 @@
|
|
|
1926
1938
|
},
|
|
1927
1939
|
{
|
|
1928
1940
|
"name": "uui-modal-dialog",
|
|
1929
|
-
"description": "Events:\n\n * `open` {`CustomEvent<unknown>`} - \n\n * `close` {`CustomEvent<unknown>`} - \n\nAttributes:\n\n * `is-open` {`boolean`} - \n\n * `is-closing` {`boolean`} - \n\n * `index` {`number`} - \n\n * `unique-index` {`number`} - \n\n * `
|
|
1941
|
+
"description": "Events:\n\n * `open` {`CustomEvent<unknown>`} - \n\n * `close` {`CustomEvent<unknown>`} - \n\n * `close-end` {`CustomEvent<unknown>`} - \n\nAttributes:\n\n * `is-open` {`boolean`} - \n\n * `is-closing` {`boolean`} - \n\n * `index` {`number`} - \n\n * `unique-index` {`number`} - \n\n * `transition-duration` {`number`} - \n\nProperties:\n\n * `_dialogElement` {`HTMLDialogElement | undefined`} - \n\n * `isOpen` {`boolean`} - \n\n * `isClosing` {`boolean`} - \n\n * `index` {`number`} - \n\n * `uniqueIndex` {`number`} - \n\n * `_transitionDuration` {`number`} - \n\n * `transitionDuration` {`number`} - \n\n * `open` - \n\n * `close` - \n\n * `styles` {`CSSResult[]`} - ",
|
|
1930
1942
|
"attributes": [
|
|
1931
1943
|
{
|
|
1932
1944
|
"name": "is-open",
|
|
@@ -1947,8 +1959,8 @@
|
|
|
1947
1959
|
"description": "`unique-index` {`number`} - \n\nProperty: uniqueIndex\n\nDefault: 0"
|
|
1948
1960
|
},
|
|
1949
1961
|
{
|
|
1950
|
-
"name": "
|
|
1951
|
-
"description": "`
|
|
1962
|
+
"name": "transition-duration",
|
|
1963
|
+
"description": "`transition-duration` {`number`} - \n\nProperty: transitionDuration"
|
|
1952
1964
|
},
|
|
1953
1965
|
{
|
|
1954
1966
|
"name": "onopen",
|
|
@@ -1957,12 +1969,16 @@
|
|
|
1957
1969
|
{
|
|
1958
1970
|
"name": "onclose",
|
|
1959
1971
|
"description": "`close` {`CustomEvent<unknown>`} - "
|
|
1972
|
+
},
|
|
1973
|
+
{
|
|
1974
|
+
"name": "onclose-end",
|
|
1975
|
+
"description": "`close-end` {`CustomEvent<unknown>`} - "
|
|
1960
1976
|
}
|
|
1961
1977
|
]
|
|
1962
1978
|
},
|
|
1963
1979
|
{
|
|
1964
1980
|
"name": "uui-modal-sidebar",
|
|
1965
|
-
"description": "Events:\n\n * `open` {`CustomEvent<unknown>`} - \n\n * `close` {`CustomEvent<unknown>`} - \n\nAttributes:\n\n * `size` {`UUIModalSidebarSize`} - \n\n * `is-open` {`boolean`} - \n\n * `is-closing` {`boolean`} - \n\n * `index` {`number`} - \n\n * `unique-index` {`number`} - \n\n * `
|
|
1981
|
+
"description": "Events:\n\n * `open` {`CustomEvent<unknown>`} - \n\n * `close` {`CustomEvent<unknown>`} - \n\n * `close-end` {`CustomEvent<unknown>`} - \n\nAttributes:\n\n * `size` {`UUIModalSidebarSize`} - \n\n * `is-open` {`boolean`} - \n\n * `is-closing` {`boolean`} - \n\n * `index` {`number`} - \n\n * `unique-index` {`number`} - \n\n * `transition-duration` {`number`} - \n\nProperties:\n\n * `size` {`UUIModalSidebarSize`} - \n\n * `_dialogElement` {`HTMLDialogElement | undefined`} - \n\n * `isOpen` {`boolean`} - \n\n * `isClosing` {`boolean`} - \n\n * `index` {`number`} - \n\n * `uniqueIndex` {`number`} - \n\n * `_transitionDuration` {`number`} - \n\n * `transitionDuration` {`number`} - \n\n * `open` - \n\n * `close` - \n\n * `styles` {`CSSResult[]`} - ",
|
|
1966
1982
|
"attributes": [
|
|
1967
1983
|
{
|
|
1968
1984
|
"name": "size",
|
|
@@ -2001,8 +2017,8 @@
|
|
|
2001
2017
|
"description": "`unique-index` {`number`} - \n\nProperty: uniqueIndex\n\nDefault: 0"
|
|
2002
2018
|
},
|
|
2003
2019
|
{
|
|
2004
|
-
"name": "
|
|
2005
|
-
"description": "`
|
|
2020
|
+
"name": "transition-duration",
|
|
2021
|
+
"description": "`transition-duration` {`number`} - \n\nProperty: transitionDuration"
|
|
2006
2022
|
},
|
|
2007
2023
|
{
|
|
2008
2024
|
"name": "onopen",
|
|
@@ -2011,12 +2027,16 @@
|
|
|
2011
2027
|
{
|
|
2012
2028
|
"name": "onclose",
|
|
2013
2029
|
"description": "`close` {`CustomEvent<unknown>`} - "
|
|
2030
|
+
},
|
|
2031
|
+
{
|
|
2032
|
+
"name": "onclose-end",
|
|
2033
|
+
"description": "`close-end` {`CustomEvent<unknown>`} - "
|
|
2014
2034
|
}
|
|
2015
2035
|
]
|
|
2016
2036
|
},
|
|
2017
2037
|
{
|
|
2018
2038
|
"name": "uui-pagination",
|
|
2019
|
-
"description": "Events:\n\n * `change` {} - When clicked on the page button fires change event\n\nAttributes:\n\n * `label` {string} - This property is used to generate a proper `aria-label`. It will be announced by screen reader as: \"<<this.label>>. Current page: <<this.current>>\"\n\n * `aria-label` {string} - With this property you can overwrite aria-label.\n\n * `total` {number} - Set the amount of pages to navigate.\n\n * `current` {number} - Define the current active page.\n\nProperties:\n\n * `
|
|
2039
|
+
"description": "Events:\n\n * `change` {} - When clicked on the page button fires change event\n\nAttributes:\n\n * `label` {string} - This property is used to generate a proper `aria-label`. It will be announced by screen reader as: \"<<this.label>>. Current page: <<this.current>>\"\n\n * `aria-label` {string} - With this property you can overwrite aria-label.\n\n * `total` {number} - Set the amount of pages to navigate.\n\n * `current` {number} - Define the current active page.\n\nProperties:\n\n * `_observer` - \n\n * `_navButtons` {`UUIButtonElement[]`} - \n\n * `_pagesGroup` - \n\n * `label` {string} - This property is used to generate a proper `aria-label`. It will be announced by screen reader as: \"<<this.label>>. Current page: <<this.current>>\"\n\n * `ariaLabel` {string} - With this property you can overwrite aria-label.\n\n * `_total` {`number`} - \n\n * `total` {number} - Set the amount of pages to navigate.\n\n * `_range` {`number`} - \n\n * `_visiblePages` {`number[]`} - \n\n * `_current` {`number`} - \n\n * `current` {number} - Define the current active page.\n\n * `styles` {`CSSResult[]`} - ",
|
|
2020
2040
|
"attributes": [
|
|
2021
2041
|
{
|
|
2022
2042
|
"name": "label",
|
|
@@ -2103,7 +2123,7 @@
|
|
|
2103
2123
|
},
|
|
2104
2124
|
{
|
|
2105
2125
|
"name": "uui-popover",
|
|
2106
|
-
"description": "Events:\n\n * `close` {} - When popover is closed by user interaction.\n\nSlots:\n\n * `trigger` {} - The element that triggers the popover.\n\n * `popover` {} - The content of the popover.\n\nAttributes:\n\n * `margin` {number} - Set the distance between popover-modal and trigger.\n\n * `placement` {`PopoverPlacement`} - Define the placement of the popover-modal.\n\n * `open` {boolean} - Opens the popover-modal.\n\nProperties:\n\n * `
|
|
2126
|
+
"description": "Events:\n\n * `close` {} - When popover is closed by user interaction.\n\nSlots:\n\n * `trigger` {} - The element that triggers the popover.\n\n * `popover` {} - The content of the popover.\n\nAttributes:\n\n * `margin` {number} - Set the distance between popover-modal and trigger.\n\n * `placement` {`PopoverPlacement`} - Define the placement of the popover-modal.\n\n * `open` {boolean} - Opens the popover-modal.\n\nProperties:\n\n * `intersectionObserver` {`IntersectionObserver | undefined`} - \n\n * `scrollEventHandler` - \n\n * `containerElement` {`HTMLElement`} - \n\n * `_open` {`boolean`} - \n\n * `_placement` {`PopoverPlacement`} - \n\n * `_currentPlacement` {`\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\" | \"auto\" | null`} - \n\n * `_trigger` {`Element | undefined`} - \n\n * `_scrollParents` {`Element[]`} - \n\n * `_positionX` {`number | undefined`} - \n\n * `_positionY` {`number | undefined`} - \n\n * `margin` {number} - Set the distance between popover-modal and trigger.\n\n * `placement` {`PopoverPlacement`} - Define the placement of the popover-modal.\n\n * `open` {boolean} - Opens the popover-modal.\n\n * `_onTriggerSlotChanged` - \n\n * `_intersectionCallback` - \n\n * `_onKeyUp` - \n\n * `_onDocumentClick` - \n\n * `styles` {`CSSResult[]`} - ",
|
|
2107
2127
|
"attributes": [
|
|
2108
2128
|
{
|
|
2109
2129
|
"name": "margin",
|
|
@@ -2167,7 +2187,7 @@
|
|
|
2167
2187
|
},
|
|
2168
2188
|
{
|
|
2169
2189
|
"name": "uui-progress-bar",
|
|
2170
|
-
"description": "Attributes:\n\n * `progress` {number} - Set this to a number between 0 and 100 to reflect the progress of some operation.\n\nProperties:\n\n * `
|
|
2190
|
+
"description": "Attributes:\n\n * `progress` {number} - Set this to a number between 0 and 100 to reflect the progress of some operation.\n\nProperties:\n\n * `_progress` {`number`} - \n\n * `progress` {number} - Set this to a number between 0 and 100 to reflect the progress of some operation.\n\n * `styles` {`CSSResult[]`} - ",
|
|
2171
2191
|
"attributes": [
|
|
2172
2192
|
{
|
|
2173
2193
|
"name": "progress",
|
|
@@ -2177,7 +2197,7 @@
|
|
|
2177
2197
|
},
|
|
2178
2198
|
{
|
|
2179
2199
|
"name": "uui-radio-group",
|
|
2180
|
-
"description": "Slots:\n\n * ` ` {} - slot for `<uui-radio>` elements or custom elements that extend from `UUIRadioElement`\n\nAttributes:\n\n * `disabled` {boolean} - Disables the input.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `
|
|
2200
|
+
"description": "Slots:\n\n * ` ` {} - slot for `<uui-radio>` elements or custom elements that extend from `UUIRadioElement`\n\nAttributes:\n\n * `disabled` {boolean} - Disables the input.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `disabled` {boolean} - Disables the input.\n\n * `_selected` {`number | null`} - \n\n * `_radioElements` {`UUIRadioElement[]`} - \n\n * `_onChildBlur` - \n\n * `_handleSelectOnClick` - \n\n * `styles` {`CSSResult[]`} - \n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - ",
|
|
2181
2201
|
"attributes": [
|
|
2182
2202
|
{
|
|
2183
2203
|
"name": "disabled",
|
|
@@ -2220,7 +2240,7 @@
|
|
|
2220
2240
|
},
|
|
2221
2241
|
{
|
|
2222
2242
|
"name": "uui-radio",
|
|
2223
|
-
"description": "Events:\n\n * `change` {} - on input change\n\nSlots:\n\n * ` ` {} - slot to set the label if no `label` attribute is set.\n\nAttributes:\n\n * `name` {string} - This is a name property of the `<uui-radio>` component. It reflects the behaviour of the native `<input />` element and its name attribute.\n\n * `value` {string} - This is a value property of the `<uui-radio>`.\n\n * `label` {`string`} - \n\n * `checked` {`boolean`} - \n\n * `disabled` {boolean} - Disables the input.\n\nProperties:\n\n * `
|
|
2243
|
+
"description": "Events:\n\n * `change` {} - on input change\n\nSlots:\n\n * ` ` {} - slot to set the label if no `label` attribute is set.\n\nAttributes:\n\n * `name` {string} - This is a name property of the `<uui-radio>` component. It reflects the behaviour of the native `<input />` element and its name attribute.\n\n * `value` {string} - This is a value property of the `<uui-radio>`.\n\n * `label` {`string`} - \n\n * `checked` {`boolean`} - \n\n * `disabled` {boolean} - Disables the input.\n\nProperties:\n\n * `inputElement` {`HTMLInputElement`} - \n\n * `name` {string} - This is a name property of the `<uui-radio>` component. It reflects the behaviour of the native `<input />` element and its name attribute.\n\n * `value` {string} - This is a value property of the `<uui-radio>`.\n\n * `label` {`string`} - \n\n * `checked` {`boolean`} - \n\n * `_checked` {`boolean`} - \n\n * `disabled` {boolean} - Disables the input.\n\n * `_disabled` {`boolean`} - \n\n * `styles` {`CSSResult[]`} - ",
|
|
2224
2244
|
"attributes": [
|
|
2225
2245
|
{
|
|
2226
2246
|
"name": "name",
|
|
@@ -2252,7 +2272,7 @@
|
|
|
2252
2272
|
},
|
|
2253
2273
|
{
|
|
2254
2274
|
"name": "uui-range-slider",
|
|
2255
|
-
"description": "Events:\n\n * `input` {} - on input\n\n * `change` {} - on change\n\nAttributes:\n\n * `disabled` {boolean} - Disables the input.\n\n * `label` {string} - Label to be used for aria-label and eventually as visual label. Adds \" low value\" and \" high value\" endings for the two values.\n\n * `step` {number} - This reflects the behavior of a native input step attribute.\n\n * `hide-step-values` {boolean} - Hides the numbers representing the value of each steps. Dots will still be visible\n\n * `min` {number} - Sets the minimum allowed value.\n\n * `max` {number} - Sets the maximum allowed value.\n\n * `min-gap` {number} - Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap\n\n * `max-gap` {number} - Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.\n\n * `value-low` {number} - The lower picked value.\n\n * `value-high` {number} - The higher picked value.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - This is a value property of the uui-range-slider. Split the two values with comma, forexample 10,50 sets the values to 10 and 50.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `
|
|
2275
|
+
"description": "Events:\n\n * `input` {} - on input\n\n * `change` {} - on change\n\nAttributes:\n\n * `disabled` {boolean} - Disables the input.\n\n * `label` {string} - Label to be used for aria-label and eventually as visual label. Adds \" low value\" and \" high value\" endings for the two values.\n\n * `step` {number} - This reflects the behavior of a native input step attribute.\n\n * `hide-step-values` {boolean} - Hides the numbers representing the value of each steps. Dots will still be visible\n\n * `min` {number} - Sets the minimum allowed value.\n\n * `max` {number} - Sets the maximum allowed value.\n\n * `min-gap` {number} - Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap\n\n * `max-gap` {number} - Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.\n\n * `value-low` {number} - The lower picked value.\n\n * `value-high` {number} - The higher picked value.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - This is a value property of the uui-range-slider. Split the two values with comma, forexample 10,50 sets the values to 10 and 50.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `disabled` {boolean} - Disables the input.\n\n * `label` {string} - Label to be used for aria-label and eventually as visual label. Adds \" low value\" and \" high value\" endings for the two values.\n\n * `step` {number} - This reflects the behavior of a native input step attribute.\n\n * `hideStepValues` {boolean} - Hides the numbers representing the value of each steps. Dots will still be visible\n\n * `min` {number} - Sets the minimum allowed value.\n\n * `max` {number} - Sets the maximum allowed value.\n\n * `minGap` {number} - Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap\n\n * `maxGap` {number} - Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.\n\n * `_valueLow` {`number`} - \n\n * `valueLow` {number} - The lower picked value.\n\n * `_valueHigh` {`number`} - \n\n * `valueHigh` {number} - The higher picked value.\n\n * `_trackWidth` {`number`} - \n\n * `_currentInputFocus` {`HTMLInputElement | undefined`} - \n\n * `_currentThumbFocus` {`\"high\" | \"low\"`} - \n\n * `_grabbingBoth` {`boolean | undefined`} - \n\n * `_startPos` {`number`} - \n\n * `_startLow` {`number`} - \n\n * `_startHigh` {`number`} - \n\n * `_inputLow` {`HTMLInputElement`} - \n\n * `_inputHigh` {`HTMLInputElement`} - \n\n * `_outerTrack` {`HTMLElement`} - \n\n * `_innerTrack` {`HTMLElement`} - \n\n * `_thumbLow` {`HTMLElement`} - \n\n * `_thumbHigh` {`HTMLElement`} - \n\n * `_innerColor` {`HTMLElement`} - \n\n * `_bothThumbsTarget` {`HTMLElement`} - \n\n * `_onMouseDown` - Mouse events\n\n * `_onMouseMove` - \n\n * `_onMouseUp` - \n\n * `_onTouchStart` - Touch / mobile events\n\n * `_onTouchMove` - \n\n * `_onTouchEnd` - \n\n * `styles` {`CSSResult[]`} - \n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events.\nIt may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\nRead more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - This is a value property of the uui-range-slider. Split the two values with comma, forexample 10,50 sets the values to 10 and 50.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - ",
|
|
2256
2276
|
"attributes": [
|
|
2257
2277
|
{
|
|
2258
2278
|
"name": "disabled",
|
|
@@ -2347,7 +2367,7 @@
|
|
|
2347
2367
|
},
|
|
2348
2368
|
{
|
|
2349
2369
|
"name": "uui-ref-node-data-type",
|
|
2350
|
-
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `alias` {string} - Alias\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `alias` {string} - Alias\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `
|
|
2370
|
+
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `alias` {string} - Alias\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `alias` {string} - Alias\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
2351
2371
|
"attributes": [
|
|
2352
2372
|
{
|
|
2353
2373
|
"name": "alias",
|
|
@@ -2402,7 +2422,7 @@
|
|
|
2402
2422
|
},
|
|
2403
2423
|
{
|
|
2404
2424
|
"name": "uui-ref-node-document-type",
|
|
2405
|
-
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `alias` {string} - Alias\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `alias` {string} - Alias\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `
|
|
2425
|
+
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `alias` {string} - Alias\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `alias` {string} - Alias\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
2406
2426
|
"attributes": [
|
|
2407
2427
|
{
|
|
2408
2428
|
"name": "alias",
|
|
@@ -2457,7 +2477,7 @@
|
|
|
2457
2477
|
},
|
|
2458
2478
|
{
|
|
2459
2479
|
"name": "uui-ref-node-form",
|
|
2460
|
-
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `
|
|
2480
|
+
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
2461
2481
|
"attributes": [
|
|
2462
2482
|
{
|
|
2463
2483
|
"name": "name",
|
|
@@ -2508,7 +2528,7 @@
|
|
|
2508
2528
|
},
|
|
2509
2529
|
{
|
|
2510
2530
|
"name": "uui-ref-node-member",
|
|
2511
|
-
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `group-name` {string} - Group name\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `groupName` {string} - Group name\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `
|
|
2531
|
+
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `group-name` {string} - Group name\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `groupName` {string} - Group name\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
2512
2532
|
"attributes": [
|
|
2513
2533
|
{
|
|
2514
2534
|
"name": "group-name",
|
|
@@ -2563,7 +2583,7 @@
|
|
|
2563
2583
|
},
|
|
2564
2584
|
{
|
|
2565
2585
|
"name": "uui-ref-node-package",
|
|
2566
|
-
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `version` {string} - Package version\n\n * `author` {string} - Package author\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `version` {string} - Package version\n\n * `author` {string} - Package author\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `
|
|
2586
|
+
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `version` {string} - Package version\n\n * `author` {string} - Package author\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `version` {string} - Package version\n\n * `author` {string} - Package author\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
2567
2587
|
"attributes": [
|
|
2568
2588
|
{
|
|
2569
2589
|
"name": "version",
|
|
@@ -2622,7 +2642,7 @@
|
|
|
2622
2642
|
},
|
|
2623
2643
|
{
|
|
2624
2644
|
"name": "uui-ref-node-user",
|
|
2625
|
-
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `group-name` {string} - Group name\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `groupName` {string} - Group name\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `
|
|
2645
|
+
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `group-name` {string} - Group name\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `groupName` {string} - Group name\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
2626
2646
|
"attributes": [
|
|
2627
2647
|
{
|
|
2628
2648
|
"name": "group-name",
|
|
@@ -2677,7 +2697,7 @@
|
|
|
2677
2697
|
},
|
|
2678
2698
|
{
|
|
2679
2699
|
"name": "uui-ref-node",
|
|
2680
|
-
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `
|
|
2700
|
+
"description": "Events:\n\n * `open` - fires when the ref title is clicked\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nSlots:\n\n * ` ` {} - for content\n\n * `icon` {} - for an icon\n\n * `tag` {} - for a tag\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `name` {string} - Node name\n\n * `detail` {string} - Node details\n\n * `_iconSlotHasContent` {`boolean`} - \n\n * `fallbackIcon` {`string`} - \n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
2681
2701
|
"attributes": [
|
|
2682
2702
|
{
|
|
2683
2703
|
"name": "name",
|
|
@@ -2728,7 +2748,7 @@
|
|
|
2728
2748
|
},
|
|
2729
2749
|
{
|
|
2730
2750
|
"name": "uui-ref",
|
|
2731
|
-
"description": "Events:\n\n * `open` - fires when the ref is opened\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nAttributes:\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `
|
|
2751
|
+
"description": "Events:\n\n * `open` - fires when the ref is opened\n\n * `selected` - fires when the ref is selected\n\n * `deselected` - fires when the ref is deselected\n\nAttributes:\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `disabled` {boolean} - Set tot true to disable\n\n * `error` {boolean} - Set to true to display error state\n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
2732
2752
|
"attributes": [
|
|
2733
2753
|
{
|
|
2734
2754
|
"name": "disabled",
|
|
@@ -2782,7 +2802,7 @@
|
|
|
2782
2802
|
},
|
|
2783
2803
|
{
|
|
2784
2804
|
"name": "uui-select",
|
|
2785
|
-
"description": "Custom element wrapping the native select element. Pass an array of options to it.\nThis is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.\n\nEvents:\n\n * `change` {} - when the user changes value\n\nAttributes:\n\n * `label` {string} - Text with which component should be labeled\n\n * `placeholder` {string} - Defines the select's placeholder.\n\n * `disabled` {boolean} - Disables the select.\n\n * `disabledGroups` {`string`} - An array of options to be rendered by the element. Put the names of the groups you wanna disable, separated by a coma: `disabledGroups='fruits, vegetables'`. It's not case sensitive\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {boolean} - Set to true if the component should have an error state.Property is reflected to the corresponding attribute.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `
|
|
2805
|
+
"description": "Custom element wrapping the native select element. Pass an array of options to it.\nThis is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.\n\nEvents:\n\n * `change` {} - when the user changes value\n\nAttributes:\n\n * `label` {string} - Text with which component should be labeled\n\n * `placeholder` {string} - Defines the select's placeholder.\n\n * `disabled` {boolean} - Disables the select.\n\n * `disabledGroups` {`string`} - An array of options to be rendered by the element. Put the names of the groups you wanna disable, separated by a coma: `disabledGroups='fruits, vegetables'`. It's not case sensitive\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {boolean} - Set to true if the component should have an error state.Property is reflected to the corresponding attribute.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `label` {string} - Text with which component should be labeled\n\n * `placeholder` {string} - Defines the select's placeholder.\n\n * `disabled` {boolean} - Disables the select.\n\n * `options` {`Option[]`} - An array of options to be rendered by the element. If you want the element The option interface has up to 5 properties:\n`interface Option {\nname: string;\nvalue: string;\ngroup?: string;\nselected?: boolean;\ndisabled?: boolean;\n}`\n\n * `_groups` {`string[]`} - \n\n * `disabledGroups` {`string`} - An array of options to be rendered by the element. Put the names of the groups you wanna disable, separated by a coma: `disabledGroups='fruits, vegetables'`. It's not case sensitive\n\n * `_disabledGroups` {`string[]`} - \n\n * `_values` {`string[]`} - \n\n * `_input` {`HTMLSelectElement`} - \n\n * `styles` {`CSSResult[]`} - \n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events.\nIt may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\nRead more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - Value of this form control.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {boolean} - Set to true if the component should have an error state.Property is reflected to the corresponding attribute.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - ",
|
|
2786
2806
|
"attributes": [
|
|
2787
2807
|
{
|
|
2788
2808
|
"name": "label",
|
|
@@ -2841,7 +2861,7 @@
|
|
|
2841
2861
|
},
|
|
2842
2862
|
{
|
|
2843
2863
|
"name": "uui-slider",
|
|
2844
|
-
"description": "Events:\n\n * `input` {} - on input\n\nAttributes:\n\n * `hide-step-values` {boolean} - Hides the numbers representing the value of each steps. Dots will still be visible\n\n * `min` {number} - This is a minimum value of the input.\n\n * `max` {number} - This is a maximum value of the input.\n\n * `step` {number} - This reflects the behavior of a native input step attribute.\n\n * `disabled` {boolean} - Disables the input.\n\n * `label` {string} - Label to be used for aria-label and eventually as visual label\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - This is a value property of the uui-slider.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `
|
|
2864
|
+
"description": "Events:\n\n * `input` {} - on input\n\nAttributes:\n\n * `hide-step-values` {boolean} - Hides the numbers representing the value of each steps. Dots will still be visible\n\n * `min` {number} - This is a minimum value of the input.\n\n * `max` {number} - This is a maximum value of the input.\n\n * `step` {number} - This reflects the behavior of a native input step attribute.\n\n * `disabled` {boolean} - Disables the input.\n\n * `label` {string} - Label to be used for aria-label and eventually as visual label\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - This is a value property of the uui-slider.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `hideStepValues` {boolean} - Hides the numbers representing the value of each steps. Dots will still be visible\n\n * `min` {number} - This is a minimum value of the input.\n\n * `max` {number} - This is a maximum value of the input.\n\n * `step` {number} - This reflects the behavior of a native input step attribute.\n\n * `disabled` {boolean} - Disables the input.\n\n * `label` {string} - Label to be used for aria-label and eventually as visual label\n\n * `_input` {`HTMLInputElement`} - \n\n * `_track` {`HTMLElement`} - \n\n * `_stepWidth` {`number`} - \n\n * `onWindowResize` - \n\n * `_steps` {`number[]`} - \n\n * `_sliderPosition` {`string`} - \n\n * `styles` {`CSSResult[]`} - \n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - This is a value property of the uui-slider.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - ",
|
|
2845
2865
|
"attributes": [
|
|
2846
2866
|
{
|
|
2847
2867
|
"name": "hide-step-values",
|
|
@@ -2909,7 +2929,7 @@
|
|
|
2909
2929
|
},
|
|
2910
2930
|
{
|
|
2911
2931
|
"name": "uui-symbol-expand",
|
|
2912
|
-
"description": "A symbol indicating whether related composition is expanded or collapsed\n\nAttributes:\n\n * `open` {boolean} - Set this boolean to true for a open/expanded look.\n\nProperties:\n\n * `
|
|
2932
|
+
"description": "A symbol indicating whether related composition is expanded or collapsed\n\nAttributes:\n\n * `open` {boolean} - Set this boolean to true for a open/expanded look.\n\nProperties:\n\n * `open` {boolean} - Set this boolean to true for a open/expanded look.\n\n * `styles` {`CSSResult[]`} - ",
|
|
2913
2933
|
"attributes": [
|
|
2914
2934
|
{
|
|
2915
2935
|
"name": "open",
|
|
@@ -2920,7 +2940,7 @@
|
|
|
2920
2940
|
},
|
|
2921
2941
|
{
|
|
2922
2942
|
"name": "uui-symbol-file-dropzone",
|
|
2923
|
-
"description": "Attributes:\n\n * `error` {boolean} - Renders a error symbol instead of the upload symbol\n\nProperties:\n\n * `
|
|
2943
|
+
"description": "Attributes:\n\n * `error` {boolean} - Renders a error symbol instead of the upload symbol\n\nProperties:\n\n * `error` {boolean} - Renders a error symbol instead of the upload symbol\n\n * `styles` {`CSSResult[]`} - ",
|
|
2924
2944
|
"attributes": [
|
|
2925
2945
|
{
|
|
2926
2946
|
"name": "error",
|
|
@@ -2931,7 +2951,7 @@
|
|
|
2931
2951
|
},
|
|
2932
2952
|
{
|
|
2933
2953
|
"name": "uui-symbol-file-thumbnail",
|
|
2934
|
-
"description": "Attributes:\n\n * `src` {string} - Source of the thumbnail.\n\n * `alt` {string} - Alt of the thumbnail.\n\nProperties:\n\n * `
|
|
2954
|
+
"description": "Attributes:\n\n * `src` {string} - Source of the thumbnail.\n\n * `alt` {string} - Alt of the thumbnail.\n\nProperties:\n\n * `src` {string} - Source of the thumbnail.\n\n * `alt` {string} - Alt of the thumbnail.\n\n * `styles` {`CSSResult[]`} - ",
|
|
2935
2955
|
"attributes": [
|
|
2936
2956
|
{
|
|
2937
2957
|
"name": "src",
|
|
@@ -2945,7 +2965,7 @@
|
|
|
2945
2965
|
},
|
|
2946
2966
|
{
|
|
2947
2967
|
"name": "uui-file-symbol",
|
|
2948
|
-
"description": "Attributes:\n\n * `type` {string} - The text that will appear on the file icon\n\nProperties:\n\n * `
|
|
2968
|
+
"description": "Attributes:\n\n * `type` {string} - The text that will appear on the file icon\n\nProperties:\n\n * `type` {string} - The text that will appear on the file icon\n\n * `styles` {`CSSResult[]`} - ",
|
|
2949
2969
|
"attributes": [
|
|
2950
2970
|
{
|
|
2951
2971
|
"name": "type",
|
|
@@ -2955,7 +2975,7 @@
|
|
|
2955
2975
|
},
|
|
2956
2976
|
{
|
|
2957
2977
|
"name": "uui-symbol-file",
|
|
2958
|
-
"description": "Attributes:\n\n * `type` {string} - The text that will appear on the file icon\n\nProperties:\n\n * `
|
|
2978
|
+
"description": "Attributes:\n\n * `type` {string} - The text that will appear on the file icon\n\nProperties:\n\n * `type` {string} - The text that will appear on the file icon\n\n * `styles` {`CSSResult[]`} - ",
|
|
2959
2979
|
"attributes": [
|
|
2960
2980
|
{
|
|
2961
2981
|
"name": "type",
|
|
@@ -2975,7 +2995,7 @@
|
|
|
2975
2995
|
},
|
|
2976
2996
|
{
|
|
2977
2997
|
"name": "uui-symbol-lock",
|
|
2978
|
-
"description": "Attributes:\n\n * `open` {`boolean`} - \n\nProperties:\n\n * `
|
|
2998
|
+
"description": "Attributes:\n\n * `open` {`boolean`} - \n\nProperties:\n\n * `open` {`boolean`} - \n\n * `styles` {`CSSResult[]`} - ",
|
|
2979
2999
|
"attributes": [
|
|
2980
3000
|
{
|
|
2981
3001
|
"name": "open",
|
|
@@ -2991,7 +3011,7 @@
|
|
|
2991
3011
|
},
|
|
2992
3012
|
{
|
|
2993
3013
|
"name": "uui-symbol-sort",
|
|
2994
|
-
"description": "Attributes:\n\n * `descending` {boolean} - Turns the arrow around. Set this boolean to true for displaying descending sort is active.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\nProperties:\n\n * `
|
|
3014
|
+
"description": "Attributes:\n\n * `descending` {boolean} - Turns the arrow around. Set this boolean to true for displaying descending sort is active.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\nProperties:\n\n * `descending` {boolean} - Turns the arrow around. Set this boolean to true for displaying descending sort is active.\n\n * `styles` {`CSSResult[]`} - \n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.",
|
|
2995
3015
|
"attributes": [
|
|
2996
3016
|
{
|
|
2997
3017
|
"name": "descending",
|
|
@@ -3007,7 +3027,7 @@
|
|
|
3007
3027
|
},
|
|
3008
3028
|
{
|
|
3009
3029
|
"name": "uui-table-cell",
|
|
3010
|
-
"description": "Table cell that detects if it has overflow and if so it'll add a title attribute to itself to display full text. Must be a child of uui-table-row\n\nSlots:\n\n * ` ` {} - slot for table cell content\n\nAttributes:\n\n * `disable-child-interaction` {`boolean`} - Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.\n\n * `no-padding` {boolean} - Remove padding in order to have element going to the edge of the cell.\n\n * `clip-text` {boolean} - Enable overflow ellipsis\n\nProperties:\n\n * `
|
|
3030
|
+
"description": "Table cell that detects if it has overflow and if so it'll add a title attribute to itself to display full text. Must be a child of uui-table-row\n\nSlots:\n\n * ` ` {} - slot for table cell content\n\nAttributes:\n\n * `disable-child-interaction` {`boolean`} - Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.\n\n * `no-padding` {boolean} - Remove padding in order to have element going to the edge of the cell.\n\n * `clip-text` {boolean} - Enable overflow ellipsis\n\nProperties:\n\n * `disableChildInteraction` {`boolean`} - Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.\n\n * `noPadding` {boolean} - Remove padding in order to have element going to the edge of the cell.\n\n * `clipText` {boolean} - Enable overflow ellipsis\n\n * `_observer` - \n\n * `styles` {`CSSResult[]`} - ",
|
|
3011
3031
|
"attributes": [
|
|
3012
3032
|
{
|
|
3013
3033
|
"name": "disable-child-interaction",
|
|
@@ -3033,7 +3053,7 @@
|
|
|
3033
3053
|
},
|
|
3034
3054
|
{
|
|
3035
3055
|
"name": "uui-table-head-cell",
|
|
3036
|
-
"description": "Child element of uui-table-head. Use it there.\n\nSlots:\n\n * ` ` {} - slot for table cell content\n\nAttributes:\n\n * `disable-child-interaction` {`boolean`} - Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.\n\n * `no-padding` {boolean} - Remove padding in order to have element going to the edge of the cell.\n\n * `clip-text` {boolean} - Enable overflow ellipsis\n\nProperties:\n\n * `
|
|
3056
|
+
"description": "Child element of uui-table-head. Use it there.\n\nSlots:\n\n * ` ` {} - slot for table cell content\n\nAttributes:\n\n * `disable-child-interaction` {`boolean`} - Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.\n\n * `no-padding` {boolean} - Remove padding in order to have element going to the edge of the cell.\n\n * `clip-text` {boolean} - Enable overflow ellipsis\n\nProperties:\n\n * `disableChildInteraction` {`boolean`} - Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.\n\n * `noPadding` {boolean} - Remove padding in order to have element going to the edge of the cell.\n\n * `clipText` {boolean} - Enable overflow ellipsis\n\n * `_observer` - \n\n * `styles` {`CSSResult[]`} - ",
|
|
3037
3057
|
"attributes": [
|
|
3038
3058
|
{
|
|
3039
3059
|
"name": "disable-child-interaction",
|
|
@@ -3059,7 +3079,7 @@
|
|
|
3059
3079
|
},
|
|
3060
3080
|
{
|
|
3061
3081
|
"name": "uui-table-row",
|
|
3062
|
-
"description": "Table row element with option to set is as selectable. Parent for uui-table-cell. Must be a child of uui-table.\n\nEvents:\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - for <uui-table-cell> elements that should be in the row.\n\nAttributes:\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `
|
|
3082
|
+
"description": "Table row element with option to set is as selectable. Parent for uui-table-cell. Must be a child of uui-table.\n\nEvents:\n\n * `selected` - fires when the media card is selected\n\n * `deselected` - fires when the media card is deselected\n\nSlots:\n\n * ` ` {} - for <uui-table-cell> elements that should be in the row.\n\nAttributes:\n\n * `select-only` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\nProperties:\n\n * `slotCellNodes` {`unknown[] | undefined`} - \n\n * `styles` {`CSSResult[]`} - \n\n * `_selectOnly` {`boolean`} - \n\n * `selectOnly` {`boolean`} - Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.\n\n * `_selectable` {`boolean`} - \n\n * `selectable` {`boolean`} - Enable the ability to select this element.\n\n * `deselectable` {`boolean`} - \n\n * `selected` {`boolean`} - Attribute applied when the element is selected.\n\n * `selectableTarget` {`EventTarget`} - \n\n * `handleSelectKeydown` - ",
|
|
3063
3083
|
"attributes": [
|
|
3064
3084
|
{
|
|
3065
3085
|
"name": "select-only",
|
|
@@ -3093,7 +3113,7 @@
|
|
|
3093
3113
|
},
|
|
3094
3114
|
{
|
|
3095
3115
|
"name": "uui-tab-group",
|
|
3096
|
-
"description": "Slots:\n\n * ` ` {} - Default slot for the tab group\n\nAttributes:\n\n * `dropdown-content-direction` {string} - Set the flex direction of the content of the dropdown.\n\nProperties:\n\n * `
|
|
3116
|
+
"description": "Slots:\n\n * ` ` {} - Default slot for the tab group\n\nAttributes:\n\n * `dropdown-content-direction` {string} - Set the flex direction of the content of the dropdown.\n\nProperties:\n\n * `_moreButtonElement` - \n\n * `_slottedNodes` {`HTMLElement[] | undefined`} - \n\n * `dropdownContentDirection` {string} - Set the flex direction of the content of the dropdown.\n\n * `styles` {`CSSResult[]`} - ",
|
|
3097
3117
|
"attributes": [
|
|
3098
3118
|
{
|
|
3099
3119
|
"name": "dropdown-content-direction",
|
|
@@ -3111,7 +3131,7 @@
|
|
|
3111
3131
|
},
|
|
3112
3132
|
{
|
|
3113
3133
|
"name": "uui-tabs",
|
|
3114
|
-
"description": "A single tab. Should be put into `<uui-tab-group>`,\n\nSlots:\n\n * ` ` {} - for label\n\n * `icon` {} - for icon\n\n * `extra` {} - for extra\n\nAttributes:\n\n * `disabled` {boolean} - Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.\n\n * `href` {string} - Set an href, this will turns the inner button into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `orientation` {string} - Set the visual orientation of this tab, this changes the look and placement of the active indication.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `
|
|
3134
|
+
"description": "A single tab. Should be put into `<uui-tab-group>`,\n\nSlots:\n\n * ` ` {} - for label\n\n * `icon` {} - for icon\n\n * `extra` {} - for extra\n\nAttributes:\n\n * `disabled` {boolean} - Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.\n\n * `href` {string} - Set an href, this will turns the inner button into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `orientation` {string} - Set the visual orientation of this tab, this changes the look and placement of the active indication.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `disabled` {boolean} - Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.\n\n * `href` {string} - Set an href, this will turns the inner button into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `orientation` {string} - Set the visual orientation of this tab, this changes the look and placement of the active indication.\n\n * `styles` {`CSSResult[]`} - \n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
3115
3135
|
"attributes": [
|
|
3116
3136
|
{
|
|
3117
3137
|
"name": "disabled",
|
|
@@ -3166,7 +3186,7 @@
|
|
|
3166
3186
|
},
|
|
3167
3187
|
{
|
|
3168
3188
|
"name": "uui-tab",
|
|
3169
|
-
"description": "A single tab. Should be put into `<uui-tab-group>`,\n\nSlots:\n\n * ` ` {} - for label\n\n * `icon` {} - for icon\n\n * `extra` {} - for extra\n\nAttributes:\n\n * `disabled` {boolean} - Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.\n\n * `href` {string} - Set an href, this will turns the inner button into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `orientation` {string} - Set the visual orientation of this tab, this changes the look and placement of the active indication.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `
|
|
3189
|
+
"description": "A single tab. Should be put into `<uui-tab-group>`,\n\nSlots:\n\n * ` ` {} - for label\n\n * `icon` {} - for icon\n\n * `extra` {} - for extra\n\nAttributes:\n\n * `disabled` {boolean} - Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.\n\n * `href` {string} - Set an href, this will turns the inner button into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `orientation` {string} - Set the visual orientation of this tab, this changes the look and placement of the active indication.\n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `disabled` {boolean} - Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.\n\n * `href` {string} - Set an href, this will turns the inner button into a anchor tag.\n\n * `target` {string} - Set an anchor tag target, only used when using href.\n\n * `orientation` {string} - Set the visual orientation of this tab, this changes the look and placement of the active indication.\n\n * `styles` {`CSSResult[]`} - \n\n * `active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
3170
3190
|
"attributes": [
|
|
3171
3191
|
{
|
|
3172
3192
|
"name": "disabled",
|
|
@@ -3221,7 +3241,7 @@
|
|
|
3221
3241
|
},
|
|
3222
3242
|
{
|
|
3223
3243
|
"name": "uui-tag",
|
|
3224
|
-
"description": "Slots:\n\n * ` ` {} - slot for tag contents\n\nAttributes:\n\n * `color` {\"default\" | \"positive\" | \"warning\" | \"danger\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `look` {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\nProperties:\n\n * `
|
|
3244
|
+
"description": "Slots:\n\n * ` ` {} - slot for tag contents\n\nAttributes:\n\n * `color` {\"default\" | \"positive\" | \"warning\" | \"danger\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `look` {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\nProperties:\n\n * `color` {\"default\" | \"positive\" | \"warning\" | \"danger\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `look` {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"} - Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n\n * `styles` {`CSSResult[]`} - ",
|
|
3225
3245
|
"attributes": [
|
|
3226
3246
|
{
|
|
3227
3247
|
"name": "color",
|
|
@@ -3272,7 +3292,7 @@
|
|
|
3272
3292
|
},
|
|
3273
3293
|
{
|
|
3274
3294
|
"name": "uui-textarea",
|
|
3275
|
-
"description": "Events:\n\n * `change` {} - on change\n\n * `input` {} - on input\n\n * `keyup` {} - on keyup\n\nAttributes:\n\n * `placeholder` {string} - Defines the textarea placeholder.\n\n * `disabled` {boolean} - Disables the textarea.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `minlength` {number} - This is a minimum value of the input.\n\n * `minlength-message` {boolean} - Minlength validation message.\n\n * `maxlength` {number} - This is a maximum value of the input.\n\n * `maxlength-message` {boolean} - Maxlength validation message.\n\n * `auto-height` {boolean} - Enables automatic height adjustment. The height will be confined within the min and max height if defined.\n\n * `label` {string} - Label to be used for aria-label and eventually as visual label\n\n * `rows` {number} - Sets the number of rows of the textarea\n\n * `cols` {number} - Sets the number of cols of the textarea\n\n * `wrap` {'soft' | 'hard' | 'off'} - Indicates how the control should wrap the value for form submission. If this attribute is not specified, soft is its default value.\n\n * `name` {string} - This is a name property of the `<uui-textarea>` component. It reflects the behaviour of the native `<textarea>` element and its name attribute.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {boolean} - Set to true if the component should have an error state. Property is reflected to the corresponding attribute.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `
|
|
3295
|
+
"description": "Events:\n\n * `change` {} - on change\n\n * `input` {} - on input\n\n * `keyup` {} - on keyup\n\nAttributes:\n\n * `placeholder` {string} - Defines the textarea placeholder.\n\n * `disabled` {boolean} - Disables the textarea.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `minlength` {number} - This is a minimum value of the input.\n\n * `minlength-message` {boolean} - Minlength validation message.\n\n * `maxlength` {number} - This is a maximum value of the input.\n\n * `maxlength-message` {boolean} - Maxlength validation message.\n\n * `auto-height` {boolean} - Enables automatic height adjustment. The height will be confined within the min and max height if defined.\n\n * `label` {string} - Label to be used for aria-label and eventually as visual label\n\n * `rows` {number} - Sets the number of rows of the textarea\n\n * `cols` {number} - Sets the number of cols of the textarea\n\n * `wrap` {'soft' | 'hard' | 'off'} - Indicates how the control should wrap the value for form submission. If this attribute is not specified, soft is its default value.\n\n * `name` {string} - This is a name property of the `<uui-textarea>` component. It reflects the behaviour of the native `<textarea>` element and its name attribute.\n\n * `value` {string} - Value of this form control.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {boolean} - Set to true if the component should have an error state. Property is reflected to the corresponding attribute.\n\n * `error-message` {`string`} - Custom error message.\n\nProperties:\n\n * `placeholder` {string} - Defines the textarea placeholder.\n\n * `disabled` {boolean} - Disables the textarea.\n\n * `readonly` {boolean} - Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n\n * `minlength` {number} - This is a minimum value of the input.\n\n * `minlengthMessage` {boolean} - Minlength validation message.\n\n * `maxlength` {number} - This is a maximum value of the input.\n\n * `maxlengthMessage` {boolean} - Maxlength validation message.\n\n * `_textarea` {`HTMLInputElement`} - \n\n * `autoHeight` {boolean} - Enables automatic height adjustment. The height will be confined within the min and max height if defined.\n\n * `label` {string} - Label to be used for aria-label and eventually as visual label\n\n * `rows` {number} - Sets the number of rows of the textarea\n\n * `cols` {number} - Sets the number of cols of the textarea\n\n * `wrap` {'soft' | 'hard' | 'off'} - Indicates how the control should wrap the value for form submission. If this attribute is not specified, soft is its default value.\n\n * `styles` {`CSSResult[]`} - \n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the `<uui-textarea>` component. It reflects the behaviour of the native `<textarea>` element and its name attribute.\n\n * `value` {string} - Value of this form control.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {boolean} - Set to true if the component should have an error state. Property is reflected to the corresponding attribute.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - ",
|
|
3276
3296
|
"attributes": [
|
|
3277
3297
|
{
|
|
3278
3298
|
"name": "placeholder",
|
|
@@ -3388,7 +3408,7 @@
|
|
|
3388
3408
|
},
|
|
3389
3409
|
{
|
|
3390
3410
|
"name": "uui-toast-notification-container",
|
|
3391
|
-
"description": "Slots:\n\n * ` ` {} - slot for toast layout/content\n\nAttributes:\n\n * `auto-close` {number} - Set an auto-close timer, the timer will be paused on mouse-hover.\n\n * `bottom-up` {boolean} - set the toast container to grow from bottom to top.\n\n * `left-align` {boolean} - set the toast container to align to the left.\n\nProperties:\n\n * `
|
|
3411
|
+
"description": "Slots:\n\n * ` ` {} - slot for toast layout/content\n\nAttributes:\n\n * `auto-close` {number} - Set an auto-close timer, the timer will be paused on mouse-hover.\n\n * `bottom-up` {boolean} - set the toast container to grow from bottom to top.\n\n * `left-align` {boolean} - set the toast container to align to the left.\n\nProperties:\n\n * `autoClose` {`number | null`} - \n\n * `_autoClosePause` {`boolean`} - \n\n * `pauseAutoClose` - pause all auto close timer, including later coming.\n\n * `resumeAutoClose` - resume the auto close timers.\n\n * `onToastClosed` - \n\n * `_toasts` {`UUIToastNotificationElement[]`} - \n\n * `onSlotChanged` - \n\n * `styles` {`CSSResult[]`} - \n\n * `_autoClose` {number} - Set an auto-close timer, the timer will be paused on mouse-hover.",
|
|
3392
3412
|
"attributes": [
|
|
3393
3413
|
{
|
|
3394
3414
|
"name": "auto-close",
|
|
@@ -3409,7 +3429,7 @@
|
|
|
3409
3429
|
},
|
|
3410
3430
|
{
|
|
3411
3431
|
"name": "uui-toast-notification-layout",
|
|
3412
|
-
"description": "Slots:\n\n * ` ` {} - for content\n\n * `headline` {} - for headline\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `headline` {`string`} - Headline for this notification, can also be set via the 'headline' slot.\n\nProperties:\n\n * `
|
|
3432
|
+
"description": "Slots:\n\n * ` ` {} - for content\n\n * `headline` {} - for headline\n\n * `actions` {} - for actions\n\nAttributes:\n\n * `headline` {`string`} - Headline for this notification, can also be set via the 'headline' slot.\n\nProperties:\n\n * `headline` {`string`} - Headline for this notification, can also be set via the 'headline' slot.\n\n * `_headlineSlotHasContent` {`boolean`} - \n\n * `_headlineSlotChanged` - \n\n * `styles` {`CSSResult[]`} - ",
|
|
3413
3433
|
"attributes": [
|
|
3414
3434
|
{
|
|
3415
3435
|
"name": "headline",
|
|
@@ -3419,7 +3439,7 @@
|
|
|
3419
3439
|
},
|
|
3420
3440
|
{
|
|
3421
3441
|
"name": "uui-toast-notification",
|
|
3422
|
-
"description": "Events:\n\n * `opening` - fires when the toast is starting to open\n\n * `opened` - fires when the toast is open after the open-animation\n\n * `closing` - fires when the toast is starting to close\n\n * `closed` - fires when the toast is closed\n\nSlots:\n\n * ` ` {} - slot for dialog layout/content\n\nAttributes:\n\n * `color` {'' | 'default' | 'positive' | 'warning' | 'danger'} - Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.\n\n * `autoClose` {`number | null`} - Set an auto-close timer.\n\n * `open` {`boolean`} - define if this toast should open or close.\n\nProperties:\n\n * `
|
|
3442
|
+
"description": "Events:\n\n * `opening` - fires when the toast is starting to open\n\n * `opened` - fires when the toast is open after the open-animation\n\n * `closing` - fires when the toast is starting to close\n\n * `closed` - fires when the toast is closed\n\nSlots:\n\n * ` ` {} - slot for dialog layout/content\n\nAttributes:\n\n * `color` {'' | 'default' | 'positive' | 'warning' | 'danger'} - Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.\n\n * `autoClose` {`number | null`} - Set an auto-close timer.\n\n * `open` {`boolean`} - define if this toast should open or close.\n\nProperties:\n\n * `color` {'' | 'default' | 'positive' | 'warning' | 'danger'} - Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.\n\n * `_autoClose` {`number | null`} - \n\n * `autoClose` {`number | null`} - Set an auto-close timer.\n\n * `_onOpenTimerComplete` - \n\n * `_toastEl` {`HTMLElement`} - \n\n * `_timer` - \n\n * `_pauseTimer` {`boolean`} - \n\n * `isOpen` {`boolean`} - \n\n * `_open` {`boolean`} - \n\n * `_animate` {`boolean`} - \n\n * `_animationTimeout` {`number | undefined`} - \n\n * `open` {`boolean`} - define if this toast should open or close.\n\n * `_requestAnimationUpdate` {`number`} - \n\n * `styles` {`CSSResult[]`} - ",
|
|
3423
3443
|
"attributes": [
|
|
3424
3444
|
{
|
|
3425
3445
|
"name": "color",
|
|
@@ -3472,7 +3492,7 @@
|
|
|
3472
3492
|
},
|
|
3473
3493
|
{
|
|
3474
3494
|
"name": "uui-toggle",
|
|
3475
|
-
"description": "Umbraco Toggle-switch, toggles between off/on. Technically a checkbox.\n\nEvents:\n\n * `change-` {} - fires when the element is begin checked by a user action\n\n * `change` {} - on change\n\nAttributes:\n\n * `label-position` {'left' | 'right' | 'top' | 'bottom'} - Specifies the label position of the checkbox or the toggle\n\n * `checked` {boolean} - Reflects the state of the element.\nTrue if checkbox or toggle is checked. Change this to switch the state programmatically.\n\n * `disabled` {boolean} - Disables the input.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - intentional overwrite of FormControlMixins value getter and setter method.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `
|
|
3495
|
+
"description": "Umbraco Toggle-switch, toggles between off/on. Technically a checkbox.\n\nEvents:\n\n * `change-` {} - fires when the element is begin checked by a user action\n\n * `change` {} - on change\n\nAttributes:\n\n * `label-position` {'left' | 'right' | 'top' | 'bottom'} - Specifies the label position of the checkbox or the toggle\n\n * `checked` {boolean} - Reflects the state of the element.\nTrue if checkbox or toggle is checked. Change this to switch the state programmatically.\n\n * `disabled` {boolean} - Disables the input.\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - intentional overwrite of FormControlMixins value getter and setter method.\n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `required-message` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `error-message` {`string`} - Custom error message.\n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperties:\n\n * `labelPosition` {'left' | 'right' | 'top' | 'bottom'} - Specifies the label position of the checkbox or the toggle\n\n * `_checked` {`boolean`} - \n\n * `checked` {boolean} - Reflects the state of the element.\nTrue if checkbox or toggle is checked. Change this to switch the state programmatically.\n\n * `disabled` {boolean} - Disables the input.\n\n * `_input` {`HTMLInputElement`} - \n\n * `styles` {`CSSResult[]`} - \n\n * `inputRole` {`\"checkbox\" | \"switch\"`} - \n\n * `formAssociated` {boolean} - This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n\n * `name` {string} - This is a name property of the component.\n\n * `value` {string} - intentional overwrite of FormControlMixins value getter and setter method.\n\n * `_validityState` - \n\n * `pristine` {boolean} - Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.\n\n * `required` {`boolean`} - Apply validation rule for requiring a value of this form control.\n\n * `requiredMessage` {`string`} - Required validation message.\n\n * `error` {`boolean`} - Apply custom error on this input.\n\n * `errorMessage` {`string`} - Custom error message.\n\n * `_value` {`string | File | FormData`} - \n\n * `_form` {`HTMLFormElement | null`} - \n\n * `_validators` {`Validator[]`} - \n\n * `_formCtrlElements` {`HTMLInputElement[]`} - \n\n * `_customValidityObject` {`Validator | undefined`} - \n\n * `_onFormSubmit` - \n\n * `validity` {`ValidityState`} - \n\n * `validationMessage` - \n\n * `_internals` - \n\n * `label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\n * `_labelSlotHasContent` {`boolean`} - ",
|
|
3476
3496
|
"attributes": [
|
|
3477
3497
|
{
|
|
3478
3498
|
"name": "label-position",
|
|
@@ -3546,6 +3566,11 @@
|
|
|
3546
3566
|
"description": "`change` {} - on change"
|
|
3547
3567
|
}
|
|
3548
3568
|
]
|
|
3569
|
+
},
|
|
3570
|
+
{
|
|
3571
|
+
"name": "uui-visually-hidden",
|
|
3572
|
+
"description": "Properties:\n\n * `styles` {`CSSResult[]`} - ",
|
|
3573
|
+
"attributes": []
|
|
3549
3574
|
}
|
|
3550
3575
|
],
|
|
3551
3576
|
"globalAttributes": [],
|