[ { "id": "oj-c.SelectSingle", "name": "SelectSingle", "memberof": "oj-c", "kind": "class", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "ojcomponent": true, "isvcomponent": true, "since": "14.0.0", "longname": "oj-c.SelectSingle", "pack": "oj-c", "classdesc": "

\n JET Select Single\n \n

\n

Description: JET Select Single provides support for single-select and search filtering.

\n\n

A JET Select Single can be created with the following markup.

\n\n
\n<oj-c-select-single data=\"[[dataProvider]]\" item-text=\"label\" label-hint=\"Select Single\">\n</oj-c-select-single>\n
\n\n

Data

\n

The only way to provide data to JET Select Single is through a\nDataProvider. For cases with\na small set of fixed data, use an ArrayDataProvider.

\n\n

\n Differences between Select and Combobox components\n \n

\n\n

\noj-c-select-* components and oj-combobox-* components may look and feel similar,\nbut these components are different and are intended for very different use cases.\n

\n\n

\nWhile oj-c-select-* components allow a user to filter the data in the dropdown,\nit is not possible to enter values that are not available in the data.\nThis makes oj-c-select-* components ideal for usecases where the user can only\nselect values that are available in the dropdown, but not provide custom\nvalues of their own.\n

\n\n

\nIn contrast, oj-combobox-* components allow a user to enter new values that are\nnot available in the data in addition to using the text field for filtering dropdown data.\nThis makes oj-combobox-* components ideal for usecases where the users can provide\ncustom values in addition to those that are already available in the dropdown data.\n

\n\n

\nApplication developers should consider the above differences when choosing between\nSelect and Combobox components.\nAdditionally, applications are advised to use oj-c-select-single instead of oj-select-single.\n

\n\n

\n Disabled Items\n \n

\n\n

\nDisabled items are not supported in oj-c-select-* components; items that aren't selectable\nshould be removed rather than shown as disabled. Keep in mind disabled items usually don't pass\ncontrast and therefore people with low vision can't see them, so for accessibility reasons\nyou can't use disabled for \"meaningful content\".\n

\n\n

\n Validation and Messaging\n \n

\n\n

\nFor components that support validators, any invalid values entered by the user are not pushed into the value\nif validation fails: the valid property will change but the original value will remain unchanged.\nThe same thing applies to required validation: if required is set to true and the user clears the field,\nvalid will change, but empty values will not be pushed so the original value remains unchanged.\n

\n

\nUse \n<oj-validation-group> to handle tracking valid across multiple components.\n

\n\n

\nAn editable component runs validation (normal or deferred) based on the action performed on it\n(either by end-user or page author), and the state it was in when the action occurred. Examples\nof actions are - creating a component, user changing the value of the component by interacting\nwith it, the app setting a value programmatically, the app calling the validate() method etc. At\nthe time the action occurs, the component could already be showing errors, or can have a deferred\nerror or have no errors.\n

\n

\nThese factors also determine whether validation errors/messages get shown to the user immediately\nor get deferred. The following sections highlight the kinds of validation that are run and how\nmessages get handled.\n

\n\n

\n Normal Validation\n \n

\nNormal validation is run in the following cases on the display value, using the converter and\nvalidators (this includes async-validators) set on the component (for components that support these properties),\nand validation errors are reported to user immediately.\n\n\n

\n Deferred Validation\n \n

\nDeferred validation is run in the following cases on the component value using the implicit\nrequired validator if required is true, and validation errors are deferred, i.e., not shown to user immediately.\nRefer to the Showing Deferred Messages section to\nunderstand how deferred messages can be shown.\n\n\n

\n Mixed Validation\n \n

\nEither deferred or normal validation is run in the following cases based on the state the\ncomponent is in and any validation errors encountered are either hidden or shown to user.\n\n\n

\n Showing Deferred Messages\n \n

\nDeferred validation messages are displayed only when page author requests for it explicitly in\none of the following ways:\n\n\n

\n Validators Participating in Deferred Validation\n \n

\nThe required validator is the only validator type that participates in deferred validation.\nThe required property needs to be set to true for the required validator to run.\n\n

\n User Assistance Text\n \n

\n

\nUser assistive text provides guidance to help the user understand what data to enter or select.\n

\n

\nBy default all user assistance text shows inline.\nFor input components, it shows when the field takes focus. In other components\nit shows all the time. See the user-assistance-density property for other ways\nthe user assistance text can render, like in 'compact' mode, it will render as an icon on the label\nwhich when clicked will show the user assistance text in a notewindow.\n

\n

\nThe JET form component properties that are used for user assistance text are help.instruction,\nvalidator and converter hints (for components that support these properties), and help-hints.\nIn the Redwood theme for clarity only one user assistance text shows to the user.\nThe precedence rules are:\n

\n

\n

For components that support validators or converters, sometimes a hint shows that you do not want to show. To not show it,\n set the display-options.validator-hint and/or display-options.converter-hint property to 'none'.\n

\n

The required and placeholder properties also can be used to guide the user.\nIn Redwood, a required field shows the word Required under the field\nwhen the field is empty and does not have focus.\nPlaceholder is shown when the field is empty and has focus.\n

\n\n

\n Touch End User Information\n \n

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetGestureAction
Input fieldTap If the dropdown is not open, expand the dropdown list.\n If hints, title or messages exist in a notewindow,\n pop up the notewindow.
Arrow buttonTap If the dropdown is not open, expand the dropdown list. Otherwise, close the dropdown list.
Option itemTap Tap on an option item in the dropdown list to select.
\n\n

\n Keyboard End User Information\n \n

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetKeyAction
Option itemEnter or Space Select the highlighted choice from the dropdown and close the dropdown.
Option itemTab Select the highlighted choice from the dropdown and transfer focus to the next\n tabbable element on the page.
Option item (when showing Add to list or Advanced search link)Tab Keeps the choice highlighted and transfer focus to the Add to list or Advanced search link.
Add to list or Advanced search linkEnter Triggers the ojAddToListAction or the ojAdvancedSearchAction and closes the dropdown.
Add to list or Advanced search linkTab Select the highlighted choice from the dropdown and transfer focus to the next\n tabbable element on the page.
Input fieldEsc Collapse the dropdown list. If the dropdown is already closed, do nothing.
Input fieldEnter If the selected value text has been deleted, clear the value and close the dropdown.\n If filtering, select the highlighted choice from the dropdown and close the\n dropdown.
Input fieldTab If the selected value text has been deleted, clear the value and transfer focus\n to the next tabbable element on the page. If filtering, select the highlighted choice\n from the dropdown and transfer focus to the next tabbable element on the page.
Input fieldUpArrow or DownArrow If the dropdown is not open, expand the dropdown list. Otherwise, transfer\n focus into the dropdown list.
DropdownUpArrow or DownArrow Highlight the option item in the dropdown list in the direction of the arrow.
DropdownEsc Collapse the dropdown list.
SelectTab InSet focus to the Select. If hints, title or messages exist in a notewindow,\n pop up the notewindow.
\n\n

\n Performance\n \n

\n\n

Page Load

\n

If there is an initially selected value, setting the valueItem attribute initially can improve page load performance because the element will not have to fetch the selected data from the data provider.

\n

The dropdown data isn't fetched until the user opens the dropdown.

\n\n

\n Accessibility\n \n

\n\n

\nFor accessibility, set the label-hint property.\nIf there is no visible label, then to make this accessible to screen reader users,\nset the label-hint and label-edge='none'\nwhich renders an aria-label with the label-hint text.\n

\n\n

\nThe placeholder text is not read reliably by the screen reader. For accessibility reasons,\nyou need to associate the text to its JET form component using aria-describedby.\n

\n\n

\nDisabled content: JET supports an accessible luminosity contrast ratio,\nas specified in WCAG 2.0 - Section 1.4.3 \"Contrast\",\nin the themes that are accessible. (See the \"Theming\" chapter of the JET Developer Guide for more information on which\nthemes are accessible.) Note that Section 1.4.3 says that text or images of text that are part of an inactive user\ninterface component have no contrast requirement. Because disabled content may not meet the minimum contrast ratio\nrequired of enabled content, it cannot be used to convey meaningful information.\n

", "scope": "static", "tagWithoutBrackets": "oj-c-select-single", "tagWithBrackets": "", "domInterface": "CSelectSingleElement", "ojPageTitle": "<oj-c-select-single>", "camelCaseName": "SelectSingle", "ojPageTitlePrefix": "Element: ", "ojtsvcomponent": true, "tstype": { "target": "Type", "value": "interface CSelectSingleElement> extends JetElement>" }, "ojsignature": [ { "target": "Type", "value": "interface CSelectSingleElement> extends JetElement>" } ], "tsdeprecated": [ { "type": "supersedes", "since": "19.0.0", "value": [ "oj-select-single", "oj-combobox-one" ] } ], "extension": { "catalog": { "category": "Forms" }, "vbdt": { "module": "oj-c/select-single", "defaultColumns": 6, "minColumns": 2 }, "oracle": { "icon": "oj-ux-ico-select", "uxSpecs": [ "select-single-items" ] } }, "ojmodule": "select-single" }, { "id": "oj-c.SelectSingle#addToList", "name": "addToList", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#addToList", "scope": "instance", "type": { "names": [ "\"off\"", "\"on\"" ] }, "optional": true, "ojdisplayname": "Add to List", "ojshortdesc": "Specifies whether the add to list link is shown in the dropdown when the user filters.", "description": "

\nSpecifies whether the add to list link is shown in the dropdown when the user filters.\nIt is up to the application to show its own UI when the link is triggered.\n

\n

\nAdvanced search and Add to list should not be enabled at the same time. If both are on, advanced search will take precedence\nbecause its external UI could also potentially include the ability to add to list.\n

", "defaultvalue": "'off'" }, { "id": "oj-c.SelectSingle#advancedSearch", "name": "advancedSearch", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#advancedSearch", "scope": "instance", "type": { "names": [ "\"off\"", "\"on\"" ] }, "optional": true, "ojdisplayname": "Advanced Search", "ojshortdesc": "Specifies whether the advanced search link is shown in the dropdown when the user filters.", "description": "

\nSpecifies whether the advanced search link is shown in the dropdown when the user filters.\nIt is up to the application to show its own UI when the link is triggered.\n

\n

\nAdvanced search and Add to list should not be enabled at the same time. If both are on, advanced search will take precedence\nbecause its external UI could also potentially include the ability to add to list.\n

", "defaultvalue": "'off'" }, { "id": "oj-c.SelectSingle#columnSpan", "name": "columnSpan", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#columnSpan", "scope": "instance", "type": { "names": [ "number" ] }, "optional": true, "ojdisplayname": "Column Span", "ojshortdesc": "Specifies how many columns this component should span.", "description": "Specifies how many columns this component should span.\nThis only takes effect when this component is a child of a form layout\nthat has direction 'row'.", "defaultvalue": 1 }, { "id": "oj-c.SelectSingle#containerReadonly", "name": "containerReadonly", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#containerReadonly", "scope": "instance", "type": { "names": [ "boolean" ] }, "optional": true, "ojdisplayname": "Container Readonly", "ojshortdesc": "Specifies whether an ancestor container, like oj-c-form-layout, is readonly.", "description": "Specifies whether an ancestor container, like oj-c-form-layout, is readonly.\nThis affects whether a readonly component renders in full or mixed readonly mode.\nThis is also currently used to determine if there is an ancestor container by checking if the value\nis not equal to undefined." }, { "id": "oj-c.SelectSingle#data", "name": "data", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#data", "scope": "instance", "type": { "names": [ "DataProvider|null" ] }, "optional": true, "ojdisplayname": "Data", "ojshortdesc": "The data source for SelectSingle.", "description": "The data for the Select Single.", "defaultvalue": null, "tstype": [ { "target": "Type", "value": "DataProvider|null", "jsdocOverride": true, "module": { "DataProvider": "ojdataprovider" } } ] }, { "id": "oj-c.SelectSingle#disabled", "name": "disabled", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#disabled", "scope": "instance", "type": { "names": [ "boolean" ] }, "optional": true, "ojdisplayname": "Disabled", "ojshortdesc": "Specifies whether the component is disabled.", "description": "Whether the component is disabled. The default is false.\n\n

\nWhen the disabled property changes due to programmatic\nintervention, the component may clear messages and run validation in some cases.
\n

    \n
  • when a required component is initialized as disabled\nvalue=\"{{currentValue}}\" required disabled,\ndeferred validation is skipped.
    • \n
  • when a disabled component is enabled,\n
      \n
    • if component is invalid and showing messages then all component messages are cleared,\n and full validation run using the display value.\n
        \n
      • if there are validation errors, they are shown.
        • \n
      • if no errors result from the validation, the value\n property is updated. Page authors can listen to the valueChanged\n event to clear custom errors.
        • \n
      \n
      • \n\n
    • if component is valid and has no errors then deferred validation is run.\n
        \n
      • if there is a deferred validation error, then the valid property is updated.
        • \n
      \n
      • \n
    • if component is invalid and deferred errors then component messages are cleared and\n deferred validation re-run.\n
        \n
      • if there is a deferred validation error, then the valid property is updated.
        • \n
      \n
      • \n
    \n
    • \n
  • when enabled component is disabled then no validation is run and the component appears\ndisabled.
    • \n
\n

", "defaultvalue": false }, { "id": "oj-c.SelectSingle#displayOptions", "name": "displayOptions", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#displayOptions", "scope": "instance", "type": { "names": [ "object" ] }, "optional": true, "ojdisplayname": "Display Options", "description": "Display options for auxiliary content that determines whether or not it should be displayed.", "tstype": [ { "target": "Type", "value": "oj-c.SelectSingle.DisplayOptionsProps", "jsdocOverride": true } ] }, { "id": "oj-c.SelectSingle#help", "name": "help", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#help", "scope": "instance", "type": { "names": [ "object" ] }, "optional": true, "ojdisplayname": "Help", "description": "Form component help information.", "tstype": [ { "target": "Type", "value": "oj-c.SelectSingle.Help", "jsdocOverride": true } ] }, { "id": "oj-c.SelectSingle#helpHints", "name": "helpHints", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#helpHints", "scope": "instance", "type": { "names": [ "object" ] }, "optional": true, "ojdisplayname": "Help Hints", "description": "The helpHints object contains a definition property and a source property.", "tstype": [ { "target": "Type", "value": "oj-c.SelectSingle.HelpHints", "jsdocOverride": true } ] }, { "id": "oj-c.SelectSingle#itemText", "name": "itemText", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#itemText", "scope": "instance", "type": { "names": [ "string|number|function" ] }, "optional": false, "ojdisplayname": "Item Text", "ojshortdesc": "Specifies how to get the text string to render for a data item.", "description": "Specifies how to get the text string to render for a data item.\nThis attribute can be set to either:\n
    \n
  • a string that specifies the name of a top level data attribute to render as text, or
    • \n
  • a callback function that takes a properties object and returns the text string to\ndisplay
    • \n
\n\n

This text will be rendered for the selected value of the component and for each data item\nin the dropdown. When rendered for the dropdown items, default matching search term\nhighlighting will be applied.

", "tstype": [ { "target": "Type", "value": "keyof D|(itemContext: ItemContext) => string", "jsdocOverride": true, "module": { "ItemContext": "ojcommontypes" } } ] }, { "id": "oj-c.SelectSingle#labelEdge", "name": "labelEdge", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#labelEdge", "scope": "instance", "type": { "names": [ "\"none\"", "\"start\"", "\"top\"", "\"inside\"" ] }, "optional": true, "ojdisplayname": "Label Edge", "ojshortdesc": "Specifies how the label is positioned for the component", "description": "Specifies how the label of the component is positioned when the label-hint\nattribute is set on the component.", "ojvalues": [ { "name": "inside", "description": "The label floats over the input element, but moves up on focus or when the component has a value (default, if unspecified).", "displayName": "Inside", "type": { "names": [ "string" ] } }, { "name": "none", "description": "The component will not create a label, but instead set the aria-label property on the input element.", "displayName": "None", "type": { "names": [ "string" ] } }, { "name": "start", "description": "The label will be placed before the start of the component.", "displayName": "Start", "type": { "names": [ "string" ] } }, { "name": "top", "description": "The label will be placed on top of the component.", "displayName": "Top", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true }, { "id": "oj-c.SelectSingle#labelHint", "name": "labelHint", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#labelHint", "scope": "instance", "type": { "names": [ "string" ] }, "optional": false, "ojdisplayname": "Label Hint", "ojshortdesc": "Represents a hint for rendering a label on the component.", "description": "Represents a hint for rendering a label on the component.\nThis is used in combination with the label-edge attribute to control how the label should be rendered." }, { "id": "oj-c.SelectSingle#labelStartWidth", "name": "labelStartWidth", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#labelStartWidth", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojdisplayname": "Label Start Width", "ojshortdesc": "The width of the label when labelEdge is 'start'", "description": "

The width of the label when labelEdge is 'start'.

\n

This attribute accepts values of type\n0 | `--${string}` | `${number}%` | `${number}x` | `calc(${string})`

" }, { "id": "oj-c.SelectSingle#labelWrapping", "name": "labelWrapping", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#labelWrapping", "scope": "instance", "type": { "names": [ "\"truncate\"", "\"wrap\"" ] }, "optional": true, "ojdisplayname": "Label Wrapping", "ojshortdesc": "Should the labels wrap or truncate when there is not enough available space.", "description": "Should the labels wrap or truncate when there is not enough available space.", "tsdeprecated": [ { "type": "deprecated", "since": "18.0.0", "description": "Label truncation for 'start' and 'top' aligned labels is no longer recommended by the Redwood Design System. The default for labelWrapping was 'wrap' and that is now the only suggested pattern by UX design for 'start' and 'top' aligned labels. 'inside' aligned labels are always truncated per UX design and are not affected by this property's value." } ], "ojvalues": [ { "name": "truncate", "description": "Label will truncate if needed.", "displayName": "Truncate", "type": { "names": [ "string" ] } }, { "name": "wrap", "description": "Label will wrap if needed.", "displayName": "Wrap", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true }, { "id": "oj-c.SelectSingle#matchBy", "name": "matchBy", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#matchBy", "scope": "instance", "type": { "names": [ "Array|null" ] }, "optional": true, "ojdisplayname": "Match By", "ojshortdesc": "List of text filter matching behaviors to use when filtering.", "description": "The list of TextFilter.matchBy behaviors to use\nwhen fetching data filtered by a user's typed search text, in order of descending priority\nwith the preferred behavior first.\nIf the preferred behavior is not supported by the DataProvider, then the component will\ncheck the next behavior, and so on, until it finds one that is supported.\nIf none of the specified behaviors are supported or if this property is not specified,\nthen the behavior will effectively be \"unknown\".", "defaultvalue": null }, { "id": "oj-c.SelectSingle#maxWidth", "name": "maxWidth", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#maxWidth", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojdisplayname": "Max Width", "ojshortdesc": "The max width of the control.", "description": "Specifies the component's max width. If unset, the default max width is 100%.", "ojvalues": [ { "name": "sm", "type": { "names": [ "string" ] } }, { "name": "md", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "tstype": [ { "target": "Type", "value": "number|string|\"sm\"|\"md\"", "jsdocOverride": true } ] }, { "id": "oj-c.SelectSingle#messagesCustom", "name": "messagesCustom", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#messagesCustom", "scope": "instance", "type": { "names": [ "Array" ] }, "optional": true, "ojdisplayname": "Messages Custom", "ojwriteback": true, "ojshortdesc": "List of custom component messages", "description": "List of messages an app would add to the component when it has business/custom validation\nerrors that it wants the component to show. This allows the app to perform further validation\nbefore sending data to the server. When this option is set the message shows to the\nuser right away. To clear the custom message, set messagesCustom\nback to an empty array.
\n

\nSee the Validation and Messages section\nfor details on when the component clears messagesCustom;\nfor example, when full validation is run.\n

", "defaultvalue": "[]", "tstype": [ { "target": "Type", "value": "Array", "jsdocOverride": true } ] }, { "id": "oj-c.SelectSingle#placeholder", "name": "placeholder", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#placeholder", "scope": "instance", "type": { "names": [ "string" ] }, "optional": true, "ojdisplayname": "Placeholder", "description": "The placeholder text to set on the element." }, { "id": "oj-c.SelectSingle#readonly", "name": "readonly", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#readonly", "scope": "instance", "type": { "names": [ "boolean" ] }, "optional": true, "ojdisplayname": "Readonly", "ojshortdesc": "Whether the component is readonly", "description": "

\nWhether the component is readonly. The readonly property sets or returns whether an element\nis readonly, or not. A readonly element cannot be modified. However, a user can tab to it,\nhighlight it, focus on it, and copy the text from it. If you want to prevent the user from\ninteracting with the element, use the disabled property instead.\n

\n

\nIf the property value is not set either directly on the component or inherited from\na parent form layout, then the property is treated as if its value were false.\n

" }, { "id": "oj-c.SelectSingle#readonlyUserAssistanceShown", "name": "readonlyUserAssistanceShown", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#readonlyUserAssistanceShown", "scope": "instance", "type": { "names": [ "\"none\"", "\"confirmationAndInfoMessages\"" ] }, "optional": true, "ojdisplayname": "ReadonlyUserAssistanceShown", "ojshortdesc": "Specifies which user assistance types should be shown when the component is readonly.", "description": "

\nSpecifies which user assistance types should be shown when the component is readonly.\n

", "defaultvalue": "'none'" }, { "id": "oj-c.SelectSingle#required", "name": "required", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#required", "scope": "instance", "type": { "names": [ "boolean" ] }, "optional": true, "ojdisplayname": "Required", "ojshortdesc": "Specifies whether or not the component is required.", "description": "

\nThis property set to false implies that a value is not required to be provided by the user.\nThis is the default.\nThis property set to true implies that a value is required to be provided by the user.\n

\n

\nIn the Redwood theme, by default, a Required text is rendered inline when the field is empty.\nIf user-assistance-density is 'compact', it will show on the label as an icon.\n

\n

The Required error text is based on Redwood UX designs, and it is not recommended that\nit be changed.\nTo override the required error message,\nuse the required-message-detail attribute.\nThe component's label text is passed in as a token {label} and can be used in the message detail.\n

\n

When required is set to true, an implicit\nrequired validator is created, i.e.,\nnew RequiredValidator(). The required validator is the only\nvalidator to run during initial render, and its error is not shown to the user at this time;\nthis is called deferred validation. The required validator also runs during normal validation;\nthis is when the errors are shown to the user.\nSee the Validation and Messaging section for details.\n

\n

\nWhen the required property changes due to programmatic intervention,\nthe component may clear component messages and run validation, based on the current state it's in.
\n\n

Running Validation when required property changes

\n
    \n
  • if component is valid when required is set to true, then it runs deferred validation on\nthe value property. If the field is empty, the valid state is invalidHidden. No errors are\nshown to the user.\n
    • \n
  • if component is valid when required is set from true to false, then no validation is run.\n
    • \n
  • if component is invalid and has deferred messages (invalidHidden) when required is set to false, then\ncomponent messages are cleared (messages-custom messages are not cleared)\nbut no deferred validation is run because required is false.\n
    • \n
  • if component is invalid and currently showing invalid messages (invalidShown) when required is changed\nto either true or false, then\ncomponent messages are cleared and normal validation is run using the current display value.\n
      \n
    • if there are validation errors, then value\n property is not updated and the error is shown.\n
      • \n
    • if no errors result from the validation, the value\n property is updated; page author can listen to the valueChanged\n event on the component to clear custom errors.
      • \n
    \n
    • \n
\n\n

Clearing Messages when required property changes

\n
    \n
  • Only messages created by the component, like validation messages, are cleared when the required property changes.
    • \n
  • messagesCustom property is not cleared.
    • \n
\n\n

", "defaultvalue": false }, { "id": "oj-c.SelectSingle#requiredMessageDetail", "name": "requiredMessageDetail", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#requiredMessageDetail", "scope": "instance", "type": { "names": [ "string" ] }, "optional": true, "ojdisplayname": "Required Message Detail", "ojshortdesc": "Overrides the default Required error message.", "description": "

\nThe component-specific message detail when the required validation fails.\nIf the component needs a required validation error message that is different from the default,\nset this property. It should be a translated string.\n

" }, { "id": "oj-c.SelectSingle#textAlign", "name": "textAlign", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#textAlign", "scope": "instance", "type": { "names": [ "\"end\"", "\"start\"", "\"right\"" ] }, "optional": true, "ojdisplayname": "Text Align", "description": "Specifies how the text is aligned within the text field", "ojvalues": [ { "name": "start", "description": "Aligns text left when reading direction is ltr and right when reading direction is rtl (default, if unspecified).", "displayName": "Start", "type": { "names": [ "string" ] } }, { "name": "end", "description": "Aligns text right when reading direction is ltr and left when reading direction is rtl.", "displayName": "End", "type": { "names": [ "string" ] } }, { "name": "right", "description": "Aligns text right regardless of reading direction, often used for numbers.", "displayName": "Right", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true }, { "id": "oj-c.SelectSingle#userAssistanceDensity", "name": "userAssistanceDensity", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#userAssistanceDensity", "scope": "instance", "type": { "names": [ "\"compact\"", "\"reflow\"", "\"efficient\"" ] }, "optional": true, "ojdisplayname": "User Assistance Density", "ojshortdesc": "Specifies the density of the form component's user assistance presentation.", "description": "

\nSpecifies the density of the form component's user assistance presentation. It can be shown inline with\nreserved rows to prevent reflow if a user assistance text shows up, inline without reserved rows that would\nreflow if a user assistance text shows up, or it can be shown compactly in a popup instead.\n

\n

\nIf the property value is not set either directly on the component or inherited from\na parent form layout, then the property is treated as if its value were \"reflow\".\n

", "ojvalues": [ { "name": "reflow", "description": "Messages, help, hints, and required are all shown inline under the field with no reserved space.", "displayName": "Reflow", "type": { "names": [ "string" ] } }, { "name": "efficient", "description": "Messages, help, hints, and required are all shown inline under the field with reserved space.", "displayName": "Efficient", "type": { "names": [ "string" ] } }, { "name": "compact", "description": "Messages, help, hints, and required will not be shown inline; they will show in a mode that keeps the screen more compact, like a popup for the messages, and a required icon to indicate Required.", "displayName": "Compact", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true }, { "id": "oj-c.SelectSingle#value", "name": "value", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#value", "scope": "instance", "type": { "names": [ "string|number|null" ] }, "optional": true, "ojdisplayname": "Value", "ojwriteback": true, "ojshortdesc": "The value of the component.", "description": "The value of the component.\n\n

\nWhen the value property changes due to programmatic\nintervention, the component always clears all messages\nincluding messagesCustom, runs deferred validation, and\nalways refreshes the UI display value.
\n\n

Running Validation

\n
    \n
  • component always runs deferred validation; the\nvalid property is updated with the result.
    • \n
\n

", "defaultvalue": null, "tstype": [ { "target": "Type", "value": "V|null", "jsdocOverride": true } ] }, { "id": "oj-c.SelectSingle#valueItem", "name": "valueItem", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#valueItem", "scope": "instance", "type": { "names": [ "object|null" ] }, "optional": true, "ojdisplayname": "Value Item", "ojwriteback": true, "ojshortdesc": "The current value of the element and its associated data.", "description": "The valueItem is similar to the\nvalue, but is a an object that\ncontain both a key and data, and optional metadata.\nThe key will be set as the value of the element.\nThe value and valueItem\nare kept in sync, both during programmatic property sets as well as during interactive user\nselection.\nIf initially both are set, the selected value in the value\nattribute have precedence.\n

Note: If there is an initial selection, setting it via the\nvalueItem attribute initially can improve page load\nperformance because the element will not have to fetch the selected data from the data\nprovider.

\n

If valueItem is not specified or the selected value is\nmissing, then the selected data will be fetched from the data provider.

\n\n

\nNote: Setting the initial valueItem will internally set\nthe component’s value, which will trigger a\nvalueChanged event. It may not be possible to distinguish\nthis from an event triggered by user interaction. If you need to be notified only for\nselections caused by user interactions, consider using the ojValueAction\nevent instead. However, note that this event will also be triggered when the same value is selected again.\n

", "defaultvalue": null, "tstype": [ { "target": "Type", "value": "ItemContext|null", "jsdocOverride": true, "module": { "ItemContext": "ojcommontypes" } } ] }, { "id": "oj-c.SelectSingle#virtualKeyboard", "name": "virtualKeyboard", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#virtualKeyboard", "scope": "instance", "type": { "names": [ "\"number\"", "\"search\"", "\"auto\"", "\"url\"", "\"text\"", "\"email\"", "\"tel\"" ] }, "optional": true, "ojdisplayname": "Virtual Keyboard", "ojshortdesc": "The type of virtual keyboard to display for entering a value on mobile browsers", "description": "The type of virtual keyboard to display for entering a value on mobile browsers. This attribute has no effect on desktop browsers.", "ojvalues": [ { "name": "number", "description": "Use a mobile virtual keyboard for entering numbers. Note that on Android and Windows Mobile, the 'number' keyboard does not contain the minus sign. This value should not be used on fields that accept negative values.", "displayName": "Number", "type": { "names": [ "string" ] } }, { "name": "auto", "description": "The component will determine the best mobile virtual keyboard to use (default, if unspecified).", "displayName": "Auto", "type": { "names": [ "string" ] } }, { "name": "email", "description": "Use a mobile virtual keyboard for entering email addresses.", "displayName": "Email", "type": { "names": [ "string" ] } }, { "name": "search", "description": "Use a mobile virtual keyboard for entering search terms.", "displayName": "Search", "type": { "names": [ "string" ] } }, { "name": "tel", "description": "Use a mobile virtual keyboard for entering telephone numbers.", "displayName": "Tel", "type": { "names": [ "string" ] } }, { "name": "text", "description": "Use a mobile virtual keyboard for entering text.", "displayName": "Text", "type": { "names": [ "string" ] } }, { "name": "url", "description": "Use a mobile virtual keyboard for URL entry.", "displayName": "URL", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'auto'" }, { "id": "oj-c.SelectSingle#width", "name": "width", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#width", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojdisplayname": "Width", "ojshortdesc": "The width of the control.", "description": "Specifies the component's width. If unset, the default width is 100%.\nNote that by default max-width is 100%, which will override the width if the container is smaller than the width specified.", "ojvalues": [ { "name": "sm", "type": { "names": [ "string" ] } }, { "name": "md", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "tstype": [ { "target": "Type", "value": "number|string|\"sm\"|\"md\"", "jsdocOverride": true } ] }, { "id": "oj-c.SelectSingle#valid", "name": "valid", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#valid", "scope": "instance", "type": { "names": [ "\"pending\"", "\"valid\"", "\"invalidHidden\"", "\"invalidShown\"" ] }, "optional": true, "ojdisplayname": "Valid", "ojwriteback": true, "readonly": true, "ojshortdesc": "Specifies how the valid state of the component", "description": "

\nThe current valid state of the component. It is evaluated on initial render.\nIt is re-evaluated\n

    \n
  • after each validator (validators or async-validators) is run (full or deferred)
    • \n
  • when messagesCustom is updated,\n since messagesCustom can be added by the app developer any time.
    • \n
  • when showMessages() is called. Since showMessages() moves the\n hidden messages into messages shown,\n if the valid state was \"invalidHidden\" then it would become \"invalidShown\".
    • \n
  • when the required property has changed. If a component is empty and has required\n set, the valid state may be \"invalidHidden\" (if no invalid messages are being shown as well).\n If required property is removed, the valid state would change to \"valid\".
    • \n
\n

\n

\n Note: New valid states may be added to the list of valid values in future releases.\n Any new values will start with \"invalid\"\n if it is an invalid state, \"pending\" if it is pending state,\n and \"valid\" if it is a valid state.\n

", "ojvalues": [ { "name": "valid", "description": "The component is valid", "displayName": "Valid", "type": { "names": [ "string" ] } }, { "name": "pending", "description": "The component is waiting for the validation state to be determined. The 'pending' state is set at the start of the convert/validate process.", "displayName": "Pending", "type": { "names": [ "string" ] } }, { "name": "invalidHidden", "description": "The component has invalid messages hidden and no invalid messages showing. An invalid message is one with severity 'error'.", "displayName": "Invalid Hidden", "type": { "names": [ "string" ] } }, { "name": "invalidShown", "description": "The component has invalid messages showing. An invalid message is one with severity 'error'.", "displayName": "Invalid Shown", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true }, { "id": "oj-c.SelectSingle#blur", "name": "blur", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#blur", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Blurs the input field.", "description": "Blurs the input field.", "ojhidden": true }, { "id": "oj-c.SelectSingle#focus", "name": "focus", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#focus", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Focuses the input field.", "description": "Focuses the input field.", "ojhidden": true }, { "id": "oj-c.SelectSingle#showMessages", "name": "showMessages", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#showMessages", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Takes all deferred messages and shows them.", "description": "Takes all deferred messages and shows them.\nIt then updates the valid property;\ne.g., if the valid state was \"invalidHidden\" before showMessages(),\nthe valid state will become \"invalidShown\" after showMessages().\nIf there were no deferred messages this method simply returns." }, { "id": "oj-c.SelectSingle#reset", "name": "reset", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#reset", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Resets the component by clearing all messages and updating the component's display value using the attribute value.", "description": "Resets the component by clearing all messages and messagesCustom attribute\nand updates the component's display value using the attribute value.\nUser entered values will be erased when this method is called." }, { "id": "oj-c.SelectSingle#validate", "name": "validate", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#validate", "scope": "instance", "returns": [ { "type": { "names": [ "Promise" ] }, "description": "Promise resolves to \"valid\" if there were no converter parse errors and the component\npassed all validations. The Promise resolves to \"valid\" if the component is disabled or readonly.\nThe Promise resolves to \"invalid\" if there were converter\nparse errors or if there were validation errors." } ], "ojshortdesc": "If enabled, validates the component's display value using the converter and all validators registered on the component. The Promise resolves to 'valid' if there were no converter parse errors and the component passed all validations, or if the component is disabled or readonly.", "description": "If enabled, validates the component's display value (or null if display value is empty) using the converter and\nall validators registered on the component and updates the value\noption by performing the following steps.\n
    \n
  1. All messages are cleared, including custom messages added by the app.
    2. \n
  2. \n If no converter is present then processing continues to next step. If a converter is present,\n the UI value is first converted (i.e., parsed). If there is a parse error then the messages are shown.
    3. \n
  3. \n If there are no validators setup for the component the value option is updated using the display value.\n Otherwise all validators are run in sequence using the parsed value from the previous step.\n The implicit required validator is run first if the component is marked required.\n When a validation error is encountered it is remembered and the next validator in the sequence is run.\n
    4. \n
  4. \n At the end of validation if there are errors, the messages are shown.\n If there were no errors, then the value option is updated.\n
    5. \n
\n

If the component is readonly or disabled, returns a Promise that resolves to 'valid'\nwithout doing any validation.

" }, { "id": "oj-c.SelectSingle#_doAddToListAction", "name": "_doAddToListAction", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#_doAddToListAction", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "This method imitates triggering the add to list link in the dropdown. This is used by the WebElement implementation of oj-c-select-single.\"", "description": "This method imitates triggering the add to list link in the dropdown. This is used by the WebElement implementation of oj-c-select-single.\"", "params": [ { "name": "searchText", "description": "The search text to include in the event", "type": { "names": [ "string" ] } } ], "ojhidden": true }, { "id": "oj-c.SelectSingle#_doAdvancedSearchAction", "name": "_doAdvancedSearchAction", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#_doAdvancedSearchAction", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "This method imitates triggering the advanced search link in the dropdown. This is used by the WebElement implementation of oj-c-select-single.", "description": "This method imitates triggering the advanced search link in the dropdown. This is used by the WebElement implementation of oj-c-select-single.", "params": [ { "name": "searchText", "description": "The search text to include in the event", "type": { "names": [ "string" ] } } ], "ojhidden": true }, { "id": "oj-c.SelectSingle#_selectItemByValue", "name": "_selectItemByValue", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#_selectItemByValue", "scope": "instance", "returns": [ { "type": { "names": [ "Promise" ] }, "description": "A Promise that resolves once the operation is completed" } ], "ojshortdesc": "This method imitates an option selection from the dropdown by using the key of an item. This is used by the WebElement implementation of oj-c-select-single.", "description": "This method imitates an option selection from the dropdown by using the key of an item. This is used by the WebElement implementation of oj-c-select-single.", "params": [ { "name": "value", "description": "The value to be selected", "type": { "names": [ "any" ] } } ], "ojhidden": true }, { "id": "oj-c.SelectSingle#UNSAFE_focusAndOpenDropdown", "name": "UNSAFE_focusAndOpenDropdown", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#UNSAFE_focusAndOpenDropdown", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "description": "This is an UNSAFE method that focuses the select component and opens the dropdown", "ojhidden": true }, { "id": "oj-c.SelectSingle#setProperty", "name": "setProperty", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#setProperty", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "params": [ { "name": "property", "description": "The property name to set. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } }, { "name": "value", "description": "The new value to set the property to.", "type": { "names": [ "any" ] } } ] }, { "id": "oj-c.SelectSingle#getProperty", "name": "getProperty", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#getProperty", "scope": "instance", "returns": [ { "type": { "names": [ "any" ] } } ], "ojshortdesc": "Retrieves the value of a property or a subproperty.", "description": "Retrieves the value of a property or a subproperty.", "params": [ { "name": "property", "description": "The property name to get. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } } ] }, { "id": "oj-c.SelectSingle#setProperties", "name": "setProperties", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "function", "longname": "oj-c.SelectSingle#setProperties", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Performs a batch set of properties.", "description": "Performs a batch set of properties.", "params": [ { "name": "properties", "description": "An object containing the property and value pairs to set.", "type": { "names": [ "object" ] } } ] }, { "id": "oj-c.SelectSingle#event:ojAddToListAction", "name": "ojAddToListAction", "kind": "event", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "longname": "oj-c.SelectSingle#event:ojAddToListAction", "scope": "instance", "ojshortdesc": "Event triggered when the user clicks or presses Enter on the add to list link in the dropdown.", "ojdisplayname": "onOjAddToListAction", "description": "Event triggered when the user clicks or presses Enter on the add to list link in the\ndropdown.\nSet the addToList property to\n'on' to enable this feature.", "properties": [ { "name": "searchText", "optional": true, "type": { "names": [ "string" ] } } ] }, { "id": "oj-c.SelectSingle#event:ojAdvancedSearchAction", "name": "ojAdvancedSearchAction", "kind": "event", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "longname": "oj-c.SelectSingle#event:ojAdvancedSearchAction", "scope": "instance", "ojshortdesc": "Event triggered when the user clicks or presses Enter on the advanced search link in the dropdown.", "ojdisplayname": "onOjAdvancedSearchAction", "description": "Event triggered when the user clicks or presses Enter on the advanced search link in the\ndropdown.\nSet the advancedSearch property to\n'on' to enable this feature.", "properties": [ { "name": "searchText", "optional": true, "type": { "names": [ "string" ] } } ] }, { "id": "oj-c.SelectSingle#event:ojValueAction", "name": "ojValueAction", "kind": "event", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "longname": "oj-c.SelectSingle#event:ojValueAction", "scope": "instance", "ojshortdesc": "Event triggered when a value is submitted by the user, even if the value is the same as the previous value.", "ojdisplayname": "onOjValueAction", "description": "

Note: The event detail contains the following properties: [oj-c.SelectSingle.ValueActionPayload]{@link oj-c.SelectSingle.ValueActionPayload}<V, D>

Event triggered when a value is submitted by the user, even if the value is the same as the previous value." }, { "id": "oj-c.SelectSingle#collectionTemplate", "name": "collectionTemplate", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#collectionTemplate", "scope": "instance", "ojdisplayname": "collectionTemplate", "description": "

Note: When the template is executed for each item, it will have access to the binding context containing the following properties: [oj-c.SelectSingle.CollectionTemplateContext]{@link oj-c.SelectSingle.CollectionTemplateContext}

The collectionTemplate slot is used to specify the template\nfor rendering items in the dropdown.\nThe slot must be a <template> element containing a child core-pack collection element (e.g. <oj-c-table/> or <oj-c-list-view/>).\n

When the template is executed, it will have access to the binding context\ncontaining the following properties:

\n
    \n
  • $current - an object that contains information for the collection. (See the table\nbelow for a list of properties available on $current)
    • \n
  • alias - if the data-oj-as attribute was specified on the template, the value will be\nused to provide an application-named alias for $current.
    • \n
\n

If no collectionTemplate is specified, the component will check whether an\nitemTemplate is specified. Otherwise, the component will\nrender based on the value of the itemText property.

\n

The collectionTemplate supports oj-c-table and oj-c-list-view.

", "ojshortdesc": "The collectionTemplate slot is used to specify the template for rendering the items in the dropdown.", "ojslot": true, "ojtemplateslotprops": "oj-c.SelectSingle.CollectionTemplateContext" }, { "id": "oj-c.SelectSingle#itemTemplate", "name": "itemTemplate", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "kind": "member", "longname": "oj-c.SelectSingle#itemTemplate", "scope": "instance", "ojdisplayname": "itemTemplate", "description": "

Note: When the template is executed for each item, it will have access to the binding context containing the following properties: [oj-c.SelectSingle.ItemTemplateContext]{@link oj-c.SelectSingle.ItemTemplateContext}

The itemTemplate slot is used to specify the template\nfor rendering each item in the dropdown list.\nThe slot must be a <template> element.\n

When the template is executed for each item, it will have access to the binding context\ncontaining the following properties:

\n
    \n
  • $current - an object that contains information for the current item. (See the table\nbelow for a list of properties available on $current)
    • \n
  • alias - if the data-oj-as attribute was specified on the template, the value will be\nused to provide an application-named alias for $current.
    • \n
\n

If no itemTemplate is specified, the component will\nrender based on the value of the itemText property.

", "ojshortdesc": "The itemTemplate slot is used to specify the template for rendering each item in the dropdown. See the Help documentation for more information.", "ojslot": true, "ojtemplateslotprops": "oj-c.SelectSingle.ItemTemplateContext" }, { "id": "oj-c.SelectSingle.touchDoc", "name": "touchDoc", "kind": "member", "longname": "oj-c.SelectSingle.touchDoc", "description": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetGestureAction
Input fieldTap If the dropdown is not open, expand the dropdown list.\n If hints, title or messages exist in a notewindow,\n pop up the notewindow.
Arrow buttonTap If the dropdown is not open, expand the dropdown list. Otherwise, close the dropdown list.
Option itemTap Tap on an option item in the dropdown list to select.
", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "ojfragment": true }, { "id": "oj-c.SelectSingle.keyboardDoc", "name": "keyboardDoc", "kind": "member", "longname": "oj-c.SelectSingle.keyboardDoc", "description": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetKeyAction
Option itemEnter or Space Select the highlighted choice from the dropdown and close the dropdown.
Option itemTab Select the highlighted choice from the dropdown and transfer focus to the next\n tabbable element on the page.
Option item (when showing Add to list or Advanced search link)Tab Keeps the choice highlighted and transfer focus to the Add to list or Advanced search link.
Add to list or Advanced search linkEnter Triggers the ojAddToListAction or the ojAdvancedSearchAction and closes the dropdown.
Add to list or Advanced search linkTab Select the highlighted choice from the dropdown and transfer focus to the next\n tabbable element on the page.
Input fieldEsc Collapse the dropdown list. If the dropdown is already closed, do nothing.
Input fieldEnter If the selected value text has been deleted, clear the value and close the dropdown.\n If filtering, select the highlighted choice from the dropdown and close the\n dropdown.
Input fieldTab If the selected value text has been deleted, clear the value and transfer focus\n to the next tabbable element on the page. If filtering, select the highlighted choice\n from the dropdown and transfer focus to the next tabbable element on the page.
Input fieldUpArrow or DownArrow If the dropdown is not open, expand the dropdown list. Otherwise, transfer\n focus into the dropdown list.
DropdownUpArrow or DownArrow Highlight the option item in the dropdown list in the direction of the arrow.
DropdownEsc Collapse the dropdown list.
SelectTab InSet focus to the Select. If hints, title or messages exist in a notewindow,\n pop up the notewindow.
", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "ojfragment": true }, { "id": "oj-c.SelectSingle.CollectionTemplateContext", "name": "CollectionTemplateContext", "kind": "typedef", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "longname": "oj-c.SelectSingle.CollectionTemplateContext", "type": { "names": [ "Object" ] }, "scope": "static", "description": "", "tsgenerictype": { "target": "Type", "value": ">", "for": "genericTypeParameters" }, "properties": [ { "name": "data", "description": "A data provider that provide information including data and metadata to the collection.", "optional": true, "type": { "names": [ "DataProvider|null" ] }, "tstype": [ { "target": "Type", "value": "DataProvider|null", "jsdocOverride": true, "for": "data", "module": { "DataProvider": "ojdataprovider" } } ] }, { "name": "searchText", "description": "The text entered by the user for filtering the collection data. This can be used for highlighting the matches.", "optional": true, "type": { "names": [ "string" ] } }, { "name": "currentRowOverride", "description": "This property can be used to set the current focused row/item in the collection.", "optional": true, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "{ rowKey: K; }", "jsdocOverride": true, "for": "currentRowOverride" } ] }, { "name": "onCurrentRowChanged", "description": "A callback function to be called to let the select component know that the current row is changed by a user interaction.", "optional": false, "type": { "names": [ "function" ] }, "tstype": [ { "target": "Type", "value": "(detail: { rowKey?: K; }) => void", "jsdocOverride": true, "for": "onCurrentRowChanged" } ] }, { "name": "selected", "description": "This property provides the selected row/item for the collection component.", "optional": false, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "ImmutableKeySet", "jsdocOverride": true, "for": "selected", "module": { "ImmutableKeySet": "ojkeyset" } } ] }, { "name": "onRowAction", "description": "A callback function to be called to let the select component know when a user performs an action gesture on an item/row.", "optional": false, "type": { "names": [ "function" ] }, "tstype": [ { "target": "Type", "value": "(detail: { item: Item; }) => void", "jsdocOverride": true, "for": "onRowAction", "module": { "Item": "ojdataprovider" } } ] } ] }, { "id": "oj-c.SelectSingle.DisplayOptionsProps", "name": "DisplayOptionsProps", "kind": "typedef", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "longname": "oj-c.SelectSingle.DisplayOptionsProps", "type": { "names": [ "Object" ] }, "scope": "static", "description": "Display options for auxiliary content that determines whether or not it should be displayed.", "properties": [ { "name": "messages", "description": "Display options for auxiliary message text.", "optional": true, "type": { "names": [ "\"none\"", "\"display\"" ] }, "defaultvalue": "'display'" } ] }, { "id": "oj-c.SelectSingle.Help", "name": "Help", "kind": "typedef", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "longname": "oj-c.SelectSingle.Help", "type": { "names": [ "Object" ] }, "scope": "static", "description": "Form component help information.", "properties": [ { "name": "instruction", "description": "A type of user assistance text. User assistance text is used to provide guidance to\nhelp the user understand what data to enter or select.", "optional": true, "type": { "names": [ "string" ] }, "defaultvalue": "''" } ] }, { "id": "oj-c.SelectSingle.HelpHints", "name": "HelpHints", "kind": "typedef", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "longname": "oj-c.SelectSingle.HelpHints", "type": { "names": [ "Object" ] }, "scope": "static", "description": "The helpHints object contains a definition property and a source property.", "properties": [ { "name": "definition", "description": "A type of user assistance text. User assistance text is used to provide guidance to help\nthe user understand what data to enter or select. help-hints could come from a help system.", "optional": true, "type": { "names": [ "string" ] }, "defaultvalue": "''" }, { "name": "source", "description": "Help source URL associated with the component.", "optional": true, "type": { "names": [ "string" ] }, "defaultvalue": "''" }, { "name": "sourceText", "description": "Custom text to be used for the source link.", "optional": true, "type": { "names": [ "string" ] } } ] }, { "id": "oj-c.SelectSingle.ItemTemplateContext", "name": "ItemTemplateContext", "kind": "typedef", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "longname": "oj-c.SelectSingle.ItemTemplateContext", "type": { "names": [ "Object" ] }, "scope": "static", "description": "", "tsgenerictype": { "target": "Type", "value": ">", "for": "genericTypeParameters" }, "properties": [ { "name": "searchText", "description": "User-entered search text.\nThis property will be undefined for the default, unfiltered list.", "optional": true, "type": { "names": [ "string" ] } }, { "name": "item", "description": "Contains the data and metadata of the item.", "optional": false, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "Item", "jsdocOverride": true, "for": "item", "module": { "Item": "ojdataprovider" } } ] } ] }, { "id": "oj-c.SelectSingle.ComponentMessageItem", "name": "ComponentMessageItem", "kind": "typedef", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "longname": "oj-c.SelectSingle.ComponentMessageItem", "type": { "names": [ "Object" ] }, "scope": "static", "description": "A type for a single component message", "properties": [ { "name": "summary", "optional": true, "type": { "names": [ "string" ] } }, { "name": "detail", "optional": true, "type": { "names": [ "string" ] } }, { "name": "severity", "optional": true, "type": { "names": [ "\"error\"", "\"confirmation\"", "\"info\"", "\"warning\"" ] } } ] }, { "id": "oj-c.SelectSingle.ValueActionPayload", "name": "ValueActionPayload", "kind": "typedef", "memberof": "oj-c.SelectSingle", "meta": { "filename": "select-single.tsx", "path": "web/components/oj-c/select-single" }, "longname": "oj-c.SelectSingle.ValueActionPayload", "type": { "names": [ "Object" ] }, "scope": "static", "description": "Payload for the ojValueAction event", "tsgenerictype": { "target": "Type", "value": "", "for": "genericTypeParameters" }, "properties": [ { "name": "itemContext", "optional": false, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "ItemContext|null", "jsdocOverride": true, "for": "itemContext", "module": { "ItemContext": "ojcommontypes" } } ] }, { "name": "previousValue", "optional": false, "type": { "names": [ "any" ] }, "tstype": [ { "target": "Type", "value": "V|null", "jsdocOverride": true, "for": "previousValue" } ] }, { "name": "value", "optional": false, "type": { "names": [ "any" ] }, "tstype": [ { "target": "Type", "value": "V|null", "jsdocOverride": true, "for": "value" } ] } ] } ]