All files / src/app/shared/cms/components/content-design-view-wrapper content-design-view-wrapper.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (isDesignViewMode && type) {
<div
  class="design-view-wrapper"
  [ngClass]="[
    type,
    (isPageletSelected$ | async) ? 'pagelet-selected' : '',
    (isPageletPreviewed$ | async) ? 'pagelet-previewed' : ''
  ]"
  [ishScroll]="shouldScroll$ | async"
  scrollContainer="root"
  [scrollDuration]="500"
  [scrollSpacing]="50"
  (mouseenter)="onPageletHover()"
  (mouseleave)="onPageletLeave()"
>
  <div class="design-view-wrapper-actions">
    @switch (type) {
    <!-- pagelet -->
    @case ('pagelet') { @if (pagelet$ | async; as pagelet) {
    <button
      type="button"
      (click)="triggerAction(pagelet.id, 'pageletEdit')"
      class="btn"
      title="{{ ('designview.edit.link.title' | translate) + (pagelet.displayName ? ' ' + pagelet.displayName : '') }}"
    >
      <i class="bi bi-pencil-fill"></i>
    </button>
    <!--
            <button
              (click)="triggerAction(pagelet.id, 'pageletDelete')"
              class="btn"
              title="{{ 'designview.delete.link.title' | translate }}"
              >
              <i class="bi bi-trash-fill"></i>
            </button>
            -->
    } }
    <!-- slot -->
    @case ('slot') {
    <div class="name">{{ pagelet.slot(this.slotId).displayName }}</div>
    <button
      type="button"
      (click)="triggerAction(this.slotId, 'slotAdd')"
      class="btn"
      title="{{ 'designview.add.link.title' | translate }}"
    >
      <i class="bi bi-plus"></i>
    </button>
    }
    <!-- include -->
    @case ('include') {
    <div class="name">{{ include.displayName }}</div>
    <button
      type="button"
      (click)="triggerAction(include.id, 'includeAdd')"
      class="btn"
      title="{{ 'designview.add.link.title' | translate }}"
    >
      <i class="bi bi-plus"></i>
    </button>
    } }
  </div>
  <ng-container *ngTemplateOutlet="cmsOutlet" />
</div>
} @else {
<ng-container *ngTemplateOutlet="cmsOutlet" />
}
 
<ng-template #cmsOutlet>
  <ng-content />
</ng-template>