@adobe/cq-angular-editable-components
Version:
* [API](#api) * [Documentation](#documentation) * [Changelog](#changelog)
1,066 lines (1,026 loc) • 52.1 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@adobe/cq-spa-component-mapping'), require('@adobe/cq-spa-page-model-manager'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('@adobe/cq-angular-editable-components', ['exports', '@angular/core', '@adobe/cq-spa-component-mapping', '@adobe/cq-spa-page-model-manager', '@angular/common'], factory) :
(global = global || self, factory((global.adobe = global.adobe || {}, global.adobe['cq-angular-editable-components'] = {}), global.ng.core, global.cqSpaComponentMapping, global.cqSpaPageModelManager, global.ng.common));
}(this, (function (exports, core, cqSpaComponentMapping, cqSpaPageModelManager, common) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
});
function __exportStar(m, exports) {
for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __setModuleDefault = Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
/*
* ADOBE CONFIDENTIAL
*
* Copyright 2018 Adobe Systems Incorporated
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and may be covered by U.S. and Foreign Patents,
* patents in process, and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
*/
/**
* 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
*/
var ComponentMappingWithConfig = /** @class */ (function () {
function ComponentMappingWithConfig(spaMapping) {
this.spaMapping = spaMapping;
/**
* Store of EditConfig structures
*/
this.editConfigMap = {};
}
/**
* Stores a component class for the given resource types and also allows to provide an EditConfig object
* @param resourceTypes - List of resource types
* @param clazz - Component class to be stored
* @param [editConfig] - Edit configuration to be stored for the given resource types
*/
ComponentMappingWithConfig.prototype.map = function (resourceTypes, clazz, editConfig) {
if (editConfig === void 0) { editConfig = null; }
var innerClass = clazz;
if (editConfig) {
this.editConfigMap[resourceTypes] = editConfig;
}
this.spaMapping.map(resourceTypes, innerClass);
};
;
/**
* Returns the component class for the given resourceType
* @param resourceType - Resource type for which the component class has been stored
*/
ComponentMappingWithConfig.prototype.get = function (resourceType) {
return this.spaMapping.get(resourceType);
};
/**
* Returns the EditConfig structure for the given type
* @param resourceType - Resource type for which the configuration has been stored
*/
ComponentMappingWithConfig.prototype.getEditConfig = function (resourceType) {
return this.editConfigMap[resourceType];
};
return ComponentMappingWithConfig;
}());
var componentMapping = new ComponentMappingWithConfig(cqSpaComponentMapping.ComponentMapping);
function MapTo(resourceTypes) {
return function (clazz, editConfig) {
if (editConfig === void 0) { editConfig = null; }
return componentMapping.map(resourceTypes, clazz, editConfig);
};
}
/*
* ADOBE CONFIDENTIAL
*
* Copyright 2018 Adobe Systems Incorporated
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and may be covered by U.S. and Foreign Patents,
* patents in process, and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
*/
var Constants = {
/**
* Class names associated with a new section component
*
*/
NEW_SECTION_CLASS_NAMES: 'new section',
TYPE_PROP: cqSpaPageModelManager.Constants.TYPE_PROP,
/**
* List of child items of an item
*
*/
ITEMS_PROP: cqSpaPageModelManager.Constants.ITEMS_PROP,
/**
* Order in which the items should be listed
*
*/
ITEMS_ORDER_PROP: cqSpaPageModelManager.Constants.ITEMS_ORDER_PROP,
/**
* Path of the item
*
*/
PATH_PROP: cqSpaPageModelManager.Constants.PATH_PROP,
/**
* Children of an item
*
*/
CHILDREN_PROP: cqSpaPageModelManager.Constants.CHILDREN_PROP,
/**
* Path of the resource in the model
*
*/
DATA_PATH_PROP: ':dataPath',
/**
* Hierarchical type of the item
*/
HIERARCHY_TYPE_PROP: cqSpaPageModelManager.Constants.HIERARCHY_TYPE_PROP
};
/*
* ADOBE CONFIDENTIAL
*
* Copyright 2018 Adobe Systems Incorporated
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and may be covered by U.S. and Foreign Patents,
* patents in process, and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
*/
/**
* Selector that identifies the node that contains the WCM mode state
*/
var WCM_MODE_META_SELECTOR = 'meta[property="cq:wcmmode"]';
/**
* The editor is in one of the edition modes
*/
var EDIT_MODE = 'edit';
/**
* The editor is in preview mode
*/
var PREVIEW_MODE = 'preview';
/**
* Returns if we are in the browser context or not by checking for the
* existence of the window object
*/
function isBrowser() {
try {
return typeof window !== 'undefined';
}
catch (e) {
return false;
}
}
/**
* Returns the current WCM mode
*
* <p>Note that the value isn't, as of the date of this writing, updated by the editor</p>
*/
function getWCMMode() {
if (isBrowser()) {
var wcmModeMeta = document.head.querySelector(WCM_MODE_META_SELECTOR);
return wcmModeMeta && wcmModeMeta.content;
}
}
/**
* Helper functions for interacting with the AEM environment
*/
var Utils = {
/**
* Is the app used in the context of the AEM Page editor
*/
isInEditor: function () {
var wcmMode = getWCMMode();
return wcmMode && (EDIT_MODE === wcmMode || PREVIEW_MODE === wcmMode);
}
};
/*
* ADOBE CONFIDENTIAL
*
* Copyright 2018 Adobe Systems Incorporated
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and may be covered by U.S. and Foreign Patents,
* patents in process, and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
*/
var PLACEHOLDER_CLASS_NAME = 'cq-placeholder';
var AEMComponentDirective = /** @class */ (function () {
function AEMComponentDirective(renderer, viewContainer, factoryResolver, _changeDetectorRef) {
this.renderer = renderer;
this.viewContainer = viewContainer;
this.factoryResolver = factoryResolver;
this._changeDetectorRef = _changeDetectorRef;
}
Object.defineProperty(AEMComponentDirective.prototype, "cqItem", {
get: function () {
return this._cqItem;
},
set: function (value) {
this._cqItem = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AEMComponentDirective.prototype, "changeDetectorRef", {
get: function () {
return this._changeDetectorRef;
},
enumerable: true,
configurable: true
});
AEMComponentDirective.prototype.ngOnInit = function () {
this.renderComponent(componentMapping.get(this.type));
};
AEMComponentDirective.prototype.ngOnChanges = function (changes) {
this.updateComponentData();
};
Object.defineProperty(AEMComponentDirective.prototype, "type", {
/**
* Returns the type of the cqItem if exists.
*/
get: function () {
return this.cqItem && this.cqItem[Constants.TYPE_PROP];
},
enumerable: true,
configurable: true
});
/**
* Renders a component dynamically based on the component definition
*
* @param componentDefinition The component definition to render
*/
AEMComponentDirective.prototype.renderComponent = function (componentDefinition) {
if (componentDefinition) {
var factory = this.factoryResolver.resolveComponentFactory(componentDefinition);
this.viewContainer.clear();
this._component = this.viewContainer.createComponent(factory);
this.updateComponentData();
}
};
/**
* Updates the data of the component based the data of the directive
*/
AEMComponentDirective.prototype.updateComponentData = function () {
var _this = this;
if (!this._component || !this._component.instance) {
return;
}
var keys = Object.getOwnPropertyNames(this.cqItem);
keys.forEach(function (key) {
var propKey = key;
if (propKey.startsWith(':')) {
// Transformation of internal properties namespaced with [:] to [cq]
// :myProperty => cqMyProperty
var tempKey = propKey.substr(1);
propKey = 'cq' + tempKey.substr(0, 1).toUpperCase() + tempKey.substr(1);
}
_this._component.instance[propKey] = _this.cqItem[key];
});
this._component.instance.cqPath = this.cqPath;
this._component.instance.itemName = this.itemName;
var editConfig = componentMapping.getEditConfig(this.type);
if (editConfig && Utils.isInEditor) {
this.setupPlaceholder(editConfig);
}
this._changeDetectorRef.detectChanges();
};
/**
* Adds the specified item attributes to the element
*/
AEMComponentDirective.prototype.setupItemAttrs = function () {
var _this = this;
if (this.itemAttrs) {
var keys = Object.getOwnPropertyNames(this.itemAttrs);
keys.forEach(function (key) {
if (key === 'class') {
var classes = _this.itemAttrs[key].split(' ');
classes.forEach(function (itemClass) {
_this.renderer.addClass(_this._component.location.nativeElement, itemClass);
});
}
else {
_this.renderer.setAttribute(_this._component.location.nativeElement, key, _this.itemAttrs[key]);
}
});
}
};
/**
* Determines if the placeholder should e displayed.
*
* @param editConfig - the edit config of the directive
*/
AEMComponentDirective.prototype.usePlaceholder = function (editConfig) {
return editConfig.isEmpty && typeof editConfig.isEmpty === 'function' && editConfig.isEmpty(this.cqItem);
};
/**
* Setups the placeholder of needed for the AEM editor
*
* @param editConfig - the editConfig, which will dictate the classes to be added on.
*/
AEMComponentDirective.prototype.setupPlaceholder = function (editConfig) {
if (this.usePlaceholder(editConfig)) {
this.renderer.addClass(this._component.location.nativeElement, PLACEHOLDER_CLASS_NAME);
this.renderer.setAttribute(this._component.location.nativeElement, 'data-emptytext', editConfig.emptyLabel);
}
else {
this.renderer.removeClass(this._component.location.nativeElement, PLACEHOLDER_CLASS_NAME);
this.renderer.removeAttribute(this._component.location.nativeElement, 'data-emptytext');
}
};
AEMComponentDirective.prototype.ngAfterViewInit = function () {
this.setupItemAttrs();
};
AEMComponentDirective.prototype.ngOnDestroy = function () {
this._component && this._component.destroy();
};
AEMComponentDirective.ctorParameters = function () { return [
{ type: core.Renderer2 },
{ type: core.ViewContainerRef },
{ type: core.ComponentFactoryResolver },
{ type: core.ChangeDetectorRef }
]; };
__decorate([
core.Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], AEMComponentDirective.prototype, "cqItem", null);
__decorate([
core.Input(),
__metadata("design:type", String)
], AEMComponentDirective.prototype, "cqPath", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], AEMComponentDirective.prototype, "itemName", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], AEMComponentDirective.prototype, "itemAttrs", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], AEMComponentDirective.prototype, "aemComponent", void 0);
AEMComponentDirective = __decorate([
core.Directive({
selector: '[aemComponent]'
})
/**
* The current directive provides advanced capabilities among which are
*
* - The management of the component placeholder in the Page Editor
* - The dynamic instantiation of components based on a component definition
* - The conversion from model fields to properties and injection in the component instance
* - The management of HTMLElement attributes and class names on the native element
*/
,
__metadata("design:paramtypes", [core.Renderer2,
core.ViewContainerRef,
core.ComponentFactoryResolver,
core.ChangeDetectorRef])
], AEMComponentDirective);
return AEMComponentDirective;
}());
/*
* ADOBE CONFIDENTIAL
*
* Copyright 2018 Adobe Systems Incorporated
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and may be covered by U.S. and Foreign Patents,
* patents in process, and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
*/
var PLACEHOLDER_CLASS_NAMES = Constants.NEW_SECTION_CLASS_NAMES;
var PLACEHOLDER_ITEM_NAME = '*';
var CONTAINER_CLASS_NAMES = 'aem-container';
var AEMContainerComponent = /** @class */ (function () {
/**
* The current component provides the base presentational logic common to containers such as a grid or a page.
* Container have in common the notion of item holders. Items are represented in the model by the fields _:items_ and _:itemsOrder_
*/
function AEMContainerComponent() {
/**
* Path to the model associated with the current instance of the component
*/
this.cqPath = '';
/**
* Key of the model structure
*/
this.modelName = '';
}
Object.defineProperty(AEMContainerComponent.prototype, "isInEditMode", {
/**
* Returns weather of not we are in the editor
*/
get: function () {
return Utils.isInEditor();
},
enumerable: true,
configurable: true
});
/**
* Returns the aggregated path of this container path and the provided path
*
* @param path - the provided path to aggregate with the container path
*/
AEMContainerComponent.prototype.getDataPath = function (path) {
return this.cqPath ? this.cqPath + '/' + path : path;
};
/**
* Returns the item data from the cqModel
*
* @param itemKey - the itemKey to look for in the items.
*/
AEMContainerComponent.prototype.getItem = function (itemKey) {
return this.cqItems && this.cqItems[itemKey];
};
/**
* Returns the class names of the container based on the data from the cqModel
*/
AEMContainerComponent.prototype.getHostClassNames = function () {
return CONTAINER_CLASS_NAMES;
};
Object.defineProperty(AEMContainerComponent.prototype, "hostClasses", {
get: function () {
return this.getHostClassNames();
},
enumerable: true,
configurable: true
});
/**
* Returns the placeholder classes
*/
AEMContainerComponent.prototype.getPlaceholderClassNames = function () {
return PLACEHOLDER_CLASS_NAMES;
};
Object.defineProperty(AEMContainerComponent.prototype, "placeholderPath", {
/**
* Returns the placeholder path
*/
get: function () {
return this.cqPath && this.cqPath + '/' + PLACEHOLDER_ITEM_NAME;
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", Object)
], AEMContainerComponent.prototype, "cqItems", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], AEMContainerComponent.prototype, "cqItemsOrder", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], AEMContainerComponent.prototype, "cqPath", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], AEMContainerComponent.prototype, "modelName", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], AEMContainerComponent.prototype, "classNames", void 0);
AEMContainerComponent = __decorate([
core.Component({
selector: 'aem-container',
host: {
'[class]': 'hostClasses',
'[attr.data-cq-data-path]': 'cqPath'
},
template: "<ng-container *ngFor=\"let itemKey of cqItemsOrder\">\n <aem-model-provider [cqItem]=\"getItem(itemKey)\"\n [cqPath]=\"getDataPath(itemKey)\"\n [itemName]=\"itemKey\"></aem-model-provider>\n</ng-container>\n<div *ngIf=\"isInEditMode\"\n [attr.data-cq-data-path]=\"placeholderPath\"\n [class]=\"getPlaceholderClassNames()\"></div>\n"
})
/**
* The current component provides the base presentational logic common to containers such as a grid or a page.
* Container have in common the notion of item holders. Items are represented in the model by the fields _:items_ and _:itemsOrder_
*/
], AEMContainerComponent);
return AEMContainerComponent;
}());
var ALLOWED_PLACEHOLDER_CLASS_NAMES = 'aem-AllowedComponent--list';
var ALLOWED_COMPONENT_TITLE_CLASS_NAMES = 'aem-AllowedComponent--title';
var ALLOWED_COMPONENT_PLACEHOLDER_CLASS_NAMES = 'aem-AllowedComponent--component cq-placeholder placeholder';
var AEMAllowedComponentsContainerComponent = /** @class */ (function (_super) {
__extends(AEMAllowedComponentsContainerComponent, _super);
function AEMAllowedComponentsContainerComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.emptyLabel = 'No allowed components';
return _this;
}
AEMAllowedComponentsContainerComponent.prototype.isAllowedComponentsApplicable = function () {
return this.isInEditMode && this.allowedComponents && this.allowedComponents.applicable;
};
AEMAllowedComponentsContainerComponent.prototype.getAllowedComponentListPlaceholderClassNames = function () {
return _super.prototype.getPlaceholderClassNames.call(this) + ' ' + ALLOWED_PLACEHOLDER_CLASS_NAMES;
};
AEMAllowedComponentsContainerComponent.prototype.getAllowedComponentListLabel = function () {
var hasComponents = this.allowedComponents && this.allowedComponents.components && this.allowedComponents.components.length > 0;
return hasComponents ? this.title : this.emptyLabel;
};
AEMAllowedComponentsContainerComponent.prototype.getAllowedComponents = function () {
return this.allowedComponents && this.allowedComponents.components || [];
};
Object.defineProperty(AEMAllowedComponentsContainerComponent.prototype, "allowedComponentListTitleClassNames", {
get: function () {
return ALLOWED_COMPONENT_TITLE_CLASS_NAMES;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AEMAllowedComponentsContainerComponent.prototype, "allowedComponentClassNames", {
get: function () {
return ALLOWED_COMPONENT_PLACEHOLDER_CLASS_NAMES;
},
enumerable: true,
configurable: true
});
__decorate([
core.Input(),
__metadata("design:type", String)
], AEMAllowedComponentsContainerComponent.prototype, "title", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], AEMAllowedComponentsContainerComponent.prototype, "emptyLabel", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], AEMAllowedComponentsContainerComponent.prototype, "allowedComponents", void 0);
AEMAllowedComponentsContainerComponent = __decorate([
core.Component({
selector: 'aem-allowed-components-container',
template: "<div [class]=\"getAllowedComponentListPlaceholderClassNames()\">\n <div [attr.data-text]=\"getAllowedComponentListLabel()\" [class]=\"allowedComponentListTitleClassNames\"></div>\n <ng-container *ngFor=\"let allowedComponent of getAllowedComponents()\">\n <div [attr.data-cq-data-path]=\"allowedComponent.path\"\n [attr.data-emptytext]=\"allowedComponent.title\"\n [class]=\"allowedComponentClassNames\"></div>\n </ng-container>\n</div>\n",
styles: [""]
})
], AEMAllowedComponentsContainerComponent);
return AEMAllowedComponentsContainerComponent;
}(AEMContainerComponent));
/*
* ADOBE CONFIDENTIAL
*
* Copyright 2018 Adobe Systems Incorporated
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and may be covered by U.S. and Foreign Patents,
* patents in process, and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
*/
var PLACEHOLDER_CLASS_NAMES$1 = 'aem-Grid-newComponent';
var RESPONSIVE_GRID_TYPE = 'wcm/foundation/components/responsivegrid';
var AEMResponsiveGridComponent = /** @class */ (function (_super) {
__extends(AEMResponsiveGridComponent, _super);
/**
* The current class carries the base presentational logic of the AEM Layout Container (aka. Responsive grid)
*/
function AEMResponsiveGridComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* Returns the column class names for a given column
* @param itemKey - The key of the column item
*/
AEMResponsiveGridComponent.prototype.getColumnClassNames = function (itemKey) {
return this.columnClassNames && this.columnClassNames[itemKey];
};
/**
* Returns the placeholder classes
*/
AEMResponsiveGridComponent.prototype.getPlaceholderClassNames = function () {
return _super.prototype.getPlaceholderClassNames.call(this) + ' ' + PLACEHOLDER_CLASS_NAMES$1;
};
/**
* Returns the class names of the responsive grid based on the data from the cqModel
*/
AEMResponsiveGridComponent.prototype.getHostClassNames = function () {
var classNames = _super.prototype.getHostClassNames.call(this);
if (this.classNames) {
classNames += ' ' + (this.classNames || '');
}
return classNames + ' ' + this.gridClassNames;
};
/**
* Returns the aggregated path of this container path and the provided path
*
* @param path - the provided path to aggregate with the container path
*/
AEMResponsiveGridComponent.prototype.getAttrDataPath = function (path) {
var item = this.getItem(path);
if (item && item[Constants.TYPE_PROP] === RESPONSIVE_GRID_TYPE) {
// We don't want to add the path for the wrapper for a reponsivegrid
// The reponsivegrid adds the path on it's own
return null;
}
return this.getDataPath(path);
};
__decorate([
core.Input(),
__metadata("design:type", String)
], AEMResponsiveGridComponent.prototype, "gridClassNames", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], AEMResponsiveGridComponent.prototype, "columnClassNames", void 0);
__decorate([
core.Input(),
__metadata("design:type", String)
], AEMResponsiveGridComponent.prototype, "classNames", void 0);
__decorate([
core.Input(),
__metadata("design:type", Number)
], AEMResponsiveGridComponent.prototype, "columnCount", void 0);
AEMResponsiveGridComponent = __decorate([
core.Component({
selector: 'aem-responsivegrid',
host: {
'[class]': 'hostClasses',
'[attr.data-cq-data-path]': 'cqPath'
},
template: "<ng-container *ngIf=\"isAllowedComponentsApplicable(); else container\">\n <div [class]=\"getAllowedComponentListPlaceholderClassNames()\">\n <div [attr.data-text]=\"getAllowedComponentListLabel()\" [class]=\"allowedComponentListTitleClassNames\"></div>\n <ng-container *ngFor=\"let allowedComponent of getAllowedComponents()\">\n <div [attr.data-cq-data-path]=\"allowedComponent.path\"\n [attr.data-emptytext]=\"allowedComponent.title\"\n [class]=\"allowedComponentClassNames\"></div>\n </ng-container>\n </div>\n</ng-container>\n<ng-template #container>\n <ng-container *ngFor=\"let itemKey of cqItemsOrder\">\n <div [aemModelProvider]\n [cqItem]=\"getItem(itemKey)\"\n [cqPath]=\"getDataPath(itemKey)\"\n [itemName]=\"itemKey\"\n [class]=\"getColumnClassNames(itemKey)\"\n [attr.data-cq-data-path]=\"getAttrDataPath(itemKey)\"></div>\n </ng-container>\n <div *ngIf=\"isInEditMode\"\n [attr.data-cq-data-path]=\"placeholderPath\"\n [class]=\"getPlaceholderClassNames()\"></div>\n</ng-template>\n\n\n"
})
/**
* The current class carries the base presentational logic of the AEM Layout Container (aka. Responsive grid)
*/
], AEMResponsiveGridComponent);
return AEMResponsiveGridComponent;
}(AEMAllowedComponentsContainerComponent));
/*
* ADOBE CONFIDENTIAL
*
* Copyright 2018 Adobe Systems Incorporated
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and may be covered by U.S. and Foreign Patents,
* patents in process, and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
*/
var AEMModelProviderComponent = /** @class */ (function () {
function AEMModelProviderComponent() {
}
/**
* Updates the item data
*/
AEMModelProviderComponent.prototype.updateItem = function () {
var _this = this;
cqSpaPageModelManager.ModelManager.getData({ path: this.cqPath }).then(function (model) {
_this.cqItem = model;
_this.aemComponent.changeDetectorRef.markForCheck();
});
};
AEMModelProviderComponent.prototype.ngOnInit = function () {
cqSpaPageModelManager.ModelManager.addListener(this.cqPath, this.updateItem.bind(this));
};
AEMModelProviderComponent.prototype.ngDestroy = function () {
cqSpaPageModelManager.ModelManager.removeListener(this.cqPath, this.updateItem.bind(this));
};
__decorate([
core.Input(),
__metadata("design:type", Object)
], AEMModelProviderComponent.prototype, "cqPath", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], AEMModelProviderComponent.prototype, "cqItem", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], AEMModelProviderComponent.prototype, "itemName", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], AEMModelProviderComponent.prototype, "aemModelProvider", void 0);
__decorate([
core.ViewChild(AEMComponentDirective),
__metadata("design:type", AEMComponentDirective)
], AEMModelProviderComponent.prototype, "aemComponent", void 0);
AEMModelProviderComponent = __decorate([
core.Component({
selector: 'aem-model-provider,[aemModelProvider]',
template: "<ng-container aemComponent [cqItem]='cqItem' [cqPath]='cqPath' [itemName]='itemName'></ng-container>"
})
/**
* The current component is responsible for providing access to the ModelManager and the model of a component
*/
,
__metadata("design:paramtypes", [])
], AEMModelProviderComponent);
return AEMModelProviderComponent;
}());
/*
* ADOBE CONFIDENTIAL
*
* Copyright 2018 Adobe Systems Incorporated
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and may be covered by U.S. and Foreign Patents,
* patents in process, and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
*/
var PAGE_MODEL_SEPARATOR = '/jcr:content/';
var AEMPageComponent = /** @class */ (function (_super) {
__extends(AEMPageComponent, _super);
/**
* The current component carries the base presentational logic of page component
*/
function AEMPageComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* Returns the aggregated path of this container path and the provided path
*
* @param path - the provided path to aggregate with the container path
*/
AEMPageComponent.prototype.getDataPath = function (path) {
return this.cqPath ? this.cqPath + PAGE_MODEL_SEPARATOR + path : path;
};
AEMPageComponent = __decorate([
core.Component({
selector: 'aem-page',
host: {
'[class]': 'hostClasses',
'[attr.data-cq-data-path]': 'cqPath'
},
template: "<ng-container *ngFor=\"let itemKey of cqItemsOrder\">\n <aem-model-provider [cqItem]=\"getItem(itemKey)\"\n [cqPath]=\"getDataPath(itemKey)\"\n [itemName]=\"itemKey\"></aem-model-provider>\n</ng-container>\n<div *ngIf=\"isInEditMode\"\n [attr.data-cq-data-path]=\"placeholderPath\"\n [class]=\"getPlaceholderClassNames()\"></div>\n"
})
/**
* The current component carries the base presentational logic of page component
*/
], AEMPageComponent);
return AEMPageComponent;
}(AEMContainerComponent));
/*
* Copyright 2018 Adobe Systems Incorporated. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
*/
var SpaAngularEditableComponentsModule = /** @class */ (function () {
function SpaAngularEditableComponentsModule() {
}
SpaAngularEditableComponentsModule = __decorate([
core.NgModule({
imports: [common.CommonModule],
declarations: [AEMContainerComponent, AEMAllowedComponentsContainerComponent, AEMResponsiveGridComponent, AEMComponentDirective, AEMModelProviderComponent, AEMPageComponent],
exports: [AEMContainerComponent, AEMAllowedComponentsContainerComponent, AEMResponsiveGridComponent, AEMComponentDirective, AEMModelProviderComponent, AEMPageComponent],
entryComponents: [AEMContainerComponent, AEMAllowedComponentsContainerComponent, AEMResponsiveGridComponent, AEMPageComponent]
})
], SpaAngularEditableComponentsModule);
return SpaAngularEditableComponentsModule;
}());
var AemPageDataResolver = /** @class */ (function () {
function AemPageDataResolver() {
}
/**
* Returns the absolute resource path without extension.
* @example
* // returns: '/content/aa/bb' for route.url [ 'content', 'aa', 'bb.html' ]
* resolve(route)
* @param route - route
* @returns absolute resource path without extension
*/
AemPageDataResolver.prototype.resolve = function (route) {
return '/' + route.url.join('/').replace(/\.[^/.]+$/, '');
};
AemPageDataResolver = __decorate([
core.Injectable(),
__metadata("design:paramtypes", [])
], AemPageDataResolver);
return AemPageDataResolver;
}());
/**
* Implements RouteReuseStrategy to customize route reuse.
*/
var AemPageRouteReuseStrategy = /** @class */ (function () {
function AemPageRouteReuseStrategy() {
}
/** Determines if this r