@softpak/components 18.0.0 → 18.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/esm2022/spx-alert/spx-alert.component.mjs +53 -43
  2. package/esm2022/spx-app-expiry/spx-app-expiry.component.mjs +57 -40
  3. package/esm2022/spx-app-update/spx-app-update.component.mjs +61 -55
  4. package/esm2022/spx-card/spx-card-item.component.mjs +37 -31
  5. package/esm2022/spx-card/spx-card-line.component.mjs +63 -40
  6. package/esm2022/spx-card/spx-card.component.mjs +52 -49
  7. package/esm2022/spx-change-details/spx-change-details.component.mjs +3 -5
  8. package/esm2022/spx-channel-selection/src/spx-welcome.component.mjs +3 -6
  9. package/esm2022/spx-check-digit/spx-check-digit.component.mjs +4 -7
  10. package/esm2022/spx-form-section/spx-form-section.component.mjs +19 -14
  11. package/esm2022/spx-form-view/spx-autocomplete-search.component.mjs +3 -5
  12. package/esm2022/spx-form-view/spx-form-view.component.mjs +141 -131
  13. package/esm2022/spx-inputs/spx-dropdown.component.mjs +35 -36
  14. package/esm2022/spx-inputs/spx-input-box.component.mjs +143 -125
  15. package/esm2022/spx-inputs/spx-input-date.component.mjs +84 -81
  16. package/esm2022/spx-inputs/spx-input-float.component.mjs +2 -5
  17. package/esm2022/spx-inputs/spx-input-radio.component.mjs +25 -25
  18. package/esm2022/spx-inputs/spx-input-text.component.mjs +65 -61
  19. package/esm2022/spx-inputs/spx-input-time-modal.component.mjs +73 -60
  20. package/esm2022/spx-inputs/spx-input-time.component.mjs +2 -5
  21. package/esm2022/spx-inputs/spx-input.component.mjs +223 -213
  22. package/esm2022/spx-navigation/spx-home-tile.component.mjs +40 -37
  23. package/esm2022/spx-navigation/spx-navigation.component.mjs +6 -10
  24. package/esm2022/spx-number-check/spx-number-check.component.mjs +47 -41
  25. package/esm2022/spx-patch/spx-patch.component.mjs +27 -21
  26. package/esm2022/spx-spinner/spx-spinner.component.mjs +143 -142
  27. package/esm2022/spx-stock-info/spx-stock-info.component.mjs +6 -9
  28. package/esm2022/spx-toaster/src/spx-toaster.component.mjs +91 -96
  29. package/esm2022/spx-update/src/spx-update-info.component.mjs +3 -5
  30. package/esm2022/spx-validation/spx-validate-control.component.mjs +4 -7
  31. package/fesm2022/softpak-components-spx-alert.mjs +52 -42
  32. package/fesm2022/softpak-components-spx-alert.mjs.map +1 -1
  33. package/fesm2022/softpak-components-spx-app-expiry.mjs +56 -39
  34. package/fesm2022/softpak-components-spx-app-expiry.mjs.map +1 -1
  35. package/fesm2022/softpak-components-spx-app-update.mjs +60 -54
  36. package/fesm2022/softpak-components-spx-app-update.mjs.map +1 -1
  37. package/fesm2022/softpak-components-spx-card.mjs +148 -115
  38. package/fesm2022/softpak-components-spx-card.mjs.map +1 -1
  39. package/fesm2022/softpak-components-spx-change-details.mjs +2 -4
  40. package/fesm2022/softpak-components-spx-change-details.mjs.map +1 -1
  41. package/fesm2022/softpak-components-spx-channel-selection.mjs +2 -5
  42. package/fesm2022/softpak-components-spx-channel-selection.mjs.map +1 -1
  43. package/fesm2022/softpak-components-spx-check-digit.mjs +3 -6
  44. package/fesm2022/softpak-components-spx-check-digit.mjs.map +1 -1
  45. package/fesm2022/softpak-components-spx-form-section.mjs +18 -13
  46. package/fesm2022/softpak-components-spx-form-section.mjs.map +1 -1
  47. package/fesm2022/softpak-components-spx-form-view.mjs +142 -133
  48. package/fesm2022/softpak-components-spx-form-view.mjs.map +1 -1
  49. package/fesm2022/softpak-components-spx-inputs.mjs +643 -594
  50. package/fesm2022/softpak-components-spx-inputs.mjs.map +1 -1
  51. package/fesm2022/softpak-components-spx-navigation.mjs +44 -44
  52. package/fesm2022/softpak-components-spx-navigation.mjs.map +1 -1
  53. package/fesm2022/softpak-components-spx-number-check.mjs +46 -40
  54. package/fesm2022/softpak-components-spx-number-check.mjs.map +1 -1
  55. package/fesm2022/softpak-components-spx-patch.mjs +26 -20
  56. package/fesm2022/softpak-components-spx-patch.mjs.map +1 -1
  57. package/fesm2022/softpak-components-spx-spinner.mjs +142 -141
  58. package/fesm2022/softpak-components-spx-spinner.mjs.map +1 -1
  59. package/fesm2022/softpak-components-spx-stock-info.mjs +5 -8
  60. package/fesm2022/softpak-components-spx-stock-info.mjs.map +1 -1
  61. package/fesm2022/softpak-components-spx-toaster.mjs +90 -95
  62. package/fesm2022/softpak-components-spx-toaster.mjs.map +1 -1
  63. package/fesm2022/softpak-components-spx-update.mjs +2 -4
  64. package/fesm2022/softpak-components-spx-update.mjs.map +1 -1
  65. package/fesm2022/softpak-components-spx-validation.mjs +3 -6
  66. package/fesm2022/softpak-components-spx-validation.mjs.map +1 -1
  67. package/package.json +19 -19
@@ -1,4 +1,3 @@
1
- import { NgIf } from '@angular/common';
2
1
  import * as i0 from '@angular/core';
3
2
  import { Component, Input } from '@angular/core';
4
3
 
@@ -7,151 +6,153 @@ class SpxSpinnerComponent {
7
6
  this.spxShow = true;
8
7
  }
9
8
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpxSpinnerComponent, isStandalone: true, selector: "spx-spinner", inputs: { spxShow: "spxShow", spxLoaderText: "spxLoaderText" }, ngImport: i0, template: `<div class="spx-spinner__wrapper spx-spinner2"
11
- [class.is-shown]="this.spxShow">
12
- <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]">
13
- <div class="spx-spinner__content">
14
- <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">
15
- <g transform="rotate(0 50 50)">
16
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
17
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
18
- </rect>
19
- </g>
20
- <g transform="rotate(30 50 50)">
21
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
22
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
23
- </rect>
24
- </g>
25
- <g transform="rotate(60 50 50)">
26
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
27
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
28
- </rect>
29
- </g>
30
- <g transform="rotate(90 50 50)">
31
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
32
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
33
- </rect>
34
- </g>
35
- <g transform="rotate(120 50 50)">
36
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
37
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
38
- </rect>
39
- </g>
40
- <g transform="rotate(150 50 50)">
41
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
42
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
43
- </rect>
44
- </g>
45
- <g transform="rotate(180 50 50)">
46
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
47
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
48
- </rect>
49
- </g>
50
- <g transform="rotate(210 50 50)">
51
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
52
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
53
- </rect>
54
- </g>
55
- <g transform="rotate(240 50 50)">
56
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
57
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
58
- </rect>
59
- </g>
60
- <g transform="rotate(270 50 50)">
61
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
62
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
63
- </rect>
64
- </g>
65
- <g transform="rotate(300 50 50)">
66
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
67
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
68
- </rect>
69
- </g>
70
- <g transform="rotate(330 50 50)">
71
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
72
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
73
- </rect>
74
- </g>
75
- </svg>
76
- <span *ngIf="this.spxLoaderText" class="text-gray-900 dark:text-black pb-2 block text-center">{{this.spxLoaderText}}</span>
9
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxSpinnerComponent, isStandalone: true, selector: "spx-spinner", inputs: { spxShow: "spxShow", spxLoaderText: "spxLoaderText" }, ngImport: i0, template: `<div class="spx-spinner__wrapper spx-spinner2"
10
+ [class.is-shown]="this.spxShow">
11
+ <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]">
12
+ <div class="spx-spinner__content">
13
+ <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">
14
+ <g transform="rotate(0 50 50)">
15
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
16
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
17
+ </rect>
18
+ </g>
19
+ <g transform="rotate(30 50 50)">
20
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
21
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
22
+ </rect>
23
+ </g>
24
+ <g transform="rotate(60 50 50)">
25
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
26
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
27
+ </rect>
28
+ </g>
29
+ <g transform="rotate(90 50 50)">
30
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
31
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
32
+ </rect>
33
+ </g>
34
+ <g transform="rotate(120 50 50)">
35
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
36
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
37
+ </rect>
38
+ </g>
39
+ <g transform="rotate(150 50 50)">
40
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
41
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
42
+ </rect>
43
+ </g>
44
+ <g transform="rotate(180 50 50)">
45
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
46
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
47
+ </rect>
48
+ </g>
49
+ <g transform="rotate(210 50 50)">
50
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
51
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
52
+ </rect>
53
+ </g>
54
+ <g transform="rotate(240 50 50)">
55
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
56
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
57
+ </rect>
58
+ </g>
59
+ <g transform="rotate(270 50 50)">
60
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
61
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
62
+ </rect>
63
+ </g>
64
+ <g transform="rotate(300 50 50)">
65
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
66
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
67
+ </rect>
68
+ </g>
69
+ <g transform="rotate(330 50 50)">
70
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
71
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
72
+ </rect>
73
+ </g>
74
+ </svg>
75
+ @if (this.spxLoaderText) {
76
+ <span class="text-gray-900 dark:text-black pb-2 block text-center">{{this.spxLoaderText}}</span>
77
+ }
78
+ </div>
77
79
  </div>
78
- </div>
79
- </div>`, isInline: true, styles: [":host{background-color:#00000059;position:fixed;height:100%;inset:0;z-index:9}.is-shown{display:block!important;opacity:1;animation:fadeIn .2s forwards,fadeOut .2s forwards}.spf-spinner__wrapper{display:none;position:absolute;right:0;left:0;margin:0 auto;text-align:center;opacity:0;z-index:500000}.spf-spinner__wrapper.spf-spinner1{top:calc(50vh - 25px);width:200px;height:50px}.spf-spinner1 .spf-spinner__ball{display:inline-block;width:50px;height:50px;border-radius:100%;background-color:#0065a4;animation:bouncedelay 1.4s infinite ease-in-out both}.spf-spinner1 .spf-spinner__ball--1{animation-delay:-.32s}.spf-spinner1 .spf-spinner__ball--2{animation-delay:-.16s}.spf-spinner__wrapper.spf-spinner2{top:calc(50vh - 65px);width:100%;max-width:120px}.spf-spinner2 .spf-spinner__content{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038;background:#fff;border-radius:10px;height:100%;width:100%;margin:0 auto;animation:.2s fadeIn forwards;overflow:hidden}.spf-spinner2 .spf-spinner__image{display:block;margin:0 auto;border-radius:10px}.spf-spinner2 svg{margin:auto;background:#fff;display:block;shape-rendering:auto}.spf-spinner__wrapper.spf-spinner3{top:calc(50vh - 30px)}.spf-spinner3 .spf-spinner__box{animation:loader-rotate 2s infinite linear;display:block;width:60px;height:60px;margin:0 auto}.spf-spinner3 .spf-spinner__dot{animation:dot-bounce 2s infinite ease-in-out;display:inline-block;position:relative;top:0;width:50%;height:50%;border-radius:100%;background-color:#555}.spf-spinner3 .spf-spinner__dot--2{top:auto;bottom:0;animation-delay:-1s}@keyframes loader-rotate{to{transform:rotate(360deg)}}@keyframes dot-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}30%{opacity:.4}to{opacity:1}}@keyframes bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
80
+ </div>`, isInline: true, styles: [":host{background-color:#00000059;position:fixed;height:100%;inset:0;z-index:9}.is-shown{display:block!important;opacity:1;animation:fadeIn .2s forwards,fadeOut .2s forwards}.spf-spinner__wrapper{display:none;position:absolute;right:0;left:0;margin:0 auto;text-align:center;opacity:0;z-index:500000}.spf-spinner__wrapper.spf-spinner1{top:calc(50vh - 25px);width:200px;height:50px}.spf-spinner1 .spf-spinner__ball{display:inline-block;width:50px;height:50px;border-radius:100%;background-color:#0065a4;animation:bouncedelay 1.4s infinite ease-in-out both}.spf-spinner1 .spf-spinner__ball--1{animation-delay:-.32s}.spf-spinner1 .spf-spinner__ball--2{animation-delay:-.16s}.spf-spinner__wrapper.spf-spinner2{top:calc(50vh - 65px);width:100%;max-width:120px}.spf-spinner2 .spf-spinner__content{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038;background:#fff;border-radius:10px;height:100%;width:100%;margin:0 auto;animation:.2s fadeIn forwards;overflow:hidden}.spf-spinner2 .spf-spinner__image{display:block;margin:0 auto;border-radius:10px}.spf-spinner2 svg{margin:auto;background:#fff;display:block;shape-rendering:auto}.spf-spinner__wrapper.spf-spinner3{top:calc(50vh - 30px)}.spf-spinner3 .spf-spinner__box{animation:loader-rotate 2s infinite linear;display:block;width:60px;height:60px;margin:0 auto}.spf-spinner3 .spf-spinner__dot{animation:dot-bounce 2s infinite ease-in-out;display:inline-block;position:relative;top:0;width:50%;height:50%;border-radius:100%;background-color:#555}.spf-spinner3 .spf-spinner__dot--2{top:auto;bottom:0;animation-delay:-1s}@keyframes loader-rotate{to{transform:rotate(360deg)}}@keyframes dot-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}30%{opacity:.4}to{opacity:1}}@keyframes bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }); }
80
81
  }
81
82
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxSpinnerComponent, decorators: [{
82
83
  type: Component,
83
- args: [{ selector: 'spx-spinner', standalone: true, imports: [
84
- NgIf
85
- ], template: `<div class="spx-spinner__wrapper spx-spinner2"
86
- [class.is-shown]="this.spxShow">
87
- <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]">
88
- <div class="spx-spinner__content">
89
- <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">
90
- <g transform="rotate(0 50 50)">
91
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
92
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
93
- </rect>
94
- </g>
95
- <g transform="rotate(30 50 50)">
96
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
97
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
98
- </rect>
99
- </g>
100
- <g transform="rotate(60 50 50)">
101
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
102
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
103
- </rect>
104
- </g>
105
- <g transform="rotate(90 50 50)">
106
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
107
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
108
- </rect>
109
- </g>
110
- <g transform="rotate(120 50 50)">
111
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
112
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
113
- </rect>
114
- </g>
115
- <g transform="rotate(150 50 50)">
116
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
117
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
118
- </rect>
119
- </g>
120
- <g transform="rotate(180 50 50)">
121
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
122
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
123
- </rect>
124
- </g>
125
- <g transform="rotate(210 50 50)">
126
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
127
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
128
- </rect>
129
- </g>
130
- <g transform="rotate(240 50 50)">
131
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
132
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
133
- </rect>
134
- </g>
135
- <g transform="rotate(270 50 50)">
136
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
137
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
138
- </rect>
139
- </g>
140
- <g transform="rotate(300 50 50)">
141
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
142
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
143
- </rect>
144
- </g>
145
- <g transform="rotate(330 50 50)">
146
- <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
147
- <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
148
- </rect>
149
- </g>
150
- </svg>
151
- <span *ngIf="this.spxLoaderText" class="text-gray-900 dark:text-black pb-2 block text-center">{{this.spxLoaderText}}</span>
84
+ args: [{ selector: 'spx-spinner', standalone: true, imports: [], template: `<div class="spx-spinner__wrapper spx-spinner2"
85
+ [class.is-shown]="this.spxShow">
86
+ <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]">
87
+ <div class="spx-spinner__content">
88
+ <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">
89
+ <g transform="rotate(0 50 50)">
90
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
91
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
92
+ </rect>
93
+ </g>
94
+ <g transform="rotate(30 50 50)">
95
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
96
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
97
+ </rect>
98
+ </g>
99
+ <g transform="rotate(60 50 50)">
100
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
101
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
102
+ </rect>
103
+ </g>
104
+ <g transform="rotate(90 50 50)">
105
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
106
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
107
+ </rect>
108
+ </g>
109
+ <g transform="rotate(120 50 50)">
110
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
111
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
112
+ </rect>
113
+ </g>
114
+ <g transform="rotate(150 50 50)">
115
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
116
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
117
+ </rect>
118
+ </g>
119
+ <g transform="rotate(180 50 50)">
120
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
121
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
122
+ </rect>
123
+ </g>
124
+ <g transform="rotate(210 50 50)">
125
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
126
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
127
+ </rect>
128
+ </g>
129
+ <g transform="rotate(240 50 50)">
130
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
131
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
132
+ </rect>
133
+ </g>
134
+ <g transform="rotate(270 50 50)">
135
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
136
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
137
+ </rect>
138
+ </g>
139
+ <g transform="rotate(300 50 50)">
140
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
141
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
142
+ </rect>
143
+ </g>
144
+ <g transform="rotate(330 50 50)">
145
+ <rect x="47.5" y="23.5" rx="2.5" ry="2.75" width="5" height="11" fill="#00457c">
146
+ <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
147
+ </rect>
148
+ </g>
149
+ </svg>
150
+ @if (this.spxLoaderText) {
151
+ <span class="text-gray-900 dark:text-black pb-2 block text-center">{{this.spxLoaderText}}</span>
152
+ }
153
+ </div>
152
154
  </div>
153
- </div>
154
- </div>`, styles: [":host{background-color:#00000059;position:fixed;height:100%;inset:0;z-index:9}.is-shown{display:block!important;opacity:1;animation:fadeIn .2s forwards,fadeOut .2s forwards}.spf-spinner__wrapper{display:none;position:absolute;right:0;left:0;margin:0 auto;text-align:center;opacity:0;z-index:500000}.spf-spinner__wrapper.spf-spinner1{top:calc(50vh - 25px);width:200px;height:50px}.spf-spinner1 .spf-spinner__ball{display:inline-block;width:50px;height:50px;border-radius:100%;background-color:#0065a4;animation:bouncedelay 1.4s infinite ease-in-out both}.spf-spinner1 .spf-spinner__ball--1{animation-delay:-.32s}.spf-spinner1 .spf-spinner__ball--2{animation-delay:-.16s}.spf-spinner__wrapper.spf-spinner2{top:calc(50vh - 65px);width:100%;max-width:120px}.spf-spinner2 .spf-spinner__content{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038;background:#fff;border-radius:10px;height:100%;width:100%;margin:0 auto;animation:.2s fadeIn forwards;overflow:hidden}.spf-spinner2 .spf-spinner__image{display:block;margin:0 auto;border-radius:10px}.spf-spinner2 svg{margin:auto;background:#fff;display:block;shape-rendering:auto}.spf-spinner__wrapper.spf-spinner3{top:calc(50vh - 30px)}.spf-spinner3 .spf-spinner__box{animation:loader-rotate 2s infinite linear;display:block;width:60px;height:60px;margin:0 auto}.spf-spinner3 .spf-spinner__dot{animation:dot-bounce 2s infinite ease-in-out;display:inline-block;position:relative;top:0;width:50%;height:50%;border-radius:100%;background-color:#555}.spf-spinner3 .spf-spinner__dot--2{top:auto;bottom:0;animation-delay:-1s}@keyframes loader-rotate{to{transform:rotate(360deg)}}@keyframes dot-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}30%{opacity:.4}to{opacity:1}}@keyframes bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
155
+ </div>`, styles: [":host{background-color:#00000059;position:fixed;height:100%;inset:0;z-index:9}.is-shown{display:block!important;opacity:1;animation:fadeIn .2s forwards,fadeOut .2s forwards}.spf-spinner__wrapper{display:none;position:absolute;right:0;left:0;margin:0 auto;text-align:center;opacity:0;z-index:500000}.spf-spinner__wrapper.spf-spinner1{top:calc(50vh - 25px);width:200px;height:50px}.spf-spinner1 .spf-spinner__ball{display:inline-block;width:50px;height:50px;border-radius:100%;background-color:#0065a4;animation:bouncedelay 1.4s infinite ease-in-out both}.spf-spinner1 .spf-spinner__ball--1{animation-delay:-.32s}.spf-spinner1 .spf-spinner__ball--2{animation-delay:-.16s}.spf-spinner__wrapper.spf-spinner2{top:calc(50vh - 65px);width:100%;max-width:120px}.spf-spinner2 .spf-spinner__content{box-shadow:0 19px 38px #0000004d,0 15px 12px #00000038;background:#fff;border-radius:10px;height:100%;width:100%;margin:0 auto;animation:.2s fadeIn forwards;overflow:hidden}.spf-spinner2 .spf-spinner__image{display:block;margin:0 auto;border-radius:10px}.spf-spinner2 svg{margin:auto;background:#fff;display:block;shape-rendering:auto}.spf-spinner__wrapper.spf-spinner3{top:calc(50vh - 30px)}.spf-spinner3 .spf-spinner__box{animation:loader-rotate 2s infinite linear;display:block;width:60px;height:60px;margin:0 auto}.spf-spinner3 .spf-spinner__dot{animation:dot-bounce 2s infinite ease-in-out;display:inline-block;position:relative;top:0;width:50%;height:50%;border-radius:100%;background-color:#555}.spf-spinner3 .spf-spinner__dot--2{top:auto;bottom:0;animation-delay:-1s}@keyframes loader-rotate{to{transform:rotate(360deg)}}@keyframes dot-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}30%{opacity:.4}to{opacity:1}}@keyframes bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
155
156
  }], propDecorators: { spxShow: [{
156
157
  type: Input
157
158
  }], spxLoaderText: [{
@@ -1 +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/softpak-components-spx-spinner.ts"],"sourcesContent":["import { NgIf } from '@angular/common';\nimport { Component, Input } from '@angular/core';\n\n@Component({\n selector: 'spx-spinner',\n standalone: true,\n imports: [\n NgIf\n ],\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 <span *ngIf=\"this.spxLoaderText\" class=\"text-gray-900 dark:text-black pb-2 block text-center\">{{this.spxLoaderText}}</span>\n </div>\n </div>\n</div>`,\n styles: `\n :host {\n background-color: rgba(0, 0, 0, .35);\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MA0Pa,mBAAmB,CAAA;AAvPhC,IAAA,WAAA,GAAA;QAwPW,IAAO,CAAA,OAAA,GAAY,IAAI,CAAC;AAElC,KAAA;+GAHY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,EAjPpB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEL,MAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,qyDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAvEH,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAmPK,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAvP/B,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EACP,OAAA,EAAA;wBACP,IAAI;qBACL,EACS,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEL,MAAA,CAAA,EAAA,MAAA,EAAA,CAAA,qyDAAA,CAAA,EAAA,CAAA;8BA6KI,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;;;AC5PR;;AAEG;;;;"}
1
+ {"version":3,"file":"softpak-components-spx-spinner.mjs","sources":["../../../../projects/softpak/components/spx-spinner/spx-spinner.component.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 standalone: true,\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 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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MA0Pa,mBAAmB,CAAA;AAvPhC,IAAA,WAAA,GAAA;QAwPW,IAAO,CAAA,OAAA,GAAY,IAAI,CAAC;AAElC,KAAA;+GAHY,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,EAnPpB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEH,QAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,qyDAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FA4KI,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAvP/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EACX,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,EAAE,EACD,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEH,QAAA,CAAA,EAAA,MAAA,EAAA,CAAA,qyDAAA,CAAA,EAAA,CAAA;8BA6KE,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;;;AC5PR;;AAEG;;;;"}
@@ -3,8 +3,6 @@ import { EventEmitter, Component, Input, Output } from '@angular/core';
3
3
  import * as i1 from '@angular/forms';
4
4
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
5
5
  import { spxValidatorRequired, SpxValidateControlComponent } from '@softpak/components/spx-validation';
6
- import * as i2 from '@angular/common';
7
- import { CommonModule } from '@angular/common';
8
6
  import { SpxInputTypeEnum, SpxInputComponent } from '@softpak/components/spx-inputs';
9
7
  import { SpxFormButtonTypeEnum, SpxFormViewComponent } from '@softpak/components/spx-form-view';
10
8
  import { SpxButtonComponent } from '@softpak/components/spx-button';
@@ -12,10 +10,10 @@ import { SpxSeverityEnum, valuePairToValue } from '@softpak/components/spx-helpe
12
10
  import { SpxPaginationComponent } from '@softpak/components/spx-pagination';
13
11
  import { SpxAlertComponent } from '@softpak/components/spx-alert';
14
12
  import { SpxCardComponent, SpxCardLineComponent } from '@softpak/components/spx-card';
15
- import * as i4 from '@ngx-translate/core';
13
+ import * as i3 from '@ngx-translate/core';
16
14
  import { TranslateModule } from '@ngx-translate/core';
17
15
  import { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';
18
- import * as i3 from '@fortawesome/angular-fontawesome';
16
+ import * as i2 from '@fortawesome/angular-fontawesome';
19
17
  import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
20
18
 
21
19
  const ctrlCategory = 'ctrlCategory';
@@ -230,12 +228,11 @@ class SpxStockInfoComponent {
230
228
  });
231
229
  }
232
230
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxStockInfoComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
233
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpxStockInfoComponent, isStandalone: true, selector: "spx-stock-info", inputs: { statusGroupsInPatch: "statusGroupsInPatch", containers: "containers", currentPage: "currentPage", faArrowLeft: "faArrowLeft", faArrowRight: "faArrowRight", faContainerStorage: "faContainerStorage", formGroup: "formGroup", loaded: "loaded", pageSize: "pageSize", suggestions: "suggestions", textCategory: "textCategory", textContainerInfo: "textContainerInfo", textContainerStatus: "textContainerStatus", textContainerStatusGroup: "textContainerStatusGroup", textContainerType: "textContainerType", textCustomer: "textCustomer", textDepot: "textDepot", textLocation: "textLocation", textNext: "textNext", textPage: "textPage", textPrevious: "textPrevious", textSearch: "textSearch", textNoResults: "textNoResults", textYouCanChangeYourFilters: "textYouCanChangeYourFilters" }, outputs: { spxBlurCategory: "spxBlurCategory", spxBlurContainerStatus: "spxBlurContainerStatus", spxBlurContainerStatusGroup: "spxBlurContainerStatusGroup", spxBlurContainerType: "spxBlurContainerType", spxBlurCustomer: "spxBlurCustomer", spxClickContainer: "spxClickContainer", spxPageChange: "spxPageChange", spxSearchCategory: "spxSearchCategory", spxSearchContainerStatus: "spxSearchContainerStatus", spxSearchContainerStatusGroup: "spxSearchContainerStatusGroup", spxSearchContainerType: "spxSearchContainerType", spxSearchCustomer: "spxSearchCustomer", spxSubmit: "spxSubmit" }, ngImport: i0, template: "<form *ngIf=\"!loaded\" [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\" (ngSubmit)=\"onSubmit()\">\n <spx-form-view\n [spxFormGroup]=\"formGroup\"\n [spxForm]=\"form\"\n [spxSuggestions]=\"suggestions\"\n (spxBlur)=\"onBlur($event)\"\n (spxSearch)=\"onSearch($event)\">\n </spx-form-view>\n</form>\n\n<div class=\"flex flex-col gap-3\" *ngIf=\"loaded\">\n <spx-pagination\n *ngIf=\"containers.length > 0\"\n [spxPage]=\"currentPage\"\n [spxMaxPages]=\"(containers.length < (pageSize + 1)) ? (currentPage + 1) : currentPage\"\n [faArrowLeft]=\"faArrowLeft\"\n [faArrowRight]=\"faArrowRight\"\n [textPage]=\"textPage\"\n [textPrevious]=\"textPrevious\"\n [textNext]=\"textNext\"\n (spxPageChange)=\"onPageChange($event)\">\n </spx-pagination>\n\n <spx-alert *ngIf=\"containers.length === 0\" [spxSeverity]=\"severityInfo\" [spxTitle]=\"textNoResults | translate | capitalize\">\n {{ textYouCanChangeYourFilters | translate | capitalize }}\n </spx-alert>\n\n <ng-container *ngFor=\"let container of containers; let i = index;\">\n <spx-card *ngIf=\"i < pageSize\" [hasContent]=\"false\" (clicked)=\"goToContainer(container)\">\n <div card-header class=\"card-header rounded-t-lg p-3 bg-sky-200\">\n <div class=\"flex flex-row space-x-3 items-center w-full\">\n <div\n class=\"card-header-icon-left flex basis-10 py-1.5 shrink-0 grow-0 place-items-center rounded bg-sky-400\">\n <fa-icon class=\"mx-auto\" [icon]=\"faContainerStorage\"></fa-icon>\n </div>\n \n <div class=\"card-header-text-middle grow\">\n <div class=\"block font-medium text-large\">{{ container.formatted.containerNumber }}</div>\n </div>\n \n <div\n class=\"card-header-icons-right text-sm text-gray-900 leading-5 flex flex-wrap items-stretch text-center font-bold\">\n <div *ngIf=\"container.containerStatus\" class=\"min-w-[36px] px-2 py-1 bg-white text-black\"> {{\n container.formatted.containerStatus }}</div>\n </div>\n </div>\n </div>\n <div card-lines class=\"grid grid-cols-2 gap-2\">\n <spx-card-line [text]=\"textContainerType | translate | capitalize\"\n [value]=\"container.formatted.containerType\"></spx-card-line>\n <spx-card-line [text]=\"textCategory | translate | capitalize\"\n [value]=\"container.formatted.category\"></spx-card-line>\n <spx-card-line [text]=\"textLocation | translate | capitalize\"\n [value]=\"container.formatted.location\"></spx-card-line>\n </div>\n </spx-card>\n </ng-container>\n\n <spx-pagination\n *ngIf=\"containers.length > 0\"\n [spxPage]=\"currentPage\"\n [spxMaxPages]=\"(containers.length < (pageSize + 1)) ? (currentPage + 1) : currentPage\"\n [faArrowLeft]=\"faArrowLeft\"\n [faArrowRight]=\"faArrowRight\"\n [textPage]=\"textPage\"\n [textPrevious]=\"textPrevious\"\n [textNext]=\"textNext\"\n (spxPageChange)=\"onPageChange($event)\">\n </spx-pagination>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SpxAlertComponent, selector: "spx-alert", inputs: ["spxAutoclose", "spxCloseable", "spxHideTitle", "spxTitle", "spxMarginTop", "spxSeverity", "tick"], outputs: ["spxClose"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxCardComponent, selector: "spx-card", inputs: ["clickable", "hasContent", "onDetailPage", "text", "unit", "tableView"], outputs: ["clicked"] }, { kind: "component", type: SpxCardLineComponent, selector: "spx-card-line", inputs: ["icon", "showPositiveOrNegative", "text", "value", "secondValue", "showProgress", "unit", "newOrderScreen"] }, { kind: "component", type: SpxFormViewComponent, selector: "spx-form-view", inputs: ["spxFormGroup", "spxForm", "spxSuggestions"], outputs: ["spxBlur", "spxClick", "spxSearch"] }, { kind: "component", type: SpxPaginationComponent, selector: "spx-pagination", inputs: ["faArrowLeft", "faArrowRight", "spxPage", "spxMaxPages", "textNext", "textPage", "textPrevious"], outputs: ["spxPageChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
231
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpxStockInfoComponent, isStandalone: true, selector: "spx-stock-info", inputs: { statusGroupsInPatch: "statusGroupsInPatch", containers: "containers", currentPage: "currentPage", faArrowLeft: "faArrowLeft", faArrowRight: "faArrowRight", faContainerStorage: "faContainerStorage", formGroup: "formGroup", loaded: "loaded", pageSize: "pageSize", suggestions: "suggestions", textCategory: "textCategory", textContainerInfo: "textContainerInfo", textContainerStatus: "textContainerStatus", textContainerStatusGroup: "textContainerStatusGroup", textContainerType: "textContainerType", textCustomer: "textCustomer", textDepot: "textDepot", textLocation: "textLocation", textNext: "textNext", textPage: "textPage", textPrevious: "textPrevious", textSearch: "textSearch", textNoResults: "textNoResults", textYouCanChangeYourFilters: "textYouCanChangeYourFilters" }, outputs: { spxBlurCategory: "spxBlurCategory", spxBlurContainerStatus: "spxBlurContainerStatus", spxBlurContainerStatusGroup: "spxBlurContainerStatusGroup", spxBlurContainerType: "spxBlurContainerType", spxBlurCustomer: "spxBlurCustomer", spxClickContainer: "spxClickContainer", spxPageChange: "spxPageChange", spxSearchCategory: "spxSearchCategory", spxSearchContainerStatus: "spxSearchContainerStatus", spxSearchContainerStatusGroup: "spxSearchContainerStatusGroup", spxSearchContainerType: "spxSearchContainerType", spxSearchCustomer: "spxSearchCustomer", spxSubmit: "spxSubmit" }, ngImport: i0, template: "@if (!loaded) {\n <form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\" (ngSubmit)=\"onSubmit()\">\n <spx-form-view\n [spxFormGroup]=\"formGroup\"\n [spxForm]=\"form\"\n [spxSuggestions]=\"suggestions\"\n (spxBlur)=\"onBlur($event)\"\n (spxSearch)=\"onSearch($event)\">\n </spx-form-view>\n </form>\n}\n\n@if (loaded) {\n <div class=\"flex flex-col gap-3\">\n @if (containers.length > 0) {\n <spx-pagination\n [spxPage]=\"currentPage\"\n [spxMaxPages]=\"(containers.length < (pageSize + 1)) ? (currentPage + 1) : currentPage\"\n [faArrowLeft]=\"faArrowLeft\"\n [faArrowRight]=\"faArrowRight\"\n [textPage]=\"textPage\"\n [textPrevious]=\"textPrevious\"\n [textNext]=\"textNext\"\n (spxPageChange)=\"onPageChange($event)\">\n </spx-pagination>\n }\n @if (containers.length === 0) {\n <spx-alert [spxSeverity]=\"severityInfo\" [spxTitle]=\"textNoResults | translate | capitalize\">\n {{ textYouCanChangeYourFilters | translate | capitalize }}\n </spx-alert>\n }\n @for (container of containers; track container; let i = $index) {\n @if (i < pageSize) {\n <spx-card [hasContent]=\"false\" (clicked)=\"goToContainer(container)\">\n <div card-header class=\"card-header rounded-t-lg p-3 bg-sky-200\">\n <div class=\"flex flex-row space-x-3 items-center w-full\">\n <div\n class=\"card-header-icon-left flex basis-10 py-1.5 shrink-0 grow-0 place-items-center rounded bg-sky-400\">\n <fa-icon class=\"mx-auto\" [icon]=\"faContainerStorage\"></fa-icon>\n </div>\n <div class=\"card-header-text-middle grow\">\n <div class=\"block font-medium text-large\">{{ container.formatted.containerNumber }}</div>\n </div>\n <div\n class=\"card-header-icons-right text-sm text-gray-900 leading-5 flex flex-wrap items-stretch text-center font-bold\">\n @if (container.containerStatus) {\n <div class=\"min-w-[36px] px-2 py-1 bg-white text-black\"> {{\n container.formatted.containerStatus }}</div>\n }\n </div>\n </div>\n </div>\n <div card-lines class=\"grid grid-cols-2 gap-2\">\n <spx-card-line [text]=\"textContainerType | translate | capitalize\"\n [value]=\"container.formatted.containerType\"></spx-card-line>\n <spx-card-line [text]=\"textCategory | translate | capitalize\"\n [value]=\"container.formatted.category\"></spx-card-line>\n <spx-card-line [text]=\"textLocation | translate | capitalize\"\n [value]=\"container.formatted.location\"></spx-card-line>\n </div>\n </spx-card>\n }\n }\n @if (containers.length > 0) {\n <spx-pagination\n [spxPage]=\"currentPage\"\n [spxMaxPages]=\"(containers.length < (pageSize + 1)) ? (currentPage + 1) : currentPage\"\n [faArrowLeft]=\"faArrowLeft\"\n [faArrowRight]=\"faArrowRight\"\n [textPage]=\"textPage\"\n [textPrevious]=\"textPrevious\"\n [textNext]=\"textNext\"\n (spxPageChange)=\"onPageChange($event)\">\n </spx-pagination>\n }\n </div>\n}", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SpxAlertComponent, selector: "spx-alert", inputs: ["spxAutoclose", "spxCloseable", "spxHideTitle", "spxTitle", "spxMarginTop", "spxSeverity", "tick"], outputs: ["spxClose"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxCardComponent, selector: "spx-card", inputs: ["clickable", "hasContent", "onDetailPage", "text", "unit", "tableView"], outputs: ["clicked"] }, { kind: "component", type: SpxCardLineComponent, selector: "spx-card-line", inputs: ["icon", "showPositiveOrNegative", "text", "value", "secondValue", "showProgress", "unit", "newOrderScreen"] }, { kind: "component", type: SpxFormViewComponent, selector: "spx-form-view", inputs: ["spxFormGroup", "spxForm", "spxSuggestions"], outputs: ["spxBlur", "spxClick", "spxSearch"] }, { kind: "component", type: SpxPaginationComponent, selector: "spx-pagination", inputs: ["faArrowLeft", "faArrowRight", "spxPage", "spxMaxPages", "textNext", "textPage", "textPrevious"], outputs: ["spxPageChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
234
232
  }
235
233
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpxStockInfoComponent, decorators: [{
236
234
  type: Component,
237
235
  args: [{ selector: 'spx-stock-info', standalone: true, imports: [
238
- CommonModule,
239
236
  FormsModule,
240
237
  FontAwesomeModule,
241
238
  ReactiveFormsModule,
@@ -248,8 +245,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
248
245
  SpxInputComponent,
249
246
  SpxPaginationComponent,
250
247
  SpxValidateControlComponent,
251
- TranslateModule,
252
- ], template: "<form *ngIf=\"!loaded\" [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\" (ngSubmit)=\"onSubmit()\">\n <spx-form-view\n [spxFormGroup]=\"formGroup\"\n [spxForm]=\"form\"\n [spxSuggestions]=\"suggestions\"\n (spxBlur)=\"onBlur($event)\"\n (spxSearch)=\"onSearch($event)\">\n </spx-form-view>\n</form>\n\n<div class=\"flex flex-col gap-3\" *ngIf=\"loaded\">\n <spx-pagination\n *ngIf=\"containers.length > 0\"\n [spxPage]=\"currentPage\"\n [spxMaxPages]=\"(containers.length < (pageSize + 1)) ? (currentPage + 1) : currentPage\"\n [faArrowLeft]=\"faArrowLeft\"\n [faArrowRight]=\"faArrowRight\"\n [textPage]=\"textPage\"\n [textPrevious]=\"textPrevious\"\n [textNext]=\"textNext\"\n (spxPageChange)=\"onPageChange($event)\">\n </spx-pagination>\n\n <spx-alert *ngIf=\"containers.length === 0\" [spxSeverity]=\"severityInfo\" [spxTitle]=\"textNoResults | translate | capitalize\">\n {{ textYouCanChangeYourFilters | translate | capitalize }}\n </spx-alert>\n\n <ng-container *ngFor=\"let container of containers; let i = index;\">\n <spx-card *ngIf=\"i < pageSize\" [hasContent]=\"false\" (clicked)=\"goToContainer(container)\">\n <div card-header class=\"card-header rounded-t-lg p-3 bg-sky-200\">\n <div class=\"flex flex-row space-x-3 items-center w-full\">\n <div\n class=\"card-header-icon-left flex basis-10 py-1.5 shrink-0 grow-0 place-items-center rounded bg-sky-400\">\n <fa-icon class=\"mx-auto\" [icon]=\"faContainerStorage\"></fa-icon>\n </div>\n \n <div class=\"card-header-text-middle grow\">\n <div class=\"block font-medium text-large\">{{ container.formatted.containerNumber }}</div>\n </div>\n \n <div\n class=\"card-header-icons-right text-sm text-gray-900 leading-5 flex flex-wrap items-stretch text-center font-bold\">\n <div *ngIf=\"container.containerStatus\" class=\"min-w-[36px] px-2 py-1 bg-white text-black\"> {{\n container.formatted.containerStatus }}</div>\n </div>\n </div>\n </div>\n <div card-lines class=\"grid grid-cols-2 gap-2\">\n <spx-card-line [text]=\"textContainerType | translate | capitalize\"\n [value]=\"container.formatted.containerType\"></spx-card-line>\n <spx-card-line [text]=\"textCategory | translate | capitalize\"\n [value]=\"container.formatted.category\"></spx-card-line>\n <spx-card-line [text]=\"textLocation | translate | capitalize\"\n [value]=\"container.formatted.location\"></spx-card-line>\n </div>\n </spx-card>\n </ng-container>\n\n <spx-pagination\n *ngIf=\"containers.length > 0\"\n [spxPage]=\"currentPage\"\n [spxMaxPages]=\"(containers.length < (pageSize + 1)) ? (currentPage + 1) : currentPage\"\n [faArrowLeft]=\"faArrowLeft\"\n [faArrowRight]=\"faArrowRight\"\n [textPage]=\"textPage\"\n [textPrevious]=\"textPrevious\"\n [textNext]=\"textNext\"\n (spxPageChange)=\"onPageChange($event)\">\n </spx-pagination>\n</div>" }]
248
+ TranslateModule
249
+ ], template: "@if (!loaded) {\n <form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-3\" (ngSubmit)=\"onSubmit()\">\n <spx-form-view\n [spxFormGroup]=\"formGroup\"\n [spxForm]=\"form\"\n [spxSuggestions]=\"suggestions\"\n (spxBlur)=\"onBlur($event)\"\n (spxSearch)=\"onSearch($event)\">\n </spx-form-view>\n </form>\n}\n\n@if (loaded) {\n <div class=\"flex flex-col gap-3\">\n @if (containers.length > 0) {\n <spx-pagination\n [spxPage]=\"currentPage\"\n [spxMaxPages]=\"(containers.length < (pageSize + 1)) ? (currentPage + 1) : currentPage\"\n [faArrowLeft]=\"faArrowLeft\"\n [faArrowRight]=\"faArrowRight\"\n [textPage]=\"textPage\"\n [textPrevious]=\"textPrevious\"\n [textNext]=\"textNext\"\n (spxPageChange)=\"onPageChange($event)\">\n </spx-pagination>\n }\n @if (containers.length === 0) {\n <spx-alert [spxSeverity]=\"severityInfo\" [spxTitle]=\"textNoResults | translate | capitalize\">\n {{ textYouCanChangeYourFilters | translate | capitalize }}\n </spx-alert>\n }\n @for (container of containers; track container; let i = $index) {\n @if (i < pageSize) {\n <spx-card [hasContent]=\"false\" (clicked)=\"goToContainer(container)\">\n <div card-header class=\"card-header rounded-t-lg p-3 bg-sky-200\">\n <div class=\"flex flex-row space-x-3 items-center w-full\">\n <div\n class=\"card-header-icon-left flex basis-10 py-1.5 shrink-0 grow-0 place-items-center rounded bg-sky-400\">\n <fa-icon class=\"mx-auto\" [icon]=\"faContainerStorage\"></fa-icon>\n </div>\n <div class=\"card-header-text-middle grow\">\n <div class=\"block font-medium text-large\">{{ container.formatted.containerNumber }}</div>\n </div>\n <div\n class=\"card-header-icons-right text-sm text-gray-900 leading-5 flex flex-wrap items-stretch text-center font-bold\">\n @if (container.containerStatus) {\n <div class=\"min-w-[36px] px-2 py-1 bg-white text-black\"> {{\n container.formatted.containerStatus }}</div>\n }\n </div>\n </div>\n </div>\n <div card-lines class=\"grid grid-cols-2 gap-2\">\n <spx-card-line [text]=\"textContainerType | translate | capitalize\"\n [value]=\"container.formatted.containerType\"></spx-card-line>\n <spx-card-line [text]=\"textCategory | translate | capitalize\"\n [value]=\"container.formatted.category\"></spx-card-line>\n <spx-card-line [text]=\"textLocation | translate | capitalize\"\n [value]=\"container.formatted.location\"></spx-card-line>\n </div>\n </spx-card>\n }\n }\n @if (containers.length > 0) {\n <spx-pagination\n [spxPage]=\"currentPage\"\n [spxMaxPages]=\"(containers.length < (pageSize + 1)) ? (currentPage + 1) : currentPage\"\n [faArrowLeft]=\"faArrowLeft\"\n [faArrowRight]=\"faArrowRight\"\n [textPage]=\"textPage\"\n [textPrevious]=\"textPrevious\"\n [textNext]=\"textNext\"\n (spxPageChange)=\"onPageChange($event)\">\n </spx-pagination>\n }\n </div>\n}" }]
253
250
  }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { statusGroupsInPatch: [{
254
251
  type: Input
255
252
  }], containers: [{