@adobe/cq-angular-editable-components

* [API](#api) * [Documentation](#documentation) * [Changelog](#changelog)

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@adobe/cq-angular-editable-components
2.0.24 years ago6 years agoMinified + gzip package size for @adobe/cq-angular-editable-components in KB

Readme

Table of contents
API Documentation Changelog
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


AEMAllowedComponentsContainerComponent
AEMResponsiveGridComponent

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

  • AEMContainerComponent

AEMAllowedComponentsContainerComponent

AEMPageComponent

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


AEMPageComponent

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 ALLOWEDCOMPONENTPLACEHOLDERCLASSNAMES

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

Const ALLOWEDCOMPONENTTITLECLASSNAMES

ALLOWEDCOMPONENTTITLECLASSNAMES: "aem-AllowedComponent--title" = "aem-AllowedComponent--title"

Const ALLOWEDPLACEHOLDERCLASSNAMES

ALLOWEDPLACEHOLDERCLASSNAMES: "aem-AllowedComponent--list" = "aem-AllowedComponent--list"

Const CONTAINERCLASSNAMES

CONTAINERCLASSNAMES: "aem-container" = "aem-container"

Const EDITMODE

EDITMODE: string = "edit"
The editor is in one of the edition modes

Const PAGEMODELSEPARATOR

PAGEMODELSEPARATOR: "/jcr:content/" = "/jcr:content/"

Const PLACEHOLDERCLASSNAME

PLACEHOLDERCLASSNAME: "cq-placeholder" = "cq-placeholder"

Const PLACEHOLDERCLASSNAMES

PLACEHOLDERCLASSNAMES: "aem-Grid-newComponent" = "aem-Grid-newComponent"

Const PLACEHOLDERITEMNAME

PLACEHOLDERITEMNAME: "" = ""

Const PREVIEWMODE

PREVIEWMODE: string = "preview"
The editor is in preview mode

Const RESPONSIVEGRIDTYPE

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

Const WCMMODEMETASELECTOR

WCMMODEMETASELECTOR: string = "metaproperty="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

CHILDRENPROP

CHILDRENPROP: any = PMConstants.CHILDRENPROP
Children of an item

DATAPATHPROP

DATAPATHPROP: string = ":dataPath"
Path of the resource in the model

HIERARCHYTYPEPROP

HIERARCHYTYPEPROP: any = PMConstants.HIERARCHY
TYPEPROP
Hierarchical type of the item

ITEMSORDERPROP

ITEMSORDERPROP: any = PMConstants.ITEMS
ORDERPROP
Order in which the items should be listed

ITEMSPROP

ITEMSPROP: any = PMConstants.ITEMSPROP
List of child items of an item

NEWSECTIONCLASSNAMES

NEWSECTIONCLASSNAMES: string = "new section"
Class names associated with a new section component

PATHPROP

PATH
PROP
: any = PMConstants.PATH
PROP
Path of the item

TYPEPROP

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.