@softpak/components 19.7.6 → 19.8.0

package/fesm2022/softpak-components-spx-spinner.mjs

@@ -174,6 +174,7 @@ var spxSpinner_actions = /*#__PURE__*/Object.freeze({
 });
 
 const initialState = {
+    nrOfLoadActions: 0,
     show: false,
 };
 
@@ -187,12 +188,14 @@ var spxSpinner_reducer = createFeature({
     reducer: createReducer(initialState, on(hide, (state) => {
         return {
             ...state,
-            show: false
+            nrOfLoadActions: state.nrOfLoadActions > 1 ? state.nrOfLoadActions - 1 : 0,
+            show: state.nrOfLoadActions > 2 ? true : false,
         };
     }), on(show, (state) => {
         return {
             ...state,
-            show: true
+            show: true,
+            nrOfLoadActions: state.nrOfLoadActions + 1,
         };
     })),
 });

package/fesm2022/softpak-components-spx-spinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-spinner.mjs","sources":["../../../../projects/softpak/components/spx-spinner/spx-spinner.component.ts","../../../../projects/softpak/components/spx-spinner/store/spx-spinner/spx-spinner.actions.ts","../../../../projects/softpak/components/spx-spinner/store/spx-spinner/spx-spinner.initial.ts","../../../../projects/softpak/components/spx-spinner/store/spx-spinner/spx-spinner.reducer.ts","../../../../projects/softpak/components/spx-spinner/softpak-components-spx-spinner.ts"],"sourcesContent":["\nimport { Component, Input } from '@angular/core';\n\n@Component({\n    selector: 'spx-spinner',\n    imports: [],\n    template: `<div class=\"spx-spinner__wrapper spx-spinner2\"\n    [class.is-shown]=\"this.spxShow\">\n    <div class=\"rounded-xl bg-white text-black dark:bg-black absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[150px] h-[150px]\">\n      <div class=\"spx-spinner__content\">\n        <svg class=\"spx-spinner__image m-auto dark:invert-[1] dark:sepia-[.04] dark:saturate-[.10] dark:hue-rotate-[156deg] dark:brightness-[1.10] dark:contrast-[.76]\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100px\" height=\"100px\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n          <g transform=\"rotate(0 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.9166666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(30 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.8333333333333334s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(60 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.75s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(90 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.6666666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(120 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5833333333333334s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(150 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(180 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.4166666666666667s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(210 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.3333333333333333s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(240 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.25s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(270 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.16666666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(300 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.08333333333333333s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(330 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"0s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n        </svg>\n        @if (this.spxLoaderText) {\n          <span class=\"text-gray-900 dark:text-black pb-2 block text-center\">{{this.spxLoaderText}}</span>\n        }\n      </div>\n    </div>\n  </div>`,\n    styles: `\n  :host {\n  background-color: rgba(0, 0, 0, .35);\n  color: #000000;\n  position: fixed;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  z-index: 9;\n}\n\n.is-shown {\n  display: block !important;\n  opacity: 1;\n  animation: fadeIn 0.2s forwards, fadeOut 0.2s forwards;\n}\n\n.spf-spinner__wrapper {\n  display: none;\n  position: absolute;\n  right: 0;\n  left: 0;\n  margin: 0 auto;\n  text-align: center;\n  opacity: 0;\n  z-index: 500000;\n}\n\n.spf-spinner__wrapper {\n  display: none;\n  position: absolute;\n  right: 0;\n  left: 0;\n  margin: 0 auto;\n  text-align: center;\n  opacity: 0;\n  z-index: 500000;\n}\n\n.spf-spinner__wrapper.spf-spinner1 {\n  top: calc((100vh / 2) - 25px);\n  width: 200px;\n  height: 50px;\n}\n\n.spf-spinner1 .spf-spinner__ball {\n  display: inline-block;\n  width: 50px;\n  height: 50px;\n  border-radius: 100%;\n  background-color: #0065a4;\n  animation: bouncedelay 1.4s infinite ease-in-out both;\n}\n\n.spf-spinner1 .spf-spinner__ball--1 {\n  animation-delay: -0.32s;\n}\n\n.spf-spinner1 .spf-spinner__ball--2 {\n  animation-delay: -0.16s;\n}\n\n\n.spf-spinner__wrapper.spf-spinner2 {\n  top: calc((100vh / 2) - 65px);\n  width: 100%;\n  max-width: 120px;\n}\n\n.spf-spinner2 .spf-spinner__content {\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);\n  background: white;\n  border-radius: 10px;\n  height: 100%;\n  width: 100%;\n  margin: 0 auto;\n  animation: .2s fadeIn forwards;\n  overflow: hidden;\n}\n\n.spf-spinner2 .spf-spinner__image {\n  display: block;\n  margin: 0 auto;\n  border-radius: 10px;\n}\n\n.spf-spinner2 svg {\n  margin: auto;\n  background: rgb(255, 255, 255);\n  display: block;\n  shape-rendering: auto;\n}\n\n.spf-spinner__wrapper.spf-spinner3 {\n  top: calc((100vh / 2) - 30px);\n}\n\n.spf-spinner3 .spf-spinner__box {\n  animation: loader-rotate 2s infinite linear;\n  display: block;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto;\n}\n\n.spf-spinner3 .spf-spinner__dot {\n  animation: dot-bounce 2s infinite ease-in-out;\n  display: inline-block;\n  position: relative;\n  top: 0;\n  width: 50%;\n  height: 50%;\n  border-radius: 100%;\n  background-color: #555;\n}\n\n.spf-spinner3 .spf-spinner__dot--2 {\n  top: auto;\n  bottom: 0;\n  animation-delay: -1s;\n}\n\n\n@keyframes loader-rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes dot-bounce {\n\n  0%,\n  100% {\n    transform: scale(0);\n  }\n\n  50% {\n    transform: scale(1);\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n\n  30% {\n    opacity: 0.4;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes bouncedelay {\n\n  0%,\n  80%,\n  100% {\n    transform: scale(0);\n  }\n\n  40% {\n    transform: scale(1);\n  }\n}\n\n  `\n})\nexport class SpxSpinnerComponent {\n  @Input() spxShow: boolean = true;\n  @Input() spxLoaderText!: string;\n}\n","import { createAction, props, union } from '@ngrx/store';\n\nexport const hide = createAction('[SPX / Spinner] Hide', props<Record<string, unknown>>());\nexport const show = createAction('[SPX / Spinner] Show', props<Record<string, unknown>>());\n\nconst all = union({\n    hide,\n    show,\n});\n\nexport type Actions = typeof all;\n","import { StateI } from \"./spx-spinner.state\";\n\nexport const initialState: StateI = {\n    show: false,\n};\n","\nimport * as actions from './spx-spinner.actions';\nimport { createFeature, createReducer, on } from '@ngrx/store';\nimport { StateI } from './spx-spinner.state';\nimport { initialState } from './spx-spinner.initial';\n\nexport default createFeature({\n    name: 'spxSpinner',\n    reducer: createReducer(\n        initialState,\n        on(actions.hide, (state: StateI): StateI => {\n            return {\n                ...state,\n                show: false\n            };\n          }),\n          on(actions.show, (state: StateI): StateI => {\n            return {\n                ...state,\n                show: true\n            };\n          }),\n    ),\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["actions.hide","actions.show"],"mappings":";;;;MA0Pa,mBAAmB,CAAA;AAvPhC,IAAA,WAAA,GAAA;QAwPW,IAAO,CAAA,OAAA,GAAY,IAAI;AAEjC;8GAHY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EApPlB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEL,QAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,gzDAAA,CAAA,EAAA,CAAA,CAAA;;2FA6KI,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAvP/B,SAAS;+BACI,aAAa,EAAA,OAAA,EACd,EAAE,EACD,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEL,QAAA,CAAA,EAAA,MAAA,EAAA,CAAA,gzDAAA,CAAA,EAAA;8BA8KE,OAAO,EAAA,CAAA;sBAAf;gBACQ,aAAa,EAAA,CAAA;sBAArB;;;AC1PI,MAAM,IAAI,GAAG,YAAY,CAAC,sBAAsB,EAAE,KAAK,EAA2B,CAAC;AACnF,MAAM,IAAI,GAAG,YAAY,CAAC,sBAAsB,EAAE,KAAK,EAA2B,CAAC;AAE1F,MAAM,GAAG,GAAG,KAAK,CAAC;IACd,IAAI;IACJ,IAAI;AACP,CAAA,CAAC;;;;;;;;ACNK,MAAM,YAAY,GAAW;AAChC,IAAA,IAAI,EAAE,KAAK;CACd;;;;;;;ACED,yBAAe,aAAa,CAAC;AACzB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,aAAa,CAClB,YAAY,EACZ,EAAE,CAACA,IAAY,EAAE,CAAC,KAAa,KAAY;QACvC,OAAO;AACH,YAAA,GAAG,KAAK;AACR,YAAA,IAAI,EAAE;SACT;KACF,CAAC,EACF,EAAE,CAACC,IAAY,EAAE,CAAC,KAAa,KAAY;QACzC,OAAO;AACH,YAAA,GAAG,KAAK;AACR,YAAA,IAAI,EAAE;SACT;AACH,KAAC,CAAC,CACP;AACJ,CAAA,CAAC;;;;;;;;;;;ACvBF;;AAEG;;;;"}
+{"version":3,"file":"softpak-components-spx-spinner.mjs","sources":["../../../../projects/softpak/components/spx-spinner/spx-spinner.component.ts","../../../../projects/softpak/components/spx-spinner/store/spx-spinner/spx-spinner.actions.ts","../../../../projects/softpak/components/spx-spinner/store/spx-spinner/spx-spinner.initial.ts","../../../../projects/softpak/components/spx-spinner/store/spx-spinner/spx-spinner.reducer.ts","../../../../projects/softpak/components/spx-spinner/softpak-components-spx-spinner.ts"],"sourcesContent":["\nimport { Component, Input } from '@angular/core';\n\n@Component({\n    selector: 'spx-spinner',\n    imports: [],\n    template: `<div class=\"spx-spinner__wrapper spx-spinner2\"\n    [class.is-shown]=\"this.spxShow\">\n    <div class=\"rounded-xl bg-white text-black dark:bg-black absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[150px] h-[150px]\">\n      <div class=\"spx-spinner__content\">\n        <svg class=\"spx-spinner__image m-auto dark:invert-[1] dark:sepia-[.04] dark:saturate-[.10] dark:hue-rotate-[156deg] dark:brightness-[1.10] dark:contrast-[.76]\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100px\" height=\"100px\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\">\n          <g transform=\"rotate(0 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.9166666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(30 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.8333333333333334s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(60 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.75s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(90 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.6666666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(120 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5833333333333334s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(150 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.5s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(180 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.4166666666666667s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(210 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.3333333333333333s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(240 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.25s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(270 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.16666666666666666s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(300 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"-0.08333333333333333s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n          <g transform=\"rotate(330 50 50)\">\n            <rect x=\"47.5\" y=\"23.5\" rx=\"2.5\" ry=\"2.75\" width=\"5\" height=\"11\" fill=\"#00457c\">\n              <animate attributeName=\"opacity\" values=\"1;0\" keyTimes=\"0;1\" dur=\"1s\" begin=\"0s\" repeatCount=\"indefinite\"></animate>\n            </rect>\n          </g>\n        </svg>\n        @if (this.spxLoaderText) {\n          <span class=\"text-gray-900 dark:text-black pb-2 block text-center\">{{this.spxLoaderText}}</span>\n        }\n      </div>\n    </div>\n  </div>`,\n    styles: `\n  :host {\n  background-color: rgba(0, 0, 0, .35);\n  color: #000000;\n  position: fixed;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  z-index: 9;\n}\n\n.is-shown {\n  display: block !important;\n  opacity: 1;\n  animation: fadeIn 0.2s forwards, fadeOut 0.2s forwards;\n}\n\n.spf-spinner__wrapper {\n  display: none;\n  position: absolute;\n  right: 0;\n  left: 0;\n  margin: 0 auto;\n  text-align: center;\n  opacity: 0;\n  z-index: 500000;\n}\n\n.spf-spinner__wrapper {\n  display: none;\n  position: absolute;\n  right: 0;\n  left: 0;\n  margin: 0 auto;\n  text-align: center;\n  opacity: 0;\n  z-index: 500000;\n}\n\n.spf-spinner__wrapper.spf-spinner1 {\n  top: calc((100vh / 2) - 25px);\n  width: 200px;\n  height: 50px;\n}\n\n.spf-spinner1 .spf-spinner__ball {\n  display: inline-block;\n  width: 50px;\n  height: 50px;\n  border-radius: 100%;\n  background-color: #0065a4;\n  animation: bouncedelay 1.4s infinite ease-in-out both;\n}\n\n.spf-spinner1 .spf-spinner__ball--1 {\n  animation-delay: -0.32s;\n}\n\n.spf-spinner1 .spf-spinner__ball--2 {\n  animation-delay: -0.16s;\n}\n\n\n.spf-spinner__wrapper.spf-spinner2 {\n  top: calc((100vh / 2) - 65px);\n  width: 100%;\n  max-width: 120px;\n}\n\n.spf-spinner2 .spf-spinner__content {\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);\n  background: white;\n  border-radius: 10px;\n  height: 100%;\n  width: 100%;\n  margin: 0 auto;\n  animation: .2s fadeIn forwards;\n  overflow: hidden;\n}\n\n.spf-spinner2 .spf-spinner__image {\n  display: block;\n  margin: 0 auto;\n  border-radius: 10px;\n}\n\n.spf-spinner2 svg {\n  margin: auto;\n  background: rgb(255, 255, 255);\n  display: block;\n  shape-rendering: auto;\n}\n\n.spf-spinner__wrapper.spf-spinner3 {\n  top: calc((100vh / 2) - 30px);\n}\n\n.spf-spinner3 .spf-spinner__box {\n  animation: loader-rotate 2s infinite linear;\n  display: block;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto;\n}\n\n.spf-spinner3 .spf-spinner__dot {\n  animation: dot-bounce 2s infinite ease-in-out;\n  display: inline-block;\n  position: relative;\n  top: 0;\n  width: 50%;\n  height: 50%;\n  border-radius: 100%;\n  background-color: #555;\n}\n\n.spf-spinner3 .spf-spinner__dot--2 {\n  top: auto;\n  bottom: 0;\n  animation-delay: -1s;\n}\n\n\n@keyframes loader-rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes dot-bounce {\n\n  0%,\n  100% {\n    transform: scale(0);\n  }\n\n  50% {\n    transform: scale(1);\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n\n  30% {\n    opacity: 0.4;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes bouncedelay {\n\n  0%,\n  80%,\n  100% {\n    transform: scale(0);\n  }\n\n  40% {\n    transform: scale(1);\n  }\n}\n\n  `\n})\nexport class SpxSpinnerComponent {\n  @Input() spxShow: boolean = true;\n  @Input() spxLoaderText!: string;\n}\n","import { createAction, props, union } from '@ngrx/store';\n\nexport const hide = createAction('[SPX / Spinner] Hide', props<Record<string, unknown>>());\nexport const show = createAction('[SPX / Spinner] Show', props<Record<string, unknown>>());\n\nconst all = union({\n    hide,\n    show,\n});\n\nexport type Actions = typeof all;\n","import { StateI } from \"./spx-spinner.state\";\n\nexport const initialState: StateI = {\n    nrOfLoadActions: 0,\n    show: false,\n};\n","\nimport * as actions from './spx-spinner.actions';\nimport { createFeature, createReducer, on } from '@ngrx/store';\nimport { StateI } from './spx-spinner.state';\nimport { initialState } from './spx-spinner.initial';\n\nexport default createFeature({\n    name: 'spxSpinner',\n    reducer: createReducer(\n        initialState,\n        on(actions.hide, (state: StateI): StateI => {\n            return {\n                ...state,\n                nrOfLoadActions: state.nrOfLoadActions > 1 ? state.nrOfLoadActions - 1 : 0,\n                show: state.nrOfLoadActions > 2 ? true : false,\n            };\n          }),\n          on(actions.show, (state: StateI): StateI => {\n            return {\n                ...state,\n                show: true,\n                nrOfLoadActions: state.nrOfLoadActions + 1,\n            };\n          }),\n    ),\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["actions.hide","actions.show"],"mappings":";;;;MA0Pa,mBAAmB,CAAA;AAvPhC,IAAA,WAAA,GAAA;QAwPW,IAAO,CAAA,OAAA,GAAY,IAAI;AAEjC;8GAHY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EApPlB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEL,QAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,gzDAAA,CAAA,EAAA,CAAA,CAAA;;2FA6KI,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAvP/B,SAAS;+BACI,aAAa,EAAA,OAAA,EACd,EAAE,EACD,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEL,QAAA,CAAA,EAAA,MAAA,EAAA,CAAA,gzDAAA,CAAA,EAAA;8BA8KE,OAAO,EAAA,CAAA;sBAAf;gBACQ,aAAa,EAAA,CAAA;sBAArB;;;AC1PI,MAAM,IAAI,GAAG,YAAY,CAAC,sBAAsB,EAAE,KAAK,EAA2B,CAAC;AACnF,MAAM,IAAI,GAAG,YAAY,CAAC,sBAAsB,EAAE,KAAK,EAA2B,CAAC;AAE1F,MAAM,GAAG,GAAG,KAAK,CAAC;IACd,IAAI;IACJ,IAAI;AACP,CAAA,CAAC;;;;;;;;ACNK,MAAM,YAAY,GAAW;AAChC,IAAA,eAAe,EAAE,CAAC;AAClB,IAAA,IAAI,EAAE,KAAK;CACd;;;;;;;ACCD,yBAAe,aAAa,CAAC;AACzB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,aAAa,CAClB,YAAY,EACZ,EAAE,CAACA,IAAY,EAAE,CAAC,KAAa,KAAY;QACvC,OAAO;AACH,YAAA,GAAG,KAAK;AACR,YAAA,eAAe,EAAE,KAAK,CAAC,eAAe,GAAG,CAAC,GAAG,KAAK,CAAC,eAAe,GAAG,CAAC,GAAG,CAAC;AAC1E,YAAA,IAAI,EAAE,KAAK,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,GAAG,KAAK;SACjD;KACF,CAAC,EACF,EAAE,CAACC,IAAY,EAAE,CAAC,KAAa,KAAY;QACzC,OAAO;AACH,YAAA,GAAG,KAAK;AACR,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,eAAe,EAAE,KAAK,CAAC,eAAe,GAAG,CAAC;SAC7C;AACH,KAAC,CAAC,CACP;AACJ,CAAA,CAAC;;;;;;;;;;;ACzBF;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softpak/components",
-  "version": "19.7.6",
+  "version": "19.8.0",
   "private": false,
   "peerDependencies": {
     "@angular/common": "19.x.x",
@@ -38,14 +38,14 @@
       "types": "./spx-app-configuration/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-app-configuration.mjs"
     },
-    "./spx-app-expiry": {
-      "types": "./spx-app-expiry/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-app-expiry.mjs"
-    },
     "./spx-button": {
       "types": "./spx-button/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-button.mjs"
     },
+    "./spx-app-expiry": {
+      "types": "./spx-app-expiry/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-app-expiry.mjs"
+    },
     "./spx-capitalize": {
       "types": "./spx-capitalize/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-capitalize.mjs"
@@ -130,13 +130,13 @@
       "types": "./spx-translate/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-translate.mjs"
     },
-    "./spx-validation": {
-      "types": "./spx-validation/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-validation.mjs"
-    },
     "./spx-update": {
       "types": "./spx-update/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-update.mjs"
+    },
+    "./spx-validation": {
+      "types": "./spx-validation/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-validation.mjs"
     }
   }
 }

package/spx-spinner/store/spx-spinner/spx-spinner.reducer.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
     name: "spxSpinner";
     reducer: import("@ngrx/store").ActionReducer<StateI, import("@ngrx/store").Action<string>>;
     selectSpxSpinnerState: import("@ngrx/store").MemoizedSelector<Record<string, any>, StateI, (featureState: StateI) => StateI>;
+    selectNrOfLoadActions: import("@ngrx/store").MemoizedSelector<Record<string, any>, number, (featureState: StateI) => number>;
     selectShow: import("@ngrx/store").MemoizedSelector<Record<string, any>, boolean, (featureState: StateI) => boolean>;
 };
 export default _default;

package/spx-spinner/store/spx-spinner/spx-spinner.state.d.ts

@@ -1,3 +1,4 @@
 export interface StateI {
+    nrOfLoadActions: number;
     show: boolean;
 }