ngx-snotifire 15.0.2 → 15.0.4-beta

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "ngx-snotifire",
-  "version": "15.0.2",
+  "version": "15.0.4-beta",
   "license": "Apache-2.0",
   "peerDependencies": {
     "@angular/common": "^15.0.0",
     "@angular/core": "^15.0.0",
-    "rxjs": "~7.5.0"
+    "rxjs": "^7.5.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/styles/_shared/animations.scss

@@ -0,0 +1,188 @@
+$animation-name: "fade";
+
+.notifire-toast {
+  animation-fill-mode: both;
+}
+
+.snotify-leftTop,
+.snotify-leftCenter,
+.snotify-leftBottom {
+  .#{$animation-name}In {
+    animation-name: fadeInLeft;
+  }
+  .#{$animation-name}Out {
+    animation-name: fadeOutLeft;
+  }
+}
+
+.snotify-rightTop,
+.snotify-rightCenter,
+.snotify-rightBottom {
+  .#{$animation-name}In {
+    animation-name: fadeInRight;
+  }
+  .#{$animation-name}Out {
+    animation-name: fadeOutRight;
+  }
+}
+
+.snotify-centerTop {
+  .#{$animation-name}In {
+    animation-name: fadeInDown;
+  }
+  .#{$animation-name}Out {
+    animation-name: fadeOutUp;
+  }
+}
+.snotify-centerCenter {
+  .#{$animation-name}In {
+    animation-name: fadeIn;
+  }
+  .#{$animation-name}Out {
+    animation-name: fadeOut;
+  }
+}
+.snotify-centerBottom {
+  .#{$animation-name}In {
+    animation-name: fadeInUp;
+  }
+  .#{$animation-name}Out {
+    animation-name: fadeOutDown;
+  }
+}
+
+// Fade in
+
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0) scaleX(1.2);
+  }
+
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0) scaleX(1.2);
+  }
+
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0) scaleY(1.2);
+  }
+
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0) scaleY(1.2);
+  }
+
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+// Fade out
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+// Toast collapse
+
+@keyframes appear {
+  0% {
+    max-height: 0;
+  }
+
+  100% {
+    max-height: 50vh;
+  }
+}
+
+@keyframes disappear {
+  0% {
+    max-height: 50vh;
+  }
+
+  100% {
+    max-height: 0;
+  }
+}

package/styles/_shared/icons.scss

@@ -0,0 +1,39 @@
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param String $string - Initial string
+/// @param String $search - Substring to replace
+/// @param String $replace ('') - New value
+/// @return String - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@function -svg($svg, $color, $viewBox: "0 0 512 512") {
+  $result: 'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="#{$viewBox}" fill="#{$color}">#{$svg}</svg>';
+  $result: str-replace($result, "%", "%25");
+  $result: str-replace($result, '"', "%22");
+  $result: str-replace($result, "'", "%27");
+  $result: str-replace($result, " ", "%20");
+  $result: str-replace($result, "<", "%3C");
+  $result: str-replace($result, ">", "%3E");
+  $result: str-replace($result, "#", "%23");
+
+  @return $result;
+}
+
+@function -generate-icons($colors-map) {
+  @return (
+    error: -svg('<g><path d="M437,75A256,256,0,1,0,75,437,256,256,0,1,0,437,75ZM416.43,416.43a226.82,226.82,0,0,1-320.86,0C7.11,328,7.11,184,95.57,95.57a226.82,226.82,0,0,1,320.86,0C504.89,184,504.89,328,416.43,416.43Z"/><path d="M368.81,143.19a14.5,14.5,0,0,0-20.58,0L256,235.42l-92.23-92.23a14.55,14.55,0,0,0-20.58,20.58L235.42,256l-92.23,92.23a14.6,14.6,0,0,0,10.24,24.89,14.19,14.19,0,0,0,10.24-4.31l92.23-92.23,92.23,92.23a14.64,14.64,0,0,0,10.24,4.31,14,14,0,0,0,10.24-4.31,14.5,14.5,0,0,0,0-20.58l-92-92.23,92.23-92.23A14.5,14.5,0,0,0,368.81,143.19Z"/></g>', map-get($colors-map, error)),
+    warning: -svg('<g><path d="M256,512c141.15,0,256-114.84,256-256S397.15,0,256,0,0,114.84,0,256,114.85,512,256,512Zm0-480.49c123.79,0,224.49,100.71,224.49,224.49S379.79,480.49,256,480.49,31.51,379.79,31.51,256,132.21,31.51,256,31.51Z"/><circle cx="260.08" cy="343.87" r="26.35"/><path d="M254.68,278.39a15.76,15.76,0,0,0,15.75-15.75V128.72a15.75,15.75,0,1,0-31.51,0V262.63A15.76,15.76,0,0,0,254.68,278.39Z"/></g>', map-get($colors-map, warning)),
+    info: -svg('<g><path d="M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z"/><path d="M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z"/><path d="M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z"/></g>', map-get($colors-map, info)),
+    success: -svg('<g><path d="M256,0C114.85,0,0,114.84,0,256S114.85,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,492.31c-130.29,0-236.31-106-236.31-236.31S125.71,19.69,256,19.69,492.31,125.71,492.31,256,386.29,492.31,256,492.31Z"/><path class="cls-1" d="M376.64,151,225.31,321.24l-91.17-72.93a9.85,9.85,0,0,0-12.3,15.38l98.46,78.77a9.86,9.86,0,0,0,13.52-1.15L391.36,164.08A9.85,9.85,0,0,0,376.64,151Z"/></g>', map-get($colors-map, success)),
+    async: -svg('<g><path d="M256,0a32,32,0,0,0-32,32V96a32,32,0,0,0,64,0V32A32,32,0,0,0,256,0Zm0,384a32,32,0,0,0-32,32v64a32,32,0,0,0,64,0V416A32,32,0,0,0,256,384ZM391.74,165.5,437,120.22A32,32,0,0,0,391.74,75L346.5,120.22a32,32,0,0,0,45.25,45.28Zm-271.52,181L75,391.74A32,32,0,0,0,120.22,437l45.25-45.25a32,32,0,0,0-45.25-45.25Zm0-271.52A32,32,0,1,0,75,120.22l45.25,45.28a32,32,0,1,0,45.25-45.28ZM391.74,346.5a32,32,0,0,0-45.25,45.25L391.74,437A32,32,0,0,0,437,391.74ZM480,224H416a32,32,0,0,0,0,64h64a32,32,0,0,0,0-64ZM128,256a32,32,0,0,0-32-32H32a32,32,0,0,0,0,64H96A32,32,0,0,0,128,256Z"/></g>', map-get($colors-map, async))
+  );
+}

package/styles/dark/buttons.scss

@@ -0,0 +1,41 @@
+.notifire-toast__buttons {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  button {
+    position: relative;
+    width: 100%;
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: none;
+    border-bottom: none;
+    background: transparent;
+    padding: 8px;
+    text-transform: capitalize;
+    color: #fff;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      background: rgba(255, 255, 255, 0.1);
+      outline: none;
+    }
+
+    &:active {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:first-child {
+      border-left: none;
+    }
+  }
+
+  &--bold {
+    font-weight: 700;
+  }
+}

package/styles/dark/icon.scss

@@ -0,0 +1,60 @@
+$success: #4caf50;
+$info: #1e88e5;
+$warning: #ff9800;
+$error: #f44336;
+$async: $info;
+
+$icons: -generate-icons(
+  (
+    error: $error,
+    warning: $warning,
+    info: $info,
+    success: $success,
+    async: $async
+  )
+);
+
+.snotifire-icon {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  line-height: 0;
+  transform: translate(0, -50%);
+  max-height: 48px;
+  max-width: 48px;
+}
+
+.snotifire-icon--error {
+  background-image: url("#{map-get($icons, error)}");
+}
+
+.snotifire-icon--warning {
+  background-image: url("#{map-get($icons, warning)}");
+}
+
+.snotifire-icon--info {
+  background-image: url("#{map-get($icons, info)}");
+}
+
+.snotifire-icon--success {
+  background-image: url("#{map-get($icons, success)}");
+}
+
+.snotifire-icon--async {
+  background-image: url("#{map-get($icons, async)}");
+  animation: async 3s infinite linear;
+  transform-origin: 50% 50%;
+}
+
+@keyframes async {
+  0% {
+    -webkit-transform: translate(0, -50%) rotate(0deg);
+    transform: translate(0, -50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(0, -50%) rotate(360deg);
+    transform: translate(0, -50%) rotate(360deg);
+  }
+}

package/styles/dark/prompt.scss

@@ -0,0 +1,134 @@
+.notifire-toast__input {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  margin: 0;
+  width: 100%;
+  vertical-align: top;
+  transition: all 0.5s;
+  transition-delay: 0.3s;
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+
+  &__field {
+    position: relative;
+    display: block;
+    float: right;
+    padding: 0.85em 0.5em;
+    width: 100%;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: #333;
+    font-weight: bold;
+    -webkit-appearance: none; /* for box shadows to show on iOS */
+    opacity: 0;
+    transition: opacity 0.3s;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    float: right;
+    padding: 0 0.85em;
+    width: 100%;
+    color: #999;
+    font-weight: bold;
+    font-size: 70.25%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    position: absolute;
+    left: 0;
+    height: 100%;
+    text-align: left;
+    pointer-events: none;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      transition: transform 0.3s;
+    }
+
+    &::before {
+      border-top: 2px solid #4c4c4c;
+      transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
+      transition-delay: 0.3s;
+    }
+
+    &::after {
+      z-index: -1;
+      background: #eee;
+      transform: scale3d(1, 0, 1);
+      transform-origin: 50% 0;
+    }
+  }
+
+  &__labelContent {
+    position: relative;
+    display: block;
+    padding: 1em 0;
+    width: 100%;
+    transition: transform 0.3s 0.3s;
+  }
+}
+
+.notifire-toast__input--filled {
+  margin-top: 2.5em;
+
+  &:focus,
+  .notifire-toast__input__field {
+    opacity: 1;
+    transition-delay: 0.3s;
+  }
+}
+
+.notifire-toast__input__field:focus
+  + .notifire-toast__input__label
+  .notifire-toast__input__labelContent,
+.notifire-toast__input--filled .notifire-toast__input__labelContent {
+  transform: translate(0, -80%);
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}
+
+.notifire-toast__input__field:focus + .notifire-toast__input__label::before,
+.notifire-toast__input--filled .notifire-toast__input__label::before {
+  transition-delay: 0s;
+}
+
+.notifire-toast__input__field:focus + .notifire-toast__input__label::before,
+.notifire-toast__input--filled .notifire-toast__input__label::before {
+  transform: translate(0, 0);
+}
+
+.notifire-toast__input__field:focus + .notifire-toast__input__label::after,
+.notifire-toast__input--filled .notifire-toast__input__label::after {
+  transform: scale(1, 1);
+  transition-delay: 0.3s;
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}
+
+.notifire-toast {
+  &--invalid {
+    .notifire-toast__input__label::before {
+      border-color: $error;
+    }
+  }
+  &--valid {
+    .notifire-toast__input__label::before {
+      border-color: $success;
+    }
+  }
+}

package/styles/dark/snotify.scss

@@ -0,0 +1,65 @@
+$backdrop-color: #000000;
+$snotify-width: auto !default;
+
+@if $snotify-width == auto {
+  $snotify-width: 300px;
+}
+
+.snotify {
+  display: block;
+  position: fixed;
+  width: $snotify-width;
+  z-index: 9999;
+  box-sizing: border-box;
+  pointer-events: none;
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.snotify-leftTop,
+.snotify-leftCenter,
+.snotify-leftBottom {
+  left: 10px;
+}
+
+.snotify-rightTop,
+.snotify-rightCenter,
+.snotify-rightBottom {
+  right: 10px;
+}
+
+.snotify-centerTop,
+.snotify-centerCenter,
+.snotify-centerBottom {
+  left: calc(50% - #{$snotify-width} / 2);
+}
+
+.snotify-leftTop,
+.snotify-centerTop,
+.snotify-rightTop {
+  top: 10px;
+}
+.snotify-leftCenter,
+.snotify-rightCenter,
+.snotify-centerCenter {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.snotify-leftBottom,
+.snotify-rightBottom,
+.snotify-centerBottom {
+  bottom: 10px;
+}
+
+.snotifire-backdrop{
+    position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $backdrop-color;
+  opacity: 0;
+  z-index: 9998;
+  transition: opacity 0.3s;
+}

package/styles/dark/toast.scss

@@ -0,0 +1,104 @@
+$toast-bg: rgba(0, 0, 0, 0.9);
+$toast-color: #fff;
+$toast-progressBar: #000;
+$toast-progressBarPercentage: #4c4c4c;
+
+$snotify-title-font-size: auto !default;
+$snotify-body-font-size: auto !default;
+
+@if $snotify-title-font-size == auto {
+  $snotify-title-font-size: 1.8em;
+}
+
+@if $snotify-body-font-size == auto {
+  $snotify-body-font-size: 1em;
+}
+
+.notifire-toast {
+  display: block;
+  cursor: pointer;
+  background-color: $toast-bg;
+  max-height: 300px;
+  height: 100%;
+  margin: 5px;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: auto;
+
+  &--in {
+    animation-name: appear;
+  }
+
+  &--out {
+    animation-name: disappear;
+  }
+
+  &__inner {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    justify-content: center;
+    position: relative;
+    padding: 5px 65px 5px 15px;
+    min-height: 78px;
+    font-size: 16px;
+    color: $toast-color;
+  }
+
+  &__progressBar {
+    position: relative;
+    width: 100%;
+    height: 5px;
+    background-color: $toast-progressBar;
+
+    &__percentage {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 5px;
+      background-color: $toast-progressBarPercentage;
+      max-width: 100%;
+    }
+  }
+
+  &__title {
+    font-size: $snotify-title-font-size;
+    line-height: 1.2em;
+    margin-bottom: 5px;
+    color: $toast-color;
+  }
+
+  &__body {
+    font-size: $snotify-body-font-size;
+    color: $toast-color;
+  }
+}
+
+.notifire-toast-show {
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+.notifire-toast-remove {
+  max-height: 0;
+  overflow: hidden;
+  transform: translate(0, 50%);
+  opacity: 0;
+}
+
+/***************
+ ** Modifiers **
+ **************/
+
+.snotify-prompt {
+ ngx-snotify-prompt {
+    width: 100%;
+  }
+}
+
+.snotify-confirm,
+.snotify-prompt {
+  .notifire-toast__inner {
+    padding: 10px 15px;
+  }
+}

package/styles/dark.scss

@@ -0,0 +1,9 @@
+@import "_shared/icons";
+@import "_shared/animations";
+
+@import "dark/snotify";
+@import "dark/toast";
+@import "dark/buttons";
+@import "dark/icon";
+@import "dark/prompt";
+