cmat 0.0.3 → 0.0.5

package/services/config/urlStateConfig.service.d.ts

@@ -1,10 +1,11 @@
 import { Observable } from 'rxjs';
+import { IUrlStateConfig } from './config.constants';
 import * as i0 from "@angular/core";
 export declare class CmatUrlStateConfigService {
     private _config;
     constructor();
-    get config$(): Observable<any>;
-    set config(value: any);
+    get config$(): Observable<IUrlStateConfig>;
+    config(value: IUrlStateConfig): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CmatUrlStateConfigService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<CmatUrlStateConfigService>;
 }

package/styles/components/bundle.scss

@@ -0,0 +1,559 @@
+cmat-card {
+    @apply border shadow bg-card m-2 hover:shadow-lg;
+
+    &.cmat-card-flippable {
+        @apply shadow-none;
+
+        .cmat-card-front,
+        .cmat-card-back {
+            @apply shadow bg-card;
+        }
+    }
+}
+
+.cmat-cascade-bottom-sheet {
+    .sheet-header {
+        .sheet-title {
+            @apply text-secondary;
+        }
+    }
+
+    .menu-item {
+        @apply outline-none;
+
+        &.disabled {
+            @apply text-disabled;
+        }
+
+        &.active {
+            @apply text-primary bg-hover;
+        }
+
+        &:focus:not(:active),
+        &:hover,
+        &.active:hover {
+            @apply bg-hover;
+        }
+    }
+}
+
+.cmat-cascade-list {
+    &.disabled .cascade-label {
+        @apply text-disabled;
+    }
+
+    .cascade-label {
+        span {
+            @apply text-secondary;
+        }
+    }
+}
+
+cmat-cascade-menu {   
+    @apply bg-dialog;
+
+    .menu-item {
+        @apply bg-dialog outline-none;
+
+        &.disabled {
+            @apply text-disabled;
+        }
+
+        &.active {
+            @apply text-primary bg-hover;
+        }
+
+        &:focus:not(:active),
+        &:hover {
+            @apply bg-hover;
+        }
+
+        &.active:hover {
+            @apply bg-hover;
+        }
+
+        &.selected {
+            @apply text-secondary bg-default;
+        }
+    }
+}
+
+$control-width: calc((100% - 32px) / 2);
+
+cmat-date-range {
+    .range {
+        .start,
+        .end {
+            @screen sm {
+                max-width: $control-width;
+                min-width: $control-width;
+                width: $control-width;
+            }
+
+            @apply shadow-sm bg-white border-slate-300 dark:bg-black dark:bg-opacity-5 dark:border-slate-500 #{!important};
+        }
+    }
+
+    .separator {
+        @screen sm {
+            margin: 0 12px;
+        }
+    }       
+}
+
+.cmat-date-range-panel {
+    @apply shadow-2xl bg-card;
+
+    .start,
+    .end {
+        .month {          
+            .month-header {
+                .previous-button,
+                .next-button {                  
+                    .mat-icon {
+                        @apply icon-size-5;
+                    }
+                }
+                
+                .month-label {
+                    @apply text-secondary;
+                }
+            }
+
+            mat-month-view {
+                .mat-calendar-table {
+                    tbody {
+                        tr {
+                            td {
+                                .cmat-date-range {
+                                    &:before {
+                                        @apply bg-primary-200 #{!important};
+                                    }
+                                }
+                            }
+
+                            .cmat-date-range-start,
+                            .cmat-date-range-end {
+                                .mat-calendar-body-cell-content {
+                                    @apply bg-primary text-on-primary #{!important};
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }   
+}
+
+cmat-drawer {
+    @apply bg-card;
+
+    .cmat-drawer-content {
+        @apply bg-card;
+    }
+}
+
+.cmat-datetimepicker-content {
+    @apply bg-card text-hint #{'!important'};
+}
+
+@mixin landscape-calendar-header {
+    .cmat-datetimepicker-calendar {
+        display: flex;
+
+        .cmat-datetimepicker-calendar-header {
+            width: 150px;
+            min-width: 150px;
+            padding: 16px 8px;
+            border-radius: 4px 0 0 4px;
+
+            [dir='rtl'] & {
+                border-radius: 0 4px 4px 0;
+            }
+        }
+
+        .cmat-datetimepicker-calendar-header-year+.cmat-datetimepicker-calendar-header-date-time,
+        .cmat-datetimepicker-calendar-header-date+.cmat-datetimepicker-calendar-header-time {
+            margin-top: 12px;
+        }
+
+        .cmat-datetimepicker-calendar-header-date-time {
+            font-size: 28px;
+            flex-direction: column;
+        }
+
+        .cmat-datetimepicker-calendar-header-time {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .cmat-datetimepicker-calendar-header-ampm-container {
+            flex-direction: row;
+            font-size: 24px;
+        }
+
+        .cmat-datetimepicker-calendar-header-ampm {
+            padding: 4px;
+
+            +.cmat-datetimepicker-calendar-header-ampm {
+                margin: 0 8px;
+            }
+        }
+    }
+}
+
+@mixin landscape-calendar-size {
+    .cmat-datetimepicker-calendar {
+      width: 446px;
+      height: 350px;
+  
+      &.cmat-datetimepicker-calendar-with-time-input {
+        height: 412px;
+      }
+    }
+}
+
+[mode='landscape'] {
+    @include landscape-calendar-header;
+}
+
+@media all and (orientation: landscape) {
+    [mode='auto'] {
+        @include landscape-calendar-header;
+    }
+
+    .cmat-datetimepicker-content[mode='auto'] {
+        @include landscape-calendar-size;
+    }
+}
+
+.cmat-datetimepicker-content[mode='landscape'] {
+    @include landscape-calendar-size;
+}
+
+.cmat-datetimepicker-calendar-header {
+    @apply bg-primary;
+}
+
+.cmat-datetimepicker-body-label {
+    @apply text-secondary;
+}
+
+.cmat-datetimepicker-calendar-table-header {
+    @apply text-hint;
+}
+
+.cmat-datetimepicker-calendar-body-cell-content {
+    @apply text-default;
+
+    &.cmat-datetimepicker-calendar-body-selected {
+        @apply bg-primary;
+
+        &.cmat-datetimepicker-calendar-body-today {
+            @apply shadow;
+        }
+    }
+}
+
+.cmat-datetimepicker-clock-center {
+    @apply bg-primary;
+}
+
+.cmat-datetimepicker-clock-hand {
+    @apply bg-primary;
+
+    &::before {
+        @apply bg-primary;
+    }
+}
+
+.cmat-datetimepicker-clock-cell {
+    @apply text-default;
+
+    &.cmat-datetimepicker-clock-cell-selected {
+        @apply bg-primary;
+    }
+
+    &:not(.cmat-datetimepicker-clock-cell-selected, .cmat-datetimepicker-clock-cell-disabled):hover {
+        @apply bg-hover;
+    }
+}
+
+
+.cmat-datetimepicker-datetimepicker-toggle-active {
+    @apply text-primary;
+
+    &.mat-accent {
+        @apply text-accent;
+    }
+
+    &.mat-warn {
+        @apply text-warn;
+    }
+}
+
+.cmat-datetimepicker-time-input {
+    @apply text-primary;
+
+    &.cmat-datetimepicker-time-input-active {
+        @apply text-primary;
+    }
+}
+  
+.cmat-datetimepicker-content {
+   @apply shadow border-slate-300 bg-card dark:bg-black dark:bg-opacity-5 dark:border-slate-500;
+}  
+
+.cmat-confirmation-dialog-panel {
+   @apply md:w-128;
+}
+
+
+/* Root navigation specific */
+cmat-horizontal-navigation {
+    .cmat-horizontal-navigation-wrapper {
+        /* Basic, Branch */
+        cmat-horizontal-navigation-basic-item,
+        cmat-horizontal-navigation-branch-item {
+            @screen sm {
+                &:hover {
+                    .cmat-horizontal-navigation-item-wrapper {
+                        @apply bg-hover;
+                    }
+                }
+            }            
+        }
+
+        /* Basic - When item active (current link) */
+        cmat-horizontal-navigation-basic-item {
+            .cmat-horizontal-navigation-item-active,
+            .cmat-horizontal-navigation-item-active-forced {
+                .cmat-horizontal-navigation-item-title {
+                    @apply text-primary #{'!important'};
+                }
+
+                .cmat-horizontal-navigation-item-subtitle {
+                    @apply text-primary-400 #{'!important'};
+
+                    .dark & {
+                        @apply text-primary-600 #{'!important'};
+                    }
+                }
+
+                .cmat-horizontal-navigation-item-icon {
+                    @apply text-primary #{'!important'};
+                }
+            }
+        }
+
+        /* Branch - When menu open */
+        cmat-horizontal-navigation-branch-item {
+            .cmat-horizontal-navigation-menu-active,
+            .cmat-horizontal-navigation-menu-active-forced {
+                .cmat-horizontal-navigation-item-wrapper {
+                    @apply bg-hover;
+                }
+            }
+        }
+    }
+}
+
+/* Navigation menu item common */
+.cmat-horizontal-navigation-menu-item {
+    /* Basic - When item active (current link) */
+    cmat-horizontal-navigation-basic-item {
+        .cmat-horizontal-navigation-item-active,
+        .cmat-horizontal-navigation-item-active-forced {
+            .cmat-horizontal-navigation-item-title {
+                @apply text-primary #{'!important'};
+            }
+
+            .cmat-horizontal-navigation-item-subtitle {
+                @apply text-primary-400 #{'!important'};
+
+                .dark & {
+                    @apply text-primary-600 #{'!important'};
+                }
+            }
+
+            .cmat-horizontal-navigation-item-icon {
+                @apply text-primary #{'!important'};
+            }
+        }
+    }
+}
+
+cmat-vertical-navigation-aside-item,
+cmat-vertical-navigation-basic-item,
+cmat-vertical-navigation-collapsable-item,
+cmat-vertical-navigation-group-item {
+    .cmat-vertical-navigation-item-wrapper {
+        .cmat-vertical-navigation-item {
+            color: currentColor;
+
+            .cmat-vertical-navigation-item-icon {
+                @apply text-current opacity-60;
+            }
+
+            .cmat-vertical-navigation-item-title-wrapper {
+                .cmat-vertical-navigation-item-title {
+                    @apply text-current opacity-80;
+                }
+
+                .cmat-vertical-navigation-item-subtitle {
+                    @apply text-current opacity-50;
+                }
+            }
+        }
+    }
+}
+
+/* Aside, Basic, Collapsable */
+cmat-vertical-navigation-aside-item,
+cmat-vertical-navigation-basic-item,
+cmat-vertical-navigation-collapsable-item {
+    > .cmat-vertical-navigation-item-wrapper {
+        .cmat-vertical-navigation-item {
+            /* Active state */
+            &:not(.cmat-vertical-navigation-item-disabled) {
+                &.cmat-vertical-navigation-item-active,
+                &.cmat-vertical-navigation-item-active-forced {
+                    @apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;
+
+                    .cmat-vertical-navigation-item-icon {
+                        @apply opacity-100;
+                    }
+
+                    .cmat-vertical-navigation-item-title {
+                        @apply opacity-100;
+                    }
+
+                    .cmat-vertical-navigation-item-subtitle {
+                        @apply opacity-100;
+                    }
+                }
+            }
+
+            /* Hover state */
+            &:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled) {
+                &:hover {
+                    @apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;
+
+                    .cmat-vertical-navigation-item-icon {
+                        @apply opacity-100;
+                    }
+
+                    .cmat-vertical-navigation-item-title,
+                    .cmat-vertical-navigation-item-arrow {
+                        @apply opacity-100;
+                    }
+
+                    .cmat-vertical-navigation-item-subtitle {
+                        @apply opacity-100;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* Collapsable */
+cmat-vertical-navigation-collapsable-item {
+    /* Expanded state */
+    &.cmat-vertical-navigation-item-expanded {
+        > .cmat-vertical-navigation-item-wrapper {
+            .cmat-vertical-navigation-item {
+                .cmat-vertical-navigation-item-icon {
+                    @apply opacity-100;
+                }
+
+                .cmat-vertical-navigation-item-title,
+                .cmat-vertical-navigation-item-arrow {
+                    @apply opacity-100;
+                }
+
+                .cmat-vertical-navigation-item-subtitle {
+                    @apply opacity-100;
+                }
+            }
+        }
+    }
+}
+
+/* Group */
+cmat-vertical-navigation-group-item {
+    > .cmat-vertical-navigation-item-wrapper {
+        .cmat-vertical-navigation-item {
+            .cmat-vertical-navigation-item-title-wrapper {
+                .cmat-vertical-navigation-item-title {
+                    @apply opacity-100 text-primary-600 dark:text-primary-400;
+                }
+            }
+        }
+    }
+}
+
+.cmat-popover-panel{
+    @apply bg-card;
+}
+
+
+.cmat-select-search-panel {
+    .cmat-select-search-no-entries-found {
+        @apply bg-card;
+    }
+  
+    .mat-tree-node {
+        cursor: pointer;
+        @apply hover:bg-hover;
+    }
+    
+    .selected {
+        background-color: var(--mat-option-focus-state-layer-color);
+        color: var(--mat-option-selected-state-label-text-color);
+
+        .mdc-form-field{
+             color:currentColor;
+            .mdc-label{
+                color:currentColor;
+            }
+        }
+    }
+}
+
+cmat-transfer-picker {
+    @apply flex-col md:flex-row;
+}
+
+.transfer-picker-filter-panel {
+    .chip-list {
+        .chip-wrapper {
+            .chip {
+                @apply text-secondary bg-default;
+
+                &.selected {
+                    @apply bg-primary bg-opacity-50;
+                }
+            }
+        }
+    }
+}
+
+.transfer-picker-source {
+    @apply shadow;
+}
+
+.transfer-picker-target {
+    @apply shadow bg-card;
+}
+
+
+
+
+
+
+
+
+
+

package/styles/overrides/angular-material.scss

@@ -335,6 +335,10 @@
     font-weight: 500 !important;
 }
 
+.mdc-evolution-chip-set__chips{
+    align-items: center;
+}
+
 /* -------------------------------------------------------------------------- */
 /*  @ Dialog
 /* -------------------------------------------------------------------------- */
@@ -436,7 +440,7 @@
 
     /* Default style tweaks and enhancements */
     .mat-mdc-text-field-wrapper {
-        padding: 0;
+        padding:0;
         border-radius: 6px;
         border-width: 1px;
         border-style: solid;
@@ -458,7 +462,7 @@
             display: flex;
             align-items: stretch;
             border-radius: 6px;
-            padding: 0 16px;
+            padding:0 16px;
 
             .mat-mdc-form-field-icon-prefix,
             .mat-mdc-form-field-text-prefix {
@@ -477,7 +481,7 @@
                     margin-right: 10px;
                 }
 
-                >.mat-datepicker-toggle {
+                >.mat-datepicker-toggle,.cmat-datetimepicker-toggle {
                     margin-left: -8px;
                 }
             }
@@ -499,7 +503,7 @@
                     margin-left: 10px;
                 }
 
-                >.mat-datepicker-toggle {
+                >.mat-datepicker-toggle,.cmat-datetimepicker-toggle{
                     margin-right: -8px;
                 }
             }
@@ -688,11 +692,11 @@
                             margin-right: 8px;
                         }
 
-                        >.mat-datepicker-toggle {
+                        >.mat-datepicker-toggle,.cmat-datetimepicker-toggle {
                             margin-right: 4px;
                         }
 
-                        >*:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
+                        >*:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle):not(.cmat-datetimepicker-toggle) {
                             margin-right: 12px;
                         }
                     }
@@ -713,11 +717,11 @@
                             margin-left: 12px !important;
                         }
 
-                        >.mat-datepicker-toggle {
+                        >.mat-datepicker-toggle,.cmat-datetimepicker-toggle {
                             margin-left: 4px !important;
                         }
 
-                        >*:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
+                        >*:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle):not(.cmat-datetimepicker-toggle) {
                             margin-left: 12px !important;
                         }
                     }
@@ -849,11 +853,11 @@
                         margin-right: 12px !important;
                     }
 
-                    >.mat-datepicker-toggle {
+                    >.mat-datepicker-toggle,.cmat-datetimepicker-toggle {
                         margin-right: 8px;
                     }
 
-                    >*:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
+                    >*:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle):not(.cmat-datetimepicker-toggle) {
                         margin-right: 16px;
                     }
                 }
@@ -879,11 +883,11 @@
                         margin: 0 -4px 0 16px !important;
                     }
 
-                    >.mat-datepicker-toggle {
+                    >.mat-datepicker-toggle,.cmat-datetimepicker-toggle {
                         margin-left: 8px;
                     }
 
-                    >*:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle) {
+                    >*:not(.mat-icon):not(.mat-mdc-icon-button):not(.mat-mdc-select):not(.mat-datepicker-toggle):not(.cmat-datetimepicker-toggle) {
                         margin-left: 16px;
                     }
                 }
@@ -1083,10 +1087,6 @@
                 align-items: center;
             }
 
-            &.mat-mdc-menu-item-submenu-trigger {
-                padding-right: 40px;
-            }
-
             .mat-icon {
                 margin-right: 12px;
             }

package/styles/styles.scss

@@ -1,3 +1,8 @@
 @use "tailwind.scss";
 @use "themes.scss";
-@use "main.scss";
+
+@use "./overrides/angular-material.scss";
+
+@use "./components/input.scss";
+@use "./components/bundle.scss";
+

package/styles/tailwind.scss

@@ -43,7 +43,7 @@
         border-bottom-width: 1px;
     }
 
-    input[disabled] {
+    input[disabled]:not(.mdc-checkbox__native-control) {
         opacity: 1;
         -webkit-text-fill-color: currentColor;
     }
@@ -83,4 +83,6 @@
     }
 }
 
-@tailwind components;
+@tailwind components;
+
+@tailwind utilities;