@adobe/cq-angular-editable-components
Version:
* [API](#api) * [Documentation](#documentation) * [Changelog](#changelog)
96 lines • 11 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, __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';
const PLACEHOLDER_CLASS_NAMES = 'aem-Grid-newComponent';
const RESPONSIVE_GRID_TYPE = 'wcm/foundation/components/responsivegrid';
let AEMResponsiveGridComponent =
/**
* The current class carries the base presentational logic of the AEM Layout Container (aka. Responsive grid)
*/
class AEMResponsiveGridComponent extends AEMAllowedComponentsContainerComponent {
/**
* Returns the column class names for a given column
* @param itemKey - The key of the column item
*/
getColumnClassNames(itemKey) {
return this.columnClassNames && this.columnClassNames[itemKey];
}
/**
* Returns the placeholder classes
*/
getPlaceholderClassNames() {
return super.getPlaceholderClassNames() + ' ' + PLACEHOLDER_CLASS_NAMES;
}
/**
* Returns the class names of the responsive grid based on the data from the cqModel
*/
getHostClassNames() {
let classNames = super.getHostClassNames();
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
*/
getAttrDataPath(path) {
let 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);
export { AEMResponsiveGridComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWVtLXJlc3BvbnNpdmVncmlkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BhZG9iZS9jcS1hbmd1bGFyLWVkaXRhYmxlLWNvbXBvbmVudHMvIiwic291cmNlcyI6WyJsaWIvbGF5b3V0L2FlbS1yZXNwb25zaXZlZ3JpZC9hZW0tcmVzcG9uc2l2ZWdyaWQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7Ozs7R0FlRzs7QUFFSCxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ3pDLE9BQU8sRUFBQyxzQ0FBc0MsRUFBQyxNQUFNLGdGQUFnRixDQUFDO0FBRXRJLE1BQU0sdUJBQXVCLEdBQUcsdUJBQXVCLENBQUM7QUFDeEQsTUFBTSxvQkFBb0IsR0FBRywwQ0FBMEMsQ0FBQztBQWF4RSxJQUFhLDBCQUEwQjtBQUh2Qzs7R0FFRztBQUNILE1BQWEsMEJBQTJCLFNBQVEsc0NBQXNDO0lBa0JwRjs7O09BR0c7SUFDSCxtQkFBbUIsQ0FBQyxPQUFjO1FBQ2hDLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixJQUFJLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNqRSxDQUFDO0lBRUQ7O09BRUc7SUFDSCx3QkFBd0I7UUFDdEIsT0FBTyxLQUFLLENBQUMsd0JBQXdCLEVBQUUsR0FBRyxHQUFHLEdBQUcsdUJBQXVCLENBQUM7SUFDMUUsQ0FBQztJQUVEOztPQUVHO0lBQ0gsaUJBQWlCO1FBQ2YsSUFBSSxVQUFVLEdBQUcsS0FBSyxDQUFDLGlCQUFpQixFQUFFLENBQUM7UUFFM0MsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ2pCLFVBQVUsSUFBSSxHQUFHLEdBQUcsQ0FBQyxJQUFJLENBQUMsVUFBVSxJQUFJLEVBQUUsQ0FBQyxDQUFFO1NBQ2hEO1FBRUQsT0FBTyxVQUFVLEdBQUcsR0FBRyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUM7SUFDaEQsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCxlQUFlLENBQUMsSUFBSTtRQUNsQixJQUFJLElBQUksR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzlCLElBQUksSUFBSSxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLEtBQUssb0JBQW9CLEVBQUU7WUFDOUQsb0VBQW9FO1lBQ3BFLDhDQUE4QztZQUM5QyxPQUFPLElBQUksQ0FBQztTQUNiO1FBRUQsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ2hDLENBQUM7Q0FDRixDQUFBO0FBekRVO0lBQVIsS0FBSyxFQUFFOztrRUFBd0I7QUFJdkI7SUFBUixLQUFLLEVBQUU7OEJBQW1CLE1BQU07b0VBQUM7QUFJekI7SUFBUixLQUFLLEVBQUU7OzhEQUFvQjtBQUluQjtJQUFSLEtBQUssRUFBRTs7K0RBQXFCO0FBaEJsQiwwQkFBMEI7SUFYdEMsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLG9CQUFvQjtRQUM5QixJQUFJLEVBQUU7WUFDRixTQUFTLEVBQUUsYUFBYTtZQUN4QiwwQkFBMEIsRUFBQyxRQUFRO1NBQ3RDO1FBQ0QsbWxDQUFrRDtLQUNuRCxDQUFDO0lBQ0Y7O09BRUc7R0FDVSwwQkFBMEIsQ0E2RHRDO1NBN0RZLDBCQUEwQiIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBBRE9CRSBDT05GSURFTlRJQUxcbiAqXG4gKiBDb3B5cmlnaHQgMjAxOCBBZG9iZSBTeXN0ZW1zIEluY29ycG9yYXRlZFxuICogQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBOT1RJQ0U6ICBBbGwgaW5mb3JtYXRpb24gY29udGFpbmVkIGhlcmVpbiBpcywgYW5kIHJlbWFpbnNcbiAqIHRoZSBwcm9wZXJ0eSBvZiBBZG9iZSBTeXN0ZW1zIEluY29ycG9yYXRlZCBhbmQgaXRzIHN1cHBsaWVycyxcbiAqIGlmIGFueS4gIFRoZSBpbnRlbGxlY3R1YWwgYW5kIHRlY2huaWNhbCBjb25jZXB0cyBjb250YWluZWRcbiAqIGhlcmVpbiBhcmUgcHJvcHJpZXRhcnkgdG8gQWRvYmUgU3lzdGVtcyBJbmNvcnBvcmF0ZWQgYW5kIGl0c1xuICogc3VwcGxpZXJzIGFuZCBtYXkgYmUgY292ZXJlZCBieSBVLlMuIGFuZCBGb3JlaWduIFBhdGVudHMsXG4gKiBwYXRlbnRzIGluIHByb2Nlc3MsIGFuZCBhcmUgcHJvdGVjdGVkIGJ5IHRyYWRlIHNlY3JldCBvciBjb3B5cmlnaHQgbGF3LlxuICogRGlzc2VtaW5hdGlvbiBvZiB0aGlzIGluZm9ybWF0aW9uIG9yIHJlcHJvZHVjdGlvbiBvZiB0aGlzIG1hdGVyaWFsXG4gKiBpcyBzdHJpY3RseSBmb3JiaWRkZW4gdW5sZXNzIHByaW9yIHdyaXR0ZW4gcGVybWlzc2lvbiBpcyBvYnRhaW5lZFxuICogZnJvbSBBZG9iZSBTeXN0ZW1zIEluY29ycG9yYXRlZC5cbiAqL1xuXG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb25zdGFudHMgfSBmcm9tICcuLi9jb25zdGFudHMnO1xuaW1wb3J0IHtBRU1BbGxvd2VkQ29tcG9uZW50c0NvbnRhaW5lckNvbXBvbmVudH0gZnJvbSAnLi4vYWVtLWFsbG93ZWQtY29tcG9uZW50cy1jb250YWluZXIvYWVtLWFsbG93ZWQtY29tcG9uZW50cy1jb250YWluZXIuY29tcG9uZW50JztcblxuY29uc3QgUExBQ0VIT0xERVJfQ0xBU1NfTkFNRVMgPSAnYWVtLUdyaWQtbmV3Q29tcG9uZW50JztcbmNvbnN0IFJFU1BPTlNJVkVfR1JJRF9UWVBFID0gJ3djbS9mb3VuZGF0aW9uL2NvbXBvbmVudHMvcmVzcG9uc2l2ZWdyaWQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhZW0tcmVzcG9uc2l2ZWdyaWQnLFxuICBob3N0OiB7XG4gICAgICAnW2NsYXNzXSc6ICdob3N0Q2xhc3NlcycsXG4gICAgICAnW2F0dHIuZGF0YS1jcS1kYXRhLXBhdGhdJzonY3FQYXRoJ1xuICB9LFxuICB0ZW1wbGF0ZVVybDogJy4vYWVtLXJlc3BvbnNpdmVncmlkLmNvbXBvbmVudC5odG1sJyxcbn0pXG4vKipcbiAqIFRoZSBjdXJyZW50IGNsYXNzIGNhcnJpZXMgdGhlIGJhc2UgcHJlc2VudGF0aW9uYWwgbG9naWMgb2YgdGhlIEFFTSBMYXlvdXQgQ29udGFpbmVyIChha2EuIFJlc3BvbnNpdmUgZ3JpZClcbiAqL1xuZXhwb3J0IGNsYXNzIEFFTVJlc3BvbnNpdmVHcmlkQ29tcG9uZW50IGV4dGVuZHMgQUVNQWxsb3dlZENvbXBvbmVudHNDb250YWluZXJDb21wb25lbnQge1xuICAvKipcbiAgICogQ2xhc3MgbmFtZXMgYXNzb2NpYXRlZCB3aXRoIHRoZSBjdXJyZW50IHJlc3BvbnNpdmUgZ3JpZFxuICAgKi9cbiAgQElucHV0KCkgZ3JpZENsYXNzTmFtZXM6IHN0cmluZztcbiAgLyoqXG4gICAqIE1hcCBvZiBjbGFzcyBuYW1lcyBjb3JyZXNwb25kaW5nIHRvIGVhY2ggY2hpbGQgb2YgdGhlIGN1cnJlbnQgcmVzcG9uc2l2ZSBncmlkXG4gICAqL1xuICBASW5wdXQoKSBjb2x1bW5DbGFzc05hbWVzOiBPYmplY3Q7XG4gIC8qKlxuICAgKiBDbGFzcyBuYW1lcyBvZiB0aGUgY3VycmVudCBjb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGNsYXNzTmFtZXM6IHN0cmluZztcbiAgLyoqXG4gICAqIEN1cnJlbnQgbnVtYmVyIG9mIGNvbHVtbnMgb2YgdGhlIGdyaWRcbiAgICovXG4gIEBJbnB1dCgpIGNvbHVtbkNvdW50OiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIFJldHVybnMgdGhlIGNvbHVtbiBjbGFzcyBuYW1lcyBmb3IgYSBnaXZlbiBjb2x1bW5cbiAgICogQHBhcmFtIGl0ZW1LZXkgLSBUaGUga2V5IG9mIHRoZSBjb2x1bW4gaXRlbVxuICAgKi9cbiAgZ2V0Q29sdW1uQ2xhc3NOYW1lcyhpdGVtS2V5OnN0cmluZykge1xuICAgIHJldHVybiB0aGlzLmNvbHVtbkNsYXNzTmFtZXMgJiYgdGhpcy5jb2x1bW5DbGFzc05hbWVzW2l0ZW1LZXldO1xuICB9XG5cbiAgLyoqXG4gICAqIFJldHVybnMgdGhlIHBsYWNlaG9sZGVyIGNsYXNzZXNcbiAgICovXG4gIGdldFBsYWNlaG9sZGVyQ2xhc3NOYW1lcygpIHtcbiAgICByZXR1cm4gc3VwZXIuZ2V0UGxhY2Vob2xkZXJDbGFzc05hbWVzKCkgKyAnICcgKyBQTEFDRUhPTERFUl9DTEFTU19OQU1FUztcbiAgfVxuXG4gIC8qKlxuICAgKiBSZXR1cm5zIHRoZSBjbGFzcyBuYW1lcyBvZiB0aGUgcmVzcG9uc2l2ZSBncmlkIGJhc2VkIG9uIHRoZSBkYXRhIGZyb20gdGhlIGNxTW9kZWxcbiAgICovXG4gIGdldEhvc3RDbGFzc05hbWVzKCkge1xuICAgIGxldCBjbGFzc05hbWVzID0gc3VwZXIuZ2V0SG9zdENsYXNzTmFtZXMoKTtcblxuICAgIGlmICh0aGlzLmNsYXNzTmFtZXMpIHtcbiAgICAgICAgY2xhc3NOYW1lcyArPSAnICcgKyAodGhpcy5jbGFzc05hbWVzIHx8ICcnKSA7XG4gICAgfVxuXG4gICAgcmV0dXJuIGNsYXNzTmFtZXMgKyAnICcgKyB0aGlzLmdyaWRDbGFzc05hbWVzO1xuICB9XG5cbiAgLyoqXG4gICAqIFJldHVybnMgdGhlIGFnZ3JlZ2F0ZWQgcGF0aCBvZiB0aGlzIGNvbnRhaW5lciBwYXRoIGFuZCB0aGUgcHJvdmlkZWQgcGF0aFxuICAgKlxuICAgKiBAcGFyYW0gcGF0aCAtIHRoZSBwcm92aWRlZCBwYXRoIHRvIGFnZ3JlZ2F0ZSB3aXRoIHRoZSBjb250YWluZXIgcGF0aFxuICAgKi9cbiAgZ2V0QXR0ckRhdGFQYXRoKHBhdGgpIHtcbiAgICBsZXQgaXRlbSA9IHRoaXMuZ2V0SXRlbShwYXRoKTtcbiAgICBpZiAoaXRlbSAmJiBpdGVtW0NvbnN0YW50cy5UWVBFX1BST1BdID09PSBSRVNQT05TSVZFX0dSSURfVFlQRSkge1xuICAgICAgLy8gV2UgZG9uJ3Qgd2FudCB0byBhZGQgdGhlIHBhdGggZm9yIHRoZSB3cmFwcGVyIGZvciBhIHJlcG9uc2l2ZWdyaWRcbiAgICAgIC8vIFRoZSByZXBvbnNpdmVncmlkIGFkZHMgdGhlIHBhdGggb24gaXQncyBvd25cbiAgICAgIHJldHVybiBudWxsO1xuICAgIH1cblxuICAgIHJldHVybiB0aGlzLmdldERhdGFQYXRoKHBhdGgpO1xuICB9XG59XG4iXX0=