UNPKG

@adobe/cq-angular-editable-components

Version:

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

16 lines (14 loc) 14.8 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@adobe/cq-spa-component-mapping"),require("@adobe/cq-spa-page-model-manager"),require("@angular/common")):"function"==typeof define&&define.amd?define("@adobe/cq-angular-editable-components",["exports","@angular/core","@adobe/cq-spa-component-mapping","@adobe/cq-spa-page-model-manager","@angular/common"],e):e(((t=t||self).adobe=t.adobe||{},t.adobe["cq-angular-editable-components"]={}),t.ng.core,t.cqSpaComponentMapping,t.cqSpaPageModelManager,t.ng.common)}(this,(function(t,e,n,o,a){"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. ***************************************************************************** */var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function i(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function p(t,e,n,o){var a,r=arguments.length,i=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(t,e,n,o);else for(var p=t.length-1;p>=0;p--)(a=t[p])&&(i=(r<3?a(i):r>3?a(e,n,i):a(e,n))||i);return r>3&&i&&Object.defineProperty(e,n,i),i}function s(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}Object.create;Object.create;var c=function(){function t(t){this.spaMapping=t,this.editConfigMap={}}return t.prototype.map=function(t,e,n){void 0===n&&(n=null);var o=e;n&&(this.editConfigMap[t]=n),this.spaMapping.map(t,o)},t.prototype.get=function(t){return this.spaMapping.get(t)},t.prototype.getEditConfig=function(t){return this.editConfigMap[t]},t}(),l=new c(n.ComponentMapping);var m={NEW_SECTION_CLASS_NAMES:"new section",TYPE_PROP:o.Constants.TYPE_PROP,ITEMS_PROP:o.Constants.ITEMS_PROP,ITEMS_ORDER_PROP:o.Constants.ITEMS_ORDER_PROP,PATH_PROP:o.Constants.PATH_PROP,CHILDREN_PROP:o.Constants.CHILDREN_PROP,DATA_PATH_PROP:":dataPath",HIERARCHY_TYPE_PROP:o.Constants.HIERARCHY_TYPE_PROP};function d(){if(function(){try{return"undefined"!=typeof window}catch(t){return!1}}()){var t=document.head.querySelector('meta[property="cq:wcmmode"]');return t&&t.content}}var u={isInEditor:function(){var t=d();return t&&("edit"===t||"preview"===t)}},h=function(){function t(t,e,n,o){this.renderer=t,this.viewContainer=e,this.factoryResolver=n,this._changeDetectorRef=o}return Object.defineProperty(t.prototype,"cqItem",{get:function(){return this._cqItem},set:function(t){this._cqItem=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"changeDetectorRef",{get:function(){return this._changeDetectorRef},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){this.renderComponent(l.get(this.type))},t.prototype.ngOnChanges=function(t){this.updateComponentData()},Object.defineProperty(t.prototype,"type",{get:function(){return this.cqItem&&this.cqItem[m.TYPE_PROP]},enumerable:!0,configurable:!0}),t.prototype.renderComponent=function(t){if(t){var e=this.factoryResolver.resolveComponentFactory(t);this.viewContainer.clear(),this._component=this.viewContainer.createComponent(e),this.updateComponentData()}},t.prototype.updateComponentData=function(){var t=this;if(this._component&&this._component.instance){Object.getOwnPropertyNames(this.cqItem).forEach((function(e){var n=e;if(n.startsWith(":")){var o=n.substr(1);n="cq"+o.substr(0,1).toUpperCase()+o.substr(1)}t._component.instance[n]=t.cqItem[e]})),this._component.instance.cqPath=this.cqPath,this._component.instance.itemName=this.itemName;var e=l.getEditConfig(this.type);e&&u.isInEditor&&this.setupPlaceholder(e),this._changeDetectorRef.detectChanges()}},t.prototype.setupItemAttrs=function(){var t=this;this.itemAttrs&&Object.getOwnPropertyNames(this.itemAttrs).forEach((function(e){"class"===e?t.itemAttrs[e].split(" ").forEach((function(e){t.renderer.addClass(t._component.location.nativeElement,e)})):t.renderer.setAttribute(t._component.location.nativeElement,e,t.itemAttrs[e])}))},t.prototype.usePlaceholder=function(t){return t.isEmpty&&"function"==typeof t.isEmpty&&t.isEmpty(this.cqItem)},t.prototype.setupPlaceholder=function(t){this.usePlaceholder(t)?(this.renderer.addClass(this._component.location.nativeElement,"cq-placeholder"),this.renderer.setAttribute(this._component.location.nativeElement,"data-emptytext",t.emptyLabel)):(this.renderer.removeClass(this._component.location.nativeElement,"cq-placeholder"),this.renderer.removeAttribute(this._component.location.nativeElement,"data-emptytext"))},t.prototype.ngAfterViewInit=function(){this.setupItemAttrs()},t.prototype.ngOnDestroy=function(){this._component&&this._component.destroy()},t.ctorParameters=function(){return[{type:e.Renderer2},{type:e.ViewContainerRef},{type:e.ComponentFactoryResolver},{type:e.ChangeDetectorRef}]},p([e.Input(),s("design:type",Object),s("design:paramtypes",[Object])],t.prototype,"cqItem",null),p([e.Input(),s("design:type",String)],t.prototype,"cqPath",void 0),p([e.Input(),s("design:type",String)],t.prototype,"itemName",void 0),p([e.Input(),s("design:type",Object)],t.prototype,"itemAttrs",void 0),p([e.Input(),s("design:type",Object)],t.prototype,"aemComponent",void 0),t=p([e.Directive({selector:"[aemComponent]"}),s("design:paramtypes",[e.Renderer2,e.ViewContainerRef,e.ComponentFactoryResolver,e.ChangeDetectorRef])],t)}(),g=m.NEW_SECTION_CLASS_NAMES,y=function(){function t(){this.cqPath="",this.modelName=""}return Object.defineProperty(t.prototype,"isInEditMode",{get:function(){return u.isInEditor()},enumerable:!0,configurable:!0}),t.prototype.getDataPath=function(t){return this.cqPath?this.cqPath+"/"+t:t},t.prototype.getItem=function(t){return this.cqItems&&this.cqItems[t]},t.prototype.getHostClassNames=function(){return"aem-container"},Object.defineProperty(t.prototype,"hostClasses",{get:function(){return this.getHostClassNames()},enumerable:!0,configurable:!0}),t.prototype.getPlaceholderClassNames=function(){return g},Object.defineProperty(t.prototype,"placeholderPath",{get:function(){return this.cqPath&&this.cqPath+"/*"},enumerable:!0,configurable:!0}),p([e.Input(),s("design:type",Object)],t.prototype,"cqItems",void 0),p([e.Input(),s("design:type",Object)],t.prototype,"cqItemsOrder",void 0),p([e.Input(),s("design:type",String)],t.prototype,"cqPath",void 0),p([e.Input(),s("design:type",String)],t.prototype,"modelName",void 0),p([e.Input(),s("design:type",String)],t.prototype,"classNames",void 0),t=p([e.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'})],t)}(),f=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.emptyLabel="No allowed components",e}return i(n,t),n.prototype.isAllowedComponentsApplicable=function(){return this.isInEditMode&&this.allowedComponents&&this.allowedComponents.applicable},n.prototype.getAllowedComponentListPlaceholderClassNames=function(){return t.prototype.getPlaceholderClassNames.call(this)+" aem-AllowedComponent--list"},n.prototype.getAllowedComponentListLabel=function(){return this.allowedComponents&&this.allowedComponents.components&&this.allowedComponents.components.length>0?this.title:this.emptyLabel},n.prototype.getAllowedComponents=function(){return this.allowedComponents&&this.allowedComponents.components||[]},Object.defineProperty(n.prototype,"allowedComponentListTitleClassNames",{get:function(){return"aem-AllowedComponent--title"},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"allowedComponentClassNames",{get:function(){return"aem-AllowedComponent--component cq-placeholder placeholder"},enumerable:!0,configurable:!0}),p([e.Input(),s("design:type",String)],n.prototype,"title",void 0),p([e.Input(),s("design:type",String)],n.prototype,"emptyLabel",void 0),p([e.Input(),s("design:type",Object)],n.prototype,"allowedComponents",void 0),n=p([e.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:[""]})],n)}(y),C=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return i(n,t),n.prototype.getColumnClassNames=function(t){return this.columnClassNames&&this.columnClassNames[t]},n.prototype.getPlaceholderClassNames=function(){return t.prototype.getPlaceholderClassNames.call(this)+" aem-Grid-newComponent"},n.prototype.getHostClassNames=function(){var e=t.prototype.getHostClassNames.call(this);return this.classNames&&(e+=" "+(this.classNames||"")),e+" "+this.gridClassNames},n.prototype.getAttrDataPath=function(t){var e=this.getItem(t);return e&&"wcm/foundation/components/responsivegrid"===e[m.TYPE_PROP]?null:this.getDataPath(t)},p([e.Input(),s("design:type",String)],n.prototype,"gridClassNames",void 0),p([e.Input(),s("design:type",Object)],n.prototype,"columnClassNames",void 0),p([e.Input(),s("design:type",String)],n.prototype,"classNames",void 0),p([e.Input(),s("design:type",Number)],n.prototype,"columnCount",void 0),n=p([e.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'})],n)}(f),P=function(){function t(){}return t.prototype.updateItem=function(){var t=this;o.ModelManager.getData({path:this.cqPath}).then((function(e){t.cqItem=e,t.aemComponent.changeDetectorRef.markForCheck()}))},t.prototype.ngOnInit=function(){o.ModelManager.addListener(this.cqPath,this.updateItem.bind(this))},t.prototype.ngDestroy=function(){o.ModelManager.removeListener(this.cqPath,this.updateItem.bind(this))},p([e.Input(),s("design:type",Object)],t.prototype,"cqPath",void 0),p([e.Input(),s("design:type",Object)],t.prototype,"cqItem",void 0),p([e.Input(),s("design:type",Object)],t.prototype,"itemName",void 0),p([e.Input(),s("design:type",Object)],t.prototype,"aemModelProvider",void 0),p([e.ViewChild(h),s("design:type",h)],t.prototype,"aemComponent",void 0),t=p([e.Component({selector:"aem-model-provider,[aemModelProvider]",template:"<ng-container aemComponent [cqItem]='cqItem' [cqPath]='cqPath' [itemName]='itemName'></ng-container>"}),s("design:paramtypes",[])],t)}(),v=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return i(n,t),n.prototype.getDataPath=function(t){return this.cqPath?this.cqPath+"/jcr:content/"+t:t},n=p([e.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'})],n)}(y),I=function(){function t(){}return t=p([e.NgModule({imports:[a.CommonModule],declarations:[y,f,C,h,P,v],exports:[y,f,C,h,P,v],entryComponents:[y,f,C,v]})],t)}(),b=function(){function t(){}return t.prototype.resolve=function(t){return"/"+t.url.join("/").replace(/\.[^/.]+$/,"")},t=p([e.Injectable(),s("design:paramtypes",[])],t)}(),q=function(){function t(){}return t.prototype.shouldDetach=function(t){return!1},t.prototype.store=function(t,e){},t.prototype.shouldAttach=function(t){return!1},t.prototype.retrieve=function(t){return null},t.prototype.shouldReuseRoute=function(t,e){return!1},t}();t.AEMAllowedComponentsContainerComponent=f,t.AEMComponentDirective=h,t.AEMContainerComponent=y,t.AEMModelProviderComponent=P,t.AEMPageComponent=v,t.AEMResponsiveGridComponent=C,t.ALLOWED_COMPONENT_PLACEHOLDER_CLASS_NAMES="aem-AllowedComponent--component cq-placeholder placeholder",t.ALLOWED_COMPONENT_TITLE_CLASS_NAMES="aem-AllowedComponent--title",t.ALLOWED_PLACEHOLDER_CLASS_NAMES="aem-AllowedComponent--list",t.AemPageDataResolver=b,t.AemPageRouteReuseStrategy=q,t.ComponentMapping=l,t.ComponentMappingWithConfig=c,t.Constants=m,t.MapTo=function(t){return function(e,n){return void 0===n&&(n=null),l.map(t,e,n)}},t.SpaAngularEditableComponentsModule=I,t.Utils=u,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=adobe-cq-angular-editable-components.umd.min.js.map