@oracle/oraclejet-core-pack 16.1.4 → 17.0.0

package/oj-c/CardView.json

@@ -0,0 +1,638 @@
+[
+  {
+    "pack": "oj-c",
+    "id": "oj-c.CardView",
+    "name": "CardView",
+    "memberof": "oj-c",
+    "longname": "oj-c.CardView",
+    "kind": "class",
+    "classdesc": "<h3 id=\"CardViewOverview-section\">\n  JET CardView Component\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#CardViewOverview-section\"></a>\n</h3>\n\n<p>Description: The JET CardView enhances a themable, WAI-ARIA compliant, mobile friendly component with advance interactive features.\nThe child content can be configured via a DataProvider which should be used for mutable data.</p>\n\n<p>For migration information from the card layout feature from <code>oj-list-view</code> refer to the <a href=\"https://jet.oraclecorp.com/trunk/jsdocs/oj.ojListView.html#styling-section\">migration section</a> in the API docs.\n\n<h3 id=\"data-section\">\n  Data\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#data-section\"></a>\n</h3>\n<p>The JET CardView gets its data from a DataProvider.</p>\n\n<p><b>ArrayDataProvider</b> - Use this when the underlying data is an array object or an observableArray.  In the observableArray case, CardView will automatically react\nwhen items are added or removed from the array.  See the documentation for ArrayDataProvider for more details on the available options.</p>\n\n<p>Example of data provider content</p>\n<pre class=\"prettyprint\"><code>\n  &lt;oj-c-card-view aria-label=\"Accessible Summary\" data=\"[[dataProvider]]\">\n  &lt;/oj-c-card-view>\n</code></pre>\n\n<p>Check out the CardView Basic demo</a>\n\n<h3 id=\"keyboard-section\">\n  Coming Features\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#coming-features-section\"></a>\n</h3>\n\n<p>These features will be available in forthcoming versions</p>\n<ul>\n   <li>Context menu</li>\n   <li>Selection required</li>\n   <li>First selected item</li>\n   <li>Drag and drop between components</li>\n   <li>Managing scroll position</li>\n</ul>\n\n<h3 id=\"keyboard-section\">\n  Keyboard End User Information\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#keyboard-section\"></a>\n</h3>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan = \"20\" nowrap>Card Item</td>\n      <td><kbd>F2</kbd></td>\n      <td>Enters tabbable mode.  This enables keyboard action on elements inside the item, including navigate between focusable elements inside the item.  It can also be used to exit tabbable mode if already in tabbable mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Esc</kbd></td>\n      <td>Exits tabbable mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>When in tabbable mode, navigates to next focusable element within the item.  If the last focusable element is reached, shift focus back to the first focusable element.\n          When not in tabbable mode, navigates to next focusable element on page (outside CardView).</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Tab</kbd></td>\n      <td>When in tabbable mode, navigates to previous focusable element within the item.  If the first focusable element is reached, shift focus back to the last focusable element.\n          When not in tabbable mode, navigates to previous focusable element on page (outside CardView).</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus to the item below.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus to the item above.</td>\n    </tr>\n    <tr>\n      <td><kbd>LeftArrow</kbd></td>\n      <td>Move focus to the item on the left.</td>\n    </tr>\n    <tr>\n      <td><kbd>RightArrow</kbd></td>\n      <td>Move focus to the item on the right.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+DownArrow</kbd></td>\n      <td>Extend the selection to the item below.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+UpArrow</kbd></td>\n      <td>Extend the selection to the item above.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+LeftArrow</kbd></td>\n      <td>Extend the selection to the item on the left.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+RightArrow</kbd></td>\n      <td>Extend the selection to the item on the right.</td>\n    </tr>\n    <tr>\n      <td><kbd>Space</kbd></td>\n      <td>Toggles to select and deselect the current item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Space</kbd></td>\n      <td>Selects contiguous items from the last selected item to the current item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+DownArrow</kbd></td>\n      <td>Reorder the current item down.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+UpArrow</kbd></td>\n      <td>Reorder the current item up.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+LeftArrow</kbd></td>\n      <td>Reorder the current item to the left.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+RightArrow</kbd></td>\n      <td>Reorder the current item to the right.</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"a11y-section\">\n  Accessibility\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#a11y-section\"></a>\n</h3>\n\n<p>Application should specify a value for the aria-label attribute with a meaningful description of the purpose of this CardView.</p>\n<p>Note that CardView uses the grid role and follows the <a href=\"https://www.w3.org/TR/wai-aria-practices/examples/grid/LayoutGrids.html\">Layout Grid</a> design as outlined in the <a href=\"https://www.w3.org/TR/wai-aria-practices/#grid\">grid design pattern</a></p>\n<p>Nesting collection components such as ListView, Table, TreeView, and CardView inside of CardView is not supported.</p>\n<p>When reorder feature is enabled, application should specify a live region which contains an announcement to notify assistive technologies that the card reordering happens.</p>\n\n<h4>Custom Colours</h4>\n<p>Using colors, including background and text colors, is not accessible if it is the only way information is conveyed.\nLow vision users may not be able to see the different colors, and in high contrast mode the colors are removed.\nThe Redwood approved way to show status is to use badge.</p>\n\n<h3 id=\"context-section\">\n  Item Context\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#context-section\"></a>\n</h3>\n\n<p>For all item options, developers can specify a function as the return value.  The function takes a single argument, which is an object that contains contextual information about the particular item.  This gives developers the flexibility to return different value depending on the context.</p>\n\n<p>The context parameter contains the following keys:</p>\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>data</kbd></td>\n      <td>The data of the item.  Note this is made available primarily to ease migration.\n          Applications should get the data from the item property instead.</td>\n    </tr>\n    <tr>\n      <td><kbd>item</kbd></td>\n      <td>An object that contains the data and metadata for the item.</td>\n    </tr>\n    <tr>\n      <td><kbd>isTabbable</kbd></td>\n      <td>A boolean indicating whether the item is in tabbable mode or not.\n         This should be used to implement conditional behavior for all tabbable elements, this avoids creating a keyboard trap when tabbing through the CardView.<br/>\n         This can be implemented as a conditional tabindex, for example <code>tabindex=\"[[!item.isTabbable && '-1']]\"</code>.<br/>\n         When composing with core pack components, this is not needed, as they are tabbable mode aware.\n        </td>\n    </tr>\n  </tbody>\n</table>\n\n<p>The following keys are not currently supported:</p>\n\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Key</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>componentElement</kbd></td>\n      <td>A reference to the root element of CardView.</td>\n    </tr>\n    <tr>\n      <td><kbd>datasource</kbd></td>\n      <td>A reference to the data source object.</td>\n    </tr>\n    <tr>\n      <td><kbd>index</kbd></td>\n      <td>The index of the item, where 0 is the index of the first item.  In the hierarchical case the index is relative to its parent.</td>\n    </tr>\n    <tr>\n      <td><kbd>key</kbd></td>\n      <td>The key of the item (this duplicates item.metadata.key and has been deprecated)</td>\n    </tr>\n    <tr>\n      <td><kbd>metadata</kbd></td>\n      <td>The metadata of the item (this is instead available in item)</td>\n    </tr>\n    <tr>\n      <td><kbd>parentElement</kbd></td>\n      <td>This will be supported by the Hierarchical list component and no longer applies to CardView..</td>\n    </tr>\n  </tbody>\n</table>\n\n<h3 id=\"data-attributes-section\">\n  Custom Data Attributes\n  <a class=\"bookmarkable-link\" title=\"Bookmarkable Link\" href=\"#data-attributes-section\"></a>\n</h3>\n\n<p>CardView supports the following custom data attributes.\n<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Name</th>\n      <th>Description</th>\n      <th>Example</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><kbd>data-oj-as</kbd></td>\n      <td>Provides an alias for a specific template instance and has the same subproperties as the $current variable.</td>\n      <td>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-card-view id=\"CardView\">\n  &lt;template slot=\"itemTemplate\" data-oj-as=\"item\">\n  &lt;/template>\n&lt;/oj-c-card-view></code></pre>\n      </td>\n    </tr>\n    <tr>\n      <td><kbd>data-oj-clickthrough</kbd></td>\n      <td><p>Specify on any element inside an item where you want to control whether CardView should perform actions triggered by\n          a click event originating from the element or one of its descendants.</p>\n          <p>For example, if you specify this attribute with a value of \"disabled\" on a link inside an item, then CardView\n          will not select or trigger itemAction event to be fired when user clicks on the link.</p>\n          <p>Note that the currentItem will still be updated to the item that the user clicked on.</p>\n          <p>Also note you do not need to set this attribute on core pack components such as oj-c-button, as it natively supports\n             disabling clickthrough.</p>\n      </td>\n      <td>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-card-view id=\"card-view\">\n  &lt;template slot=\"itemTemplate\">\n    &lt;a href=\"#\" data-oj-clickthrough=\"disabled\">&lt;/a>\n  &lt;/template>\n&lt;/oj-c-card-view></code></pre>\n      </td>\n    </tr>\n    <tr>\n      <td><kbd>data-oj-manage-tabs</kbd></td>\n      <td><p>CardView does not manipulate the tabindex of the item content.  Applications should set the tabIndex of any focusable\n         element based on the isTabbableMode property from the context pass to the itemTemplate.</p>\n         <p>However, there will be cases where you can't control the tabindex of the content, for example, if you are using components from another team.</p>\n         <p>In that case, applications can specify this attribute on the element or one of its ancestors so that when the itemTemplate is processed,\n         it will scan and manipulate the tabindex of any focusable elements.</p>\n      </td>\n      <td>\n        <pre class=\"prettyprint\"><code>&lt;oj-c-card-view id=\"CardView\">\n  &lt;template slot=\"itemTemplate\">\n    &lt;some-component-with-focusable-elements data-oj-manage-tabs>&lt;/some-component-with-focusable-elements>\n  &lt;/template>\n&lt;/oj-c-card-view></code></pre>\n      </td>\n    </tr>\n  </tbody>\n</table>",
+    "scope": "static",
+    "tagWithoutBrackets": "oj-c-card-view",
+    "tagWithBrackets": "<oj-c-card-view>",
+    "domInterface": "CCardViewElement",
+    "ojPageTitle": "&lt;oj-c-card-view>",
+    "ojcomponent": true,
+    "isvcomponent": true,
+    "camelCaseName": "CardView",
+    "ojPageTitlePrefix": "Element: ",
+    "ojtsvcomponent": true,
+    "tstype": {
+      "target": "Type",
+      "value": "interface CCardViewElement<K extends string | number,D> extends JetElement<CardViewElementSettableProperties<K,D>>"
+    },
+    "ojsignature": [
+      {
+        "target": "Type",
+        "value": "interface CCardViewElement<K extends string | number,D> extends JetElement<CardViewElementSettableProperties<K,D>>"
+      }
+    ],
+    "since": "17.0.0",
+    "tsdeprecated": [
+      {
+        "type": "candidate",
+        "since": "17.0.0"
+      }
+    ],
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "ojmodule": "card-view"
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#currentItem",
+    "name": "currentItem",
+    "kind": "member",
+    "longname": "oj-c.CardView#currentItem",
+    "optional": true,
+    "scope": "instance",
+    "ojwriteback": true,
+    "readonly": true,
+    "description": "The item that currently has keyboard focus",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "type": {
+      "names": [
+        "any"
+      ]
+    },
+    "tstype": [
+      {
+        "target": "Type",
+        "value": "ReadOnlyPropertyChanged",
+        "jsdocOverride": true
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#data",
+    "name": "data",
+    "kind": "member",
+    "longname": "oj-c.CardView#data",
+    "optional": true,
+    "scope": "instance",
+    "description": "The data source for CardView. Must be of type DataProvider.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "defaultvalue": null,
+    "type": {
+      "names": [
+        "DataProvider|null"
+      ]
+    },
+    "tstype": [
+      {
+        "target": "Type",
+        "value": "DataProvider<K, D>|null",
+        "jsdocOverride": true
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#gutterSize",
+    "name": "gutterSize",
+    "kind": "member",
+    "longname": "oj-c.CardView#gutterSize",
+    "optional": true,
+    "scope": "instance",
+    "description": "Specifies size of the gutter between columns and rows.\n\nPossible values are: 'xs', 'sm', 'md', 'lg' and 'xl'.\nThe default value is 'sm'.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "defaultvalue": "\"sm\"",
+    "type": {
+      "names": [
+        "\"xs\"",
+        "\"sm\"",
+        "\"md\"",
+        "\"lg\"",
+        "\"xl\""
+      ]
+    }
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#scrollPolicyOptions",
+    "name": "scrollPolicyOptions",
+    "kind": "member",
+    "longname": "oj-c.CardView#scrollPolicyOptions",
+    "optional": true,
+    "scope": "instance",
+    "description": "scrollPolicy options.\n<p>\nThe following options are supported:\n<ul>\n  <li>fetchSize: The number of items fetched each time when scroll to the end.</li>\n  <li>scroller: The css selector that locates the element in which CardView uses to determine the scroll position as well as the maximum scroll position where scroll to the end will trigger a fetch.  If not specified then the oj-c-card-view element is used.</li>\n</ul>\nBy default, the next block of rows is fetched when the user scrolls to the end of the CardView/scroller. The fetchSize option determines how many rows are fetched in each block.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "type": {
+      "names": [
+        "object"
+      ]
+    },
+    "tstype": [
+      {
+        "target": "Type",
+        "value": "{ fetchSize?: number; scroller?: string }",
+        "jsdocOverride": true
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#scrollPolicyOptions.fetchSize",
+    "name": "scrollPolicyOptions.fetchSize",
+    "kind": "member",
+    "longname": "oj-c.CardView#scrollPolicyOptions.fetchSize",
+    "optional": true,
+    "scope": "instance",
+    "description": "",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "defaultvalue": 25,
+    "type": {
+      "names": [
+        "number"
+      ]
+    }
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#scrollPolicyOptions.scroller",
+    "name": "scrollPolicyOptions.scroller",
+    "kind": "member",
+    "longname": "oj-c.CardView#scrollPolicyOptions.scroller",
+    "optional": true,
+    "scope": "instance",
+    "description": "",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "type": {
+      "names": [
+        "string"
+      ]
+    }
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#selected",
+    "name": "selected",
+    "kind": "member",
+    "longname": "oj-c.CardView#selected",
+    "optional": true,
+    "scope": "instance",
+    "ojwriteback": true,
+    "description": "The current selected items in the CardView. An empty KeySet indicates nothing is selected.\nIn addition, <a href=\"AllKeySetImpl.html\">AllKeySetImpl</a> set\ncan be used to represent select all state.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "type": {
+      "names": [
+        "object"
+      ]
+    }
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#selectionMode",
+    "name": "selectionMode",
+    "kind": "member",
+    "longname": "oj-c.CardView#selectionMode",
+    "optional": true,
+    "scope": "instance",
+    "description": "<p>The type of selection behavior that is enabled on the CardView. This attribute controls the number of selections that can be made via selection gestures at any given time.\n\n<p>If <code class=\"prettyprint\">single</code> or <code class=\"prettyprint\">multiple</code> is specified, selection gestures will be enabled, and the CardView's selection styling will be applied to all items specified by the <a href=\"#selection\">selection</a> and <a href=\"#selected\">selected</a> attributes.\nIf <code class=\"prettyprint\">none</code> is specified, selection gestures will be disabled, and the CardView's selection styling will not be applied to any items specified by the <a href=\"#selection\">selection</a> and <a href=\"#selected\">selected</a> attributes.\n\n<p>Changing the value of this attribute will not affect the value of the <a href=\"#selection\">selection</a> or <a href=\"#selected\">selected</a> attributes.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "ojvalues": [
+      {
+        "name": "multiple",
+        "description": "Multiple items can be selected at the same time.",
+        "displayName": "Multiple",
+        "type": {
+          "names": [
+            "string"
+          ]
+        }
+      },
+      {
+        "name": "none",
+        "description": "Selection is disabled.",
+        "displayName": "None",
+        "type": {
+          "names": [
+            "string"
+          ]
+        }
+      },
+      {
+        "name": "single",
+        "description": "Only a single item can be selected at a time.",
+        "displayName": "Single",
+        "type": {
+          "names": [
+            "string"
+          ]
+        }
+      }
+    ],
+    "defaultvalue": "\"none\"",
+    "type": {
+      "names": [
+        "\"none\"",
+        "\"multiple\"",
+        "\"single\""
+      ]
+    }
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#initialAnimation",
+    "name": "initialAnimation",
+    "kind": "member",
+    "longname": "oj-c.CardView#initialAnimation",
+    "optional": true,
+    "scope": "instance",
+    "description": "Specify animation when cards are initially rendered.\nPossible values are: 'slideUp' and 'slideDown",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "defaultvalue": "\"slideUp\"",
+    "type": {
+      "names": [
+        "\"slideUp\"",
+        "\"slideDown\""
+      ]
+    }
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#focusBehavior",
+    "name": "focusBehavior",
+    "kind": "member",
+    "longname": "oj-c.CardView#focusBehavior",
+    "optional": true,
+    "scope": "instance",
+    "description": "Specifies which focus behavior CardView should use for an item that has single focusable element during keyboard navigation.\nWhen the focusBehavior is 'card', the focus will be on the root of CardView and it will do logical focus on the card. When the focusBehavior\nis 'content', the first focusable element within the card will get focus. Note that when set to 'content', there should only be one focusable\nelement within the card. If that's not the case, a warning will be logged and the focus behavior will be reset to 'card'.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "defaultvalue": "\"card\"",
+    "type": {
+      "names": [
+        "\"content\"",
+        "\"card\""
+      ]
+    }
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#columns",
+    "name": "columns",
+    "kind": "member",
+    "longname": "oj-c.CardView#columns",
+    "optional": true,
+    "scope": "instance",
+    "description": "Specifies the exact number of columns to render. By default, CardView will determine the number of columns based on\nwidth of the CardView and the width of the cards.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "ojvalues": [
+      {
+        "name": "auto",
+        "description": "CardView will determine the number of columns based on width of the CardView and the width of the cards",
+        "displayName": "Auto",
+        "type": {
+          "names": [
+            "string"
+          ]
+        }
+      }
+    ],
+    "defaultvalue": "auto",
+    "type": {
+      "names": [
+        "number|string"
+      ]
+    }
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#reorderable",
+    "name": "reorderable",
+    "kind": "member",
+    "longname": "oj-c.CardView#reorderable",
+    "optional": true,
+    "scope": "instance",
+    "description": "The reorder option contains a subset of options for reordering items.\n\n<p>The following options are supported:</p>\n<ul>\n  <li>items: Enable or disable reordering the items within the same CardView using drag and drop or keyboard. Specify 'enabled' to enable reordering. Setting the value to <code class=\"prettyprint\">\"disabled\"</code> or setting the <code class=\"prettyprint\">\"reorderable\"</code> property\n             to <code class=\"prettyprint\">null</code> (or omitting it), disables reordering support.</li>\n</ul>",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "type": {
+      "names": [
+        "object"
+      ]
+    },
+    "tstype": [
+      {
+        "target": "Type",
+        "value": "{ items?: 'enabled' | 'disabled' }",
+        "jsdocOverride": true
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#reorderable.items",
+    "name": "reorderable.items",
+    "kind": "member",
+    "longname": "oj-c.CardView#reorderable.items",
+    "optional": true,
+    "scope": "instance",
+    "description": "",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "defaultvalue": "\"disabled\"",
+    "type": {
+      "names": [
+        "\"disabled\"",
+        "\"enabled\""
+      ]
+    }
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#setProperty",
+    "name": "setProperty",
+    "kind": "function",
+    "longname": "oj-c.CardView#setProperty",
+    "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "scope": "instance",
+    "params": [
+      {
+        "name": "property",
+        "description": "The property name to set. Supports dot notation for subproperty access.",
+        "type": "string"
+      },
+      {
+        "name": "value",
+        "description": "The new value to set the property to.",
+        "type": "any"
+      }
+    ],
+    "returns": [
+      {
+        "type": {
+          "names": [
+            "void"
+          ]
+        }
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#getProperty",
+    "name": "getProperty",
+    "kind": "function",
+    "longname": "oj-c.CardView#getProperty",
+    "description": "Retrieves the value of a property or a subproperty.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "scope": "instance",
+    "params": [
+      {
+        "name": "property",
+        "description": "The property name to get. Supports dot notation for subproperty access.",
+        "type": "string"
+      }
+    ],
+    "returns": [
+      {
+        "type": {
+          "names": [
+            "any"
+          ]
+        }
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#setProperties",
+    "name": "setProperties",
+    "kind": "function",
+    "longname": "oj-c.CardView#setProperties",
+    "description": "Performs a batch set of properties.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "scope": "instance",
+    "params": [
+      {
+        "name": "properties",
+        "description": "An object containing the property and value pairs to set.",
+        "type": "object"
+      }
+    ],
+    "returns": [
+      {
+        "type": {
+          "names": [
+            "void"
+          ]
+        }
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#event:ojReorder",
+    "name": "ojReorder",
+    "kind": "event",
+    "longname": "oj-c.CardView#event:ojReorder",
+    "description": "Triggered after items are reordered within CardView via drag and drop or keyboard.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "scope": "instance",
+    "properties": [
+      {
+        "name": "reorderedKeys",
+        "description": "An array of keys matching the new order of items",
+        "optional": false,
+        "type": {
+          "names": [
+            "Array<any>"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "Array<K>",
+            "for": "reorderedKeys",
+            "jsdocOverride": true
+          }
+        ]
+      },
+      {
+        "name": "itemKeys",
+        "description": "An array of keys of the items that are moved",
+        "optional": false,
+        "type": {
+          "names": [
+            "Array<any>"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "Array<K>",
+            "for": "itemKeys",
+            "jsdocOverride": true
+          }
+        ]
+      },
+      {
+        "name": "referenceKey",
+        "description": "The key of the item where the moved items will be dropped after. If the moved items were dropped at the very beginning, the referenceKey will be null.",
+        "optional": false,
+        "type": {
+          "names": [
+            "any"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "K|null",
+            "for": "referenceKey",
+            "jsdocOverride": true
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#noData",
+    "name": "noData",
+    "kind": "member",
+    "longname": "oj-c.CardView#noData",
+    "description": "<p>The <code class=\"prettyprint\">noData</code> slot is used to specify the content to display when the CardView is empty. The slot content\nmust be a &lt;template&gt; element. If not specified then a default no data message will be displayed.",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "scope": "instance",
+    "ojchild": false,
+    "ojslot": true,
+    "properties": []
+  },
+  {
+    "memberof": "oj-c.CardView",
+    "id": "oj-c.CardView#itemTemplate",
+    "name": "itemTemplate",
+    "kind": "member",
+    "longname": "oj-c.CardView#itemTemplate",
+    "description": "<p>The <code class=\"prettyprint\">itemTemplate</code> slot is used to specify the template for rendering each item in the CardView. The slot content must be a &lt;template> element.\n<p>When the template is executed for each item, it will have access to the binding context containing the following properties:</p>\n<ul>\n  <li>$current - an object that contains information for the current item.</li>\n</ul>",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "scope": "instance",
+    "ojchild": false,
+    "ojslot": true,
+    "properties": [
+      {
+        "name": "data",
+        "description": "The data of the item.  Note this is made available primarily to ease migration.\nApplications should get the data from the item property instead.",
+        "optional": false,
+        "type": {
+          "names": [
+            "any"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "D",
+            "for": "data",
+            "jsdocOverride": true
+          }
+        ]
+      },
+      {
+        "name": "item",
+        "description": "Contains the data and metadata of the item.",
+        "optional": false,
+        "type": {
+          "names": [
+            "object"
+          ]
+        },
+        "tstype": [
+          {
+            "target": "Type",
+            "value": "Item<K, D>",
+            "for": "item",
+            "jsdocOverride": true,
+            "module": {
+              "Item": "ojdataprovider"
+            }
+          }
+        ]
+      },
+      {
+        "name": "isTabbable",
+        "description": "A boolean indicating whether the item is in tabbable mode or not.\nTemplate elements should not be tab-stops when the item is not in tabbable mode, this context can be used to implement\nconditional behavior for all tabbable child elements.",
+        "optional": true,
+        "type": {
+          "names": [
+            "boolean"
+          ]
+        }
+      }
+    ]
+  },
+  {
+    "id": "oj-c.CardView.keyboardDoc",
+    "name": "keyboardDoc",
+    "kind": "member",
+    "longname": "oj-c.CardView.keyboardDoc",
+    "description": "<table class=\"keyboard-table\">\n  <thead>\n    <tr>\n      <th>Target</th>\n      <th>Key</th>\n      <th>Action</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td rowspan = \"20\" nowrap>Card Item</td>\n      <td><kbd>F2</kbd></td>\n      <td>Enters tabbable mode.  This enables keyboard action on elements inside the item, including navigate between focusable elements inside the item.  It can also be used to exit tabbable mode if already in tabbable mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Esc</kbd></td>\n      <td>Exits tabbable mode.</td>\n    </tr>\n    <tr>\n      <td><kbd>Tab</kbd></td>\n      <td>When in tabbable mode, navigates to next focusable element within the item.  If the last focusable element is reached, shift focus back to the first focusable element.\n          When not in tabbable mode, navigates to next focusable element on page (outside CardView).</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Tab</kbd></td>\n      <td>When in tabbable mode, navigates to previous focusable element within the item.  If the first focusable element is reached, shift focus back to the last focusable element.\n          When not in tabbable mode, navigates to previous focusable element on page (outside CardView).</td>\n    </tr>\n    <tr>\n      <td><kbd>DownArrow</kbd></td>\n      <td>Move focus to the item below.</td>\n    </tr>\n    <tr>\n      <td><kbd>UpArrow</kbd></td>\n      <td>Move focus to the item above.</td>\n    </tr>\n    <tr>\n      <td><kbd>LeftArrow</kbd></td>\n      <td>Move focus to the item on the left.</td>\n    </tr>\n    <tr>\n      <td><kbd>RightArrow</kbd></td>\n      <td>Move focus to the item on the right.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+DownArrow</kbd></td>\n      <td>Extend the selection to the item below.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+UpArrow</kbd></td>\n      <td>Extend the selection to the item above.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+LeftArrow</kbd></td>\n      <td>Extend the selection to the item on the left.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+RightArrow</kbd></td>\n      <td>Extend the selection to the item on the right.</td>\n    </tr>\n    <tr>\n      <td><kbd>Space</kbd></td>\n      <td>Toggles to select and deselect the current item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Space</kbd></td>\n      <td>Selects contiguous items from the last selected item to the current item.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+DownArrow</kbd></td>\n      <td>Reorder the current item down.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+UpArrow</kbd></td>\n      <td>Reorder the current item up.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+LeftArrow</kbd></td>\n      <td>Reorder the current item to the left.</td>\n    </tr>\n    <tr>\n      <td><kbd>Shift+Cmd/Ctrl+RightArrow</kbd></td>\n      <td>Reorder the current item to the right.</td>\n    </tr>\n  </tbody>\n</table>",
+    "memberof": "oj-c.CardView",
+    "meta": {
+      "filename": "card-view.tsx",
+      "path": "web/components/oj-c/card-view"
+    },
+    "ojfragment": true
+  }
+]