80 lines
2.6 KiB
HTML
80 lines
2.6 KiB
HTML
<!-- Component Template -->
|
|
<ng-container *ngIf="getValue(wrapWithCard) | async; else componentsRef">
|
|
<x-card
|
|
class="x-card"
|
|
[color]="getValue(cardColor) | async"
|
|
[ngClass]="getValue(cssClass) | async"
|
|
[isInPage]="getValue(isInPage) | async"
|
|
[showHeader]="
|
|
(notEmptyValue(cardTitle) | async) ||
|
|
(notEmptyValue(cardSubTitle) | async)
|
|
"
|
|
[title]="getResourceValue(cardTitle) | async"
|
|
[showFooter]="getValue(cardShowFooter) | async"
|
|
[showActions]="getValue(cardShowActions) | async"
|
|
[subTitle]="getResourceValue(cardSubTitle) | async"
|
|
[foregroundColor]="getValue(cardForegroundColor) | async"
|
|
>
|
|
<!-- Content -->
|
|
<ng-container *ngTemplateOutlet="componentsRef"></ng-container>
|
|
|
|
<!-- Actions -->
|
|
<div class="x-actions" actions *ngIf="getValue(cardShowActions) | async">
|
|
<ng-content select="[actions]"></ng-content>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="x-footer" footer *ngIf="getValue(cardShowFooter) | async">
|
|
<ng-content select="[footer]"></ng-content>
|
|
</div>
|
|
</x-card>
|
|
</ng-container>
|
|
|
|
<!-- Component's itSelf Template -->
|
|
<ng-template #componentsRef>
|
|
<div
|
|
class="x-component-wrapper"
|
|
[class.mobile]="isMobileUi$ | async"
|
|
[ngClass]="getValue(cssClass) | async"
|
|
>
|
|
<!-- Toolbar -->
|
|
<x-action-bar
|
|
[color]="actionBarColor"
|
|
[cssClass]="actionBarCssClass"
|
|
[actionProvider]="actionBarActionProvider"
|
|
[foregroundColor]="actionBarForegroundColor"
|
|
(actionFired)="handleActionBarActionFired($event)"
|
|
*ngIf="
|
|
(getValue(showActionBar) | async) &&
|
|
(hasChildValue(actionBarActions) | async) &&
|
|
(hasChildValue(availableActionBarItems) | async)
|
|
"
|
|
[actions]="getArrayValue(actionBarActions) | async"
|
|
></x-action-bar>
|
|
|
|
<!-- Tabs -->
|
|
<ng-container *ngIf="(countChildsValue(Sessions) | async) > 1">
|
|
<x-tabs
|
|
[loopTabs]="true"
|
|
[swipable]="false"
|
|
[actionProvider]="tabsActionProvider"
|
|
[alignTabs]="getValue(alignTabs) | async"
|
|
[headerPosition]="TabHeaderPositions.ABOVE"
|
|
[tabIndicatorColor]="ColorNames.Transparent"
|
|
[headerColor]="getValue(tabHeaderColor) | async"
|
|
[activeTabColor]="getValue(activeTabColor) | async"
|
|
(selectedTabChange)="handleTabsSelectedTabChanged($event)"
|
|
>
|
|
<x-tab *ngFor="let tab of Sessions">
|
|
<div x-tab-label>
|
|
{{ tab.name }}
|
|
</div>
|
|
</x-tab>
|
|
</x-tabs>
|
|
</ng-container>
|
|
|
|
<!-- Editor -->
|
|
<div class="code-editor" #codeEditor></div>
|
|
</div>
|
|
</ng-template>
|