@koobiq/components 17.2.0 → 17.4.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 (113) hide show
  1. package/alert/_alert-theme.scss +3 -3
  2. package/alert/alert.component.scss +6 -6
  3. package/autocomplete/_autocomplete-theme.scss +2 -2
  4. package/badge/_badge-theme.scss +6 -5
  5. package/button/_button-theme.scss +4 -4
  6. package/button-toggle/_button-toggle-theme.scss +4 -1
  7. package/checkbox/_checkbox-theme.scss +35 -17
  8. package/code-block/_code-block-theme.scss +218 -214
  9. package/core/forms/_forms.scss +2 -2
  10. package/core/option/_option-action-theme.scss +1 -1
  11. package/core/option/_option-theme.scss +7 -4
  12. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +5 -5
  13. package/core/styles/_koobiq-theme.scss +2 -2
  14. package/core/styles/theming/_components-theming.scss +17 -19
  15. package/core/styles/theming/_scrollbar-theme.scss +6 -5
  16. package/core/styles/theming/_theming.scss +1 -0
  17. package/core/styles/typography/_typography.scss +70 -68
  18. package/datepicker/_datepicker-theme.scss +14 -11
  19. package/datepicker/calendar-header.component.d.ts +1 -0
  20. package/datepicker/datepicker-content.scss +8 -3
  21. package/datepicker/datepicker-toggle.scss +1 -0
  22. package/dl/_dl-theme.scss +2 -2
  23. package/dropdown/_dropdown-theme.scss +4 -4
  24. package/empty-state/_empty-state-theme.scss +2 -2
  25. package/esm2022/core/common-behaviors/common-module.mjs +2 -2
  26. package/esm2022/core/version.mjs +2 -2
  27. package/esm2022/datepicker/calendar-header.component.mjs +7 -3
  28. package/esm2022/datepicker/datepicker.component.mjs +3 -3
  29. package/esm2022/form-field/form-field.mjs +2 -2
  30. package/esm2022/form-field/stepper.mjs +2 -2
  31. package/esm2022/icon/icon-button.component.mjs +2 -2
  32. package/esm2022/list/list-selection.component.mjs +2 -2
  33. package/esm2022/list/list.component.mjs +2 -2
  34. package/esm2022/markdown/markdown.component.mjs +2 -2
  35. package/esm2022/modal/modal-ref.class.mjs +1 -1
  36. package/esm2022/modal/modal.service.mjs +4 -6
  37. package/esm2022/modal/modal.type.mjs +1 -1
  38. package/esm2022/popover/popover-confirm.component.mjs +3 -3
  39. package/esm2022/popover/popover.component.mjs +72 -15
  40. package/esm2022/popover/popover.module.mjs +6 -4
  41. package/esm2022/select/select.component.mjs +2 -2
  42. package/esm2022/tabs/tab-body.component.mjs +3 -3
  43. package/esm2022/tabs/tab.component.mjs +3 -4
  44. package/esm2022/toast/toast.component.mjs +3 -3
  45. package/fesm2022/koobiq-components-core.mjs +2 -2
  46. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  47. package/fesm2022/koobiq-components-datepicker.mjs +8 -4
  48. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  49. package/fesm2022/koobiq-components-form-field.mjs +4 -4
  50. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  51. package/fesm2022/koobiq-components-icon.mjs +2 -2
  52. package/fesm2022/koobiq-components-list.mjs +4 -4
  53. package/fesm2022/koobiq-components-list.mjs.map +1 -1
  54. package/fesm2022/koobiq-components-markdown.mjs +2 -2
  55. package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
  56. package/fesm2022/koobiq-components-modal.mjs +3 -5
  57. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  58. package/fesm2022/koobiq-components-popover.mjs +82 -25
  59. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  60. package/fesm2022/koobiq-components-select.mjs +1 -1
  61. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  62. package/fesm2022/koobiq-components-tabs.mjs +4 -5
  63. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  64. package/fesm2022/koobiq-components-toast.mjs +2 -2
  65. package/fesm2022/koobiq-components-toast.mjs.map +1 -1
  66. package/file-upload/_file-upload-theme.scss +31 -27
  67. package/form-field/_form-field-theme.scss +6 -6
  68. package/form-field/form-field.scss +2 -2
  69. package/form-field/stepper.scss +5 -1
  70. package/icon/_icon-button-theme.scss +45 -26
  71. package/icon/_icon-item-theme.scss +1 -1
  72. package/icon/icon-button.scss +4 -4
  73. package/input/_input-theme.scss +1 -1
  74. package/link/_link-theme.scss +12 -6
  75. package/list/_list-theme.scss +8 -5
  76. package/list/list.scss +1 -0
  77. package/loader-overlay/_loader-overlay-theme.scss +10 -6
  78. package/markdown/_markdown-theme.scss +1 -1
  79. package/markdown/markdown.scss +5 -6
  80. package/modal/_modal-theme.scss +6 -5
  81. package/modal/modal-ref.class.d.ts +2 -2
  82. package/modal/modal.service.d.ts +9 -9
  83. package/modal/modal.type.d.ts +6 -6
  84. package/navbar/_navbar-theme.scss +9 -9
  85. package/package.json +18 -14
  86. package/popover/_popover-theme.scss +9 -4
  87. package/popover/popover.component.d.ts +22 -8
  88. package/popover/popover.module.d.ts +3 -1
  89. package/popover/popover.scss +32 -0
  90. package/prebuilt-themes/dark-theme.css +1 -1
  91. package/prebuilt-themes/light-theme.css +1 -1
  92. package/progress-bar/_progress-bar-theme.scss +2 -2
  93. package/progress-spinner/_progress-spinner-theme.scss +3 -3
  94. package/radio/_radio-theme.scss +15 -19
  95. package/schematics/ng-add/index.js +4 -4
  96. package/scrollbar/_scrollbar-component-theme.scss +27 -12
  97. package/select/_select-theme.scss +2 -2
  98. package/sidepanel/_sidepanel-theme.scss +4 -4
  99. package/splitter/_splitter-theme.scss +1 -2
  100. package/splitter/splitter.scss +3 -3
  101. package/table/_table-theme.scss +2 -2
  102. package/tabs/_tabs-theme.scss +4 -3
  103. package/tags/_tag-theme.scss +7 -5
  104. package/timepicker/timepicker.scss +1 -0
  105. package/timezone/_timezone-option-theme.scss +3 -3
  106. package/toast/_toast-theme.scss +1 -1
  107. package/toast/toast.component.scss +1 -1
  108. package/toggle/_toggle-theme.scss +1 -1
  109. package/tooltip/_tooltip-theme.scss +1 -0
  110. package/tree/_tree-theme.scss +5 -5
  111. package/tree/toggle.scss +1 -1
  112. package/tree-select/_tree-select-theme.scss +2 -2
  113. package/toggle/README.md +0 -0
package/alert/_alert-theme.scss CHANGED
@@ -7,14 +7,14 @@
7
7
  @mixin kbq-alert-style($component, $type, $style-name) {
8
8
  $style: map.get($component, $type, $style-name);
9
9
 
10
- background: kbq-css-variable(alert-#{$type}-#{$style-name}-background, map.get($style, background));
10
+ background: kbq-css-variable(alert-#{$type}-#{$style-name}-container-background, map.get($style, background));
11
11
 
12
12
  .kbq-alert__title {
13
- color: kbq-css-variable(alert-#{$type}-#{$style-name}-title, map.get($style, title));
13
+ color: kbq-css-variable(alert-#{$type}-#{$style-name}-container-title, map.get($style, title));
14
14
  }
15
15
 
16
16
  .kbq-alert__text {
17
- color: kbq-css-variable(alert-#{$type}-#{$style-name}-text, map.get($style, text));
17
+ color: kbq-css-variable(alert-#{$type}-#{$style-name}-container-text, map.get($style, text));
18
18
  }
19
19
  }
20
20
 
package/alert/alert.component.scss CHANGED
@@ -58,10 +58,10 @@
58
58
  & .kbq-alert__button-stack {
59
59
  padding-top: kbq-css-variable(alert-size-normal-button-stack-padding-top);
60
60
  padding-bottom: kbq-css-variable(alert-size-normal-button-stack-padding-bottom);
61
+ }
61
62
 
62
- &_has-button {
63
- padding-top: 12px;
64
- }
63
+ & .kbq-alert__button-stack_has-button {
64
+ padding-top: 12px;
65
65
  }
66
66
 
67
67
  & .kbq-alert__close-button {
@@ -108,10 +108,10 @@
108
108
  & .kbq-alert__button-stack {
109
109
  padding-top: kbq-css-variable(alert-size-compact-button-stack-padding-top);
110
110
  padding-bottom: kbq-css-variable(alert-size-compact-button-stack-padding-bottom);
111
+ }
111
112
 
112
- &_has-button {
113
- padding-top: 12px;
114
- }
113
+ & .kbq-alert__button-stack_has-button {
114
+ padding-top: 12px;
115
115
  }
116
116
 
117
117
  & .kbq-alert__close-button {
package/autocomplete/_autocomplete-theme.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  $select-panel: map.get(map.get($theme, components), select-panel);
9
9
 
10
10
  .kbq-autocomplete-panel {
11
- box-shadow: kbq-css-variable(select-panel-shadow, map.get($select-panel, shadow));
12
- background: kbq-css-variable(select-panel-background, map.get($select-panel, background));
11
+ box-shadow: kbq-css-variable(select-panel-dropdown-shadow, map.get($select-panel, shadow));
12
+ background: kbq-css-variable(select-panel-dropdown-background, map.get($select-panel, background));
13
13
  }
14
14
  }
package/badge/_badge-theme.scss CHANGED
@@ -6,22 +6,23 @@
6
6
 
7
7
  @mixin kbq-badge-style($component, $type, $sub-type, $style-name) {
8
8
  $style: map.get($component, $type, $sub-type, $style-name);
9
+ $base-path: badge-#{$type}-#{$sub-type}-#{$style-name};
9
10
 
10
- color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-color, map.get($style, color));
11
- background: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-background, map.get($style, background));
11
+ color: kbq-css-variable(#{$base-path}-color, map.get($style, color));
12
+ background: kbq-css-variable(#{$base-path}-background, map.get($style, background));
12
13
 
13
14
  & .kbq-badge-caption {
14
- color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-caption, map.get($style, caption));
15
+ color: kbq-css-variable(#{$base-path}-caption, map.get($style, caption));
15
16
  }
16
17
 
17
18
  & .kbq-icon {
18
- color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-icon, map.get($style, icon)) !important;
19
+ color: kbq-css-variable(#{$base-path}-icon, map.get($style, icon)) !important;
19
20
  }
20
21
 
21
22
  @if $type == filled {
22
23
  border: transparent;
23
24
  } @else {
24
- border-color: kbq-css-variable(badge-#{$type}-#{$sub-type}-#{$style-name}-border, map.get($style, border));
25
+ border-color: kbq-css-variable(#{$base-path}-border, map.get($style, border));
25
26
  }
26
27
  }
27
28
 
package/button/_button-theme.scss CHANGED
@@ -88,11 +88,11 @@
88
88
 
89
89
  &.kbq-button_transparent {
90
90
  &.kbq-theme {
91
- @include kbq-button-type($button, transparent, theme);
91
+ @include kbq-button-type($button, transparent, theme-fade-on);
92
92
  }
93
93
 
94
94
  &.kbq-contrast {
95
- @include kbq-button-type($button, transparent, contrast);
95
+ @include kbq-button-type($button, transparent, contrast-fade-on);
96
96
  }
97
97
  }
98
98
 
@@ -100,7 +100,7 @@
100
100
  &.kbq-button_outline,
101
101
  &.kbq-button_transparent {
102
102
  &.cdk-keyboard-focused {
103
- $focused-color: map.get($theme, states, focused-color);
103
+ $focused-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
104
104
  outline: 1px solid $focused-color;
105
105
  border-color: $focused-color;
106
106
  }
@@ -116,7 +116,7 @@
116
116
 
117
117
  .kbq-button-icon.kbq-button-wrapper {
118
118
  .kbq-icon {
119
- line-height: kbq-line-height($config, body);
119
+ @include kbq-css-font-variable(typography, body, line-height, '');
120
120
  }
121
121
  }
122
122
  }
package/button-toggle/_button-toggle-theme.scss CHANGED
@@ -62,7 +62,10 @@
62
62
  }
63
63
 
64
64
  &.cdk-keyboard-focused {
65
- border-color: map.get($button, focused);
65
+ border-color: kbq-css-variable(
66
+ button-toggle-item-states-focused-outline,
67
+ map.get($button, focused)
68
+ );
66
69
  }
67
70
  }
68
71
  }
package/checkbox/_checkbox-theme.scss CHANGED
@@ -30,18 +30,21 @@
30
30
  &:hover,
31
31
  &.kbq-hover {
32
32
  .kbq-checkbox__frame {
33
- border-color: kbq-css-variable(#{$base}-hover-border, map.get($style, hover, border));
33
+ border-color: kbq-css-variable(#{$base}-states-hover-border, map.get($style, hover, border));
34
34
 
35
- background-color: kbq-css-variable(#{$base}-hover-background, map.get($style, hover, background));
35
+ background-color: kbq-css-variable(#{$base}-states-hover-background, map.get($style, hover, background));
36
36
  }
37
37
  }
38
38
 
39
39
  &.kbq-checked,
40
40
  &.kbq-indeterminate {
41
41
  .kbq-checkbox__frame {
42
- border-color: kbq-css-variable(#{$base}-checked-border, map.get($style, checked, border));
42
+ border-color: kbq-css-variable(#{$base}-states-checked-border, map.get($style, checked, border));
43
43
 
44
- background-color: kbq-css-variable(#{$base}-checked-background, map.get($style, checked, background));
44
+ background-color: kbq-css-variable(
45
+ #{$base}-states-checked-background,
46
+ map.get($style, checked, background)
47
+ );
45
48
  }
46
49
  }
47
50
 
@@ -50,10 +53,13 @@
50
53
  &:hover,
51
54
  &.kbq-hover {
52
55
  .kbq-checkbox__frame {
53
- border-color: kbq-css-variable(#{$base}-hover-border, map.get($style, checked-hover, border));
56
+ border-color: kbq-css-variable(
57
+ #{$base}-states-checked-hover-border,
58
+ map.get($style, checked-hover, border)
59
+ );
54
60
 
55
61
  background-color: kbq-css-variable(
56
- #{$base}-hover-background,
62
+ #{$base}-states-checked-hover-background,
57
63
  map.get($style, checked-hover, background)
58
64
  );
59
65
  }
@@ -61,41 +67,53 @@
61
67
 
62
68
  & .kbq-checkbox-input.cdk-keyboard-focused {
63
69
  + .kbq-checkbox__frame {
64
- border-color: kbq-css-variable(#{$base}-focused-border, map.get($style, checked-focused, border));
70
+ border-color: kbq-css-variable(
71
+ #{$base}-states-checked-focused-border,
72
+ map.get($style, checked-focused, border)
73
+ );
65
74
  background-color: kbq-css-variable(
66
- #{$base}-focused-background,
75
+ #{$base}-states-checked-focused-background,
67
76
  map.get($style, checked-focused, background)
68
77
  );
69
- outline: kbq-css-variable(#{$base}-focused-outline, map.get($style, checked-focused, outline));
78
+ outline: kbq-css-variable(
79
+ #{$base}-states-checked-focused-outline,
80
+ map.get($style, checked-focused, outline)
81
+ );
70
82
  }
71
83
  }
72
84
  }
73
85
 
74
86
  & .kbq-checkbox-input.cdk-keyboard-focused {
75
87
  + .kbq-checkbox__frame {
76
- border-color: kbq-css-variable(#{$base}-focused-border, map.get($style, focused, border));
77
- background-color: kbq-css-variable(#{$base}-focused-background, map.get($style, focused, background));
78
- outline: kbq-css-variable(#{$base}-focused-outline, map.get($style, focused, outline));
88
+ border-color: kbq-css-variable(#{$base}-states-focused-border, map.get($style, focused, border));
89
+ background-color: kbq-css-variable(
90
+ #{$base}-states-focused-background,
91
+ map.get($style, focused, background)
92
+ );
93
+ outline: kbq-css-variable(#{$base}-states-focused-outline, map.get($style, focused, outline));
79
94
  }
80
95
  }
81
96
 
82
97
  &.kbq-disabled {
83
98
  .kbq-checkbox__frame {
84
- border-color: kbq-css-variable(#{$base}-disabled-border, map.get($style, disabled, border));
85
- background-color: kbq-css-variable(#{$base}-disabled-background, map.get($style, disabled, background));
99
+ border-color: kbq-css-variable(#{$base}-states-disabled-border, map.get($style, disabled, border));
100
+ background-color: kbq-css-variable(
101
+ #{$base}-states-disabled-background,
102
+ map.get($style, disabled, background)
103
+ );
86
104
 
87
105
  & .kbq-checkbox-checkmark,
88
106
  & .kbq-checkbox-mixedmark {
89
- color: kbq-css-variable(#{$base}-disabled-color, map.get($style, disabled, color));
107
+ color: kbq-css-variable(#{$base}-states-disabled-color, map.get($style, disabled, color));
90
108
  }
91
109
  }
92
110
 
93
111
  & .kbq-hint .kbq-hint__text {
94
- color: kbq-css-variable(#{$base}-disabled-caption, map.get($style, disabled, caption));
112
+ color: kbq-css-variable(#{$base}-states-disabled-caption, map.get($style, disabled, caption));
95
113
  }
96
114
 
97
115
  .kbq-checkbox-label {
98
- color: kbq-css-variable(#{$base}-disabled-text, map.get($style, disabled, text));
116
+ color: kbq-css-variable(#{$base}-states-disabled-text, map.get($style, disabled, text));
99
117
  }
100
118
  }
101
119
  }