ontimize-web-ngx 15.0.0-beta.2 → 15.0.0-beta.4

package/lib/components/input/currency-input/o-currency-input.component.d.ts

@@ -5,6 +5,13 @@ export declare const DEFAULT_INPUTS_O_CURRENCY_INPUT: string[];
 export declare class OCurrencyInputComponent extends ORealInputComponent implements OnInit {
     static currency_icons: string[];
     currency_symbols: {
+        EUR: string;
+        USD: string;
+        BRL: string;
+        JPY: string;
+        CNY: string;
+        RUB: string;
+        AED: string;
         CRC: string;
         NGN: string;
         PHP: string;

package/lib/components/list/o-list.component.d.ts

@@ -20,7 +20,6 @@ export declare class OListComponent extends AbstractOServiceComponent<OListCompo
     listItemDirectives: QueryList<OListItemDirective>;
     refreshButton: boolean;
     selectable: boolean;
-    odense: boolean;
     deleteButton: boolean;
     insertButtonFloatable: boolean;
     showButtonsText: boolean;
@@ -52,7 +51,6 @@ export declare class OListComponent extends AbstractOServiceComponent<OListCompo
     getComponentKey(): string;
     initialize(): void;
     reinitialize(options: OListInitializationOptions): void;
-    getDense(): boolean;
     onListItemClicked(onNext: (item: OListItemDirective) => void): object;
     onItemDetailClick(item: OListItemDirective | ListItem): void;
     onItemDetailDoubleClick(item: OListItemDirective | ListItem): void;
@@ -75,5 +73,5 @@ export declare class OListComponent extends AbstractOServiceComponent<OListCompo
     updateSelectedItems(): void;
     getSqlTypes(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<OListComponent, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OListComponent, "o-list", never, { "quickFilterColumns": "quick-filter-columns"; "refreshButton": "refresh-button"; "route": "route"; "selectable": "selectable"; "odense": "dense"; "deleteButton": "delete-button"; "sortColumns": "sort-columns"; "insertButtonPosition": "insert-button-position"; "insertButtonFloatable": "insert-button-floatable"; "showButtonsText": "show-buttons-text"; "keysSqlTypes": "keys-sql-types"; }, { "onInsertButtonClick": "onInsertButtonClick"; "onItemDeleted": "onItemDeleted"; }, ["listItemDirectives"], ["[o-list-toolbar][position=start]", "[o-list-toolbar][position=end]", "[o-list-toolbar]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OListComponent, "o-list", never, { "quickFilterColumns": "quick-filter-columns"; "refreshButton": "refresh-button"; "route": "route"; "selectable": "selectable"; "deleteButton": "delete-button"; "sortColumns": "sort-columns"; "insertButtonPosition": "insert-button-position"; "insertButtonFloatable": "insert-button-floatable"; "showButtonsText": "show-buttons-text"; "keysSqlTypes": "keys-sql-types"; }, { "onInsertButtonClick": "onInsertButtonClick"; "onItemDeleted": "onItemDeleted"; }, ["listItemDirectives"], ["[o-list-toolbar][position=start]", "[o-list-toolbar][position=end]", "[o-list-toolbar]", "*"], false, never>;
 }

package/lib/util/currencyUtil.d.ts

@@ -0,0 +1,41 @@
+export declare class CurrencyUtil {
+    static languageToCurrencyCode: {
+        es: string;
+        en: string;
+        pt: string;
+        fr: string;
+        de: string;
+        it: string;
+        ja: string;
+        zh: string;
+        ru: string;
+        ar: string;
+        cr: string;
+        ng: string;
+        ph: string;
+        pl: string;
+        py: string;
+        th: string;
+        ua: string;
+        vn: string;
+    };
+    static currencyCodeToSymbol: {
+        EUR: string;
+        USD: string;
+        BRL: string;
+        JPY: string;
+        CNY: string;
+        RUB: string;
+        AED: string;
+        CRC: string;
+        NGN: string;
+        PHP: string;
+        PLN: string;
+        PYG: string;
+        THB: string;
+        UAH: string;
+        VND: string;
+    };
+    static getCurrencyCode(language: string): string;
+    static getCurrencyCodeFromSymbol(symbol: string): string | undefined;
+}

package/lib/util/index.d.ts

@@ -6,3 +6,4 @@ export * from './util';
 export * from './codes';
 export * from './filter-expression.utils';
 export * from './service.utils';
+export * from './currencyUtil';

package/ontimize.scss

@@ -874,67 +874,6 @@ $mat-stroked-button-line-height: $mat-button-line-height - 2;
           }
         }
 
-        .mat-mdc-list-base {
-
-          &[dense] {
-            .mat-mdc-list-item {
-              min-height: 30px;
-              height: auto;
-              display: flex;
-              padding: 0 8px;
-
-              .mdc-list-item__content,
-              .mat-mdc-list-item-meta {
-                width: 100%;
-                align-self: center;
-
-                .mat-mdc-list-item-icon {
-                  margin-top: 0;
-                  padding: 4px;
-                }
-
-                .mdc-list-item__first-text,
-                .mdc-list-item__secondary-text {
-                  &::before {
-                    display: flex;
-                  }
-                }
-
-                .mdc-list-item__secondary-text {
-                  padding: 0 8px;
-
-                  &::before {
-                    height: auto;
-                  }
-                }
-
-              }
-            }
-
-          }
-
-          &.mat-mdc-selection-list[dense] {
-            overflow: auto;
-            outline: none;
-            padding-top: 0;
-            min-height: 40px;
-
-            .mat-mdc-list-item {
-              margin: 6px 0;
-              border-radius: 4px;
-              cursor: default;
-
-
-              .mdc-list-item__start {
-                margin-top: 0;
-              }
-            }
-
-            p {
-              white-space: normal;
-            }
-          }
-        }
       }
 
       .mat-mdc-dialog-actions {
@@ -1013,7 +952,7 @@ button.mat-mdc-button-base {
       height: $mat-button-line-height;
     }
 
-    >.mat-icon{
+    >.mat-icon {
       line-height: 1;
     }
   }
@@ -1036,15 +975,6 @@ button.mat-mdc-button-base {
   }
 }
 
-.o-table-apply-configuration-dialog-list.mat-mdc-selection-list.mat-mdc-list-base[dense],
-.o-table-load-filter-dialog-list.mat-mdc-list-base[dense] {
-
-  .o-table-apply-configuration-dialog-list-title,
-  .o-table-load-filter-dialog-list-title {
-    font-weight: bold;
-
-  }
-}
 
 
 
@@ -1059,4 +989,4 @@ button.mat-mdc-button-base {
 
 .overlay-ref-display-none .cdk-overlay-pane.o-context-menu {
   display: none;
-}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ontimize-web-ngx",
   "homepage": "https://github.com/OntimizeWeb/ontimize-web-ngx#readme",
-  "version": "15.0.0-beta.2",
+  "version": "15.0.0-beta.4",
   "description": "Ontimize Web framework using Angular 15",
   "bugs": "https://github.com/OntimizeWeb/ontimize-web-ngx/issues",
   "author": "Imatia S.L.",

package/theme.scss

@@ -73,7 +73,74 @@
     }
   }
 
-}@mixin o-app-sidenav-theme($theme-or-color-config) {
+}@mixin o-bar-menu-theme($theme-or-color-config) {
+    $theme: map.get($theme-or-color-config, color);
+    $primary: map.get($theme, primary);
+
+
+    $bg-color: #FFF;
+    $fg-color: rgba(0, 0, 0, 0.7);
+
+    $item-bg-color-hover-dark: rgba(0, 0, 0, 0.16);
+    $item-bg-color-hover-light: rgba(255, 255, 255, 0.16);
+
+    .o-bar-menu {
+      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+
+      nav {
+        .fake-ul {
+          .fake-ul {
+            background-color: $bg-color;
+
+            .mat-icon,
+            .o-bar-menu-group-title,
+            .o-bar-menu-item-title,
+            label.toggle {
+              color: $fg-color;
+            }
+
+            .fake-li {
+              background-color: $bg-color;
+            }
+          }
+        }
+
+        a {
+          color: $bg-color;
+        }
+      }
+
+      @media all and (min-width : 768px) {
+        nav .fake-ul {
+          .fake-li .fake-ul .fake-li-hover {
+            background: $item-bg-color-hover-dark;
+          }
+
+          .fake-li-hover {
+            background-color: $item-bg-color-hover-light;
+          }
+        }
+      }
+
+      @media all and (max-width : 767px) {
+        nav {
+          a:hover {
+            background-color: rgba(255, 255, 255, 0.15);
+          }
+
+          .fake-ul {
+            border-top: 1px solid rgba(255, 255, 255, 0.5);
+          }
+        }
+
+        .toggle {
+          &:hover {
+            background-color: rgba(255, 255, 255, 0.15);
+          }
+        }
+      }
+    }
+  }@mixin o-app-sidenav-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
   $primary: map.get($theme, primary);
   $accent: map.get($theme, accent);
@@ -149,74 +216,7 @@
       }
     }
   }
-}@mixin o-bar-menu-theme($theme-or-color-config) {
-    $theme: map.get($theme-or-color-config, color);
-    $primary: map.get($theme, primary);
-
-
-    $bg-color: #FFF;
-    $fg-color: rgba(0, 0, 0, 0.7);
-
-    $item-bg-color-hover-dark: rgba(0, 0, 0, 0.16);
-    $item-bg-color-hover-light: rgba(255, 255, 255, 0.16);
-
-    .o-bar-menu {
-      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-
-      nav {
-        .fake-ul {
-          .fake-ul {
-            background-color: $bg-color;
-
-            .mat-icon,
-            .o-bar-menu-group-title,
-            .o-bar-menu-item-title,
-            label.toggle {
-              color: $fg-color;
-            }
-
-            .fake-li {
-              background-color: $bg-color;
-            }
-          }
-        }
-
-        a {
-          color: $bg-color;
-        }
-      }
-
-      @media all and (min-width : 768px) {
-        nav .fake-ul {
-          .fake-li .fake-ul .fake-li-hover {
-            background: $item-bg-color-hover-dark;
-          }
-
-          .fake-li-hover {
-            background-color: $item-bg-color-hover-light;
-          }
-        }
-      }
-
-      @media all and (max-width : 767px) {
-        nav {
-          a:hover {
-            background-color: rgba(255, 255, 255, 0.15);
-          }
-
-          .fake-ul {
-            border-top: 1px solid rgba(255, 255, 255, 0.5);
-          }
-        }
-
-        .toggle {
-          &:hover {
-            background-color: rgba(255, 255, 255, 0.15);
-          }
-        }
-      }
-    }
-  }@mixin o-breadcrumb-theme($theme-or-color-config) {
+}@mixin o-breadcrumb-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
   $primary: map.get($theme, primary);
   $accent: map.get($theme, accent);
@@ -374,7 +374,10 @@
 
           &[aria-selected="true"] {
             background-color: mat.get-color-from-palette($primary, 100);
-            color: if($is-dark-theme, #121212, mat.get-color-from-palette($foreground, text));
+
+            .mdc-list-item__secondary-text {
+              color: if($is-dark-theme, #121212, mat.get-color-from-palette($foreground, text));
+            }
           }
         }
 
@@ -681,16 +684,18 @@
     .mat-mdc-dialog-container {
       .mat-mdc-dialog-title {
         border-bottom: 1px solid mat.get-color-from-palette($primary);
+
         .mat-icon {
           color: mat.get-color-from-palette($primary);
         }
       }
-      @if($typography){
-      .mat-mdc-dialog-title {
-        line-height: mat.font-size($typography, subtitle-1);
-        font-size: mat.font-size($typography, subtitle-1);
+
+      @if($typography) {
+        .mat-mdc-dialog-title {
+          line-height: mat.font-size($typography, subtitle-1);
+          font-size: mat.font-size($typography, subtitle-1);
+        }
       }
-    }
 
 
       .empty-filter-list {
@@ -709,117 +714,103 @@
 
         }
 
-        .mdc-list[dense],
-        .mat-mdc-selection-list[dense] {
-          outline: none;
-
-          .mat-mdc-list-option-checkbox-before {
-            display: flex;
-            align-items: center;
-            padding-right: 0px;
-            margin-right: 0px;
-          }
-
-
-        }
 
-        @if($typography) {
-          .mat-mdc-list[dense] {
-            .mat-mdc-list-item {
+        .mdc-list {
+          padding: 0;
+          @include mat.list-density(-2);
 
-              .empty-filter-list,
-              .mdc-list-item__content>* {
-                font-size: mat.font-size($typography, body-1);
-              }
-
-              .mat-mdc-list-item-line:nth-child(n+2) {
-                font-size: mat.font-size($typography, caption);
-              }
+          .mat-mdc-list-item.mdc-list-item {
+            margin: 6px 0;
+            border-radius: 4px;
 
+            &.mdc-list-item--with-leading-checkbox .mdc-list-item__start {
+              margin-right: 8px;
             }
-          }
-        }
-      }
-    }
-
-  }
 
+            &.mdc-list-item--with-one-line,
+            &.mdc-list-item--with-two-lines,
+            &.mdc-list-item--with-three-lines {
+              height: auto;
+              min-height: 30px;
 
-  /*MAT LIST DENSE in v15 is unsupported */
-  .mat-mdc-list[dense] {
-    .mat-mdc-list-item {
-      height: auto;
-
-      &.mdc-list-item--with-three-lines {
-        height: 76px;
-      }
-
-      &.mdc-list-item--with-two-lines {
-        height: 60px;
-      }
+            }
 
-      &.mdc-list-item--with-one-line {
-        height: 60px;
-      }
+            .mdc-list-item__content {
+              display: table;
+              align-self: center;
+              width: 100%;
 
 
+              .mdc-list-item__secondary-text,
+              .mdc-list-item__primary-text {
+                margin-bottom: 0;
+                align-self: center;
+                vertical-align: middle;
 
+                &::before,
+                &::after {
+                  content: none;
+                }
 
-      .mdc-list-item__primary-text,
-      .mdc-list-item__secondary-text {
-        margin-bottom: 0;
+                &.mat-mdc-list-item-unscoped-content {
+                  display: table-cell;
+                  vertical-align: middle;
+                  width: 100%;
+                }
+              }
+            }
 
-        &::before {
-          height: auto;
-          content: none;
-        }
+            .mdc-list-item__start {
+              align-self: center;
+              margin-top: 0;
+            }
 
-        @if($typography) {
-          font-size: mat.font-size($typography, caption);
+          }
         }
 
       }
     }
   }
 
+
+
   /*global styles about drag/drop in dialogs table*/
   .cdk-drag-preview,
   .cdk-drag-dragging {
-    width: 100%;
-    display: block;
 
-    background-color: mat.get-color-from-palette($background, background);
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-    box-sizing: border-box;
-    border-radius: 2px;
+    &.mdc-list-item.mat-mdc-list-item {
 
-    @if($typography) {
-      .mdc-list-item__content {
-        font-size: mat.font-size($typography, body-1);
-      }
-    }
+      background-color: mat.get-color-from-palette($background, background);
+      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+      box-sizing: border-box;
+      border-radius: 2px;
 
-    .mdc-list-item__content {
-      display: block;
-      color: mat.get-color-from-palette($foreground, text);
-      padding: 6px;
-      flex-direction: row;
-      align-items: center;
-      //background-color: mat.get-color-from-palette($background, background);
-      //display: flex;
-      //box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-      //box-sizing: border-box;
-      // border-radius: 2px;
+      .mdc-list-item__secondary-text,
+      .mdc-list-item__primary-text {
+        padding: 0 8px;
+        width: 100%;
 
-      .mat-mdc-list-item-icon {
-        padding: 4px;
+        &::before,
+        &::after {
+          content: none;
+        }
       }
 
-      .mat-mdc-list-text {
-        padding-left: 16px;
-        width: 100%;
+      .mdc-list-item__start {
+        align-self: center;
+        margin-top: 0;
+        margin-right: 8px;
+      }
+
+      .mdc-list-item__secondary-text {
+        color: mat.get-color-from-palette($foreground, icon);
+
+        @if($typography) {
+          font-size: mat.font-size($typography, body-1);
+        }
       }
     }
+
   }
 
   .cdk-drop-list-dragging .o-drag-list-item-box:not(.cdk-drag-placeholder) {
@@ -990,13 +981,6 @@
     }
 
   }
-
-  /*MAT MENU*/
-  .o-mat-menu.mat-mdc-menu-panel {
-    min-height: auto;
-  }
-
-
 }// Layout-padding-xxx & Layout-margin-xxxx
 // ------------------------------
 $baseline-grid: 8px !default;

package/theming/addons/report-on-demand.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use '@angular/material'as mat;
+@use '@angular/material' as mat;
 
 @mixin report-on-demand($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
@@ -7,6 +7,10 @@
 
   .report-on-demand-sidenav {
     .mat-expansion-panel {
+      border: 1px solid mat.get-color-from-palette($background, background);
+    }
+
+    .mat-expansion-panel-header {
       background-color: mat.get-color-from-palette($background, background);
     }
   }

package/theming/ontimize-style-v8.scss

@@ -68,7 +68,7 @@ $app-background-color: #eaeaea;
 @mixin ontimize-theme-styles($theme-or-color-config) {
 
   $theme: map.get($theme-or-color-config, color);
-
+  $typography: mat.get-typography-config($theme-or-color-config);
   $primary: map.get($theme, primary);
   $accent: map.get($theme, accent);
   $background: map.get($theme, background);
@@ -86,9 +86,10 @@ $app-background-color: #eaeaea;
 
   @include theme.o-material-theme($theme-or-color-config);
   @include layout.layout-padding-margin();
-  @include o-density.checkbox(19px, 19px, 15px);
+  @include o-density.checkbox();
   @include o-density.list();
   @include o-density.radio();
+  @include o-density.menu($typography);
   @include o-table-style.o-table-style($theme-or-color-config);
   @include report-on-demand.report-on-demand($theme-or-color-config);
   @include charts-on-demand.o-chart-on-demand($theme-or-color-config);