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

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/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.3",
   "description": "Ontimize Web framework using Angular 15",
   "bugs": "https://github.com/OntimizeWeb/ontimize-web-ngx/issues",
   "author": "Imatia S.L.",

package/theme.scss

@@ -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 {
-
-              .empty-filter-list,
-              .mdc-list-item__content>* {
-                font-size: mat.font-size($typography, body-1);
-              }
+        .mdc-list {
+          padding: 0;
+          @include mat.list-density(-2);
 
-              .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;
             }
-          }
-        }
-      }
-    }
-
-  }
-
 
-  /*MAT LIST DENSE in v15 is unsupported */
-  .mat-mdc-list[dense] {
-    .mat-mdc-list-item {
-      height: auto;
+            &.mdc-list-item--with-one-line,
+            &.mdc-list-item--with-two-lines,
+            &.mdc-list-item--with-three-lines {
+              height: auto;
+              min-height: 30px;
 
-      &.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) {
@@ -995,8 +986,6 @@
   .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

@@ -86,7 +86,7 @@ $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-table-style.o-table-style($theme-or-color-config);

package/theming/styles/density.scss

@@ -1,37 +1,51 @@
 @use '@angular/material'as mat;
 @use "sass:selector";
 
-@mixin checkbox($ripple-size, $touch-target-size, $icon-size) {
+@mixin checkbox() {
 
 
-  mat-checkbox.mat-mdc-checkbox .mdc-checkbox,
-  .mdc-list-item.mat-mdc-list-option .mdc-checkbox {
-    padding: calc((var(--mdc-checkbox-ripple-size, $ripple-size) - var(--mdc-checkbox-icon-size, $icon-size)) / 2);
-    margin: calc((var(--mdc-checkbox-touch-target-size, $touch-target-size) - var(--mdc-checkbox-icon-size)) / 2);
-
-    .mdc-checkbox__background {
-      top: calc((var(--mdc-checkbox-ripple-size, $ripple-size) - var(--mdc-checkbox-icon-size, $icon-size)) / 2);
-      left: calc((var(--mdc-checkbox-ripple-size, $ripple-size) - var(--mdc-checkbox-icon-size, $icon-size)) / 2);
-      height: var(--mdc-checkbox-icon-size, $icon-size);
-      width: var(--mdc-checkbox-icon-size, $icon-size);
-    }
+  mat-checkbox.mat-mdc-checkbox .mdc-checkbox {
 
-    .mdc-checkbox__native-control {
-      top: calc((20px - var(--mdc-checkbox-touch-target-size, $touch-target-size)) / 2);
-      right: calc((20px - var(--mdc-checkbox-touch-target-size, $touch-target-size)) / 2);
+    @include checkbox-size(28px, 16px);
+  }
 
-      left: calc((20px - var(--mdc-checkbox-touch-target-size, $touch-target-size)) / 2);
-      width: var(--mdc-checkbox-touch-target-size, $touch-target-size);
-      height: var(--mdc-checkbox-touch-target-size, $touch-target-size);
+  .o-table {
+    mat-checkbox.mat-mdc-checkbox .mdc-checkbox {
+      @include checkbox-size(28px, 18px);
     }
+  }
 
-    .mat-mdc-checkbox-touch-target {
-      height: var(--mdc-checkbox-touch-target-size, $touch-target-size);
-      width: var(--mdc-checkbox-touch-target-size, $touch-target-size);
-    }
+  .mdc-list-item.mat-mdc-list-option .mdc-checkbox {
+    @include checkbox-size(21px, 15px);
+  }
+
+}
 
-    //}
+@mixin checkbox-size($ripple-size, $icon-size) {
+  width: $icon-size;
+  height: $icon-size;
+  flex: 0 0 $icon-size;
+  padding: calc(($ripple-size - $icon-size) / 2) + 1;
+
+
+  .mdc-checkbox__background {
+    top: calc(($ripple-size - $icon-size) / 2) + 1;
+    left: calc(($ripple-size - $icon-size) / 2) + 1;
+    width: $icon-size;
+    height: $icon-size;
+  }
+
+  .mdc-checkbox__native-control {
+    width: $ripple-size;
+    height: $ripple-size;
+
+  }
+
+  .mat-mdc-checkbox-touch-target {
+    height: $icon-size;
+    width: $icon-size;
   }
+
 }
 
 @mixin radio() {

package/theming/styles/ontimize-v8/o-form-field-style.scss

@@ -36,9 +36,10 @@
     .mat-mdc-form-field-flex {
       .mat-mdc-form-field-infix {
         min-height: auto;
-        padding-bottom: 4px;
-
 
+        .mat-mdc-form-field-input-control:not(textarea){
+          height: 1em;
+        }
         .mat-mdc-floating-label {
           display: block;
         }

package/theming/styles/ontimize-v8/o-table-style.scss

@@ -9,7 +9,7 @@
   $typography: map.get($theme, typography);
 
   /* TABLE */
-  .ontimize-table.o-table {
+  .ontimize-table.o-table.o-table {
     font-weight: 400;
 
     .o-table-container {