@usecapsule/core-components 2.0.8 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (219) hide show
  1. package/css/capsule-core.css +54 -19
  2. package/css/capsule-core.css.map +1 -1
  3. package/dist/capsule/capsule.esm.js +1 -1
  4. package/dist/capsule/capsule.esm.js.map +1 -1
  5. package/dist/capsule/index.esm.js +1 -1
  6. package/dist/capsule/index.esm.js.map +1 -1
  7. package/dist/capsule/{p-415384b7.entry.js → p-0d0a0037.entry.js} +2 -2
  8. package/dist/capsule/p-4d8e4d86.entry.js +29 -0
  9. package/dist/capsule/p-4d8e4d86.entry.js.map +1 -0
  10. package/dist/capsule/p-86e48e61.js +3 -0
  11. package/dist/capsule/p-86e48e61.js.map +1 -0
  12. package/dist/capsule/p-ad14a817.entry.js +2 -0
  13. package/dist/capsule/p-b6b38e73.js +2 -0
  14. package/dist/capsule/p-b6b38e73.js.map +1 -0
  15. package/dist/capsule/p-d28b96ba.entry.js +10 -0
  16. package/dist/capsule/{p-b76350fd.entry.js.map → p-d28b96ba.entry.js.map} +1 -1
  17. package/dist/capsule/{p-4d957466.entry.js → p-fa078837.entry.js} +2 -2
  18. package/dist/capsule/{p-fa4e3c14.entry.js → p-fcead80b.entry.js} +2 -2
  19. package/dist/cjs/capsule.cjs.js +2 -2
  20. package/dist/cjs/constants-0869a780.js +29 -0
  21. package/dist/cjs/constants-0869a780.js.map +1 -0
  22. package/dist/cjs/{cpsl-alert_18.cjs.entry.js → cpsl-alert_29.cjs.entry.js} +605 -185
  23. package/dist/cjs/cpsl-alert_29.cjs.entry.js.map +1 -0
  24. package/dist/cjs/cpsl-animation.cjs.entry.js +2 -2
  25. package/dist/cjs/cpsl-col.cjs.entry.js +2 -2
  26. package/dist/cjs/cpsl-grid.cjs.entry.js +3 -3
  27. package/dist/cjs/cpsl-info-box.cjs.entry.js +2 -2
  28. package/dist/cjs/cpsl-row.cjs.entry.js +2 -2
  29. package/dist/cjs/{index-87ba56f9.js → index-5733071e.js} +6 -3
  30. package/dist/cjs/index-5733071e.js.map +1 -0
  31. package/dist/cjs/index.cjs.js +53 -24
  32. package/dist/cjs/index.cjs.js.map +1 -1
  33. package/dist/cjs/loader.cjs.js +2 -2
  34. package/dist/collection/assets/icons/check-circle.svg +3 -0
  35. package/dist/collection/assets/icons/home.svg +3 -0
  36. package/dist/collection/assets/icons/index.js +4 -1
  37. package/dist/collection/assets/icons/index.js.map +1 -1
  38. package/dist/collection/assets/icons/settings.svg +4 -0
  39. package/dist/collection/collection-manifest.json +11 -0
  40. package/dist/collection/components/cpsl-alert/cpsl-alert.css +21 -11
  41. package/dist/collection/components/cpsl-alert/cpsl-alert.js +34 -26
  42. package/dist/collection/components/cpsl-alert/cpsl-alert.js.map +1 -1
  43. package/dist/collection/components/cpsl-animation/cpsl-animation.js +1 -1
  44. package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.css +67 -0
  45. package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js +69 -0
  46. package/dist/collection/components/cpsl-app-bar/cpsl-app-bar.js.map +1 -0
  47. package/dist/collection/components/cpsl-app-bar/test/cpsl-app-bar.e2e.js +29 -0
  48. package/dist/collection/components/cpsl-app-bar/test/cpsl-app-bar.e2e.js.map +1 -0
  49. package/dist/collection/components/cpsl-app-bar/test/cpsl-app-bar.spec.js +37 -0
  50. package/dist/collection/components/cpsl-app-bar/test/cpsl-app-bar.spec.js.map +1 -0
  51. package/dist/collection/components/cpsl-avatar/cpsl-avatar.css +31 -0
  52. package/dist/collection/components/cpsl-avatar/cpsl-avatar.js +81 -0
  53. package/dist/collection/components/cpsl-avatar/cpsl-avatar.js.map +1 -0
  54. package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.e2e.js +29 -0
  55. package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.e2e.js.map +1 -0
  56. package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.spec.js +37 -0
  57. package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.spec.js.map +1 -0
  58. package/dist/collection/components/cpsl-button/cpsl-button.css +175 -51
  59. package/dist/collection/components/cpsl-button/cpsl-button.js +46 -5
  60. package/dist/collection/components/cpsl-button/cpsl-button.js.map +1 -1
  61. package/dist/collection/components/cpsl-button-group/cpsl-button-group.css +88 -0
  62. package/dist/collection/components/cpsl-button-group/cpsl-button-group.js +78 -0
  63. package/dist/collection/components/cpsl-button-group/cpsl-button-group.js.map +1 -0
  64. package/dist/collection/components/cpsl-button-group/test/cpsl-button-group.e2e.js +29 -0
  65. package/dist/collection/components/cpsl-button-group/test/cpsl-button-group.e2e.js.map +1 -0
  66. package/dist/collection/components/cpsl-button-group/test/cpsl-button-group.spec.js +37 -0
  67. package/dist/collection/components/cpsl-button-group/test/cpsl-button-group.spec.js.map +1 -0
  68. package/dist/collection/components/cpsl-card/cpsl-card.css +81 -0
  69. package/dist/collection/components/cpsl-card/cpsl-card.js +19 -0
  70. package/dist/collection/components/cpsl-card/cpsl-card.js.map +1 -0
  71. package/dist/collection/components/cpsl-card/test/cpsl-card.e2e.js +29 -0
  72. package/dist/collection/components/cpsl-card/test/cpsl-card.e2e.js.map +1 -0
  73. package/dist/collection/components/cpsl-card/test/cpsl-card.spec.js +37 -0
  74. package/dist/collection/components/cpsl-card/test/cpsl-card.spec.js.map +1 -0
  75. package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.css +110 -0
  76. package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.js +64 -0
  77. package/dist/collection/components/cpsl-checkbox/cpsl-checkbox.js.map +1 -0
  78. package/dist/collection/components/cpsl-checkbox/test/cpsl-checkbox.e2e.js +29 -0
  79. package/dist/collection/components/cpsl-checkbox/test/cpsl-checkbox.e2e.js.map +1 -0
  80. package/dist/collection/components/cpsl-checkbox/test/cpsl-checkbox.spec.js +37 -0
  81. package/dist/collection/components/cpsl-checkbox/test/cpsl-checkbox.spec.js.map +1 -0
  82. package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +1 -1
  83. package/dist/collection/components/cpsl-col/cpsl-col.js +1 -1
  84. package/dist/collection/components/cpsl-divider/cpsl-divider.js +1 -1
  85. package/dist/collection/components/cpsl-drawer/cpsl-drawer.css +90 -0
  86. package/dist/collection/components/cpsl-drawer/cpsl-drawer.js +149 -0
  87. package/dist/collection/components/cpsl-drawer/cpsl-drawer.js.map +1 -0
  88. package/dist/collection/components/cpsl-drawer/test/cpsl-drawer.e2e.js +29 -0
  89. package/dist/collection/components/cpsl-drawer/test/cpsl-drawer.e2e.js.map +1 -0
  90. package/dist/collection/components/cpsl-drawer/test/cpsl-drawer.spec.js +37 -0
  91. package/dist/collection/components/cpsl-drawer/test/cpsl-drawer.spec.js.map +1 -0
  92. package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +8 -1
  93. package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -1
  94. package/dist/collection/components/cpsl-grid/cpsl-grid.js +2 -2
  95. package/dist/collection/components/cpsl-icon/cpsl-icon.js +2 -2
  96. package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
  97. package/dist/collection/components/cpsl-input/cpsl-input.css +35 -19
  98. package/dist/collection/components/cpsl-input/cpsl-input.js +47 -6
  99. package/dist/collection/components/cpsl-input/cpsl-input.js.map +1 -1
  100. package/dist/collection/components/cpsl-modal/cpsl-modal.css +12 -2
  101. package/dist/collection/components/cpsl-modal/cpsl-modal.js +20 -2
  102. package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
  103. package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.css +50 -0
  104. package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js +78 -0
  105. package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js.map +1 -0
  106. package/dist/collection/components/cpsl-nav-button-group/test/cpsl-nav-button-group.e2e.js +29 -0
  107. package/dist/collection/components/cpsl-nav-button-group/test/cpsl-nav-button-group.e2e.js.map +1 -0
  108. package/dist/collection/components/cpsl-nav-button-group/test/cpsl-nav-button-group.spec.js +37 -0
  109. package/dist/collection/components/cpsl-nav-button-group/test/cpsl-nav-button-group.spec.js.map +1 -0
  110. package/dist/collection/components/cpsl-overlay/cpsl-overlay.css +61 -3
  111. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +35 -17
  112. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js.map +1 -1
  113. package/dist/collection/components/cpsl-pagination/cpsl-pagination.css +67 -0
  114. package/dist/collection/components/cpsl-pagination/cpsl-pagination.js +174 -0
  115. package/dist/collection/components/cpsl-pagination/cpsl-pagination.js.map +1 -0
  116. package/dist/collection/components/cpsl-pagination/test/cpsl-pagination.e2e.js +29 -0
  117. package/dist/collection/components/cpsl-pagination/test/cpsl-pagination.e2e.js.map +1 -0
  118. package/dist/collection/components/cpsl-pagination/test/cpsl-pagination.spec.js +37 -0
  119. package/dist/collection/components/cpsl-pagination/test/cpsl-pagination.spec.js.map +1 -0
  120. package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
  121. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
  122. package/dist/collection/components/cpsl-radio/cpsl-radio.css +97 -0
  123. package/dist/collection/components/cpsl-radio/cpsl-radio.js +66 -0
  124. package/dist/collection/components/cpsl-radio/cpsl-radio.js.map +1 -0
  125. package/dist/collection/components/cpsl-radio/test/cpsl-radio.e2e.js +29 -0
  126. package/dist/collection/components/cpsl-radio/test/cpsl-radio.e2e.js.map +1 -0
  127. package/dist/collection/components/cpsl-radio/test/cpsl-radio.spec.js +37 -0
  128. package/dist/collection/components/cpsl-radio/test/cpsl-radio.spec.js.map +1 -0
  129. package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
  130. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +3 -3
  131. package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
  132. package/dist/collection/components/cpsl-switch/cpsl-switch.css +115 -0
  133. package/dist/collection/components/cpsl-switch/cpsl-switch.js +64 -0
  134. package/dist/collection/components/cpsl-switch/cpsl-switch.js.map +1 -0
  135. package/dist/collection/components/cpsl-switch/test/cpsl-switch.e2e.js +29 -0
  136. package/dist/collection/components/cpsl-switch/test/cpsl-switch.e2e.js.map +1 -0
  137. package/dist/collection/components/cpsl-switch/test/cpsl-switch.spec.js +37 -0
  138. package/dist/collection/components/cpsl-switch/test/cpsl-switch.spec.js.map +1 -0
  139. package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
  140. package/dist/collection/components/cpsl-table/cpsl-table.css +179 -0
  141. package/dist/collection/components/cpsl-table/cpsl-table.js +88 -0
  142. package/dist/collection/components/cpsl-table/cpsl-table.js.map +1 -0
  143. package/dist/collection/components/cpsl-table/table-interface.js +2 -0
  144. package/dist/collection/components/cpsl-table/table-interface.js.map +1 -0
  145. package/dist/collection/components/cpsl-table/test/cpsl-table.e2e.js +29 -0
  146. package/dist/collection/components/cpsl-table/test/cpsl-table.e2e.js.map +1 -0
  147. package/dist/collection/components/cpsl-table/test/cpsl-table.spec.js +37 -0
  148. package/dist/collection/components/cpsl-table/test/cpsl-table.spec.js.map +1 -0
  149. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -1
  150. package/dist/collection/components/cpsl-text/cpsl-text.js +1 -1
  151. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
  152. package/dist/collection/constants.js +14 -0
  153. package/dist/collection/constants.js.map +1 -1
  154. package/dist/collection/interface.js.map +1 -1
  155. package/dist/collection/utils/theme/generateBorderRadii.js +24 -7
  156. package/dist/collection/utils/theme/generateBorderRadii.js.map +1 -1
  157. package/dist/collection/utils/theme/generatePalette.js +22 -18
  158. package/dist/collection/utils/theme/generatePalette.js.map +1 -1
  159. package/dist/collection/utils/theme/utils.js +8 -0
  160. package/dist/collection/utils/theme/utils.js.map +1 -1
  161. package/dist/esm/capsule.js +3 -3
  162. package/dist/esm/constants-6acf4ea8.js +23 -0
  163. package/dist/esm/constants-6acf4ea8.js.map +1 -0
  164. package/dist/esm/{cpsl-alert_18.entry.js → cpsl-alert_29.entry.js} +595 -186
  165. package/dist/esm/cpsl-alert_29.entry.js.map +1 -0
  166. package/dist/esm/cpsl-animation.entry.js +2 -2
  167. package/dist/esm/cpsl-col.entry.js +2 -2
  168. package/dist/esm/cpsl-grid.entry.js +3 -3
  169. package/dist/esm/cpsl-info-box.entry.js +2 -2
  170. package/dist/esm/cpsl-row.entry.js +2 -2
  171. package/dist/esm/{index-fd970ca2.js → index-8fe9f35e.js} +6 -3
  172. package/dist/esm/index-8fe9f35e.js.map +1 -0
  173. package/dist/esm/index.js +53 -24
  174. package/dist/esm/index.js.map +1 -1
  175. package/dist/esm/loader.js +3 -3
  176. package/dist/types/assets/icons/index.d.ts +3 -0
  177. package/dist/types/components/cpsl-alert/cpsl-alert.d.ts +2 -2
  178. package/dist/types/components/cpsl-app-bar/cpsl-app-bar.d.ts +5 -0
  179. package/dist/types/components/cpsl-avatar/cpsl-avatar.d.ts +6 -0
  180. package/dist/types/components/cpsl-button/cpsl-button.d.ts +2 -0
  181. package/dist/types/components/cpsl-button-group/cpsl-button-group.d.ts +9 -0
  182. package/dist/types/components/cpsl-card/cpsl-card.d.ts +3 -0
  183. package/dist/types/components/cpsl-checkbox/cpsl-checkbox.d.ts +7 -0
  184. package/dist/types/components/cpsl-drawer/cpsl-drawer.d.ts +9 -0
  185. package/dist/types/components/cpsl-input/cpsl-input.d.ts +4 -0
  186. package/dist/types/components/cpsl-modal/cpsl-modal.d.ts +1 -0
  187. package/dist/types/components/cpsl-nav-button-group/cpsl-nav-button-group.d.ts +9 -0
  188. package/dist/types/components/cpsl-overlay/cpsl-overlay.d.ts +2 -1
  189. package/dist/types/components/cpsl-pagination/cpsl-pagination.d.ts +14 -0
  190. package/dist/types/components/cpsl-radio/cpsl-radio.d.ts +7 -0
  191. package/dist/types/components/cpsl-switch/cpsl-switch.d.ts +7 -0
  192. package/dist/types/components/cpsl-table/cpsl-table.d.ts +9 -0
  193. package/dist/types/components/cpsl-table/table-interface.d.ts +19 -0
  194. package/dist/types/components.d.ts +435 -6
  195. package/dist/types/constants.d.ts +14 -0
  196. package/dist/types/interface.d.ts +35 -0
  197. package/dist/types/utils/theme/utils.d.ts +1 -0
  198. package/package.json +3 -2
  199. package/dist/capsule/p-6b02ea8d.entry.js +0 -2
  200. package/dist/capsule/p-b2997f3c.js +0 -3
  201. package/dist/capsule/p-b2997f3c.js.map +0 -1
  202. package/dist/capsule/p-b76350fd.entry.js +0 -10
  203. package/dist/capsule/p-c2bf050b.js +0 -2
  204. package/dist/capsule/p-c2bf050b.js.map +0 -1
  205. package/dist/capsule/p-f2af4351.entry.js +0 -29
  206. package/dist/capsule/p-f2af4351.entry.js.map +0 -1
  207. package/dist/cjs/constants-4bb85cc5.js +0 -12
  208. package/dist/cjs/constants-4bb85cc5.js.map +0 -1
  209. package/dist/cjs/cpsl-alert_18.cjs.entry.js.map +0 -1
  210. package/dist/cjs/index-87ba56f9.js.map +0 -1
  211. package/dist/esm/constants-7b49abd5.js +0 -9
  212. package/dist/esm/constants-7b49abd5.js.map +0 -1
  213. package/dist/esm/cpsl-alert_18.entry.js.map +0 -1
  214. package/dist/esm/index-fd970ca2.js.map +0 -1
  215. /package/dist/capsule/{p-415384b7.entry.js.map → p-0d0a0037.entry.js.map} +0 -0
  216. /package/dist/capsule/{p-6b02ea8d.entry.js.map → p-ad14a817.entry.js.map} +0 -0
  217. /package/dist/capsule/{p-4d957466.entry.js.map → p-fa078837.entry.js.map} +0 -0
  218. /package/dist/capsule/{p-fa4e3c14.entry.js.map → p-fcead80b.entry.js.map} +0 -0
  219. /package/dist/types/Users/{vinay → taylorbosch}/Documents/GitHub/Capsule/component-library/core/.stencil/scripts/buildIconLibrary.d.ts +0 -0
@@ -0,0 +1,37 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try {
5
+ step(generator.next(value));
6
+ }
7
+ catch (e) {
8
+ reject(e);
9
+ } }
10
+ function rejected(value) { try {
11
+ step(generator["throw"](value));
12
+ }
13
+ catch (e) {
14
+ reject(e);
15
+ } }
16
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
17
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
18
+ });
19
+ };
20
+ import { newSpecPage } from "@stencil/core/testing";
21
+ import { CpslCheckbox } from "../cpsl-checkbox";
22
+ describe('cpsl-checkbox', () => {
23
+ it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
24
+ const page = yield newSpecPage({
25
+ components: [CpslCheckbox],
26
+ html: `<cpsl-checkbox></cpsl-checkbox>`,
27
+ });
28
+ expect(page.root).toEqualHtml(`
29
+ <cpsl-checkbox>
30
+ <mock:shadow-root>
31
+ <slot></slot>
32
+ </mock:shadow-root>
33
+ </cpsl-checkbox>
34
+ `);
35
+ }));
36
+ });
37
+ //# sourceMappingURL=cpsl-checkbox.spec.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cpsl-checkbox.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-checkbox/test/cpsl-checkbox.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,iCAAiC;SACxC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslCheckbox } from '../cpsl-checkbox';\n\ndescribe('cpsl-checkbox', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [CpslCheckbox],\n html: `<cpsl-checkbox></cpsl-checkbox>`,\n });\n expect(page.root).toEqualHtml(`\n <cpsl-checkbox>\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n </cpsl-checkbox>\n `);\n });\n});\n"]}
@@ -87,7 +87,7 @@ export class CpslCodeInput {
87
87
  }
88
88
  render() {
89
89
  var _a;
90
- return (h(Host, { key: 'a71927ad671c9bcea55951797bb22fcede118d59' }, h("div", { key: '033281ae8250377ee175112f6428f412eaa339f5', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
90
+ return (h(Host, { key: '2f52778c8b8b51ef7c875b53394e7275bd93412f' }, h("div", { key: 'e96c3deea7d1e4eaaef4c72fbaca702b6bb46cf1', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
91
91
  var _a;
92
92
  return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
93
93
  })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
@@ -89,7 +89,7 @@ export class CpslCol {
89
89
  }
90
90
  render() {
91
91
  const isRTL = document.dir === 'rtl';
92
- return (h(Host, { key: 'fdb8a99b8b9225949b4eea931277e461efac29eb', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '0976c09d835a37413455f787596a75eafc1db14f' })));
92
+ return (h(Host, { key: 'e883138d5be5bfcffaa61fc3f440cfaf3c2c567d', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '51c74a5a0895f34074b65441be91f02c3243ba8c' })));
93
93
  }
94
94
  static get is() { return "cpsl-col"; }
95
95
  static get encapsulation() { return "shadow"; }
@@ -1,7 +1,7 @@
1
1
  import { Host, h } from "@stencil/core";
2
2
  export class CpslDivider {
3
3
  render() {
4
- return (h(Host, { key: '7b35806d55027d32c6f8c0e5cfcaef46f35ebd68' }, h("div", { key: '5af8157b329cfd491256537c267adbe3e15c8914' }), h("slot", { key: '913734d72f49bc1092f447326710223eb85f901e' }), h("div", { key: '47b8c8569f8e43a830bfb84636faca0df7b7e7df' })));
4
+ return (h(Host, { key: '1ed13a5022a89b899e6a16f168bff6b71c3c2ad8' }, h("div", { key: 'e9fec054de82d84298ac7cf7fc45f239a9a78442' }), h("slot", { key: 'c6ab3f0e787ee245d206b300c68192bfb3515aa6' }), h("div", { key: '5591e16b69c4cdce5cd5b9932923a189440b7fd5' })));
5
5
  }
6
6
  static get is() { return "cpsl-divider"; }
7
7
  static get encapsulation() { return "shadow"; }
@@ -0,0 +1,90 @@
1
+ /**
2
+ * Convert a font size to a dynamic font size.
3
+ * Fonts that participate in Dynamic Type should use
4
+ * dynamic font sizes.
5
+ * @param size - The initial font size including the unit (i.e. px or pt)
6
+ * @param unit (optional) - The unit to convert to. Use this if you want to
7
+ * convert to a unit other than $baselineUnit.
8
+ */
9
+ /**
10
+ * Convert a font size to a dynamic font size but impose
11
+ * a maximum font size.
12
+ * @param size - The initial font size including the unit (i.e. px or pt)
13
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
14
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
15
+ * convert to a unit other than $baselineUnit.
16
+ */
17
+ /**
18
+ * Convert a font size to a dynamic font size but impose
19
+ * a minimum font size.
20
+ * @param size - The initial font size including the unit (i.e. px or pt)
21
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
22
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
23
+ * convert to a unit other than $baselineUnit.
24
+ */
25
+ /**
26
+ * Convert a font size to a dynamic font size but impose
27
+ * maximum and minimum font sizes.
28
+ * @param size - The initial font size including the unit (i.e. px or pt)
29
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
30
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
31
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
32
+ * convert to a unit other than $baselineUnit.
33
+ */
34
+ /**
35
+ * A heuristic that applies CSS to tablet
36
+ * viewports.
37
+ *
38
+ * Usage:
39
+ * @include tablet-viewport() {
40
+ * :host {
41
+ * background-color: green;
42
+ * }
43
+ * }
44
+ */
45
+ /**
46
+ * A heuristic that applies CSS to mobile
47
+ * viewports (i.e. phones, not tablets).
48
+ *
49
+ * Usage:
50
+ * @include mobile-viewport() {
51
+ * :host {
52
+ * background-color: blue;
53
+ * }
54
+ * }
55
+ */
56
+ :host {
57
+ display: flex;
58
+ position: fixed;
59
+ z-index: 10004;
60
+ }
61
+
62
+ :host(.left) {
63
+ left: 0;
64
+ top: 0;
65
+ transition: left;
66
+ }
67
+
68
+ :host(.right) {
69
+ right: 0;
70
+ top: 0;
71
+ transition: right;
72
+ }
73
+
74
+ :host(.top) {
75
+ top: 0;
76
+ left: 0;
77
+ transition: top;
78
+ }
79
+
80
+ :host(.bottom) {
81
+ bottom: 0;
82
+ left: 0;
83
+ transition: bottom;
84
+ }
85
+
86
+ .container {
87
+ flex: 1;
88
+ overflow: auto;
89
+ z-index: 10004;
90
+ }
@@ -0,0 +1,149 @@
1
+ import { Host, h } from "@stencil/core";
2
+ import { DEFAULT_Z_INDICES } from "../../constants";
3
+ export class CpslDrawer {
4
+ constructor() {
5
+ this.anchor = undefined;
6
+ this.open = undefined;
7
+ this.size = undefined;
8
+ this.transitionDuration = 0.15;
9
+ this.transitionFunction = 'ease-in-out';
10
+ this.variant = 'temporary';
11
+ }
12
+ render() {
13
+ const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
14
+ return (h(Host, { key: '14b5f63f68d3e543b9b2b2f8e7fcbe24222ceb7a', style: {
15
+ width: setHeight ? '100vw' : `${this.size}px`,
16
+ height: setHeight ? `${this.size}px` : '100vh',
17
+ transitionDuration: `${this.transitionDuration}s`,
18
+ transitionTimingFunction: `${this.transitionFunction}`,
19
+ [this.anchor]: this.open || this.variant === 'permanent' ? '0px' : `-${this.size}px`,
20
+ }, class: {
21
+ top: this.anchor === 'top',
22
+ bottom: this.anchor === 'bottom',
23
+ left: this.anchor === 'left',
24
+ right: this.anchor === 'right',
25
+ } }, this.variant === 'temporary' && h("cpsl-overlay", { open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: '9877dd496d8a055a84ca81d7bf5b3a425b45e473', class: "container", part: "container" }, h("slot", { key: 'b02a97fc7f1fb6fe5f0a8fb45dbf7709977c2c3b' }))));
26
+ }
27
+ static get is() { return "cpsl-drawer"; }
28
+ static get encapsulation() { return "shadow"; }
29
+ static get originalStyleUrls() {
30
+ return {
31
+ "$": ["cpsl-drawer.scss"]
32
+ };
33
+ }
34
+ static get styleUrls() {
35
+ return {
36
+ "$": ["cpsl-drawer.css"]
37
+ };
38
+ }
39
+ static get properties() {
40
+ return {
41
+ "anchor": {
42
+ "type": "string",
43
+ "mutable": false,
44
+ "complexType": {
45
+ "original": "'top' | 'bottom' | 'left' | 'right'",
46
+ "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
47
+ "references": {}
48
+ },
49
+ "required": false,
50
+ "optional": false,
51
+ "docs": {
52
+ "tags": [],
53
+ "text": "Side from which the drawer will enter from."
54
+ },
55
+ "attribute": "anchor",
56
+ "reflect": false
57
+ },
58
+ "open": {
59
+ "type": "boolean",
60
+ "mutable": false,
61
+ "complexType": {
62
+ "original": "boolean",
63
+ "resolved": "boolean",
64
+ "references": {}
65
+ },
66
+ "required": false,
67
+ "optional": false,
68
+ "docs": {
69
+ "tags": [],
70
+ "text": "Whether the drawer is open or not."
71
+ },
72
+ "attribute": "open",
73
+ "reflect": false
74
+ },
75
+ "size": {
76
+ "type": "number",
77
+ "mutable": false,
78
+ "complexType": {
79
+ "original": "number",
80
+ "resolved": "number",
81
+ "references": {}
82
+ },
83
+ "required": false,
84
+ "optional": false,
85
+ "docs": {
86
+ "tags": [],
87
+ "text": "Size (height or width) of the drawer."
88
+ },
89
+ "attribute": "size",
90
+ "reflect": false
91
+ },
92
+ "transitionDuration": {
93
+ "type": "number",
94
+ "mutable": false,
95
+ "complexType": {
96
+ "original": "number",
97
+ "resolved": "number",
98
+ "references": {}
99
+ },
100
+ "required": false,
101
+ "optional": true,
102
+ "docs": {
103
+ "tags": [],
104
+ "text": "Duration in seconds of the open/close animation.\nDefault is 0.15."
105
+ },
106
+ "attribute": "transition-duration",
107
+ "reflect": false,
108
+ "defaultValue": "0.15"
109
+ },
110
+ "transitionFunction": {
111
+ "type": "string",
112
+ "mutable": false,
113
+ "complexType": {
114
+ "original": "string",
115
+ "resolved": "string",
116
+ "references": {}
117
+ },
118
+ "required": false,
119
+ "optional": true,
120
+ "docs": {
121
+ "tags": [],
122
+ "text": "Transition timing function to use.\nDefault is ease-in-out."
123
+ },
124
+ "attribute": "transition-function",
125
+ "reflect": false,
126
+ "defaultValue": "'ease-in-out'"
127
+ },
128
+ "variant": {
129
+ "type": "string",
130
+ "mutable": false,
131
+ "complexType": {
132
+ "original": "'temporary' | 'permanent'",
133
+ "resolved": "\"permanent\" | \"temporary\"",
134
+ "references": {}
135
+ },
136
+ "required": false,
137
+ "optional": true,
138
+ "docs": {
139
+ "tags": [],
140
+ "text": "The variant of the drawer.\n`temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation.\nDefault is `temporary`."
141
+ },
142
+ "attribute": "variant",
143
+ "reflect": false,
144
+ "defaultValue": "'temporary'"
145
+ }
146
+ };
147
+ }
148
+ }
149
+ //# sourceMappingURL=cpsl-drawer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cpsl-drawer.js","sourceRoot":"","sources":["../../../../src/components/cpsl-drawer/cpsl-drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOpD,MAAM,OAAO,UAAU;;;;;kCAoBiB,IAAI;kCAMJ,aAAa;uBAOL,WAAW;;IAEzD,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;QAEpE,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI;gBAC7C,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO;gBAC9C,kBAAkB,EAAE,GAAG,IAAI,CAAC,kBAAkB,GAAG;gBACjD,wBAAwB,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE;gBACtD,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI;aACrF,EACD,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,KAAK;gBAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;gBAChC,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;gBAC5B,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;aAC/B;YAEA,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,oBAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,iBAAiB,CAAC,KAAK,GAAG,CAAC,GAAI;YAC/G,4DAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW;gBACrC,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { DEFAULT_Z_INDICES } from '../../constants';\n\n@Component({\n tag: 'cpsl-drawer',\n styleUrl: 'cpsl-drawer.scss',\n shadow: true,\n})\nexport class CpslDrawer {\n /**\n * Side from which the drawer will enter from.\n */\n @Prop() anchor: 'top' | 'bottom' | 'left' | 'right';\n\n /**\n * Whether the drawer is open or not.\n */\n @Prop() open: boolean;\n\n /**\n * Size (height or width) of the drawer.\n */\n @Prop() size: number;\n\n /**\n * Duration in seconds of the open/close animation.\n * Default is 0.15.\n */\n @Prop() transitionDuration?: number = 0.15;\n\n /**\n * Transition timing function to use.\n * Default is ease-in-out.\n */\n @Prop() transitionFunction?: string = 'ease-in-out';\n\n /**\n * The variant of the drawer.\n * `temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation.\n * Default is `temporary`.\n */\n @Prop() variant?: 'temporary' | 'permanent' = 'temporary';\n\n render() {\n const setHeight = this.anchor === 'top' || this.anchor === 'bottom';\n\n return (\n <Host\n style={{\n width: setHeight ? '100vw' : `${this.size}px`,\n height: setHeight ? `${this.size}px` : '100vh',\n transitionDuration: `${this.transitionDuration}s`,\n transitionTimingFunction: `${this.transitionFunction}`,\n [this.anchor]: this.open || this.variant === 'permanent' ? '0px' : `-${this.size}px`,\n }}\n class={{\n top: this.anchor === 'top',\n bottom: this.anchor === 'bottom',\n left: this.anchor === 'left',\n right: this.anchor === 'right',\n }}\n >\n {this.variant === 'temporary' && <cpsl-overlay open={this.open} zIndexOverride={DEFAULT_Z_INDICES.modal + 1} />}\n <div class=\"container\" part=\"container\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,29 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try {
5
+ step(generator.next(value));
6
+ }
7
+ catch (e) {
8
+ reject(e);
9
+ } }
10
+ function rejected(value) { try {
11
+ step(generator["throw"](value));
12
+ }
13
+ catch (e) {
14
+ reject(e);
15
+ } }
16
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
17
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
18
+ });
19
+ };
20
+ import { newE2EPage } from "@stencil/core/testing";
21
+ describe('cpsl-drawer', () => {
22
+ it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
23
+ const page = yield newE2EPage();
24
+ yield page.setContent('<cpsl-drawer></cpsl-drawer>');
25
+ const element = yield page.find('cpsl-drawer');
26
+ expect(element).toHaveClass('hydrated');
27
+ }));
28
+ });
29
+ //# sourceMappingURL=cpsl-drawer.e2e.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cpsl-drawer.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-drawer/test/cpsl-drawer.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,6BAA6B,CAAC,CAAC;QAErD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC/C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-drawer', () => {\n it('renders', async () => {\n const page = await newE2EPage();\n await page.setContent('<cpsl-drawer></cpsl-drawer>');\n\n const element = await page.find('cpsl-drawer');\n expect(element).toHaveClass('hydrated');\n });\n});\n"]}
@@ -0,0 +1,37 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try {
5
+ step(generator.next(value));
6
+ }
7
+ catch (e) {
8
+ reject(e);
9
+ } }
10
+ function rejected(value) { try {
11
+ step(generator["throw"](value));
12
+ }
13
+ catch (e) {
14
+ reject(e);
15
+ } }
16
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
17
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
18
+ });
19
+ };
20
+ import { newSpecPage } from "@stencil/core/testing";
21
+ import { CpslDrawer } from "../cpsl-drawer";
22
+ describe('cpsl-drawer', () => {
23
+ it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
24
+ const page = yield newSpecPage({
25
+ components: [CpslDrawer],
26
+ html: `<cpsl-drawer></cpsl-drawer>`,
27
+ });
28
+ expect(page.root).toEqualHtml(`
29
+ <cpsl-drawer>
30
+ <mock:shadow-root>
31
+ <slot></slot>
32
+ </mock:shadow-root>
33
+ </cpsl-drawer>
34
+ `);
35
+ }));
36
+ });
37
+ //# sourceMappingURL=cpsl-drawer.spec.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cpsl-drawer.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-drawer/test/cpsl-drawer.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,6BAA6B;SACpC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslDrawer } from '../cpsl-drawer';\n\ndescribe('cpsl-drawer', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [CpslDrawer],\n html: `<cpsl-drawer></cpsl-drawer>`,\n });\n expect(page.root).toEqualHtml(`\n <cpsl-drawer>\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n </cpsl-drawer>\n `);\n });\n});\n"]}
@@ -56,10 +56,17 @@ export class CpslDropdown {
56
56
  var _a;
57
57
  const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
58
58
  const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
59
+ const searchBar = this.el.shadowRoot.querySelector('.search-bar');
59
60
  const viewportHeight = window.innerHeight;
60
61
  if (parentRect) {
61
62
  this.width = `${parentRect.width}px`;
62
63
  dropdownOptions.style.left = `${parentRect.x}px`;
64
+ if (window.innerWidth <= 480) {
65
+ searchBar.style.maxHeight = `30px`;
66
+ dropdownOptions.style.top = `425px`;
67
+ dropdownOptions.style.maxHeight = '110px';
68
+ return;
69
+ }
63
70
  dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
64
71
  const availableHeight = viewportHeight - parentRect.bottom;
65
72
  dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
@@ -87,7 +94,7 @@ export class CpslDropdown {
87
94
  }
88
95
  render() {
89
96
  var _a, _b, _c;
90
- return (h(Host, { key: '93306d21ee902e6d21089a161bef7955e01ab2a1', style: { width: this.width } }, h("button", { key: 'de614383df91a5684e165f0c3a455c35686fe6de', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'd972fade95a22889977066c652ac3b092d8add58', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'd98ac4916d595f13f1126cc912eeaf337cdc7582', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { class: "search-bar" }, h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
97
+ return (h(Host, { key: '65a2ad9d39aa2b234814128f565d1d0024f7b356', style: { width: this.width } }, h("button", { key: '15cf331bd42c8ef8812d699f43f01f234f24e6b4', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '1259100020d7726980b14ae655377fda6321de39', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '78fd5bece65d9264cb76bae4c1512489747dc2e1', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { class: "search-bar" }, h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
91
98
  }
92
99
  static get is() { return "cpsl-dropdown"; }
93
100
  static get encapsulation() { return "shadow"; }
@@ -1 +1 @@
1
- {"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch, Listen, EventEmitter, Event } from '@stencil/core';\nimport { Icons } from '../../assets/icons';\nimport { DropdownInputEventDetail } from './dropdown-interface';\n\n@Component({\n tag: 'cpsl-dropdown',\n styleUrl: 'cpsl-dropdown.scss',\n shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n @Element() el: HTMLCpslDropdownElement;\n\n /**\n * Width of the dropdown\n */\n @Prop() width: string = '100%';\n\n /**\n * Whether or not to include search capability\n */\n @Prop() hasCpslSearch: boolean = false;\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: Array<DropdownInputEventDetail> = [];\n\n /**\n * Items to be presented in the dropdown\n */\n @Prop() items: Array<DropdownInputEventDetail> = [];\n\n /**\n * The selected item in the dropdown\n */\n @Prop({ mutable: true }) selectedItem?: DropdownInputEventDetail | null = null;\n\n /**\n * Event emitted when the selected item changes\n */\n @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n @Watch('selectedItem')\n handleSelectedItemChange(newValue: DropdownInputEventDetail | null) {\n if (newValue !== null) {\n this.selectItem(newValue, false);\n }\n }\n\n private toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n private selectItem = (item: DropdownInputEventDetail, emitEvent: boolean = true) => {\n this.selectedItem = item;\n this.isOpen = false;\n if (emitEvent) {\n this.selectedItemChange.emit(this.selectedItem);\n }\n };\n\n private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n this.selectItem(item);\n };\n\n private handleSearchQueryChange = (event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n this.searchQuery = target.value;\n this.filteredItems = this.items.filter(item =>\n item.label.toLowerCase().includes(this.searchQuery.toLowerCase())\n );\n };\n\n @Watch('isOpen')\n handleOpenChange() {\n if (this.isOpen) {\n this.adjustPosition();\n this.addClickOutsideListener();\n } else {\n this.removeClickOutsideListener();\n }\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n if (this.isOpen) {\n this.adjustPosition();\n }\n }\n\n private adjustPosition() {\n const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n const parentRect = this.el.parentElement?.getBoundingClientRect();\n const viewportHeight = window.innerHeight;\n\n if (parentRect) {\n this.width = `${parentRect.width}px`;\n dropdownOptions.style.left = `${parentRect.x}px`;\n dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n const availableHeight = viewportHeight - parentRect.bottom;\n dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;\n }\n }\n\n private addClickOutsideListener() {\n window.addEventListener('click', this.handleClickOutside);\n }\n\n private removeClickOutsideListener() {\n window.removeEventListener('click', this.handleClickOutside);\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.isOpen && !this.el.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n componentWillLoad() {\n if (this.items.length > 0) {\n this.filteredItems = [...this.items];\n if (this.selectedItem !== null) {\n this.selectItem(this.selectedItem, false);\n } else {\n this.selectedItem = this.items[0];\n }\n }\n }\n\n disconnectedCallback() {\n this.removeClickOutsideListener();\n }\n\n render() {\n return (\n <Host style={{ width: this.width }}>\n <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n {`${this.selectedItem?.selectedLabel || this.selectedItem?.label} ${this.selectedItem?.value}`}\n <div class={`chevron ${this.isOpen ? '' : 'closed'}`} innerHTML={Icons['chevronUp']} />\n </button>\n <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n {this.hasCpslSearch && (\n <li class=\"search-bar\">\n <input\n type=\"text\"\n placeholder=\"Search...\"\n value={this.searchQuery}\n onInput={this.handleSearchQueryChange}\n />\n </li>\n )}\n {this.filteredItems.map(item =>\n <li onClick={this.handleItemSelect(item)}>\n <span innerHTML={Icons[item.icon]}></span>\n {item.label} <span class=\"dropdown-value\">{item.value}</span>\n </li>\n )}\n </ul>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"cpsl-dropdown.js","sourceRoot":"","sources":["../../../../src/components/cpsl-dropdown/cpsl-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, ComponentInterface, Watch, Listen, EventEmitter, Event } from '@stencil/core';\nimport { Icons } from '../../assets/icons';\nimport { DropdownInputEventDetail } from './dropdown-interface';\n\n@Component({\n tag: 'cpsl-dropdown',\n styleUrl: 'cpsl-dropdown.scss',\n shadow: true,\n})\nexport class CpslDropdown implements ComponentInterface {\n @Element() el: HTMLCpslDropdownElement;\n\n /**\n * Width of the dropdown\n */\n @Prop() width: string = '100%';\n\n /**\n * Whether or not to include search capability\n */\n @Prop() hasCpslSearch: boolean = false;\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: Array<DropdownInputEventDetail> = [];\n\n /**\n * Items to be presented in the dropdown\n */\n @Prop() items: Array<DropdownInputEventDetail> = [];\n\n /**\n * The selected item in the dropdown\n */\n @Prop({ mutable: true }) selectedItem?: DropdownInputEventDetail | null = null;\n\n /**\n * Event emitted when the selected item changes\n */\n @Event() selectedItemChange!: EventEmitter<DropdownInputEventDetail>;\n\n @Watch('selectedItem')\n handleSelectedItemChange(newValue: DropdownInputEventDetail | null) {\n if (newValue !== null) {\n this.selectItem(newValue, false);\n }\n }\n\n private toggleDropdown = () => {\n this.isOpen = !this.isOpen;\n };\n\n private selectItem = (item: DropdownInputEventDetail, emitEvent: boolean = true) => {\n this.selectedItem = item;\n this.isOpen = false;\n if (emitEvent) {\n this.selectedItemChange.emit(this.selectedItem);\n }\n };\n\n private handleItemSelect = (item: DropdownInputEventDetail) => () => {\n this.selectItem(item);\n };\n\n private handleSearchQueryChange = (event: InputEvent) => {\n const target = event.target as HTMLInputElement;\n this.searchQuery = target.value;\n this.filteredItems = this.items.filter(item =>\n item.label.toLowerCase().includes(this.searchQuery.toLowerCase())\n );\n };\n\n @Watch('isOpen')\n handleOpenChange() {\n if (this.isOpen) {\n this.adjustPosition();\n this.addClickOutsideListener();\n } else {\n this.removeClickOutsideListener();\n }\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n if (this.isOpen) {\n this.adjustPosition();\n }\n }\n\n private adjustPosition() {\n const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options') as HTMLElement;\n const parentRect = this.el.parentElement?.getBoundingClientRect();\n const searchBar = this.el.shadowRoot.querySelector('.search-bar') as HTMLElement;\n const viewportHeight = window.innerHeight;\n\n if (parentRect) {\n this.width = `${parentRect.width}px`;\n dropdownOptions.style.left = `${parentRect.x}px`;\n if (window.innerWidth <= 480) {\n searchBar.style.maxHeight = `30px`;\n dropdownOptions.style.top = `425px`\n dropdownOptions.style.maxHeight = '110px';\n return;\n }\n dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;\n\n const availableHeight = viewportHeight - parentRect.bottom;\n dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;\n }\n }\n\n private addClickOutsideListener() {\n window.addEventListener('click', this.handleClickOutside);\n }\n\n private removeClickOutsideListener() {\n window.removeEventListener('click', this.handleClickOutside);\n }\n\n private handleClickOutside = (event: MouseEvent) => {\n if (this.isOpen && !this.el.contains(event.target as Node)) {\n this.isOpen = false;\n }\n };\n\n componentWillLoad() {\n if (this.items.length > 0) {\n this.filteredItems = [...this.items];\n if (this.selectedItem !== null) {\n this.selectItem(this.selectedItem, false);\n } else {\n this.selectedItem = this.items[0];\n }\n }\n }\n\n disconnectedCallback() {\n this.removeClickOutsideListener();\n }\n\n render() {\n return (\n <Host style={{ width: this.width }}>\n <button class=\"dropdown-button\" onClick={this.toggleDropdown}>\n {`${this.selectedItem?.selectedLabel || this.selectedItem?.label} ${this.selectedItem?.value}`}\n <div class={`chevron ${this.isOpen ? '' : 'closed'}`} innerHTML={Icons['chevronUp']} />\n </button>\n <ul class={{ 'dropdown-options': true, 'open': this.isOpen }} style={{ width: this.width }}>\n {this.hasCpslSearch && (\n <li class=\"search-bar\">\n <input\n type=\"text\"\n placeholder=\"Search...\"\n value={this.searchQuery}\n onInput={this.handleSearchQueryChange}\n />\n </li>\n )}\n {this.filteredItems.map(item =>\n <li onClick={this.handleItemSelect(item)}>\n <span innerHTML={Icons[item.icon]}></span>\n {item.label} <span class=\"dropdown-value\">{item.value}</span>\n </li>\n )}\n </ul>\n </Host>\n );\n }\n}\n"]}
@@ -4,9 +4,9 @@ export class CpslGrid {
4
4
  this.fixed = false;
5
5
  }
6
6
  render() {
7
- return (h(Host, { key: 'ad08de3e168770731291ad1fd2ddffcac4ca6145', class: {
7
+ return (h(Host, { key: '7f71c4736413c5fd6a742716da614991ef6a585e', class: {
8
8
  'grid-fixed': this.fixed,
9
- } }, h("slot", { key: '0c93c6a07b6acfaa4bd50c6edabbae30e37ed09d' })));
9
+ } }, h("slot", { key: '98f624d6d897aca30adcd75b14ef88124781981a' })));
10
10
  }
11
11
  static get is() { return "cpsl-grid"; }
12
12
  static get encapsulation() { return "shadow"; }
@@ -6,7 +6,7 @@ export class CpslIcon {
6
6
  this.icon = undefined;
7
7
  }
8
8
  render() {
9
- return (h(Host, { key: '89f3081baf013558e965cc6682811d66dc2b188d', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
9
+ return (h(Host, { key: '5e1a7143534342f6c3d79ccf1edcc40aa903773a', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
10
10
  }
11
11
  static get is() { return "cpsl-icon"; }
12
12
  static get encapsulation() { return "shadow"; }
@@ -44,7 +44,7 @@ export class CpslIcon {
44
44
  "mutable": false,
45
45
  "complexType": {
46
46
  "original": "IconType",
47
- "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
47
+ "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
48
48
  "references": {
49
49
  "IconType": {
50
50
  "location": "import",
@@ -1,7 +1,7 @@
1
1
  import { Host, h } from "@stencil/core";
2
2
  export class CpslInfoBox {
3
3
  render() {
4
- return (h(Host, { key: 'c3adc346763da83e631c71bbc4f1ce7aad99ba04' }, h("div", { key: 'c03ce70d8c94d42264216c1376d81f8601a45656', class: "info-box-container" }, h("slot", { key: '3ae35495b7371479d0ad8e731011fb8b06a2c0d9' }))));
4
+ return (h(Host, { key: '519995e7bf034f2bf6bda24249a0acf5264bc0ab' }, h("div", { key: '076b0866fbfa4812c5403511ec7048c99bba1823', class: "info-box-container" }, h("slot", { key: 'e00f6c9efa7f3701b58f8f20808b6323f9618877' }))));
5
5
  }
6
6
  static get is() { return "cpsl-info-box"; }
7
7
  static get encapsulation() { return "shadow"; }