@stratusjs/angular 0.3.6 → 0.3.8

package/src/editor/link-dialog.component.js

@@ -0,0 +1,294 @@
+System.register(["@angular/core", "@angular/forms", "@angular/material/dialog", "@angular/material/snack-bar", "rxjs", "rxjs/operators", "lodash", "@stratusjs/runtime/stratus", "@stratusjs/core/environment", "@stratusjs/angular/backend.service", "@stratusjs/angularjs/services/model", "@stratusjs/angular/core/responsive.component", "@angular/material/icon", "@angular/platform-browser"], function (exports_1, context_1) {
+    "use strict";
+    var __decorate = (this && this.__decorate) || function (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;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var __param = (this && this.__param) || function (paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); }
+    };
+    var core_1, forms_1, dialog_1, snack_bar_1, rxjs_1, operators_1, lodash_1, stratus_1, environment_1, backend_service_1, model_1, responsive_component_1, icon_1, platform_browser_1, systemDir, moduleName, parentModuleName, min, localDir, LinkDialogComponent;
+    var __moduleName = context_1 && context_1.id;
+    return {
+        setters: [
+            function (core_1_1) {
+                core_1 = core_1_1;
+            },
+            function (forms_1_1) {
+                forms_1 = forms_1_1;
+            },
+            function (dialog_1_1) {
+                dialog_1 = dialog_1_1;
+            },
+            function (snack_bar_1_1) {
+                snack_bar_1 = snack_bar_1_1;
+            },
+            function (rxjs_1_1) {
+                rxjs_1 = rxjs_1_1;
+            },
+            function (operators_1_1) {
+                operators_1 = operators_1_1;
+            },
+            function (lodash_1_1) {
+                lodash_1 = lodash_1_1;
+            },
+            function (stratus_1_1) {
+                stratus_1 = stratus_1_1;
+            },
+            function (environment_1_1) {
+                environment_1 = environment_1_1;
+            },
+            function (backend_service_1_1) {
+                backend_service_1 = backend_service_1_1;
+            },
+            function (model_1_1) {
+                model_1 = model_1_1;
+            },
+            function (responsive_component_1_1) {
+                responsive_component_1 = responsive_component_1_1;
+            },
+            function (icon_1_1) {
+                icon_1 = icon_1_1;
+            },
+            function (platform_browser_1_1) {
+                platform_browser_1 = platform_browser_1_1;
+            }
+        ],
+        execute: function () {
+            systemDir = '@stratusjs/angular';
+            moduleName = 'link-dialog';
+            parentModuleName = 'editor';
+            min = !environment_1.cookie('env') ? '.min' : '';
+            localDir = `${stratus_1.Stratus.BaseUrl}${boot.configuration.paths[`${systemDir}/*`].replace(/[^/]*$/, '')}`;
+            LinkDialogComponent = class LinkDialogComponent extends responsive_component_1.ResponsiveComponent {
+                constructor(dialogRef, data, fb, backend, snackBar, iconRegistry, sanitizer, ref) {
+                    super();
+                    this.dialogRef = dialogRef;
+                    this.data = data;
+                    this.fb = fb;
+                    this.backend = backend;
+                    this.snackBar = snackBar;
+                    this.iconRegistry = iconRegistry;
+                    this.sanitizer = sanitizer;
+                    this.ref = ref;
+                    this.title = moduleName + '_component';
+                    this._ = lodash_1.default;
+                    this.Stratus = stratus_1.Stratus;
+                    this.apiBase = '/Api/Content';
+                    this.contentEntities = [];
+                    this.isContentLoading = true;
+                    this.limit = 20;
+                    this.eventInsert = true;
+                    this.selected = [];
+                    this.svgIcons = {};
+                    this.styled = false;
+                }
+                ngOnInit() {
+                    this.uid = lodash_1.default.uniqueId(`sa_${lodash_1.default.snakeCase(moduleName)}_component_`);
+                    stratus_1.Stratus.Instances[this.uid] = this;
+                    stratus_1.Stratus.Internals.CssLoader(`${localDir}${parentModuleName}/${moduleName}.component${min}.css`)
+                        .then(() => {
+                        this.styled = true;
+                        this.refresh();
+                    })
+                        .catch((err) => {
+                        console.warn('Issue detected in CSS Loader for Component:', this);
+                        console.error(err);
+                        this.styled = true;
+                        this.refresh();
+                    });
+                    lodash_1.default.forEach({
+                        selector_delete: `${stratus_1.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/delete.svg`,
+                        selector_edit: `${stratus_1.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/edit.svg`
+                    }, (value, key) => this.iconRegistry.addSvgIcon(key, this.sanitizer.bypassSecurityTrustResourceUrl(value)).getNamedSvgIcon(key));
+                    this.model = this.data.model;
+                    this.property = this.data.property;
+                    this.editor = this.data.editor;
+                    this.eventManager = this.data.eventManager;
+                    if (lodash_1.default.isBoolean(this.data.eventInsert)) {
+                        this.eventInsert = this.data.eventInsert;
+                    }
+                    this.dialogLinkForm = this.fb.group({
+                        linkQueryInput: ''
+                    });
+                    this.dialogLinkForm
+                        .get('linkQueryInput')
+                        .valueChanges
+                        .pipe(operators_1.debounceTime(300), operators_1.tap(() => {
+                    }), operators_1.switchMap((value) => {
+                        return this.getQuery(value);
+                    }))
+                        .subscribe((response) => this.processContent(response));
+                    this.getQuery().subscribe((response) => this.processContent(response));
+                    this.refresh();
+                }
+                onCancelClick() {
+                    this.dialogRef.close();
+                    this.refresh();
+                }
+                onPage(event) {
+                    this.pageEvent = event;
+                    this.getQuery(this.lastContentQuery).subscribe((response) => this.processContent(response));
+                }
+                getQueryUrl(query) {
+                    let limit = this.limit;
+                    let paging = 1;
+                    if (this.pageEvent) {
+                        limit = this.pageEvent.pageSize;
+                        paging = this.pageEvent.pageIndex + 1;
+                    }
+                    query = (lodash_1.default.isString(query) && !lodash_1.default.isEmpty(query)) ? `"${query}"` : '';
+                    return `${this.apiBase}?limit=${limit}&p=${paging}&q=${query}`;
+                }
+                getQuery(query) {
+                    this.lastContentQuery = query;
+                    this.isContentLoading = true;
+                    return this.backend.get(this.getQueryUrl(query))
+                        .pipe(operators_1.finalize(() => this.isContentLoading = false));
+                }
+                processContent(response) {
+                    if (!response.ok || response.status !== 200 || lodash_1.default.isEmpty(response.body)) {
+                        this.meta = {};
+                        this.contentEntities = [];
+                        this.refresh();
+                        return this.contentEntities;
+                    }
+                    this.meta = lodash_1.default.get(response.body, 'meta') || {};
+                    const payload = lodash_1.default.get(response.body, 'payload') || response.body;
+                    if (lodash_1.default.isEmpty(payload) || !Array.isArray(payload)) {
+                        this.contentEntities = [];
+                        this.isContentLoading = false;
+                        this.refresh();
+                        return this.contentEntities;
+                    }
+                    this.contentEntities = payload;
+                    this.isContentLoading = false;
+                    this.refresh();
+                    return this.contentEntities;
+                }
+                select(content) {
+                    if (lodash_1.default.isUndefined(content)) {
+                        return;
+                    }
+                    const linkElement = this.createLink(content);
+                    if (!linkElement) {
+                        console.warn(`${moduleName}: unable to build link for Content ID: ${content.id}`);
+                        this.snackBar.open(`Unable to build link for Content ID: ${content.id}.`, 'dismiss', {
+                            duration: 5000,
+                            horizontalPosition: 'right',
+                            verticalPosition: 'bottom'
+                        });
+                        return;
+                    }
+                    this.selected.push(content.id);
+                    if (!this.eventInsert) {
+                        if (!(this.model instanceof model_1.Model)) {
+                            console.warn(`${moduleName}: event manager not available.`);
+                            return;
+                        }
+                        if (!lodash_1.default.isString(this.property)) {
+                            console.warn(`${moduleName}: event manager not available.`);
+                            return;
+                        }
+                        console.warn(`${moduleName}: disabling eventInsert is not recommended.`);
+                        this.model.set(this.property, this.model.get(this.property) + linkElement);
+                        return;
+                    }
+                    if (!this.eventManager) {
+                        console.warn(`${moduleName}: event manager is not set.`);
+                        return;
+                    }
+                    this.eventManager.trigger('insert', linkElement, this.editor);
+                    this.onCancelClick();
+                }
+                isSelected(content) {
+                    if (lodash_1.default.isUndefined(content)) {
+                        return;
+                    }
+                    return lodash_1.default.includes(this.selected, content.id);
+                }
+                createLink(content) {
+                    if (!content) {
+                        console.warn(`${moduleName}: unable to create link for empty content`);
+                        return null;
+                    }
+                    if (!content.contentType || !content.contentType.name) {
+                        console.warn(`${moduleName}: unable to find content type for content id: ${content.id}`);
+                        return null;
+                    }
+                    if (!content.routing || !content.routing.length || !content.routing[0]) {
+                        console.warn(`${moduleName}: unable to find routing for ${content.contentType.name} id: ${content.id}`);
+                        return null;
+                    }
+                    if (!content.routing[0].url) {
+                        console.warn(`${moduleName}: unable to find url for ${content.contentType.name} id: ${content.id}`);
+                        return null;
+                    }
+                    if (!content.version) {
+                        console.warn(`${moduleName}: unable to find content version for ${content.contentType.name} id: ${content.id}`);
+                        return null;
+                    }
+                    if (!content.version.title || !content.version.title.length) {
+                        console.warn(`${moduleName}: unable to find title for ${content.contentType.name} id: ${content.id}`);
+                        return null;
+                    }
+                    return `<a href="/${content.routing[0].url}" aria-label="${content.version.title}">${content.version.title}</a>`;
+                }
+                getSvg(url, options) {
+                    const uid = this.addSvgIcon(url, options);
+                    return new rxjs_1.Observable((subscriber) => {
+                        this.iconRegistry
+                            .getNamedSvgIcon(uid)
+                            .subscribe({
+                            error(err) {
+                                console.error(`getSvg(${url}): ${err}`);
+                            },
+                            complete() {
+                                subscriber.next(uid);
+                            }
+                        });
+                    });
+                }
+                addSvgIcon(url, options) {
+                    if (url in this.svgIcons) {
+                        return this.svgIcons[url];
+                    }
+                    if (!options) {
+                        options = {};
+                    }
+                    const uid = this.svgIcons[url] = lodash_1.default.uniqueId('selector_svg');
+                    this.iconRegistry.addSvgIcon(uid, this.sanitizer.bypassSecurityTrustResourceUrl(url), options);
+                    return uid;
+                }
+                goToUrl(content) {
+                    if (!content || !content.contentType) {
+                        console.error('unable to execute goToUrl() because a valid model content was not provided.');
+                        return;
+                    }
+                    window.open(content.contentType.editUrl + '?id=' + content.id, '_blank');
+                }
+            };
+            LinkDialogComponent = __decorate([
+                core_1.Component({
+                    selector: `sa-${moduleName}`,
+                    templateUrl: `${localDir}/${parentModuleName}/${moduleName}.component${min}.html`,
+                }),
+                __param(1, core_1.Inject(dialog_1.MAT_DIALOG_DATA)),
+                __metadata("design:paramtypes", [dialog_1.MatDialogRef, Object, forms_1.FormBuilder,
+                    backend_service_1.BackendService,
+                    snack_bar_1.MatSnackBar,
+                    icon_1.MatIconRegistry,
+                    platform_browser_1.DomSanitizer,
+                    core_1.ChangeDetectorRef])
+            ], LinkDialogComponent);
+            exports_1("LinkDialogComponent", LinkDialogComponent);
+        }
+    };
+});
+
+//# sourceMappingURL=link-dialog.component.js.map

package/src/editor/link-dialog.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["link-dialog.component.ts"],"names":[],"mappings":"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","file":"link-dialog.component.js"}

package/src/editor/link-dialog.component.min.css

@@ -0,0 +1 @@
+.link-dialog-content{margin:0 auto}.link-dialog-content .radio-group{display:flex;flex-direction:column;margin:15px 0}.link-dialog-content .radio-button{margin:5px}.link-dialog-content img.selected{opacity:.5}.link-dialog-content .link-card{max-width:400px}.link-dialog-content .link-header-image{background-size:cover}.link-dialog-content .autocomplete-option .content-type{margin-bottom:2px}.link-dialog-content .autocomplete-option .content-type mat-icon,.link-dialog-content .autocomplete-option .content-type md-icon{margin-right:4px;height:14px;width:14px;min-height:14px;min-width:14px}.link-dialog-content .autocomplete-option .content-type .content-type-name{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1px}.link-dialog-content .autocomplete-option .no-image-icon mat-icon,.link-dialog-content .autocomplete-option .no-image-icon md-icon{height:28px;width:28px;min-height:28px;min-width:28px}.link-dialog-content .autocomplete-option .no-image-icon mat-icon svg g,.link-dialog-content .autocomplete-option .no-image-icon md-icon svg g{fill:#fff}.link-dialog-content .autocomplete-option .shapeholder{width:100%;display:block}.link-dialog-content .content-selector-autocomplete .column-title h3{margin:0 0 5px;font-size:16px}.link-dialog-content .content-selector,.link-dialog-content md-autocomplete{margin-top:12px}.link-dialog-content .selector-filter md-checkbox{padding-right:10px}.link-dialog-content .md-autocomplete-suggestions li{height:80px}.link-dialog-content .content-selector-autocomplete .autocomplete-row{padding:4px 0;border-bottom:1px solid rgba(0,0,0,.1)}.link-dialog-content .content-selector-autocomplete .autocomplete-row *{line-height:1.4}.link-dialog-content .content-selector-autocomplete .autocomplete-row .column-image .image-container{margin-right:18px}.link-dialog-content .content-selector-autocomplete .autocomplete-row h3{font-size:14px}.link-dialog-content .content-selector-autocomplete .autocomplete-row .routing{font-size:13px}.link-dialog-content .content-selector-autocomplete .content .column-title,.link-dialog-content .content-selector-autocomplete .content .image{opacity:.3}.link-dialog-content .content-selector-autocomplete .content mat-icon.content-icon,.link-dialog-content .content-selector-autocomplete .content md-icon.content-icon{z-index:5;height:40px;width:40px;min-height:40px;min-width:40px}.link-dialog-content .content-selector-autocomplete .content mat-icon.content-icon svg,.link-dialog-content .content-selector-autocomplete .content md-icon.content-icon svg{filter:drop-shadow(0 0 1px rgba(0, 0, 0, .5));-webkit-filter:drop-shadow(0 0 1px rgba(0, 0, 0, .5))}.link-dialog-content .content-selector-autocomplete .content mat-icon.content-icon svg g,.link-dialog-content .content-selector-autocomplete .content md-icon.content-icon svg g{fill:#fff}.link-dialog-content .selector-wrapper{background:rgba(255,255,255,.4);margin-top:20px;padding:40px}.link-dialog-content .content-list{margin:0 auto;max-width:600px;min-height:60px;display:block;border-radius:4px;overflow:hidden}.link-dialog-content .content-box{padding:12px 16px;color:rgba(0,0,0,.87);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;font-size:14px}.link-dialog-content .content-box:last-child{border:none}.link-dialog-content .custom-ghost-placeholder{background:rgba(0,0,0,.4);min-height:60px;transition:transform 250ms cubic-bezier(0,0,.2,1)}.link-dialog-content .column-action,.link-dialog-content .column-image,.link-dialog-content .column-title{float:left}.link-dialog-content .column-image{width:15%;padding-right:10px}.link-dialog-content .column-image .image,.link-dialog-content .column-image .no-image-icon{margin-right:10px}.link-dialog-content .column-title{width:70%}.link-dialog-content .column-action{width:15%}.link-dialog-content .column-action>*{display:inline-block;vertical-align:middle;margin-bottom:2px}.link-dialog-content .column-action>:last-child{margin-bottom:0}.link-dialog-content .content-box.cdk-drag-preview .column-image{width:15%}.link-dialog-content .content-box.cdk-drag-preview .column-title{width:85%}.link-dialog-content .routing{color:#333;font-size:13px}.link-dialog-content .content-list .content-list-header{margin-bottom:20px;padding-bottom:20px}.link-dialog-content .content-list .content-list-header .note,.link-dialog-content .content-list .content-list-header h3{margin:0;display:inline-block;vertical-align:text-bottom;line-height:1.2}.link-dialog-content .content-list .content-list-header .note{padding-left:10px}.link-dialog-content .content-list .content-list-container{width:100%}.link-dialog-content .content-list .content-list-row{margin-bottom:10px;padding:12px 16px;background:rgba(0,0,0,.04);border-radius:2px;cursor:pointer}.link-dialog-content .content-list .content-list-row.inactive{background:#ddd}.link-dialog-content .content-list .content-list-row.unpublished{background:#ddd}.link-dialog-content .content-list .btn.btn-delete,.link-dialog-content .content-list .btn.btn-edit{float:right;width:35px;min-width:unset;height:35px;font-size:10px;margin-left:12px;padding:0;background:#fff;box-shadow:0 0 2px rgba(0,0,0,.3)}.link-dialog-content .content-list .btn.btn-delete:hover,.link-dialog-content .content-list .btn.btn-edit:hover{background:#fff;box-shadow:0 0 2px rgba(0,0,0,.8)}.link-dialog-content .content-list .btn.btn-delete svg,.link-dialog-content .content-list .btn.btn-edit svg{margin:0 auto;width:60%}.link-dialog-content .content-list .btn.btn-delete svg g,.link-dialog-content .content-list .btn.btn-edit svg g{fill:#222}.link-dialog-content .firefox .btn.btn-delete svg,.link-dialog-content .firefox .btn.btn-delete svg g,.link-dialog-content .firefox .btn.btn-edit svg,.link-dialog-content .firefox .btn.btn-edit svg g{max-width:28px;max-height:28px}

package/src/editor/link-dialog.component.min.html

@@ -0,0 +1 @@
+<h1 mat-dialog-title>Link Selector</h1><div mat-dialog-content class="link-dialog-content"><form class="dialog-form" [formGroup]="dialogLinkForm"><mat-form-field class="form-field"><input matInput placeholder="Search Content" aria-label="Search Content" formControlName="linkQueryInput"></mat-form-field></form><mat-progress-bar mode="indeterminate" *ngIf="isContentLoading || !styled"></mat-progress-bar><div class="content-list" *ngIf="styled"><div class="content-list-row content-box" [ngClass]="{'active': _.get(contentEntity, 'status') === 1, 'inactive' : _.get(contentEntity, 'status') !== 1, 'published': _.get(contentEntity, 'version.published') === 1, 'unpublished': _.get(contentEntity, 'version.published') !== 1, 'selected': isSelected(contentEntity)}" (click)="select(contentEntity)" *ngFor="let contentEntity of contentEntities"><div class="content-list-container"><div class="column-image position-anchor"><div class="image position-all" *ngIf="_.has(contentEntity, 'version.bestImage._thumbnailUrl')" [attr.data-stratus-src]="!_.get(contentEntity, 'version.bestImage.service') ? true : false" [ngStyle]="{'background': 'url(' + _.get(contentEntity, 'version.bestImage._thumbnailUrl') + ') no-repeat center center', 'background-size': 'cover'}"></div><div class="no-image-icon position-all" *ngIf="!_.has(contentEntity, 'version.bestImage._thumbnailUrl')" [ngClass]="_.get(contentEntity, 'contentType.class') + '-background-color'"><mat-icon class="content-type-icon position-center" [svgIcon]="getSvg(Stratus.BaseUrl + (_.get(contentEntity, 'contentType.iconResourcePath') || _.get(contentEntity, 'iconResourcePath'))) | async">Icon</mat-icon></div><img class="shapeholder" [src]="Stratus.BaseUrl + 'sitetheorycore/images/shapeholder-square.png'"></div><div class="column-title"><div class="content-type" *ngIf="_.has(contentEntity, 'contentType.iconResourcePath')"><mat-icon class="content-type-icon" [svgIcon]="getSvg(Stratus.BaseUrl + _.get(contentEntity, 'contentType.iconResourcePath')) | async">ContentType Icon</mat-icon><span class="comment content-type-name font-body" [ngClass]="((_.get(contentEntity, 'contentType.name') || _.get(contentEntity, 'name')) | lowercase) + '-color'" [textContent]="(_.get(contentEntity, 'contentType.name') || _.get(contentEntity, 'name')) + ((_.get(contentEntity, 'status') !== 1) ? ' (hidden)' : '') + ((_.get(contentEntity, 'version.published') !== 1) ? ' (unpublished)' : '')"></span></div><h3 [innerHTML]="_.get(contentEntity, 'version.bestIdentifier') || _.get(contentEntity, 'name') || (_.get(contentEntity, 'contentType.controller') === 'Content\\Module' ? _.get(contentEntity, 'version.internalIdentifier') : 'Untitled ' + _.get(contentEntity, 'contentType.name') + ' (' + _.get(contentEntity, 'id') + ')')"></h3><span class="routing" [textContent]="(_.has(contentEntity, 'routing') ? '/' + _.get(contentEntity, 'routing[0].url') : null) || _.get(contentEntity, 'description') || ''"></span></div><div class="column-action"><a mat-button *ngIf="_.has(contentEntity, 'contentType.editUrl')" [matTooltip]="'Edit ' + (_.get(contentEntity, 'contentType.name') || _.get(contentEntity, 'name'))" aria-label="Edit Item in New Window" class="btn btn-edit" (click)="goToUrl(contentEntity, '_blank');"><mat-icon svgIcon="selector_edit" aria-hidden="false" aria-label="Edit Item">Edit</mat-icon></a></div></div></div></div></div>

package/src/editor/link-dialog.component.min.js

@@ -0,0 +1 @@
+System.register(["@angular/core","@angular/forms","@angular/material/dialog","@angular/material/snack-bar","rxjs","rxjs/operators","lodash","@stratusjs/runtime/stratus","@stratusjs/core/environment","@stratusjs/angular/backend.service","@stratusjs/angularjs/services/model","@stratusjs/angular/core/responsive.component","@angular/material/icon","@angular/platform-browser"],function(t,e){"use strict";var n,i,s,o,r,a,l,c,d,u,h,g,f,p,m,v,y,b,k=this&&this.__decorate||function(t,e,n,i){var s,o=arguments.length,r=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,i);else for(var a=t.length-1;a>=0;a--)(s=t[a])&&(r=(o<3?s(r):o>3?s(e,n,r):s(e,n))||r);return o>3&&r&&Object.defineProperty(e,n,r),r},$=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},I=this&&this.__param||function(t,e){return function(n,i){e(n,i,t)}};e&&e.id;return{setters:[function(t){n=t},function(t){i=t},function(t){s=t},function(t){o=t},function(t){r=t},function(t){a=t},function(t){l=t},function(t){c=t},function(t){d=t},function(t){u=t},function(t){h=t},function(t){g=t},function(t){f=t},function(t){p=t}],execute:function(){"@stratusjs/angular",m="link-dialog","editor",v=d.cookie("env")?"":".min",y=`${c.Stratus.BaseUrl}${boot.configuration.paths["@stratusjs/angular/*"].replace(/[^/]*$/,"")}`,b=class extends g.ResponsiveComponent{constructor(t,e,n,i,s,o,r,a){super(),this.dialogRef=t,this.data=e,this.fb=n,this.backend=i,this.snackBar=s,this.iconRegistry=o,this.sanitizer=r,this.ref=a,this.title="link-dialog_component",this._=l.default,this.Stratus=c.Stratus,this.apiBase="/Api/Content",this.contentEntities=[],this.isContentLoading=!0,this.limit=20,this.eventInsert=!0,this.selected=[],this.svgIcons={},this.styled=!1}ngOnInit(){this.uid=l.default.uniqueId(`sa_${l.default.snakeCase(m)}_component_`),c.Stratus.Instances[this.uid]=this,c.Stratus.Internals.CssLoader(`${y}editor/link-dialog.component${v}.css`).then(()=>{this.styled=!0,this.refresh()}).catch(t=>{console.warn("Issue detected in CSS Loader for Component:",this),console.error(t),this.styled=!0,this.refresh()}),l.default.forEach({selector_delete:`${c.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/delete.svg`,selector_edit:`${c.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/edit.svg`},(t,e)=>this.iconRegistry.addSvgIcon(e,this.sanitizer.bypassSecurityTrustResourceUrl(t)).getNamedSvgIcon(e)),this.model=this.data.model,this.property=this.data.property,this.editor=this.data.editor,this.eventManager=this.data.eventManager,l.default.isBoolean(this.data.eventInsert)&&(this.eventInsert=this.data.eventInsert),this.dialogLinkForm=this.fb.group({linkQueryInput:""}),this.dialogLinkForm.get("linkQueryInput").valueChanges.pipe(a.debounceTime(300),a.tap(()=>{}),a.switchMap(t=>this.getQuery(t))).subscribe(t=>this.processContent(t)),this.getQuery().subscribe(t=>this.processContent(t)),this.refresh()}onCancelClick(){this.dialogRef.close(),this.refresh()}onPage(t){this.pageEvent=t,this.getQuery(this.lastContentQuery).subscribe(t=>this.processContent(t))}getQueryUrl(t){let e=this.limit,n=1;return this.pageEvent&&(e=this.pageEvent.pageSize,n=this.pageEvent.pageIndex+1),t=l.default.isString(t)&&!l.default.isEmpty(t)?`"${t}"`:"",`${this.apiBase}?limit=${e}&p=${n}&q=${t}`}getQuery(t){return this.lastContentQuery=t,this.isContentLoading=!0,this.backend.get(this.getQueryUrl(t)).pipe(a.finalize(()=>this.isContentLoading=!1))}processContent(t){if(!t.ok||200!==t.status||l.default.isEmpty(t.body))return this.meta={},this.contentEntities=[],this.refresh(),this.contentEntities;this.meta=l.default.get(t.body,"meta")||{};const e=l.default.get(t.body,"payload")||t.body;return l.default.isEmpty(e)||!Array.isArray(e)?(this.contentEntities=[],this.isContentLoading=!1,this.refresh(),this.contentEntities):(this.contentEntities=e,this.isContentLoading=!1,this.refresh(),this.contentEntities)}select(t){if(l.default.isUndefined(t))return;const e=this.createLink(t);return e?(this.selected.push(t.id),this.eventInsert?void(this.eventManager?(this.eventManager.trigger("insert",e,this.editor),this.onCancelClick()):console.warn("link-dialog: event manager is not set.")):this.model instanceof h.Model&&l.default.isString(this.property)?(console.warn("link-dialog: disabling eventInsert is not recommended."),void this.model.set(this.property,this.model.get(this.property)+e)):void console.warn("link-dialog: event manager not available.")):(console.warn(`link-dialog: unable to build link for Content ID: ${t.id}`),void this.snackBar.open(`Unable to build link for Content ID: ${t.id}.`,"dismiss",{duration:5e3,horizontalPosition:"right",verticalPosition:"bottom"}))}isSelected(t){if(!l.default.isUndefined(t))return l.default.includes(this.selected,t.id)}createLink(t){return t?t.contentType&&t.contentType.name?t.routing&&t.routing.length&&t.routing[0]?t.routing[0].url?t.version?t.version.title&&t.version.title.length?`<a href="/${t.routing[0].url}" aria-label="${t.version.title}">${t.version.title}</a>`:(console.warn(`link-dialog: unable to find title for ${t.contentType.name} id: ${t.id}`),null):(console.warn(`link-dialog: unable to find content version for ${t.contentType.name} id: ${t.id}`),null):(console.warn(`link-dialog: unable to find url for ${t.contentType.name} id: ${t.id}`),null):(console.warn(`link-dialog: unable to find routing for ${t.contentType.name} id: ${t.id}`),null):(console.warn(`link-dialog: unable to find content type for content id: ${t.id}`),null):(console.warn("link-dialog: unable to create link for empty content"),null)}getSvg(t,e){const n=this.addSvgIcon(t,e);return new r.Observable(e=>{this.iconRegistry.getNamedSvgIcon(n).subscribe({error(e){console.error(`getSvg(${t}): ${e}`)},complete(){e.next(n)}})})}addSvgIcon(t,e){if(t in this.svgIcons)return this.svgIcons[t];e||(e={});const n=this.svgIcons[t]=l.default.uniqueId("selector_svg");return this.iconRegistry.addSvgIcon(n,this.sanitizer.bypassSecurityTrustResourceUrl(t),e),n}goToUrl(t){t&&t.contentType?window.open(t.contentType.editUrl+"?id="+t.id,"_blank"):console.error("unable to execute goToUrl() because a valid model content was not provided.")}},b=k([n.Component({selector:"sa-link-dialog",templateUrl:`${y}/editor/link-dialog.component${v}.html`}),I(1,n.Inject(s.MAT_DIALOG_DATA)),$("design:paramtypes",[s.MatDialogRef,Object,i.FormBuilder,u.BackendService,o.MatSnackBar,f.MatIconRegistry,p.DomSanitizer,n.ChangeDetectorRef])],b),t("LinkDialogComponent",b)}}});

package/src/editor/link-dialog.component.scss

@@ -0,0 +1,279 @@
+.link {
+  &-dialog {
+    &-content {
+      .radio {
+        &-group {
+          display: flex;
+          flex-direction: column;
+          margin: 15px 0;
+        }
+        &-button {
+          margin: 5px;
+        }
+      }
+      img.selected {
+        opacity: 0.5;
+      }
+      .link-card {
+        max-width: 400px;
+      }
+      .link-header-image {
+        //background-image: url('');
+        background-size: cover;
+      }
+
+      /* Styles for Both Selector and Content Areas */
+      .autocomplete-option {
+        .content-type {
+          margin-bottom: 2px;
+          md-icon,
+          mat-icon {
+            margin-right: 4px;
+            height: 14px;
+            width: 14px;
+            min-height: 14px;
+            min-width: 14px;
+          }
+          .content-type-name {
+            font-weight: bold;
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+          }
+        }
+        .no-image-icon {
+          md-icon,
+          mat-icon {
+            height: 28px;
+            width: 28px;
+            min-height: 28px;
+            min-width: 28px;
+            svg g {
+              fill: #FFF;
+            }
+          }
+        }
+        .shapeholder {
+          width: 100%;
+          display: block;
+        }
+      }
+
+      .content-selector-autocomplete {
+        .column-title h3 {
+          margin: 0 0 5px;
+          font-size: 16px;
+        }
+      }
+
+
+
+      /* Selector Autocomplete Options */
+      md-autocomplete,
+      .content-selector {
+        margin-top: 12px;
+      }
+      .selector-filter md-checkbox {
+        padding-right: 10px;
+      }
+      .md-autocomplete-suggestions li {
+        height: 80px;
+      }
+      .content-selector-autocomplete {
+        .autocomplete-row {
+          padding: 4px 0;
+          border-bottom: 1px solid rgba(0,0,0,.1);
+          * {
+            line-height: 1.4;
+          }
+          .column-image {
+            .image-container {
+              margin-right: 18px;
+            }
+          }
+          h3 {
+            font-size: 14px;
+          }
+          .routing {
+            font-size: 13px;
+          }
+        }
+        .content {
+          .image,
+          .column-title {
+            opacity: .3;
+          }
+          md-icon.content-icon,
+          mat-icon.content-icon {
+            z-index: 5;
+            height: 40px;
+            width: 40px;
+            min-height: 40px;
+            min-width: 40px;
+            svg {
+              filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
+              -webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
+              g {
+                fill: #FFF;
+              }
+            }
+          }
+        }
+      }
+
+      /* Draggable Content List */
+
+      .selector-wrapper {
+        background: rgba(255,255,255,.4);
+        margin-top: 20px;
+        padding: 40px;
+      }
+
+      /* Based on Angular Material 8+ */
+
+      .content-list {
+        margin: 0 auto;
+        max-width: 600px;
+        min-height: 60px;
+        display: block;
+        border-radius: 4px;
+        overflow: hidden;
+      }
+      .content-box {
+        padding: 12px 16px;
+        color: rgba(0, 0, 0, 0.87);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        background: white;
+        font-size: 14px;
+      }
+      .content-box:last-child {
+        border: none;
+      }
+      .custom-ghost-placeholder {
+        background: rgba(0,0,0,.4);
+        min-height: 60px;
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+      }
+
+      /* Content List Custom */
+      .column-image,
+      .column-title,
+      .column-action {
+        float: left;
+      }
+
+      .column-image {
+        width: 15%;
+        padding-right: 10px;
+        .image,
+        .no-image-icon {
+          margin-right: 10px;
+        }
+      }
+      .column-title {
+        width: 70%;
+      }
+      .column-action {
+        width: 15%;
+        > * {
+          display: inline-block;
+          vertical-align: middle;
+          margin-bottom: 2px;
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+      .content-box.cdk-drag-preview {
+        .column-image {
+          width: 15%;
+        }
+        .column-title {
+          width: 85%;
+        }
+      }
+
+      margin: 0 auto;
+      .routing {
+        color: #333;
+        font-size: 13px;
+      }
+      .content-list {
+        .content-list-header {
+          margin-bottom: 20px;
+          padding-bottom: 20px;
+          h3,
+          .note {
+            margin: 0;
+            display: inline-block;
+            vertical-align: text-bottom;
+            line-height: 1.2;
+          }
+          .note {
+            padding-left: 10px;
+          }
+        }
+        .content-message-box {
+          // extra information for the list messages (currently only used for an empty list)
+        }
+        .content-list-container {
+          width: 100%;
+        }
+        .content-list-row {
+          margin-bottom: 10px;
+          padding: 12px 16px;
+          background: rgba(0, 0, 0, 0.04);
+          border-radius: 2px;
+          cursor: pointer;
+          &.active {
+            // extra options for status >= 1
+          }
+          &.inactive {
+            // extra options for status < 1
+            background: #DDD;
+          }
+          &.published {
+            // extra options for status == 1
+          }
+          &.unpublished {
+            // extra options for published != 1
+            background: #DDD;
+          }
+        }
+        .btn.btn-delete, .btn.btn-edit {
+          float: right;
+          width: 35px;
+          min-width: unset;
+          height: 35px;
+          font-size: 10px;
+          margin-left: 12px;
+          padding: 0;
+          background: #fff;
+          box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+          &:hover {
+            background: #fff;
+            box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+          }
+          svg {
+            margin: 0 auto;
+            width: 60%;
+            g {
+              fill: #222;
+            }
+          }
+        }
+      }
+      .firefox .btn.btn-delete svg, .firefox .btn.btn-edit svg {
+        &,
+        g {
+          max-width: 28px;
+          max-height: 28px;
+        }
+      }
+    }
+  }
+}