Merge pull request #138 from Rikarin/develop

Release
Rikarin · Jun 6, 2024 · 602f79b · 602f79b
2 parents b971187 + 4a0042f
commit 602f79b
Show file tree

Hide file tree

Showing 155 changed files with 2,978 additions and 3,377 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ Contains default dark and light theme with SCSS functions to generate your own t
 ## What you'll get
 
 - **Light and Dark** default themes easily customizable
-- **33+ Angular UI Components** ready to be used
+- **35+ Angular UI Components** ready to be used
 - **Great Theming Engine** - creating new components just in few steps
 - **Configurable Options** - tweaking the components in various ways
 - **Material Design Icons** - ready to be used https://mdisearch.com/
@@ -62,3 +62,5 @@ yarn start
 ## Issues
 
 If you find any issues in the library or have and idea for an improvement feel free to open an [issue](https://github.com/Rikarin/xui/issues).
+
+_This project is tested with BrowserStack_
diff --git a/apps/web/project.json b/apps/web/project.json
@@ -22,11 +22,6 @@
           "apps/web/src/_redirects",
           "apps/web/src/robots.txt",
           "apps/web/src/sitemap.xml",
-          {
-            "glob": "mdi.svg",
-            "input": "./node_modules/@mdi/angular-material",
-            "output": "./assets"
-          },
           {
             "glob": "sass.sync.js",
             "input": "./node_modules/sass.js/dist",

diff --git a/apps/web/src/app/app.module.ts b/apps/web/src/app/app.module.ts
@@ -1,18 +1,16 @@
-import { BrowserModule, DomSanitizer, provideClientHydration } from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import { NgxGoogleAnalyticsModule, NgxGoogleAnalyticsRouterModule } from 'ngx-google-analytics';
 import { environment } from '../environments/environment';
-import { MatIconRegistry } from '@angular/material/icon';
 import { provideHttpClient, withFetch, withInterceptorsFromDi } from '@angular/common/http';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { RootComponent } from './root.component';
 import { XUI_CONFIG } from '@xui/components';
 import { ThemingService } from '@xui/theme-core';
 import { provideHighlightOptions } from 'ngx-highlightjs';
-import { ServerModule } from '@angular/platform-server';
 
 const routes: Routes = [
   { path: 'theme-designer', loadChildren: () => import('./designer/designer.module').then(x => x.DesignerModule) },
@@ -27,7 +25,7 @@ const routes: Routes = [
     RouterModule.forRoot(routes),
     BrowserModule,
     BrowserAnimationsModule,
-    ServerModule,
+    // ServerModule,
     NgxGoogleAnalyticsModule.forRoot(environment.ga),
     NgxGoogleAnalyticsRouterModule,
     NgxEchartsModule.forRoot({
@@ -55,14 +53,12 @@ const routes: Routes = [
         xml: () => import('highlight.js/lib/languages/xml')
       }
     }),
-    provideHttpClient(withInterceptorsFromDi(), withFetch()),
-    provideClientHydration()
+    provideHttpClient(withInterceptorsFromDi(), withFetch())
+    // provideClientHydration()
   ]
 })
 export class AppModule {
-  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer, translations: TranslateService) {
-    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
-
+  constructor(translations: TranslateService) {
     translations.setDefaultLang('en-US');
   }
 }
diff --git a/apps/web/src/app/designer/layout/layout.component.html b/apps/web/src/app/designer/layout/layout.component.html
@@ -1,12 +1,12 @@
 <xui-layout>
   <xui-header class="main-menu">
-    <xui-icon>home-outline</xui-icon>
+    <xui-icon icon="home-outline"></xui-icon>
     <h6>Theme Designer</h6>
     <div class="spacer"></div>
 
-    <xui-button><xui-icon>content-save</xui-icon>Save</xui-button>
+    <xui-button><xui-icon icon="content-save"></xui-icon> Save</xui-button>
     <xui-button>Load</xui-button>
-    <xui-button type="raised" shine><xui-icon>export</xui-icon>Export</xui-button>
+    <xui-button type="raised" shine><xui-icon icon="export"></xui-icon> Export</xui-button>
   </xui-header>
   <xui-layout>
     <xui-sider [width]="300">

diff --git a/apps/web/src/app/designer/layout/theme-sidebar/theme-sidebar.component.html b/apps/web/src/app/designer/layout/theme-sidebar/theme-sidebar.component.html
@@ -1,8 +1,8 @@
 <xui-panelbar class="properties">
-  <xui-panelbar-item [expanded]="true">
+  <xui-panelbar-item expanded>
     <div class="main-title" *xuiPanelBarItemTitle>
       Colors
-      <xui-button type="icon"><xui-icon>plus</xui-icon></xui-button>
+      <xui-button type="icon"><xui-icon icon="plus"></xui-icon></xui-button>
     </div>
     <div class="subtitle" *xuiPanelBarItemContent>Theme Colors</div>
 
@@ -12,7 +12,7 @@
           <div class="color" [style.background-color]="item.color"></div>
           {{ item.name }}
           <div class="color-label">{{ item.color }}</div>
-          <xui-button type="icon"><xui-icon>dots-horizontal</xui-icon></xui-button>
+          <xui-button type="icon"><xui-icon icon="dots-horizontal"></xui-icon></xui-button>
         </div>
       </xui-panelbar-item>
     }

diff --git a/apps/web/src/app/designer/overview/overview.component.html b/apps/web/src/app/designer/overview/overview.component.html
@@ -15,7 +15,7 @@ <h6>Buttons</h6>
     <div class="row">
       <xui-button color="minimal">Button</xui-button>
       <xui-button type="icon">
-        <xui-icon>menu</xui-icon>
+        <xui-icon icon="menu"></xui-icon>
       </xui-button>
     </div>
     <div class="overlay" (click)="edit('button')"></div>
@@ -24,10 +24,10 @@ <h6>Buttons</h6>
   <div class="container">
     <label>Button Group</label>
     <xui-button-group>
-      <xui-button type="raised"><xui-icon>format-align-left</xui-icon></xui-button>
-      <xui-button type="raised"><xui-icon>format-align-center</xui-icon></xui-button>
-      <xui-button type="raised"><xui-icon>format-align-right</xui-icon></xui-button>
-      <xui-button type="raised"><xui-icon>format-align-justify</xui-icon></xui-button>
+      <xui-button type="raised"><xui-icon icon="format-align-left"></xui-icon></xui-button>
+      <xui-button type="raised"><xui-icon icon="format-align-center"></xui-icon></xui-button>
+      <xui-button type="raised"><xui-icon icon="format-align-right"></xui-icon></xui-button>
+      <xui-button type="raised"><xui-icon icon="format-align-justify"></xui-icon></xui-button>
     </xui-button-group>
     <div class="overlay" (click)="edit('buttonGroup')"></div>
   </div>

diff --git a/apps/web/src/app/docs/app.component.html b/apps/web/src/app/docs/app.component.html
@@ -11,44 +11,44 @@
         <xui-menu-item link="/docs/xui/overview">Components Overview</xui-menu-item>
         <!--        <xui-menu-item link="/docs/xui/configure">Configuring Components</xui-menu-item>-->
         <xui-menu-group title="General">
-          <xui-menu-item icon="gesture-tap-button" link="/docs/xui/button">Button</xui-menu-item>
-          <xui-menu-item icon="bell-off" link="/docs/xui/toggle">Toggle</xui-menu-item>
-          <xui-menu-item icon="simple-icons" link="/docs/xui/icon">Icon</xui-menu-item>
-          <xui-menu-item icon="decagram" link="/docs/xui/decagram">Decagram</xui-menu-item>
-          <xui-menu-item icon="format-size" link="/docs/xui/typography">Typography</xui-menu-item>
-          <xui-menu-item icon="cog" link="/docs/xui/settings">Settings</xui-menu-item>
+          <xui-menu-item icon="gamepad" link="/docs/xui/button">Button</xui-menu-item>
+          <xui-menu-item icon="notifications_off" link="/docs/xui/toggle">Toggle</xui-menu-item>
+          <xui-menu-item icon="add_reaction" link="/docs/xui/icon">Icon</xui-menu-item>
+          <xui-menu-item icon="shield" link="/docs/xui/decagram">Decagram</xui-menu-item>
+          <xui-menu-item icon="format_size" link="/docs/xui/typography">Typography</xui-menu-item>
+          <xui-menu-item icon="settings" link="/docs/xui/settings">Settings</xui-menu-item>
         </xui-menu-group>
         <xui-menu-group title="Layout">
-          <xui-menu-item icon="minus" link="/docs/xui/divider">Divider</xui-menu-item>
-          <xui-menu-item icon="page-layout-body" link="/docs/xui/layout">Layout</xui-menu-item>
+          <xui-menu-item icon="remove" link="/docs/xui/divider">Divider</xui-menu-item>
+          <xui-menu-item icon="space_dashboard" link="/docs/xui/layout">Layout</xui-menu-item>
         </xui-menu-group>
         <xui-menu-group title="Navigation">
           <!--          <xui-menu-item icon="page-layout-header" link="#" disabled>Page Header</xui-menu-item>-->
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Pagination</xui-menu-item>-->
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Steps</xui-menu-item>-->
           <!--          <xui-menu-item icon="wizard-hat" link="#" disabled>Wizard</xui-menu-item>-->
-          <xui-menu-item icon="archive-outline" link="/docs/xui/drawer">Drawer</xui-menu-item>
-          <xui-menu-item icon="bread-slice-outline" link="/docs/xui/breadcrumb">Breadcrumb</xui-menu-item>
-          <xui-menu-item icon="archive-outline" link="/docs/xui/context-menu">Context Menu</xui-menu-item>
-          <xui-menu-item icon="cancel" link="/docs/xui/panelbar">Panel Bar</xui-menu-item>
+          <xui-menu-item icon="thumbnail_bar" link="/docs/xui/drawer">Drawer</xui-menu-item>
+          <xui-menu-item icon="rebase" link="/docs/xui/breadcrumb">Breadcrumb</xui-menu-item>
+          <xui-menu-item icon="inventory_2" link="/docs/xui/context-menu">Context Menu</xui-menu-item>
+          <xui-menu-item icon="right_panel_close" link="/docs/xui/panelbar">Panel Bar</xui-menu-item>
         </xui-menu-group>
         <xui-menu-group title="Data Entry">
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Autocomplete</xui-menu-item>-->
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Form??</xui-menu-item>-->
           <!--          <xui-menu-item icon="cancel" link="#" disabled>InputNumber</xui-menu-item>-->
           <!--          <xui-menu-item icon="star" link="#" disabled>Rate</xui-menu-item>-->
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Transfer</xui-menu-item>-->
-          <xui-menu-item icon="checkbox-marked-outline" link="/docs/xui/checkbox">Checkbox</xui-menu-item>
-          <xui-menu-item icon="toggle-switch-outline" link="/docs/xui/switch">Switch</xui-menu-item>
-          <xui-menu-item icon="radiobox-marked" link="/docs/xui/radio">Radio</xui-menu-item>
-          <xui-menu-item icon="list-box" link="/docs/xui/radio-list">Radio List</xui-menu-item>
-          <xui-menu-item icon="form-textbox" link="/docs/xui/input">Input</xui-menu-item>
-          <xui-menu-item icon="cancel" link="/docs/xui/textarea">Textarea</xui-menu-item>
-          <xui-menu-item icon="form-select" link="/docs/xui/select">Select</xui-menu-item>
-          <xui-menu-item icon="color-helper" link="/docs/xui/slider">Slider</xui-menu-item>
-          <xui-menu-item icon="calendar-blank" link="/docs/xui/date-picker">Date Picker</xui-menu-item>
-          <xui-menu-item icon="clock-time-four-outline" link="/docs/xui/time-picker">Time Picker</xui-menu-item>
-          <xui-menu-item icon="cloud-upload-outline" link="/docs/xui/image-upload">Image Upload</xui-menu-item>
+          <xui-menu-item icon="check_circle" link="/docs/xui/checkbox">Checkbox</xui-menu-item>
+          <xui-menu-item icon="toggle_on" link="/docs/xui/switch">Switch</xui-menu-item>
+          <xui-menu-item icon="radio_button_partial" link="/docs/xui/radio">Radio</xui-menu-item>
+          <xui-menu-item icon="list" link="/docs/xui/radio-list">Radio List</xui-menu-item>
+          <xui-menu-item icon="input" link="/docs/xui/input">Input</xui-menu-item>
+          <xui-menu-item icon="article" link="/docs/xui/textarea">Textarea</xui-menu-item>
+          <xui-menu-item icon="fact_check" link="/docs/xui/select">Select</xui-menu-item>
+          <xui-menu-item icon="sliders" link="/docs/xui/slider">Slider</xui-menu-item>
+          <xui-menu-item icon="calendar_month" link="/docs/xui/date-picker">Date Picker</xui-menu-item>
+          <xui-menu-item icon="schedule" link="/docs/xui/time-picker">Time Picker</xui-menu-item>
+          <xui-menu-item icon="upload" link="/docs/xui/image-upload">Image Upload</xui-menu-item>
         </xui-menu-group>
         <xui-menu-group title="Data Display">
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Avatar</xui-menu-item>-->
@@ -61,25 +61,25 @@
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Tag</xui-menu-item>-->
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Timeline</xui-menu-item>-->
           <!--          <xui-menu-item icon="file-tree-outline" link="#" disabled>Tree</xui-menu-item>-->
-          <xui-menu-item icon="cancel" link="/docs/xui/graph-view">Graph View</xui-menu-item>
-          <xui-menu-item icon="cancel" link="/docs/xui/badge">Badge</xui-menu-item>
-          <xui-menu-item icon="information-variant" link="/docs/xui/banner">Banner</xui-menu-item>
-          <xui-menu-item icon="card-bulleted-outline" link="/docs/xui/card">Card</xui-menu-item>
-          <xui-menu-item icon="cancel" link="/docs/xui/status">Status</xui-menu-item>
-          <xui-menu-item icon="tooltip-image-outline" link="/docs/xui/popover">Popover</xui-menu-item>
+          <xui-menu-item icon="network_node" link="/docs/xui/graph-view">Graph View</xui-menu-item>
+          <xui-menu-item icon="badge" link="/docs/xui/badge">Badge</xui-menu-item>
+          <xui-menu-item icon="quiz" link="/docs/xui/banner">Banner</xui-menu-item>
+          <xui-menu-item icon="web_asset" link="/docs/xui/card">Card</xui-menu-item>
+          <xui-menu-item icon="supervised_user_circle" link="/docs/xui/status">Status</xui-menu-item>
+          <xui-menu-item icon="chat_bubble" link="/docs/xui/popover">Popover</xui-menu-item>
           <xui-menu-item icon="table" link="/docs/xui/table">Table</xui-menu-item>
-          <xui-menu-item icon="tab" link="/docs/xui/tabs">Tabs</xui-menu-item>
-          <xui-menu-item icon="tooltip-outline" link="/docs/xui/tooltip">Tooltip</xui-menu-item>
-          <xui-menu-item icon="cancel" link="/docs/xui/snackbar">Snackbar</xui-menu-item>
+          <xui-menu-item icon="tabs" link="/docs/xui/tabs">Tabs</xui-menu-item>
+          <xui-menu-item icon="tooltip" link="/docs/xui/tooltip">Tooltip</xui-menu-item>
+          <xui-menu-item icon="call_to_action" link="/docs/xui/snackbar">Snackbar</xui-menu-item>
         </xui-menu-group>
         <xui-menu-group title="Feedback">
           <!--          <xui-menu-item icon="message" link="#" disabled>Message</xui-menu-item>-->
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Modal</xui-menu-item>-->
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Notification</xui-menu-item>-->
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Result</xui-menu-item>-->
           <!--          <xui-menu-item icon="cancel" link="#" disabled>Skeleton</xui-menu-item>-->
-          <xui-menu-item icon="table-row" link="/docs/xui/progress">Progress</xui-menu-item>
-          <xui-menu-item icon="progress-helper" link="/docs/xui/spinner">Spinner</xui-menu-item>
+          <xui-menu-item icon="clock_loader_40" link="/docs/xui/progress">Progress</xui-menu-item>
+          <xui-menu-item icon="autorenew" link="/docs/xui/spinner">Spinner</xui-menu-item>
         </xui-menu-group>
       </xui-submenu>
 
@@ -94,9 +94,9 @@
       <span>Documentation</span>
 
       <div class="theme-picker">
-        <xui-icon>moon-waning-crescent</xui-icon>
+        <xui-icon icon="dark_mode"></xui-icon>
         <xui-switch [formControl]="themePicker"></xui-switch>
-        <xui-icon>weather-sunny</xui-icon>
+        <xui-icon icon="light_mode"></xui-icon>
       </div>
       <a href="https://github.com/Rikarin/xui" target="_blank">
         <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

diff --git a/apps/web/src/app/docs/charts/analysis/analysis.component.ts b/apps/web/src/app/docs/charts/analysis/analysis.component.ts
@@ -62,7 +62,7 @@ export class AnalysisComponent {
     {
       id: 'group-1' as EntityId,
       name: 'Servers',
-      icon: 'server',
+      icon: 'storage',
       entities: [
         {
           id: 'entity-1' as EntityId,
@@ -79,7 +79,7 @@ export class AnalysisComponent {
     {
       id: 'group-2' as EntityId,
       name: 'Virtual Servers',
-      icon: 'server',
+      icon: 'storage',
       entities: [
         {
           id: 'entity-3' as EntityId,

diff --git a/apps/web/src/app/docs/components/example/example.html b/apps/web/src/app/docs/components/example/example.html
@@ -16,7 +16,7 @@
   <div *ngIf="files || todo" class="menu">
     <div *ngIf="todo" class="todo">TODO</div>
     @if (files) {
-      <xui-icon (click)="openProject()" xuiTooltip="Edit in StackBlitz">open-in-new</xui-icon>
+      <xui-icon (click)="openProject()" xuiTooltip="Edit in StackBlitz" icon="open_in_new"></xui-icon>
     }
   </div>
 </xui-card>
diff --git a/apps/web/src/app/docs/components/example/example.scss b/apps/web/src/app/docs/components/example/example.scss
@@ -17,7 +17,7 @@
   background-color: var(--color-bg-tertiary);
 
   .x-icon {
-    width: 20px;
+    font-size: 20px;
     cursor: pointer;
 
     &:hover {

diff --git a/apps/web/src/app/docs/components/example/example.ts b/apps/web/src/app/docs/components/example/example.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core';
-import { InputBoolean, XuiCard, XuiCardModule, XuiIcon, XuiTabModule } from '@xui/components';
+import { InputBoolean, XuiCard, XuiCardModule, XuiIcon, XuiTabModule, XuiTooltipModule } from '@xui/components';
 import sdk, { Project, ProjectFiles } from '@stackblitz/sdk';
 import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, lastValueFrom } from 'rxjs';
@@ -16,6 +16,7 @@ import { HighlightLineNumbers } from 'ngx-highlightjs/line-numbers';
     CommonModule,
     XuiCardModule,
     XuiTabModule,
+    XuiTooltipModule,
     XuiIcon,
     HighlightModule,
     HighlightPlusModule,

diff --git a/apps/web/src/app/docs/components/overview/overview.component.html b/apps/web/src/app/docs/components/overview/overview.component.html
@@ -16,7 +16,7 @@ <h6>What is xUI?</h6>
   <h6>What you will get?</h6>
   <ul>
     <li><b>Light and Dark</b> default themes easily customizable</li>
-    <li><b>33+ Angular UI Components</b> ready to be used</li>
+    <li><b>35+ Angular UI Components</b> ready to be used</li>
     <li><b>Great Theming Engine</b> - creating new components just in few steps</li>
     <li><b>Configurable Options</b> - tweaking the components in various ways</li>
     <li>