[ADF-4152] Updated folder structure of core docs (#4415)

* [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Manual fixes to core doc file links * [ADF-4152] Further automatic + manual link tidying
2025-07-24 17:32:15 +00:00 · 2019-03-12 14:20:20 +00:00
parent 285e56e9fb
commit 5fc05da7aa
121 changed files with 1112 additions and 1329 deletions
--- a/docs/core/interfaces/card-view-item.interface.md
+++ b/docs/core/interfaces/card-view-item.interface.md
@@ -0,0 +1,152 @@
+---
+Title: Card View Item interface
+Added: v2.0.0
+Status: Active
+Last reviewed: 2018-05-08
+---
+
+# [Card View Item interface](../../../lib/core/card-view/interfaces/card-view-item.interface.ts "Defined in card-view-item.interface.ts")
+
+Defines the implementation of an item in a [Card View component](../components/card-view.component.md).
+
+## Definition
+
+```ts
+export interface CardViewItem {
+    label: string;
+    value: any;
+    key: string;
+    default?: any;
+    type: string;
+    displayValue: string;
+    editable?: boolean;
+    icon?: string;
+    data?: any;
+}
+```
+
+### Properties
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label | string | "" | Item label |
+| value | any |  | The original data value for the item |
+| key | string | "" | Identifying key (important when editing the item) |
+| default | any |  | The default value to display if the value is empty |
+| displayValue | string | "" | The value to display |
+| editable | boolean | false | Toggles whether the item is editable |
+| clickable | boolean | false | Toggles whether the item is clickable |
+| icon | string |  | The material icon to show beside clickable items |
+| data | any | null | Any custom data which is needed to be provided and stored in the model for any reason. During an update or a click event this can be a container of any custom data which can be useful for 3rd party codes. |
+
+## Details
+
+Card item components are loaded dynamically by the
+main [Card View component](../components/card-view.component.md). This allows you to define your own
+component for a custom item type.
+
+For example, follow the steps given below to add a **stardate** type to display Captain
+Picard's birthday (47457.1):
+
+1.  Define the model for the custom type.
+
+    Your model must extend the [`CardViewBaseItemModel`](../../../lib/core/card-view/models/card-view-baseitem.model.ts) class and implement the [`CardViewItem`](../../../lib/core/card-view/interfaces/card-view-item.interface.ts)
+    and [`DynamicComponentModel`](../../../lib/core/services/dynamic-component-mapper.service.ts) interfaces. See the
+    [Card View Text Item model source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts)
+    for an example of how to do this.
+
+    ```ts
+    import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
+
+    export class CardViewStarDateItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
+        type: string = 'star-date';
+
+        get displayValue() {
+            return this.convertToStarDate(this.value) || this.default;
+        }
+
+        private convertToStarDate(starTimeStamp: number): string {
+            // Do the magic
+        }
+    }
+    ```
+
+2.  Define the component for the custom type.
+
+    The selector is not important given that this is a dynamically loaded component.
+    You can choose any name for the selector, but it makes sense to follow the Angular standards.
+
+    ```ts
+    @Component({
+        selector: 'card-view-stardateitem' /* For example */
+        ...
+    })
+    export class CardViewStarDateItemComponent {
+        @Input()
+        property: CardViewStarDateItemModel;
+
+        @Input()
+        editable: boolean;
+
+        constructor(private cardViewUpdateService: CardViewUpdateService) {}
+
+        isEditable() {
+            return this.editable && this.property.editable;
+        }
+
+        showStarDatePicker() {
+            ...
+        }
+    }
+    ```
+
+    See the
+    [Card View Text Item component source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts)
+    or the
+    [Card View Date Item component source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts) for examples of how to make the field
+    editable.
+
+3.  Add your custom component to your module's `entryComponents` list.
+
+    You must register your component in your module's `entryComponents` array
+    to enable Angular to load it dynamically:
+
+    ```js
+    @NgModule({
+        imports: [...],
+        declarations: [
+            CardViewStarDateItemComponent
+        ],
+        entryComponents: [
+            CardViewStarDateItemComponent
+        ],
+        exports: [...]
+    })
+    export class MyModule {}
+    ```
+
+4.  Bind your custom component to the custom model type so that Angular's dynamic component
+    loader can find it.
+
+    ```ts
+    @Component({
+        ...
+        providers: [ CardItemTypeService ] /* If you don't want to pollute the main instance of the CardItemTypeService service */
+        ...
+    })
+    export class SomeParentComponent {
+
+        constructor(private cardItemTypeService: CardItemTypeService) {
+            cardItemTypeService.setComponentTypeResolver('star-date', () => CardViewStarDateItemComponent);
+        }
+    }
+    ```
+
+    The [Card Item Type service](../services/card-item-types.service.md) maps each item type to the
+    corresponding component. See its [doc page](../services/card-item-types.service.md) for further
+    details.
+
+## See also
+
+-   [Card View component](../components/card-view.component.md)
+-   [Card Item Types service](../services/card-item-types.service.md)