From 5ed4325883ba0e2e1c1744eb0cad4b6ccfe09159 Mon Sep 17 00:00:00 2001
From: maryo <mario.dweller@seznam.cz>
Date: Tue, 17 Mar 2020 20:17:03 +0100
Subject: [PATCH] Added loadable styles

---
 package-lock.json              |  2 +-
 package.json                   |  3 +-
 src/angular-material-module.ts | 11 ++-----
 src/theming.scss               | 58 ++++++++++++++++++++++++++++++++++
 tsconfig.json                  |  5 +--
 5 files changed, 65 insertions(+), 14 deletions(-)
 create mode 100644 src/theming.scss

diff --git a/package-lock.json b/package-lock.json
index e275d69..96a8ecd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@vanio-cz/angular-material",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 1c5f421..81c45f7 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,12 @@
 {
   "name": "@vanio-cz/angular-material",
   "homepage": "https://github.com/vaniocz/angular-material#readme",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "postbuild": "node -e \"var fs = require('fs'); fs.createReadStream('src/theming.scss').pipe(fs.createWriteStream('dist/theming.scss'))\"",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
diff --git a/src/angular-material-module.ts b/src/angular-material-module.ts
index 2cb08ff..a10c40d 100644
--- a/src/angular-material-module.ts
+++ b/src/angular-material-module.ts
@@ -1,19 +1,14 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
 
 import {ConfirmComponent} from './confirm/confirm-component';
 import {ToasterComponent} from './toaster/toaster-component';
-import {MatDialogModule} from "@angular/material/dialog";
-import {MatButtonModule} from "@angular/material/button";
 
 @NgModule({
-    imports: [
-        CommonModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatIconModule,
-    ],
+    imports: [CommonModule, MatButtonModule, MatDialogModule, MatIconModule],
     declarations: [ConfirmComponent, ToasterComponent],
 })
 export class AngularMaterialModule {}
diff --git a/src/theming.scss b/src/theming.scss
new file mode 100644
index 0000000..7bc07d7
--- /dev/null
+++ b/src/theming.scss
@@ -0,0 +1,58 @@
+@mixin loadable-theme($theme) {
+    $primary-color: mat-color(map-get($theme, primary));
+
+    .loadable {
+        position: relative;
+
+        &::before {
+            background-color: rgba(white, 0.75);
+            content: "";
+            opacity: 0;
+            position: absolute; top: 0; right: 0; bottom: 0; left: 0;
+            transition: opacity 0.3s ease, visibility 0.3s ease;
+            visibility: hidden;
+        }
+
+        &::after {
+            align-items: center;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="spinner" viewBox="0 0 100 100"><style>.spinner{animation:rotator 5s linear infinite;transform-origin:center}@keyframes rotator{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.path{stroke-dasharray:270;stroke-dashoffset:0;transform-origin:center;stroke:%23#{unquote("#{str-slice(ie-hex-str($primary-color), 4)}")};animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:265}50%{stroke-dashoffset:65;transform:rotate(90deg)}100%{stroke-dashoffset:265;transform:rotate(360deg)}}</style><circle class="path" fill="none" stroke-width="10" stroke-linecap="butt" cx="50" cy="50" r="40"/></svg>');
+            background-position: center calc(50% - 12px);
+            background-repeat: no-repeat;
+            background-size: 48px;
+            color: $primary-color;
+            display: flex;
+            justify-content: center;
+            opacity: 0;
+            padding-top: 55px;
+            position: absolute; top: 0; right: 0; bottom: 0; left: 0;
+            text-align: center;
+            transition: opacity 0.3s ease, visibility 0.3s ease;
+            visibility: hidden;
+        }
+
+        &:lang(en)::after {
+            content: "Loading…";
+        }
+
+        &:lang(cs)::after {
+            content: "Načítám…";
+        }
+
+        &.is-loading {
+            cursor: progress !important;
+
+            &::before,
+            &::after {
+                opacity: 1;
+                visibility: visible;
+            }
+        }
+    }
+
+    button.loadable.loadable::after {
+        background-position: center;
+        background-size: 20px;
+        content: "";
+        padding-top: 0;
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
index f28b8cc..c66ac8a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,10 +18,7 @@
     "lib": [
       "es2018",
       "dom"
-    ],
-    "paths": {
-      "@vanio-cz/angular-material/*": ["src/*"]
-    }
+    ]
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,