igniteui-webcomponents 4.1.0 → 4.2.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 (139) hide show
  1. package/CHANGELOG.md +25 -2
  2. package/animations/easings.d.ts +31 -0
  3. package/animations/easings.js +35 -0
  4. package/animations/easings.js.map +1 -0
  5. package/animations/index.d.ts +3 -0
  6. package/animations/index.js +4 -0
  7. package/animations/index.js.map +1 -0
  8. package/animations/player.d.ts +9 -0
  9. package/animations/player.js +47 -0
  10. package/animations/player.js.map +1 -0
  11. package/animations/presets/grow/index.d.ts +3 -0
  12. package/animations/presets/grow/index.js +18 -0
  13. package/animations/presets/grow/index.js.map +1 -0
  14. package/animations/presets/index.d.ts +1 -0
  15. package/animations/presets/index.js +2 -0
  16. package/animations/presets/index.js.map +1 -0
  17. package/animations/types.d.ts +5 -0
  18. package/animations/types.js +7 -0
  19. package/animations/types.js.map +1 -0
  20. package/components/accordion/accordion.js +4 -4
  21. package/components/accordion/accordion.js.map +1 -1
  22. package/components/accordion/themes/accordion.base.css.js +10 -0
  23. package/components/accordion/themes/accordion.base.css.js.map +1 -1
  24. package/components/badge/themes/light/badge.base.css.js +15 -11
  25. package/components/badge/themes/light/badge.base.css.js.map +1 -1
  26. package/components/badge/themes/light/badge.bootstrap.css.js +4 -5
  27. package/components/badge/themes/light/badge.bootstrap.css.js.map +1 -1
  28. package/components/card/themes/light/card.content.bootstrap.css.js +2 -4
  29. package/components/card/themes/light/card.content.bootstrap.css.js.map +1 -1
  30. package/components/card/themes/light/card.content.indigo.css.js +1 -6
  31. package/components/card/themes/light/card.content.indigo.css.js.map +1 -1
  32. package/components/card/themes/light/card.content.material.css.js +1 -2
  33. package/components/card/themes/light/card.content.material.css.js.map +1 -1
  34. package/components/card/themes/light/card.header.bootstrap.css.js +2 -5
  35. package/components/card/themes/light/card.header.bootstrap.css.js.map +1 -1
  36. package/components/card/themes/light/card.header.fluent.css.js +2 -3
  37. package/components/card/themes/light/card.header.fluent.css.js.map +1 -1
  38. package/components/card/themes/light/card.header.indigo.css.js +2 -5
  39. package/components/card/themes/light/card.header.indigo.css.js.map +1 -1
  40. package/components/card/themes/light/card.header.material.css.js +2 -3
  41. package/components/card/themes/light/card.header.material.css.js.map +1 -1
  42. package/components/checkbox/checkbox-base.js +1 -0
  43. package/components/checkbox/checkbox-base.js.map +1 -1
  44. package/components/combo/combo-item.d.ts +2 -0
  45. package/components/combo/combo-item.js +16 -9
  46. package/components/combo/combo-item.js.map +1 -1
  47. package/components/combo/combo-list.d.ts +1 -1
  48. package/components/combo/combo-list.js +2 -1
  49. package/components/combo/combo-list.js.map +1 -1
  50. package/components/combo/combo.d.ts +56 -8
  51. package/components/combo/combo.js +102 -17
  52. package/components/combo/combo.js.map +1 -1
  53. package/components/combo/controllers/navigation.d.ts +8 -4
  54. package/components/combo/controllers/navigation.js +50 -10
  55. package/components/combo/controllers/navigation.js.map +1 -1
  56. package/components/combo/controllers/selection.d.ts +4 -3
  57. package/components/combo/controllers/selection.js +21 -10
  58. package/components/combo/controllers/selection.js.map +1 -1
  59. package/components/combo/themes/light/combo.base.css.js +23 -16
  60. package/components/combo/themes/light/combo.base.css.js.map +1 -1
  61. package/components/combo/themes/light/combo.bootstrap.css.js +32 -0
  62. package/components/combo/themes/light/combo.bootstrap.css.js.map +1 -1
  63. package/components/combo/themes/light/combo.fluent.css.js +35 -2
  64. package/components/combo/themes/light/combo.fluent.css.js.map +1 -1
  65. package/components/combo/themes/light/combo.indigo.css.js +22 -12
  66. package/components/combo/themes/light/combo.indigo.css.js.map +1 -1
  67. package/components/combo/themes/light/combo.material.css.js +47 -3
  68. package/components/combo/themes/light/combo.material.css.js.map +1 -1
  69. package/components/combo/types.d.ts +1 -0
  70. package/components/combo/types.js.map +1 -1
  71. package/components/dialog/themes/light/dialog.base.css.js +2 -2
  72. package/components/dialog/themes/light/dialog.base.css.js.map +1 -1
  73. package/components/expansion-panel/expansion-panel.d.ts +4 -0
  74. package/components/expansion-panel/expansion-panel.js +32 -6
  75. package/components/expansion-panel/expansion-panel.js.map +1 -1
  76. package/components/expansion-panel/themes/light/expansion-panel.base.css.js +49 -2
  77. package/components/expansion-panel/themes/light/expansion-panel.base.css.js.map +1 -1
  78. package/components/input/input-base.js +1 -1
  79. package/components/input/input-base.js.map +1 -1
  80. package/components/input/themes/light/input.bootstrap.css.js +20 -3
  81. package/components/input/themes/light/input.bootstrap.css.js.map +1 -1
  82. package/components/input/themes/light/input.fluent.css.js +19 -5
  83. package/components/input/themes/light/input.fluent.css.js.map +1 -1
  84. package/components/input/themes/light/input.indigo.css.js +31 -7
  85. package/components/input/themes/light/input.indigo.css.js.map +1 -1
  86. package/components/input/themes/light/input.material.css.js +66 -72
  87. package/components/input/themes/light/input.material.css.js.map +1 -1
  88. package/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.css.js +1 -1
  89. package/components/nav-drawer/themes/light/fluent/nav-drawer-item.fluent.css.js.map +1 -1
  90. package/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.js +1 -1
  91. package/components/nav-drawer/themes/light/indigo/nav-drawer-item.indigo.css.js.map +1 -1
  92. package/components/nav-drawer/themes/light/nav-drawer-item.base.css.js +11 -11
  93. package/components/nav-drawer/themes/light/nav-drawer-item.base.css.js.map +1 -1
  94. package/components/radio/radio.js +1 -0
  95. package/components/radio/radio.js.map +1 -1
  96. package/components/radio/themes/dark/radio.material.css.d.ts +1 -0
  97. package/components/radio/themes/dark/radio.material.css.js +3 -0
  98. package/components/radio/themes/dark/radio.material.css.js.map +1 -0
  99. package/components/radio/themes/light/radio.base.css.js +0 -3
  100. package/components/radio/themes/light/radio.base.css.js.map +1 -1
  101. package/components/radio/themes/light/radio.fluent.css.js +10 -9
  102. package/components/radio/themes/light/radio.fluent.css.js.map +1 -1
  103. package/components/radio/themes/light/radio.material.css.js +17 -3
  104. package/components/radio/themes/light/radio.material.css.js.map +1 -1
  105. package/components/radio-group/radio-group.base.css.js +2 -8
  106. package/components/radio-group/radio-group.base.css.js.map +1 -1
  107. package/components/radio-group/radio-group.fluent.css.d.ts +1 -0
  108. package/components/radio-group/radio-group.fluent.css.js +6 -0
  109. package/components/radio-group/radio-group.fluent.css.js.map +1 -0
  110. package/components/radio-group/radio-group.js +9 -2
  111. package/components/radio-group/radio-group.js.map +1 -1
  112. package/components/radio-group/radio-group.material.css.d.ts +1 -0
  113. package/components/radio-group/radio-group.material.css.js +10 -0
  114. package/components/radio-group/radio-group.material.css.js.map +1 -0
  115. package/components/select/select-group.js +1 -0
  116. package/components/select/select-group.js.map +1 -1
  117. package/components/select/themes/light/select.base.css.js +16 -15
  118. package/components/select/themes/light/select.base.css.js.map +1 -1
  119. package/components/select/themes/light/select.bootstrap.css.js +7 -0
  120. package/components/select/themes/light/select.bootstrap.css.js.map +1 -1
  121. package/components/select/themes/light/select.fluent.css.js +11 -0
  122. package/components/select/themes/light/select.fluent.css.js.map +1 -1
  123. package/components/select/themes/light/select.indigo.css.js +10 -1
  124. package/components/select/themes/light/select.indigo.css.js.map +1 -1
  125. package/components/select/themes/light/select.material.css.js +14 -0
  126. package/components/select/themes/light/select.material.css.js.map +1 -1
  127. package/components/slider/slider-base.js +1 -0
  128. package/components/slider/slider-base.js.map +1 -1
  129. package/components/stepper/themes/stepper/stepper.base.css.js +1 -1
  130. package/components/stepper/themes/stepper/stepper.base.css.js.map +1 -1
  131. package/components/toggle/toggle.controller.js.map +1 -1
  132. package/components/toggle/toggle.directive.js.map +1 -1
  133. package/custom-elements.json +37 -9
  134. package/package.json +4 -4
  135. package/themes/dark/bootstrap.css +3 -1
  136. package/themes/dark/fluent.css +4 -3
  137. package/themes/dark/indigo.css +3 -1
  138. package/themes/dark/material.css +12 -1
  139. package/vscode-html-custom-data.json +14 -4
@@ -1 +1 @@
1
- {"version":3,"file":"card.content.material.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.content.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: block;\n width: 100%;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n padding: 1rem;\n color: var(--ig-surface-500-contrast);\n}\n\n::slotted(*) {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n opacity: 0.6;\n margin: 0;\n}`;\n"]}
1
+ {"version":3,"file":"card.content.material.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.content.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: block;\n width: 100%;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n padding: 1rem;\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n::slotted(*) {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n margin: 0;\n}`;\n"]}
@@ -50,7 +50,7 @@ export const styles = css `:host {
50
50
  -ms-flex-line-pack: start;
51
51
  align-content: flex-start;
52
52
  width: 100%;
53
- color: var(--ig-surface-500-contrast);
53
+ color: hsla(var(--ig-gray-900), var(--ig-gray-a));
54
54
  padding: 1rem;
55
55
  -webkit-box-sizing: border-box;
56
56
  box-sizing: border-box;
@@ -86,7 +86,6 @@ header {
86
86
  text-transform: var(--ig-h6-text-transform);
87
87
  margin-top: var(--ig-h6-margin-top);
88
88
  margin-bottom: var(--ig-h6-margin-bottom);
89
- opacity: 0.87;
90
89
  }
91
90
 
92
91
  ::slotted([slot=subtitle]) {
@@ -99,7 +98,7 @@ header {
99
98
  text-transform: var(--ig-subtitle-2-text-transform);
100
99
  margin-top: var(--ig-subtitle-2-margin-top);
101
100
  margin-bottom: var(--ig-subtitle-2-margin-bottom);
102
- opacity: 0.6;
101
+ color: hsla(var(--ig-gray-700), var(--ig-gray-a));
103
102
  }
104
103
 
105
104
  ::slotted([slot=thumbnail]) {
@@ -123,7 +122,6 @@ header {
123
122
  margin-top: var(--ig-h5-margin-top);
124
123
  margin-bottom: var(--ig-h5-margin-bottom);
125
124
  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
126
- opacity: 1;
127
125
  }
128
126
 
129
127
  ::slotted([slot=subtitle]) {
@@ -137,6 +135,5 @@ header {
137
135
  margin-top: var(--ig-body-1-margin-top);
138
136
  margin-bottom: var(--ig-body-1-margin-bottom);
139
137
  color: hsla(var(--ig-gray-800), var(--ig-gray-a));
140
- opacity: 1;
141
138
  }`;
142
139
  //# sourceMappingURL=card.header.bootstrap.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"card.header.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.header.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2IvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-line-pack: start;\n align-content: flex-start;\n width: 100%;\n color: var(--ig-surface-500-contrast);\n padding: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n::slotted(*) {\n margin: 0;\n font: inherit;\n opacity: inherit;\n}\n\nheader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n overflow: hidden;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h6-font-family);\n font-size: var(--ig-h6-font-size);\n font-weight: var(--ig-h6-font-weight);\n font-style: var(--ig-h6-font-style);\n line-height: var(--ig-h6-line-height);\n letter-spacing: var(--ig-h6-letter-spacing);\n text-transform: var(--ig-h6-text-transform);\n margin-top: var(--ig-h6-margin-top);\n margin-bottom: var(--ig-h6-margin-bottom);\n opacity: 0.87;\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-subtitle-2-font-family);\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n opacity: 0.6;\n}\n\n::slotted([slot=thumbnail]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -webkit-margin-end: 1rem;\n margin-inline-end: 1rem;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h5-font-family);\n font-size: var(--ig-h5-font-size);\n font-weight: var(--ig-h5-font-weight);\n font-style: var(--ig-h5-font-style);\n line-height: var(--ig-h5-line-height);\n letter-spacing: var(--ig-h5-letter-spacing);\n text-transform: var(--ig-h5-text-transform);\n margin-top: var(--ig-h5-margin-top);\n margin-bottom: var(--ig-h5-margin-bottom);\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n opacity: 1;\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-body-1-font-family);\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n opacity: 1;\n}`;\n"]}
1
+ {"version":3,"file":"card.header.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.header.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-line-pack: start;\n align-content: flex-start;\n width: 100%;\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n padding: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n::slotted(*) {\n margin: 0;\n font: inherit;\n opacity: inherit;\n}\n\nheader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n overflow: hidden;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h6-font-family);\n font-size: var(--ig-h6-font-size);\n font-weight: var(--ig-h6-font-weight);\n font-style: var(--ig-h6-font-style);\n line-height: var(--ig-h6-line-height);\n letter-spacing: var(--ig-h6-letter-spacing);\n text-transform: var(--ig-h6-text-transform);\n margin-top: var(--ig-h6-margin-top);\n margin-bottom: var(--ig-h6-margin-bottom);\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-subtitle-2-font-family);\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n::slotted([slot=thumbnail]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -webkit-margin-end: 1rem;\n margin-inline-end: 1rem;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h5-font-family);\n font-size: var(--ig-h5-font-size);\n font-weight: var(--ig-h5-font-weight);\n font-style: var(--ig-h5-font-style);\n line-height: var(--ig-h5-line-height);\n letter-spacing: var(--ig-h5-letter-spacing);\n text-transform: var(--ig-h5-text-transform);\n margin-top: var(--ig-h5-margin-top);\n margin-bottom: var(--ig-h5-margin-bottom);\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-body-1-font-family);\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n}`;\n"]}
@@ -50,7 +50,7 @@ export const styles = css `:host {
50
50
  -ms-flex-line-pack: start;
51
51
  align-content: flex-start;
52
52
  width: 100%;
53
- color: var(--ig-surface-500-contrast);
53
+ color: hsla(var(--ig-gray-900), var(--ig-gray-a));
54
54
  padding: 1rem;
55
55
  -webkit-box-sizing: border-box;
56
56
  box-sizing: border-box;
@@ -86,7 +86,6 @@ header {
86
86
  text-transform: var(--ig-h6-text-transform);
87
87
  margin-top: var(--ig-h6-margin-top);
88
88
  margin-bottom: var(--ig-h6-margin-bottom);
89
- opacity: 0.87;
90
89
  }
91
90
 
92
91
  ::slotted([slot=subtitle]) {
@@ -99,7 +98,7 @@ header {
99
98
  text-transform: var(--ig-subtitle-2-text-transform);
100
99
  margin-top: var(--ig-subtitle-2-margin-top);
101
100
  margin-bottom: var(--ig-subtitle-2-margin-bottom);
102
- opacity: 0.6;
101
+ color: hsla(var(--ig-gray-700), var(--ig-gray-a));
103
102
  }
104
103
 
105
104
  ::slotted([slot=thumbnail]) {
@@ -1 +1 @@
1
- {"version":3,"file":"card.header.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.header.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-line-pack: start;\n align-content: flex-start;\n width: 100%;\n color: var(--ig-surface-500-contrast);\n padding: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n::slotted(*) {\n margin: 0;\n font: inherit;\n opacity: inherit;\n}\n\nheader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n overflow: hidden;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h6-font-family);\n font-size: var(--ig-h6-font-size);\n font-weight: var(--ig-h6-font-weight);\n font-style: var(--ig-h6-font-style);\n line-height: var(--ig-h6-line-height);\n letter-spacing: var(--ig-h6-letter-spacing);\n text-transform: var(--ig-h6-text-transform);\n margin-top: var(--ig-h6-margin-top);\n margin-bottom: var(--ig-h6-margin-bottom);\n opacity: 0.87;\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-subtitle-2-font-family);\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n opacity: 0.6;\n}\n\n::slotted([slot=thumbnail]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -webkit-margin-end: 1rem;\n margin-inline-end: 1rem;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-subtitle-1-font-family);\n font-size: var(--ig-subtitle-1-font-size);\n font-weight: var(--ig-subtitle-1-font-weight);\n font-style: var(--ig-subtitle-1-font-style);\n line-height: var(--ig-subtitle-1-line-height);\n letter-spacing: var(--ig-subtitle-1-letter-spacing);\n text-transform: var(--ig-subtitle-1-text-transform);\n margin-top: var(--ig-subtitle-1-margin-top);\n margin-bottom: var(--ig-subtitle-1-margin-bottom);\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n}`;\n"]}
1
+ {"version":3,"file":"card.header.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.header.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-line-pack: start;\n align-content: flex-start;\n width: 100%;\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n padding: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n::slotted(*) {\n margin: 0;\n font: inherit;\n opacity: inherit;\n}\n\nheader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n overflow: hidden;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h6-font-family);\n font-size: var(--ig-h6-font-size);\n font-weight: var(--ig-h6-font-weight);\n font-style: var(--ig-h6-font-style);\n line-height: var(--ig-h6-line-height);\n letter-spacing: var(--ig-h6-letter-spacing);\n text-transform: var(--ig-h6-text-transform);\n margin-top: var(--ig-h6-margin-top);\n margin-bottom: var(--ig-h6-margin-bottom);\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-subtitle-2-font-family);\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n::slotted([slot=thumbnail]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -webkit-margin-end: 1rem;\n margin-inline-end: 1rem;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-subtitle-1-font-family);\n font-size: var(--ig-subtitle-1-font-size);\n font-weight: var(--ig-subtitle-1-font-weight);\n font-style: var(--ig-subtitle-1-font-style);\n line-height: var(--ig-subtitle-1-line-height);\n letter-spacing: var(--ig-subtitle-1-letter-spacing);\n text-transform: var(--ig-subtitle-1-text-transform);\n margin-top: var(--ig-subtitle-1-margin-top);\n margin-bottom: var(--ig-subtitle-1-margin-bottom);\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n}`;\n"]}
@@ -50,7 +50,7 @@ export const styles = css `:host {
50
50
  -ms-flex-line-pack: start;
51
51
  align-content: flex-start;
52
52
  width: 100%;
53
- color: var(--ig-surface-500-contrast);
53
+ color: hsla(var(--ig-gray-900), var(--ig-gray-a));
54
54
  padding: 1rem;
55
55
  -webkit-box-sizing: border-box;
56
56
  box-sizing: border-box;
@@ -86,7 +86,6 @@ header {
86
86
  text-transform: var(--ig-h6-text-transform);
87
87
  margin-top: var(--ig-h6-margin-top);
88
88
  margin-bottom: var(--ig-h6-margin-bottom);
89
- opacity: 0.87;
90
89
  }
91
90
 
92
91
  ::slotted([slot=subtitle]) {
@@ -99,7 +98,7 @@ header {
99
98
  text-transform: var(--ig-subtitle-2-text-transform);
100
99
  margin-top: var(--ig-subtitle-2-margin-top);
101
100
  margin-bottom: var(--ig-subtitle-2-margin-bottom);
102
- opacity: 0.6;
101
+ color: hsla(var(--ig-gray-700), var(--ig-gray-a));
103
102
  }
104
103
 
105
104
  ::slotted([slot=thumbnail]) {
@@ -114,11 +113,9 @@ header {
114
113
 
115
114
  ::slotted([slot=title]) {
116
115
  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
117
- opacity: 1;
118
116
  }
119
117
 
120
118
  ::slotted([slot=subtitle]) {
121
119
  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
122
- opacity: 1;
123
120
  }`;
124
121
  //# sourceMappingURL=card.header.indigo.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"card.header.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.header.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyHvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-line-pack: start;\n align-content: flex-start;\n width: 100%;\n color: var(--ig-surface-500-contrast);\n padding: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n::slotted(*) {\n margin: 0;\n font: inherit;\n opacity: inherit;\n}\n\nheader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n overflow: hidden;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h6-font-family);\n font-size: var(--ig-h6-font-size);\n font-weight: var(--ig-h6-font-weight);\n font-style: var(--ig-h6-font-style);\n line-height: var(--ig-h6-line-height);\n letter-spacing: var(--ig-h6-letter-spacing);\n text-transform: var(--ig-h6-text-transform);\n margin-top: var(--ig-h6-margin-top);\n margin-bottom: var(--ig-h6-margin-bottom);\n opacity: 0.87;\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-subtitle-2-font-family);\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n opacity: 0.6;\n}\n\n::slotted([slot=thumbnail]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -webkit-margin-end: 1rem;\n margin-inline-end: 1rem;\n}\n\n::slotted([slot=title]) {\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n opacity: 1;\n}\n\n::slotted([slot=subtitle]) {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n opacity: 1;\n}`;\n"]}
1
+ {"version":3,"file":"card.header.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.header.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsHvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-line-pack: start;\n align-content: flex-start;\n width: 100%;\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n padding: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n::slotted(*) {\n margin: 0;\n font: inherit;\n opacity: inherit;\n}\n\nheader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n overflow: hidden;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h6-font-family);\n font-size: var(--ig-h6-font-size);\n font-weight: var(--ig-h6-font-weight);\n font-style: var(--ig-h6-font-style);\n line-height: var(--ig-h6-line-height);\n letter-spacing: var(--ig-h6-letter-spacing);\n text-transform: var(--ig-h6-text-transform);\n margin-top: var(--ig-h6-margin-top);\n margin-bottom: var(--ig-h6-margin-bottom);\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-subtitle-2-font-family);\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n::slotted([slot=thumbnail]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -webkit-margin-end: 1rem;\n margin-inline-end: 1rem;\n}\n\n::slotted([slot=title]) {\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n::slotted([slot=subtitle]) {\n color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}`;\n"]}
@@ -50,7 +50,7 @@ export const styles = css `:host {
50
50
  -ms-flex-line-pack: start;
51
51
  align-content: flex-start;
52
52
  width: 100%;
53
- color: var(--ig-surface-500-contrast);
53
+ color: hsla(var(--ig-gray-900), var(--ig-gray-a));
54
54
  padding: 1rem;
55
55
  -webkit-box-sizing: border-box;
56
56
  box-sizing: border-box;
@@ -86,7 +86,6 @@ header {
86
86
  text-transform: var(--ig-h6-text-transform);
87
87
  margin-top: var(--ig-h6-margin-top);
88
88
  margin-bottom: var(--ig-h6-margin-bottom);
89
- opacity: 0.87;
90
89
  }
91
90
 
92
91
  ::slotted([slot=subtitle]) {
@@ -99,7 +98,7 @@ header {
99
98
  text-transform: var(--ig-subtitle-2-text-transform);
100
99
  margin-top: var(--ig-subtitle-2-margin-top);
101
100
  margin-bottom: var(--ig-subtitle-2-margin-bottom);
102
- opacity: 0.6;
101
+ color: hsla(var(--ig-gray-700), var(--ig-gray-a));
103
102
  }
104
103
 
105
104
  ::slotted([slot=thumbnail]) {
@@ -1 +1 @@
1
- {"version":3,"file":"card.header.material.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.header.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+GvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-line-pack: start;\n align-content: flex-start;\n width: 100%;\n color: var(--ig-surface-500-contrast);\n padding: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n::slotted(*) {\n margin: 0;\n font: inherit;\n opacity: inherit;\n}\n\nheader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n overflow: hidden;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h6-font-family);\n font-size: var(--ig-h6-font-size);\n font-weight: var(--ig-h6-font-weight);\n font-style: var(--ig-h6-font-style);\n line-height: var(--ig-h6-line-height);\n letter-spacing: var(--ig-h6-letter-spacing);\n text-transform: var(--ig-h6-text-transform);\n margin-top: var(--ig-h6-margin-top);\n margin-bottom: var(--ig-h6-margin-bottom);\n opacity: 0.87;\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-subtitle-2-font-family);\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n opacity: 0.6;\n}\n\n::slotted([slot=thumbnail]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -webkit-margin-end: 1rem;\n margin-inline-end: 1rem;\n}`;\n"]}
1
+ {"version":3,"file":"card.header.material.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.header.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8GvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--ig-scrollbar-size);\n scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--ig-scrollbar-size);\n height: var(--ig-scrollbar-size);\n background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--ig-scrollbar-thumb-background);\n}\n\n[hidden] {\n display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-line-pack: start;\n align-content: flex-start;\n width: 100%;\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n padding: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n::slotted(*) {\n margin: 0;\n font: inherit;\n opacity: inherit;\n}\n\nheader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n overflow: hidden;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h6-font-family);\n font-size: var(--ig-h6-font-size);\n font-weight: var(--ig-h6-font-weight);\n font-style: var(--ig-h6-font-style);\n line-height: var(--ig-h6-line-height);\n letter-spacing: var(--ig-h6-letter-spacing);\n text-transform: var(--ig-h6-text-transform);\n margin-top: var(--ig-h6-margin-top);\n margin-bottom: var(--ig-h6-margin-bottom);\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-subtitle-2-font-family);\n font-size: var(--ig-subtitle-2-font-size);\n font-weight: var(--ig-subtitle-2-font-weight);\n font-style: var(--ig-subtitle-2-font-style);\n line-height: var(--ig-subtitle-2-line-height);\n letter-spacing: var(--ig-subtitle-2-letter-spacing);\n text-transform: var(--ig-subtitle-2-text-transform);\n margin-top: var(--ig-subtitle-2-margin-top);\n margin-bottom: var(--ig-subtitle-2-margin-bottom);\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n::slotted([slot=thumbnail]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -webkit-margin-end: 1rem;\n margin-inline-end: 1rem;\n}`;\n"]}
@@ -58,6 +58,7 @@ let IgcCheckboxBaseComponent = class IgcCheckboxBaseComponent extends EventEmitt
58
58
  }
59
59
  disconnectedCallback() {
60
60
  this.removeEventListener('keyup', this.handleKeyUp);
61
+ super.disconnectedCallback();
61
62
  }
62
63
  handleKeyUp() {
63
64
  if (!this.focused) {
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox-base.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property, query, queryAssignedNodes, state } from 'lit/decorators.js';\nimport { alternateName } from '../common/decorators/alternateName.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\n\nexport interface IgcCheckboxEventMap {\n igcChange: CustomEvent<boolean>;\n igcFocus: CustomEvent<void>;\n igcBlur: CustomEvent<void>;\n}\n\n@blazorDeepImport\nexport class IgcCheckboxBaseComponent extends EventEmitterMixin<\n IgcCheckboxEventMap,\n Constructor<LitElement>\n>(LitElement) {\n @query('input[type=\"checkbox\"]', true)\n protected input!: HTMLInputElement;\n\n @queryAssignedNodes({ flatten: true })\n protected label!: Array<Node>;\n\n @state()\n protected focused = false;\n\n @state()\n protected hideLabel = false;\n\n /**\n * The name attribute of the control.\n * @attr\n */\n @property()\n public name!: string;\n\n /**\n * The value attribute of the control.\n * @attr\n */\n @property()\n public value!: string;\n\n /**\n * Disables the control.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n /**\n * The checked state of the control.\n * @attr\n */\n @property({ type: Boolean })\n @blazorTwoWayBind('igcChange', 'detail')\n public checked = false;\n\n /**\n * Makes the control a required field.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public required = false;\n\n /**\n * Controls the validity of the control.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n /**\n * The label position of the control.\n * @attr label-position\n */\n @property({ reflect: true, attribute: 'label-position' })\n public labelPosition: 'before' | 'after' = 'after';\n\n /** Sets the aria-labelledby attribute for the control. */\n @property({ reflect: true, attribute: 'aria-labelledby' })\n public ariaLabelledby!: string;\n\n /** Simulates a click on the control. */\n public override click() {\n this.input.click();\n }\n\n /** Sets focus on the control. */\n @alternateName('focusComponent')\n public override focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the control. */\n @alternateName('blurComponent')\n public override blur() {\n this.input.blur();\n }\n\n /** Checks for validity of the control and shows the browser message if it invalid. */\n public reportValidity() {\n return this.input.reportValidity();\n }\n\n /** Checks for validity of the control and emits the invalid event if it invalid. */\n public checkValidity() {\n return this.input.checkValidity();\n }\n\n /**\n * Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n */\n public setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.invalid = !this.input.checkValidity();\n }\n\n protected handleBlur() {\n this.emitEvent('igcBlur');\n this.focused = false;\n }\n\n protected handleFocus() {\n this.emitEvent('igcFocus');\n }\n\n protected handleMouseDown(event: PointerEvent) {\n event.preventDefault();\n this.input.focus();\n this.focused = false;\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keyup', this.handleKeyUp);\n }\n\n public override disconnectedCallback() {\n this.removeEventListener('keyup', this.handleKeyUp);\n }\n\n protected handleKeyUp() {\n if (!this.focused) {\n this.focused = true;\n }\n }\n\n protected override async firstUpdated() {\n if (this.label.length === 0) {\n this.hideLabel = true;\n }\n\n await this.updateComplete;\n }\n}\n"]}
1
+ {"version":3,"file":"checkbox-base.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement } from 'lit';\nimport { property, query, queryAssignedNodes, state } from 'lit/decorators.js';\nimport { alternateName } from '../common/decorators/alternateName.js';\nimport { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';\nimport { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\n\nexport interface IgcCheckboxEventMap {\n igcChange: CustomEvent<boolean>;\n igcFocus: CustomEvent<void>;\n igcBlur: CustomEvent<void>;\n}\n\n@blazorDeepImport\nexport class IgcCheckboxBaseComponent extends EventEmitterMixin<\n IgcCheckboxEventMap,\n Constructor<LitElement>\n>(LitElement) {\n @query('input[type=\"checkbox\"]', true)\n protected input!: HTMLInputElement;\n\n @queryAssignedNodes({ flatten: true })\n protected label!: Array<Node>;\n\n @state()\n protected focused = false;\n\n @state()\n protected hideLabel = false;\n\n /**\n * The name attribute of the control.\n * @attr\n */\n @property()\n public name!: string;\n\n /**\n * The value attribute of the control.\n * @attr\n */\n @property()\n public value!: string;\n\n /**\n * Disables the control.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n /**\n * The checked state of the control.\n * @attr\n */\n @property({ type: Boolean })\n @blazorTwoWayBind('igcChange', 'detail')\n public checked = false;\n\n /**\n * Makes the control a required field.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public required = false;\n\n /**\n * Controls the validity of the control.\n * @attr\n */\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n /**\n * The label position of the control.\n * @attr label-position\n */\n @property({ reflect: true, attribute: 'label-position' })\n public labelPosition: 'before' | 'after' = 'after';\n\n /** Sets the aria-labelledby attribute for the control. */\n @property({ reflect: true, attribute: 'aria-labelledby' })\n public ariaLabelledby!: string;\n\n /** Simulates a click on the control. */\n public override click() {\n this.input.click();\n }\n\n /** Sets focus on the control. */\n @alternateName('focusComponent')\n public override focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the control. */\n @alternateName('blurComponent')\n public override blur() {\n this.input.blur();\n }\n\n /** Checks for validity of the control and shows the browser message if it invalid. */\n public reportValidity() {\n return this.input.reportValidity();\n }\n\n /** Checks for validity of the control and emits the invalid event if it invalid. */\n public checkValidity() {\n return this.input.checkValidity();\n }\n\n /**\n * Sets a custom validation message for the control.\n * As long as `message` is not empty, the control is considered invalid.\n */\n public setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.invalid = !this.input.checkValidity();\n }\n\n protected handleBlur() {\n this.emitEvent('igcBlur');\n this.focused = false;\n }\n\n protected handleFocus() {\n this.emitEvent('igcFocus');\n }\n\n protected handleMouseDown(event: PointerEvent) {\n event.preventDefault();\n this.input.focus();\n this.focused = false;\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keyup', this.handleKeyUp);\n }\n\n public override disconnectedCallback() {\n this.removeEventListener('keyup', this.handleKeyUp);\n super.disconnectedCallback();\n }\n\n protected handleKeyUp() {\n if (!this.focused) {\n this.focused = true;\n }\n }\n\n protected override async firstUpdated() {\n if (this.label.length === 0) {\n this.hideLabel = true;\n }\n\n await this.updateComplete;\n }\n}\n"]}
@@ -11,8 +11,10 @@ export default class IgcComboItemComponent extends LitElement {
11
11
  * Determines whether the item is active.
12
12
  */
13
13
  active: boolean;
14
+ hideCheckbox: boolean;
14
15
  protected selectedChange(): void;
15
16
  connectedCallback(): void;
17
+ private renderCheckbox;
16
18
  protected render(): import("lit-html").TemplateResult<1>;
17
19
  }
18
20
  declare global {
@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
4
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
- import { html, LitElement } from 'lit';
7
+ import { html, LitElement, nothing } from 'lit';
8
8
  import { themes } from '../../theming/theming-decorator.js';
9
9
  import { styles } from './themes/light/item/combo-item.base.css.js';
10
10
  import { styles as bootstrap } from '../dropdown/themes/light/dropdown-item.bootstrap.css.js';
@@ -20,6 +20,7 @@ let IgcComboItemComponent = class IgcComboItemComponent extends LitElement {
20
20
  super(...arguments);
21
21
  this.selected = false;
22
22
  this.active = false;
23
+ this.hideCheckbox = false;
23
24
  }
24
25
  selectedChange() {
25
26
  this.selected
@@ -30,16 +31,19 @@ let IgcComboItemComponent = class IgcComboItemComponent extends LitElement {
30
31
  super.connectedCallback();
31
32
  this.setAttribute('role', 'option');
32
33
  }
34
+ renderCheckbox() {
35
+ return html `<section part="prefix">
36
+ <igc-checkbox
37
+ aria-hidden="true"
38
+ ?checked=${this.selected}
39
+ tabindex="-1"
40
+ exportparts="control: checkbox, indicator: checkbox-indicator, checked"
41
+ ></igc-checkbox>
42
+ </section>`;
43
+ }
33
44
  render() {
34
45
  return html `
35
- <section part="prefix">
36
- <igc-checkbox
37
- aria-hidden="true"
38
- ?checked=${this.selected}
39
- tabindex="-1"
40
- exportparts="control: checkbox, indicator: checkbox-indicator, checked"
41
- ></igc-checkbox>
42
- </section>
46
+ ${!this.hideCheckbox ? this.renderCheckbox() : nothing}
43
47
  <section id="content" part="content">
44
48
  <slot></slot>
45
49
  </section>
@@ -57,6 +61,9 @@ __decorate([
57
61
  __decorate([
58
62
  property({ type: Boolean, reflect: true })
59
63
  ], IgcComboItemComponent.prototype, "active", void 0);
64
+ __decorate([
65
+ property({ attribute: 'hide-checkbox', type: Boolean, reflect: false })
66
+ ], IgcComboItemComponent.prototype, "hideCheckbox", void 0);
60
67
  __decorate([
61
68
  watch('selected')
62
69
  ], IgcComboItemComponent.prototype, "selectedChange", null);
@@ -1 +1 @@
1
- {"version":3,"file":"combo-item.js","sourceRoot":"","sources":["../../../src/components/combo/combo-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,yDAAyD,CAAC;AAC9F,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAE7E,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAGxB,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAWN,aAAQ,GAAG,KAAK,CAAC;QAMjB,WAAM,GAAG,KAAK,CAAC;IA6BxB,CAAC;IA1BW,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;qBAIM,IAAI,CAAC,QAAQ;;;;;;;;KAQ7B,CAAC;IACJ,CAAC;;AA5CsB,6BAAO,GAAW,gBAAgB,CAAC;AACnC,4BAAM,GAAG,MAAM,CAAC;AAGvC;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACT;AAMtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACnB;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACrB;AAGtB;IADC,KAAK,CAAC,UAAU,CAAC;2DAKjB;AAxBkB,qBAAqB;IADzC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,qBAAqB,CA8CzC;eA9CoB,qBAAqB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/item/combo-item.base.css.js';\nimport { styles as bootstrap } from '../dropdown/themes/light/dropdown-item.bootstrap.css.js';\nimport { styles as fluent } from '../dropdown/themes/light/dropdown-item.fluent.css.js';\nimport { styles as indigo } from '../dropdown/themes/light/dropdown-item.indigo.css.js';\nimport { property } from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport IgcCheckboxComopnent from '../checkbox/checkbox.js';\nimport { defineComponents } from '../common/definitions/defineComponents.js';\n\ndefineComponents(IgcCheckboxComopnent);\n\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcComboItemComponent extends LitElement {\n public static readonly tagName: string = 'igc-combo-item';\n public static override styles = styles;\n\n @property({ attribute: false })\n public index!: number;\n\n /**\n * Determines whether the item is selected.\n */\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n /**\n * Determines whether the item is active.\n */\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n @watch('selected')\n protected selectedChange() {\n this.selected\n ? this.setAttribute('aria-selected', 'true')\n : this.removeAttribute('aria-selected');\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'option');\n }\n\n protected override render() {\n return html`\n <section part=\"prefix\">\n <igc-checkbox\n aria-hidden=\"true\"\n ?checked=${this.selected}\n tabindex=\"-1\"\n exportparts=\"control: checkbox, indicator: checkbox-indicator, checked\"\n ></igc-checkbox>\n </section>\n <section id=\"content\" part=\"content\">\n <slot></slot>\n </section>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-combo-item': IgcComboItemComponent;\n }\n}\n"]}
1
+ {"version":3,"file":"combo-item.js","sourceRoot":"","sources":["../../../src/components/combo/combo-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,yDAAyD,CAAC;AAC9F,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAE7E,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAGxB,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAWN,aAAQ,GAAG,KAAK,CAAC;QAMjB,WAAM,GAAG,KAAK,CAAC;QAGf,iBAAY,GAAG,KAAK,CAAC;IAiC9B,CAAC;IA9BW,cAAc;QACtB,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;YAC5C,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAEe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,QAAQ;;;;eAIjB,CAAC;IACd,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;QACP,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,OAAO;;;;KAIvD,CAAC;IACJ,CAAC;;AAnDsB,6BAAO,GAAW,gBAAgB,CAAC;AACnC,4BAAM,GAAG,MAAM,CAAC;AAGvC;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACT;AAMtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACnB;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACrB;AAGtB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;2DAC5C;AAG5B;IADC,KAAK,CAAC,UAAU,CAAC;2DAKjB;AA3BkB,qBAAqB;IADzC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,qBAAqB,CAqDzC;eArDoB,qBAAqB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from './themes/light/item/combo-item.base.css.js';\nimport { styles as bootstrap } from '../dropdown/themes/light/dropdown-item.bootstrap.css.js';\nimport { styles as fluent } from '../dropdown/themes/light/dropdown-item.fluent.css.js';\nimport { styles as indigo } from '../dropdown/themes/light/dropdown-item.indigo.css.js';\nimport { property } from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport IgcCheckboxComopnent from '../checkbox/checkbox.js';\nimport { defineComponents } from '../common/definitions/defineComponents.js';\n\ndefineComponents(IgcCheckboxComopnent);\n\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcComboItemComponent extends LitElement {\n public static readonly tagName: string = 'igc-combo-item';\n public static override styles = styles;\n\n @property({ attribute: false })\n public index!: number;\n\n /**\n * Determines whether the item is selected.\n */\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n /**\n * Determines whether the item is active.\n */\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n @property({ attribute: 'hide-checkbox', type: Boolean, reflect: false })\n public hideCheckbox = false;\n\n @watch('selected')\n protected selectedChange() {\n this.selected\n ? this.setAttribute('aria-selected', 'true')\n : this.removeAttribute('aria-selected');\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'option');\n }\n\n private renderCheckbox() {\n return html`<section part=\"prefix\">\n <igc-checkbox\n aria-hidden=\"true\"\n ?checked=${this.selected}\n tabindex=\"-1\"\n exportparts=\"control: checkbox, indicator: checkbox-indicator, checked\"\n ></igc-checkbox>\n </section>`;\n }\n\n protected override render() {\n return html`\n ${!this.hideCheckbox ? this.renderCheckbox() : nothing}\n <section id=\"content\" part=\"content\">\n <slot></slot>\n </section>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-combo-item': IgcComboItemComponent;\n }\n}\n"]}
@@ -2,7 +2,7 @@ import { LitVirtualizer } from '@lit-labs/virtualizer';
2
2
  export default class IgcComboListComponent extends LitVirtualizer {
3
3
  static readonly tagName = "igc-combo-list";
4
4
  scroller: boolean;
5
- connectedCallback(): void;
5
+ connectedCallback(): Promise<void>;
6
6
  }
7
7
  declare global {
8
8
  interface HTMLElementTagNameMap {
@@ -4,7 +4,8 @@ export default class IgcComboListComponent extends LitVirtualizer {
4
4
  super(...arguments);
5
5
  this.scroller = true;
6
6
  }
7
- connectedCallback() {
7
+ async connectedCallback() {
8
+ await super.layoutComplete;
8
9
  super.connectedCallback();
9
10
  this.setAttribute('tabindex', '0');
10
11
  this.setAttribute('role', 'listbox');
@@ -1 +1 @@
1
- {"version":3,"file":"combo-list.js","sourceRoot":"","sources":["../../../src/components/combo/combo-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,cAAc;IAAjE;;QAEkB,aAAQ,GAAG,IAAI,CAAC;IAOlC,CAAC;IALiB,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACvC,CAAC;;AAPsB,6BAAO,GAAG,gBAAgB,CAAC","sourcesContent":["import { LitVirtualizer } from '@lit-labs/virtualizer';\n\nexport default class IgcComboListComponent extends LitVirtualizer {\n public static readonly tagName = 'igc-combo-list';\n public override scroller = true;\n\n public override connectedCallback() {\n super.connectedCallback();\n this.setAttribute('tabindex', '0');\n this.setAttribute('role', 'listbox');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-combo-list': IgcComboListComponent;\n }\n}\n"]}
1
+ {"version":3,"file":"combo-list.js","sourceRoot":"","sources":["../../../src/components/combo/combo-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,cAAc;IAAjE;;QAEkB,aAAQ,GAAG,IAAI,CAAC;IASlC,CAAC;IAPiB,KAAK,CAAC,iBAAiB;QACrC,MAAM,KAAK,CAAC,cAAc,CAAC;QAE3B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACvC,CAAC;;AATsB,6BAAO,GAAG,gBAAgB,CAAC","sourcesContent":["import { LitVirtualizer } from '@lit-labs/virtualizer';\n\nexport default class IgcComboListComponent extends LitVirtualizer {\n public static readonly tagName = 'igc-combo-list';\n public override scroller = true;\n\n public override async connectedCallback() {\n await super.layoutComplete;\n\n super.connectedCallback();\n this.setAttribute('tabindex', '0');\n this.setAttribute('role', 'listbox');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-combo-list': IgcComboListComponent;\n }\n}\n"]}
@@ -5,7 +5,7 @@ import { SelectionController } from './controllers/selection.js';
5
5
  import { IgcToggleController } from '../toggle/toggle.controller.js';
6
6
  import { DataController } from './controllers/data.js';
7
7
  import { IgcToggleComponent } from '../toggle/types.js';
8
- import { Keys, Values, ComboRecord, GroupingDirection, FilteringOptions, IgcComboEventMap, ComboItemTemplate } from './types.js';
8
+ import { Keys, ComboRecord, GroupingDirection, FilteringOptions, IgcComboEventMap, ComboItemTemplate, Item } from './types.js';
9
9
  import { Constructor } from '../common/mixins/constructor.js';
10
10
  import type { ThemeController, Theme } from '../../theming/types.js';
11
11
  declare const IgcComboComponent_base: import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcComboEventMap>> & Constructor<LitElement>;
@@ -54,6 +54,7 @@ declare const IgcComboComponent_base: import("../common/mixins/constructor.js").
54
54
  export default class IgcComboComponent<T extends object> extends IgcComboComponent_base implements Partial<IgcToggleComponent> {
55
55
  static readonly tagName = "igc-combo";
56
56
  static styles: import("lit").CSSResult;
57
+ private _value;
57
58
  protected navigationController: NavigationController<T>;
58
59
  protected selectionController: SelectionController<T>;
59
60
  protected dataController: DataController<T>;
@@ -93,6 +94,11 @@ export default class IgcComboComponent<T extends object> extends IgcComboCompone
93
94
  * @attr outlined
94
95
  */
95
96
  outlined: boolean;
97
+ /**
98
+ * Enables single selection mode and moves item filtering to the main input.
99
+ * @attr single-select
100
+ */
101
+ singleSelect: boolean;
96
102
  /**
97
103
  * The autofocus attribute of the control.
98
104
  * @attr autofocus
@@ -189,11 +195,14 @@ export default class IgcComboComponent<T extends object> extends IgcComboCompone
189
195
  protected themeAdopted(controller: ThemeController): void;
190
196
  protected willUpdate(): void;
191
197
  protected getUpdateComplete(): Promise<boolean>;
198
+ protected resetSearchTerm(): void;
199
+ protected resetState(): Promise<void>;
192
200
  /**
193
201
  * Returns the current selection as a list of commma separated values,
194
202
  * represented by the display key, when provided.
195
203
  */
196
204
  get value(): string;
205
+ protected updateValue(): Promise<void>;
197
206
  protected validate(): void;
198
207
  /** Checks the validity of the control. */
199
208
  reportValidity(): boolean;
@@ -203,18 +212,54 @@ export default class IgcComboComponent<T extends object> extends IgcComboCompone
203
212
  focus(options?: FocusOptions): void;
204
213
  /** Removes focus from the component. */
205
214
  blur(): void;
215
+ protected normalizeSelection(items?: Item<T> | Item<T>[]): Item<T>[];
206
216
  /**
207
- * Selects the options in the list by either value or key value.
217
+ * Selects option(s) in the list by either reference or valueKey.
208
218
  * If not argument is provided all items will be selected.
209
- * @param { T[] | Values<T>[] } items - A list of values or values as set by the valueKey.
219
+ * @param { Item<T> | Items<T> } items - One or more items to be selected. Multiple items should be passed as an array.
220
+ * When valueKey is specified, the corresponding value should be used in place of the item reference.
221
+ * @example
222
+ * ```typescript
223
+ * const combo<IgcComboComponent<T>> = document.querySelector('igc-combo');
224
+ *
225
+ * // Select one item at a time by reference when valueKey is not specified.
226
+ * combo.select(combo.data[0]);
227
+ *
228
+ * // Select multiple items at a time by reference when valueKey is not specified.
229
+ * combo.select([combo.data[0], combo.data[1]]);
230
+ *
231
+ * // Select one item at a time when valueKey is specified.
232
+ * combo.select('BG01');
233
+ *
234
+ * // Select multiple items at a time when valueKey is specified.
235
+ * combo.select(['BG01', 'BG02']);
236
+ * ```
210
237
  */
211
- select(items?: T[] | Values<T>[]): void;
238
+ select(items?: Item<T> | Item<T>[]): void;
212
239
  /**
213
- * Deselects the options in the list by either value or key value.
240
+ * Deselects option(s) in the list by either reference or valueKey.
214
241
  * If not argument is provided all items will be deselected.
215
- * @param { T[] | Values<T>[] } items - A list of values or values as set by the valueKey.
242
+ * @param { Item<T> | Items<T> } items - One or more items to be deselected. Multiple items should be passed as an array.
243
+ * When valueKey is specified, the corresponding value should be used in place of the item reference.
244
+ * @example
245
+ * ```typescript
246
+ * const combo<IgcComboComponent<T>> = document.querySelector('igc-combo');
247
+ *
248
+ * // Deselect one item at a time by reference when valueKey is not specified.
249
+ * combo.deselect(combo.data[0]);
250
+ *
251
+ * // Deselect multiple items at a time by reference when valueKey is not specified.
252
+ * combo.deselect([combo.data[0], combo.data[1]]);
253
+ *
254
+ * // Deselect one item at a time when valueKey is specified.
255
+ * combo.deselect('BG01');
256
+ *
257
+ * // Deselect multiple items at a time when valueKey is specified.
258
+ * combo.deselect(['BG01', 'BG02']);
259
+ * ```
216
260
  */
217
- deselect(items?: T[] | Values<T>[]): void;
261
+ deselect(items?: Item<T> | Item<T>[]): void;
262
+ protected handleMainInput(e: CustomEvent): Promise<void>;
218
263
  protected handleSearchInput(e: CustomEvent): void;
219
264
  protected handleOpening(): boolean;
220
265
  protected handleClosing(): boolean;
@@ -233,13 +278,16 @@ export default class IgcComboComponent<T extends object> extends IgcComboCompone
233
278
  protected itemClickHandler(event: MouseEvent): void;
234
279
  protected toggleSelect(index: number): void;
235
280
  protected navigateTo(item: T): void;
281
+ protected clearSingleSelection(): void;
236
282
  protected handleClearIconClick(e: MouseEvent): void;
283
+ protected handleMainInputKeydown(e: KeyboardEvent): void;
284
+ protected handleSearchInputKeydown(e: KeyboardEvent): void;
237
285
  protected toggleCaseSensitivity(): void;
238
286
  protected get hasPrefixes(): boolean;
239
287
  protected get hasSuffixes(): boolean;
240
288
  private renderToggleIcon;
241
289
  private renderClearIcon;
242
- private renderInput;
290
+ private renderMainInput;
243
291
  private renderSearchInput;
244
292
  private renderEmptyTemplate;
245
293
  private renderList;