Miss any of our Open RFC calls?Watch the recordings here! »

@adobe/cq-angular-editable-components

2.0.2 • Public • Published

Table of contents

Spa Angular Editable Components

This project was generated with Angular CLI version 6.0.1.

This project provides the Angular components to get you started with integrating with the AEM Site Editor. The library code is the one in projects/cq-angular-editable-components

For now there is no sample application in this repo, so please refer to the official WeRetail Journal for the sample application.

Code scaffolding

In order to run this you need to have the node version required by Angular 6( Node version 8.9 and greater. ) Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build the library

Run ng build cq-angular-editable-components to build the library. The build artifacts will be stored in the dist/cq-angular-editable-components directory. Use the --prod flag for a production build.

Publishing the library

Our process requires that every publish is based on a released version.
Therefore the first step is to release the package.

Releasing the package

Because our goal was to keep in sync the version of the app package.json and the library package.json we have created a version script that will take care of running npm version on both the library and the application.

Example:

node version.js 0.0.1

This command will run npm --no-git-tag-version version 0.0.1 in the library folder and then it will run npm version 0.0.1 -f in the application folder.
The -f option is needed because the first npm version will force the git environment to be dirty.

Publishing

In order to publish you will need to build the library:

ng build cq-angular-editable-components

And then publish the built artifacts

cd dist/cq-angular-editable-components
npm publish

We have also added a npm script that can run the above commands together:

npm run publish-lib

Please not that any argument added to this script will go to the last command. In this case the last command is npm publish.
Therefore you can add all the arguments npm publish takes to npm run publish-lib.
Example, publishing a public package:

npm run publish-lib -- --private=false

Running unit tests

Run ng test cq-angular-editable-components to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e cq-angular-editable-components to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

API

Classes

Class: AEMAllowedComponentsContainerComponent

Hierarchy

Index

Properties

Accessors

Methods

Properties

allowedComponents

allowedComponents: object

Type declaration:
  • applicable: boolean

  • components: any


classNames

classNames: string

Inherited from AEMContainerComponent.classNames

Class names of the current component


cqItems

cqItems: any

Inherited from AEMContainerComponent.cqItems

Map of model items included in the current container


cqItemsOrder

cqItemsOrder: any

Inherited from AEMContainerComponent.cqItemsOrder

Array of model item keys


cqPath

cqPath: string = ""

Inherited from AEMContainerComponent.cqPath

Path to the model associated with the current instance of the component


emptyLabel

emptyLabel: string = "No allowed components"


modelName

modelName: string = ""

Inherited from AEMContainerComponent.modelName

Key of the model structure


title

title: string

Accessors

allowedComponentClassNames

get allowedComponentClassNames(): string

Returns: string


allowedComponentListTitleClassNames

get allowedComponentListTitleClassNames(): string

Returns: string


hostClasses

get hostClasses(): string

Inherited from AEMContainerComponent.hostClasses

Returns: string


isInEditMode

get isInEditMode(): boolean

Inherited from AEMContainerComponent.isInEditMode

Returns weather of not we are in the editor

Returns: boolean


placeholderPath

get placeholderPath(): string

Inherited from AEMContainerComponent.placeholderPath

Returns the placeholder path

Returns: string

Methods

getAllowedComponentListLabel

getAllowedComponentListLabel(): string

Returns: string


getAllowedComponentListPlaceholderClassNames

getAllowedComponentListPlaceholderClassNames(): string

Returns: string


getAllowedComponents

getAllowedComponents(): any

Returns: any


getDataPath

getDataPath(path: any): any

Inherited from AEMContainerComponent.getDataPath

Returns the aggregated path of this container path and the provided path

Parameters:

Name Type Description
path any the provided path to aggregate with the container path

Returns: any


getHostClassNames

getHostClassNames(): string

Inherited from AEMContainerComponent.getHostClassNames

Returns the class names of the container based on the data from the cqModel

Returns: string


getItem

getItem(itemKey: any): any

Inherited from AEMContainerComponent.getItem

Returns the item data from the cqModel

Parameters:

Name Type Description
itemKey any the itemKey to look for in the items.

Returns: any


getPlaceholderClassNames

getPlaceholderClassNames(): string

Inherited from AEMContainerComponent.getPlaceholderClassNames

Returns the placeholder classes

Returns: string


isAllowedComponentsApplicable

isAllowedComponentsApplicable(): boolean

Returns: boolean

Class: AEMComponentDirective

Hierarchy

  • AEMComponentDirective

Implements

  • AfterViewInit
  • OnInit
  • OnDestroy
  • OnChanges

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

+ new AEMComponentDirective(renderer: Renderer2, viewContainer: ViewContainerRef, factoryResolver: ComponentFactoryResolver, _changeDetectorRef: ChangeDetectorRef): AEMComponentDirective

Parameters:

Name Type
renderer Renderer2
viewContainer ViewContainerRef
factoryResolver ComponentFactoryResolver
_changeDetectorRef ChangeDetectorRef

Returns: AEMComponentDirective

Properties

aemComponent

aemComponent: any


cqPath

cqPath: string

Path to the model structure associated with the current component


itemAttrs

itemAttrs: object

HtmlElement attributes for the current instance of the component


itemName

itemName: string

Name of the current instance of the component

Accessors

changeDetectorRef

get changeDetectorRef(): ChangeDetectorRef

Returns: ChangeDetectorRef


cqItem

get cqItem(): object

Returns: object

set cqItem(value: object): void

Parameters:

Name Type
value object

Returns: void


type

get type(): any

Returns the type of the cqItem if exists.

Returns: any

Methods

ngAfterViewInit

ngAfterViewInit(): void

Returns: void


ngOnChanges

ngOnChanges(changes: SimpleChanges): void

Parameters:

Name Type
changes SimpleChanges

Returns: void


ngOnDestroy

ngOnDestroy(): void

Returns: void


ngOnInit

ngOnInit(): void

Returns: void

Class: AEMContainerComponent

Hierarchy

Index

Properties

Accessors

Methods

Properties

classNames

classNames: string

Class names of the current component


cqItems

cqItems: any

Map of model items included in the current container


cqItemsOrder

cqItemsOrder: any

Array of model item keys


cqPath

cqPath: string = ""

Path to the model associated with the current instance of the component


modelName

modelName: string = ""

Key of the model structure

Accessors

hostClasses

get hostClasses(): string

Returns: string


isInEditMode

get isInEditMode(): boolean

Returns weather of not we are in the editor

Returns: boolean


placeholderPath

get placeholderPath(): string

Returns the placeholder path

Returns: string

Methods

getDataPath

getDataPath(path: any): any

Returns the aggregated path of this container path and the provided path

Parameters:

Name Type Description
path any the provided path to aggregate with the container path

Returns: any


getHostClassNames

getHostClassNames(): string

Returns the class names of the container based on the data from the cqModel

Returns: string


getItem

getItem(itemKey: any): any

Returns the item data from the cqModel

Parameters:

Name Type Description
itemKey any the itemKey to look for in the items.

Returns: any


getPlaceholderClassNames

getPlaceholderClassNames(): string

Returns the placeholder classes

Returns: string

Class: AEMDirectiveTestComponent

Hierarchy

  • AEMDirectiveTestComponent

Index

Properties

Properties

data

data: any

Class: AEMModelProviderComponent

Hierarchy

  • AEMModelProviderComponent

Index

Constructors

Properties

Methods

Constructors

constructor

+ new AEMModelProviderComponent(): AEMModelProviderComponent

Returns: AEMModelProviderComponent

Properties

aemComponent

aemComponent: AEMComponentDirective


aemModelProvider

aemModelProvider: any


cqItem

cqItem: any

Model item associated with the current model provider component


cqPath

cqPath: any

Path to the model associated with the current instance of the component


itemName

itemName: any

Name of the item associated with the current model provider component

Methods

ngDestroy

ngDestroy(): void

Returns: void


ngOnInit

ngOnInit(): void

Returns: void


updateItem

updateItem(): void

Updates the item data

Returns: void

Class: AEMPageComponent

Hierarchy

Index

Properties

Accessors

Methods

Properties

classNames

classNames: string

Inherited from AEMContainerComponent.classNames

Class names of the current component


cqItems

cqItems: any

Inherited from AEMContainerComponent.cqItems

Map of model items included in the current container


cqItemsOrder

cqItemsOrder: any

Inherited from AEMContainerComponent.cqItemsOrder

Array of model item keys


cqPath

cqPath: string = ""

Inherited from AEMContainerComponent.cqPath

Path to the model associated with the current instance of the component


modelName

modelName: string = ""

Inherited from AEMContainerComponent.modelName

Key of the model structure

Accessors

hostClasses

get hostClasses(): string

Inherited from AEMContainerComponent.hostClasses

Returns: string


isInEditMode

get isInEditMode(): boolean

Inherited from AEMContainerComponent.isInEditMode

Returns weather of not we are in the editor

Returns: boolean


placeholderPath

get placeholderPath(): string

Inherited from AEMContainerComponent.placeholderPath

Returns the placeholder path

Returns: string

Methods

getDataPath

getDataPath(path: any): any

Overrides AEMContainerComponent.getDataPath

Returns the aggregated path of this container path and the provided path

Parameters:

Name Type Description
path any the provided path to aggregate with the container path

Returns: any


getHostClassNames

getHostClassNames(): string

Inherited from AEMContainerComponent.getHostClassNames

Returns the class names of the container based on the data from the cqModel

Returns: string


getItem

getItem(itemKey: any): any

Inherited from AEMContainerComponent.getItem

Returns the item data from the cqModel

Parameters:

Name Type Description
itemKey any the itemKey to look for in the items.

Returns: any


getPlaceholderClassNames

getPlaceholderClassNames(): string

Inherited from AEMContainerComponent.getPlaceholderClassNames

Returns the placeholder classes

Returns: string

Class: AEMResponsiveGridComponent

Hierarchy

AEMAllowedComponentsContainerComponent

AEMResponsiveGridComponent

Index

Properties

Accessors

Methods

Properties

allowedComponents

allowedComponents: object

Inherited from AEMAllowedComponentsContainerComponent.allowedComponents

Type declaration:
  • applicable: boolean

  • components: any


classNames

classNames: string

Overrides AEMContainerComponent.classNames

Class names of the current component


columnClassNames

columnClassNames: Object

Map of class names corresponding to each child of the current responsive grid


columnCount

columnCount: number

Current number of columns of the grid


cqItems

cqItems: any

Inherited from AEMContainerComponent.cqItems

Map of model items included in the current container


cqItemsOrder

cqItemsOrder: any

Inherited from AEMContainerComponent.cqItemsOrder

Array of model item keys


cqPath

cqPath: string = ""

Inherited from AEMContainerComponent.cqPath

Path to the model associated with the current instance of the component


emptyLabel

emptyLabel: string = "No allowed components"

Inherited from AEMAllowedComponentsContainerComponent.emptyLabel


gridClassNames

gridClassNames: string

Class names associated with the current responsive grid


modelName

modelName: string = ""

Inherited from AEMContainerComponent.modelName

Key of the model structure


title

title: string

Inherited from AEMAllowedComponentsContainerComponent.title

Accessors

allowedComponentClassNames

get allowedComponentClassNames(): string

Inherited from AEMAllowedComponentsContainerComponent.allowedComponentClassNames

Returns: string


allowedComponentListTitleClassNames

get allowedComponentListTitleClassNames(): string

Inherited from AEMAllowedComponentsContainerComponent.allowedComponentListTitleClassNames

Returns: string


hostClasses

get hostClasses(): string

Inherited from AEMContainerComponent.hostClasses

Returns: string


isInEditMode

get isInEditMode(): boolean

Inherited from AEMContainerComponent.isInEditMode

Returns weather of not we are in the editor

Returns: boolean


placeholderPath

get placeholderPath(): string

Inherited from AEMContainerComponent.placeholderPath

Returns the placeholder path

Returns: string

Methods

getAllowedComponentListLabel

getAllowedComponentListLabel(): string

Inherited from AEMAllowedComponentsContainerComponent.getAllowedComponentListLabel

Returns: string


getAllowedComponentListPlaceholderClassNames

getAllowedComponentListPlaceholderClassNames(): string

Inherited from AEMAllowedComponentsContainerComponent.getAllowedComponentListPlaceholderClassNames

Returns: string


getAllowedComponents

getAllowedComponents(): any

Inherited from AEMAllowedComponentsContainerComponent.getAllowedComponents

Returns: any


getAttrDataPath

getAttrDataPath(path: any): any

Returns the aggregated path of this container path and the provided path

Parameters:

Name Type Description
path any the provided path to aggregate with the container path

Returns: any


getColumnClassNames

getColumnClassNames(itemKey: string): any

Returns the column class names for a given column

Parameters:

Name Type Description
itemKey string The key of the column item

Returns: any


getDataPath

getDataPath(path: any): any

Inherited from AEMContainerComponent.getDataPath

Returns the aggregated path of this container path and the provided path

Parameters:

Name Type Description
path any the provided path to aggregate with the container path

Returns: any


getHostClassNames

getHostClassNames(): string

Overrides AEMContainerComponent.getHostClassNames

Returns the class names of the responsive grid based on the data from the cqModel

Returns: string


getItem

getItem(itemKey: any): any

Inherited from AEMContainerComponent.getItem

Returns the item data from the cqModel

Parameters:

Name Type Description
itemKey any the itemKey to look for in the items.

Returns: any


getPlaceholderClassNames

getPlaceholderClassNames(): string

Overrides AEMContainerComponent.getPlaceholderClassNames

Returns the placeholder classes

Returns: string


isAllowedComponentsApplicable

isAllowedComponentsApplicable(): boolean

Inherited from AEMAllowedComponentsContainerComponent.isAllowedComponentsApplicable

Returns: boolean

Class: AemPageDataResolver

Hierarchy

  • AemPageDataResolver

Implements

  • Resolve‹string›

Index

Constructors

Methods

Constructors

constructor

+ new AemPageDataResolver(): AemPageDataResolver

Returns: AemPageDataResolver

Methods

resolve

resolve(route: ActivatedRouteSnapshot): string

Returns the absolute resource path without extension.

example // returns: '/content/aa/bb' for route.url [ 'content', 'aa', 'bb.html' ] resolve(route)

Parameters:

Name Type Description
route ActivatedRouteSnapshot route

Returns: string

absolute resource path without extension

Class: AemPageRouteReuseStrategy

Implements RouteReuseStrategy to customize route reuse.

Hierarchy

  • AemPageRouteReuseStrategy

Implements

  • RouteReuseStrategy

Index

Methods

Methods

retrieve

retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null

Retrieves the previously stored route.

Parameters:

Name Type
route ActivatedRouteSnapshot

Returns: DetachedRouteHandle | null


shouldAttach

shouldAttach(route: ActivatedRouteSnapshot): boolean

Determines if this route (and its subtree) should be reattached.

Parameters:

Name Type
route ActivatedRouteSnapshot

Returns: boolean


shouldDetach

shouldDetach(route: ActivatedRouteSnapshot): boolean

Determines if this route (and its subtree) should be detached to be reused later.

Parameters:

Name Type
route ActivatedRouteSnapshot

Returns: boolean


shouldReuseRoute

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean

Determines if a route should be reused

Parameters:

Name Type
future ActivatedRouteSnapshot
curr ActivatedRouteSnapshot

Returns: boolean


store

store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void

Not storing deteached route.

Parameters:

Name Type
route ActivatedRouteSnapshot
detachedTree DetachedRouteHandle

Returns: void

Class: ComponentMappingWithConfig

The current class extends the @adobe/cq-spa-component-mapping#Mapto library and features with Angular specifics such as

  • Storing the editing configurations for each resource type

Hierarchy

  • ComponentMappingWithConfig

Index

Constructors

Methods

Constructors

constructor

+ new ComponentMappingWithConfig(spaMapping: SPAComponentMapping): ComponentMappingWithConfig

Parameters:

Name Type
spaMapping SPAComponentMapping

Returns: ComponentMappingWithConfig

Methods

get

get(resourceType: any): any

Returns the component class for the given resourceType

Parameters:

Name Type Description
resourceType any Resource type for which the component class has been stored

Returns: any


getEditConfig

getEditConfig(resourceType: any): any

Returns the EditConfig structure for the given type

Parameters:

Name Type Description
resourceType any Resource type for which the configuration has been stored

Returns: any


map

map(resourceTypes: any, clazz: any, editConfig: any): void

Stores a component class for the given resource types and also allows to provide an EditConfig object

Parameters:

Name Type Default Description
resourceTypes any - List of resource types
clazz any - Component class to be stored
editConfig any null -

Returns: void

Class: DirectiveComponent

Hierarchy

  • DirectiveComponent

Index

Properties

Accessors

Properties

attr1

attr1: any


attr2

attr2: any

Accessors

hostClasses

get hostClasses(): string

Returns: string

Variables

Functions

Object literals

Variables

Const ALLOWED_COMPONENT_PLACEHOLDER_CLASS_NAMES

ALLOWED_COMPONENT_PLACEHOLDER_CLASS_NAMES: "aem-AllowedComponent--component cq-placeholder placeholder" = "aem-AllowedComponent--component cq-placeholder placeholder"


Const ALLOWED_COMPONENT_TITLE_CLASS_NAMES

ALLOWED_COMPONENT_TITLE_CLASS_NAMES: "aem-AllowedComponent--title" = "aem-AllowedComponent--title"


Const ALLOWED_PLACEHOLDER_CLASS_NAMES

ALLOWED_PLACEHOLDER_CLASS_NAMES: "aem-AllowedComponent--list" = "aem-AllowedComponent--list"


Const CONTAINER_CLASS_NAMES

CONTAINER_CLASS_NAMES: "aem-container" = "aem-container"


Const EDIT_MODE

EDIT_MODE: string = "edit"

The editor is in one of the edition modes


Const PAGE_MODEL_SEPARATOR

PAGE_MODEL_SEPARATOR: "/jcr:content/" = "/jcr:content/"


Const PLACEHOLDER_CLASS_NAME

PLACEHOLDER_CLASS_NAME: "cq-placeholder" = "cq-placeholder"


Const PLACEHOLDER_CLASS_NAMES

PLACEHOLDER_CLASS_NAMES: "aem-Grid-newComponent" = "aem-Grid-newComponent"


Const PLACEHOLDER_ITEM_NAME

PLACEHOLDER_ITEM_NAME: ""* = "*"


Const PREVIEW_MODE

PREVIEW_MODE: string = "preview"

The editor is in preview mode


Const RESPONSIVE_GRID_TYPE

RESPONSIVE_GRID_TYPE: "wcm/foundation/components/responsivegrid" = "wcm/foundation/components/responsivegrid"


Const WCM_MODE_META_SELECTOR

WCM_MODE_META_SELECTOR: string = "meta[property="cq:wcmmode"]"

Selector that identifies the node that contains the WCM mode state


Let componentMapping

componentMapping: ComponentMappingWithConfig‹› = new ComponentMappingWithConfig(SPAComponentMapping)

Functions

MapTo

MapTo(resourceTypes: any): (Anonymous function)

Parameters:

Name Type
resourceTypes any

Returns: (Anonymous function)


getWCMMode

getWCMMode(): any

Returns the current WCM mode

Note that the value isn't, as of the date of this writing, updated by the editor

Returns: any


isBrowser

isBrowser(): boolean

Returns if we are in the browser context or not by checking for the existence of the window object

Returns: boolean

Object literals

Const Constants

Constants: object

CHILDREN_PROP

CHILDREN_PROP: any = PMConstants.CHILDREN_PROP

Children of an item

DATA_PATH_PROP

DATA_PATH_PROP: string = ":dataPath"

Path of the resource in the model

HIERARCHY_TYPE_PROP

HIERARCHY_TYPE_PROP: any = PMConstants.HIERARCHY_TYPE_PROP

Hierarchical type of the item

ITEMS_ORDER_PROP

ITEMS_ORDER_PROP: any = PMConstants.ITEMS_ORDER_PROP

Order in which the items should be listed

ITEMS_PROP

ITEMS_PROP: any = PMConstants.ITEMS_PROP

List of child items of an item

NEW_SECTION_CLASS_NAMES

NEW_SECTION_CLASS_NAMES: string = "new section"

Class names associated with a new section component

PATH_PROP

PATH_PROP: any = PMConstants.PATH_PROP

Path of the item

TYPE_PROP

TYPE_PROP: any = PMConstants.TYPE_PROP


Const Utils

Utils: object

Helper functions for interacting with the AEM environment

isInEditor

isInEditor(): boolean

Is the app used in the context of the AEM Page editor

Returns: boolean

Documentation

The technical documentation is already available, but if you are unable to solve your problem or you found a bug you can always contact us and ask for help!

Changelog

2.0.2 - 5 June 2020

  • Update to latest cq-spa-page-model-manager

2.0.1 - 25 February 2020

  • Doc: Improving the documentation

2.0.0 - 21 February 2020

  • BREAKING CHANGE Migration to Angular 9
  • Improvement: improving the change detection for components, using ChangeDetectorRef in favor of ngZone

1.2.0 - 5 April 2019

  • NEW FEATURE Template Editor
    • Give access to the list of Allowed Components from the ResponsiveGrid component

1.1.1 - 12 December 2018

  • Doc: Improving code documentation

1.1.0 - 12 December 2018

  • Improvement: Add dynamic routing

1.0.3 - 18 October 2018

  • Fix: Component cqItem attribute binding

1.0.2 - 28 September 2018

  • Adapting to the new PageModelManager API

  • Refactoring the Container to be independent of the ModelManager. This is achieved by refactoring the aem-directive to only be in charge of creating the dynamic components. This way consumers can add their own logic to update the model, such as from a store.

  • BREAKING CHANGE Refactor aem-directive to be independent of ModelManager

  • BREAKING CHANGE Introduced aem-model-provider component which is in charge now of communication with the ModelManager. This has been added only on AResponsiveGrid

  • BREAKING CHANGE The container component is now opaque of ModelManager, therefore it will not respond to updates from the editor. Extend the container and use aem-model-provider component to have this functionality added to it.

  • BREAKING CHANGE 'dragDropName' support removed for EditConfig in ComponentMapping

0.0.7-beta.2 - 1 August 2018

  • BREAKING CHANGE Refactoring of the Container, ResponsiveGrid and Placeholders to improve extensibility
  • BREAKING CHANGE Relocation of the columnClassNames field from the ResponsiveColumn to the ResponsiveGrid to respect the latest model representation, the field type changed
  • Server-side rendering preparation, fixing usage of native setAttribute.

0.0.7-beta.1 - 27 July 2018

  • BREAKING CHANGE Properties are no longer bundled in cqModel, we inject all properties directly on the components
    • Implications, all components should now remove cqModel property and use directly the api properties that they want to consume.

Install

npm i @adobe/cq-angular-editable-components

DownloadsWeekly Downloads

286

Version

2.0.2

License

Apache-2.0

Unpacked Size

601 kB

Total Files

53

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar