@pepperi-addons/ngx-lib 0.2.59-query-builder.7 → 0.2.61

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

@@ -1,185 +1,185 @@
-@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;
-        }
-    }
-}
+@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;
+        }
+    }
+}

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

@@ -1,12 +1,12 @@
-// -----------------------------------------------------
-//  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);
-            }
-        }
-    }
-}
+// -----------------------------------------------------
+//  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);
+            }
+        }
+    }
+}

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

@@ -1,64 +1,64 @@
-// -----------------------------------------------------
-//  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) {
-
-}
+// -----------------------------------------------------
+//  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) {
+
+}