@pepperi-addons/ngx-lib 0.2.59-query-builder.13 → 0.2.61-beta.2

package/src/core/style/components/select.scss

@@ -1,185 +1,187 @@
-@import '../abstracts/mixins';
-
-// -----------------------------------------------------
-//  Override material style
-// -----------------------------------------------------
-mat-select {
-    .mat-select-trigger {
-        display: flex;
-        align-content: center;
-        height: inherit;
-    }
-
-    .mat-select-value {
-        max-width: inherit; // Default is 0
-        // display: flex; Put display: grid instead cause overflow oout of the container width.
-        display: grid;
-        align-self: center;
-    }
-
-    .mat-select-arrow {
-        width: 1.5rem;
-        height: 1.5rem;;
-        // margin: 0 0.25rem;
-        // margin-top: 0.125rem;
-        margin: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &:after {
-            @include select-arrow();
-            cursor: pointer;
-            width: 1rem;
-            height: 1rem;
-        }
-    }
-    
-    &.mat-select-disabled {
-        .mat-select-arrow {
-            &:after {
-                content: none;
-            }
-        }
-    }
-    
-    &.right-alignment {
-        direction: rtl;
-        
-    }
-}
-
-.mat-select-disabled {
-    pointer-events: none;
-}
-
-.mat-select-panel {
-    &.ng-animating {
-        /* display: none;*/
-    }
-
-    .mat-pseudo-checkbox {
-        width: 1rem;
-        height: 1rem;
-        border-radius: 0.25rem;
-    }
-
-    .mat-pseudo-checkbox::after {
-        width: 0;
-        height: 0;
-        // @include box-sizing(border-box);
-        // top: 0.3rem;
-        // left: 0.2rem;
-        // width: 0.5rem;
-        // height: 0.2rem;
-    }
-
-    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
-        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==");
-    }
-}
-
-
-@mixin pep-select-theme($pepperi-theme) {
-    // -----------------------------------------------------
-    //  Override material style
-    // -----------------------------------------------------
-    mat-select {
-        outline: none;
-
-        &.mat-select-disabled {
-            .mat-select-value {
-                color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-            }
-        }
-    }
-
-    .mat-select-arrow-wrapper {
-        transform: unset !important;
-        vertical-align: unset;
-
-        .mat-select-arrow {
-            // background: url(#../../../assets/symbol-defs.svg) no-repeat center center fixed;
-            // border-left: 1px solid Transparent;
-            // border-right: 0px solid Transparent;
-            // border-top: 0px solid Transparent;
-            border: 0;
-
-            &:after {
-                color: get-pep-color($pepperi-theme, color-system-primary, color-base);
-            }
-        }
-    }
-
-    .mat-select-panel {
-        &.ng-animating {
-            /* display: none;*/
-        }
-
-        .mat-option {
-            background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-
-            //&.mat-active,
-            &:hover {
-                @include state-weak-hover($pepperi-theme);
-            }
-            &:active {
-                @include state-weak-active($pepperi-theme, color-weak, false);
-                background: get-pep-color($pepperi-theme, color-weak, color-tran-50) !important;
-            }
-            &:disabled {
-                @include state-weak-disable($pepperi-theme);
-            }
-        }
-        .mat-option.mat-selected {
-            @include state-weak-default($pepperi-theme);
-            // box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, soft);
-
-            //&.mat-active,
-            &:hover {
-                @include state-weak-hover($pepperi-theme);
-            }
-            &:active {
-                @include state-weak-active($pepperi-theme, color-weak, false);
-                background: get-pep-color($pepperi-theme, color-weak, color-tran-50) !important;
-            }
-            &:disabled {
-                @include state-weak-disable($pepperi-theme);
-            }
-        }
-
-        .mat-pseudo-checkbox {
-            @include state-regular-default($pepperi-theme, true);
-
-            &:hover {
-                @include state-regular-hover($pepperi-theme, true);
-            }
-            &:active {
-                @include state-regular-active($pepperi-theme, true);
-            }
-            &:disabled {
-                @include state-regular-disable($pepperi-theme, true);
-            }
-        }
-
-        .mat-pseudo-checkbox.mat-pseudo-checkbox-checked,
-        .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate {
-            @include state-regular-default($pepperi-theme, true);
-            @include inline(get-pep-color($pepperi-theme, color-system-primary, color-flat-r-10), 1px, solid, true);
-
-            &:hover {
-                @include state-regular-hover($pepperi-theme, true);
-            }
-            &:active {
-                @include state-regular-active($pepperi-theme, true);
-            }
-            &:disabled {
-                @include state-regular-disable($pepperi-theme, true);
-            }
-        }
-
-        .mat-pseudo-checkbox::after {
-            color: get-pep-color($pepperi-theme, color-text, color-main) !important;
-        }
-    }
-}
+// @use '../abstracts/variables';
+// @use '../abstracts/mixins';
+// @use '../abstracts/functions';
+
+// // -----------------------------------------------------
+// //  Override material style
+// // -----------------------------------------------------
+// mat-select {
+//     .mat-select-trigger {
+//         display: flex;
+//         align-content: center;
+//         height: inherit;
+//     }
+
+//     .mat-select-value {
+//         max-width: inherit; // Default is 0
+//         // display: flex; Put display: grid instead cause overflow oout of the container width.
+//         display: grid;
+//         align-self: center;
+//     }
+
+//     .mat-select-arrow {
+//         width: 1.5rem;
+//         height: 1.5rem;;
+//         // margin: 0 0.25rem;
+//         // margin-top: 0.125rem;
+//         margin: 0;
+//         display: flex;
+//         align-items: center;
+//         justify-content: center;
+
+//         &:after {
+//             @include mixins.select-arrow();
+//             cursor: pointer;
+//             width: 1rem;
+//             height: 1rem;
+//         }
+//     }
+    
+//     &.mat-select-disabled {
+//         .mat-select-arrow {
+//             &:after {
+//                 content: none;
+//             }
+//         }
+//     }
+    
+//     &.right-alignment {
+//         direction: rtl;
+        
+//     }
+// }
+
+// .mat-select-disabled {
+//     pointer-events: none;
+// }
+
+// .mat-select-panel {
+//     &.ng-animating {
+//         /* display: none;*/
+//     }
+
+//     .mat-pseudo-checkbox {
+//         width: 1rem;
+//         height: 1rem;
+//         border-radius: 0.25rem;
+//     }
+
+//     .mat-pseudo-checkbox::after {
+//         width: 0;
+//         height: 0;
+//         // @include mixins.box-sizing(border-box);
+//         // top: 0.3rem;
+//         // left: 0.2rem;
+//         // width: 0.5rem;
+//         // height: 0.2rem;
+//     }
+
+//     .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
+//         content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==");
+//     }
+// }
+
+
+// @mixin pep-select-theme() {
+//     // -----------------------------------------------------
+//     //  Override material style
+//     // -----------------------------------------------------
+//     mat-select {
+//         outline: none;
+
+//         &.mat-select-disabled {
+//             .mat-select-value {
+//                 color: functions.get-pep-color(color-text, color-dimmed);
+//             }
+//         }
+//     }
+
+//     .mat-select-arrow-wrapper {
+//         transform: unset !important;
+//         vertical-align: unset;
+
+//         .mat-select-arrow {
+//             // background: url(#../../../assets/symbol-defs.svg) no-repeat center center fixed;
+//             // border-left: 1px solid Transparent;
+//             // border-right: 0px solid Transparent;
+//             // border-top: 0px solid Transparent;
+//             border: 0;
+
+//             &:after {
+//                 color: functions.get-pep-color(color-system-primary, color-base);
+//             }
+//         }
+//     }
+
+//     .mat-select-panel {
+//         &.ng-animating {
+//             /* display: none;*/
+//         }
+
+//         .mat-option {
+//             background: functions.get-pep-color(color-system-primary-invert, color-base);
+
+//             //&.mat-active,
+//             &:hover {
+//                 @include mixins.state-weak-hover();
+//             }
+//             &:active {
+//                 @include mixins.state-weak-active(color-weak, false);
+//                 background: functions.get-pep-color(color-weak, color-tran-50) !important;
+//             }
+//             &:disabled {
+//                 @include mixins.state-weak-disable();
+//             }
+//         }
+//         .mat-option.mat-selected {
+//             @include mixins.state-weak-default();
+//             // box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+
+//             //&.mat-active,
+//             &:hover {
+//                 @include mixins.state-weak-hover();
+//             }
+//             &:active {
+//                 @include mixins.state-weak-active(color-weak, false);
+//                 background: functions.get-pep-color(color-weak, color-tran-50) !important;
+//             }
+//             &:disabled {
+//                 @include mixins.state-weak-disable();
+//             }
+//         }
+
+//         .mat-pseudo-checkbox {
+//             @include mixins.state-regular-default(true);
+
+//             &:hover {
+//                 @include mixins.state-regular-hover(true);
+//             }
+//             &:active {
+//                 @include mixins.state-regular-active(true);
+//             }
+//             &:disabled {
+//                 @include mixins.state-regular-disable(true);
+//             }
+//         }
+
+//         .mat-pseudo-checkbox.mat-pseudo-checkbox-checked,
+//         .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate {
+//             @include mixins.state-regular-default(true);
+//             @include mixins.inline(functions.get-pep-color(color-system-primary, color-flat-r-10), 1px, solid, true);
+
+//             &:hover {
+//                 @include mixins.state-regular-hover(true);
+//             }
+//             &:active {
+//                 @include mixins.state-regular-active(true);
+//             }
+//             &:disabled {
+//                 @include mixins.state-regular-disable(true);
+//             }
+//         }
+
+//         .mat-pseudo-checkbox::after {
+//             color: functions.get-pep-color(color-text, color-main) !important;
+//         }
+//     }
+// }

package/src/core/style/components/signature.scss

@@ -1,12 +1,14 @@
-// -----------------------------------------------------
-//  Signature
-// -----------------------------------------------------
-@mixin pep-signature-theme($pepperi-theme) {
-    .pepperi-file-container, .pep-file-container {
-        .modal-dialog {
-            .modal-content {
-                color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-            }
-        }
-    }
-}
+// @use '../abstracts/functions';
+
+// // -----------------------------------------------------
+// //  Signature
+// // -----------------------------------------------------
+// @mixin pep-signature-theme() {
+//     .pepperi-file-container, .pep-file-container {
+//         .modal-dialog {
+//             .modal-content {
+//                 color: functions.get-pep-color(color-text, color-dimmed);
+//             }
+//         }
+//     }
+// }

package/src/core/style/components/splitter.scss

@@ -1,64 +1,67 @@
-// -----------------------------------------------------
-//  Splitter
-// -----------------------------------------------------
-.pepperi-separator-field, .pep-separator-field {
-    //width: 100%;
-    padding: 0;
-    height: 3.5rem;
-    max-height: 3.5rem;
-    margin-top: 0.5rem;
-    // margin-bottom: 1rem;
-
-    &.pepperi-small-separator-field, &.pep-small-separator-field {
-        height: 1.15rem;
-        margin-top: 0.25rem !important;
-        margin-bottom: 0 !important;
-
-        .small-block-with-text {
-            display: block;
-            font-weight: $font-weight-bold;
-            @include ellipsis();
-        }
-    }
-
-    &.wrap {
-        display: flex;
-
-        .block-with-text {
-            width: 100%;
-            margin-bottom: 0.5rem;
-            font-weight: $font-weight-bold;
-            align-self: flex-end;
-            max-height: inherit;
-        }
-
-        // align left
-        &.align-left,
-        &.align-0,
-        &.align-1 {
-            .block-with-text {
-                @include multi-line-ellipsis(1);
-            }
-        }
-
-        // align right
-        &.align-right,
-        &.align-2 {
-            .block-with-text {
-                @include multi-line-ellipsis(2);
-            }
-        }
-
-        // align center
-        &.align-center,
-        &.align-3 {
-            .block-with-text {
-                @include multi-line-ellipsis(3);
-            }
-        }
-    }
-}
-
-@mixin pep-splitter-theme($pepperi-theme) {
-
-}
+// @use '../abstracts/variables';
+// @use '../abstracts/mixins';
+
+// // -----------------------------------------------------
+// //  Splitter
+// // -----------------------------------------------------
+// .pepperi-separator-field, .pep-separator-field {
+//     //width: 100%;
+//     padding: 0;
+//     height: 3.5rem;
+//     max-height: 3.5rem;
+//     margin-top: 0.5rem;
+//     // margin-bottom: 1rem;
+
+//     &.pepperi-small-separator-field, &.pep-small-separator-field {
+//         height: 1.15rem;
+//         margin-top: 0.25rem !important;
+//         margin-bottom: 0 !important;
+
+//         .small-block-with-text {
+//             display: block;
+//             font-weight: variables.$font-weight-bold;
+//             @include mixins.ellipsis();
+//         }
+//     }
+
+//     &.wrap {
+//         display: flex;
+
+//         .block-with-text {
+//             width: 100%;
+//             margin-bottom: 0.5rem;
+//             font-weight: variables.$font-weight-bold;
+//             align-self: flex-end;
+//             max-height: inherit;
+//         }
+
+//         // align left
+//         &.align-left,
+//         &.align-0,
+//         &.align-1 {
+//             .block-with-text {
+//                 @include mixins.multi-line-ellipsis(1);
+//             }
+//         }
+
+//         // align right
+//         &.align-right,
+//         &.align-2 {
+//             .block-with-text {
+//                 @include mixins.multi-line-ellipsis(2);
+//             }
+//         }
+
+//         // align center
+//         &.align-center,
+//         &.align-3 {
+//             .block-with-text {
+//                 @include mixins.multi-line-ellipsis(3);
+//             }
+//         }
+//     }
+// }
+
+// @mixin pep-splitter-theme() {
+
+// }