@rxap/schematic-angular 16.2.0-dev.6 → 16.2.0-dev.60

package/src/schematics/accordion/accordion-component/files/component/__componentName__.component.html.template

@@ -1,94 +0,0 @@
-<ng-template #errorTemplate let-error let-refresh="refresh">
-  <rxap-data-source-error [error]="error" [refresh]="refresh"></rxap-data-source-error>
-</ng-template>
-<div *rxapDataSource="let accordion from accordionDataSource; errorTemplate: errorTemplate" class="flex flex-col gap-y-6">
-  <% if (header) { %><<%= prefix %>-accordion-header [data]="accordion"></<%= prefix %>-accordion-header>
-  <ng-template #divider>
-    <mat-divider></mat-divider>
-  </ng-template>
-  <mat-progress-bar *ngIf="accordionDataSource.loading$ | async; else divider" mode="indeterminate"></mat-progress-bar>
-  <% } else { %>
-  <mat-progress-bar *ngIf="accordionDataSource.loading$ | async" mode="indeterminate"></mat-progress-bar>
-  <% } %>
-  <mat-accordion
-    <% if (persistent && persistent.key) { %>rxapPersistentAccordion="<%= persistent.key %>"<% } %>
-    <% if (persistent && persistent.property) { %>[rxapPersistentAccordion]="accordion.<%= persistent.property.name %>"<% } %>
-    <% if (multiple) { %>multi<% } %>
-    >
-    <% for (let index = 0; index < itemList.length; index++) { %>
-    <% item = itemList[index] %>
-    <% if (item.type === 'switch') { %>
-    <% if (item.permission) { %><ng-template rxapIfHasPermission="<%= item.permission %>"><% } %>
-    <ng-container [ngSwitch]="accordion.<%= item.switch.property.name %>">
-      <% for (const caseItem of item.switch.case) { %>
-      <% if (item.switch.property.type === 'string') { %>
-      <ng-template [ngSwitchCase]="'<%= caseItem.test %>'">
-      <% } else { %>
-      <ng-template [ngSwitchCase]="<%= caseItem.test %>">
-      <% } %>
-        <% for (const innerItem of caseItem.itemList) { %>
-          <% if (innerItem.permission) { %><ng-template rxapIfHasPermission="<%= innerItem.permission %>"><% } %>
-          <mat-expansion-panel>
-
-            <mat-expansion-panel-header>
-              <mat-panel-title i18n><%= innerItem.title %></mat-panel-title>
-              <% if (innerItem.description) { %>
-              <mat-panel-description i18n><%= innerItem.description %></mat-panel-description>
-              <% } %>
-            </mat-expansion-panel-header>
-
-            <ng-template matExpansionPanelContent>
-              <<%= prefix %>-<%= innerItem.name %>-panel></<%= prefix %>-<%= innerItem.name %>-panel>
-            </ng-template>
-
-          </mat-expansion-panel>
-          <% if (innerItem.permission) { %></ng-template><% } %>
-        <% } %>
-      </ng-template>
-      <% } %>
-      <% if (item.switch.defaultCase) { %>
-      <ng-template ngSwitchDefault>
-      <% for (const innerItem of item.switch.defaultCase.itemList) { %>
-        <% if (innerItem.permission) { %><ng-template rxapIfHasPermission="<%= innerItem.permission %>"><% } %>
-        <mat-expansion-panel>
-
-          <mat-expansion-panel-header>
-            <mat-panel-title i18n><%= innerItem.title %></mat-panel-title>
-            <% if (innerItem.description) { %>
-            <mat-panel-description i18n><%= innerItem.description %></mat-panel-description>
-            <% } %>
-          </mat-expansion-panel-header>
-
-          <ng-template matExpansionPanelContent>
-            <<%= prefix %>-<%= innerItem.name %>-panel></<%= prefix %>-<%= innerItem.name %>-panel>
-          </ng-template>
-
-        </mat-expansion-panel>
-        <% if (innerItem.permission) { %></ng-template><% } %>
-      <% } %>
-      </ng-template>
-      <% } %>
-    </ng-container>
-    <% if (item.permission) { %></ng-template><% } %>
-    <% } else { %>
-    <% if (item.permission) { %><ng-template rxapIfHasPermission="<%= item.permission %>"><% } %>
-    <mat-expansion-panel>
-
-      <mat-expansion-panel-header>
-        <mat-panel-title i18n><%= item.title %></mat-panel-title>
-        <% if (item.description) { %>
-        <mat-panel-description i18n><%= item.description %></mat-panel-description>
-        <% } %>
-      </mat-expansion-panel-header>
-
-      <ng-template matExpansionPanelContent>
-        <<%= prefix %>-<%= item.name %>-panel></<%= prefix %>-<%= item.name %>-panel>
-      </ng-template>
-
-    </mat-expansion-panel>
-    <% if (item.permission) { %></ng-template><% } %>
-    <% } %>
-    <% } %>
-    <!-- NEXT_INDEX[<%= itemList.length %>] -->
-  </mat-accordion>
-</div>

package/src/schematics/accordion/accordion-component/files/header-component/accordion-header.component.html.template

@@ -1,10 +0,0 @@
-<rxap-navigate-back-button>
-  <ng-container>
-    <% if (header.title) { %>
-    <h1><%= header.title %></h1>
-    <% } %>
-    <% if (header.property) { %>
-    <h1>{{data.<%= header.property.name %>}}</h1>
-    <% } %>
-  </ng-container>
-</rxap-navigate-back-button>

package/src/schematics/data-grid-component/files/form/__componentName__.component.html.template

@@ -1,42 +0,0 @@
-<mat-card>
-  <% if (title) { %>
-  <mat-card-header>
-    <mat-card-title></mat-card-title>
-    <% if (subtitle) { %><mat-card-subtitle></mat-card-subtitle><% } %>
-  </mat-card-header>
-  <% } %>
-  <mat-card-content>
-    <div class="p-4">
-      <form #form="rxapForm" rxapForm>
-        <% if (collection) { %>
-        <rxap-data-grid [data]="data" mode="form">
-        <% } else { %>
-        <rxap-data-grid [dataSource]="dataGridDataSource" mode="form">
-        <% } %>
-        <% for (const item of itemList) { %>
-          <ng-container rxapDataGridRowDef="<%= item.name %>">
-            <% if (item.header) { %>
-            <th *rxapDataGridHeaderCellDef i18n><%= item.header %></th>
-            <% } %>
-            <ng-template rxapDataGridEditCellDef>
-              <% if (item.type === 'string') { %>
-              <mat-form-field class="w-full">
-                <input matInput formControlName="<%= item.name %>">
-              </mat-form-field>
-              <% } else if (item.type === 'number') { %>
-              <mat-form-field class="w-full">
-                <input matInput formControlName="<%= item.name %>" type="number">
-              </mat-form-field>
-              <% } else if (item.type === 'boolean') { %>
-              <mat-slide-toggle formControlName="<%= item.name %>"></mat-slide-toggle>
-              <% } else { %>
-              <!-- TODO: <%= item.name %> -->
-              <% } %>
-            </ng-template>
-          </ng-container>
-        <% } %>
-        </rxap-data-grid>
-      </form>
-    </div>
-  </mat-card-content>
-</mat-card>

package/src/schematics/data-grid-component/files/plain/__componentName__.component.html.template

@@ -1,25 +0,0 @@
-<mat-card>
-  <% if (title) { %>
-  <mat-card-header>
-    <mat-card-title></mat-card-title>
-    <% if (subtitle) { %><mat-card-subtitle></mat-card-subtitle><% } %>
-  </mat-card-header>
-  <% } %>
-  <mat-card-content>
-    <div class="p-4">
-      <% if (collection) { %>
-      <rxap-data-grid [data]="data">
-      <% } else { %>
-      <rxap-data-grid [dataSource]="dataGridDataSource">
-      <% } %>
-        <% for (const item of itemList) { %>
-        <ng-container rxapDataGridRowDef="<%= item.name %>">
-          <% if (item.header) { %>
-          <th *rxapDataGridHeaderCellDef i18n><%= item.header %></th>
-          <% } %>
-        </ng-container>
-        <% } %>
-      </rxap-data-grid>
-    </div>
-  </mat-card-content>
-</mat-card>

package/src/schematics/table/table-component/files/component/__componentName__.component.html.template

@@ -1,299 +0,0 @@
-<div class="flex flex-col gap-y-4 m-4">
-  <% if (hasNavigationBackHeader) { %>
-  <rxap-navigate-back-button>
-    <h1 i18n><%= title %></h1>
-  </rxap-navigate-back-button>
-  <mat-divider></mat-divider>
-  <% } %>
-
-  <div class="table-card-container flex flex-col">
-    <mat-card>
-      <mat-progress-bar
-        rxapCardProgressBar
-        [loading$]="tableDataSourceDirective.loading$"
-      ></mat-progress-bar>
-      <mat-card-header class="min-h-full h-12<% if (!headerButton && hasWithoutTitle) { %> justify-end<% } %>">
-      <% if (!hasWithoutTitle) { %>
-      <mat-card-title i18n><%= title %></mat-card-title>
-      <% } %>
-      <% if (headerButton) { %>
-      <button
-        mat-card-avatar
-        mat-mini-fab
-        color="primary"
-        matTooltip
-        [disabled]="tableDataSourceDirective.hasError$ | async"
-        [rxapTableHeaderButton]="tableDataSourceDirective"
-        <% if (headerButton.permission) { %>rxapHasEnablePermission="<%= headerButton.permission %>"<% } %>
-      >
-        <% if (headerButton.icon) { %><mat-icon><%= headerButton.icon %></mat-icon><% } else if (headerButton.svgIcon) { %><mat-icon svgIcon="<%= headerButton.svgIcon %>"></mat-icon><% } else { %><mat-icon>add</mat-icon><% } %>
-      </button>
-      <mat-card-subtitle i18n><%= headerButton.label %></mat-card-subtitle>
-      <% } %>
-      <rxap-table-column-menu matCard #rxapTableColumns="rxapTableColumns" <% if (!headerButton && hasWithoutTitle) { %>inline<% } %>>
-        <% if (selectColumn) { %>
-        <rxap-table-column-option hidden name="select">
-          <ng-container i18n>Select</ng-container>
-        </rxap-table-column-option>
-        <% } %>
-        <% for (const column of columnList) { %>
-        <rxap-table-column-option
-          name="<%= column.name %>"<% if (column.active) { %><%= ' active' %><% } %><% if (column.hidden) { %><%= ' hidden' %><% } %><% if (column.inactive) { %><%= ' inactive' %><% } %><% if (column.show) { %><%= ' show' %><% } %>>
-          <ng-container i18n><%= column.title %></ng-container>
-        </rxap-table-column-option>
-        <% } %>
-        <% if (actionList.length) { %>
-        <rxap-table-column-option hidden name="actions">
-          <ng-container i18n>Actions</ng-container>
-        </rxap-table-column-option>
-        <% } %>
-        <% if (hasShowArchivedSlide) { %>
-        <mat-divider></mat-divider>
-        <span mat-menu-item>
-          <rxap-table-show-archived-slide
-            [paginator]="paginator"
-          ></rxap-table-show-archived-slide>
-        </span>
-        <% } %>
-      </rxap-table-column-menu>
-       </mat-card-header>
-
-      <mat-card-content>
-        <rxap-data-source-error
-          [loading]="tableDataSourceDirective.loading$"
-          [error]="tableDataSourceDirective.dataSource?.error$"
-          *ngIf="tableDataSourceDirective.hasError$ | async"
-          [refresh]="tableDataSourceDirective.retry">
-        </rxap-data-source-error>
-        <div class="table-scroll-container mt-4 overflow-x-auto overscroll-auto">
-        <table
-          [ngClass]="{ 'hidden': tableDataSourceDirective.hasError$ | async }"
-          [paginator]="paginator"
-          matSort
-          mat-table
-          #tableDataSourceDirective="rxapTableDataSource"
-          rxapTableDataSource
-          [parameters]="parameters"
-          id="<%= name %>"
-          <% if (hasColumnWithFilter) { %>rxap-filter-header-row<% } %>
-        >
-          <!-- region columns -->
-
-          <% if (selectColumn) { %>
-          <ng-container matColumnDef="select" sticky>
-            <th mat-header-cell rxap-checkbox-header-cell *matHeaderCellDef></th>
-            <td
-              mat-cell
-              rxap-checkbox-cell
-              [element]="element"
-              *matCellDef="let element"
-            ></td>
-          </ng-container>
-          <% } %>
-          <% if (actionList.length) { %>
-          <ng-container matColumnDef="actions" stickyEnd>
-            <th mat-header-cell *matHeaderCellDef>
-            <% if (selectColumn) { %>
-              <div class="flex flex-row" *rxapSelectedRows="let selected">
-              <% for (const action of actionList) { %>
-              <% if (action.inHeader) { %>
-                <button
-                  rxapTableRowHeaderAction="<%= action.type %>"
-                  mat-icon-button
-                   <% if (action.color) { %>color="<%= action.color %>"<% } %>
-                   <% if (action.cssClass) { %>class="<%= action.cssClass %>"<% } %>
-                  *ngIf="selected | rxapRowActionCheck:'<%= action.type %>'"
-                  <% if (action.permission) { %>rxapHasEnablePermission="<%= action.permission %>"<% } %>
-                  matTooltip
-                >
-                  <% if (action.icon) { %><mat-icon><%= action.icon %></mat-icon><% } else if (action.svgIcon) { %><mat-icon svgIcon="<%= action.svgIcon %>"></mat-icon><% } else { %><mat-icon><%= action.type %></mat-icon><% } %>
-                  <mat-progress-bar
-                    *rxapTableRowActionExecuting
-                    mode="indeterminate"
-                  ></mat-progress-bar>
-                </button>
-              <% } %>
-              <% } %>
-              </div>
-            <% } %>
-            </th>
-
-            <td mat-cell *matCellDef="let element">
-              <div class="flex flex-row">
-                <% for (const action of actionList) { %>
-                <button
-                  rxapTableRowAction="<%= action.type %>"
-                  [element]="element"
-                   <% if (action.color) { %>color="<%= action.color %>"<% } %>
-                   <% if (action.cssClass) { %>class="<%= action.cssClass %>"<% } %>
-                  mat-icon-button
-                  *ngIf="element | rxapRowActionCheck:'<%= action.type %>'"
-                  <% if (action.permission) { %>rxapHasEnablePermission="<%= action.permission %>"<% } %>
-                  matTooltip
-                >
-                  <% if (action.icon) { %><mat-icon><%= action.icon %></mat-icon><% } else if (action.svgIcon) { %><mat-icon svgIcon="<%= action.svgIcon %>"></mat-icon><% } else { %><mat-icon><%= action.type %></mat-icon><% } %>
-                  <mat-progress-bar
-                    *rxapTableRowActionExecuting
-                    mode="indeterminate"
-                  ></mat-progress-bar>
-                </button>
-                <% } %>
-              </div>
-            </td>
-          </ng-container>
-          <% } %>
-          <% for (const column of columnList) { %>
-          <% if (column.role === 'copy-to-clipboard') { %>
-          <ng-container matColumnDef="<%= column.name %>">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header>
-              <ng-container i18n><%= column.title %></ng-container>
-            </th>
-            <td *matCellDef="let element" mat-cell <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-copy-to-clipboard-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === 'link') { %>
-          <ng-container matColumnDef="<%= column.name %>">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header>
-              <ng-container i18n><%= column.title %></ng-container>
-            </th>
-            <td *matCellDef="let element" mat-cell <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-link-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === 'date') { %>
-          <ng-container matColumnDef="<%= column.name %>">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header>
-              <ng-container i18n><%= column.title %></ng-container>
-            </th>
-
-            <td *matCellDef="let element" mat-cell <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-date-cell]="element?.<%= column.propertyPath %>" format="dd.MM.yyyy HH:mm:ss"></td>
-          </ng-container>
-          <% } else if (column.role === 'boolean') { %>
-          <ng-container matColumnDef="<%= column.name %>">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header>
-              <ng-container i18n><%= column.title %></ng-container>
-            </th>
-
-            <td *matCellDef="let element" mat-cell <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-boolean-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === 'icon') { %>
-          <ng-container matColumnDef="<%= column.name %>">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header>
-              <ng-container i18n><%= column.title %></ng-container>
-            </th>
-
-            <td *matCellDef="let element" mat-cell <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> [rxap-icon-cell]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else if (column.role === 'component') { %>
-          <ng-container matColumnDef="<%= column.name %>">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header>
-              <ng-container i18n><%= column.title %></ng-container>
-            </th>
-
-            <td *matCellDef="let element" mat-cell <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> <%= prefix %>-<%= column.name %>-cell [element]="element" [value]="element?.<%= column.propertyPath %>"></td>
-          </ng-container>
-          <% } else { %>
-          <ng-container matColumnDef="<%= column.name %>">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header>
-              <ng-container i18n><%= column.title %></ng-container>
-            </th>
-
-            <td mat-cell <% if (column.cssClass) { %>class="<%= column.cssClass %>"<% } %> *matCellDef="let element">
-            <% if (column.template) { %>
-            <%= column.template %>
-            <% } else if (column.pipeList.length) { %>
-            {{ element?.<%= column.propertyPath %><% for (const pipe of column.pipeList) { %> | <%= pipe.name %><% } %> }}
-            <% } else { %>
-            {{ element?.<%= column.propertyPath %> }}
-            <% } %>
-            </td>
-          </ng-container>
-          <% } %>
-          <% } %>
-
-          <!-- endregion -->
-          <% if (hasColumnWithFilter) { %>
-          <!-- region filter columns -->
-          <% if (selectColumn) { %>
-          <ng-container matColumnDef="filter_select" sticky>
-            <th mat-header-cell *matHeaderCellDef></th>
-          </ng-container>
-          <% } %>
-          <% if (actionList.length) { %>
-          <ng-container matColumnDef="filter_actions" stickyEnd>
-            <th mat-header-cell *matHeaderCellDef></th>
-          </ng-container>
-          <% } %>
-
-          <% for (const column of columnList) { %>
-          <ng-container matColumnDef="filter_<%= column.name %>">
-            <th mat-header-cell *matHeaderCellDef>
-              <% if (column.hasFilter) { %>
-              <% if (column.type === 'boolean') { %>
-              <mat-checkbox
-                indeterminate
-                parentControlContainer
-                formControlName="<%= camelize(column.name) %>"
-              >
-                <ng-container i18n><%= column.title %></ng-container>
-              </mat-checkbox>
-              <% } else { %>
-              <mat-form-field class="w-full pt-3">
-                <mat-label i18n><%= column.title %></mat-label>
-                <input
-                  matInput
-                  i18n-placeholder
-                  placeholder="Enter Filter"
-                  parentControlContainer
-                  formControlName="<%= camelize(column.name) %>"
-                />
-                <button matSuffix rxapInputClearButton mat-icon-button>
-                  <mat-icon>clear</mat-icon>
-                </button>
-              </mat-form-field>
-              <% } %>
-              <% } %>
-            </th>
-          </ng-container>
-          <% } %>
-
-          <!-- endregion -->
-          <tr
-            class="rxap-filter-header"
-            mat-header-row
-            *matHeaderRowDef="
-              rxapTableColumns.displayColumns | toFilterColumnNames
-            "
-          ></tr>
-          <% } %>
-
-          <tr
-            mat-header-row
-            *matHeaderRowDef="rxapTableColumns.displayColumns"
-          ></tr>
-
-          <tr
-            [@rowsAnimation]=""
-            mat-row
-            [ngClass]="{ 'rxap-row-odd !bg-neutral-200 dark:!bg-neutral-600': odd, 'rxap-row-even': even }"
-                        class="hover:!bg-neutral-400 dark:hover:!bg-neutral-800"
-            *matRowDef="
-              let element;
-              columns: rxapTableColumns.displayColumns;
-              let odd = odd;
-              let even = even
-            "
-          ></tr>
-        </table>
-        </div>
-      </mat-card-content>
-
-      <mat-card-footer
-      ><mat-paginator
-        [ngClass]="{ 'hidden': tableDataSourceDirective.hasError$ | async }"
-        rxapPersistent
-        [pageSizeOptions]="[5,10,25,50,100]"
-        [pageSize]="10"
-        #paginator="matPaginator"
-      ></mat-paginator
-      ></mat-card-footer>
-    </mat-card>
-  </div>
-</div>