@taon-dev/ui 21.0.12 → 21.0.14

package/ts-source/browser-code-prod/taon-admin-layout/taon-admin-layout.component.html

@@ -0,0 +1,240 @@
+<!--
+==============================================================================
+ TAON READONLY SOURCE
+ DO NOT MODIFY THIS FILE.
+ Changes may be overwritten.
+==============================================================================
+-->
+
+<div
+  #layout
+  class="admin-layout"
+  [class.admin-layout-dialog]="isDialogMode"
+  [style.width.px]="layoutWidth() || null"
+  [style.height.px]="layoutHeight() || null">
+  
+  
+  
+
+  <header class="admin-header">
+    <button
+      mat-icon-button
+      type="button"
+      aria-label="Toggle admin menu"
+      class="admin-menu-button"
+      (click)="toggleAside()">
+      <mat-icon>menu</mat-icon>
+    </button>
+
+    <div class="admin-header-content">
+      <ng-content select="[header]" />
+    </div>
+  </header>
+
+  
+  
+  
+
+  <div class="admin-body">
+    
+    
+    
+
+    @if (asideOpened()) {
+      <div
+        class="admin-aside-backdrop"
+        (click)="closeAside()"></div>
+    }
+
+    
+    
+    
+
+    <aside
+      class="admin-aside"
+      [class.admin-aside-open]="asideOpened()">
+      
+      
+      
+
+      <div class="admin-aside-content">
+        <mat-accordion class="admin-menu">
+          @for (level1 of routes; track level1.path) {
+            @if (menuContext.isVisible(level1)) {
+              @if (isExpandable(level1)) {
+                <mat-expansion-panel
+                  [disabled]="menuContext.isDisabled(level1)"
+                  [expanded]="
+                    isLevel1Active(level1) && !menuContext.isDisabled(level1)
+                  "
+                  (expandedChange)="panelExpanded(level1, $event)">
+                  <mat-expansion-panel-header
+                    [class.admin-menu-item-disabled]="
+                      menuContext.isDisabled(level1)
+                    "
+                    [matTooltip]="menuContext.disabledTooltip(level1)"
+                    (click)="level1Clicked(level1)">
+                    <mat-panel-title>
+                      <div class="admin-menu-item">
+                        @if (icon(level1)) {
+                          <mat-icon
+                            [ngStyle]="{
+                              color: color(level1),
+                            }">
+                            {{ icon(level1) }}
+                          </mat-icon>
+                        }
+
+                        <span
+                          [class.font-semibold]="isLevel1Active(level1)"
+                          [ngStyle]="{
+                            color: color(level1),
+                          }">
+                          {{ label(level1) }}
+                        </span>
+                      </div>
+                    </mat-panel-title>
+                  </mat-expansion-panel-header>
+
+                  <div class="admin-level2">
+                    @if (isLoading(level1)) {
+                      <div class="admin-loading">Loading...</div>
+                    } @else {
+                      @for (
+                        level2 of getLevel2Routes(level1);
+                        track level2.path
+                      ) {
+                        @if (menuContext.isVisible(level2)) {
+                          <a
+                            class="admin-level2-item"
+                            role="button"
+                            [attr.tabindex]="
+                              menuContext.isDisabled(level2) ? -1 : 0
+                            "
+                            [attr.aria-disabled]="
+                              menuContext.isDisabled(level2)
+                            "
+                            [class.admin-menu-item-disabled]="
+                              menuContext.isDisabled(level2)
+                            "
+                            [matTooltip]="menuContext.disabledTooltip(level2)"
+                            [class.admin-level2-item-active]="
+                              isLevel2Active(level1, level2)
+                            "
+                            (click)="level2Clicked(level1, level2)"
+                            (keydown.enter)="level2Clicked(level1, level2)"
+                            (keydown.space)="
+                              $event.preventDefault();
+                              level2Clicked(level1, level2)
+                            ">
+                            @if (icon(level2)) {
+                              <mat-icon
+                                [ngStyle]="{
+                                  color: color(level2),
+                                }">
+                                {{ icon(level2) }}
+                              </mat-icon>
+                            }
+
+                            <span
+                              [ngStyle]="{
+                                color: color(level2),
+                              }">
+                              {{ label(level2) }}
+                            </span>
+                          </a>
+                        }
+                      }
+                    }
+                  </div>
+                </mat-expansion-panel>
+              } @else {
+                <a
+                  class="admin-level1-item"
+                  role="button"
+                  [attr.tabindex]="menuContext.isDisabled(level1) ? -1 : 0"
+                  [attr.aria-disabled]="menuContext.isDisabled(level1)"
+                  [class.admin-menu-item-disabled]="
+                    menuContext.isDisabled(level1)
+                  "
+                  [matTooltip]="menuContext.disabledTooltip(level1)"
+                  [class.admin-level1-item-active]="isLevel1Active(level1)"
+                  (click)="level1Clicked(level1)"
+                  (keydown.enter)="level1Clicked(level1)"
+                  (keydown.space)="
+                    $event.preventDefault(); level1Clicked(level1)
+                  ">
+                  @if (icon(level1)) {
+                    <mat-icon
+                      [ngStyle]="{
+                        color: color(level1),
+                      }">
+                      {{ icon(level1) }}
+                    </mat-icon>
+                  }
+
+                  <span
+                    [ngStyle]="{
+                      color: color(level1),
+                    }">
+                    {{ label(level1) }}
+                  </span>
+                </a>
+              }
+            }
+          }
+        </mat-accordion>
+      </div>
+
+      
+      
+      
+
+      <footer class="admin-aside-footer">
+        <ng-content select="[asideFooter]" />
+      </footer>
+    </aside>
+
+    
+    
+    
+
+    <main class="admin-main">
+      
+      
+      
+
+      <taon-admin-page-tabs
+        class="admin-tabs"
+        [routes]="routes"
+        [basePath]="basePath"
+        [outlet]="outlet" />
+
+      
+      
+      
+
+      <div class="admin-content">
+        <router-outlet />
+      </div>
+
+      
+      
+      
+
+      <footer class="admin-content-footer">
+        <ng-content select="[contentFooter]" />
+      </footer>
+    </main>
+  </div>
+
+  
+  
+  
+
+  @if (isDialogMode) {
+    <div
+      class="admin-resize-handle"
+      (pointerdown)="startResize($event)"></div>
+  }
+</div>

package/ts-source/browser-code-prod/taon-admin-layout/taon-admin-layout.component.scss

@@ -0,0 +1,331 @@
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+
+
+
+.admin-layout {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  min-width: 0;
+  min-height: 0;
+
+  overflow: hidden;
+
+  background: white;
+}
+
+.admin-layout-dialog {
+  min-width: 500px;
+  min-height: 350px;
+}
+
+
+
+
+.admin-header {
+  display: flex;
+  align-items: center;
+
+  flex: 0 0 64px;
+  height: 64px;
+
+  border-bottom: 1px solid var(--mat-sys-outline-variant);
+  background: white;
+}
+
+.admin-menu-button {
+  flex: 0 0 auto;
+  margin-left: 8px;
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.admin-header-content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+
+
+
+.admin-body {
+  position: relative;
+
+  display: flex;
+
+  flex: 1 1 auto;
+
+  min-width: 0;
+  min-height: 0;
+
+  overflow: hidden;
+}
+
+
+
+
+.admin-aside {
+  position: absolute;
+
+  top: 0;
+  bottom: 0;
+  left: 0;
+
+  z-index: 30;
+
+  display: flex;
+  flex-direction: column;
+
+  width: 288px;
+  min-height: 0;
+
+  overflow: hidden;
+
+  background: white;
+  border-right: 1px solid var(--mat-sys-outline-variant);
+
+  transform: translateX(-100%);
+
+  transition:
+    transform 200ms ease,
+    width 200ms ease;
+}
+
+.admin-aside-open {
+  transform: translateX(0);
+}
+
+.admin-aside-content {
+  flex: 1 1 auto;
+
+  min-height: 0;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.admin-aside-footer {
+  flex: 0 0 auto;
+
+  padding: 12px;
+
+  border-top: 1px solid var(--mat-sys-outline-variant);
+  background: white;
+}
+
+
+
+
+.admin-menu {
+  display: block;
+
+  mat-expansion-panel {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+
+    border-radius: 0 !important;
+    box-shadow: none !important;
+
+    border-bottom: 1px solid var(--mat-sys-outline-variant);
+  }
+
+  mat-expansion-panel:first-of-type,
+  mat-expansion-panel:last-of-type,
+  mat-expansion-panel-header {
+    border-radius: 0 !important;
+  }
+}
+
+.admin-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.admin-level2 {
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-level2-item {
+  display: flex;
+  align-items: center;
+
+  gap: 12px;
+
+  padding: 10px 24px;
+
+  cursor: pointer;
+}
+
+.admin-level2-item:hover,
+.admin-level2-item-active {
+  background: #f5f5f5;
+}
+
+.admin-level2-item-active {
+  font-weight: 600;
+}
+
+.admin-level1-item {
+  display: flex;
+  align-items: center;
+
+  height: 56px;
+
+  gap: 12px;
+  padding: 0 24px;
+
+  cursor: pointer;
+}
+
+.admin-level1-item:hover,
+.admin-level1-item-active {
+  background: #f5f5f5;
+}
+
+.admin-level1-item-active {
+  font-weight: 600;
+}
+
+.admin-loading {
+  padding: 8px 16px;
+  opacity: 0.6;
+}
+
+.admin-menu-item-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+
+
+
+.admin-main {
+  display: flex;
+  flex-direction: column;
+
+  flex: 1 1 auto;
+
+  min-width: 0;
+  min-height: 0;
+
+  overflow: hidden;
+}
+
+.admin-tabs {
+  display: block;
+  flex: 0 0 auto;
+}
+
+.admin-content {
+  flex: 1 1 auto;
+
+  min-width: 0;
+  min-height: 0;
+
+  padding: 24px;
+
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+.admin-content-footer {
+  flex: 0 0 auto;
+
+  padding: 12px 24px;
+
+  border-top: 1px solid var(--mat-sys-outline-variant);
+  background: white;
+}
+
+
+
+
+.admin-aside-backdrop {
+  position: absolute;
+
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  z-index: 20;
+
+  background: rgba(0, 0, 0, 0.3);
+}
+
+
+
+
+@media (min-width: 768px) {
+  .admin-aside {
+    position: relative;
+
+    top: auto;
+    bottom: auto;
+    left: auto;
+
+    z-index: auto;
+
+    width: 0;
+
+    transform: none;
+  }
+
+  .admin-aside-open {
+    width: 288px;
+    min-width: 288px;
+  }
+
+  .admin-aside-backdrop {
+    display: none;
+  }
+}
+
+
+
+
+.admin-resize-handle {
+  position: absolute;
+
+  right: 0;
+  bottom: 0;
+
+  z-index: 100;
+
+  width: 18px;
+  height: 18px;
+
+  cursor: nwse-resize;
+}
+
+.admin-resize-handle::after {
+  content: '';
+
+  position: absolute;
+
+  right: 4px;
+  bottom: 4px;
+
+  width: 8px;
+  height: 8px;
+
+  border-right: 2px solid #777;
+  border-bottom: 2px solid #777;
+}

package/ts-source/browser-code-prod/taon-admin-layout/taon-admin-layout.component.split-namespaces.json

@@ -0,0 +1,4 @@
+{
+  "namespacesMapObj": {},
+  "namespacesReplace": {}
+}