[ { "id": "oj-c.LabelledLink", "name": "LabelledLink", "memberof": "oj-c", "kind": "class", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "ojcomponent": true, "isvcomponent": true, "since": "16.0.0", "longname": "oj-c.LabelledLink", "pack": "oj-c", "classdesc": "

\n JET LabelledLink\n \n

\n\n

\nDescription: LabelledLink component can be used to render a readonly form control\nfield that has a link for its content.\n

\n\n
\n<oj-c-labelled-link\n  href=\"www.oracle.com\"\n  text=\"Website\"\n  label-hint=\"Labelled Link\">\n</oj-c-linked-link>\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
TargetGestureAction
LinkTapSets focus to the link. Opens the link or invokes the ojAction event.
\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
TargetKeyAction
LinkTab InSet focus to the link.
LinkEnterOpens the link or invokes the ojAction event.
\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 a visually hidden and screen-reader accessible label.\n

", "scope": "static", "tagWithoutBrackets": "oj-c-labelled-link", "tagWithBrackets": "", "domInterface": "CLabelledLinkElement", "ojPageTitle": "<oj-c-labelled-link>", "camelCaseName": "LabelledLink", "ojPageTitlePrefix": "Element: ", "ojtsvcomponent": true, "tstype": { "target": "Type", "value": "interface CLabelledLinkElement extends JetElement" }, "ojsignature": [ { "target": "Type", "value": "interface CLabelledLinkElement extends JetElement" } ], "tsdeprecated": [ { "type": "production", "since": "17.0.0" } ], "extension": { "catalog": { "category": "Forms" }, "vbdt": { "module": "oj-c/labelled-link", "defaultColumns": 6, "minColumns": 2, "componentPalette": { "visibility": "never" } }, "oracle": { "icon": "oj-ux-ico-link", "uxSpecs": [ "input-text" ] } }, "ojmodule": "labelled-link" }, { "id": "oj-c.LabelledLink#columnSpan", "name": "columnSpan", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#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'." }, { "id": "oj-c.LabelledLink#containerReadonly", "name": "containerReadonly", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#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." }, { "id": "oj-c.LabelledLink#href", "name": "href", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#href", "scope": "instance", "type": { "names": [ "string" ] }, "optional": true, "ojdisplayname": "Href", "ojshortdesc": "Sets the URL that the link points to.", "description": "Specifies the URL that the link points to. If the href is provided, clicking the link\nwill trigger the default browser behavior and will open the link. The\nojAction event will not be triggered. If the href property is\nnot provided, then the default browser behavior will be prevented and the\nojAction event will be triggered." }, { "id": "oj-c.LabelledLink#labelEdge", "name": "labelEdge", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#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 will be placed inside the component and above the link (default, if unspecified).", "displayName": "Inside", "type": { "names": [ "string" ] } }, { "name": "none", "description": "The component will not create a label, but instead set the aria-labelledby property on the anchor 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.LabelledLink#labelHint", "name": "labelHint", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#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.LabelledLink#labelStartWidth", "name": "labelStartWidth", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#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.LabelledLink#labelWrapping", "name": "labelWrapping", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#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.LabelledLink#lineClamp", "name": "lineClamp", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#lineClamp", "scope": "instance", "type": { "names": [ "number" ] }, "optional": true, "ojdisplayname": "lineClamp", "ojshortdesc": "Truncates text at a specific number of lines and then displays an ellipsis (…) at the end of the last line. The parent of the element needs to have a specific width so that text starts overflowing and produces a truncation. The lineClamp property is ignored when the oj-c-labelled-link is in a oj-c-form-layout.", "description": "Truncates text at a specific number of lines and then displays an ellipsis (…) at the end of the last line. The parent of the element needs to have a specific width so that text starts overflowing and produces a truncation. The lineClamp property is ignored when the oj-c-labelled-link is in a oj-c-form-layout." }, { "id": "oj-c.LabelledLink#target", "name": "target", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#target", "scope": "instance", "type": { "names": [ "string" ] }, "optional": true, "ojdisplayname": "Target", "ojshortdesc": "Sets the target attribute of the link.", "description": "Sets the target attribute of the link." }, { "id": "oj-c.LabelledLink#text", "name": "text", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#text", "scope": "instance", "type": { "names": [ "string" ] }, "optional": true, "ojdisplayname": "Text", "ojshortdesc": "Specifies the text that should appear in the field.", "description": "Specifies the text that should appear in the field. If this property\nis not provided, then the URL provided using the href property\nwill be used as the text in the field." }, { "id": "oj-c.LabelledLink#textAlign", "name": "textAlign", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#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.LabelledLink#unsafe_labelledBy", "name": "unsafe_labelledBy", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#unsafe_labelledBy", "scope": "instance", "type": { "names": [ "string" ] }, "optional": true, "description": "This is temporary unsafe API for JET-52089. It enables a wrapper VComponent to pass\nthe id of an external label that it wants to associate with the inner input.", "ojhidden": true }, { "id": "oj-c.LabelledLink#userAssistanceDensity", "name": "userAssistanceDensity", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "member", "longname": "oj-c.LabelledLink#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": "The component does not support any assistive text. But, this property can be used to specify\nwhether or not the component should reserve space to be consistent with the other form components\nin the Form Layout.", "ojvalues": [ { "name": "reflow", "description": "The field will not reserve any space.", "displayName": "Reflow", "type": { "names": [ "string" ] } }, { "name": "efficient", "description": "The field will reserve space to prevent reflow.", "displayName": "Efficient", "type": { "names": [ "string" ] } }, { "name": "compact", "description": "The field will not reserve any space.", "displayName": "Compact", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true }, { "id": "oj-c.LabelledLink#blur", "name": "blur", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "function", "longname": "oj-c.LabelledLink#blur", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Blurs the link.", "description": "Blurs the link.", "ojhidden": true }, { "id": "oj-c.LabelledLink#focus", "name": "focus", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "function", "longname": "oj-c.LabelledLink#focus", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Focuses the link.", "description": "Focuses the link.", "ojhidden": true }, { "id": "oj-c.LabelledLink#setProperty", "name": "setProperty", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "function", "longname": "oj-c.LabelledLink#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.LabelledLink#getProperty", "name": "getProperty", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "function", "longname": "oj-c.LabelledLink#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.LabelledLink#setProperties", "name": "setProperties", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "kind": "function", "longname": "oj-c.LabelledLink#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.LabelledLink#event:ojAction", "name": "ojAction", "kind": "event", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "longname": "oj-c.LabelledLink#event:ojAction", "scope": "instance", "ojshortdesc": "Triggered when the link is clicked, whether by keyboard, mouse, or touch events. This event is triggered only when the href is not provided. If the href is provided, clicking the link will not trigger this event.", "ojdisplayname": "onOjAction", "description": "Triggered when the link is clicked, whether by keyboard, mouse, or touch events. This event is triggered only when the href is not provided. If the href is provided, clicking the link will not trigger this event." }, { "id": "oj-c.LabelledLink.touchDoc", "name": "touchDoc", "kind": "member", "longname": "oj-c.LabelledLink.touchDoc", "description": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetGestureAction
LinkTapSets focus to the link. Opens the link or invokes the ojAction event.
", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "ojfragment": true }, { "id": "oj-c.LabelledLink.keyboardDoc", "name": "keyboardDoc", "kind": "member", "longname": "oj-c.LabelledLink.keyboardDoc", "description": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n
TargetKeyAction
LinkTab InSet focus to the link.
LinkEnterOpens the link or invokes the ojAction event.
", "memberof": "oj-c.LabelledLink", "meta": { "filename": "labelled-link.tsx", "path": "web/components/oj-c/labelled-link" }, "ojfragment": true } ]