@mediusinc/mng-commons 5.0.0-rc.0-c31d5206 → 5.0.0-rc.1

package/scss/v2/theme/theme-base/mng/_mng_theme_dialog.scss

@@ -1,206 +0,0 @@
-@import 'mng_variables';
-
-.p-dialog {
-    .p-dialog-header {
-        border-top-right-radius: $dialogBorderRadius;
-        border-top-left-radius: $dialogBorderRadius;
-    }
-
-    .p-dialog-footer {
-        border-bottom-right-radius: $dialogBorderRadius;
-        border-bottom-left-radius: $dialogBorderRadius;
-    }
-
-    &.mng-dialog {
-        height: 90vh;
-        width: 60vw;
-
-        @include mediaMaxLg() {
-            width: 80vw;
-        }
-
-        @include mediaMaxMd() {
-            width: 90vw;
-        }
-
-        &.mng-dialog-xl {
-            height: 100vh;
-            width: 100vw;
-        }
-
-        &.mng-dialog-lg {
-            height: 95vh;
-            width: 80vw;
-
-            @include mediaMaxLg() {
-                width: 85vw;
-            }
-
-            @include mediaMaxMd() {
-                width: 90vw;
-            }
-        }
-
-        &.mng-dialog-sm {
-            width: 50vw;
-            height: 70vh;
-
-            @include mediaMaxLg() {
-                width: 70vw;
-                height: 80vh;
-            }
-
-            @include mediaMaxMd() {
-                width: 80vw;
-            }
-
-            @include mediaMaxXs() {
-                width: 90vw;
-            }
-        }
-
-        &.mng-dialog-xs {
-            width: 30vw;
-            height: initial;
-
-            @media (max-width: 1500px) {
-                width: 45vw;
-            }
-
-            @include mediaMaxLg() {
-                width: 60vw;
-            }
-
-            @include mediaMaxMd() {
-                width: 70vw;
-            }
-
-            @include mediaMaxXs() {
-                width: 90vw;
-            }
-        }
-
-        &.mng-formly-field-lookup-dialog {
-            width: 95vw;
-            height: initial;
-            max-height: 90vh;
-
-            @include mediaMinSm() {
-                width: 90vw;
-            }
-
-            @include mediaMinMd() {
-                width: 80vw;
-            }
-
-            @include mediaMinLg() {
-                width: 70vw;
-            }
-        }
-    }
-
-    &.mng-action-editor-dialog,
-    &.mng-formly-field-table-multiselect-dialog {
-        .p-dialog-content {
-            border-bottom-left-radius: $dialogBorderRadius;
-            border-bottom-right-radius: $dialogBorderRadius;
-        }
-    }
-
-    &.mng-formly-field-table-multiselect-dialog {
-        .p-dialog-content {
-            padding: 0;
-            overflow-y: hidden;
-        }
-
-        .formly-field-table-multiselect-dialog-form-container {
-            padding: $mngDialogContentPadding;
-            overflow: auto;
-        }
-
-        .mng-formly-field-table-multiselect-dialog-footer {
-            padding: $mngDialogFooterPadding;
-
-            button {
-                width: initial;
-                margin: 0.15rem 0.15rem;
-            }
-        }
-    }
-
-    &.mng-formly-field-lookup-dialog {
-        .p-dialog-content {
-            padding-bottom: 0;
-        }
-
-        .mng-formly-field-table-multiselect-dialog-table {
-            padding: $mngDialogContentPadding;
-        }
-
-        .p-dialog-footer {
-            padding: $mngDialogFooterPadding;
-
-            button {
-                margin: 0.15rem 0.15rem;
-            }
-        }
-    }
-
-    &.mng-action-editor-dialog {
-        .p-dialog-content {
-            padding: 0;
-            overflow-y: hidden;
-        }
-
-        .mng-action-editor-form-container {
-            padding: $mngDialogContentPadding;
-            overflow-y: auto;
-        }
-
-        .mng-action-editor-footer-container {
-            padding: $mngDialogFooterPadding;
-        }
-    }
-}
-
-.mng-message-detail-dialog {
-    overflow: hidden;
-
-    .p-dialog-header,
-    .p-dialog-content {
-        border-left: 12px solid transparent;
-        border-radius: 0 !important;
-    }
-
-    &-info {
-        .p-dialog-header,
-        .p-dialog-content {
-            border-left-color: $infoButtonBg;
-        }
-    }
-    &-success {
-        .p-dialog-header,
-        .p-dialog-content {
-            border-left-color: $successButtonBg;
-        }
-    }
-    &-warning {
-        .p-dialog-header,
-        .p-dialog-content {
-            border-left-color: $warningButtonBg;
-        }
-    }
-    &-error {
-        .p-dialog-header,
-        .p-dialog-content {
-            border-left-color: $errorColor;
-        }
-    }
-}
-
-.p-confirm-dialog {
-    .p-confirm-dialog-accept i,
-    .p-confirm-dialog-reject i {
-        margin-right: 0.5rem;
-    }
-}

package/scss/v2/theme/theme-base/mng/_mng_theme_dropdown.scss

@@ -1,32 +0,0 @@
-.mng-filter-lookup-dropdown {
-    .p-dropdown-items-wrapper {
-        max-width: 350px;
-    }
-}
-
-.mng-dropdown-dialog {
-    position: relative;
-
-    .mng-dropdown-clear-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-        color: $textSecondaryColor;
-        right: calc(65px + 0.5rem);
-        cursor: pointer;
-    }
-
-    .p-button.mng-dropdown-dialog-search-button {
-        width: 65px;
-    }
-}
-
-.p-dropdown-panel {
-    .p-dropdown-item {
-        &.p-highlight {
-            &.p-focus {
-                background: $primaryColor;
-            }
-        }
-    }
-}

package/scss/v2/theme/theme-base/mng/_mng_theme_fileupload.scss

@@ -1,24 +0,0 @@
-.p-fileupload {
-    .p-fileupload-buttonbar {
-        span.p-fileupload-choose {
-            width: auto;
-        }
-
-        p-button button {
-            width: auto;
-        }
-    }
-
-    .p-fileupload-content {
-        padding: $panelHeaderPadding;
-
-        .dropdown-area {
-            height: 5rem;
-            display: flex;
-            border: dashed;
-            border-radius: 8px;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-}

package/scss/v2/theme/theme-base/mng/_mng_theme_forms.scss

@@ -1,66 +0,0 @@
-@import 'mng_mixins';
-
-form {
-    .p-fileupload {
-        .p-fileupload-row > div:first-child {
-            flex-grow: 0;
-            flex-shrink: 0;
-            width: 50px;
-            padding: 0;
-
-            img {
-                max-width: 100%;
-            }
-        }
-
-        .p-fileupload-row .p-button {
-            @include scaledWidth($buttonIconOnlyWidth, $scaleSM);
-            @include scaledPadding($buttonIconOnlyPadding, $scaleSM);
-        }
-    }
-
-    // This makes the border of input field orange. It is used for localized fields, where the translation is missing and default value is displayed.
-    .localized-input-border-orange {
-        input,
-        textarea {
-            border-color: $warningButtonBg;
-        }
-    }
-
-    button[type='submit'].hidden {
-        display: none !important;
-        visibility: hidden !important;
-    }
-
-    .field.table {
-        .p-datatable {
-            .p-datatable-header {
-                border-top: none;
-                padding-left: 0;
-                padding-right: 0;
-                padding-top: 0;
-                padding-bottom: 0.25rem;
-
-                label.mng-datatable-form-label {
-                    flex-basis: 100%;
-                    color: var(--text-color);
-                    font-size: 14px;
-                    font-weight: normal;
-                }
-            }
-        }
-    }
-
-    .p-fieldset {
-        margin-bottom: 1rem;
-
-        .p-fieldset-content {
-            padding: 0.75rem 0 0 0;
-        }
-    }
-
-    .field-checkbox,
-    .field-radiobutton {
-        margin-bottom: 0.5rem;
-    }
-}

package/scss/v2/theme/theme-base/mng/_mng_theme_image.scss

@@ -1,27 +0,0 @@
-.mng-image {
-    &.p-image-preview-container {
-        height: 150px;
-
-        img {
-            max-height: 100%;
-        }
-
-        &.no-image {
-            width: 150px;
-
-            .p-image-preview-indicator {
-                background-color: $imagePreviewIndicatorBg;
-                height: 100%;
-                opacity: 1;
-                cursor: default;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                .p-image-preview-icon {
-                    font-size: 1.5rem;
-                }
-            }
-        }
-    }
-}

package/scss/v2/theme/theme-base/mng/_mng_theme_input.scss

@@ -1,31 +0,0 @@
-// This makes number input fields have the same height as the other input fields inside filter row in tables
-.p-inputnumber.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
-    & .p-button.p-inputnumber-button {
-        flex-basis: 0;
-    }
-
-    // The following two class overrides change button radius so it looks like the buttons are merged together with input field
-    & .p-inputnumber-button-up {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    & .p-inputnumber-button-down {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-}
-
-// Margin is used to hide default miter joint for border, we also hide the right border, so it does not look like the button width changes when we click on the field
-p-columnfilterformelement .p-inputnumber-input {
-    margin-right: -1px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right-color: transparent !important;
-}
-
-.mng-radio-button-label {
-    margin-left: 0.5rem;
-}

package/scss/v2/theme/theme-base/mng/_mng_theme_menu.scss

@@ -1,5 +0,0 @@
-.p-menu {
-    &.mng-action-menu.p-menu-overlay {
-        border: $menuBorder;
-    }
-}

package/scss/v2/theme/theme-base/mng/_mng_theme_multiselect.scss

@@ -1,20 +0,0 @@
-@use 'sass:math';
-
-.p-multiselect-panel {
-    .p-multiselect-items {
-        .p-multiselect-item {
-            &.p-highlight {
-                color: $multiselectHighlightTextColor;
-                background: $multiselectHighlightBg;
-            }
-
-            .p-checkbox {
-                .p-checkbox-box {
-                    &.p-highlight {
-                        border-color: $checkboxActiveBorderColor;
-                    }
-                }
-            }
-        }
-    }
-}

package/scss/v2/theme/theme-base/mng/_mng_theme_styles.scss

@@ -1,17 +0,0 @@
-/* Add your customizations of the theme here */
-@import 'mng_theme_button';
-@import 'mng_theme_datatable';
-@import 'mng_theme_dropdown';
-@import 'mng_theme_tableview';
-@import 'mng_theme_dialog';
-@import 'mng_theme_forms';
-@import 'mng_theme_datepicker';
-@import 'mng_theme_toolbar';
-@import 'mng_theme_autocomplete';
-@import 'mng_theme_image';
-@import 'mng_theme_toast';
-@import 'mng_theme_menu';
-@import 'mng_theme_input';
-@import 'mng_theme_multiselect';
-@import 'mng_theme_tabview';
-@import 'mng_theme_fileupload';

package/scss/v2/theme/theme-base/mng/_mng_theme_tableview.scss

@@ -1,97 +0,0 @@
-.mng-tableview {
-    .p-paginator {
-        .p-paginator-current {
-            margin-left: auto;
-        }
-
-        .p-dropdown {
-            .p-dropdown-label {
-                display: flex;
-                align-items: center;
-            }
-        }
-    }
-
-    .p-progressbar {
-        height: 0.5rem;
-        background-color: #d8dadc;
-
-        .p-progressbar-value {
-            background-color: #607d8b;
-        }
-    }
-
-    .table-header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .p-datatable {
-        .p-datatable-scrollable-table > .p-datatable-thead {
-            z-index: 2;
-        }
-        .p-datatable-loading-overlay {
-            z-index: 3;
-        }
-
-        .p-datatable-header {
-            text-align: left;
-            font-size: 1.5rem;
-        }
-
-        .p-datatable-thead > tr > th {
-            text-align: left;
-        }
-    }
-
-    /* Responsive */
-    //.p-datatable-tbody > tr > td .p-column-title {
-    //    display: none;
-    //}
-}
-
-.p-datatable:not(.p-datatable-gridlines) {
-    .p-datatable-tbody > tr > td {
-        cursor: auto;
-    }
-
-    .p-datatable-tbody > tr > td.clickable {
-        cursor: pointer;
-    }
-}
-
-.p-datatable {
-    .p-paginator {
-        .p-dropdown {
-            .p-dropdown-label {
-                display: flex;
-                align-items: center;
-            }
-        }
-    }
-}
-
-.mng-table-header {
-    & > th {
-        &:not(:first-child):not(:last-child) {
-            border-radius: 0 !important;
-        }
-
-        &:first-child {
-            border-top-right-radius: 0 !important;
-            border-bottom-right-radius: 0 !important;
-        }
-
-        &:last-child {
-            border-radius: 0 !important;
-        }
-    }
-}
-
-.mng-table-columns-multiselect {
-    width: 36px;
-
-    .p-multiselect-label-container {
-        width: 0;
-    }
-}

package/scss/v2/theme/theme-base/mng/_mng_theme_tabview.scss

@@ -1,11 +0,0 @@
-.p-tabview-title-error {
-    color: $errorColor !important;
-}
-
-.p-tabview-nav-btn.p-link {
-    background: $primaryTextColor;
-    color: $primaryColor;
-    border-radius: 0;
-    width: 3rem;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-}

package/scss/v2/theme/theme-base/mng/_mng_theme_toast.scss

@@ -1,3 +0,0 @@
-.p-toast .p-toast-message .p-toast-detail {
-    word-break: break-word;
-}

package/scss/v2/theme/theme-base/mng/_mng_theme_toolbar.scss

@@ -1,5 +0,0 @@
-.p-toolbar {
-    &.mng-action-editor-toolbar {
-        border: none;
-    }
-}

package/scss/v2/theme/theme-base/mng/_mng_variables.scss

@@ -1,15 +0,0 @@
-$mediaSmWidthMin: 576px !default;
-$mediaMdWidthMin: 768px !default;
-$mediaLgWidthMin: 992px !default;
-$mediaXlWidthMin: 1200px !default;
-
-$mediaXsWidthMax: #{$mediaSmWidthMin - 1} !default;
-$mediaSmWidthMax: #{$mediaMdWidthMin - 1} !default;
-$mediaMdWidthMax: #{$mediaLgWidthMin - 1} !default;
-$mediaLgWidthMax: #{$mediaXlWidthMin - 1} !default;
-
-$scaleXS: 0.8 !default;
-$scaleLG: 1.4 !default;
-
-$mngDialogContentPadding: 0 1.714rem !default;
-$mngDialogFooterPadding: 1.286rem 1.714rem !default;

package/scss/v2/theme/theme-dark/_extensions.scss

@@ -1,100 +0,0 @@
-@mixin focused-ring($ring-color) {
-    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px $ring-color, 0 1px 2px 0 rgba(0, 0, 0, 0.0);
-}
-
-.p-button-label {
-    font-weight: 700;
-}
-
-.p-accordion {
-    .p-accordion-header {
-        .p-accordion-header-link {
-            transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
-        }
-    }
-}
-
-.p-tabview {
-    .p-tabview-nav {
-        li {
-            .p-tabview-nav-link {
-                transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
-            }
-        }
-
-        .p-tabview-ink-bar {
-            z-index: 1;
-            display: block;
-            position: absolute;
-            bottom: 0;
-            height: 2px;
-            background-color: $primaryColor;
-            transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-        }
-    }
-}
-
-.p-carousel {
-    .p-carousel-indicators .p-carousel-indicator.p-highlight button {
-        background-color: $primaryColor;
-    }
-}
-
-.p-galleria {
-    .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-        background-color: $primaryColor;
-    }
-}
-
-.p-button {
-    &:focus {
-        @include focused-ring(rgba($buttonBg, .7));
-    }
-
-    &.p-button-secondary:enabled:focus {
-        @include focused-ring(rgba($secondaryButtonBg, .7));
-    }
-
-    &.p-button-success:enabled:focus {
-        @include focused-ring(rgba($successButtonBg, .7));
-    }
-
-    &.p-button-info:enabled:focus {
-        @include focused-ring(rgba($infoButtonBg, .7));
-    }
-
-    &.p-button-warning:enabled:focus {
-        @include focused-ring(rgba($warningButtonBg, .7));
-    }
-
-    &.p-button-help:enabled:focus {
-        @include focused-ring(rgba($helpButtonBg, .7));
-    }
-
-    &.p-button-danger:enabled:focus {
-        @include focused-ring(rgba($dangerButtonBg, .7));
-    }
-}
-
-.p-datatable {
-    .p-datatable-tbody {
-        > tr {
-            &.p-datatable-dragpoint-top > td {
-                box-shadow: inset 0 2px 0 0 $primaryColor;
-            }
-
-            &.p-datatable-dragpoint-bottom > td {
-                box-shadow: inset 0 -2px 0 0 $primaryColor;
-            }
-        }
-    }
-}
-
-.custom-timeline{
-    &.p-timeline {
-        &.p-timeline-vertical .p-timeline-event-opposite {
-            flex: 0;
-            padding: 0;
-        }
-    }
-}