Warning, /firebird/firebird-ng/src/app/pages/shell-example/shell-example.component.ts is written in an unsupported language. File is not indexed.
0001 // shell-example.component.ts
0002 import {ChangeDetectionStrategy, Component, input, ViewChild} from '@angular/core';
0003 import { ShellComponent } from '../../components/shell/shell.component';
0004 import {MatButton} from "@angular/material/button";
0005 import {MatFormField, MatLabel} from "@angular/material/form-field";
0006 import { MatFormFieldModule } from '@angular/material/form-field';
0007 import { MatInputModule } from '@angular/material/input';
0008 import { MatIconModule } from '@angular/material/icon';
0009 import { MatButtonModule } from '@angular/material/button';
0010 // Add if you're using <form> or ngModel, etc.
0011 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
0012 import {MatCard, MatCardContent, MatCardTitle} from "@angular/material/card";
0013
0014
0015 interface Color {
0016 name: string;
0017 background: string;
0018 text: string;
0019 hideText?: boolean;
0020 }
0021
0022 @Component({
0023 selector: 'theme-demo-colors',
0024 template: `
0025 <div class="demo-compact-color-container">
0026 @for (color of colors(); track $index) {
0027 <div class="demo-heading"
0028 [style.background-color]="'var(' + color.background + ')'"
0029 [style.color]="'var(' + color.text + ')'">
0030 <div class="demo-name"> {{color.name}} </div>
0031 <div class="demo-variables">
0032 <div class="demo-variable demo-code">{{color.background}}</div>
0033 @if (!color.hideText) {
0034 <div class="demo-variable demo-code">{{color.text}}</div>
0035 }
0036 </div>
0037 </div>
0038 }
0039 </div>
0040 `,
0041 styleUrl: 'shell-example.component.scss',
0042 changeDetection: ChangeDetectionStrategy.OnPush,
0043 standalone: true,
0044 })
0045 export class ThemeDemoColors {
0046 colors = input<Color[]>();
0047 }
0048
0049
0050 @Component({
0051 selector: 'app-shell-example',
0052 imports: [
0053 ShellComponent,
0054 MatLabel,
0055 MatButton,
0056 MatFormField,
0057 FormsModule,
0058 ReactiveFormsModule,
0059 MatFormFieldModule,
0060 MatInputModule,
0061 MatIconModule,
0062 MatButtonModule,
0063 MatCard,
0064 MatCardTitle,
0065 MatCardContent,
0066 ThemeDemoColors
0067 ],
0068 templateUrl: './shell-example.component.html',
0069 styleUrls: ['./shell-example.component.scss']
0070 })
0071 export class ShellExampleComponent {
0072
0073 @ViewChild(ShellComponent)
0074 displayShellComponent!: ShellComponent;
0075
0076 alternativeThemeColors: Color[] = [
0077 {
0078 name: 'Primary Container',
0079 background: '--mat-sys-primary-container',
0080 text: '--mat-sys-on-primary-container',
0081 },
0082 {
0083 name: 'Secondary',
0084 background: '--mat-sys-secondary',
0085 text: '--mat-sys-on-secondary',
0086 },
0087 {
0088 name: 'Secondary Container',
0089 background: '--mat-sys-secondary-container',
0090 text: '--mat-sys-on-secondary-container',
0091 },
0092 {
0093 name: 'Tertiary',
0094 background: '--mat-sys-tertiary',
0095 text: '--mat-sys-on-tertiary',
0096 },
0097 {
0098 name: 'Tertiary Container',
0099 background: '--mat-sys-tertiary-container',
0100 text: '--mat-sys-on-tertiary-container',
0101 },
0102 {
0103 name: 'Error Container',
0104 background: '--mat-sys-error-container',
0105 text: '--mat-sys-on-error-container',
0106 },
0107 ];
0108
0109 surfaceColors: Color[] = [
0110 {
0111 name: 'Surface Dim',
0112 background: '--mat-sys-surface-dim',
0113 text: '--mat-sys-on-surface',
0114 hideText: true,
0115 },
0116 {
0117 name: 'Surface Bright',
0118 background: '--mat-sys-surface-bright',
0119 text: '--mat-sys-on-surface',
0120 hideText: true,
0121 },
0122 {
0123 name: 'Surface Container Lowest',
0124 background: '--mat-sys-surface-container-lowest',
0125 text: '--mat-sys-on-surface',
0126 hideText: true,
0127 },
0128 {
0129 name: 'Surface Container Low',
0130 background: '--mat-sys-surface-container-low',
0131 text: '--mat-sys-on-surface',
0132 hideText: true,
0133 },
0134 {
0135 name: 'Surface Container',
0136 background: '--mat-sys-surface-container',
0137 text: '--mat-sys-on-surface',
0138 hideText: true,
0139 },
0140 {
0141 name: 'Surface Container High',
0142 background: '--mat-sys-surface-container-high',
0143 text: '--mat-sys-on-surface',
0144 hideText: true,
0145 },
0146 {
0147 name: 'Surface Container Highest',
0148 background: '--mat-sys-surface-container-highest',
0149 text: '--mat-sys-on-surface',
0150 hideText: true,
0151 },
0152 ];
0153
0154 fixedColors: Color[] = [
0155 {
0156 name: 'Primary Fixed',
0157 background: '--mat-sys-primary-fixed',
0158 text: '--mat-sys-on-primary-fixed',
0159 },
0160 {
0161 name: 'Primary Fixed Dim',
0162 background: '--mat-sys-primary-fixed-dim',
0163 text: '--mat-sys-on-primary-fixed',
0164 },
0165 {
0166 name: 'Secondary Fixed',
0167 background: '--mat-sys-secondary-fixed',
0168 text: '--mat-sys-on-secondary-fixed',
0169 },
0170 {
0171 name: 'Secondary Fixed Dim',
0172 background: '--mat-sys-secondary-fixed-dim',
0173 text: '--mat-sys-on-secondary-fixed',
0174 },
0175 {
0176 name: 'Tertiary Fixed',
0177 background: '--mat-sys-tertiary-fixed',
0178 text: '--mat-sys-on-tertiary-fixed',
0179 },
0180 {
0181 name: 'Tertiary Fixed Dim',
0182 background: '--mat-sys-tertiary-fixed-dim',
0183 text: '--mat-sys-on-tertiary-fixed',
0184 },
0185 ];
0186
0187 toggleLeftPane() {
0188 this.displayShellComponent.toggleLeftPane();
0189 }
0190
0191 toggleRightPane() {
0192 this.displayShellComponent.toggleRightPane();
0193 }
0194
0195 }
