@sitecore-jss/sitecore-jss-angular 23.0.0-canary.14 → 23.0.0-canary.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ViewContainerRef, TemplateRef, Input, Directive,
|
|
2
|
+
import { inject, ViewContainerRef, TemplateRef, Input, Directive, Renderer2, ElementRef, InjectionToken, Component, Injector, createNgModule, Injectable, EventEmitter, KeyValueDiffers, ChangeDetectorRef, PLATFORM_ID, ViewChild, ContentChild, Output, HostBinding, TransferState, ɵisPromise as _isPromise, NgModule } from '@angular/core';
|
|
3
3
|
import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
|
|
4
4
|
export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
|
|
5
|
-
import { isFieldValueEmpty,
|
|
6
|
-
export {
|
|
7
|
-
import { MetadataKind, DEFAULT_PLACEHOLDER_UID, mapButtonToCommand, getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing';
|
|
8
|
-
export { DefaultEditFrameButton, DefaultEditFrameButtons, handleEditorAnchors, isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/editing';
|
|
5
|
+
import { isFieldValueEmpty, isDynamicPlaceholder, getDynamicPlaceholderPattern } from '@sitecore-jss/sitecore-jss/layout';
|
|
6
|
+
export { GraphQLLayoutService, LayoutServicePageState, RestLayoutService, getChildPlaceholder, getFieldValue } from '@sitecore-jss/sitecore-jss/layout';
|
|
9
7
|
import { Router, RedirectCommand, UrlTree, ActivatedRoute, ROUTES } from '@angular/router';
|
|
10
|
-
import { isAbsoluteUrl
|
|
8
|
+
import { isAbsoluteUrl } from '@sitecore-jss/sitecore-jss/utils';
|
|
11
9
|
export { isServer } from '@sitecore-jss/sitecore-jss/utils';
|
|
12
10
|
import * as i1 from '@angular/common';
|
|
13
|
-
import { isPlatformServer, CommonModule, DatePipe
|
|
14
|
-
import {
|
|
11
|
+
import { isPlatformServer, CommonModule, DatePipe } from '@angular/common';
|
|
12
|
+
import { Observable, BehaviorSubject, isObservable, from, of, lastValueFrom } from 'rxjs';
|
|
15
13
|
import { takeWhile, take, mergeMap } from 'rxjs/operators';
|
|
16
14
|
import { constants } from '@sitecore-jss/sitecore-jss';
|
|
17
15
|
export { ClientError, MemoryCacheClient, NativeDataFetcher, constants, debug, enableDebug } from '@sitecore-jss/sitecore-jss';
|
|
16
|
+
import { mapButtonToCommand } from '@sitecore-jss/sitecore-jss/editing';
|
|
17
|
+
export { DefaultEditFrameButton, DefaultEditFrameButtons, handleEditorAnchors, isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/editing';
|
|
18
18
|
export { GraphQLDictionaryService, RestDictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
|
|
19
19
|
export { DefaultRetryStrategy, GraphQLRequestClient, getEdgeProxyContentUrl } from '@sitecore-jss/sitecore-jss/graphql';
|
|
20
20
|
export { trackingApi } from '@sitecore-jss/sitecore-jss/tracking';
|
|
@@ -62,38 +62,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
62
62
|
args: ['scFile']
|
|
63
63
|
}] } });
|
|
64
64
|
|
|
65
|
-
/**
|
|
66
|
-
* Component that renders a field' metadata chrome element.
|
|
67
|
-
*/
|
|
68
|
-
class FieldMetadataMarkerComponent {
|
|
69
|
-
metadata;
|
|
70
|
-
kind = MetadataKind.Open;
|
|
71
|
-
get metadataString() {
|
|
72
|
-
return this.metadata ? JSON.stringify(this.metadata) : '';
|
|
73
|
-
}
|
|
74
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FieldMetadataMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
75
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: FieldMetadataMarkerComponent, isStandalone: true, selector: "code[scFieldMetadataMarker]", inputs: { metadata: "metadata", kind: "kind" }, host: { properties: { "attr.type": "\"text/sitecore\"", "attr.chrometype": "\"field\"", "class": "\"scpm\"", "attr.kind": "this.kind" } }, ngImport: i0, template: '{{ metadataString }}', isInline: true });
|
|
76
|
-
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FieldMetadataMarkerComponent, decorators: [{
|
|
78
|
-
type: Component,
|
|
79
|
-
args: [{
|
|
80
|
-
selector: 'code[scFieldMetadataMarker]',
|
|
81
|
-
template: '{{ metadataString }}',
|
|
82
|
-
host: {
|
|
83
|
-
'[attr.type]': '"text/sitecore"',
|
|
84
|
-
'[attr.chrometype]': '"field"',
|
|
85
|
-
'[class]': '"scpm"',
|
|
86
|
-
},
|
|
87
|
-
}]
|
|
88
|
-
}], propDecorators: { metadata: [{
|
|
89
|
-
type: Input
|
|
90
|
-
}], kind: [{
|
|
91
|
-
type: HostBinding,
|
|
92
|
-
args: ['attr.kind']
|
|
93
|
-
}, {
|
|
94
|
-
type: Input
|
|
95
|
-
}] } });
|
|
96
|
-
|
|
97
65
|
/**
|
|
98
66
|
* Base class that contains common functionality for the field directives.
|
|
99
67
|
*/
|
|
@@ -107,34 +75,6 @@ class BaseFieldDirective {
|
|
|
107
75
|
shouldRender() {
|
|
108
76
|
return !!this.field?.editable || !isFieldValueEmpty(this.field);
|
|
109
77
|
}
|
|
110
|
-
/**
|
|
111
|
-
* Renders the empty field markup which is required by Pages in editMode 'metadata' in case field is empty.
|
|
112
|
-
*/
|
|
113
|
-
renderEmpty() {
|
|
114
|
-
if (this.field?.metadata && this.editable) {
|
|
115
|
-
this.renderMetadata(MetadataKind.Open);
|
|
116
|
-
if (this.emptyFieldEditingTemplate) {
|
|
117
|
-
this.viewContainer.createEmbeddedView(this.emptyFieldEditingTemplate);
|
|
118
|
-
}
|
|
119
|
-
else {
|
|
120
|
-
this.viewContainer.createComponent(this.defaultFieldEditingComponent);
|
|
121
|
-
}
|
|
122
|
-
this.renderMetadata(MetadataKind.Close);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* Renders a metadata chrome marker for the field. Required by Pages in editMode 'metadata'.
|
|
127
|
-
* @param {string} kind - 'open' or 'close' to indicate the start or end of the metadata chrome
|
|
128
|
-
*/
|
|
129
|
-
renderMetadata(kind) {
|
|
130
|
-
if (this.field?.metadata && this.editable) {
|
|
131
|
-
const metadataChrome = this.viewContainer.createComponent(FieldMetadataMarkerComponent);
|
|
132
|
-
metadataChrome.setInput('kind', kind);
|
|
133
|
-
if (kind === MetadataKind.Open) {
|
|
134
|
-
metadataChrome.setInput('metadata', this.field.metadata);
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
78
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BaseFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
139
79
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: BaseFieldDirective, isStandalone: true, ngImport: i0 });
|
|
140
80
|
}
|
|
@@ -142,30 +82,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
142
82
|
type: Directive
|
|
143
83
|
}] });
|
|
144
84
|
|
|
145
|
-
/**
|
|
146
|
-
* Default component that will be rendered in pages when image field is empty.
|
|
147
|
-
*/
|
|
148
|
-
class DefaultEmptyImageFieldEditingComponent {
|
|
149
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DefaultEmptyImageFieldEditingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
150
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DefaultEmptyImageFieldEditingComponent, isStandalone: true, selector: "[sc-default-empty-image-field-editing-placeholder]", ngImport: i0, template: `
|
|
151
|
-
<img
|
|
152
|
-
alt=""
|
|
153
|
-
src='data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'
|
|
154
|
-
class="scEmptyImage"
|
|
155
|
-
/>
|
|
156
|
-
`, isInline: true, styles: [":host{min-width:48px;min-height:48px;max-width:400px;max-height:400px;cursor:pointer}\n"] });
|
|
157
|
-
}
|
|
158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DefaultEmptyImageFieldEditingComponent, decorators: [{
|
|
159
|
-
type: Component,
|
|
160
|
-
args: [{ selector: '[sc-default-empty-image-field-editing-placeholder]', template: `
|
|
161
|
-
<img
|
|
162
|
-
alt=""
|
|
163
|
-
src='data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'
|
|
164
|
-
class="scEmptyImage"
|
|
165
|
-
/>
|
|
166
|
-
`, styles: [":host{min-width:48px;min-height:48px;max-width:400px;max-height:400px;cursor:pointer}\n"] }]
|
|
167
|
-
}] });
|
|
168
|
-
|
|
169
85
|
class ImageDirective extends BaseFieldDirective {
|
|
170
86
|
field;
|
|
171
87
|
editable = true;
|
|
@@ -179,14 +95,6 @@ class ImageDirective extends BaseFieldDirective {
|
|
|
179
95
|
mediaUrlPrefix;
|
|
180
96
|
urlParams = {};
|
|
181
97
|
attrs = {};
|
|
182
|
-
/**
|
|
183
|
-
* Custom template to render in Pages in Metadata edit mode if field value is empty
|
|
184
|
-
*/
|
|
185
|
-
emptyFieldEditingTemplate;
|
|
186
|
-
/**
|
|
187
|
-
* Default component to render in Pages in Metadata edit mode if field value is empty and emptyFieldEditingTemplate is not provided
|
|
188
|
-
*/
|
|
189
|
-
defaultFieldEditingComponent = DefaultEmptyImageFieldEditingComponent;
|
|
190
98
|
inlineRef = null;
|
|
191
99
|
templateRef = inject(TemplateRef);
|
|
192
100
|
renderer = inject(Renderer2);
|
|
@@ -203,7 +111,6 @@ class ImageDirective extends BaseFieldDirective {
|
|
|
203
111
|
}
|
|
204
112
|
updateView() {
|
|
205
113
|
if (!this.shouldRender()) {
|
|
206
|
-
super.renderEmpty();
|
|
207
114
|
return;
|
|
208
115
|
}
|
|
209
116
|
const overrideAttrs = {
|
|
@@ -234,9 +141,7 @@ class ImageDirective extends BaseFieldDirective {
|
|
|
234
141
|
}
|
|
235
142
|
attrs = this.getImageAttrs(img, overrideAttrs, this.urlParams);
|
|
236
143
|
if (attrs) {
|
|
237
|
-
this.renderMetadata(MetadataKind.Open);
|
|
238
144
|
this.renderTemplate(attrs);
|
|
239
|
-
this.renderMetadata(MetadataKind.Close);
|
|
240
145
|
}
|
|
241
146
|
}
|
|
242
147
|
getImageAttrs(fieldAttrs, parsedAttrs, imageParams) {
|
|
@@ -301,7 +206,7 @@ class ImageDirective extends BaseFieldDirective {
|
|
|
301
206
|
this.inlineRef = span;
|
|
302
207
|
}
|
|
303
208
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
304
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: ImageDirective, isStandalone: true, selector: "[scImage]", inputs: { field: ["scImage", "field"], editable: ["scImageEditable", "editable"], mediaUrlPrefix: ["scImageMediaUrlPrefix", "mediaUrlPrefix"], urlParams: ["scImageUrlParams", "urlParams"], attrs: ["scImageAttrs", "attrs"]
|
|
209
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: ImageDirective, isStandalone: true, selector: "[scImage]", inputs: { field: ["scImage", "field"], editable: ["scImageEditable", "editable"], mediaUrlPrefix: ["scImageMediaUrlPrefix", "mediaUrlPrefix"], urlParams: ["scImageUrlParams", "urlParams"], attrs: ["scImageAttrs", "attrs"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
305
210
|
}
|
|
306
211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ImageDirective, decorators: [{
|
|
307
212
|
type: Directive,
|
|
@@ -321,38 +226,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
321
226
|
}], attrs: [{
|
|
322
227
|
type: Input,
|
|
323
228
|
args: ['scImageAttrs']
|
|
324
|
-
}], emptyFieldEditingTemplate: [{
|
|
325
|
-
type: Input,
|
|
326
|
-
args: ['scImageEmptyFieldEditingTemplate']
|
|
327
229
|
}] } });
|
|
328
230
|
|
|
329
|
-
/**
|
|
330
|
-
* Default component that will be rendered in pages when field is empty; applies for text, richtext, date and link fields.
|
|
331
|
-
*/
|
|
332
|
-
class DefaultEmptyFieldEditingComponent {
|
|
333
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DefaultEmptyFieldEditingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
334
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DefaultEmptyFieldEditingComponent, isStandalone: true, selector: "<span>[sc-default-empty-text-field-editing-placeholder]</span>", ngImport: i0, template: '[No text in field]', isInline: true });
|
|
335
|
-
}
|
|
336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DefaultEmptyFieldEditingComponent, decorators: [{
|
|
337
|
-
type: Component,
|
|
338
|
-
args: [{
|
|
339
|
-
selector: '<span>[sc-default-empty-text-field-editing-placeholder]</span>',
|
|
340
|
-
template: '[No text in field]',
|
|
341
|
-
}]
|
|
342
|
-
}] });
|
|
343
|
-
|
|
344
231
|
class LinkDirective extends BaseFieldDirective {
|
|
345
232
|
editable = true;
|
|
346
233
|
attrs = {};
|
|
347
234
|
field;
|
|
348
|
-
/**
|
|
349
|
-
* Custom template to render in Pages in Metadata edit mode if field value is empty
|
|
350
|
-
*/
|
|
351
|
-
emptyFieldEditingTemplate;
|
|
352
|
-
/**
|
|
353
|
-
* Default component to render in Pages in Metadata edit mode if field value is empty and emptyFieldEditingTemplate is not provided
|
|
354
|
-
*/
|
|
355
|
-
defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
|
|
356
235
|
templateRef = inject(TemplateRef);
|
|
357
236
|
renderer = inject(Renderer2);
|
|
358
237
|
inlineRef = null;
|
|
@@ -402,12 +281,11 @@ class LinkDirective extends BaseFieldDirective {
|
|
|
402
281
|
/**
|
|
403
282
|
* Determines if directive should render the field as is
|
|
404
283
|
* Returns true if we are in edit mode 'chromes' (field.editable is present) or field is not empty
|
|
405
|
-
* or link field text is present
|
|
284
|
+
* or link field text is present.
|
|
406
285
|
* The right side of the expression was added to preserve existing functionality
|
|
407
286
|
*/
|
|
408
287
|
shouldRender() {
|
|
409
|
-
return
|
|
410
|
-
!!((this.field?.text || this.field?.value?.text) && !this.field?.metadata));
|
|
288
|
+
return super.shouldRender() || !!(this.field?.text || this.field?.value?.text);
|
|
411
289
|
}
|
|
412
290
|
updateView() {
|
|
413
291
|
const field = this.field;
|
|
@@ -416,7 +294,6 @@ class LinkDirective extends BaseFieldDirective {
|
|
|
416
294
|
}
|
|
417
295
|
else {
|
|
418
296
|
if (!this.shouldRender()) {
|
|
419
|
-
super.renderEmpty();
|
|
420
297
|
return;
|
|
421
298
|
}
|
|
422
299
|
const props = field.href ? field : field.value;
|
|
@@ -425,9 +302,7 @@ class LinkDirective extends BaseFieldDirective {
|
|
|
425
302
|
const href = `${props?.href}${anchor}`;
|
|
426
303
|
const mergedAttrs = { ...props, ...this.attrs, href };
|
|
427
304
|
delete mergedAttrs.anchor;
|
|
428
|
-
this.renderMetadata(MetadataKind.Open);
|
|
429
305
|
this.renderTemplate(mergedAttrs, linkText);
|
|
430
|
-
this.renderMetadata(MetadataKind.Close);
|
|
431
306
|
}
|
|
432
307
|
}
|
|
433
308
|
renderInlineWrapper(editableFirstPart, editableLastPart) {
|
|
@@ -463,7 +338,7 @@ class LinkDirective extends BaseFieldDirective {
|
|
|
463
338
|
return attrs;
|
|
464
339
|
}
|
|
465
340
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
466
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: LinkDirective, isStandalone: true, selector: "[scLink]", inputs: { editable: ["scLinkEditable", "editable"], attrs: ["scLinkAttrs", "attrs"], field: ["scLink", "field"]
|
|
341
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: LinkDirective, isStandalone: true, selector: "[scLink]", inputs: { editable: ["scLinkEditable", "editable"], attrs: ["scLinkAttrs", "attrs"], field: ["scLink", "field"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
467
342
|
}
|
|
468
343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LinkDirective, decorators: [{
|
|
469
344
|
type: Directive,
|
|
@@ -477,19 +352,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
477
352
|
}], field: [{
|
|
478
353
|
type: Input,
|
|
479
354
|
args: ['scLink']
|
|
480
|
-
}], emptyFieldEditingTemplate: [{
|
|
481
|
-
type: Input,
|
|
482
|
-
args: ['scLinkEmptyFieldEditingTemplate']
|
|
483
355
|
}] } });
|
|
484
356
|
|
|
485
357
|
class RouterLinkDirective extends LinkDirective {
|
|
486
358
|
editable = true;
|
|
487
359
|
attrs = {};
|
|
488
360
|
field;
|
|
489
|
-
/**
|
|
490
|
-
* Custom template to render in Pages in Metadata edit mode if field value is empty
|
|
491
|
-
*/
|
|
492
|
-
emptyFieldEditingTemplate;
|
|
493
361
|
router = inject(Router);
|
|
494
362
|
renderTemplate(props, linkText) {
|
|
495
363
|
const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
@@ -512,7 +380,7 @@ class RouterLinkDirective extends LinkDirective {
|
|
|
512
380
|
});
|
|
513
381
|
}
|
|
514
382
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RouterLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
515
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: RouterLinkDirective, isStandalone: true, selector: "[scRouterLink]", inputs: { editable: ["scRouterLinkEditable", "editable"], attrs: ["scRouterLinkAttrs", "attrs"], field: ["scRouterLink", "field"]
|
|
383
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: RouterLinkDirective, isStandalone: true, selector: "[scRouterLink]", inputs: { editable: ["scRouterLinkEditable", "editable"], attrs: ["scRouterLinkAttrs", "attrs"], field: ["scRouterLink", "field"] }, usesInheritance: true, ngImport: i0 });
|
|
516
384
|
}
|
|
517
385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RouterLinkDirective, decorators: [{
|
|
518
386
|
type: Directive,
|
|
@@ -526,9 +394,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
526
394
|
}], field: [{
|
|
527
395
|
type: Input,
|
|
528
396
|
args: ['scRouterLink']
|
|
529
|
-
}], emptyFieldEditingTemplate: [{
|
|
530
|
-
type: Input,
|
|
531
|
-
args: ['scRouterLinkEmptyFieldEditingTemplate']
|
|
532
397
|
}] } });
|
|
533
398
|
|
|
534
399
|
class GenericLinkDirective extends LinkDirective {
|
|
@@ -536,10 +401,6 @@ class GenericLinkDirective extends LinkDirective {
|
|
|
536
401
|
attrs = {};
|
|
537
402
|
field;
|
|
538
403
|
extras;
|
|
539
|
-
/**
|
|
540
|
-
* Custom template to render in Pages in Metadata edit mode if field value is empty
|
|
541
|
-
*/
|
|
542
|
-
emptyFieldEditingTemplate;
|
|
543
404
|
router = inject(Router);
|
|
544
405
|
renderTemplate(props, linkText) {
|
|
545
406
|
const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
@@ -575,7 +436,7 @@ class GenericLinkDirective extends LinkDirective {
|
|
|
575
436
|
});
|
|
576
437
|
}
|
|
577
438
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GenericLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
578
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: GenericLinkDirective, isStandalone: true, selector: "[scGenericLink]", inputs: { editable: ["scGenericLinkEditable", "editable"], attrs: ["scGenericLinkAttrs", "attrs"], field: ["scGenericLink", "field"], extras: ["scGenericLinkExtras", "extras"]
|
|
439
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: GenericLinkDirective, isStandalone: true, selector: "[scGenericLink]", inputs: { editable: ["scGenericLinkEditable", "editable"], attrs: ["scGenericLinkAttrs", "attrs"], field: ["scGenericLink", "field"], extras: ["scGenericLinkExtras", "extras"] }, usesInheritance: true, ngImport: i0 });
|
|
579
440
|
}
|
|
580
441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: GenericLinkDirective, decorators: [{
|
|
581
442
|
type: Directive,
|
|
@@ -592,9 +453,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
592
453
|
}], extras: [{
|
|
593
454
|
type: Input,
|
|
594
455
|
args: ['scGenericLinkExtras']
|
|
595
|
-
}], emptyFieldEditingTemplate: [{
|
|
596
|
-
type: Input,
|
|
597
|
-
args: ['scGenericLinkEmptyFieldEditingTemplate']
|
|
598
456
|
}] } });
|
|
599
457
|
|
|
600
458
|
/**
|
|
@@ -804,46 +662,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
804
662
|
}]
|
|
805
663
|
}] });
|
|
806
664
|
|
|
807
|
-
class BaseJssState {
|
|
808
|
-
sitecore;
|
|
809
|
-
viewBag;
|
|
810
|
-
}
|
|
811
|
-
/**
|
|
812
|
-
* The service that is used to store and retrieve the current state of the app.
|
|
813
|
-
* Referenced by the SDK to get the current state of the app.
|
|
814
|
-
*/
|
|
815
|
-
class JssStateService {
|
|
816
|
-
transferState = inject(TransferState);
|
|
817
|
-
_state;
|
|
818
|
-
constructor() {
|
|
819
|
-
this._state = new BehaviorSubject({});
|
|
820
|
-
}
|
|
821
|
-
/**
|
|
822
|
-
* Observable JSS state to subscribe to
|
|
823
|
-
*/
|
|
824
|
-
get state() {
|
|
825
|
-
return this._state.asObservable();
|
|
826
|
-
}
|
|
827
|
-
/**
|
|
828
|
-
* The 'here and now' state value, usable without subscribing
|
|
829
|
-
*/
|
|
830
|
-
get stateValue() {
|
|
831
|
-
return this._state.value;
|
|
832
|
-
}
|
|
833
|
-
/**
|
|
834
|
-
* Set new JSS state
|
|
835
|
-
* @param {JssState} newState new state
|
|
836
|
-
*/
|
|
837
|
-
setState(newState) {
|
|
838
|
-
this._state.next(newState);
|
|
839
|
-
}
|
|
840
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JssStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
841
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JssStateService });
|
|
842
|
-
}
|
|
843
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JssStateService, decorators: [{
|
|
844
|
-
type: Injectable
|
|
845
|
-
}], ctorParameters: () => [] });
|
|
846
|
-
|
|
847
665
|
class PlaceholderComponent {
|
|
848
666
|
name;
|
|
849
667
|
rendering;
|
|
@@ -856,9 +674,7 @@ class PlaceholderComponent {
|
|
|
856
674
|
renderEmptyTemplate;
|
|
857
675
|
placeholderLoading;
|
|
858
676
|
view;
|
|
859
|
-
metadataNode;
|
|
860
677
|
isLoading = true;
|
|
861
|
-
metadataMode;
|
|
862
678
|
chromeType;
|
|
863
679
|
_inputs;
|
|
864
680
|
_differ;
|
|
@@ -866,7 +682,6 @@ class PlaceholderComponent {
|
|
|
866
682
|
placeholderData;
|
|
867
683
|
destroyed = false;
|
|
868
684
|
parentStyleAttribute = '';
|
|
869
|
-
contextSubscription;
|
|
870
685
|
differs = inject(KeyValueDiffers);
|
|
871
686
|
componentFactory = inject(JssComponentFactoryService);
|
|
872
687
|
changeDetectorRef = inject(ChangeDetectorRef);
|
|
@@ -878,12 +693,6 @@ class PlaceholderComponent {
|
|
|
878
693
|
guardResolver = inject(GUARD_RESOLVER);
|
|
879
694
|
dataResolver = inject(DATA_RESOLVER);
|
|
880
695
|
platformId = inject(PLATFORM_ID);
|
|
881
|
-
jssState = inject(JssStateService);
|
|
882
|
-
constructor() {
|
|
883
|
-
this.contextSubscription = this.jssState.state.subscribe(({ sitecore }) => {
|
|
884
|
-
this.metadataMode = sitecore?.context.editMode === EditMode.Metadata;
|
|
885
|
-
});
|
|
886
|
-
}
|
|
887
696
|
set inputs(value) {
|
|
888
697
|
this._inputs = value;
|
|
889
698
|
if (!this._differ && value) {
|
|
@@ -908,9 +717,6 @@ class PlaceholderComponent {
|
|
|
908
717
|
ngOnDestroy() {
|
|
909
718
|
this.destroyed = true;
|
|
910
719
|
this._componentInstances = [];
|
|
911
|
-
if (this.contextSubscription) {
|
|
912
|
-
this.contextSubscription.unsubscribe();
|
|
913
|
-
}
|
|
914
720
|
}
|
|
915
721
|
ngOnChanges(changes) {
|
|
916
722
|
this.chromeType = changes.name ? 'placeholder' : 'rendering';
|
|
@@ -933,56 +739,16 @@ class PlaceholderComponent {
|
|
|
933
739
|
changes.forEachChangedItem((change) => (updates[change.key] = change.currentValue));
|
|
934
740
|
this._componentInstances.forEach((componentInstance) => this._setComponentInputs(componentInstance, updates));
|
|
935
741
|
}
|
|
936
|
-
/**
|
|
937
|
-
* Gets id for Metadata code blocks, in specific format
|
|
938
|
-
* Metadata code blocks will wrap be added around placeholder content and each rendering component
|
|
939
|
-
* to allow for editing integration in Pages.
|
|
940
|
-
* @param {string} kind code block type ("open" or "close"). "open" is added before an element, and "close" added after one.
|
|
941
|
-
* @param {string?} renderingId rendering uid to apply as id to code block
|
|
942
|
-
* @returns {string} formatted id value for code HTML node
|
|
943
|
-
*/
|
|
944
|
-
getCodeBlockId = (kind, renderingId) => {
|
|
945
|
-
if (this.rendering && kind === MetadataKind.Open) {
|
|
946
|
-
const placeholderName = this.name;
|
|
947
|
-
const id = renderingId || this.rendering?.uid;
|
|
948
|
-
if (!renderingId && placeholderName) {
|
|
949
|
-
let phId = '';
|
|
950
|
-
for (const placeholder of Object.keys(this.rendering.placeholders || [])) {
|
|
951
|
-
if (placeholderName === placeholder) {
|
|
952
|
-
phId = id
|
|
953
|
-
? `${placeholderName}_${id}`
|
|
954
|
-
: `${placeholderName}_${DEFAULT_PLACEHOLDER_UID}`;
|
|
955
|
-
break;
|
|
956
|
-
}
|
|
957
|
-
// Check if the placeholder is a dynamic placeholder
|
|
958
|
-
if (isDynamicPlaceholder(placeholder)) {
|
|
959
|
-
const pattern = getDynamicPlaceholderPattern(placeholder);
|
|
960
|
-
// Check if the placeholder matches the dynamic placeholder pattern
|
|
961
|
-
if (pattern.test(placeholderName)) {
|
|
962
|
-
phId = id ? `${placeholder}_${id}` : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;
|
|
963
|
-
break;
|
|
964
|
-
}
|
|
965
|
-
}
|
|
966
|
-
}
|
|
967
|
-
return phId;
|
|
968
|
-
}
|
|
969
|
-
else {
|
|
970
|
-
return id;
|
|
971
|
-
}
|
|
972
|
-
}
|
|
973
|
-
return undefined;
|
|
974
|
-
};
|
|
975
742
|
/**
|
|
976
743
|
* Get renderings/components to be rendered for current placeholder name
|
|
977
744
|
* Can modify the inner placeholders collection to adjust to using SXA dynamic placeholders
|
|
978
745
|
* @returns {ComponentRendering<ComponentFields> | HtmlElementRendering[] | null} List of renderings to be rendered
|
|
979
746
|
*/
|
|
980
747
|
getPlaceholder() {
|
|
981
|
-
|
|
748
|
+
const phName = this.name?.slice() || '';
|
|
982
749
|
/**
|
|
983
750
|
* Process (SXA) dynamic placeholders
|
|
984
751
|
* Find and replace the matching dynamic placeholder e.g 'nameOfContainer-{*}' with the requested e.g. 'nameOfContainer-1'.
|
|
985
|
-
* For Metadata EditMode, we need to keep the raw placeholder name in place.
|
|
986
752
|
*/
|
|
987
753
|
this.rendering?.placeholders &&
|
|
988
754
|
Object.keys(this.rendering.placeholders).forEach((placeholder) => {
|
|
@@ -990,13 +756,8 @@ class PlaceholderComponent {
|
|
|
990
756
|
? getDynamicPlaceholderPattern(placeholder)
|
|
991
757
|
: null;
|
|
992
758
|
if (patternPlaceholder && patternPlaceholder.test(phName)) {
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
}
|
|
996
|
-
else {
|
|
997
|
-
this.rendering.placeholders[phName] = this.rendering.placeholders[placeholder];
|
|
998
|
-
delete this.rendering.placeholders[placeholder];
|
|
999
|
-
}
|
|
759
|
+
this.rendering.placeholders[phName] = this.rendering.placeholders[placeholder];
|
|
760
|
+
delete this.rendering.placeholders[placeholder];
|
|
1000
761
|
}
|
|
1001
762
|
});
|
|
1002
763
|
if (this.rendering &&
|
|
@@ -1049,26 +810,13 @@ class PlaceholderComponent {
|
|
|
1049
810
|
try {
|
|
1050
811
|
const nonGuarded = await this.guardResolver(factories);
|
|
1051
812
|
const withData = await this.dataResolver(nonGuarded);
|
|
1052
|
-
// not using index to ensure code blocks are rendered at correct positions
|
|
1053
813
|
withData.forEach((rendering) => {
|
|
1054
|
-
this.metadataMode &&
|
|
1055
|
-
this.view.createEmbeddedView(this.metadataNode, {
|
|
1056
|
-
kind: MetadataKind.Open,
|
|
1057
|
-
chromeType: 'rendering',
|
|
1058
|
-
renderingId: rendering.factory.componentDefinition?.uid,
|
|
1059
|
-
});
|
|
1060
814
|
if (this.renderEachTemplate && !isRawRendering(rendering.factory.componentDefinition)) {
|
|
1061
815
|
this._renderTemplatedComponent(rendering.factory.componentDefinition);
|
|
1062
816
|
}
|
|
1063
817
|
else {
|
|
1064
818
|
this._renderEmbeddedComponent(rendering.factory, rendering.data);
|
|
1065
819
|
}
|
|
1066
|
-
this.metadataMode &&
|
|
1067
|
-
this.view.createEmbeddedView(this.metadataNode, {
|
|
1068
|
-
kind: MetadataKind.Close,
|
|
1069
|
-
chromeType: 'rendering',
|
|
1070
|
-
renderingId: rendering.factory.componentDefinition?.uid,
|
|
1071
|
-
});
|
|
1072
820
|
});
|
|
1073
821
|
this.isLoading = false;
|
|
1074
822
|
this.changeDetectorRef.markForCheck();
|
|
@@ -1140,40 +888,11 @@ class PlaceholderComponent {
|
|
|
1140
888
|
this._componentInstances.push(componentInstance);
|
|
1141
889
|
}
|
|
1142
890
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1143
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PlaceholderComponent, isStandalone: true, selector: "sc-placeholder,[sc-placeholder]", inputs: { name: "name", rendering: "rendering", renderings: "renderings", outputs: "outputs", clientOnly: "clientOnly", inputs: "inputs" }, outputs: { loaded: "loaded", failed: "failed" }, queries: [{ propertyName: "renderEachTemplate", first: true, predicate: RenderEachDirective, descendants: true, static: true }, { propertyName: "renderEmptyTemplate", first: true, predicate: RenderEmptyDirective, descendants: true, static: true }, { propertyName: "placeholderLoading", first: true, predicate: PlaceholderLoadingDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "view", first: true, predicate: ["view"], descendants: true, read: ViewContainerRef, static: true }
|
|
891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: PlaceholderComponent, isStandalone: true, selector: "sc-placeholder,[sc-placeholder]", inputs: { name: "name", rendering: "rendering", renderings: "renderings", outputs: "outputs", clientOnly: "clientOnly", inputs: "inputs" }, outputs: { loaded: "loaded", failed: "failed" }, queries: [{ propertyName: "renderEachTemplate", first: true, predicate: RenderEachDirective, descendants: true, static: true }, { propertyName: "renderEmptyTemplate", first: true, predicate: RenderEmptyDirective, descendants: true, static: true }, { propertyName: "placeholderLoading", first: true, predicate: PlaceholderLoadingDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "view", first: true, predicate: ["view"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
1144
892
|
@if (isLoading) {
|
|
1145
893
|
<ng-template [ngTemplateOutlet]="placeholderLoading?.templateRef"></ng-template>
|
|
1146
894
|
}
|
|
1147
|
-
<ng-template
|
|
1148
|
-
#metadataCodeBlock
|
|
1149
|
-
let-kind="kind"
|
|
1150
|
-
let-type="chromeType"
|
|
1151
|
-
let-renderingId="renderingId"
|
|
1152
|
-
>
|
|
1153
|
-
<code
|
|
1154
|
-
[attr.kind]="kind"
|
|
1155
|
-
type="text/sitecore"
|
|
1156
|
-
[attr.chrometype]="type"
|
|
1157
|
-
class="scpm"
|
|
1158
|
-
[attr.id]="getCodeBlockId(kind, renderingId)"
|
|
1159
|
-
></code
|
|
1160
|
-
></ng-template>
|
|
1161
|
-
|
|
1162
|
-
@if (metadataMode && metadataCodeBlock) {
|
|
1163
|
-
<ng-container
|
|
1164
|
-
*ngTemplateOutlet="metadataCodeBlock; context: { kind: 'open', chromeType: 'placeholder' }"
|
|
1165
|
-
>
|
|
1166
|
-
</ng-container>
|
|
1167
|
-
}
|
|
1168
|
-
|
|
1169
895
|
<ng-template #view></ng-template>
|
|
1170
|
-
|
|
1171
|
-
@if (metadataMode && metadataCodeBlock) {
|
|
1172
|
-
<ng-container
|
|
1173
|
-
*ngTemplateOutlet="metadataCodeBlock; context: { kind: 'close', chromeType: 'placeholder' }"
|
|
1174
|
-
>
|
|
1175
|
-
</ng-container>
|
|
1176
|
-
}
|
|
1177
896
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1178
897
|
}
|
|
1179
898
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PlaceholderComponent, decorators: [{
|
|
@@ -1184,40 +903,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
1184
903
|
@if (isLoading) {
|
|
1185
904
|
<ng-template [ngTemplateOutlet]="placeholderLoading?.templateRef"></ng-template>
|
|
1186
905
|
}
|
|
1187
|
-
<ng-template
|
|
1188
|
-
#metadataCodeBlock
|
|
1189
|
-
let-kind="kind"
|
|
1190
|
-
let-type="chromeType"
|
|
1191
|
-
let-renderingId="renderingId"
|
|
1192
|
-
>
|
|
1193
|
-
<code
|
|
1194
|
-
[attr.kind]="kind"
|
|
1195
|
-
type="text/sitecore"
|
|
1196
|
-
[attr.chrometype]="type"
|
|
1197
|
-
class="scpm"
|
|
1198
|
-
[attr.id]="getCodeBlockId(kind, renderingId)"
|
|
1199
|
-
></code
|
|
1200
|
-
></ng-template>
|
|
1201
|
-
|
|
1202
|
-
@if (metadataMode && metadataCodeBlock) {
|
|
1203
|
-
<ng-container
|
|
1204
|
-
*ngTemplateOutlet="metadataCodeBlock; context: { kind: 'open', chromeType: 'placeholder' }"
|
|
1205
|
-
>
|
|
1206
|
-
</ng-container>
|
|
1207
|
-
}
|
|
1208
|
-
|
|
1209
906
|
<ng-template #view></ng-template>
|
|
1210
|
-
|
|
1211
|
-
@if (metadataMode && metadataCodeBlock) {
|
|
1212
|
-
<ng-container
|
|
1213
|
-
*ngTemplateOutlet="metadataCodeBlock; context: { kind: 'close', chromeType: 'placeholder' }"
|
|
1214
|
-
>
|
|
1215
|
-
</ng-container>
|
|
1216
|
-
}
|
|
1217
907
|
`,
|
|
1218
908
|
imports: [CommonModule],
|
|
1219
909
|
}]
|
|
1220
|
-
}],
|
|
910
|
+
}], propDecorators: { name: [{
|
|
1221
911
|
type: Input
|
|
1222
912
|
}], rendering: [{
|
|
1223
913
|
type: Input
|
|
@@ -1243,9 +933,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
1243
933
|
}], view: [{
|
|
1244
934
|
type: ViewChild,
|
|
1245
935
|
args: ['view', { read: ViewContainerRef, static: true }]
|
|
1246
|
-
}], metadataNode: [{
|
|
1247
|
-
type: ViewChild,
|
|
1248
|
-
args: ['metadataCodeBlock', { read: TemplateRef }]
|
|
1249
936
|
}], inputs: [{
|
|
1250
937
|
type: Input
|
|
1251
938
|
}] } });
|
|
@@ -1364,14 +1051,6 @@ class DateDirective extends BaseFieldDirective {
|
|
|
1364
1051
|
locale;
|
|
1365
1052
|
editable = true;
|
|
1366
1053
|
field;
|
|
1367
|
-
/**
|
|
1368
|
-
* Custom template to render in Pages in Metadata edit mode if field value is empty
|
|
1369
|
-
*/
|
|
1370
|
-
emptyFieldEditingTemplate;
|
|
1371
|
-
/**
|
|
1372
|
-
* Default component to render in Pages in Metadata edit mode if field value is empty and emptyFieldEditingTemplate is not provided
|
|
1373
|
-
*/
|
|
1374
|
-
defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
|
|
1375
1054
|
templateRef = inject(TemplateRef);
|
|
1376
1055
|
datePipe = inject(DatePipe);
|
|
1377
1056
|
ngOnChanges(changes) {
|
|
@@ -1382,12 +1061,9 @@ class DateDirective extends BaseFieldDirective {
|
|
|
1382
1061
|
}
|
|
1383
1062
|
updateView() {
|
|
1384
1063
|
if (!this.shouldRender()) {
|
|
1385
|
-
super.renderEmpty();
|
|
1386
1064
|
return;
|
|
1387
1065
|
}
|
|
1388
|
-
this.renderMetadata(MetadataKind.Open);
|
|
1389
1066
|
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
1390
|
-
this.renderMetadata(MetadataKind.Close);
|
|
1391
1067
|
const field = this.field;
|
|
1392
1068
|
const html = field.editable && this.editable ? field.editable : field.value;
|
|
1393
1069
|
const setDangerously = field.editable && this.editable;
|
|
@@ -1401,7 +1077,7 @@ class DateDirective extends BaseFieldDirective {
|
|
|
1401
1077
|
});
|
|
1402
1078
|
}
|
|
1403
1079
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
1404
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DateDirective, isStandalone: true, selector: "[scDate]", inputs: { format: ["scDateFormat", "format"], timezone: ["scDateTimezone", "timezone"], locale: ["scDateLocale", "locale"], editable: ["scDateEditable", "editable"], field: ["scDate", "field"]
|
|
1080
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DateDirective, isStandalone: true, selector: "[scDate]", inputs: { format: ["scDateFormat", "format"], timezone: ["scDateTimezone", "timezone"], locale: ["scDateLocale", "locale"], editable: ["scDateEditable", "editable"], field: ["scDate", "field"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
1405
1081
|
}
|
|
1406
1082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DateDirective, decorators: [{
|
|
1407
1083
|
type: Directive,
|
|
@@ -1423,9 +1099,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
1423
1099
|
}], field: [{
|
|
1424
1100
|
type: Input,
|
|
1425
1101
|
args: ['scDate']
|
|
1426
|
-
}], emptyFieldEditingTemplate: [{
|
|
1427
|
-
type: Input,
|
|
1428
|
-
args: ['scDateEmptyFieldEditingTemplate']
|
|
1429
1102
|
}] } });
|
|
1430
1103
|
|
|
1431
1104
|
class EditFrameComponent {
|
|
@@ -1520,66 +1193,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
1520
1193
|
type: Input
|
|
1521
1194
|
}] } });
|
|
1522
1195
|
|
|
1523
|
-
/**
|
|
1524
|
-
* Component that renders editing scripts and client data for the current page in Sitecore Editor.
|
|
1525
|
-
* Only renders scripts when Metadata mode is used.
|
|
1526
|
-
*/
|
|
1527
|
-
class EditingScriptsComponent {
|
|
1528
|
-
renderer = inject(Renderer2);
|
|
1529
|
-
stateService = inject(JssStateService);
|
|
1530
|
-
document = inject(DOCUMENT);
|
|
1531
|
-
ngOnInit() {
|
|
1532
|
-
const state = this.stateService.stateValue;
|
|
1533
|
-
const { pageState, editMode, clientData, clientScripts } = state.sitecore?.context || {};
|
|
1534
|
-
// Don't render anything if not in editing mode or not server side
|
|
1535
|
-
if (pageState === LayoutServicePageState.Normal ||
|
|
1536
|
-
pageState === LayoutServicePageState.Preview ||
|
|
1537
|
-
!isServer()) {
|
|
1538
|
-
return;
|
|
1539
|
-
}
|
|
1540
|
-
if (editMode === EditMode.Metadata) {
|
|
1541
|
-
const jssClientData = { ...clientData, ...getJssPagesClientData() };
|
|
1542
|
-
clientScripts?.forEach((src) => {
|
|
1543
|
-
const scriptElement = this.renderer.createElement('script');
|
|
1544
|
-
scriptElement.src = src;
|
|
1545
|
-
this.renderer.appendChild(this.document.body, scriptElement);
|
|
1546
|
-
});
|
|
1547
|
-
Object.keys(jssClientData).forEach((id) => {
|
|
1548
|
-
const scriptElement = this.renderer.createElement('script');
|
|
1549
|
-
scriptElement.id = id;
|
|
1550
|
-
scriptElement.type = 'application/json';
|
|
1551
|
-
scriptElement.innerHTML = JSON.stringify(jssClientData[id]);
|
|
1552
|
-
this.renderer.appendChild(this.document.body, scriptElement);
|
|
1553
|
-
});
|
|
1554
|
-
}
|
|
1555
|
-
}
|
|
1556
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EditingScriptsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1557
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: EditingScriptsComponent, isStandalone: true, selector: "sc-editing-scripts", ngImport: i0, template: '', isInline: true });
|
|
1558
|
-
}
|
|
1559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EditingScriptsComponent, decorators: [{
|
|
1560
|
-
type: Component,
|
|
1561
|
-
args: [{
|
|
1562
|
-
selector: 'sc-editing-scripts',
|
|
1563
|
-
template: '',
|
|
1564
|
-
}]
|
|
1565
|
-
}] });
|
|
1566
|
-
|
|
1567
1196
|
/**
|
|
1568
1197
|
* Injection token for the Sitecore Edge configuration.
|
|
1569
1198
|
*/
|
|
1570
1199
|
const EDGE_CONFIG = new InjectionToken('Sc.edgeConfig');
|
|
1571
1200
|
|
|
1572
|
-
class
|
|
1573
|
-
|
|
1574
|
-
|
|
1201
|
+
class BaseJssState {
|
|
1202
|
+
sitecore;
|
|
1203
|
+
viewBag;
|
|
1204
|
+
}
|
|
1205
|
+
/**
|
|
1206
|
+
* The service that is used to store and retrieve the current state of the app.
|
|
1207
|
+
* Referenced by the SDK to get the current state of the app.
|
|
1208
|
+
*/
|
|
1209
|
+
class JssStateService {
|
|
1210
|
+
transferState = inject(TransferState);
|
|
1211
|
+
_state;
|
|
1212
|
+
constructor() {
|
|
1213
|
+
this._state = new BehaviorSubject({});
|
|
1214
|
+
}
|
|
1575
1215
|
/**
|
|
1576
|
-
*
|
|
1216
|
+
* Observable JSS state to subscribe to
|
|
1577
1217
|
*/
|
|
1578
|
-
|
|
1218
|
+
get state() {
|
|
1219
|
+
return this._state.asObservable();
|
|
1220
|
+
}
|
|
1579
1221
|
/**
|
|
1580
|
-
*
|
|
1222
|
+
* The 'here and now' state value, usable without subscribing
|
|
1581
1223
|
*/
|
|
1582
|
-
|
|
1224
|
+
get stateValue() {
|
|
1225
|
+
return this._state.value;
|
|
1226
|
+
}
|
|
1227
|
+
/**
|
|
1228
|
+
* Set new JSS state
|
|
1229
|
+
* @param {JssState} newState new state
|
|
1230
|
+
*/
|
|
1231
|
+
setState(newState) {
|
|
1232
|
+
this._state.next(newState);
|
|
1233
|
+
}
|
|
1234
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JssStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1235
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JssStateService });
|
|
1236
|
+
}
|
|
1237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JssStateService, decorators: [{
|
|
1238
|
+
type: Injectable
|
|
1239
|
+
}], ctorParameters: () => [] });
|
|
1240
|
+
|
|
1241
|
+
class RichTextDirective extends BaseFieldDirective {
|
|
1242
|
+
editable = true;
|
|
1243
|
+
field;
|
|
1583
1244
|
templateRef = inject(TemplateRef);
|
|
1584
1245
|
renderer = inject(Renderer2);
|
|
1585
1246
|
router = inject(Router);
|
|
@@ -1591,12 +1252,9 @@ class RichTextDirective extends BaseFieldDirective {
|
|
|
1591
1252
|
}
|
|
1592
1253
|
updateView() {
|
|
1593
1254
|
if (!this.shouldRender()) {
|
|
1594
|
-
super.renderEmpty();
|
|
1595
1255
|
return;
|
|
1596
1256
|
}
|
|
1597
|
-
this.renderMetadata(MetadataKind.Open);
|
|
1598
1257
|
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
1599
|
-
this.renderMetadata(MetadataKind.Close);
|
|
1600
1258
|
const field = this.field;
|
|
1601
1259
|
const html = field.editable && this.editable ? field.editable : field.value;
|
|
1602
1260
|
this.viewRef.rootNodes.forEach((node) => {
|
|
@@ -1620,7 +1278,7 @@ class RichTextDirective extends BaseFieldDirective {
|
|
|
1620
1278
|
});
|
|
1621
1279
|
}
|
|
1622
1280
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RichTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
1623
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: RichTextDirective, isStandalone: true, selector: "[scRichText]", inputs: { editable: ["scRichTextEditable", "editable"], field: ["scRichText", "field"]
|
|
1281
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: RichTextDirective, isStandalone: true, selector: "[scRichText]", inputs: { editable: ["scRichTextEditable", "editable"], field: ["scRichText", "field"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
1624
1282
|
}
|
|
1625
1283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RichTextDirective, decorators: [{
|
|
1626
1284
|
type: Directive,
|
|
@@ -1633,23 +1291,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
1633
1291
|
}], field: [{
|
|
1634
1292
|
type: Input,
|
|
1635
1293
|
args: ['scRichText']
|
|
1636
|
-
}], emptyFieldEditingTemplate: [{
|
|
1637
|
-
type: Input,
|
|
1638
|
-
args: ['scRichTextEmptyFieldEditingTemplate']
|
|
1639
1294
|
}] } });
|
|
1640
1295
|
|
|
1641
1296
|
class TextDirective extends BaseFieldDirective {
|
|
1642
1297
|
editable = true;
|
|
1643
1298
|
encode = true;
|
|
1644
1299
|
field;
|
|
1645
|
-
/**
|
|
1646
|
-
* Custom template to render in Pages in Metadata edit mode if field value is empty
|
|
1647
|
-
*/
|
|
1648
|
-
emptyFieldEditingTemplate;
|
|
1649
|
-
/**
|
|
1650
|
-
* Default component to render in Pages in Metadata edit mode if field value is empty and emptyFieldEditingTemplate is not provided
|
|
1651
|
-
*/
|
|
1652
|
-
defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent;
|
|
1653
1300
|
templateRef = inject(TemplateRef);
|
|
1654
1301
|
ngOnChanges(changes) {
|
|
1655
1302
|
if (changes.field || changes.editable || changes.encode) {
|
|
@@ -1659,12 +1306,9 @@ class TextDirective extends BaseFieldDirective {
|
|
|
1659
1306
|
}
|
|
1660
1307
|
updateView() {
|
|
1661
1308
|
if (!this.shouldRender()) {
|
|
1662
|
-
super.renderEmpty();
|
|
1663
1309
|
return;
|
|
1664
1310
|
}
|
|
1665
|
-
this.renderMetadata(MetadataKind.Open);
|
|
1666
1311
|
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
|
|
1667
|
-
this.renderMetadata(MetadataKind.Close);
|
|
1668
1312
|
const field = this.field;
|
|
1669
1313
|
let editable = this.editable;
|
|
1670
1314
|
// can't use editable value if we want to output unencoded
|
|
@@ -1683,7 +1327,7 @@ class TextDirective extends BaseFieldDirective {
|
|
|
1683
1327
|
});
|
|
1684
1328
|
}
|
|
1685
1329
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
1686
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: TextDirective, isStandalone: true, selector: "[scText]", inputs: { editable: ["scTextEditable", "editable"], encode: ["scTextEncode", "encode"], field: ["scText", "field"]
|
|
1330
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: TextDirective, isStandalone: true, selector: "[scText]", inputs: { editable: ["scTextEditable", "editable"], encode: ["scTextEncode", "encode"], field: ["scText", "field"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
1687
1331
|
}
|
|
1688
1332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TextDirective, decorators: [{
|
|
1689
1333
|
type: Directive,
|
|
@@ -1699,9 +1343,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
1699
1343
|
}], field: [{
|
|
1700
1344
|
type: Input,
|
|
1701
1345
|
args: ['scText']
|
|
1702
|
-
}], emptyFieldEditingTemplate: [{
|
|
1703
|
-
type: Input,
|
|
1704
|
-
args: ['scTextEmptyFieldEditingTemplate']
|
|
1705
1346
|
}] } });
|
|
1706
1347
|
|
|
1707
1348
|
/**
|
|
@@ -1975,8 +1616,7 @@ class JssModule {
|
|
|
1975
1616
|
RichTextDirective,
|
|
1976
1617
|
MissingComponentComponent,
|
|
1977
1618
|
HiddenRenderingComponent,
|
|
1978
|
-
EditFrameComponent,
|
|
1979
|
-
EditingScriptsComponent], exports: [FileDirective,
|
|
1619
|
+
EditFrameComponent], exports: [FileDirective,
|
|
1980
1620
|
ImageDirective,
|
|
1981
1621
|
DateDirective,
|
|
1982
1622
|
LinkDirective,
|
|
@@ -1990,8 +1630,7 @@ class JssModule {
|
|
|
1990
1630
|
PlaceholderLoadingDirective,
|
|
1991
1631
|
RichTextDirective,
|
|
1992
1632
|
TextDirective,
|
|
1993
|
-
EditFrameComponent
|
|
1994
|
-
EditingScriptsComponent] });
|
|
1633
|
+
EditFrameComponent] });
|
|
1995
1634
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JssModule, imports: [CommonModule,
|
|
1996
1635
|
PlaceholderComponent,
|
|
1997
1636
|
EditFrameComponent] });
|
|
@@ -2018,7 +1657,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
2018
1657
|
MissingComponentComponent,
|
|
2019
1658
|
HiddenRenderingComponent,
|
|
2020
1659
|
EditFrameComponent,
|
|
2021
|
-
EditingScriptsComponent,
|
|
2022
1660
|
],
|
|
2023
1661
|
exports: [
|
|
2024
1662
|
FileDirective,
|
|
@@ -2036,7 +1674,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
2036
1674
|
RichTextDirective,
|
|
2037
1675
|
TextDirective,
|
|
2038
1676
|
EditFrameComponent,
|
|
2039
|
-
EditingScriptsComponent,
|
|
2040
1677
|
],
|
|
2041
1678
|
}]
|
|
2042
1679
|
}] });
|
|
@@ -2045,5 +1682,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
2045
1682
|
* Generated bundle index. Do not edit.
|
|
2046
1683
|
*/
|
|
2047
1684
|
|
|
2048
|
-
export { BaseJssState, ComponentNameAndType, DYNAMIC_COMPONENT, DateDirective, EDGE_CONFIG, EditFrameComponent,
|
|
1685
|
+
export { BaseJssState, ComponentNameAndType, DYNAMIC_COMPONENT, DateDirective, EDGE_CONFIG, EditFrameComponent, FileDirective, GenericLinkDirective, HiddenRenderingComponent, ImageDirective, JssModule, JssStateService, LinkDirective, PlaceholderComponent, PlaceholderLoadingDirective, RenderComponentComponent, RenderEachDirective, RenderEmptyDirective, RichTextDirective, RouterLinkDirective, TextDirective, isRawRendering };
|
|
2049
1686
|
//# sourceMappingURL=sitecore-jss-sitecore-jss-angular.mjs.map
|