diff --git a/package.json b/package.json index b41a05e..882fc95 100644 --- a/package.json +++ b/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" } } diff --git a/projects/led/ng-package.json b/projects/led/ng-package.json index de5a1f1..799ae93 100644 --- a/projects/led/ng-package.json +++ b/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" + ] } diff --git a/projects/led/src/lib/component/led/led.component.scss b/projects/led/src/lib/component/led/led.component.scss index ab87988..f38c329 100644 --- a/projects/led/src/lib/component/led/led.component.scss +++ b/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"; diff --git a/projects/led/styles/led/led.scss b/projects/led/styles/led/led.scss new file mode 100644 index 0000000..c29abd9 --- /dev/null +++ b/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%; +} diff --git a/projects/led/src/lib/styles/util/util.scss b/projects/led/styles/util/util.scss similarity index 100% rename from projects/led/src/lib/styles/util/util.scss rename to projects/led/styles/util/util.scss