@adobe/cq-angular-editable-components
Version:
* [API](#api) * [Documentation](#documentation) * [Changelog](#changelog)
100 lines • 11.6 kB
JavaScript
/*
* 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.
*/
import { __decorate, __extends, __metadata } from "tslib";
import { Component, Input } from '@angular/core';
import { Constants } from '../constants';
import { AEMAllowedComponentsContainerComponent } from '../aem-allowed-components-container/aem-allowed-components-container.component';
var PLACEHOLDER_CLASS_NAMES = '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;
};
/**
* 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([
Input(),
__metadata("design:type", String)
], AEMResponsiveGridComponent.prototype, "gridClassNames", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], AEMResponsiveGridComponent.prototype, "columnClassNames", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], AEMResponsiveGridComponent.prototype, "classNames", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], AEMResponsiveGridComponent.prototype, "columnCount", void 0);
AEMResponsiveGridComponent = __decorate([
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));
export { AEMResponsiveGridComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWVtLXJlc3BvbnNpdmVncmlkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BhZG9iZS9jcS1hbmd1bGFyLWVkaXRhYmxlLWNvbXBvbmVudHMvIiwic291cmNlcyI6WyJsaWIvbGF5b3V0L2FlbS1yZXNwb25zaXZlZ3JpZC9hZW0tcmVzcG9uc2l2ZWdyaWQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7Ozs7R0FlRzs7QUFFSCxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ3pDLE9BQU8sRUFBQyxzQ0FBc0MsRUFBQyxNQUFNLGdGQUFnRixDQUFDO0FBRXRJLElBQU0sdUJBQXVCLEdBQUcsdUJBQXVCLENBQUM7QUFDeEQsSUFBTSxvQkFBb0IsR0FBRywwQ0FBMEMsQ0FBQztBQWF4RTtJQUFnRCw4Q0FBc0M7SUFIdEY7O09BRUc7SUFDSDs7SUE2REEsQ0FBQztJQTNDQzs7O09BR0c7SUFDSCx3REFBbUIsR0FBbkIsVUFBb0IsT0FBYztRQUNoQyxPQUFPLElBQUksQ0FBQyxnQkFBZ0IsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDakUsQ0FBQztJQUVEOztPQUVHO0lBQ0gsNkRBQXdCLEdBQXhCO1FBQ0UsT0FBTyxpQkFBTSx3QkFBd0IsV0FBRSxHQUFHLEdBQUcsR0FBRyx1QkFBdUIsQ0FBQztJQUMxRSxDQUFDO0lBRUQ7O09BRUc7SUFDSCxzREFBaUIsR0FBakI7UUFDRSxJQUFJLFVBQVUsR0FBRyxpQkFBTSxpQkFBaUIsV0FBRSxDQUFDO1FBRTNDLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNqQixVQUFVLElBQUksR0FBRyxHQUFHLENBQUMsSUFBSSxDQUFDLFVBQVUsSUFBSSxFQUFFLENBQUMsQ0FBRTtTQUNoRDtRQUVELE9BQU8sVUFBVSxHQUFHLEdBQUcsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDO0lBQ2hELENBQUM7SUFFRDs7OztPQUlHO0lBQ0gsb0RBQWUsR0FBZixVQUFnQixJQUFJO1FBQ2xCLElBQUksSUFBSSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDOUIsSUFBSSxJQUFJLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsS0FBSyxvQkFBb0IsRUFBRTtZQUM5RCxvRUFBb0U7WUFDcEUsOENBQThDO1lBQzlDLE9BQU8sSUFBSSxDQUFDO1NBQ2I7UUFFRCxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQXhEUTtRQUFSLEtBQUssRUFBRTs7c0VBQXdCO0lBSXZCO1FBQVIsS0FBSyxFQUFFO2tDQUFtQixNQUFNO3dFQUFDO0lBSXpCO1FBQVIsS0FBSyxFQUFFOztrRUFBb0I7SUFJbkI7UUFBUixLQUFLLEVBQUU7O21FQUFxQjtJQWhCbEIsMEJBQTBCO1FBWHRDLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSxvQkFBb0I7WUFDOUIsSUFBSSxFQUFFO2dCQUNGLFNBQVMsRUFBRSxhQUFhO2dCQUN4QiwwQkFBMEIsRUFBQyxRQUFRO2FBQ3RDO1lBQ0QsbWxDQUFrRDtTQUNuRCxDQUFDO1FBQ0Y7O1dBRUc7T0FDVSwwQkFBMEIsQ0E2RHRDO0lBQUQsaUNBQUM7Q0FBQSxBQTdERCxDQUFnRCxzQ0FBc0MsR0E2RHJGO1NBN0RZLDBCQUEwQiIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBBRE9CRSBDT05GSURFTlRJQUxcbiAqXG4gKiBDb3B5cmlnaHQgMjAxOCBBZG9iZSBTeXN0ZW1zIEluY29ycG9yYXRlZFxuICogQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBOT1RJQ0U6ICBBbGwgaW5mb3JtYXRpb24gY29udGFpbmVkIGhlcmVpbiBpcywgYW5kIHJlbWFpbnNcbiAqIHRoZSBwcm9wZXJ0eSBvZiBBZG9iZSBTeXN0ZW1zIEluY29ycG9yYXRlZCBhbmQgaXRzIHN1cHBsaWVycyxcbiAqIGlmIGFueS4gIFRoZSBpbnRlbGxlY3R1YWwgYW5kIHRlY2huaWNhbCBjb25jZXB0cyBjb250YWluZWRcbiAqIGhlcmVpbiBhcmUgcHJvcHJpZXRhcnkgdG8gQWRvYmUgU3lzdGVtcyBJbmNvcnBvcmF0ZWQgYW5kIGl0c1xuICogc3VwcGxpZXJzIGFuZCBtYXkgYmUgY292ZXJlZCBieSBVLlMuIGFuZCBGb3JlaWduIFBhdGVudHMsXG4gKiBwYXRlbnRzIGluIHByb2Nlc3MsIGFuZCBhcmUgcHJvdGVjdGVkIGJ5IHRyYWRlIHNlY3JldCBvciBjb3B5cmlnaHQgbGF3LlxuICogRGlzc2VtaW5hdGlvbiBvZiB0aGlzIGluZm9ybWF0aW9uIG9yIHJlcHJvZHVjdGlvbiBvZiB0aGlzIG1hdGVyaWFsXG4gKiBpcyBzdHJpY3RseSBmb3JiaWRkZW4gdW5sZXNzIHByaW9yIHdyaXR0ZW4gcGVybWlzc2lvbiBpcyBvYnRhaW5lZFxuICogZnJvbSBBZG9iZSBTeXN0ZW1zIEluY29ycG9yYXRlZC5cbiAqL1xuXG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb25zdGFudHMgfSBmcm9tICcuLi9jb25zdGFudHMnO1xuaW1wb3J0IHtBRU1BbGxvd2VkQ29tcG9uZW50c0NvbnRhaW5lckNvbXBvbmVudH0gZnJvbSAnLi4vYWVtLWFsbG93ZWQtY29tcG9uZW50cy1jb250YWluZXIvYWVtLWFsbG93ZWQtY29tcG9uZW50cy1jb250YWluZXIuY29tcG9uZW50JztcblxuY29uc3QgUExBQ0VIT0xERVJfQ0xBU1NfTkFNRVMgPSAnYWVtLUdyaWQtbmV3Q29tcG9uZW50JztcbmNvbnN0IFJFU1BPTlNJVkVfR1JJRF9UWVBFID0gJ3djbS9mb3VuZGF0aW9uL2NvbXBvbmVudHMvcmVzcG9uc2l2ZWdyaWQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhZW0tcmVzcG9uc2l2ZWdyaWQnLFxuICBob3N0OiB7XG4gICAgICAnW2NsYXNzXSc6ICdob3N0Q2xhc3NlcycsXG4gICAgICAnW2F0dHIuZGF0YS1jcS1kYXRhLXBhdGhdJzonY3FQYXRoJ1xuICB9LFxuICB0ZW1wbGF0ZVVybDogJy4vYWVtLXJlc3BvbnNpdmVncmlkLmNvbXBvbmVudC5odG1sJyxcbn0pXG4vKipcbiAqIFRoZSBjdXJyZW50IGNsYXNzIGNhcnJpZXMgdGhlIGJhc2UgcHJlc2VudGF0aW9uYWwgbG9naWMgb2YgdGhlIEFFTSBMYXlvdXQgQ29udGFpbmVyIChha2EuIFJlc3BvbnNpdmUgZ3JpZClcbiAqL1xuZXhwb3J0IGNsYXNzIEFFTVJlc3BvbnNpdmVHcmlkQ29tcG9uZW50IGV4dGVuZHMgQUVNQWxsb3dlZENvbXBvbmVudHNDb250YWluZXJDb21wb25lbnQge1xuICAvKipcbiAgICogQ2xhc3MgbmFtZXMgYXNzb2NpYXRlZCB3aXRoIHRoZSBjdXJyZW50IHJlc3BvbnNpdmUgZ3JpZFxuICAgKi9cbiAgQElucHV0KCkgZ3JpZENsYXNzTmFtZXM6IHN0cmluZztcbiAgLyoqXG4gICAqIE1hcCBvZiBjbGFzcyBuYW1lcyBjb3JyZXNwb25kaW5nIHRvIGVhY2ggY2hpbGQgb2YgdGhlIGN1cnJlbnQgcmVzcG9uc2l2ZSBncmlkXG4gICAqL1xuICBASW5wdXQoKSBjb2x1bW5DbGFzc05hbWVzOiBPYmplY3Q7XG4gIC8qKlxuICAgKiBDbGFzcyBuYW1lcyBvZiB0aGUgY3VycmVudCBjb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGNsYXNzTmFtZXM6IHN0cmluZztcbiAgLyoqXG4gICAqIEN1cnJlbnQgbnVtYmVyIG9mIGNvbHVtbnMgb2YgdGhlIGdyaWRcbiAgICovXG4gIEBJbnB1dCgpIGNvbHVtbkNvdW50OiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIFJldHVybnMgdGhlIGNvbHVtbiBjbGFzcyBuYW1lcyBmb3IgYSBnaXZlbiBjb2x1bW5cbiAgICogQHBhcmFtIGl0ZW1LZXkgLSBUaGUga2V5IG9mIHRoZSBjb2x1bW4gaXRlbVxuICAgKi9cbiAgZ2V0Q29sdW1uQ2xhc3NOYW1lcyhpdGVtS2V5OnN0cmluZykge1xuICAgIHJldHVybiB0aGlzLmNvbHVtbkNsYXNzTmFtZXMgJiYgdGhpcy5jb2x1bW5DbGFzc05hbWVzW2l0ZW1LZXldO1xuICB9XG5cbiAgLyoqXG4gICAqIFJldHVybnMgdGhlIHBsYWNlaG9sZGVyIGNsYXNzZXNcbiAgICovXG4gIGdldFBsYWNlaG9sZGVyQ2xhc3NOYW1lcygpIHtcbiAgICByZXR1cm4gc3VwZXIuZ2V0UGxhY2Vob2xkZXJDbGFzc05hbWVzKCkgKyAnICcgKyBQTEFDRUhPTERFUl9DTEFTU19OQU1FUztcbiAgfVxuXG4gIC8qKlxuICAgKiBSZXR1cm5zIHRoZSBjbGFzcyBuYW1lcyBvZiB0aGUgcmVzcG9uc2l2ZSBncmlkIGJhc2VkIG9uIHRoZSBkYXRhIGZyb20gdGhlIGNxTW9kZWxcbiAgICovXG4gIGdldEhvc3RDbGFzc05hbWVzKCkge1xuICAgIGxldCBjbGFzc05hbWVzID0gc3VwZXIuZ2V0SG9zdENsYXNzTmFtZXMoKTtcblxuICAgIGlmICh0aGlzLmNsYXNzTmFtZXMpIHtcbiAgICAgICAgY2xhc3NOYW1lcyArPSAnICcgKyAodGhpcy5jbGFzc05hbWVzIHx8ICcnKSA7XG4gICAgfVxuXG4gICAgcmV0dXJuIGNsYXNzTmFtZXMgKyAnICcgKyB0aGlzLmdyaWRDbGFzc05hbWVzO1xuICB9XG5cbiAgLyoqXG4gICAqIFJldHVybnMgdGhlIGFnZ3JlZ2F0ZWQgcGF0aCBvZiB0aGlzIGNvbnRhaW5lciBwYXRoIGFuZCB0aGUgcHJvdmlkZWQgcGF0aFxuICAgKlxuICAgKiBAcGFyYW0gcGF0aCAtIHRoZSBwcm92aWRlZCBwYXRoIHRvIGFnZ3JlZ2F0ZSB3aXRoIHRoZSBjb250YWluZXIgcGF0aFxuICAgKi9cbiAgZ2V0QXR0ckRhdGFQYXRoKHBhdGgpIHtcbiAgICBsZXQgaXRlbSA9IHRoaXMuZ2V0SXRlbShwYXRoKTtcbiAgICBpZiAoaXRlbSAmJiBpdGVtW0NvbnN0YW50cy5UWVBFX1BST1BdID09PSBSRVNQT05TSVZFX0dSSURfVFlQRSkge1xuICAgICAgLy8gV2UgZG9uJ3Qgd2FudCB0byBhZGQgdGhlIHBhdGggZm9yIHRoZSB3cmFwcGVyIGZvciBhIHJlcG9uc2l2ZWdyaWRcbiAgICAgIC8vIFRoZSByZXBvbnNpdmVncmlkIGFkZHMgdGhlIHBhdGggb24gaXQncyBvd25cbiAgICAgIHJldHVybiBudWxsO1xuICAgIH1cblxuICAgIHJldHVybiB0aGlzLmdldERhdGFQYXRoKHBhdGgpO1xuICB9XG59XG4iXX0=