@mediusinc/mng-commons 0.0.1-rc.3 → 0.2.1-rc

package/karma.conf.js

@@ -0,0 +1,51 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/mng-commons'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome', 'ChromeHeadless', 'ChromeHeadlessCI'],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+          base: 'ChromeHeadless',
+          flags: ['--no-sandbox']
+      }
+    },
+    singleRun: false,
+    restartOnFileChange: true,
+    failOnEmptyTestSuite: false
+  });
+};

package/ng-package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/mng-commons",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    "assets/**/*",
+    "scss/**/*.scss"
+  ],
+  "allowedNonPeerDependencies": [
+    "reflect-metadata"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediusinc/mng-commons",
-  "version": "0.0.1-rc.3",
+  "version": "0.2.1-rc",
   "peerDependencies": {
     "@angular/core": "^13.1.0",
     "@angular/common": "^13.1.0",
@@ -8,31 +8,10 @@
     "@angular/router": "^13.1.0",
     "@ngx-formly/core": "^6.0.0-next.6",
     "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^7.0.0",
     "primeng": "^13.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0",
     "reflect-metadata": "^0.1.13"
-  },
-  "module": "fesm2015/mediusinc-mng-commons.mjs",
-  "es2020": "fesm2020/mediusinc-mng-commons.mjs",
-  "esm2020": "esm2020/mediusinc-mng-commons.mjs",
-  "fesm2020": "fesm2020/mediusinc-mng-commons.mjs",
-  "fesm2015": "fesm2015/mediusinc-mng-commons.mjs",
-  "typings": "mediusinc-mng-commons.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./mediusinc-mng-commons.d.ts",
-      "esm2020": "./esm2020/mediusinc-mng-commons.mjs",
-      "es2020": "./fesm2020/mediusinc-mng-commons.mjs",
-      "es2015": "./fesm2015/mediusinc-mng-commons.mjs",
-      "node": "./fesm2015/mediusinc-mng-commons.mjs",
-      "default": "./fesm2020/mediusinc-mng-commons.mjs"
-    }
-  },
-  "sideEffects": false
-}
+  }
+}

package/scss/common/layout/_breadcrumb.scss

@@ -0,0 +1,96 @@
+.layout-breadcrumb-container {
+    background-color: transparent;
+
+    .layout-breadcrumb {
+        background: transparent;
+        border: 0 none;
+        border-radius: 0;
+        padding-left: 20px;
+
+        ul {
+            li {
+                &.p-breadcrumb-chevron {
+                    margin: 0 .75rem;
+
+                    &::before {
+                        content: "\2044";
+                        font-weight: bold;
+                        font-size: 1.25rem;
+                    }
+                }
+
+                .p-menuitem-link {
+                    font-size: 1.25rem;
+
+                    .p-menuitem-text {
+                        color: $textThirdColor;
+                        font-weight: $submenuHeaderFontWeight;
+                    }
+                }
+
+                &:last-child {
+                    .p-menuitem-text {
+                        color: $textColor;
+                    }
+                }
+            }
+        }
+    }
+
+    .layout-breadcrumb-right-items {
+        .search-icon {
+            display:none;
+            align-items: center;
+            justify-content: center;
+            color: $textColor;
+            width: 32px;
+            height: 32px;
+            margin-right: .5rem;
+        }
+
+        .search-wrapper {
+            transition: transform $animationDuration $animationTimingFunction;
+
+            .p-input-icon-left {
+                margin-right: .5rem;
+                width: 100%;
+
+                input {
+                    background: transparent;
+                    border-color: transparent;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: $tabletBreakpoint) {
+    .layout-breadcrumb-container {
+        .layout-breadcrumb-right-items {
+            .search-icon {
+                display:flex;
+            }
+            .search-wrapper {
+                width: 0;
+                position: absolute;
+                right: 40px;
+                background: $topbarSubmenuBg;
+                border-radius: 6px;
+                transition: width $animationDuration $animationTimingFunction;
+
+                input {
+                    width: 0;
+                }
+
+                &.active-search-wrapper {
+                    width: calc(100% - 70px);
+                    transition: width $animationDuration $animationTimingFunction;
+
+                    input {
+                        width: 100%;
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/common/layout/_config.scss

@@ -0,0 +1,101 @@
+.layout-config {
+    width: 16em;
+    height: 100%;
+    position: fixed;
+    right: 0;
+    top: 0;
+    padding: 1rem;
+    overflow: auto;
+    background: $bodyBg;
+    color: $textColor !important;
+    z-index: 999;
+    border-left: 0 none;
+    transform: translateX(100%);
+    transition: transform .4s cubic-bezier(.05,.74,.2,.99);
+
+    &.layout-config-active {
+        transform: translateX(0);
+        box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
+
+        .layout-config-content {
+            .layout-config-button {
+                i {
+                    transform: rotate(360deg);
+                }
+            }
+        }
+    }
+
+    p {
+        line-height: 1.5rem;
+        color: #000000 !important;
+    }
+
+    .layout-themes {
+        @include flex();
+        @include flex-wrap(wrap);
+
+        > div {
+            padding: .25rem;
+        }
+
+
+        a {
+            width: 2rem;
+            height: 2rem;
+            border-radius: $borderRadius;
+            display: block;
+            position: relative;
+            @include flex-align-center();
+            @include flex-justify-center();
+            transition: transform $transitionDuration;
+            box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
+
+            i {
+                font-size: 1rem;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                margin-left: -.5rem;
+                margin-top: -.5rem;
+                color: #ffffff;
+            }
+
+            &:hover {
+                transform: scale(1.1);
+            }
+        }
+    }
+}
+
+.layout-config-button {
+    display: block;
+    position: fixed;
+    width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+    background: $primaryColor;
+    color: $primaryTextColor;
+    text-align: center;
+    top: 50%;
+    right: 0;
+    margin-top: -1.5rem;
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+    transition: background-color $transitionDuration;
+    overflow: hidden;
+    cursor: pointer;
+    z-index: 999;
+    box-shadow: -.25rem 0 1rem rgba(0,0,0,.15);
+
+    i {
+        font-size: 2rem;
+        line-height: inherit;
+        transform: rotate(0deg);
+        transition: transform 1s;
+    }
+
+    &:hover {
+        background: lighten($primaryColor, 5%);
+    }
+}

package/scss/common/layout/_dashboard.scss

@@ -0,0 +1,16 @@
+.layout-dashboard {
+    .widget-table {
+        .card-header {
+            line-height: 24px;
+            margin-bottom: 1rem;
+        }
+
+        .p-datatable {
+            .p-button {
+                .p-button-icon {
+                    color: $textColor;
+                }
+            }
+        }
+    }
+}

package/scss/common/layout/_exception.scss

@@ -0,0 +1,131 @@
+.exception-body {
+    background-image: $exceptionPagesImage;
+    background-repeat: no-repeat;
+    background-size: contain;
+    box-sizing: border-box;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    &.notfound {
+        .exception-panel {
+            h1 {
+                color: #0F8BFD;
+                text-shadow: 0px 0px 50px rgba(#0F8BFD, 0.2);
+            }
+
+            h3 {
+                color: darken(#0F8BFD, 30%);
+            }
+        }
+    }
+
+    &.accessdenied {
+        .exception-panel {
+            h1 {
+                color: #0F8BFD;
+                text-shadow: 0px 0px 50px rgba(#0F8BFD, 0.2);
+            }
+
+            h3 {
+                color: darken(#0F8BFD, 30%);
+            }
+        }
+    }
+
+    &.error {
+        .exception-panel {
+            h1 {
+                color: #FC6161;
+                text-shadow: 0px 0px 50px rgba(#FC6161, 0.2);
+            }
+
+            h3 {
+                color: lighten(#FC6161, 10%);
+                max-width: 720px;
+            }
+        }
+    }
+
+    .exception-panel {
+        text-align: center;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        margin-top: -200px;
+
+        h1 {
+            font-size: 140px;
+            font-weight: 900;
+            margin-bottom: 0;
+        }
+
+        h3 {
+            font-size: 80px;
+            font-weight: 900;
+            margin-top: -90px;
+            margin-bottom: 50px;
+        }
+
+        p {
+            font-size: 24px;
+            font-weight: 400;
+            max-width: 320px;
+        }
+
+        button {
+            margin-top: 50px;
+        }
+    }
+
+    .exception-footer {
+        position: absolute;
+        bottom: 60px;
+        align-items: center;
+        display: flex;
+
+        .exception-logo {
+            width: 34px;
+        }
+
+        .exception-appname {
+            width: 72px;
+            margin-left: 1rem;
+        }
+    }
+}
+
+@media (max-width: $phoneBreakpoint) {
+    .exception-body {
+        background-size: auto;
+
+        &.accessdenied, &.error {
+            .exception-panel {
+                h1 {
+                    font-size: 70px;
+                }
+
+                h3 {
+                    font-size: 40px;
+                    margin-top: -30px;
+                }
+            }
+        }
+
+        .exception-panel {
+            margin-top: 0;
+
+            h3 {
+                line-height: .75;
+            }
+
+            button {
+                margin-top: 0;
+            }
+        }
+    }
+}

package/scss/common/layout/_footer.scss

@@ -0,0 +1,29 @@
+.layout-footer {
+    height: 4rem;
+    padding: 0 2rem;
+    @include flex();
+    @include flex-align-center();
+    @include flex-justify-between();
+
+    .footer-logo-container {
+        @include flex();
+        @include flex-align-center();
+
+        img {
+            width: 2rem;
+            height: 2rem;
+        }
+
+        .app-name {
+            font-size: 1rem;
+            font-weight: 600;
+            letter-spacing: .2px;
+            margin-left: .5rem;
+        }
+    }
+
+    .copyright {
+        font-size: .875rem;
+        color: $textSecondaryColor;
+    }
+}

package/scss/common/layout/_help.scss

@@ -0,0 +1,157 @@
+.help-page {
+    p {
+        margin: 0;
+    }
+
+    .help-search {
+        background: $helpHeaderBg;
+        backdrop-filter: blur(200px);
+        padding: 0;
+        margin-bottom: 4rem;
+
+        .help-search-content {
+            padding: 50px 60px;
+        }
+
+        .help-search-effect {
+            background: $bodyImage;
+            background-repeat: no-repeat;
+            transform:  matrix(-1, 0, 0, 1, 0, 0);
+        }
+
+        .search-container {
+            font-size: 1.5rem;
+            position: relative;
+
+            input {
+                appearance: none;
+                text-indent: 2.5rem;
+                width: 100%;
+
+                &::placeholder {
+                    color: $textThirdColor;
+                }
+            }
+
+            i {
+                color: $textColor;
+                width: 2rem;
+                position: absolute;
+                margin-left: 1rem;
+                top: 50%;
+                margin-top: -.5rem;
+            }
+        }
+    }
+
+    .status-card {
+        margin-top: 30px;
+
+        h6 {
+            margin-bottom: 0;
+        }
+
+        p {
+            color: $textThirdColor;
+        }
+
+        .status-bars {
+            margin-top: 1rem;
+            @include flex();
+
+            .status-bar {
+                flex: 1 1 0;
+                -ms-flex: 1 1 0px;
+                background: #0BD18A;
+                box-shadow: 0px 0px 10px rgba(11, 209, 138, 0.3);
+                height: 50px;
+                margin-right: .25rem;
+                transition: transform $transitionDuration;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+
+                &.status-bar-failure {
+                    background: #FC6161;
+                    box-shadow: 0px 0px 10px rgba(252, 97, 97, 0.3);
+                }
+
+                &:hover {
+                    transform: scale(1.1);
+                }
+            }
+        }
+
+        .status-bar-footer {
+            padding: 1rem 0 0 0;
+            @include flex();
+            @include flex-justify-between();
+            color: $textThirdColor;
+        }
+    }
+
+    .articles-card {
+        h6 {
+            margin-bottom: 0;
+        }
+
+        p {
+            color: $textThirdColor;
+        }
+
+        .blog-post {
+            height: 130px;
+            border-radius: 8px;
+            margin: 1rem 0;
+            position: relative;
+            background-repeat: no-repeat;
+
+            &:last-child {
+                margin-bottom: 1rem;
+            }
+
+            .blog-text {
+                position: absolute;
+                left: 74px;
+                bottom: 12px;
+
+                h6 {
+                    margin-bottom: 0;
+                    line-height: 20px;
+                }
+
+                span {
+                    color: $textSecondaryColor;
+                    line-height: 16px;
+                    font-size: 12px;
+                }
+            }
+
+            .blog-profile {
+                position: absolute;
+                top: 68px;
+                left: 12px;
+
+                img {
+                    width: 50px;
+                    height: 50px;
+                    border-radius: 50%;
+
+                }
+            }
+
+            &:nth-child(1) {
+                background-image: linear-gradient(180deg, rgba(28, 28, 44, 0) 33.85%, rgba(27, 27, 44, 0.8) 80.77%), url("#{$baseHref}assets/images/mng/pages/help/blog1.jpg");
+            }
+
+            &:nth-child(2) {
+                background-image: linear-gradient(186.73deg, rgba(28, 28, 44, 0) 46.89%, rgba(27, 27, 44, 0.8) 95.1%), url("#{$baseHref}assets/images/mng/pages/help/blog2.jpg");
+            }
+
+            &:nth-child(3) {
+                background-image: linear-gradient(180deg, rgba(28, 28, 44, 0) 33.85%, rgba(27, 27, 44, 0.8) 80.77%), url("#{$baseHref}assets/images/mng/pages/help/blog3.jpg");
+            }
+        }
+    }
+}

package/scss/common/layout/_inlinemenu.scss

@@ -0,0 +1,55 @@
+.layout-inline-menu {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border: 0 none;
+    padding-bottom: 1.5rem;
+
+    &.layout-inline-menu-active {
+        .layout-inline-menu-icon {
+            transform: rotate(-180deg);
+        }
+    }
+
+    .layout-inline-menu-action {
+        cursor: pointer;
+        padding: 2rem 2rem 1rem 2rem;
+        color: $textColor;
+
+        img {
+            border-radius: 22px;
+            border: 2px solid transparent;
+        }
+
+        .layout-inline-menu-text {
+            font-weight: 500;
+        }
+    }
+
+    .layout-inline-menu-action-panel {
+        padding: 0 1.5rem;
+
+        .layout-inline-menu-action-item {
+            border-radius: $borderRadius;
+            transition: all $transitionDuration;
+            cursor: pointer;
+            user-select: none;
+            margin-top: .2rem;
+
+            &:last-child {
+                margin-bottom: .5rem;
+            }
+
+            a {
+                padding: 0.5rem 1rem;
+                border-left: 8px solid transparent;
+                border-radius: 8px;
+                color: $textColor;
+
+                i {
+                    margin-right: .75rem;
+                }
+            }
+        }
+    }
+}