@umbraco-ui/uui 1.4.0 → 1.5.0-rc.1
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 +515 -351
- package/dist/uui.min.js +55 -55
- package/dist/uui.min.js.map +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +2 -0
- package/package.json +81 -80
- package/vscode-html-custom-data.json +222 -94
|
@@ -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\
|
|
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",
|
|
@@ -326,6 +326,11 @@
|
|
|
326
326
|
"name": "label",
|
|
327
327
|
"description": "`label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperty: label"
|
|
328
328
|
},
|
|
329
|
+
{
|
|
330
|
+
"name": "popovertarget",
|
|
331
|
+
"description": "`popovertarget` {string} - Set a popovertarget.\n\nProperty: popoverContainerElement\n\nDefault: undefined",
|
|
332
|
+
"values": []
|
|
333
|
+
},
|
|
329
334
|
{
|
|
330
335
|
"name": "onclick",
|
|
331
336
|
"description": "`click` - fires when the element is clicked"
|
|
@@ -334,7 +339,7 @@
|
|
|
334
339
|
},
|
|
335
340
|
{
|
|
336
341
|
"name": "uui-card-content-node",
|
|
337
|
-
"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` - ",
|
|
338
343
|
"attributes": [
|
|
339
344
|
{
|
|
340
345
|
"name": "name",
|
|
@@ -404,7 +409,7 @@
|
|
|
404
409
|
},
|
|
405
410
|
{
|
|
406
411
|
"name": "uui-card-media",
|
|
407
|
-
"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` - ",
|
|
408
413
|
"attributes": [
|
|
409
414
|
{
|
|
410
415
|
"name": "name",
|
|
@@ -478,7 +483,7 @@
|
|
|
478
483
|
},
|
|
479
484
|
{
|
|
480
485
|
"name": "uui-card-user",
|
|
481
|
-
"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` - ",
|
|
482
487
|
"attributes": [
|
|
483
488
|
{
|
|
484
489
|
"name": "name",
|
|
@@ -548,7 +553,7 @@
|
|
|
548
553
|
},
|
|
549
554
|
{
|
|
550
555
|
"name": "uui-card",
|
|
551
|
-
"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` - ",
|
|
552
557
|
"attributes": [
|
|
553
558
|
{
|
|
554
559
|
"name": "disabled",
|
|
@@ -614,7 +619,7 @@
|
|
|
614
619
|
},
|
|
615
620
|
{
|
|
616
621
|
"name": "uui-caret",
|
|
617
|
-
"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[]`} - ",
|
|
618
623
|
"attributes": [
|
|
619
624
|
{
|
|
620
625
|
"name": "open",
|
|
@@ -625,23 +630,23 @@
|
|
|
625
630
|
},
|
|
626
631
|
{
|
|
627
632
|
"name": "uui-checkbox",
|
|
628
|
-
"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`} - ",
|
|
629
634
|
"attributes": [
|
|
630
635
|
{
|
|
631
636
|
"name": "label-position",
|
|
632
637
|
"description": "`label-position` {'left' | 'right' | 'top' | 'bottom'} - Specifies the label position of the checkbox or the toggle\n\nProperty: labelPosition\n\nDefault: right",
|
|
633
638
|
"values": [
|
|
634
639
|
{
|
|
635
|
-
"name": "
|
|
640
|
+
"name": "top"
|
|
636
641
|
},
|
|
637
642
|
{
|
|
638
|
-
"name": "
|
|
643
|
+
"name": "bottom"
|
|
639
644
|
},
|
|
640
645
|
{
|
|
641
|
-
"name": "
|
|
646
|
+
"name": "right"
|
|
642
647
|
},
|
|
643
648
|
{
|
|
644
|
-
"name": "
|
|
649
|
+
"name": "left"
|
|
645
650
|
}
|
|
646
651
|
]
|
|
647
652
|
},
|
|
@@ -698,7 +703,7 @@
|
|
|
698
703
|
},
|
|
699
704
|
{
|
|
700
705
|
"name": "uui-color-area",
|
|
701
|
-
"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[]`} - ",
|
|
702
707
|
"attributes": [
|
|
703
708
|
{
|
|
704
709
|
"name": "hue",
|
|
@@ -733,7 +738,7 @@
|
|
|
733
738
|
},
|
|
734
739
|
{
|
|
735
740
|
"name": "uui-color-picker",
|
|
736
|
-
"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`} - ",
|
|
737
742
|
"attributes": [
|
|
738
743
|
{
|
|
739
744
|
"name": "value",
|
|
@@ -741,7 +746,7 @@
|
|
|
741
746
|
},
|
|
742
747
|
{
|
|
743
748
|
"name": "format",
|
|
744
|
-
"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'",
|
|
745
750
|
"values": [
|
|
746
751
|
{
|
|
747
752
|
"name": "hex"
|
|
@@ -751,6 +756,9 @@
|
|
|
751
756
|
},
|
|
752
757
|
{
|
|
753
758
|
"name": "hsl"
|
|
759
|
+
},
|
|
760
|
+
{
|
|
761
|
+
"name": "hsv"
|
|
754
762
|
}
|
|
755
763
|
]
|
|
756
764
|
},
|
|
@@ -810,7 +818,7 @@
|
|
|
810
818
|
},
|
|
811
819
|
{
|
|
812
820
|
"name": "uui-color-slider",
|
|
813
|
-
"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`} - ",
|
|
814
822
|
"attributes": [
|
|
815
823
|
{
|
|
816
824
|
"name": "type",
|
|
@@ -866,7 +874,7 @@
|
|
|
866
874
|
},
|
|
867
875
|
{
|
|
868
876
|
"name": "uui-color-swatch",
|
|
869
|
-
"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.",
|
|
870
878
|
"attributes": [
|
|
871
879
|
{
|
|
872
880
|
"name": "value",
|
|
@@ -913,12 +921,17 @@
|
|
|
913
921
|
},
|
|
914
922
|
{
|
|
915
923
|
"name": "uui-color-swatches",
|
|
916
|
-
"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`} - ",
|
|
917
925
|
"attributes": [
|
|
918
926
|
{
|
|
919
927
|
"name": "value",
|
|
920
928
|
"description": "`value` {`string`} - Value of selected option.\n\nProperty: value\n\nDefault: "
|
|
921
929
|
},
|
|
930
|
+
{
|
|
931
|
+
"name": "disabled",
|
|
932
|
+
"description": "`disabled` {boolean} - Disables the color swatches.\n\nProperty: disabled\n\nDefault: false",
|
|
933
|
+
"valueSet": "v"
|
|
934
|
+
},
|
|
922
935
|
{
|
|
923
936
|
"name": "label",
|
|
924
937
|
"description": "`label` {string} - Label to be used for aria-label and potentially as visual label for some components\n\nProperty: label"
|
|
@@ -931,7 +944,7 @@
|
|
|
931
944
|
},
|
|
932
945
|
{
|
|
933
946
|
"name": "uui-combobox-list-option",
|
|
934
|
-
"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.",
|
|
935
948
|
"attributes": [
|
|
936
949
|
{
|
|
937
950
|
"name": "value",
|
|
@@ -973,7 +986,7 @@
|
|
|
973
986
|
},
|
|
974
987
|
{
|
|
975
988
|
"name": "uui-combobox-list",
|
|
976
|
-
"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[]`} - ",
|
|
977
990
|
"attributes": [
|
|
978
991
|
{
|
|
979
992
|
"name": "value",
|
|
@@ -997,7 +1010,7 @@
|
|
|
997
1010
|
},
|
|
998
1011
|
{
|
|
999
1012
|
"name": "uui-combobox",
|
|
1000
|
-
"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` - ",
|
|
1001
1014
|
"attributes": [
|
|
1002
1015
|
{
|
|
1003
1016
|
"name": "search",
|
|
@@ -1061,7 +1074,7 @@
|
|
|
1061
1074
|
},
|
|
1062
1075
|
{
|
|
1063
1076
|
"name": "uui-dialog-layout",
|
|
1064
|
-
"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[]`} - ",
|
|
1065
1078
|
"attributes": [
|
|
1066
1079
|
{
|
|
1067
1080
|
"name": "headline",
|
|
@@ -1077,7 +1090,7 @@
|
|
|
1077
1090
|
},
|
|
1078
1091
|
{
|
|
1079
1092
|
"name": "uui-file-dropzone",
|
|
1080
|
-
"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`} - ",
|
|
1081
1094
|
"attributes": [
|
|
1082
1095
|
{
|
|
1083
1096
|
"name": "accept",
|
|
@@ -1100,7 +1113,7 @@
|
|
|
1100
1113
|
},
|
|
1101
1114
|
{
|
|
1102
1115
|
"name": "uui-file-preview",
|
|
1103
|
-
"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[]`} - ",
|
|
1104
1117
|
"attributes": [
|
|
1105
1118
|
{
|
|
1106
1119
|
"name": "_name",
|
|
@@ -1131,7 +1144,7 @@
|
|
|
1131
1144
|
},
|
|
1132
1145
|
{
|
|
1133
1146
|
"name": "uui-form-layout-item",
|
|
1134
|
-
"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[]`} - ",
|
|
1135
1148
|
"attributes": [
|
|
1136
1149
|
{
|
|
1137
1150
|
"name": "description",
|
|
@@ -1142,7 +1155,7 @@
|
|
|
1142
1155
|
},
|
|
1143
1156
|
{
|
|
1144
1157
|
"name": "uui-form-validation-message",
|
|
1145
|
-
"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[]`} - ",
|
|
1146
1159
|
"attributes": [
|
|
1147
1160
|
{
|
|
1148
1161
|
"name": "for",
|
|
@@ -1168,8 +1181,12 @@
|
|
|
1168
1181
|
},
|
|
1169
1182
|
{
|
|
1170
1183
|
"name": "uui-icon",
|
|
1171
|
-
"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[]`} - ",
|
|
1172
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
|
+
},
|
|
1173
1190
|
{
|
|
1174
1191
|
"name": "name",
|
|
1175
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",
|
|
@@ -1193,7 +1210,7 @@
|
|
|
1193
1210
|
},
|
|
1194
1211
|
{
|
|
1195
1212
|
"name": "uui-input-file",
|
|
1196
|
-
"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` - ",
|
|
1197
1214
|
"attributes": [
|
|
1198
1215
|
{
|
|
1199
1216
|
"name": "accept",
|
|
@@ -1240,7 +1257,7 @@
|
|
|
1240
1257
|
},
|
|
1241
1258
|
{
|
|
1242
1259
|
"name": "uui-input-lock",
|
|
1243
|
-
"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`} - ",
|
|
1244
1261
|
"attributes": [
|
|
1245
1262
|
{
|
|
1246
1263
|
"name": "locked",
|
|
@@ -1412,7 +1429,7 @@
|
|
|
1412
1429
|
},
|
|
1413
1430
|
{
|
|
1414
1431
|
"name": "uui-input-password",
|
|
1415
|
-
"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`} - ",
|
|
1416
1433
|
"attributes": [
|
|
1417
1434
|
{
|
|
1418
1435
|
"name": "min",
|
|
@@ -1579,7 +1596,7 @@
|
|
|
1579
1596
|
},
|
|
1580
1597
|
{
|
|
1581
1598
|
"name": "uui-input",
|
|
1582
|
-
"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`} - ",
|
|
1583
1600
|
"attributes": [
|
|
1584
1601
|
{
|
|
1585
1602
|
"name": "min",
|
|
@@ -1756,7 +1773,7 @@
|
|
|
1756
1773
|
},
|
|
1757
1774
|
{
|
|
1758
1775
|
"name": "uui-label",
|
|
1759
|
-
"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[]`} - ",
|
|
1760
1777
|
"attributes": [
|
|
1761
1778
|
{
|
|
1762
1779
|
"name": "disabled",
|
|
@@ -1777,7 +1794,7 @@
|
|
|
1777
1794
|
},
|
|
1778
1795
|
{
|
|
1779
1796
|
"name": "uui-loader-bar",
|
|
1780
|
-
"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[]`} - ",
|
|
1781
1798
|
"attributes": [
|
|
1782
1799
|
{
|
|
1783
1800
|
"name": "progress",
|
|
@@ -1791,7 +1808,7 @@
|
|
|
1791
1808
|
},
|
|
1792
1809
|
{
|
|
1793
1810
|
"name": "uui-loader-circle",
|
|
1794
|
-
"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[]`} - ",
|
|
1795
1812
|
"attributes": [
|
|
1796
1813
|
{
|
|
1797
1814
|
"name": "progress",
|
|
@@ -1811,7 +1828,7 @@
|
|
|
1811
1828
|
},
|
|
1812
1829
|
{
|
|
1813
1830
|
"name": "uui-menu-item",
|
|
1814
|
-
"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`} - ",
|
|
1815
1832
|
"attributes": [
|
|
1816
1833
|
{
|
|
1817
1834
|
"name": "disabled",
|
|
@@ -1921,7 +1938,7 @@
|
|
|
1921
1938
|
},
|
|
1922
1939
|
{
|
|
1923
1940
|
"name": "uui-modal-dialog",
|
|
1924
|
-
"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[]`} - ",
|
|
1925
1942
|
"attributes": [
|
|
1926
1943
|
{
|
|
1927
1944
|
"name": "is-open",
|
|
@@ -1942,8 +1959,8 @@
|
|
|
1942
1959
|
"description": "`unique-index` {`number`} - \n\nProperty: uniqueIndex\n\nDefault: 0"
|
|
1943
1960
|
},
|
|
1944
1961
|
{
|
|
1945
|
-
"name": "
|
|
1946
|
-
"description": "`
|
|
1962
|
+
"name": "transition-duration",
|
|
1963
|
+
"description": "`transition-duration` {`number`} - \n\nProperty: transitionDuration"
|
|
1947
1964
|
},
|
|
1948
1965
|
{
|
|
1949
1966
|
"name": "onopen",
|
|
@@ -1952,12 +1969,16 @@
|
|
|
1952
1969
|
{
|
|
1953
1970
|
"name": "onclose",
|
|
1954
1971
|
"description": "`close` {`CustomEvent<unknown>`} - "
|
|
1972
|
+
},
|
|
1973
|
+
{
|
|
1974
|
+
"name": "onclose-end",
|
|
1975
|
+
"description": "`close-end` {`CustomEvent<unknown>`} - "
|
|
1955
1976
|
}
|
|
1956
1977
|
]
|
|
1957
1978
|
},
|
|
1958
1979
|
{
|
|
1959
1980
|
"name": "uui-modal-sidebar",
|
|
1960
|
-
"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[]`} - ",
|
|
1961
1982
|
"attributes": [
|
|
1962
1983
|
{
|
|
1963
1984
|
"name": "size",
|
|
@@ -1996,8 +2017,8 @@
|
|
|
1996
2017
|
"description": "`unique-index` {`number`} - \n\nProperty: uniqueIndex\n\nDefault: 0"
|
|
1997
2018
|
},
|
|
1998
2019
|
{
|
|
1999
|
-
"name": "
|
|
2000
|
-
"description": "`
|
|
2020
|
+
"name": "transition-duration",
|
|
2021
|
+
"description": "`transition-duration` {`number`} - \n\nProperty: transitionDuration"
|
|
2001
2022
|
},
|
|
2002
2023
|
{
|
|
2003
2024
|
"name": "onopen",
|
|
@@ -2006,12 +2027,16 @@
|
|
|
2006
2027
|
{
|
|
2007
2028
|
"name": "onclose",
|
|
2008
2029
|
"description": "`close` {`CustomEvent<unknown>`} - "
|
|
2030
|
+
},
|
|
2031
|
+
{
|
|
2032
|
+
"name": "onclose-end",
|
|
2033
|
+
"description": "`close-end` {`CustomEvent<unknown>`} - "
|
|
2009
2034
|
}
|
|
2010
2035
|
]
|
|
2011
2036
|
},
|
|
2012
2037
|
{
|
|
2013
2038
|
"name": "uui-pagination",
|
|
2014
|
-
"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[]`} - ",
|
|
2015
2040
|
"attributes": [
|
|
2016
2041
|
{
|
|
2017
2042
|
"name": "label",
|
|
@@ -2036,31 +2061,80 @@
|
|
|
2036
2061
|
]
|
|
2037
2062
|
},
|
|
2038
2063
|
{
|
|
2039
|
-
"name": "uui-popover",
|
|
2040
|
-
"description": "Events:\n\n * `
|
|
2064
|
+
"name": "uui-popover-container",
|
|
2065
|
+
"description": "Events:\n\n * `uui-popover-before-toggle` {`CustomEvent<{ oldState: any; newState: any; }>`} - \n\nAttributes:\n\n * `margin` {number} - Set the distance between popover container element and target element.\n\n * `open` {boolean} - Read-only attribute to check if the popover is open\n\n * `placement` {`PopoverContainerPlacement`} - Define the placement of the popover container.\n\nProperties:\n\n * `margin` {number} - Set the distance between popover container element and target element.\n\n * `open` {boolean} - Read-only attribute to check if the popover is open\n\n * `placement` {`PopoverContainerPlacement`} - Define the placement of the popover container.\n\n * `_placement` {`PopoverContainerPlacement`} - \n\n * `_open` {`boolean`} - \n\n * `_actualPlacement` {`PopoverContainerPlacement`} - \n\n * `styles` {`CSSResult[]`} - ",
|
|
2041
2066
|
"attributes": [
|
|
2042
2067
|
{
|
|
2043
2068
|
"name": "margin",
|
|
2044
|
-
"description": "`margin` {number} - Set the distance between popover
|
|
2069
|
+
"description": "`margin` {number} - Set the distance between popover container element and target element.\n\nProperty: margin\n\nDefault: 0"
|
|
2070
|
+
},
|
|
2071
|
+
{
|
|
2072
|
+
"name": "open",
|
|
2073
|
+
"description": "`open` {boolean} - Read-only attribute to check if the popover is open\n\nProperty: open\n\nDefault: false",
|
|
2074
|
+
"valueSet": "v"
|
|
2045
2075
|
},
|
|
2046
2076
|
{
|
|
2047
2077
|
"name": "placement",
|
|
2048
|
-
"description": "`placement` {`
|
|
2078
|
+
"description": "`placement` {`PopoverContainerPlacement`} - Define the placement of the popover container.\n\nProperty: placement\n\nDefault: 'bottom-start'",
|
|
2049
2079
|
"values": [
|
|
2050
2080
|
{
|
|
2051
|
-
"name": "
|
|
2081
|
+
"name": "top"
|
|
2052
2082
|
},
|
|
2053
2083
|
{
|
|
2054
|
-
"name": "
|
|
2084
|
+
"name": "top-start"
|
|
2055
2085
|
},
|
|
2056
2086
|
{
|
|
2057
|
-
"name": "top"
|
|
2087
|
+
"name": "top-end"
|
|
2058
2088
|
},
|
|
2059
2089
|
{
|
|
2060
2090
|
"name": "bottom"
|
|
2061
2091
|
},
|
|
2062
2092
|
{
|
|
2063
|
-
"name": "
|
|
2093
|
+
"name": "bottom-start"
|
|
2094
|
+
},
|
|
2095
|
+
{
|
|
2096
|
+
"name": "bottom-end"
|
|
2097
|
+
},
|
|
2098
|
+
{
|
|
2099
|
+
"name": "right"
|
|
2100
|
+
},
|
|
2101
|
+
{
|
|
2102
|
+
"name": "right-start"
|
|
2103
|
+
},
|
|
2104
|
+
{
|
|
2105
|
+
"name": "right-end"
|
|
2106
|
+
},
|
|
2107
|
+
{
|
|
2108
|
+
"name": "left"
|
|
2109
|
+
},
|
|
2110
|
+
{
|
|
2111
|
+
"name": "left-start"
|
|
2112
|
+
},
|
|
2113
|
+
{
|
|
2114
|
+
"name": "left-end"
|
|
2115
|
+
}
|
|
2116
|
+
]
|
|
2117
|
+
},
|
|
2118
|
+
{
|
|
2119
|
+
"name": "onuui-popover-before-toggle",
|
|
2120
|
+
"description": "`uui-popover-before-toggle` {`CustomEvent<{ oldState: any; newState: any; }>`} - "
|
|
2121
|
+
}
|
|
2122
|
+
]
|
|
2123
|
+
},
|
|
2124
|
+
{
|
|
2125
|
+
"name": "uui-popover",
|
|
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[]`} - ",
|
|
2127
|
+
"attributes": [
|
|
2128
|
+
{
|
|
2129
|
+
"name": "margin",
|
|
2130
|
+
"description": "`margin` {number} - Set the distance between popover-modal and trigger.\n\nProperty: margin\n\nDefault: false"
|
|
2131
|
+
},
|
|
2132
|
+
{
|
|
2133
|
+
"name": "placement",
|
|
2134
|
+
"description": "`placement` {`PopoverPlacement`} - Define the placement of the popover-modal.\n\nProperty: placement\n\nDefault: 'bottom-start'",
|
|
2135
|
+
"values": [
|
|
2136
|
+
{
|
|
2137
|
+
"name": "top"
|
|
2064
2138
|
},
|
|
2065
2139
|
{
|
|
2066
2140
|
"name": "top-start"
|
|
@@ -2068,23 +2142,35 @@
|
|
|
2068
2142
|
{
|
|
2069
2143
|
"name": "top-end"
|
|
2070
2144
|
},
|
|
2145
|
+
{
|
|
2146
|
+
"name": "bottom"
|
|
2147
|
+
},
|
|
2071
2148
|
{
|
|
2072
2149
|
"name": "bottom-start"
|
|
2073
2150
|
},
|
|
2074
2151
|
{
|
|
2075
2152
|
"name": "bottom-end"
|
|
2076
2153
|
},
|
|
2154
|
+
{
|
|
2155
|
+
"name": "right"
|
|
2156
|
+
},
|
|
2077
2157
|
{
|
|
2078
2158
|
"name": "right-start"
|
|
2079
2159
|
},
|
|
2080
2160
|
{
|
|
2081
2161
|
"name": "right-end"
|
|
2082
2162
|
},
|
|
2163
|
+
{
|
|
2164
|
+
"name": "left"
|
|
2165
|
+
},
|
|
2083
2166
|
{
|
|
2084
2167
|
"name": "left-start"
|
|
2085
2168
|
},
|
|
2086
2169
|
{
|
|
2087
2170
|
"name": "left-end"
|
|
2171
|
+
},
|
|
2172
|
+
{
|
|
2173
|
+
"name": "auto"
|
|
2088
2174
|
}
|
|
2089
2175
|
]
|
|
2090
2176
|
},
|
|
@@ -2101,7 +2187,7 @@
|
|
|
2101
2187
|
},
|
|
2102
2188
|
{
|
|
2103
2189
|
"name": "uui-progress-bar",
|
|
2104
|
-
"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[]`} - ",
|
|
2105
2191
|
"attributes": [
|
|
2106
2192
|
{
|
|
2107
2193
|
"name": "progress",
|
|
@@ -2111,7 +2197,7 @@
|
|
|
2111
2197
|
},
|
|
2112
2198
|
{
|
|
2113
2199
|
"name": "uui-radio-group",
|
|
2114
|
-
"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` - ",
|
|
2115
2201
|
"attributes": [
|
|
2116
2202
|
{
|
|
2117
2203
|
"name": "disabled",
|
|
@@ -2154,7 +2240,7 @@
|
|
|
2154
2240
|
},
|
|
2155
2241
|
{
|
|
2156
2242
|
"name": "uui-radio",
|
|
2157
|
-
"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[]`} - ",
|
|
2158
2244
|
"attributes": [
|
|
2159
2245
|
{
|
|
2160
2246
|
"name": "name",
|
|
@@ -2186,7 +2272,7 @@
|
|
|
2186
2272
|
},
|
|
2187
2273
|
{
|
|
2188
2274
|
"name": "uui-range-slider",
|
|
2189
|
-
"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` - ",
|
|
2190
2276
|
"attributes": [
|
|
2191
2277
|
{
|
|
2192
2278
|
"name": "disabled",
|
|
@@ -2281,7 +2367,7 @@
|
|
|
2281
2367
|
},
|
|
2282
2368
|
{
|
|
2283
2369
|
"name": "uui-ref-node-data-type",
|
|
2284
|
-
"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` - ",
|
|
2285
2371
|
"attributes": [
|
|
2286
2372
|
{
|
|
2287
2373
|
"name": "alias",
|
|
@@ -2336,7 +2422,7 @@
|
|
|
2336
2422
|
},
|
|
2337
2423
|
{
|
|
2338
2424
|
"name": "uui-ref-node-document-type",
|
|
2339
|
-
"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` - ",
|
|
2340
2426
|
"attributes": [
|
|
2341
2427
|
{
|
|
2342
2428
|
"name": "alias",
|
|
@@ -2391,7 +2477,7 @@
|
|
|
2391
2477
|
},
|
|
2392
2478
|
{
|
|
2393
2479
|
"name": "uui-ref-node-form",
|
|
2394
|
-
"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` - ",
|
|
2395
2481
|
"attributes": [
|
|
2396
2482
|
{
|
|
2397
2483
|
"name": "name",
|
|
@@ -2442,7 +2528,7 @@
|
|
|
2442
2528
|
},
|
|
2443
2529
|
{
|
|
2444
2530
|
"name": "uui-ref-node-member",
|
|
2445
|
-
"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` - ",
|
|
2446
2532
|
"attributes": [
|
|
2447
2533
|
{
|
|
2448
2534
|
"name": "group-name",
|
|
@@ -2497,7 +2583,7 @@
|
|
|
2497
2583
|
},
|
|
2498
2584
|
{
|
|
2499
2585
|
"name": "uui-ref-node-package",
|
|
2500
|
-
"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` - ",
|
|
2501
2587
|
"attributes": [
|
|
2502
2588
|
{
|
|
2503
2589
|
"name": "version",
|
|
@@ -2556,7 +2642,7 @@
|
|
|
2556
2642
|
},
|
|
2557
2643
|
{
|
|
2558
2644
|
"name": "uui-ref-node-user",
|
|
2559
|
-
"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` - ",
|
|
2560
2646
|
"attributes": [
|
|
2561
2647
|
{
|
|
2562
2648
|
"name": "group-name",
|
|
@@ -2611,7 +2697,7 @@
|
|
|
2611
2697
|
},
|
|
2612
2698
|
{
|
|
2613
2699
|
"name": "uui-ref-node",
|
|
2614
|
-
"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` - ",
|
|
2615
2701
|
"attributes": [
|
|
2616
2702
|
{
|
|
2617
2703
|
"name": "name",
|
|
@@ -2662,7 +2748,7 @@
|
|
|
2662
2748
|
},
|
|
2663
2749
|
{
|
|
2664
2750
|
"name": "uui-ref",
|
|
2665
|
-
"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` - ",
|
|
2666
2752
|
"attributes": [
|
|
2667
2753
|
{
|
|
2668
2754
|
"name": "disabled",
|
|
@@ -2716,7 +2802,7 @@
|
|
|
2716
2802
|
},
|
|
2717
2803
|
{
|
|
2718
2804
|
"name": "uui-select",
|
|
2719
|
-
"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` - ",
|
|
2720
2806
|
"attributes": [
|
|
2721
2807
|
{
|
|
2722
2808
|
"name": "label",
|
|
@@ -2775,7 +2861,7 @@
|
|
|
2775
2861
|
},
|
|
2776
2862
|
{
|
|
2777
2863
|
"name": "uui-slider",
|
|
2778
|
-
"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` - ",
|
|
2779
2865
|
"attributes": [
|
|
2780
2866
|
{
|
|
2781
2867
|
"name": "hide-step-values",
|
|
@@ -2843,7 +2929,7 @@
|
|
|
2843
2929
|
},
|
|
2844
2930
|
{
|
|
2845
2931
|
"name": "uui-symbol-expand",
|
|
2846
|
-
"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[]`} - ",
|
|
2847
2933
|
"attributes": [
|
|
2848
2934
|
{
|
|
2849
2935
|
"name": "open",
|
|
@@ -2854,7 +2940,7 @@
|
|
|
2854
2940
|
},
|
|
2855
2941
|
{
|
|
2856
2942
|
"name": "uui-symbol-file-dropzone",
|
|
2857
|
-
"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[]`} - ",
|
|
2858
2944
|
"attributes": [
|
|
2859
2945
|
{
|
|
2860
2946
|
"name": "error",
|
|
@@ -2865,7 +2951,7 @@
|
|
|
2865
2951
|
},
|
|
2866
2952
|
{
|
|
2867
2953
|
"name": "uui-symbol-file-thumbnail",
|
|
2868
|
-
"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[]`} - ",
|
|
2869
2955
|
"attributes": [
|
|
2870
2956
|
{
|
|
2871
2957
|
"name": "src",
|
|
@@ -2879,7 +2965,7 @@
|
|
|
2879
2965
|
},
|
|
2880
2966
|
{
|
|
2881
2967
|
"name": "uui-file-symbol",
|
|
2882
|
-
"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[]`} - ",
|
|
2883
2969
|
"attributes": [
|
|
2884
2970
|
{
|
|
2885
2971
|
"name": "type",
|
|
@@ -2889,7 +2975,7 @@
|
|
|
2889
2975
|
},
|
|
2890
2976
|
{
|
|
2891
2977
|
"name": "uui-symbol-file",
|
|
2892
|
-
"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[]`} - ",
|
|
2893
2979
|
"attributes": [
|
|
2894
2980
|
{
|
|
2895
2981
|
"name": "type",
|
|
@@ -2909,7 +2995,7 @@
|
|
|
2909
2995
|
},
|
|
2910
2996
|
{
|
|
2911
2997
|
"name": "uui-symbol-lock",
|
|
2912
|
-
"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[]`} - ",
|
|
2913
2999
|
"attributes": [
|
|
2914
3000
|
{
|
|
2915
3001
|
"name": "open",
|
|
@@ -2925,7 +3011,7 @@
|
|
|
2925
3011
|
},
|
|
2926
3012
|
{
|
|
2927
3013
|
"name": "uui-symbol-sort",
|
|
2928
|
-
"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.",
|
|
2929
3015
|
"attributes": [
|
|
2930
3016
|
{
|
|
2931
3017
|
"name": "descending",
|
|
@@ -2941,7 +3027,7 @@
|
|
|
2941
3027
|
},
|
|
2942
3028
|
{
|
|
2943
3029
|
"name": "uui-table-cell",
|
|
2944
|
-
"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[]`} - ",
|
|
2945
3031
|
"attributes": [
|
|
2946
3032
|
{
|
|
2947
3033
|
"name": "disable-child-interaction",
|
|
@@ -2967,7 +3053,7 @@
|
|
|
2967
3053
|
},
|
|
2968
3054
|
{
|
|
2969
3055
|
"name": "uui-table-head-cell",
|
|
2970
|
-
"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[]`} - ",
|
|
2971
3057
|
"attributes": [
|
|
2972
3058
|
{
|
|
2973
3059
|
"name": "disable-child-interaction",
|
|
@@ -2993,7 +3079,7 @@
|
|
|
2993
3079
|
},
|
|
2994
3080
|
{
|
|
2995
3081
|
"name": "uui-table-row",
|
|
2996
|
-
"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` - ",
|
|
2997
3083
|
"attributes": [
|
|
2998
3084
|
{
|
|
2999
3085
|
"name": "select-only",
|
|
@@ -3027,12 +3113,25 @@
|
|
|
3027
3113
|
},
|
|
3028
3114
|
{
|
|
3029
3115
|
"name": "uui-tab-group",
|
|
3030
|
-
"description": "Slots:\n\n * ` ` {} - Default slot for the tab group\n\
|
|
3031
|
-
"attributes": [
|
|
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[]`} - ",
|
|
3117
|
+
"attributes": [
|
|
3118
|
+
{
|
|
3119
|
+
"name": "dropdown-content-direction",
|
|
3120
|
+
"description": "`dropdown-content-direction` {string} - Set the flex direction of the content of the dropdown.\n\nProperty: dropdownContentDirection\n\nDefault: vertical",
|
|
3121
|
+
"values": [
|
|
3122
|
+
{
|
|
3123
|
+
"name": "vertical"
|
|
3124
|
+
},
|
|
3125
|
+
{
|
|
3126
|
+
"name": "horizontal"
|
|
3127
|
+
}
|
|
3128
|
+
]
|
|
3129
|
+
}
|
|
3130
|
+
]
|
|
3032
3131
|
},
|
|
3033
3132
|
{
|
|
3034
3133
|
"name": "uui-tabs",
|
|
3035
|
-
"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 * `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`} - ",
|
|
3036
3135
|
"attributes": [
|
|
3037
3136
|
{
|
|
3038
3137
|
"name": "disabled",
|
|
@@ -3062,6 +3161,18 @@
|
|
|
3062
3161
|
}
|
|
3063
3162
|
]
|
|
3064
3163
|
},
|
|
3164
|
+
{
|
|
3165
|
+
"name": "orientation",
|
|
3166
|
+
"description": "`orientation` {string} - Set the visual orientation of this tab, this changes the look and placement of the active indication.\n\nProperty: orientation\n\nDefault: horizontal",
|
|
3167
|
+
"values": [
|
|
3168
|
+
{
|
|
3169
|
+
"name": "vertical"
|
|
3170
|
+
},
|
|
3171
|
+
{
|
|
3172
|
+
"name": "horizontal"
|
|
3173
|
+
}
|
|
3174
|
+
]
|
|
3175
|
+
},
|
|
3065
3176
|
{
|
|
3066
3177
|
"name": "active",
|
|
3067
3178
|
"description": "`active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\nProperty: active\n\nDefault: false",
|
|
@@ -3075,7 +3186,7 @@
|
|
|
3075
3186
|
},
|
|
3076
3187
|
{
|
|
3077
3188
|
"name": "uui-tab",
|
|
3078
|
-
"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 * `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`} - ",
|
|
3079
3190
|
"attributes": [
|
|
3080
3191
|
{
|
|
3081
3192
|
"name": "disabled",
|
|
@@ -3105,6 +3216,18 @@
|
|
|
3105
3216
|
}
|
|
3106
3217
|
]
|
|
3107
3218
|
},
|
|
3219
|
+
{
|
|
3220
|
+
"name": "orientation",
|
|
3221
|
+
"description": "`orientation` {string} - Set the visual orientation of this tab, this changes the look and placement of the active indication.\n\nProperty: orientation\n\nDefault: horizontal",
|
|
3222
|
+
"values": [
|
|
3223
|
+
{
|
|
3224
|
+
"name": "vertical"
|
|
3225
|
+
},
|
|
3226
|
+
{
|
|
3227
|
+
"name": "horizontal"
|
|
3228
|
+
}
|
|
3229
|
+
]
|
|
3230
|
+
},
|
|
3108
3231
|
{
|
|
3109
3232
|
"name": "active",
|
|
3110
3233
|
"description": "`active` {boolean} - Set this boolean to true for then the related composition is sorted.\n\nProperty: active\n\nDefault: false",
|
|
@@ -3118,7 +3241,7 @@
|
|
|
3118
3241
|
},
|
|
3119
3242
|
{
|
|
3120
3243
|
"name": "uui-tag",
|
|
3121
|
-
"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[]`} - ",
|
|
3122
3245
|
"attributes": [
|
|
3123
3246
|
{
|
|
3124
3247
|
"name": "color",
|
|
@@ -3169,7 +3292,7 @@
|
|
|
3169
3292
|
},
|
|
3170
3293
|
{
|
|
3171
3294
|
"name": "uui-textarea",
|
|
3172
|
-
"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` - ",
|
|
3173
3296
|
"attributes": [
|
|
3174
3297
|
{
|
|
3175
3298
|
"name": "placeholder",
|
|
@@ -3285,7 +3408,7 @@
|
|
|
3285
3408
|
},
|
|
3286
3409
|
{
|
|
3287
3410
|
"name": "uui-toast-notification-container",
|
|
3288
|
-
"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.",
|
|
3289
3412
|
"attributes": [
|
|
3290
3413
|
{
|
|
3291
3414
|
"name": "auto-close",
|
|
@@ -3306,7 +3429,7 @@
|
|
|
3306
3429
|
},
|
|
3307
3430
|
{
|
|
3308
3431
|
"name": "uui-toast-notification-layout",
|
|
3309
|
-
"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[]`} - ",
|
|
3310
3433
|
"attributes": [
|
|
3311
3434
|
{
|
|
3312
3435
|
"name": "headline",
|
|
@@ -3316,7 +3439,7 @@
|
|
|
3316
3439
|
},
|
|
3317
3440
|
{
|
|
3318
3441
|
"name": "uui-toast-notification",
|
|
3319
|
-
"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[]`} - ",
|
|
3320
3443
|
"attributes": [
|
|
3321
3444
|
{
|
|
3322
3445
|
"name": "color",
|
|
@@ -3369,23 +3492,23 @@
|
|
|
3369
3492
|
},
|
|
3370
3493
|
{
|
|
3371
3494
|
"name": "uui-toggle",
|
|
3372
|
-
"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`} - ",
|
|
3373
3496
|
"attributes": [
|
|
3374
3497
|
{
|
|
3375
3498
|
"name": "label-position",
|
|
3376
3499
|
"description": "`label-position` {'left' | 'right' | 'top' | 'bottom'} - Specifies the label position of the checkbox or the toggle\n\nProperty: labelPosition\n\nDefault: right",
|
|
3377
3500
|
"values": [
|
|
3378
3501
|
{
|
|
3379
|
-
"name": "
|
|
3502
|
+
"name": "top"
|
|
3380
3503
|
},
|
|
3381
3504
|
{
|
|
3382
|
-
"name": "
|
|
3505
|
+
"name": "bottom"
|
|
3383
3506
|
},
|
|
3384
3507
|
{
|
|
3385
|
-
"name": "
|
|
3508
|
+
"name": "right"
|
|
3386
3509
|
},
|
|
3387
3510
|
{
|
|
3388
|
-
"name": "
|
|
3511
|
+
"name": "left"
|
|
3389
3512
|
}
|
|
3390
3513
|
]
|
|
3391
3514
|
},
|
|
@@ -3443,6 +3566,11 @@
|
|
|
3443
3566
|
"description": "`change` {} - on change"
|
|
3444
3567
|
}
|
|
3445
3568
|
]
|
|
3569
|
+
},
|
|
3570
|
+
{
|
|
3571
|
+
"name": "uui-visually-hidden",
|
|
3572
|
+
"description": "Properties:\n\n * `styles` {`CSSResult[]`} - ",
|
|
3573
|
+
"attributes": []
|
|
3446
3574
|
}
|
|
3447
3575
|
],
|
|
3448
3576
|
"globalAttributes": [],
|