- 
- Theme Builder
+ @if (url !== '') {
+
-
-
- Theme Builder
+ @if (url !== '') {
+
+
+ Theme Builder
-
+ Theme Builder
-
-
- Theme Builder
-
-
- The DevExtreme Theme Builder allows you to customize and create new custom themes with absolute ease. To modify a theme included in our distribution, select one of the following options:
-
-
-
+ }
+ @switch (url) {
+ @case ('') {
+
-
-
-
- Select a Base Theme
-
-
-
-
- Import a Theme
-
+
-
+
+ Theme Builder
+
+
+ The DevExtreme Theme Builder allows you to customize and create new custom themes with absolute ease. To modify a theme included in our distribution, select one of the following options:
+
+
+
diff --git a/src/app/index/index.component.ts b/src/app/index/index.component.ts
index 159f5bfd..9153f3ad 100644
--- a/src/app/index/index.component.ts
+++ b/src/app/index/index.component.ts
@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
templateUrl: './index.component.html',
styleUrls: ['./index.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
diff --git a/src/app/layouts/app-layout/app-layout.component.ts b/src/app/layouts/app-layout/app-layout.component.ts
index 3c671879..ff4bd399 100644
--- a/src/app/layouts/app-layout/app-layout.component.ts
+++ b/src/app/layouts/app-layout/app-layout.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
import { ActivationEnd, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { routeAnimation } from './../../animations';
@@ -9,6 +9,7 @@ import { RouteId } from 'src/app/types/route-id';
templateUrl: './app-layout.component.html',
styleUrls: ['./app-layout.component.css'],
animations: [routeAnimation],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
diff --git a/src/app/layouts/bootstrap-uploader/bootstrap-uploader.component.ts b/src/app/layouts/bootstrap-uploader/bootstrap-uploader.component.ts
index 5e5e5a83..eca1fb3c 100644
--- a/src/app/layouts/bootstrap-uploader/bootstrap-uploader.component.ts
+++ b/src/app/layouts/bootstrap-uploader/bootstrap-uploader.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
import { alert } from 'devextreme/ui/dialog';
import { NotificationsService } from 'src/app/notification.service';
import { mutePromise } from 'src/app/promise-helper';
@@ -8,6 +8,7 @@ import { ImportService } from '../../import.service';
selector: 'app-bootstrap-uploader',
templateUrl: './bootstrap-uploader.component.html',
styleUrls: ['./bootstrap-uploader.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class BootstrapUploaderComponent {
diff --git a/src/app/layouts/button/button.component.ts b/src/app/layouts/button/button.component.ts
index 0e2ff7ff..1f64127b 100644
--- a/src/app/layouts/button/button.component.ts
+++ b/src/app/layouts/button/button.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
const DEFAULT_BUTTON_WIDTH = 200;
const DEFAULT_BUTTON_HEIGHT = 44;
@@ -7,6 +7,7 @@ const DEFAULT_BUTTON_HEIGHT = 44;
selector: 'app-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class ButtonComponent {
diff --git a/src/app/layouts/footer/footer.component.ts b/src/app/layouts/footer/footer.component.ts
index bf3dd48e..e1509635 100644
--- a/src/app/layouts/footer/footer.component.ts
+++ b/src/app/layouts/footer/footer.component.ts
@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class FooterComponent {
diff --git a/src/app/layouts/header/export-popup/export-popup.component.html b/src/app/layouts/header/export-popup/export-popup.component.html
index 5eae8c69..7cfd813f 100644
--- a/src/app/layouts/header/export-popup/export-popup.component.html
+++ b/src/app/layouts/header/export-popup/export-popup.component.html
@@ -1,247 +1,259 @@
+
-
+ }
+ @case ('import') {
+
+
-
-
-
+ Import a Theme
-
- You can customize your DevExtreme or Bootstrap theme as needed. To get started, import a .json file with DevExtreme metadata or Bootstrap variables file.
-
-
-
+
-
-
-
- DevExtreme Metadata
-
-
-
-
- Bootstrap Variables
- Select a Base Theme
+
+
-
+
+
-
-
-
+ Select a Base Theme
- DevExtreme comes with three themes: Generic, Material, and Fluent. Each theme supports multiple color schemes.
-
-
+
-
-
-
- Generic
-
-
-
-
- Material
-
-
-
-
- Fluent
- Import a Theme
+
+
+ }
+ @case ('master') {
+ Import a Theme
+
+ You can customize your DevExtreme or Bootstrap theme as needed. To get started, import a .json file with DevExtreme metadata or Bootstrap variables file.
+
+
+
+
+
+
+
-
-
+ DevExtreme Metadata
+
+
+
+
+ Bootstrap Variables
+
+
+ }
+ }
Select a Base Theme
+ DevExtreme comes with three themes: Generic, Material, and Fluent. Each theme supports multiple color schemes.
+
+
+
+
+
+
+ Generic
+
+
+
+
+ Material
+
+
+
+
+ Fluent
+
-
+
-
+ @for (step of ['Enter Name', 'Select Widgets', 'Choose Format']; track step; let i = $index; let isLast = $last; let isFirst = $first) {
+
+ }
+
-
+ @if (i !== 2) {
+
+ }
+ {{i + 1}}
-
- {{step}}
-
-
+ {{i + 1}}
+
+ {{step}}
-
-
-
-
Color Scheme Name
-
-
- The name can contain letters, digits, and hyphens.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- A color swatch is a secondary color scheme used to style
- portions of an application. To apply swatch styles, add the
- `dx-swatch-{{schemeName}}` class to the container
- that nests the elements being stylized.
-
-
- - portions of an application. To apply swatch styles, add the
- `dx-swatch-{{schemeName}}` class to the container
- that nests the elements being stylized.
-
-
-
+
-
- Removes links to external resources, such as fonts.
- This theme will use local fallbacks instead.
-
-
- - This theme will use local fallbacks instead.
-
+
+ @if (viewIndex === 0) {
+
+
Color Scheme Name
+
+
+ The name can contain letters, digits, and hyphens.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ A color swatch is a secondary color scheme used to style
+ portions of an application. To apply swatch styles, add the
+ `dx-swatch-{{schemeName}}` class to the container
+ that nests the elements being stylized.
+
+
+ + portions of an application. To apply swatch styles, add the
+ `dx-swatch-{{schemeName}}` class to the container
+ that nests the elements being stylized.
+
+
+ }
+ @if (viewIndex === 1) {
+
+
+ Removes links to external resources, such as fonts.
+ This theme will use local fallbacks instead.
+
- + This theme will use local fallbacks instead.
+
-
+
+
+
+
-
-
-
-
-
-
- Export CSS
-
-
- Download theme as a CSS file,
- a ZIP archive (includes this file and icons),
- or simply copy the theme styles. -
-
- - a ZIP archive (includes this file and icons),
- or simply copy the theme styles. -
-
-
- Export Metadata
-
-
- Metadata is a JSON object that describes a theme.
- You can copy the metadata or download it as a JSON file. -
-
- - You can copy the metadata or download it as a JSON file. -
-
+ Copy {{ needMeta ? 'Metadata' : 'CSS' }}
-
+
+
diff --git a/src/app/layouts/header/export-popup/export-popup.component.ts b/src/app/layouts/header/export-popup/export-popup.component.ts
index 39882483..7b477eca 100644
--- a/src/app/layouts/header/export-popup/export-popup.component.ts
+++ b/src/app/layouts/header/export-popup/export-popup.component.ts
@@ -1,8 +1,8 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { fileSaver } from 'devextreme/exporter';
import validationEngine from 'devextreme/ui/validation_engine';
import { saveAs } from 'file-saver';
-import * as JSZip from 'jszip';
+import JSZip from 'jszip';
import * as JSZipUtils from 'jszip-utils';
import { ImportService } from '../../../import.service';
import { PopupComponent } from '../popup/popup.component';
@@ -27,6 +27,7 @@ class TreeData {
selector: 'app-export-popup',
templateUrl: './export-popup.component.html',
styleUrls: ['./export-popup.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class ExportPopupComponent implements OnInit {
diff --git a/src/app/layouts/header/export-popup/help-tooltip/help-tooltip.component.ts b/src/app/layouts/header/export-popup/help-tooltip/help-tooltip.component.ts
index 5f4e48b3..a53e7a66 100644
--- a/src/app/layouts/header/export-popup/help-tooltip/help-tooltip.component.ts
+++ b/src/app/layouts/header/export-popup/help-tooltip/help-tooltip.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-help-tooltip',
@@ -7,6 +7,7 @@ import { Component } from '@angular/core';
display: flex;
cursor: pointer;
}`],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class HelpTooltipComponent {}
diff --git a/src/app/layouts/header/header-button/header-button.component.html b/src/app/layouts/header/header-button/header-button.component.html
index c032bd27..4e2f7c01 100644
--- a/src/app/layouts/header/header-button/header-button.component.html
+++ b/src/app/layouts/header/header-button/header-button.component.html
@@ -1,7 +1,11 @@
diff --git a/src/app/layouts/header/header-button/header-button.component.ts b/src/app/layouts/header/header-button/header-button.component.ts
index 3ed32bd9..fcb62380 100644
--- a/src/app/layouts/header/header-button/header-button.component.ts
+++ b/src/app/layouts/header/header-button/header-button.component.ts
@@ -1,9 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-header-button',
templateUrl: './header-button.component.html',
styleUrls: ['./header-button.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class HeaderButtonComponent {
diff --git a/src/app/layouts/header/header.component.html b/src/app/layouts/header/header.component.html
index 79004709..d98cef2a 100644
--- a/src/app/layouts/header/header.component.html
+++ b/src/app/layouts/header/header.component.html
@@ -1,74 +1,76 @@
Copy {{ needMeta ? 'Metadata' : 'CSS' }}
+
+
-
-
-
-
- Theme Builder
-
+
+
-
-
-
diff --git a/src/app/layouts/header/header.component.ts b/src/app/layouts/header/header.component.ts
index 4e9d092b..d61e4001 100644
--- a/src/app/layouts/header/header.component.ts
+++ b/src/app/layouts/header/header.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit, Pipe, PipeTransform } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, Pipe, PipeTransform, ChangeDetectionStrategy } from '@angular/core';
import { Router } from '@angular/router';
import DataSource from 'devextreme/data/data_source';
import { confirm } from 'devextreme/ui/dialog';
@@ -20,6 +20,7 @@ export class IncludesPipe implements PipeTransform {
templateUrl: './header.component.html',
styleUrls: ['./header.component.css'],
providers: [IncludesPipe],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class HeaderComponent implements OnInit, OnDestroy {
diff --git a/src/app/layouts/header/help-button/help-button.component.ts b/src/app/layouts/header/help-button/help-button.component.ts
index 77933b48..a791e3e2 100644
--- a/src/app/layouts/header/help-button/help-button.component.ts
+++ b/src/app/layouts/header/help-button/help-button.component.ts
@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
import { ActivationEnd, Router } from '@angular/router';
@Component({
selector: 'app-help-button',
templateUrl: './help-button.component.html',
styleUrls: ['./help-button.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class HelpButtonComponent {
diff --git a/src/app/layouts/header/import-popup/import-popup.component.ts b/src/app/layouts/header/import-popup/import-popup.component.ts
index ca9862b9..37c2641e 100644
--- a/src/app/layouts/header/import-popup/import-popup.component.ts
+++ b/src/app/layouts/header/import-popup/import-popup.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { ImportService } from '../../../import.service';
import { PopupComponent } from '../popup/popup.component';
@@ -6,6 +6,7 @@ import { PopupComponent } from '../popup/popup.component';
selector: 'app-import-popup',
templateUrl: './import-popup.component.html',
styleUrls: ['./import-popup.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class ImportPopupComponent {
diff --git a/src/app/layouts/header/popup/popup.component.ts b/src/app/layouts/header/popup/popup.component.ts
index fad34e21..c4be581c 100644
--- a/src/app/layouts/header/popup/popup.component.ts
+++ b/src/app/layouts/header/popup/popup.component.ts
@@ -1,9 +1,10 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-popup',
templateUrl: './popup.component.html',
styleUrls: ['./popup.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
diff --git a/src/app/layouts/loading/loading.component.html b/src/app/layouts/loading/loading.component.html
index c08e0784..291ea09a 100644
--- a/src/app/layouts/loading/loading.component.html
+++ b/src/app/layouts/loading/loading.component.html
@@ -1,3 +1,5 @@
-
+
-
-
-
-
-
+
+ }
+
+
-
-
- {{ data.key }}
-
-
-
-
-
-
- All trademarks or registered trademarks are property of their respective owners.
-
-
-
-
-
-
-
+ @if (switchEnabled) {
+
+ @if (switcherData) {
+
-
+ {{data.text}}
-
+ Theme Builder
+
+
+
+
+
+
+
+ {{ data.key }}
+ @if (data.key | includes: 'fluent') {
+
+
-
-
+
-
-
+ All trademarks or registered trademarks are property of their respective owners.
+
+
+
+
+
+
+
+
+ {{data.text}}
+
+@if (loading) {
+
-
+
+}
diff --git a/src/app/layouts/loading/loading.component.ts b/src/app/layouts/loading/loading.component.ts
index d91d8088..9817c33b 100644
--- a/src/app/layouts/loading/loading.component.ts
+++ b/src/app/layouts/loading/loading.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { LoadingService } from 'src/app/loading.service';
@Component({
selector: 'app-loading',
templateUrl: './loading.component.html',
styleUrls: ['./loading.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
diff --git a/src/app/layouts/preview-layout/preview-layout.component.ts b/src/app/layouts/preview-layout/preview-layout.component.ts
index 68891ca4..55cdb577 100644
--- a/src/app/layouts/preview-layout/preview-layout.component.ts
+++ b/src/app/layouts/preview-layout/preview-layout.component.ts
@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-preview-layout',
templateUrl: './preview-layout.component.html',
styleUrls: ['./preview-layout.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class PreviewLayoutComponent {}
diff --git a/src/app/left-menu/back-navigator/back-navigator.component.ts b/src/app/left-menu/back-navigator/back-navigator.component.ts
index 2637081f..54e6eeb7 100644
--- a/src/app/left-menu/back-navigator/back-navigator.component.ts
+++ b/src/app/left-menu/back-navigator/back-navigator.component.ts
@@ -1,9 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-back-navigator',
templateUrl: './back-navigator.component.html',
styleUrls: ['./back-navigator.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class BackNavigatorComponent {
diff --git a/src/app/left-menu/base-parameters/base-parameters.component.html b/src/app/left-menu/base-parameters/base-parameters.component.html
index cd11b25e..fbd5d7fc 100644
--- a/src/app/left-menu/base-parameters/base-parameters.component.html
+++ b/src/app/left-menu/base-parameters/base-parameters.component.html
@@ -1,24 +1,26 @@
-
-
-
Base size
-
+
+
diff --git a/src/app/left-menu/base-parameters/base-parameters.component.ts b/src/app/left-menu/base-parameters/base-parameters.component.ts
index 0e30b780..ca19f80b 100644
--- a/src/app/left-menu/base-parameters/base-parameters.component.ts
+++ b/src/app/left-menu/base-parameters/base-parameters.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { MetadataRepositoryService } from '../../meta-repository.service';
@@ -9,6 +9,7 @@ import { MetaItem } from '../../types/meta-item';
selector: 'app-base-parameters',
templateUrl: './base-parameters.component.html',
styleUrls: ['./base-parameters.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class BaseParametersComponent implements OnDestroy, OnInit {
diff --git a/src/app/left-menu/editor/editor.component.html b/src/app/left-menu/editor/editor.component.html
index b9e55694..814f7116 100644
--- a/src/app/left-menu/editor/editor.component.html
+++ b/src/app/left-menu/editor/editor.component.html
@@ -1,22 +1,28 @@
diff --git a/src/app/left-menu/editor/editor.component.ts b/src/app/left-menu/editor/editor.component.ts
index 9667ac95..b12a19c9 100644
--- a/src/app/left-menu/editor/editor.component.ts
+++ b/src/app/left-menu/editor/editor.component.ts
@@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/no-magic-numbers */
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { Router } from '@angular/router';
import { MetadataRepositoryService } from '../../meta-repository.service';
@@ -11,6 +11,7 @@ import { AnalyticsEventsService } from '../../analytics-events.service';
selector: 'app-editor',
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class EditorComponent {
diff --git a/src/app/left-menu/main/left-menu.component.html b/src/app/left-menu/main/left-menu.component.html
index 85ac2915..d99201ba 100644
--- a/src/app/left-menu/main/left-menu.component.html
+++ b/src/app/left-menu/main/left-menu.component.html
@@ -1,67 +1,84 @@
Base size
+
-
-
+ @for (item of editorsData; track item) {
+
+
-
-
-
-
-
-
-
-
+
+ @if (workArea) {
+
+
+ @for (data of filteredData; track data) {
+
+ @if (searchOpened) {
+
diff --git a/src/app/left-menu/main/left-menu.component.ts b/src/app/left-menu/main/left-menu.component.ts
index d326b592..522f0b1c 100644
--- a/src/app/left-menu/main/left-menu.component.ts
+++ b/src/app/left-menu/main/left-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { DxScrollViewComponent } from 'devextreme-angular';
@@ -17,6 +17,7 @@ const BASE_THEMING_NAME = 'Basic Settings';
selector: 'app-left-menu',
templateUrl: './left-menu.component.html',
styleUrls: ['./left-menu.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
diff --git a/src/app/left-menu/search-opener/search-opener.component.html b/src/app/left-menu/search-opener/search-opener.component.html
index 4072fcec..773f6a53 100644
--- a/src/app/left-menu/search-opener/search-opener.component.html
+++ b/src/app/left-menu/search-opener/search-opener.component.html
@@ -1,4 +1,8 @@
+
+
-
-
+ }
-
-
+ }
+ @if (!filteredData.length) {
+
-
-
-
-
-
-
-
+ }
+ @for (group of data.groups; track group) {
+
+ @if (group.items && group.items.length) {
+
-
+
+ }
+
+
+
+
+ @for (item of group.items; track item) {
+
-
-
-
+ }
+ @for (item of data.items; track item) {
+
+
+ }
+
Your search did not match any results.
-
- Your search did not match any results.
+ }
+
+
- {{ workAreaName }}
-
+
-
-
-
-
-
+ {{ workAreaName }}
+
-
+
+
+
+
-
-
+ @if (!opened) {
+
+ }
+ @if (opened) {
+
+ }
diff --git a/src/app/left-menu/search-opener/search-opener.component.ts b/src/app/left-menu/search-opener/search-opener.component.ts
index d5732489..d888c286 100644
--- a/src/app/left-menu/search-opener/search-opener.component.ts
+++ b/src/app/left-menu/search-opener/search-opener.component.ts
@@ -1,9 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-search-opener',
templateUrl: './search-opener.component.html',
styleUrls: ['./search-opener.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class SearchOpenerComponent {
diff --git a/src/app/master/master.component.html b/src/app/master/master.component.html
index 6f83609f..89409b7c 100644
--- a/src/app/master/master.component.html
+++ b/src/app/master/master.component.html
@@ -1,34 +1,38 @@
-
-
-
-
-
-
-
diff --git a/src/app/preview/button-detailed/button-detailed.component.ts b/src/app/preview/button-detailed/button-detailed.component.ts
index ab4145f0..44116e32 100644
--- a/src/app/preview/button-detailed/button-detailed.component.ts
+++ b/src/app/preview/button-detailed/button-detailed.component.ts
@@ -1,10 +1,11 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
import { AnalyticsEventsService } from '../../../app/analytics-events.service';
@Component({
selector: 'app-button-detailed',
templateUrl: './button-detailed.component.html',
styleUrls: ['./button-detailed.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
diff --git a/src/app/preview/button-group/button-group.component.html b/src/app/preview/button-group/button-group.component.html
index cf150d09..24dceb17 100644
--- a/src/app/preview/button-group/button-group.component.html
+++ b/src/app/preview/button-group/button-group.component.html
@@ -1,138 +1,122 @@
-
-
-
-
-
-
- Select a Theme
-
-
- Select a Theme
-
- {{themeName | titlecase}} Theme
-
-
-
- -
-
-
-
- {{theme.text.replace('Compact', '')}} -
-
-
- Export
- Advanced Settings
-
-
+
+
diff --git a/src/app/master/master.component.ts b/src/app/master/master.component.ts
index c26d1fd3..224235ce 100644
--- a/src/app/master/master.component.ts
+++ b/src/app/master/master.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { AppLayoutComponent } from '../layouts/app-layout/app-layout.component';
@@ -8,6 +8,7 @@ import { ThemeConfig } from '../types/theme';
@Component({
templateUrl: './master.component.html',
styleUrls: ['./master.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
diff --git a/src/app/notify-error/notify-error.component.html b/src/app/notify-error/notify-error.component.html
index f4301361..d61a4eb4 100644
--- a/src/app/notify-error/notify-error.component.html
+++ b/src/app/notify-error/notify-error.component.html
@@ -1,6 +1,8 @@
-
+
-
+
+ Select a Theme
+
+ Select a Theme
+
-
+
+ {{themeName | titlecase}} Theme
+
+
+ -
+ @for (theme of themesList; track theme) {
+
-
+
+ {{theme.text.replace('Compact', '')}} +
+ }
+
+
+ Export
+ Advanced Settings
+
+
+
+ @if (showIframe) {
+
-
+@if (visible) {
+
+
+}
diff --git a/src/app/notify-error/notify-error.component.ts b/src/app/notify-error/notify-error.component.ts
index c599bea6..78b1c6cb 100644
--- a/src/app/notify-error/notify-error.component.ts
+++ b/src/app/notify-error/notify-error.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { NotificationsService } from '../notification.service';
import { Notification } from '../types/notify';
@@ -6,6 +6,7 @@ import { Notification } from '../types/notify';
selector: 'app-notifications',
templateUrl: './notify-error.component.html',
styleUrls: ['./notify-error.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
diff --git a/src/app/preview/accordion/accordion.component.ts b/src/app/preview/accordion/accordion.component.ts
index cb932836..0a195546 100644
--- a/src/app/preview/accordion/accordion.component.ts
+++ b/src/app/preview/accordion/accordion.component.ts
@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
import { Subject } from 'rxjs';
@Component({
selector: 'app-accordion',
templateUrl: './accordion.component.html',
styleUrls: ['./accordion.component.css'],
+ changeDetection: ChangeDetectionStrategy.Eager,
standalone: false
})
export class AccordionComponent {
diff --git a/src/app/preview/button-detailed/button-detailed.component.html b/src/app/preview/button-detailed/button-detailed.component.html
index 7a8e54fd..a3f697a1 100644
--- a/src/app/preview/button-detailed/button-detailed.component.html
+++ b/src/app/preview/button-detailed/button-detailed.component.html
@@ -1,15 +1,13 @@
-
-
-
+
+
-
-
-
-
-
-
- Contained button
-
-
- Outlined button
-
-
- Text button
-
-
-
-
-
-
-
+@if (isExpanded.getValue()) {
+