Merge pull request #9 from open-template-hub/develop

Release/updated assets

package.json

@@ -35,7 +35,7 @@
     "karma-coverage": "~2.1.0",
     "karma-jasmine": "^4.0.2",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "ng-packagr": "^13.0.0",
+    "ng-packagr": "^13.3.1",
     "typescript": "~4.6.2"
   }
 }

projects/led/ng-package.json

@@ -3,5 +3,9 @@
   "dest": "../../dist/led",
   "lib": {
     "entryFile": "src/public-api.ts"
-  }
+  },
+  "assets": [
+    "styles/util/util.scss",
+    "styles/led/led.scss"
+  ]
 }

projects/led/src/lib/component/led/led.component.scss

@@ -1,41 +1 @@
-@mixin set-led-color($information-type) {
-  .led.#{$information-type} {
-    background-color: var(--#{$information-type});
-    box-shadow: var(--shadow-darker) 0 -1px 7px 1px, inset var(--#{$information-type}-darker) 0 -1px 9px, var(--#{$information-type}-lighter) 0 2px 12px;
-
-    &.animate {
-      animation: {
-        name: led-keyframes-#{$information-type};
-        duration: 1.5s;
-        direction: normal;
-        timing-function: ease-in-out;
-        iteration-count: infinite;
-      }
-    }
-  }
-
-  @keyframes led-keyframes-#{$information-type} {
-    0% {
-      box-shadow: var(--shadow-darker) 0 -1px 7px 1px, inset var(--#{$information-type}-darker) 0 -1px 9px, var(--#{$information-type}-lighter) 0 2px 12px;
-    }
-
-    50% {
-      box-shadow: var(--shadow-darker) 0 -1px 7px 1px, inset var(--#{$information-type}-lighter) 0 -1px 9px, var(--#{$information-type}-lighter) 0 2px 12px;
-    }
-
-    100% {
-      box-shadow: var(--shadow-darker) 0 -1px 7px 1px, inset var(--#{$information-type}-darker) 0 -1px 9px, var(--#{$information-type}-lighter) 0 2px 12px;
-    }
-  }
-}
-
-@include set-led-color("error");
-@include set-led-color("warning");
-@include set-led-color("success");
-@include set-led-color("info");
-
-.led {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-}
+@use "../../../../styles/led/led";

projects/led/styles/led/led.scss

@@ -0,0 +1,43 @@
+@use "../util/util";
+
+@mixin set-led-color($information-type) {
+  .led.#{$information-type} {
+    background-color: var(--#{$information-type});
+    box-shadow: var(--shadow-darker) 0 -1px 7px 1px, inset var(--#{$information-type}-darker) 0 -1px 9px, var(--#{$information-type}-lighter) 0 2px 12px;
+
+    &.animate {
+      animation: {
+        name: led-keyframes-#{$information-type};
+        duration: 1.5s;
+        direction: normal;
+        timing-function: ease-in-out;
+        iteration-count: infinite;
+      }
+    }
+  }
+
+  @keyframes led-keyframes-#{$information-type} {
+    0% {
+      box-shadow: var(--shadow-darker) 0 -1px 7px 1px, inset var(--#{$information-type}-darker) 0 -1px 9px, var(--#{$information-type}-lighter) 0 2px 12px;
+    }
+
+    50% {
+      box-shadow: var(--shadow-darker) 0 -1px 7px 1px, inset var(--#{$information-type}-lighter) 0 -1px 9px, var(--#{$information-type}-lighter) 0 2px 12px;
+    }
+
+    100% {
+      box-shadow: var(--shadow-darker) 0 -1px 7px 1px, inset var(--#{$information-type}-darker) 0 -1px 9px, var(--#{$information-type}-lighter) 0 2px 12px;
+    }
+  }
+}
+
+@include set-led-color("error");
+@include set-led-color("warning");
+@include set-led-color("success");
+@include set-led-color("info");
+
+.led {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}