@mediusinc/mng-commons 0.0.1-rc.4 → 0.2.4

package/package.json

@@ -1,37 +1,38 @@
 {
-	"name": "@mediusinc/mng-commons",
-	"version": "0.0.1-rc.4",
-	"peerDependencies": {
-		"@angular/common": "^13.1.0",
-		"@angular/core": "^13.1.0",
-		"@angular/forms": "^13.1.0",
-		"@angular/router": "^13.1.0",
-		"@ngx-formly/core": "^6.0.0-next.6",
-		"@ngx-translate/core": "^14.0.0",
-		"primeng": "^13.0.0"
-	},
-	"dependencies": {
-		"reflect-metadata": "^0.1.13",
-		"tslib": "^2.3.0"
-	},
-	"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
-}
+  "name": "@mediusinc/mng-commons",
+  "version": "0.2.4",
+  "peerDependencies": {
+    "@angular/common": "^13.1.0",
+    "@angular/core": "^13.1.0",
+    "@angular/forms": "^13.1.0",
+    "@angular/router": "^13.1.0",
+    "@ngx-formly/core": "^6.0.0-next.6",
+    "@ngx-translate/core": "^14.0.0",
+    "primeng": "^13.0.0"
+  },
+  "dependencies": {
+    "reflect-metadata": "^0.1.13",
+    "tslib": "^2.3.0"
+  },
+  "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,
+  "readme": "# Angular Commons\n\nCommons knjižnica za izgradnjo uporabniškega vmesnika na ogrodju Angular.\n\n## Predhodne zahteve\n\n- Node.js (LTS v14) in npm\n- pnpm package manager (https://pnpm.io/), ki optimizira delovanje privzetega npm.\n- Zahtevane skupne odvisnosti (peer dependencies)\n  - Angular (moduli `@angular/core`, `@angular/common`, `@angular/forms`, `@angular/router`) verzije `^13.1.0`\n  - Ngx Formly (modul `@ngx-formly/core`) verzije `^6.0.0-next.6`\n  - Ngx Translate (module `@ngx-translate/core`) verzije `^14.0.0`\n  - PrimeNG (modul `primeng`) verzije `^13.0.0`\n\n## Namestitev\n\n```bash\npnpm i @mediusinc/mng-commons\n```\n\n## Lokalizacija (i18n)\n\nModul `ngx-translate` se konfigurira na končnem projektu in je na končnem projektu potrebno določiti način za load prevodov.\nPrimer konfiguracije za multi-module HTTP loader:\n\n- HTTP loader factory:\n```ts\nexport function i18nHttpLoaderFactory(http: HttpClient) {\n    return new MultiTranslateHttpLoader(http, [\n        {prefix: './assets/i18n/mng/', suffix: '.json'},\n        {prefix: './assets/i18n/', suffix: '.json'}\n    ]);\n}\n```\n\n- Konfiguracija v `AppModule`:\n```ts\nTranslateModule.forRoot({\n    loader: {\n        provide: TranslateLoader,\n        useFactory: i18nHttpLoaderFactory,\n        deps: [HttpClient]\n    }\n})\n```\n\n- Definicijo jezikov podamo preko konfiguracije `MngCommonsModule`:\n```ts\nMngCommonsModule.forRoot({\n  languages: ['en', 'sl']\n})\n```\n\nKnjižnica pakira tudi osnovne prevode, ki so del modula. Za vključitev na zgornji način je potrebno dodati naslednjo konfiguracijo v `angular.json` med `assets` nastavitve:\n```json\n{\n  \"glob\": \"**/*\",\n  \"input\": \"./node_modules/@mediusinc/mng-commons/assets/i18n\",\n  \"output\": \"/assets/i18n/mng\"\n}\n```\n\n## Tema\n\nOpcijsko se vključi tudi tema MNG Commons, ki ima dve svetlo in temno varianto.\nZa vključitev se v stile na končnem projektu doda import v `style.scss`:\n\n```scss\n# Za svetlo temo:\n@import '~../node_modules/@mediusinc/mng-commons/scss/mng-commons-light';\n\n# Za temno temo:\n@import '~../node_modules/@mediusinc/mng-commons/scss/mng-commons-dark';\n```\n\n~~~~\nPrimarno se uporablja svetla tema!\n~~~~\n\nPri uporabi temne teme je potrebno dodatno nastaviti tudi `colorMode` v modulu:\n```ts\nMngCommonsModule.forRoot({\n  app: {\n    colorScheme: 'dark'\n  }\n});\n```\n\nTema za svoje delovanje uporablja primeNG stile (za posamezne komponente) in PrimeFlex kot pomožno CSS knjižnico.\nDodatno se lahko na končnem projektu lahko uporabi še ikone PrimeIcons.\nGlede ne preference se opcijsko dodajo naslednji importi (**pred importom MNG commons teme!**):\n\n```scss\n@import '~../node_modules/primeng/resources/primeng.min.css';\n@import '~../node_modules/primeflex/primeflex.scss';\n@import '~../node_modules/primeicons/primeicons.css';\n```\n\nPri prvem importu ni potrebno namestiti dodatnih odvisnosti (je že vključeno z primeng), za drugi dve pa je potrebno namestiti:\n```bash\npnpm i primeflex\npnpm i primeicons\n```\n\nDodajanje MNG Commons slik v `assets` na končnem projektu se uredi z konfiguracijo v `assets` segmentu znotraj `angular.json`, kjer se doda:\n\n```json\n{\n  \"glob\": \"**/*\",\n  \"input\": \"./node_modules/@mediusinc/mng-commons/assets/images\",\n  \"output\": \"/assets/images/mng\"\n}\n```\n\n"
+}

package/public-api.d.ts

@@ -1,22 +1,25 @@
-export * from './lib/mng-commons.module';
-export * from './lib/api/services';
-export * from './lib/services';
-export * from './lib/services/providers';
-export * from './lib/api/utils';
-export * from './lib/utils';
-export * from './lib/components/action';
-export * from './lib/components/form';
-export * from './lib/components/form/formly/fields';
-export * from './lib/components/form/formly/wrappers';
-export * from './lib/components/layout';
-export * from './lib/components/tableview';
-export * from './lib/directives';
-export * from './lib/pipes';
-export * from './lib/api/models';
-export * from './lib/models/config';
-export * from './lib/models/descriptors';
-export * from './lib/models/events';
-export * from './lib/models/interfaces';
-export * from './lib/models/providers';
-export * from './lib/models/types';
-export * from './lib/models/validators';
+export * from './lib/mng-commons.module';
+export * from './lib/api/services';
+export * from './lib/components/layout/services';
+export * from './lib/components/tableview/services';
+export * from './lib/services';
+export * from './lib/services/providers';
+export * from './lib/api/utils';
+export * from './lib/utils';
+export * from './lib/components/action';
+export * from './lib/components/form';
+export * from './lib/components/form/formly/fields';
+export * from './lib/components/form/formly/wrappers';
+export * from './lib/components/layout';
+export * from './lib/components/tableview';
+export * from './lib/directives';
+export * from './lib/pipes';
+export * from './lib/api/models';
+export * from './lib/components/action/models';
+export * from './lib/components/form/models';
+export * from './lib/config/models';
+export * from './lib/config';
+export * from './lib/data-providers';
+export * from './lib/descriptors';
+export * from './lib/models';
+export * from './lib/types';

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");
+            }
+        }
+    }
+}