Merge pull request #12 from markuczy/feat/page-header-cookbook

feat: page header cookbook

docs/modules/angular/pages/cookbook/components/page-header/index.adoc

@@ -0,0 +1,113 @@
+= OneCX PageHeader
+
+:page_header_storybook: https://main--65f7f64d4506c9f2dfe59383.chromatic.com/?path=/docs/components-pageheadercomponent--docs
+:idprefix:
+:idseparator: -
+
+[#overview]
+== Overview
+This document aims to showcase how to use the PageHeader component.
+
+This component should be used for creating a header for the pages. Please, visit the storybook page for the {page_header_storybook}[PageHeader component] and interact with the examples to find out if the component is suitable for the desired use-case.
+
+[#customization]
+== Customization
+The PageHeader component allows to customize its content:
+
+* control header title, subtitle and figure
+* display page details
+* display action buttons and menu items
+
+To find out how to work with PageHeader component, please visit the {page_header_storybook}[storybook page] and interact with the examples to find out the required features. For more in-depth information on the PageHeader component interface, please access further documentation.
+
+// TODO: Add reference to BreadcrumbService
+[#inputs]
+== Inputs
+
+.PageHeader inputs
+[cols="1,1,1,2", options="header"]
+|===
+| Input name | Type | Default | Description
+
+| `header` | `string` | - | Header title.
+| `loading` | `boolean` | `false` | If component is in loading state. Set to `true` to display component in the loading state.
+| `showFigure` | `boolean` | `true` | If header figure should be visible. Set to `false` to hide the figure.
+| `figureImage` | `string` | - | Image URL to be displayed in the header figure.
+| `subheader` | `string` | - | Header subtitle.
+| `actions` | `<<action, Action>>[]` | - | Array of actions available in the header in form of a button or a menu item.
+| `objectDetails` | `<<object-detail-item, ObjectDetailItem>>[]` | - | Array of detail items to be displayed in the header.
+| `showBreadcrumbs` | `boolean` | `true` | If breadcrumbs should be visible.
+| `manualBreadcrumbs` | `boolean` | `false` | If breadcrumbs should be set manually. By default BreadcrumbService will generate breadcrumbs based on the router state. Set to `true` and set breadcrumbs for module routes to use manual mode.
+| `enableGridView` | `boolean` | - | If grid view should be enabled. Set to `false` to use column view. Set to `true` to use grid view.
+| `gridLayoutDesktopColumns` | `1 \| 2 \| 3 \| 4 \| 6 \| 12` | - | The amount of columns for grid view.
+| [.line-through]`figureBackground` | [.line-through]`boolean` | [.line-through]`true` | Deprecated.
+| [.line-through]`disableDefaultActions` | [.line-through]`boolean` | [.line-through]`false` | Deprecated.
+|===
+
+[#outputs]
+== Outputs
+
+.PageHeader outputs
+|===
+| Output name | Type | Description
+
+| [.line-through]`save` | [.line-through]`any` | Deprecated.
+|===
+
+[#types]
+== Types
+
+[#action]
+=== Action
+Action type is used to create:
+
+* action buttons in the header (use `show: 'always'`)
+* action menu item in the `more actions` button in the header (use `show: 'asOverflow'`)
+
+.Action interface
+|===
+|Property |Type | Description
+
+| `id?` | `string` | Identifier of the action button or menu item.
+| `label?` | `string` | Action button or menu item text.
+| `labelKey?` | `string` | Translation key for action button or menu item text. Has higher priority than `label`.
+| `icon?` | `string` | Icon of the action button or menu item .
+| `permission?` | `string` | Permission for the action. If user does not have this permission, the action will not be shown.
+| `title?` | `string` | Action button or menu item tooltip text.
+| `titleKey?` | `string` | Translation key for action button or menu item tooltip text.
+| `ariaLabel?` | `string` | Text for the aria label of the action button. Used for actions with `show: 'always'` property.
+| `ariaLabelKey?` | `string` | Translation key for the aria label of the action button. Used for actions with `show: 'always'` property. Has higher priority than `ariaLabel`.
+| `actionCallback?` | `(): void` | Callback to be used when the button is clicked or the menu item is chosen.
+| `disabled?` | `boolean` | If action button or menu item should be disabled.
+| `disabledTooltip?` | `string` | Tooltip for the disabled action button.
+| `disabledTooltipKey?` | `string` | Translation key for the tooltip of the disabled action button. Has higher priority than `disabledTooltipKey`.
+| `show?` | `'always' \|'asOverflow'` | Action button display control. Use `'always'` to display button in the header. Use `'asOverflow'` to add a menu item to the `more actions` menu button in the header.
+| `conditional?` | `boolean` | If action should be visible on condition resolved in `showCondition` property.
+| `showCondition?` | `boolean` | If `conditional: true` is set, this value determines if the action is visible. Note, this property will not work with dynamic values. Please, replace the passed Action if you wish to update the condition.
+| [.line-through]`btnClass?` | [.line-through]`string` | Deprecated.
+|===
+
+[#object-detail-item]
+=== ObjectDetailItem
+ObjectDetailItem is used to define the detail item to be displayed for the page in the header. The detail item has a label and can have a value as well as action button.
+
+.ObjectDetailItem interface
+|===
+| Property | Type | Description
+| `label | `string` | Text for the detail label. Use `labelPipe` to transform the label e.g., using TranslatePipe.
+| `value? | `string` | Text for the detail value. Use `valuePipe` to transform the value e.g., using TranslatePipe.
+| `labelTooltip? | `string` | Text for the detail label tooltip.
+| `valueTooltip? | `string` | Text for the detail value tooltip.
+| `icon? | `PrimeIcon` | Icon displayed before the detail value.
+| `iconStyleClass? | `string` | Style of the icon element.
+| `labelPipe? | `Type<any>` | Pipe used to transform the detail label provided via `label`.
+| `valuePipe? | `Type<any>` | Pipe used to transform the detail value provided via `value`.
+| `valuePipeArgs? | `string` | Arguments for the Pipe provided via `valuePipe`, used for transforming the detail value.
+| `valueCssClass? | `string` | String containing css classes to be used for displaying the detail value.
+| `actionItemIcon? | `PrimeIcon` | Icon for the detail item action button.
+| `actionItemCallback? | `() => void` | Callback to be used when the detail item action button is clicked.
+| `actionItemTooltip? | `string` | Text for the detail action button tooltip.
+| `actionItemAriaLabelKey? | `string` | Translation key for the the aria label of the detail action button.
+| `actionItemAriaLabel? | `string` | Text for the aria label of the detail action button.
+| [.line-through]`tooltip? | [.line-through]`string` | Deprecated. Use `valueTooltip` instead.
+|===

docs/modules/angular/partials/nav.adoc

@@ -2,8 +2,10 @@
 * xref:angular:general/index.adoc[General]
 ** xref:angular:general/guidelines.adoc[Guidelines]
 * Cookbook
-** xref:angular:cookbook/components/group-by-count-diagram/index.adoc[GroupByCountDiagram]
-** xref:angular:cookbook/components/search-header/index.adoc[SearchHeader]
+** Components
+*** xref:angular:cookbook/components/page-header/index.adoc[PageHeader]
+*** xref:angular:cookbook/components/group-by-count-diagram/index.adoc[GroupByCountDiagram]
+*** xref:angular:cookbook/components/search-header/index.adoc[SearchHeader]
 * xref:angular:ngrx/ngrx.adoc[NgRx]
 ** Cookbook
 *** xref:angular:ngrx/cookbook/adding-search-criteria/general.adoc[Adding Search Criteria]