spiderly 19.5.2 → 19.5.3

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 (56) hide show
  1. package/README.md +6 -1
  2. package/fesm2022/spiderly.mjs +2580 -2414
  3. package/fesm2022/spiderly.mjs.map +1 -1
  4. package/lib/components/auth/partials/auth.component.d.ts +3 -3
  5. package/lib/components/layout/topbar/topbar.component.d.ts +3 -3
  6. package/lib/components/spiderly-buttons/google-button/google-button.component.d.ts +1 -1
  7. package/lib/components/spiderly-buttons/spiderly-button/spiderly-button.component.d.ts +1 -1
  8. package/lib/components/spiderly-buttons/spiderly-button-base/spiderly-button-base.d.ts +2 -2
  9. package/lib/components/spiderly-buttons/spiderly-split-button/spiderly-split-button.component.d.ts +2 -2
  10. package/lib/components/spiderly-data-table/spiderly-data-table.component.d.ts +6 -6
  11. package/lib/components/spiderly-data-view/spiderly-data-view.component.d.ts +1 -1
  12. package/lib/components/spiderly-delete-dialog/spiderly-delete-confirmation.component.d.ts +1 -1
  13. package/lib/controls/spiderly-file/spiderly-file.component.d.ts +10 -2
  14. package/lib/entities/codebook.d.ts +1 -1
  15. package/lib/entities/filter-rule.d.ts +1 -1
  16. package/lib/entities/filter.d.ts +3 -3
  17. package/lib/entities/image-dimensions-validation-result.d.ts +4 -0
  18. package/lib/entities/init-company-auth-dialog-details.d.ts +1 -1
  19. package/lib/entities/init-top-bar-data.d.ts +2 -2
  20. package/lib/entities/is-authorized-for-save-event.d.ts +1 -1
  21. package/lib/entities/last-menu-icon-index-clicked.d.ts +1 -1
  22. package/lib/entities/lazy-load-selected-ids-result.d.ts +1 -1
  23. package/lib/entities/namebook.d.ts +1 -1
  24. package/lib/entities/primeng-option.d.ts +1 -1
  25. package/lib/entities/security-entities.d.ts +9 -9
  26. package/lib/entities/simple-save-result.d.ts +1 -1
  27. package/lib/interceptors/http-loading.interceptor.d.ts +1 -1
  28. package/lib/services/config.service.base.d.ts +1 -1
  29. package/lib/services/helper-functions.d.ts +8 -8
  30. package/lib/services/validator-abstract.service.d.ts +3 -1
  31. package/package.json +1 -1
  32. package/public-api.d.ts +26 -25
  33. package/styles/components/info-card/info-card.component.scss +7 -7
  34. package/styles/components/layout/profile-avatar/profile-avatar.component.scss +5 -5
  35. package/styles/components/layout/topbar/topbar.component.scss +8 -8
  36. package/styles/components/spiderly-data-table/spiderly-data-table.component.scss +39 -39
  37. package/styles/components/spiderly-data-view/spiderly-data-view.component.scss +45 -47
  38. package/styles/components/spiderly-panels/panel-body/panel-body.component.scss +6 -6
  39. package/styles/components/spiderly-panels/panel-footer/panel-footer.component.scss +15 -15
  40. package/styles/components/spiderly-panels/spiderly-panel/spiderly-panel.component.scss +59 -59
  41. package/styles/controls/base-controls.scss +12 -12
  42. package/styles/controls/spiderly-checkbox/spiderly-checkbox.component.scss +18 -18
  43. package/styles/styles/layout/_content.scss +8 -8
  44. package/styles/styles/layout/_footer.scss +8 -8
  45. package/styles/styles/layout/_main.scss +18 -18
  46. package/styles/styles/layout/_menu.scss +116 -109
  47. package/styles/styles/layout/_mixins.scss +8 -8
  48. package/styles/styles/layout/_preloading.scss +38 -37
  49. package/styles/styles/layout/_responsive.scss +78 -78
  50. package/styles/styles/layout/_spiderly-controls.scss +1 -1
  51. package/styles/styles/layout/_topbar.scss +211 -206
  52. package/styles/styles/layout/_typography.scss +35 -30
  53. package/styles/styles/layout/_utils.scss +15 -15
  54. package/styles/styles/layout/_variables.scss +796 -705
  55. package/styles/styles/layout/layout.scss +2 -2
  56. package/styles/styles/styles.scss +1 -1
package/styles/components/spiderly-data-table/spiderly-data-table.component.scss CHANGED
@@ -1,49 +1,49 @@
1
1
  .table-header {
2
- display: flex;
3
- justify-content: space-between;
4
- align-items: center;
2
+ display: flex;
3
+ justify-content: space-between;
4
+ align-items: center;
5
5
  }
6
6
 
7
7
  @media (max-width: 640px) {
8
- .table-header {
9
- display: flex;
10
- flex-direction: column;
11
- align-items: start;
12
- gap: 14px;
13
- }
8
+ .table-header {
9
+ display: flex;
10
+ flex-direction: column;
11
+ align-items: start;
12
+ gap: 14px;
13
+ }
14
14
  }
15
15
 
16
16
  .spiderly-table {
17
- .p-paginator {
18
- padding: 1rem;
19
- }
20
- .p-paginator-left-content {
21
- @media (min-width: 1400px) {
22
- position: absolute;
23
- padding: 14px;
24
- left: 0;
25
- }
26
- }
27
- .p-paginator-right-content {
28
- @media (min-width: 1400px) {
29
- position: absolute;
30
- padding: 14px;
31
- right: 0;
32
- }
33
- }
17
+ .p-paginator {
18
+ padding: 1rem;
19
+ }
20
+ .p-paginator-left-content {
21
+ @media (min-width: 1400px) {
22
+ position: absolute;
23
+ padding: 14px;
24
+ left: 0;
25
+ }
26
+ }
27
+ .p-paginator-right-content {
28
+ @media (min-width: 1400px) {
29
+ position: absolute;
30
+ padding: 14px;
31
+ right: 0;
32
+ }
33
+ }
34
34
  }
35
35
 
36
36
  :host {
37
- ::ng-deep {
38
- .p-datatable-thead{
39
- position: unset !important;
40
- }
41
- .p-datatable-header{
42
- border-radius: 6px 6px 0 0;
43
- }
44
- .p-datatable {
45
- border-radius: var(--p-content-border-radius);
46
- border: 1px solid var(--p-datatable-border-color);
47
- }
48
- }
49
- }
37
+ ::ng-deep {
38
+ .p-datatable-thead {
39
+ position: unset !important;
40
+ }
41
+ .p-datatable-header {
42
+ border-radius: 6px 6px 0 0;
43
+ }
44
+ .p-datatable {
45
+ border-radius: var(--p-content-border-radius);
46
+ border: 1px solid var(--p-datatable-border-color);
47
+ }
48
+ }
49
+ }
package/styles/components/spiderly-data-view/spiderly-data-view.component.scss CHANGED
@@ -1,56 +1,54 @@
1
-
2
- ::ng-deep{
3
- .p-datatable-tbody {
4
- display: flex;
5
- flex-direction: column;
6
- gap: 18px;
7
- }
8
-
9
- .p-datatable-header {
10
- margin-bottom: 36px;
11
- border: 0 !important;
12
- padding: 0 !important;
13
- background-color: transparent !important;
14
- }
15
-
16
- .p-paginator {
17
- padding: 18px 9px 0px 9px !important;
18
- }
19
-
20
- .p-fluid {
21
- width: 100% !important;
22
- }
23
-
24
- .p-inputtext {
25
- width: 100% !important;
26
- }
27
-
28
- .p-inputnumber {
29
- width: 100% !important;
30
- }
31
-
32
- .p-datepicker {
33
- width: 100% !important;
34
- }
1
+ ::ng-deep {
2
+ .p-datatable-tbody {
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: 18px;
6
+ }
7
+
8
+ .p-datatable-header {
9
+ margin-bottom: 36px;
10
+ border: 0 !important;
11
+ padding: 0 !important;
12
+ background-color: transparent !important;
13
+ }
14
+
15
+ .p-paginator {
16
+ padding: 18px 9px 0px 9px !important;
17
+ }
18
+
19
+ .p-fluid {
20
+ width: 100% !important;
21
+ }
22
+
23
+ .p-inputtext {
24
+ width: 100% !important;
25
+ }
26
+
27
+ .p-inputnumber {
28
+ width: 100% !important;
29
+ }
30
+
31
+ .p-datepicker {
32
+ width: 100% !important;
33
+ }
35
34
  }
36
35
 
37
-
38
36
  .data-view-grid {
39
- display: grid;
40
- gap: 18px;
41
- grid-template-columns: 1fr 1fr 1fr;
42
- margin-bottom: 18px;
37
+ display: grid;
38
+ gap: 18px;
39
+ grid-template-columns: 1fr 1fr 1fr;
40
+ margin-bottom: 18px;
43
41
  }
44
42
 
45
43
  @media (max-width: 1080px) {
46
- .data-view-grid {
47
- gap: 12px;
48
- grid-template-columns: 1fr 1fr;
49
- }
44
+ .data-view-grid {
45
+ gap: 12px;
46
+ grid-template-columns: 1fr 1fr;
47
+ }
50
48
  }
51
49
 
52
50
  @media (max-width: 500px) {
53
- .data-view-grid {
54
- grid-template-columns: 1fr;
55
- }
56
- }
51
+ .data-view-grid {
52
+ grid-template-columns: 1fr;
53
+ }
54
+ }
package/styles/components/spiderly-panels/panel-body/panel-body.component.scss CHANGED
@@ -1,9 +1,9 @@
1
- .non-grid-panel-bottom-padding{
2
- padding-bottom: 14px;
1
+ .non-grid-panel-bottom-padding {
2
+ padding-bottom: 14px;
3
3
  }
4
4
 
5
5
  @media (max-width: 600px) {
6
- .non-grid-panel-bottom-padding{
7
- padding-bottom: 0px;
8
- }
9
- }
6
+ .non-grid-panel-bottom-padding {
7
+ padding-bottom: 0px;
8
+ }
9
+ }
package/styles/components/spiderly-panels/panel-footer/panel-footer.component.scss CHANGED
@@ -1,17 +1,17 @@
1
- .spiderly-panel-footer{
2
- display: flex;
3
- align-items: center;
4
- justify-content: space-between;
5
- gap: 10px;
6
- border-top: 1px solid var(--p-content-border-color);
7
- border-bottom-right-radius: var(--p-content-border-radius);
8
- border-bottom-left-radius: var(--p-content-border-radius);
9
- padding: 18px;
1
+ .spiderly-panel-footer {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: space-between;
5
+ gap: 10px;
6
+ border-top: 1px solid var(--p-content-border-color);
7
+ border-bottom-right-radius: var(--p-content-border-radius);
8
+ border-bottom-left-radius: var(--p-content-border-radius);
9
+ padding: 18px;
10
10
  }
11
11
 
12
- .buttons-wrapper{
13
- gap: 0.5rem;
14
- display: flex;
15
- align-items: center;
16
- flex-wrap: wrap;
17
- }
12
+ .buttons-wrapper {
13
+ gap: 0.5rem;
14
+ display: flex;
15
+ align-items: center;
16
+ flex-wrap: wrap;
17
+ }
package/styles/components/spiderly-panels/spiderly-panel/spiderly-panel.component.scss CHANGED
@@ -1,88 +1,88 @@
1
1
  :host {
2
2
  ::ng-deep {
3
- .spiderly-panel{
4
- .p-panel-content{
3
+ .spiderly-panel {
4
+ .p-panel-content {
5
5
  padding: 0;
6
6
  }
7
7
  }
8
- .p-panel{
8
+ .p-panel {
9
9
  overflow: hidden;
10
10
  }
11
- .p-panel-icons{
11
+ .p-panel-icons {
12
12
  display: flex;
13
13
  align-items: center;
14
14
  }
15
-
16
- .panel-header-cursor-pointer {
17
- .p-panel-header {
18
- cursor: pointer !important;
19
- }
20
- }
15
+
16
+ .panel-header-cursor-pointer {
17
+ .p-panel-header {
18
+ cursor: pointer !important;
19
+ }
20
+ }
21
21
  }
22
22
  }
23
23
 
24
- .multiple-panel-first-without-header{
25
- .p-panel {
26
- border-bottom-left-radius: 0px;
27
- border-bottom-right-radius: 0px;
28
- border-top: 1px solid var(--surface-border);
29
- border-top-left-radius: var(--p-content-border-radius);
30
- border-top-right-radius: var(--p-content-border-radius);
31
- border-bottom: none;
32
- }
24
+ .multiple-panel-first-without-header {
25
+ .p-panel {
26
+ border-bottom-left-radius: 0px;
27
+ border-bottom-right-radius: 0px;
28
+ border-top: 1px solid var(--surface-border);
29
+ border-top-left-radius: var(--p-content-border-radius);
30
+ border-top-right-radius: var(--p-content-border-radius);
31
+ border-bottom: none;
32
+ }
33
33
  }
34
34
 
35
- .multiple-panel-middle-without-header{
36
- .p-panel {
37
- border-bottom-left-radius: 0px;
38
- border-bottom-right-radius: 0px;
39
- border-top: 1px solid var(--surface-border);
40
- border-top-left-radius: 0px;
41
- border-top-right-radius: 0px;
42
- border-bottom: none;
43
- }
35
+ .multiple-panel-middle-without-header {
36
+ .p-panel {
37
+ border-bottom-left-radius: 0px;
38
+ border-bottom-right-radius: 0px;
39
+ border-top: 1px solid var(--surface-border);
40
+ border-top-left-radius: 0px;
41
+ border-top-right-radius: 0px;
42
+ border-bottom: none;
43
+ }
44
44
  }
45
45
 
46
- .multiple-panel-last-without-header{
47
- .p-panel {
48
- border-bottom-left-radius: var(--p-content-border-radius);
49
- border-bottom-right-radius: var(--p-content-border-radius);
50
- border-top: 1px solid var(--surface-border);
51
- border-top-left-radius: 0px;
52
- border-top-right-radius: 0px;
53
- }
46
+ .multiple-panel-last-without-header {
47
+ .p-panel {
48
+ border-bottom-left-radius: var(--p-content-border-radius);
49
+ border-bottom-right-radius: var(--p-content-border-radius);
50
+ border-top: 1px solid var(--surface-border);
51
+ border-top-left-radius: 0px;
52
+ border-top-right-radius: 0px;
53
+ }
54
54
  }
55
55
 
56
- .multiple-panel-first{
57
- .p-panel {
58
- border-bottom-left-radius: 0px;
59
- border-bottom-right-radius: 0px;
60
- border-bottom: none;
61
- }
56
+ .multiple-panel-first {
57
+ .p-panel {
58
+ border-bottom-left-radius: 0px;
59
+ border-bottom-right-radius: 0px;
60
+ border-bottom: none;
61
+ }
62
62
  }
63
63
 
64
- .panel-border{
65
- .p-panel {
66
- border-bottom-left-radius: var(--p-content-border-radius);
67
- border-bottom-right-radius: var(--p-content-border-radius);
68
- border-bottom: 1px solid var(--surface-border);
69
- }
64
+ .panel-border {
65
+ .p-panel {
66
+ border-bottom-left-radius: var(--p-content-border-radius);
67
+ border-bottom-right-radius: var(--p-content-border-radius);
68
+ border-bottom: 1px solid var(--surface-border);
69
+ }
70
70
  }
71
71
 
72
72
  .multiple-panel-middle {
73
- .p-panel {
74
- border-radius: 0px;
75
- border-bottom: none;
76
- }
73
+ .p-panel {
74
+ border-radius: 0px;
75
+ border-bottom: none;
76
+ }
77
77
  }
78
78
 
79
79
  .multiple-panel-last {
80
- .p-panel {
81
- border-top-left-radius: 0px;
82
- border-top-right-radius: 0px;
83
- }
80
+ .p-panel {
81
+ border-top-left-radius: 0px;
82
+ border-top-right-radius: 0px;
83
+ }
84
84
  }
85
85
 
86
- .panel-body-wrapper{
87
- padding: 18px;
88
- }
86
+ .panel-body-wrapper {
87
+ padding: 18px;
88
+ }
package/styles/controls/base-controls.scss CHANGED
@@ -1,17 +1,17 @@
1
1
  .spiderly-inputgroup {
2
- display: flex;
3
- gap: 8px;
2
+ display: flex;
3
+ gap: 8px;
4
4
  }
5
5
 
6
6
  .spiderly-inputgroup-addon {
7
- width: 38px;
8
- cursor: pointer;
9
- background-color: var(--p-primary-color);
10
- border-color: var(--p-primary-color);
11
- border-radius: var(--p-content-border-radius);
12
- display: flex;
7
+ width: 38px;
8
+ cursor: pointer;
9
+ background-color: var(--p-primary-color);
10
+ border-color: var(--p-primary-color);
11
+ border-radius: var(--p-content-border-radius);
12
+ display: flex;
13
13
 
14
- i {
15
- margin: auto;
16
- }
17
- }
14
+ i {
15
+ margin: auto;
16
+ }
17
+ }
package/styles/controls/spiderly-checkbox/spiderly-checkbox.component.scss CHANGED
@@ -1,23 +1,23 @@
1
1
  ::ng-deep {
2
- .p-checkbox-false {
3
- .p-checkbox-box {
4
- border-color: var(--p-checkbox-checked-border-color);
5
- background: var(--p-checkbox-checked-background);
6
- }
7
- .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
8
- border-color: var(--p-checkbox-checked-hover-border-color);
9
- background: var(--p-checkbox-checked-hover-background);
10
- }
11
- .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon {
12
- color: var(--p-checkbox-icon-disabled-color);
13
- }
2
+ .p-checkbox-false {
3
+ .p-checkbox-box {
4
+ border-color: var(--p-checkbox-checked-border-color);
5
+ background: var(--p-checkbox-checked-background);
14
6
  }
7
+ .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
8
+ border-color: var(--p-checkbox-checked-hover-border-color);
9
+ background: var(--p-checkbox-checked-hover-background);
10
+ }
11
+ .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon {
12
+ color: var(--p-checkbox-icon-disabled-color);
13
+ }
14
+ }
15
15
  }
16
16
 
17
17
  .p-checkbox-false-icon {
18
- position: absolute;
19
- top: 3px;
20
- left: 2.7px;
21
- font-size: 12.25px;
22
- color: var(--p-checkbox-icon-checked-color);
23
- }
18
+ position: absolute;
19
+ top: 3px;
20
+ left: 2.7px;
21
+ font-size: 12.25px;
22
+ color: var(--p-checkbox-icon-checked-color);
23
+ }
package/styles/styles/layout/_content.scss CHANGED
@@ -1,14 +1,14 @@
1
- @use './_variables' as *;
1
+ @use "./_variables" as *;
2
2
 
3
3
  .layout-main-container {
4
- display: flex;
5
- flex-direction: column;
6
- min-height: 100vh;
7
- justify-content: space-between;
8
- padding: 7rem 2rem 2rem 4rem;
9
- transition: margin-left $transitionDuration;
4
+ display: flex;
5
+ flex-direction: column;
6
+ min-height: 100vh;
7
+ justify-content: space-between;
8
+ padding: 7rem 2rem 2rem 4rem;
9
+ transition: margin-left $transitionDuration;
10
10
  }
11
11
 
12
12
  .layout-main {
13
- flex: 1 1 auto;
13
+ flex: 1 1 auto;
14
14
  }
package/styles/styles/layout/_footer.scss CHANGED
@@ -1,11 +1,11 @@
1
- @use './_variables' as *;
1
+ @use "./_variables" as *;
2
2
 
3
3
  .layout-footer {
4
- transition: margin-left $transitionDuration;
5
- display: flex;
6
- align-items: center;
7
- justify-content: center;
8
- padding-top: 1.5rem;
9
- border-top: 1px solid var(--surface-border);
10
- margin-top: 2rem;
4
+ transition: margin-left $transitionDuration;
5
+ display: flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ padding-top: 1.5rem;
9
+ border-top: 1px solid var(--surface-border);
10
+ margin-top: 2rem;
11
11
  }
package/styles/styles/layout/_main.scss CHANGED
@@ -1,35 +1,35 @@
1
- @use './_variables' as *;
1
+ @use "./_variables" as *;
2
2
 
3
3
  * {
4
- box-sizing: border-box;
4
+ box-sizing: border-box;
5
5
  }
6
6
 
7
7
  html {
8
- height: 100%;
9
- font-size: $scale;
10
- scroll-behavior: smooth;
8
+ height: 100%;
9
+ font-size: $scale;
10
+ scroll-behavior: smooth;
11
11
  }
12
12
 
13
13
  body {
14
- font-family: var(--font-family);
15
- color: var(--p-text-color);
16
- background-color: var(--p-surface-50);
17
- margin: 0;
18
- padding: 0;
19
- min-height: 100%;
20
- -webkit-font-smoothing: antialiased;
21
- -moz-osx-font-smoothing: grayscale;
14
+ font-family: var(--font-family);
15
+ color: var(--p-text-color);
16
+ background-color: var(--p-surface-50);
17
+ margin: 0;
18
+ padding: 0;
19
+ min-height: 100%;
20
+ -webkit-font-smoothing: antialiased;
21
+ -moz-osx-font-smoothing: grayscale;
22
22
  }
23
23
 
24
24
  .dark body {
25
- background-color: var(--p-surface-950);
25
+ background-color: var(--p-surface-950);
26
26
  }
27
27
 
28
28
  a {
29
- text-decoration: none;
30
- color: var(--p-primary-color);
29
+ text-decoration: none;
30
+ color: var(--p-primary-color);
31
31
  }
32
32
 
33
33
  .layout-wrapper {
34
- min-height: 100vh;
35
- }
34
+ min-height: 100vh;
35
+ }