@pepperi-addons/ngx-lib 0.2.61 → 0.3.2

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

@@ -1,14 +1,16 @@
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
 // -----------------------------------------------------
 //  Input
 // -----------------------------------------------------
 .pepperi-input, .pep-input {
-    border-radius: $border-radius-md;
+    border-radius: variables.$border-radius-md;
     min-width: 1.5rem;
-    // width: 100%;
     width: inherit;
-    // padding: 0.5rem 0.75rem;
     padding: 0 0.75rem;
-    height: $form-field-height; // 2.5rem;
+    height: variables.$form-field-height; // 2.5rem;
 
     &:hover {
         //cursor: pointer;
@@ -28,67 +30,63 @@
 
 .pepperi-card-input, .pep-card-input {
     &:not(.multi-rows) {
-        @include ellipsis();
+        @include mixins.ellipsis();
+        align-items: center;
     }
 
     padding: 0.125rem 0.25rem;
 }
 
 .pepperi-report-input, .pep-report-input {
-    // padding: 0.7rem 0.75rem;
     padding: 0 0.25rem;
-    height: $table-row-fieldset-height; // 2.5rem;
-    line-height: $table-row-fieldset-height !important; // 2.5rem !important;
+    height: variables.$table-row-fieldset-height; // 2.5rem;
+    line-height: variables.$table-row-fieldset-height !important; // 2.5rem !important;
     vertical-align: middle;
     display: block;
-    @include ellipsis();
-
-    &.readonly {
-        // padding: 0.7rem 0.5rem;
-    }
+    @include mixins.ellipsis();
 }
 
-@mixin pep-input-theme($pepperi-theme) {
+@mixin pep-input-theme() {
     .pepperi-input:not(.pepperi-checkbox-container), .pep-input:not(.pep-checkbox-container) {
-        // background: get-pep-color($pepperi-theme, color-system-primary, color-tran-30);
+        // background: functions.get-pep-color(color-system-primary, color-tran-30);
         border: none;
 
         &::placeholder {
-            color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+            color: functions.get-pep-color(color-text, color-dimmed);
             opacity: 1; /* Firefox */
         }
 
         &::-ms-input-placeholder {
             /* Internet Explorer 10-11 */
-            color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+            color: functions.get-pep-color(color-text, color-dimmed);
         }
 
         &::-ms-input-placeholder {
             /* Microsoft Edge */
-            color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+            color: functions.get-pep-color(color-text, color-dimmed);
         }
 
         &::error {
-            @include state-error($pepperi-theme);
+            @include mixins.state-error();
         }
 
-        @include state-weak-default($pepperi-theme);
+        @include mixins.state-weak-default();
         &.no-default-background {
             background: unset;
         }
 
         &:hover:not(.disable) {
-            @include state-weak-hover($pepperi-theme);
+            @include mixins.state-weak-hover();
         }
         &:focus:not(.disable) {
-            @include state-weak-focus($pepperi-theme);
+            @include mixins.state-weak-focus();
         }
         &:active {
-            @include state-weak-active($pepperi-theme);
+            @include mixins.state-weak-active();
         }
         &.disable,
         &:disabled {
-            @include state-weak-disable($pepperi-theme);
+            @include mixins.state-weak-disable();
         }
     }
 }

package/src/core/style/components/quantity-selector.scss

@@ -1,14 +1,17 @@
 
-.pepperi-quantity-selector-container, .pep-quantity-selector-container {
-    .mat-form-field .mat-form-field-wrapper {
-        .mat-form-field-flex {
-            padding: 0 0.25rem !important;
-        }
-    }
+// .pepperi-quantity-selector-container, .pep-quantity-selector-container {
+//     .mat-form-field .mat-form-field-wrapper {
+//         .mat-form-field-flex {
+//             padding: 0 0.25rem !important;
+//         }
+//     }
 
-    .pepperi-table-quantity-selector, .pep-table-quantity-selector {
-        .mat-form-field .mat-form-field-wrapper {
-            margin-top: 0 !important;
-        }
-    }
-}
+//     .pepperi-table-quantity-selector, .pep-table-quantity-selector {
+//         .mat-form-field .mat-form-field-wrapper {
+//             margin-top: 0 !important;
+//         }
+//     }
+// }
+
+// @mixin pep-quantity-selector-theme() {
+// }

package/src/core/style/components/radio-button.scss

@@ -1,4 +1,7 @@
-@import '../abstracts/mixins';
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
 
 @mixin pep-radio-button-size($size) {
     @if $size == 'xl' {
@@ -50,7 +53,7 @@
 
     &.mat-radio-button {
         .mat-radio-label {
-            @include fix-inline-z-index();
+            @include mixins.fix-inline-z-index();
             margin: 0;
         }
 
@@ -62,44 +65,25 @@
     }
 }
 
-@mixin pep-radio-button-theme($pepperi-theme) {
+@mixin pep-radio-button-theme() {
     .pepperi-radio-button, .pep-radio-button {
-        // @include state-weak-default($pepperi-theme);
-        // &.no-default-background {
-        //     background: unset;
-        // }
-        
-        // &:hover:not(.disable) {
-        //     @include state-weak-hover($pepperi-theme);
-        // }
-        // &:focus:not(.disable) {
-        //     @include state-weak-focus($pepperi-theme);
-        // }
-        // // &:active {
-        // //     @include state-weak-active($pepperi-theme);
-        // // }
-        // &.disable,
-        // &:disabled {
-        //     @include state-weak-disable($pepperi-theme);
-        // }
-        
         &.mat-radio-button {
             .mat-radio-inner-circle,
             .mat-radio-outer-circle {
-                @include state-regular-default($pepperi-theme, true);
+                @include mixins.state-regular-default(true);
             }
 
             &:hover {
                 .mat-radio-inner-circle,
                 .mat-radio-outer-circle {
-                    @include state-regular-hover($pepperi-theme, true);
+                    @include mixins.state-regular-hover(true);
                 }
             }
 
             &:active {
                 .mat-radio-inner-circle,
                 .mat-radio-outer-circle {
-                    @include state-regular-active($pepperi-theme, true);
+                    @include mixins.state-regular-active(true);
                 }
             }
 
@@ -107,21 +91,21 @@
             &.mat-radio-checked {
                 .mat-radio-inner-circle {
                     border: unset;
-                    background: get-pep-color($pepperi-theme, color-system-primary, color-flat-l-10);
+                    background: functions.get-pep-color(color-system-primary, color-flat-l-10);
                 }
 
                 .mat-radio-outer-circle {
-                    @include state-regular-active($pepperi-theme, true);
-                    background: get-pep-color($pepperi-theme, color-system-primary, color-flat-r-30);
+                    @include mixins.state-regular-active(true);
+                    background: functions.get-pep-color(color-system-primary, color-flat-r-30);
                 }
 
                 &:hover {
                     .mat-radio-outer-circle {
-                        @include state-regular-hover($pepperi-theme, true);
+                        @include mixins.state-regular-hover(true);
                     }
 
                     .mat-radio-inner-circle {
-                        background: get-pep-color($pepperi-theme, color-text, color-dimmed);
+                        background: functions.get-pep-color(color-text, color-dimmed);
                     }
                 }
             }
@@ -130,24 +114,24 @@
             &.cdk-focused {
                 &:hover {
                     .mat-radio-outer-circle {
-                        @include state-regular-hover($pepperi-theme, true);
-                        // @include focus($pepperi-theme);
+                        @include mixins.state-regular-hover(true);
+                        // @include mixins.focus();
                     }
 
                     .mat-radio-inner-circle {
-                        background: get-pep-color($pepperi-theme, color-text, color-dimmed);
+                        background: functions.get-pep-color(color-text, color-dimmed);
                     }
                 }
 
                 &:active {
                     .mat-radio-outer-circle {
-                        @include state-regular-active($pepperi-theme, true);
-                        // @include focus($pepperi-theme);
+                        @include mixins.state-regular-active(true);
+                        // @include mixins.focus();
                     }
                 }
 
                 .mat-radio-outer-circle {
-                    @include state-regular-focus($pepperi-theme, true);
+                    @include mixins.state-regular-focus(true);
                 }
             }
 
@@ -156,11 +140,11 @@
                 pointer-events: none;
 
                 .mat-radio-inner-circle {
-                    background: get-pep-color($pepperi-theme, color-text, color-disabled);
+                    background: functions.get-pep-color(color-text, color-disabled);
                 }
 
                 .mat-radio-outer-circle {
-                    @include state-regular-disable($pepperi-theme, true);
+                    @include mixins.state-regular-disable(true);
                 }
             }
         }

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;
-        }
-    }
+// @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;
-            }
-        }
-    }
+//     &.mat-select-disabled {
+//         .mat-select-arrow {
+//             &:after {
+//                 content: none;
+//             }
+//         }
+//     }
     
-    &.right-alignment {
-        direction: rtl;
+//     &.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;
-        }
-    }
-}
+//     }
+// }
+
+// .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;
+//         }
+//     }
+// }