cmat 0.0.3 → 0.0.4

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;

package/components/breadcrumb/breadcrumb.component.scss

@@ -1,18 +0,0 @@
-cmat-breadcrumb {
-    .cmat-breadcrumb-root {
-        color: rgba(0, 0, 0, 0.6);
-    }
-
-    .cmat-breadcrumb-trail {
-        color: rgba(0, 0, 0, 0.9);
-    }
-
-    .cmat-breadcrumb-link {
-        @apply flex items-center text-primary whitespace-nowrap no-underline cursor-pointer;
-        transition: text-decoration 0.3s;
-    }
-
-    .cmat-breadcrumb-link:hover {
-        @apply underline;
-    }
-}

package/components/card/card.component.scss

@@ -1,63 +0,0 @@
-cmat-card {
-    position: relative;
-    display: flex;
-    overflow: hidden;
-    @apply rounded-2xl shadow bg-card;
-
-    /* Flippable */
-    &.cmat-card-flippable {
-        border-radius: 0;
-        overflow: visible;
-        transform-style: preserve-3d;
-        transition: transform 1s;
-        perspective: 600px;
-        background: transparent;
-        @apply shadow-none;
-
-        &.cmat-card-face-back {
-            .cmat-card-front {
-                visibility: hidden;
-                opacity: 0;
-                transform: rotateY(180deg);
-            }
-
-            .cmat-card-back {
-                visibility: visible;
-                opacity: 1;
-                transform: rotateY(360deg);
-            }
-        }
-
-        .cmat-card-front,
-        .cmat-card-back {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-            z-index: 10;
-            transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s,
-                opacity 0s ease-in 0.2s;
-            backface-visibility: hidden;
-            @apply rounded-2xl shadow bg-card;
-        }
-
-        .cmat-card-front {
-            position: relative;
-            opacity: 1;
-            visibility: visible;
-            transform: rotateY(0deg);
-            overflow: hidden;
-        }
-
-        .cmat-card-back {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            opacity: 0;
-            visibility: hidden;
-            transform: rotateY(180deg);
-            overflow: hidden auto;
-        }
-    }
-}

package/components/cascade/cascade-bottom-sheet/cascade-bottom-sheet.component.scss

@@ -1,43 +0,0 @@
-.cmat-cascade-bottom-sheet {
-    @apply p-0;
-    margin: -8px -16px;
-
-    .sheet-header {
-        @apply flex flex-1 items-center text-lg border-b;
-        padding: 12px 16px;
-
-        .sheet-title {
-            @apply text-secondary m-0 p-0 tracking-wider text-center flex-grow;
-        }
-    }
-
-    .menu-list {
-       vertical-align: top;
-        @apply box-border m-0 p-0 w-full overflow-hidden relative;
-
-        height: 204px;
-    }
-
-    .menu-item {
-        @apply leading-loose p-0 text-ellipsis box-border cursor-pointer outline-none;
-
-        font-size: 14px;
-        line-height: 3em;
-        height: 3em;
-
-        &.disabled {
-            @apply text-disabled;
-            pointer-events: none;
-        }
-
-        &.active {
-            @apply text-primary bg-hover;
-        }
-
-        &:focus:not(:active),
-        &:hover,
-        &.active:hover {
-            @apply bg-hover;
-        }
-    }
-}

package/components/cascade/cascade-list/cascade-list.component.scss

@@ -1,22 +0,0 @@
-.cmat-cascade-list {
-    @apply inline-block relative w-full leading-loose;
-
-    mat-form-field {
-        @apply w-full;
-    }
-
-    input {
-        @apply cursor-pointer;
-    }
-
-    &.disabled .cascade-label {
-        z-index: 2;
-        @apply text-disabled;
-    }
-
-    .cascade-label {
-        span {
-            @apply text-secondary;
-        }
-    }
-}

package/components/cascade/cascade-menu/cascade-menu.component.scss

@@ -1,48 +0,0 @@
-.cmat-cascade-menu {
-    z-index: 2007;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
-    @apply absolute left-0 whitespace-nowrap bg-dialog;
-
-    .menu-list {
-        @apply inline-block border-r box-border m-0 p-2 overflow-hidden relative;
-        height: 204px;
-        min-width: 160px;
-        vertical-align: top;
-    }
-
-    .menu-list:last-child {
-        @apply border-r-0;
-    }
-
-    .menu-item {
-        @apply leading-loose h-12 p-0 relative whitespace-nowrap overflow-hidden text-ellipsis bg-dialog box-border cursor-pointer
-        outline-none;
-
-        &.disabled {
-            @apply text-disabled cursor-not-allowed;
-        }
-
-        &.active {
-            @apply text-primary bg-hover;
-        }
-
-        &:focus:not(:active),
-        &:hover {
-            @apply bg-hover;
-        }
-
-        &.active:hover {
-            @apply bg-hover;
-        }
-
-        &.selected {
-            @apply text-secondary bg-default;
-        }
-
-        & .item-icon {
-            @apply absolute justify-items-center inset-y-2/4 right-0;
-
-            transform: translateY(-50%);
-        }
-    }
-}

package/components/date-range/date-range.component.scss

@@ -1,232 +0,0 @@
-/* Variables */
-$body-cell-padding: 2px;
-$control-width: calc((100% - 32px) / 2);
-
-cmat-date-range {
-    display: flex;
-
-    .range {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        height: 48px;
-        min-height: 48px;
-        max-height: 48px;
-        cursor: pointer;
-
-        .start,
-        .end {
-            @screen sm {
-                max-width: $control-width;
-                min-width: $control-width;
-                width: $control-width;
-            }
-
-            display: flex;
-            align-items: center;
-            height: 100%;
-            padding: 0 16px;
-            border-radius: 6px;
-            border-width: 1px;
-            line-height: 1;
-            @apply shadow-sm bg-white border-slate-300 dark:bg-black dark:bg-opacity-5 dark:border-slate-500 #{!important};
-        }
-
-        .date {
-            white-space: nowrap;
-
-            + .time {
-                margin-left: 8px;
-            }
-        }
-
-        .time {
-            white-space: nowrap;
-        }
-    }
-
-    .separator {
-        margin: 0 8px;
-
-        @screen sm {
-            margin: 0 12px;
-        }
-    }       
-}
-
-.cmat-date-range-panel {
-    border-radius: 4px;
-    padding: 24px;
-    @apply shadow-2xl bg-card;
-
-    .start,
-    .end {
-        display: flex;
-        flex-direction: column;
-
-        .month {
-            max-width: 196px;
-            min-width: 196px;
-            width: 196px;
-
-            .month-header {
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 32px;
-                margin-bottom: 16px;
-
-                .previous-button,
-                .next-button {
-                    position: absolute;
-                    width: 24px !important;
-                    height: 24px !important;
-                    min-height: 24px !important;
-                    max-height: 24px !important;
-                    line-height: 24px !important;
-
-                    .mat-icon {
-                        @apply icon-size-5;
-                    }
-                }
-
-                .previous-button {
-                    left: 0;
-                }
-
-                .next-button {
-                    right: 0;
-                }
-
-                .month-label {
-                    font-weight: 500;
-                    @apply text-secondary;
-                }
-            }
-
-            mat-month-view {
-                display: flex;
-                min-height: 188px;
-
-                .mat-calendar-table {
-                    width: 100%;
-                    border-collapse: collapse;
-
-                    tbody {
-                        tr {
-                            &[aria-hidden="true"] {
-                                display: none !important;
-                            }
-
-                            &:first-child {
-                                td:first-child {
-                                    &[aria-hidden="true"] {
-                                        visibility: hidden;
-                                        pointer-events: none;
-                                        opacity: 0;
-                                    }
-                                }
-                            }
-
-                            td {
-                                .cmat-date-range {
-                                    &:before {
-                                        @apply bg-primary-200 #{!important};
-                                    }
-                                }
-
-                                .mat-calendar-body-cell-content {
-                                    background-color: transparent !important;
-                                }
-                            }
-
-                            .cmat-date-range-start,
-                            .cmat-date-range-end {
-                                .mat-calendar-body-cell-content {
-                                    @apply bg-primary text-on-primary #{!important};
-                                }
-                            }
-                        }
-
-                        .mat-calendar-body-today {
-                            border: none !important;
-                        }
-
-                        .mat-calendar-body-cell {
-                            width: 28px !important;
-                            height: 28px !important;
-                            padding: $body-cell-padding !important;
-
-                            &.cmat-date-range {
-                                &:before {
-                                    content: "";
-                                    position: absolute;
-                                    top: $body-cell-padding;
-                                    right: 0;
-                                    bottom: $body-cell-padding;
-                                    left: 0;
-                                }
-
-                                &.cmat-date-range-start {
-                                    &:before {
-                                        border-radius: 999px 0 0 999px;
-                                    }
-
-                                    &.cmat-date-range-end {
-                                        &:before {
-                                            right: $body-cell-padding;
-                                            border-radius: 999px;
-                                        }
-                                    }
-                                }
-
-                                &.cmat-date-range-end {
-                                    &:before {
-                                        border-radius: 0 999px 999px 0;
-                                    }
-                                }
-                            }
-
-                            .mat-calendar-body-cell-content {
-                                position: relative;
-                                top: 0;
-                                left: 0;
-                                width: 24px;
-                                height: 24px;
-                                font-size: 12px;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .time {
-        width: 100%;
-        max-width: 196px;
-    }
-
-    .start {
-        align-items: flex-start;
-        margin-right: 20px;
-
-        .month {
-            .month-label {
-                margin-left: 8px;
-            }
-        }
-    }
-
-    .end {
-        align-items: flex-end;
-        margin-left: 20px;
-
-        .month {
-            .month-label {
-                margin-right: 8px;
-            }
-        }
-    }
-}

package/components/drawer/drawer.component.scss

@@ -1,133 +0,0 @@
-/* Variables */
-:root {
-    --cmat-drawer-width: 320px;
-}
-
-cmat-drawer {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    width: var(--cmat-drawer-width);
-    min-width: var(--cmat-drawer-width);
-    max-width: var(--cmat-drawer-width);
-    z-index: 300;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35);
-    @apply bg-card;
-
-    /* Animations */
-    &.cmat-drawer-animations-enabled {
-        transition-duration: 400ms;
-        transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-        transition-property: visibility, margin-left, margin-right, transform, width, max-width, min-width;
-
-        .cmat-drawer-content {
-            transition-duration: 400ms;
-            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-            transition-property: width, max-width, min-width;
-        }
-    }
-
-    /* Over mode */
-    &.cmat-drawer-mode-over {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-
-        /* Fixed mode */
-        &.cmat-drawer-fixed {
-            position: fixed;
-        }
-    }
-
-    /* Left position */
-    &.cmat-drawer-position-left {
-
-        /* Side mode */
-        &.cmat-drawer-mode-side {
-            margin-left: calc(var(--cmat-drawer-width) * -1);
-
-            &.cmat-drawer-opened {
-                margin-left: 0;
-            }
-        }
-
-        /* Over mode */
-        &.cmat-drawer-mode-over {
-            left: 0;
-            transform: translate3d(-100%, 0, 0);
-
-            &.cmat-drawer-opened {
-                transform: translate3d(0, 0, 0);
-            }
-        }
-
-        /* Content */
-        .cmat-drawer-content {
-            left: 0;
-        }
-    }
-
-    /* Right position */
-    &.cmat-drawer-position-right {
-
-        /* Side mode */
-        &.cmat-drawer-mode-side {
-            margin-right: calc(var(--cmat-drawer-width) * -1);
-
-            &.cmat-drawer-opened {
-                margin-right: 0;
-            }
-        }
-
-        /* Over mode */
-        &.cmat-drawer-mode-over {
-            right: 0;
-            transform: translate3d(100%, 0, 0);
-
-            &.cmat-drawer-opened {
-                transform: translate3d(0, 0, 0);
-            }
-        }
-
-        /* Content */
-        .cmat-drawer-content {
-            right: 0;
-        }
-    }
-
-    /* Content */
-    .cmat-drawer-content {
-        position: absolute;
-        display: flex;
-        flex: 1 1 auto;
-        top: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        @apply bg-card;
-    }
-}
-
-/* Overlay */
-.cmat-drawer-overlay {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 299;
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.6);
-
-    /* Fixed mode */
-    &.cmat-drawer-overlay-fixed {
-        position: fixed;
-    }
-
-    /* Transparent overlay */
-    &.cmat-drawer-overlay-transparent {
-        background-color: transparent;
-    }
-}

package/components/highlight/highlight.component.scss

@@ -1,3 +0,0 @@
-textarea[cmat-highlight] {
-    display: none;
-}