libs/core/schemas/src/file-schemas/pages-json-parts.schema.ts
The page configuration that allows both Building Block and Dynamic Form configurations.
Omit
Properties |
|
import {
BusinessEventConfig,
PageData,
PageTitle,
ResourcesConfiguration,
ValidationRule
} from '@allianz/taly-core';
import { NxTreeNode } from '@aposin/ng-aquila/tree';
import { DynamicFormBBConfiguration } from './dynamic-form-config.model';
/**
* Configuration for Frame Parts (Navigation, Footer etc)
* @additionalProperties false
*/
export interface Frame {
/**
* Set to true to generate an application without header and footer. Defaults to false.
* @default false
*/
chromeless?: boolean;
footer?: FooterConfiguration;
header?: HeaderConfiguration;
stage?: StageConfiguration;
navigation?: FrameNavigationConfig;
content?: FrameContentConfiguration;
/**
* Set to true to use the spinner provided by TALY Frame. Spinner will block the entire
* frame whenever the application is busy with network requests.
* @default false
*/
spinner?: boolean;
/**
* Configuration for displaying the offer code below the action buttons.
*/
offerCode?: OfferCodeConfiguration;
}
/**
* Provide copyright text & links to be shown in the footer
* @additionalProperties false
*/
export interface FooterConfiguration {
/**
* Copyright Holder. The copyright symbol and the current year is automatically added to the configured value.
* @examples ["Allianz"]
*/
copyrightHolder?: string;
/**
* Array of links to be shown in footer
*/
links?: FooterLink[];
/**
* Subline that will be displayed below the main footer content
* @examples ["Allianz Australia Insurance Limited ABN 15 111 222 333. AFS Licence No. 234567"]
*/
subline?: string;
}
/**
* Provide the label & path for the footer link
* @additionalProperties false
*/
export interface FooterLink {
/**
* Is this an internal router path or external url?
*/
external?: boolean;
/**
* Unique id for the footer link. If provided, this will be used as part of the i18n key
*/
id?: string;
/**
* Text to be shown to the user
*/
label?: string;
/**
* The url or the router path for the link
*/
path?: string;
}
/**
* Provide additional configuration for the frame header.
* @additionalProperties false
*/
export interface HeaderConfiguration {
/**
* Provide a list of configurations for Building Blocks. They will show up as
* nx-header-actions within the NDBX header. The resources configured for these Building
* Blocks must only contain static values. PFE_STORE_QUERY or similar storage engines are
* not supported here.
*/
actions?: Omit<BaseBuildingBlockConfiguration, 'buildingBlockStyle' | 'sidebar'>[];
}
/**
* Provide additional configuration for the frame content.
* @additionalProperties false
*/
export interface FrameContentConfiguration {
/**
* Whether the content should be centered in the available space. Only applies to Expert journeys.
*/
centered?: boolean;
}
export interface OfferCodeConfiguration {
/**
* The PFE state location where an offer code is stored
* @examples ["$.offerCode"]
*/
stateKey?: string;
}
/**
* Describe the configuration of your Building Block. This is required for generation and
* runtime.
* @additionalProperties false
*/
export type BuildingBlockConfiguration =
| BuildingBlockConfigurationWithSection
| BuildingBlockConfigurationWithPanel;
/**
* @additionalProperties false
*/
export interface BuildingBlockConfigurationWithSection
extends BaseBuildingBlockConfiguration,
ConfigurationWithSection {}
/**
* @additionalProperties false
*/
export interface BuildingBlockConfigurationWithPanel
extends BaseBuildingBlockConfiguration,
ConfigurationWithPanel {}
/**
* @additionalProperties false
*/
export interface ConfigurationWithSection {
/**
* Optionally provide a section Id for this Building Block. A Building Block without a
* section will be treated as its own section.
*/
section?: string;
panel?: never;
}
/**
* @additionalProperties false
*/
export interface ConfigurationWithPanel {
/**
* When a list of panels (on #/definitions/page) is given, use this value to refer to a panel.
* @examples ["some-panel"]
*/
panel?: string;
section?: never;
}
export interface BaseBuildingBlockConfiguration extends BuildingBlockAndDynamicFormIntersection {
buildingBlockStyle?: BuildingBlockStyle;
/**
* Provide the name of the module which provides the Building Block. Will be imported from
* the described package. Secondary entry points are not yet supported.
* @examples ["PolicyClientInformationModule"]
*/
module: string;
/**
* Provide a mapping from an internal navigation event (key) to an actual page id (value). Instead of a page id you can also use implicit navigation to go back ("NAVIGATE_BACK"), forward ("NAVIGATE_NEXT") or home ("NAVIGATE_HOME").
* @examples [{ "home": "NAVIGATE_HOME", "payment": "payment-page", "back": "NAVIGATE_BACK" }]
*/
navigation?: { [key: string]: string };
/**
* Provide the package name where this Building Block was published before.
* @examples ["@allianz/building-blocks"]
*/
package: string;
resources?: ResourcesConfiguration;
/**
* Selector of the given Building Block to output it on the given page.
* @examples ["bb-some-building-block"]
*/
selector: string;
/**
* Should this building block be shown in the sidebar? This only affects expert applications.
*/
sidebar?: boolean;
validators?: ValidationRule[];
}
export interface BuildingBlockAndDynamicFormIntersection {
/**
* Provide the acl identifier. Optional, the id will be used as the default fallback.
* @examples ["some-building-block"]
*/
aclTag?: string;
/**
* Provide any type of data that you want to offer as the example state to be assigned when
* being used together with a Building Block debugger
*/
exampleState?: unknown;
/**
* Identify a Building Block on a page. Used as the PFE Store namespace and to identify a
* resource within an ACL rule. The Id must be unique on a single and usually should be
* unique across your application. TALY dasherizes the configured Building Block Id.
* @examples ["some-building-block"]
*/
id: string;
/**
* Provide a mapping from an emitted business event (key) to a PFE service activator or a PFE action (value).
* @examples [{ "request-offers": "fetch-offers" }, { "request-offers": { "handlerType": "PFE_SERVICE_ACTIVATOR", "config": { "path": "offers" } } }, { "button-clicked": { "handlerType": "PFE_ACTION", "config": { "type": "DO_SOMETHING_INTERESTING" } } }]
*/
businessEvents?: { [key: string]: BusinessEventConfig };
}
/**
* @additionalProperties false
*/
export type OverarchingDetailsBlockConfiguration = Omit<
BaseBuildingBlockConfiguration,
'buildingBlockStyle' | 'sidebar'
>;
/**
* @additionalProperties false
*/
export type BannerBlockConfiguration = Omit<BaseBuildingBlockConfiguration, 'sidebar'>;
/**
* Apply styling options to this Building Block.
*/
export type BuildingBlockStyle = BaseBuildingBlockStyle | CompactBuildingBlockStyle;
/**
* @additionalProperties false
*/
interface BaseBuildingBlockStyle {
/**
* The Building Block will have a background color that spans the full browser width.
* @default "transparent"
*/
backgroundColor?: string;
/**
* This Building Block will have less vertical paddings (16px in retail and 8px in expert).
* Only applicable when `backgroundColor` is set.
* @default false
*/
compact?: false;
}
/**
* @additionalProperties false
*/
interface CompactBuildingBlockStyle extends Omit<BaseBuildingBlockStyle, 'compact'> {
/**
* The Building Block will have a background color that spans the full browser width.
* @default "transparent"
*/
backgroundColor: string;
/**
* This Building Block will have less vertical paddings (16px in retail and 8px in expert).
* Only applicable when `backgroundColor` is set.
* @default false
*/
compact: true;
}
export type NotificationContext = 'info' | 'error' | 'success' | 'warning';
/**
* @additionalProperties false
*/
export interface BaseNotificationConfig {
/**
* The title of the notification. It can be fully static or a string containing a jsonPath expression. The static content will be translatable.
* @examples ["My Title", "Note about postal addresses in {$.country}"]
*/
title?: string;
/**
* The message of the notification. It can be fully static or a string containing a jsonPath expression. The static content will be translatable. Use Markdown for formatting.
* @examples [
* "My Message",
* "First name: {$['bb-pgr-simple'].person.firstName}. Full name: {$['bb-pgr-simple'].person.firstName} {$['bb-pgr-simple'].person.lastName}.",
* "text with [link](http://example.com) and list\n- item 1\n- [list link](http://example.com). Also supports dynamic data like: {$['bb-pgr-simple'].person.firstName}",
* "You can also link to internal pages by using the 'page://' prefix and the `pageId` inside a Markdown link, e.g. `[internal link](page://second-page)`"
* ]
*/
message: string;
/**
* The type of the notification
*/
context: Exclude<NotificationContext, 'error'>;
/**
* Whether the notification can be closed by the user
*/
closable?: boolean;
/**
* An optional jsonPath expression or PFE_EXPRESSION condition that dictates whether this notification will be visible
* @examples ["$.section1.visible", "{$.bb1.person.firstName} == {$.bb2.person.firstName}"]
*/
visibleIf?: string;
}
/**
* @additionalProperties false
*/
export interface ErrorNotificationConfig
extends Omit<BaseNotificationConfig, 'closable' | 'context'> {
/**
* The type of the notification
*/
context: Extract<NotificationContext, 'error'>;
}
export type NotificationConfig = BaseNotificationConfig | ErrorNotificationConfig;
/**
* Configuration for the Taly frame stage
* @additionalProperties false
*/
export interface StageConfiguration {
backLink?: BackLink;
}
/**
* Configuration for back link in the stage
* @additionalProperties false
*/
export interface BackLink {
onClickServiceActivator?: string;
}
/**
* Configuration for navigation stepper
*/
export type FrameNavigationConfig =
| FrameNavigationConfigWithSections
| FrameNavigationConfigWithJumpNavigationMenu;
interface FrameNavigationBaseConfig {
/**
* Set to true to disable the next button if the page is invalid.
* By default, the next button is always enabled
* @default false
*/
nextButtonDisabledWhenPageInvalid?: boolean;
}
/**
* @additionalProperties false
*/
interface FrameNavigationConfigWithSections extends FrameNavigationBaseConfig {
/**
* This can be used to combine pages into sections. The navigation stepper will show one
* step for each section. If you omit the sections each page will be shown as a separate
* step.
* @maxItems 7
* @default []
*/
sections?: SectionConfiguration[];
jumpNavigationMenu?: never;
}
/**
* @additionalProperties false
*/
interface FrameNavigationConfigWithJumpNavigationMenu extends FrameNavigationBaseConfig {
sections?: never;
/**
* Configuration for a jump navigation menu that allows users to navigate to different pages directly.
* @default []
*/
jumpNavigationMenu?: JumpNavigationMenuConfiguration;
}
/**
* @additionalProperties false
*/
export interface JumpNavigationMenuConfiguration {
/**
* A list of items that will be shown in the jump navigation menu
*/
items: JumpNavigationMenuEntry[];
}
export type JumpNavigationMenuEntry = JumpNavigationMenuParentEntry | JumpNavigationMenuLeafEntry;
/**
* @additionalProperties false
*/
export interface JumpNavigationMenuParentEntry extends JumpNavigationMenuEntryBase {
pageId?: never;
/**
* A list of children that will be shown in a sub menu
*/
children: JumpNavigationMenuLeafEntry[];
}
/**
* @additionalProperties false
*/
export interface JumpNavigationMenuLeafEntry extends JumpNavigationMenuEntryBase {
/**
* The page id to navigate to when this item is clicked
*/
pageId: string;
children?: never;
}
/**
* @additionalProperties false
*/
interface JumpNavigationMenuEntryBase extends NxTreeNode {
/**
* The label for this item to show in the menu. This will autoamtically be translatable.
*/
label: string;
/**
* An optional icon to show next to the label. Has to be a valid NDBX icon
* See https://ngx-ndbx.frameworks.allianz.io/documentation/icon/overview
*/
icon?: string;
}
/**
* Configuration for a section that consists of an id, a label to be used in the navigation,
* and a list of pages that this section contains.
* @additionalProperties false
*/
export interface SectionConfiguration {
/**
* The ID of this section. Must be unique across an app
* @examples ["section-a", "first-section", "introduction"]
*/
id: string;
/**
* The label for this section. This will be used to represent this section in the navigation
* stepper.
* @examples ["Section A", "First Section", "Introduction"]
*/
label: string;
/**
* A list of page-ids that belong to this section. When a user is on one of these pages the
* respective section will be marked as active.
* @examples [["page-a", "page-b", "page-c"], ["my-first-page"]]
*/
pages: string[];
/**
* An optional jsonPath expression or PFE_EXPRESSION condition that dictates whether this section will be visible
* @examples ["$.section1.visible", "{$.bb1.person.firstName} == {$.bb2.person.firstName}"]
*/
visibleIf?: string;
}
/**
* @additionalProperties false
*/
export interface LibraryConfiguration {
/**
* Name of the package
*/
package: string;
/**
* Version of the used package. You can use any semver compatible format as it's placed 'as
* is' in the package.json.
* @examples ["^1.0.0", "next", "10.0.0-beta.8"]
*/
version: string;
}
/**
* The page configuration that allows both Building Block and Dynamic Form configurations.
* @additionalProperties false
*/
export interface PageConfiguration
extends Omit<PageConfigurationWithTransformedDynamicForms, 'blocks'> {
/**
* Provide a list of configurations for Building Blocks. This is required for generation to
* determine which Building Block needs to be output. This configuration is used during
* runtime too.
* @default []
*/
blocks?: (BuildingBlockConfiguration | DynamicFormBBConfiguration)[];
}
/**
* The page configuration that allows Building Block configurations. No Dynamic Form configurations are allowed.
* @additionalProperties false
*/
export interface PageConfigurationWithTransformedDynamicForms {
/**
* Provide a list of configurations for Building Blocks and dynamic form Building Blocks
* @default []
*/
blocks?: BuildingBlockConfiguration[];
/**
* The page id is used to determine the filename of the generated page. The page Id must
* also match the page id in the PFE configuration otherwise the setup during runtime will
* fail.
* @examples ["my-page"]
*/
id: string;
pageData?: PageData;
/**
* List of available panels to group other content into.
*/
panels?: PanelDefinition[];
/**
* List of available sections to group other content into.
* @default []
*/
sections?: PageSectionDefinition[];
/**
* The page title can either be specified as a string or as an object to configure it in more detail (e.g. placing it within a stage).
* @examples ["My Page"]
*/
title?: PageTitle;
/**
* Optional list of small print paragraphs that should be shown on this page. Use Markdown for formatting.
* @default []
* @examples [["This is my legal text\n with a [link](http://example.com)", "Other legal text with a list:\n - item 1\n - item 2", "You can also link to internal pages by using the 'page://' prefix and the `pageId` inside a Markdown link, e.g. `[internal link](page://second-page)`"]]
*/
smallPrint?: string[];
/**
* Optional list of notifications that should be shown on this page.
* @default []
* @examples [[{"context": "info", "message": "This is an info message", "closable": false}, {"context": "error", "title": "Error title", "message": "This is an error message"}]]
*/
notifications?: NotificationConfig[];
/**
* A configuration of the Building Block that will be displayed as overarching details above the page content area.
*/
overarchingDetailsBlock?: OverarchingDetailsBlockConfiguration;
/** A Building Block that will be shown in the top area of the page and will stick to the top of the window */
bannerBlock?: BannerBlockConfiguration;
}
/**
* During the generation process this data is read to output Expansion Panels. Building
* Blocks can refer to the given Panel Id to be grouped with it.
* @additionalProperties false
*/
export interface PanelDefinition {
/**
* Set to true if this panel should be collapsed initially. By default the panel is expanded.
* @default false
*/
collapsed?: boolean;
/**
* Unique ID for the Panel to be referred to by Building Blocks.
*/
id: string;
/**
* Choose the style for the panel. Default is 'REGULAR' for expert journeys and 'LIGHT' for
* retail journeys. There is also 'EXTRA-LIGHT'.
*/
style?: StyleOfThePanel;
/**
* The given value is used as the default title for the generated panel. i18n needs to be
* supported by the generated application and will use this value as the default translation.
*/
title?: string;
/**
* Optionally provide a section Id for this panel. A panel without a
* section will be treated as its own section.
*/
section?: string;
}
/**
* Choose the style for the panel. Default is 'REGULAR' for expert journeys and 'LIGHT' for
* retail journeys. There is also 'EXTRA-LIGHT'.
*/
export const enum StyleOfThePanel {
ExtraLight = 'EXTRA-LIGHT',
Light = 'LIGHT',
Regular = 'REGULAR'
}
/**
* Page Sections can be used to group Building Blocks into visually connected sections.
* Building Blocks can refer to the given Section Id to be grouped within it.
* @additionalProperties false
*/
export interface PageSectionDefinition {
/**
* Unique ID for the Page Section to be referred to by Building Blocks.
*/
id: string;
/**
* The provided title will appear at the top of the section.
* @examples ["My Section"]
*/
title?: string;
/**
* Set to true if you want to add a divider line below this section.
* By default, the section does not contain a divider line.
* @default false
*/
dividerLineBelow?: boolean;
}
/**
* Configuration for a plugin that specifies a package and the modules from that package to
* be used, with optional options per module
* @additionalProperties false
*/
export interface PluginConfiguration {
modules: Module[];
package: string;
}
export interface Module {
name: string;
options?: { [key: string]: unknown };
}
/**
* Configuration for generating a webcomponent out of this application
* @additionalProperties false
*/
export interface WebcomponentConfiguration {
inputs?: WebcomponentInput[];
}
/**
* List of inputs that this webcomponent accepts. Each input will be placed into the store
* for later access.
* @additionalProperties false
*/
export interface WebcomponentInput {
/**
* The name of this input. This will be used as the HTML attribute that can be used to
* specify this input. HTML attributes only allow kebap-case so if you specify an input in
* camelCase, e.g. 'policyId', you need to pass it to the web component as 'policy-id="..."'.
* @examples ["policyId", "auth-token"]
*/
name: string;
/**
* The json expression at which the value of this input will be placed in the store.
* @examples ["$.inputs.policyId", "$.auth.token"]
*/
storeExpression: string;
}