@xplortech/apollo-core 0.5.2 → 0.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (173) hide show
  1. package/dist/apollo-core/apollo-core.css +5468 -9
  2. package/dist/apollo-core/apollo-core.esm.js +125 -1
  3. package/dist/apollo-core/app-globals-0f993ce5.js +3 -0
  4. package/dist/apollo-core/css-shim-bbdf0cc6.js +4 -0
  5. package/dist/apollo-core/dom-1f98a75f.js +73 -0
  6. package/dist/apollo-core/index-3c9f25ef.js +2938 -0
  7. package/dist/apollo-core/index-912d1a21.js +584 -0
  8. package/dist/apollo-core/index.esm.js +1 -0
  9. package/dist/{cjs/regular-872f5226.js → apollo-core/regular-133c23b5.js} +12 -3
  10. package/dist/apollo-core/shadow-css-67b66845.js +389 -0
  11. package/dist/apollo-core/xpl-application-shell.entry.js +50 -0
  12. package/dist/apollo-core/xpl-avatar.entry.js +19 -0
  13. package/dist/apollo-core/xpl-backdrop.entry.js +21 -0
  14. package/dist/{esm → apollo-core}/xpl-badge.entry.js +1 -1
  15. package/dist/{collection/components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js → apollo-core/xpl-breadcrumb-item.entry.js} +9 -12
  16. package/dist/apollo-core/xpl-breadcrumbs.entry.js +14 -0
  17. package/dist/{esm → apollo-core}/xpl-button-row.entry.js +1 -1
  18. package/dist/apollo-core/xpl-button.entry.js +34 -0
  19. package/dist/apollo-core/xpl-checkbox.entry.js +25 -0
  20. package/dist/{esm → apollo-core}/xpl-choicelist.entry.js +1 -1
  21. package/dist/apollo-core/xpl-content-area.entry.js +16 -0
  22. package/dist/{esm → apollo-core}/xpl-divider.entry.js +1 -1
  23. package/dist/{esm → apollo-core}/xpl-grid-item.entry.js +1 -1
  24. package/dist/{esm → apollo-core}/xpl-grid.entry.js +1 -1
  25. package/dist/{esm → apollo-core}/xpl-input.entry.js +20 -3
  26. package/dist/{esm → apollo-core}/xpl-list.entry.js +2 -2
  27. package/dist/apollo-core/xpl-main-nav.entry.js +26 -0
  28. package/dist/apollo-core/xpl-nav-item.entry.js +12 -0
  29. package/dist/{esm → apollo-core}/xpl-pagination.entry.js +1 -1
  30. package/dist/apollo-core/xpl-radio.entry.js +25 -0
  31. package/dist/apollo-core/xpl-secondary-nav.entry.js +12 -0
  32. package/dist/{esm → apollo-core}/xpl-select.entry.js +43 -3
  33. package/dist/{esm → apollo-core}/xpl-table.entry.js +1 -1
  34. package/dist/{esm → apollo-core}/xpl-tag.entry.js +1 -1
  35. package/dist/{esm → apollo-core}/xpl-toggle.entry.js +2 -2
  36. package/dist/apollo-core/xpl-utility-bar.entry.js +25 -0
  37. package/dist/types/components/xpl-choicelist/choice.d.ts +1 -1
  38. package/dist/types/components/xpl-choicelist/xpl-choicelist.d.ts +1 -0
  39. package/dist/types/components/xpl-dropdown/dropdownchoice.d.ts +5 -5
  40. package/dist/types/components/xpl-dropdown/xpl-dropdown.d.ts +1 -0
  41. package/dist/types/components/xpl-list/listitem.d.ts +15 -15
  42. package/dist/types/components/xpl-list/xpl-list.d.ts +1 -0
  43. package/dist/types/components/xpl-select/xpl-select.d.ts +1 -0
  44. package/dist/types/components.d.ts +3 -0
  45. package/package.json +1 -1
  46. package/dist/apollo-core/p-0203d4e8.entry.js +0 -1
  47. package/dist/apollo-core/p-0b2c612e.entry.js +0 -1
  48. package/dist/apollo-core/p-128a0240.entry.js +0 -1
  49. package/dist/apollo-core/p-2f90296c.js +0 -10
  50. package/dist/apollo-core/p-30003b15.entry.js +0 -1
  51. package/dist/apollo-core/p-4e56a2ca.entry.js +0 -1
  52. package/dist/apollo-core/p-5854d1e4.entry.js +0 -1
  53. package/dist/apollo-core/p-611536d8.entry.js +0 -1
  54. package/dist/apollo-core/p-7c9fee7e.entry.js +0 -1
  55. package/dist/apollo-core/p-8b6633c7.js +0 -1
  56. package/dist/apollo-core/p-97cd1f73.entry.js +0 -1
  57. package/dist/apollo-core/p-9c5ca308.entry.js +0 -1
  58. package/dist/apollo-core/p-ad90fe4d.js +0 -1
  59. package/dist/apollo-core/p-bd4a7e3c.entry.js +0 -1
  60. package/dist/apollo-core/p-dab8e7a1.entry.js +0 -1
  61. package/dist/apollo-core/p-eb63b401.entry.js +0 -1
  62. package/dist/apollo-core/p-ee2f4422.entry.js +0 -1
  63. package/dist/apollo-core/p-f167aa05.entry.js +0 -1
  64. package/dist/cjs/apollo-core.cjs.js +0 -19
  65. package/dist/cjs/index-944adb2e.js +0 -1609
  66. package/dist/cjs/index.cjs.js +0 -2
  67. package/dist/cjs/loader.cjs.js +0 -21
  68. package/dist/cjs/v4-14140ff3.js +0 -77
  69. package/dist/cjs/xpl-application-shell_11.cjs.entry.js +0 -230
  70. package/dist/cjs/xpl-badge.cjs.entry.js +0 -21
  71. package/dist/cjs/xpl-button-row.cjs.entry.js +0 -24
  72. package/dist/cjs/xpl-checkbox_2.cjs.entry.js +0 -51
  73. package/dist/cjs/xpl-choicelist.cjs.entry.js +0 -36
  74. package/dist/cjs/xpl-divider.cjs.entry.js +0 -18
  75. package/dist/cjs/xpl-grid-item.cjs.entry.js +0 -25
  76. package/dist/cjs/xpl-grid.cjs.entry.js +0 -35
  77. package/dist/cjs/xpl-input.cjs.entry.js +0 -2527
  78. package/dist/cjs/xpl-list.cjs.entry.js +0 -63
  79. package/dist/cjs/xpl-pagination.cjs.entry.js +0 -76
  80. package/dist/cjs/xpl-select.cjs.entry.js +0 -623
  81. package/dist/cjs/xpl-table.cjs.entry.js +0 -89
  82. package/dist/cjs/xpl-tag.cjs.entry.js +0 -21
  83. package/dist/cjs/xpl-toggle.cjs.entry.js +0 -34
  84. package/dist/collection/collection-manifest.json +0 -37
  85. package/dist/collection/components/xpl-application-shell/xpl-application-shell.js +0 -143
  86. package/dist/collection/components/xpl-avatar/xpl-avatar.js +0 -158
  87. package/dist/collection/components/xpl-backdrop/xpl-backdrop.js +0 -41
  88. package/dist/collection/components/xpl-badge/xpl-badge.js +0 -50
  89. package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.js +0 -15
  90. package/dist/collection/components/xpl-button/xpl-button.js +0 -214
  91. package/dist/collection/components/xpl-button-row/xpl-button-row.js +0 -119
  92. package/dist/collection/components/xpl-checkbox/xpl-checkbox.js +0 -185
  93. package/dist/collection/components/xpl-choicelist/xpl-choicelist.js +0 -143
  94. package/dist/collection/components/xpl-content-area/xpl-content-area.js +0 -39
  95. package/dist/collection/components/xpl-divider/xpl-divider.js +0 -30
  96. package/dist/collection/components/xpl-dropdown/xpl-dropdown.js +0 -32
  97. package/dist/collection/components/xpl-grid/xpl-grid.js +0 -26
  98. package/dist/collection/components/xpl-grid-item/xpl-grid-item.js +0 -93
  99. package/dist/collection/components/xpl-input/xpl-input.js +0 -471
  100. package/dist/collection/components/xpl-list/xpl-list.js +0 -93
  101. package/dist/collection/components/xpl-main-nav/xpl-main-nav.js +0 -72
  102. package/dist/collection/components/xpl-nav-item/xpl-nav-item.js +0 -10
  103. package/dist/collection/components/xpl-pagination/xpl-pagination.js +0 -189
  104. package/dist/collection/components/xpl-radio/xpl-radio.js +0 -168
  105. package/dist/collection/components/xpl-secondary-nav/xpl-secondary-nav.js +0 -9
  106. package/dist/collection/components/xpl-select/xpl-select.js +0 -311
  107. package/dist/collection/components/xpl-table/xpl-table.js +0 -194
  108. package/dist/collection/components/xpl-tag/xpl-tag.js +0 -30
  109. package/dist/collection/components/xpl-toggle/xpl-toggle.js +0 -157
  110. package/dist/collection/components/xpl-utility-bar/xpl-utility-bar.js +0 -70
  111. package/dist/custom-elements/index.js +0 -19959
  112. package/dist/esm/apollo-core.js +0 -17
  113. package/dist/esm/index-899dba3b.js +0 -1580
  114. package/dist/esm/index.js +0 -1
  115. package/dist/esm/loader.js +0 -17
  116. package/dist/esm/polyfills/core-js.js +0 -11
  117. package/dist/esm/polyfills/css-shim.js +0 -1
  118. package/dist/esm/polyfills/dom.js +0 -79
  119. package/dist/esm/polyfills/es5-html-element.js +0 -1
  120. package/dist/esm/polyfills/index.js +0 -34
  121. package/dist/esm/polyfills/system.js +0 -6
  122. package/dist/esm/regular-86225e9d.js +0 -16041
  123. package/dist/esm/v4-929670b7.js +0 -75
  124. package/dist/esm/xpl-application-shell_11.entry.js +0 -216
  125. package/dist/esm/xpl-checkbox_2.entry.js +0 -46
  126. package/dist/index.cjs.js +0 -1
  127. package/dist/index.js +0 -1
  128. package/dist/stories/application-shell.stories.js +0 -766
  129. package/dist/stories/avatar.stories.js +0 -173
  130. package/dist/stories/backdrop.stories.js +0 -18
  131. package/dist/stories/badge.stories.js +0 -48
  132. package/dist/stories/breadcrumbs.stories.js +0 -115
  133. package/dist/stories/button-row.stories.js +0 -64
  134. package/dist/stories/button.stories.js +0 -98
  135. package/dist/stories/checkbox.stories.js +0 -76
  136. package/dist/stories/choicelist.stories.js +0 -112
  137. package/dist/stories/content-area.stories.js +0 -53
  138. package/dist/stories/divider.stories.js +0 -34
  139. package/dist/stories/grid.stories.js +0 -100
  140. package/dist/stories/input.stories.js +0 -252
  141. package/dist/stories/list.stories.js +0 -134
  142. package/dist/stories/main-nav.stories.js +0 -308
  143. package/dist/stories/pagination.stories.js +0 -84
  144. package/dist/stories/radio.stories.js +0 -66
  145. package/dist/stories/secondary-nav.stories.js +0 -76
  146. package/dist/stories/select.stories.js +0 -111
  147. package/dist/stories/table.stories.js +0 -107
  148. package/dist/stories/tabs.stories.js +0 -24
  149. package/dist/stories/toggle.stories.js +0 -80
  150. package/dist/stories/utility-bar.stories.js +0 -94
  151. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/application-shell.stories.d.ts +0 -0
  152. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/avatar.stories.d.ts +0 -0
  153. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/backdrop.stories.d.ts +0 -0
  154. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/badge.stories.d.ts +0 -0
  155. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/breadcrumbs.stories.d.ts +0 -0
  156. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/button-row.stories.d.ts +0 -0
  157. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/button.stories.d.ts +0 -0
  158. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/checkbox.stories.d.ts +0 -0
  159. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/choicelist.stories.d.ts +0 -0
  160. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/content-area.stories.d.ts +0 -0
  161. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/divider.stories.d.ts +0 -0
  162. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/grid.stories.d.ts +0 -0
  163. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/input.stories.d.ts +0 -0
  164. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/list.stories.d.ts +0 -0
  165. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/main-nav.stories.d.ts +0 -0
  166. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/pagination.stories.d.ts +0 -0
  167. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/radio.stories.d.ts +0 -0
  168. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/secondary-nav.stories.d.ts +0 -0
  169. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/select.stories.d.ts +0 -0
  170. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/table.stories.d.ts +0 -0
  171. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/tabs.stories.d.ts +0 -0
  172. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/toggle.stories.d.ts +0 -0
  173. /package/dist/types/Users/{fernandogelin/Projects → roc/Sites}/apollo/.stencil/stories/utility-bar.stories.d.ts +0 -0
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
@@ -1,21 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-944adb2e.js');
6
-
7
- /*
8
- Stencil Client Patch Esm v2.8.0 | MIT Licensed | https://stenciljs.com
9
- */
10
- const patchEsm = () => {
11
- return index.promiseResolve();
12
- };
13
-
14
- const defineCustomElements = (win, options) => {
15
- if (typeof window === 'undefined') return Promise.resolve();
16
- return patchEsm().then(() => {
17
- return index.bootstrapLazy([["xpl-choicelist.cjs",[[0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]]],["xpl-list.cjs",[[0,"xpl-list",{"items":[16]}]]],["xpl-select.cjs",[[0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"visibleChoices":[32]}]]],["xpl-divider.cjs",[[4,"xpl-divider",{"tier":[2]}]]],["xpl-grid.cjs",[[0,"xpl-grid"]]],["xpl-input.cjs",[[0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]]],["xpl-badge.cjs",[[4,"xpl-badge",{"dot":[4],"variant":[1]}]]],["xpl-tag.cjs",[[4,"xpl-tag"]]],["xpl-application-shell_11.cjs",[[4,"xpl-application-shell",{"withSubnav":[4,"with-subnav"],"withUtility":[4,"with-utility"],"navWidth":[1,"nav-width"],"navOpen":[32]},[[0,"navOpen","navToggleHandler"],[0,"navWidth","navWithHandler"],[9,"resize","onWindowResize"]]],[4,"xpl-breadcrumb-item"],[4,"xpl-breadcrumbs"],[4,"xpl-content-area",{"size":[1]}],[4,"xpl-main-nav",{"width":[1]}],[4,"xpl-nav-item"],[4,"xpl-secondary-nav"],[4,"xpl-utility-bar",{"navControl":[4,"nav-control"],"open":[32]}],[4,"xpl-avatar",{"color":[1],"disabled":[4],"href":[1],"name":[1],"size":[1],"src":[1],"status":[1],"target":[1]}],[0,"xpl-backdrop",{"relative":[4]}],[4,"xpl-button",{"disabled":[4],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"iconTrailing":[4,"icon-trailing"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1]}]]],["xpl-button-row.cjs",[[0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]]],["xpl-grid-item.cjs",[[4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]]],["xpl-pagination.cjs",[[0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32],"goto":[64]}]]],["xpl-table.cjs",[[0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}]]],["xpl-toggle.cjs",[[0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]]],["xpl-checkbox_2.cjs",[[4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}],[4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]]]], options);
18
- });
19
- };
20
-
21
- exports.defineCustomElements = defineCustomElements;
@@ -1,77 +0,0 @@
1
- 'use strict';
2
-
3
- // Unique ID creation requires a high quality random # generator. In the browser we therefore
4
- // require the crypto API and do not support built-in fallback to lower quality random number
5
- // generators (like Math.random()).
6
- var getRandomValues;
7
- var rnds8 = new Uint8Array(16);
8
- function rng() {
9
- // lazy load so that environments that need to polyfill have a chance to do so
10
- if (!getRandomValues) {
11
- // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
12
- // find the complete implementation of crypto (msCrypto) on IE11.
13
- getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
14
-
15
- if (!getRandomValues) {
16
- throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
17
- }
18
- }
19
-
20
- return getRandomValues(rnds8);
21
- }
22
-
23
- const REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
24
-
25
- function validate(uuid) {
26
- return typeof uuid === 'string' && REGEX.test(uuid);
27
- }
28
-
29
- /**
30
- * Convert array of 16 byte values to UUID string format of the form:
31
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
32
- */
33
-
34
- var byteToHex = [];
35
-
36
- for (var i = 0; i < 256; ++i) {
37
- byteToHex.push((i + 0x100).toString(16).substr(1));
38
- }
39
-
40
- function stringify(arr) {
41
- var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
42
- // Note: Be careful editing this code! It's been tuned for performance
43
- // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
44
- var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID. If this throws, it's likely due to one
45
- // of the following:
46
- // - One or more input array values don't map to a hex octet (leading to
47
- // "undefined" in the uuid)
48
- // - Invalid input values for the RFC `version` or `variant` fields
49
-
50
- if (!validate(uuid)) {
51
- throw TypeError('Stringified UUID is invalid');
52
- }
53
-
54
- return uuid;
55
- }
56
-
57
- function v4(options, buf, offset) {
58
- options = options || {};
59
- var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
60
-
61
- rnds[6] = rnds[6] & 0x0f | 0x40;
62
- rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
63
-
64
- if (buf) {
65
- offset = offset || 0;
66
-
67
- for (var i = 0; i < 16; ++i) {
68
- buf[offset + i] = rnds[i];
69
- }
70
-
71
- return buf;
72
- }
73
-
74
- return stringify(rnds);
75
- }
76
-
77
- exports.v4 = v4;
@@ -1,230 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-944adb2e.js');
6
- require('./regular-872f5226.js');
7
-
8
- const XplApplicationShell = class {
9
- constructor(hostRef) {
10
- index.registerInstance(this, hostRef);
11
- /**
12
- * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
13
- */
14
- this.withSubnav = false;
15
- /**
16
- * @property {boolean} - Whether or not the Grid should have space for a utility bar
17
- */
18
- this.withUtility = true;
19
- /**
20
- * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
21
- */
22
- this.navWidth = 'default';
23
- /**
24
- * @state {boolean} - Whether or not the main nav is open, updates when the nav-open envent is emitted.
25
- */
26
- this.navOpen = true;
27
- }
28
- closeNavOnMobile() {
29
- if (window.innerWidth <= 640) {
30
- this.navOpen = false;
31
- }
32
- }
33
- navToggleHandler() {
34
- this.navOpen = !this.navOpen;
35
- }
36
- navWithHandler(event) {
37
- this.navWidth = event.detail;
38
- }
39
- onWindowResize() {
40
- this.closeNavOnMobile();
41
- }
42
- connectedCallback() {
43
- this.closeNavOnMobile();
44
- }
45
- render() {
46
- let applicationShellClasses = "xpl-application-shell";
47
- if (this.withUtility)
48
- applicationShellClasses += " xpl-application-shell--with_utility";
49
- let navClasses = "xpl-application-shell__nav";
50
- navClasses += (this.navOpen) ? ` xpl-application-shell__nav--${this.navWidth}--open` : ` xpl-application-shell__nav--${this.navWidth}`;
51
- return (index.h(index.Host, { class: applicationShellClasses }, index.h("div", { class: navClasses }, index.h("slot", { name: "nav" })), index.h("div", { class: "xpl-application-shell__subnav" }, index.h("slot", { name: "subnav" })), index.h("div", { class: "xpl-application-shell__utility" }, index.h("slot", { name: "utility" })), index.h("div", { class: "xpl-application-shell__content" }, index.h("slot", { name: "content" })), index.h("xpl-backdrop", { onClick: () => this.navToggleHandler(), class: { "xpl-application-shell__backdrop--open": this.navOpen }, relative: true })));
52
- }
53
- };
54
-
55
- const XplAvatar = class {
56
- constructor(hostRef) {
57
- index.registerInstance(this, hostRef);
58
- this.disabled = false;
59
- }
60
- render() {
61
- let className = "xpl-avatar";
62
- if (this.size)
63
- className += ` xpl-avatar--${this.size}`;
64
- if (this.color)
65
- className += ` xpl-avatar--${this.color}`;
66
- const inner = (index.h("div", null, this.src ? (index.h("img", { alt: this.name, src: this.src })) : (index.h("div", { class: "xpl-avatar__placeholder" }, index.h("slot", null))), this.status && index.h("div", { class: `xpl-avatar__dot--${this.status}` })));
67
- return (index.h(index.Host, null, this.href && !this.disabled ? (index.h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (index.h("div", { class: className + " xpl-avatar--disabled" }, inner)) : (index.h("div", { class: className }, inner))));
68
- }
69
- };
70
-
71
- const XplBackdrop = class {
72
- constructor(hostRef) {
73
- index.registerInstance(this, hostRef);
74
- /**
75
- * @property {boolean} - When true, backdrop will have relative position. This is useful when the backdrop doesn't cover the whole view area.
76
- * If false, the position will be fixed and cover the whole view area.
77
- */
78
- this.relative = false;
79
- }
80
- render() {
81
- return (index.h(index.Host, { class: {
82
- 'xpl-backdrop': true,
83
- 'xpl-backdrop--fixed': !this.relative,
84
- 'xpl-backdrop--relative': this.relative
85
- }, "aria-hidden": "true" }));
86
- }
87
- };
88
-
89
- const XplBreadcrumbItem = class {
90
- constructor(hostRef) {
91
- index.registerInstance(this, hostRef);
92
- // This is temporary as we still don't have a xpl-icon component. When that's created we should update this code.
93
- this.chevron = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
94
- <path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path>
95
- </svg>
96
- `;
97
- }
98
- render() {
99
- return (index.h(index.Host, { class: "xpl-breadcrumb-item", role: "listitem" }, index.h("li", { role: "none" }, index.h("slot", null)), index.h("span", { innerHTML: `${this.chevron}` })));
100
- }
101
- ;
102
- };
103
-
104
- const XplBreadcrumbs = class {
105
- constructor(hostRef) {
106
- index.registerInstance(this, hostRef);
107
- }
108
- render() {
109
- return (index.h(index.Host, null, index.h("nav", { class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, index.h("ol", { role: "list" }, index.h("slot", null)))));
110
- }
111
- ;
112
- };
113
-
114
- const XplButton = class {
115
- constructor(hostRef) {
116
- index.registerInstance(this, hostRef);
117
- this.size = "default";
118
- this.variant = "primary";
119
- }
120
- render() {
121
- let className = "xpl-button";
122
- if (this.variant === "secondary")
123
- className += " xpl-button--secondary";
124
- if (this.variant === "subtle")
125
- className += " xpl-button--subtle";
126
- if (this.variant === "warning")
127
- className += " xpl-button--warning";
128
- if (this.size === "sm")
129
- className += " xpl-button--sm";
130
- if (this.size === "xs")
131
- className += " xpl-button--xs";
132
- if (this.iconOnly)
133
- className += " xpl-button--icon-only";
134
- const icon = this.icon ? (index.h("i", { class: `far fa-${this.icon} ${this.iconTrailing ? "trailing" : this.iconOnly ? "" : "leading"}` })) : null;
135
- return (index.h(index.Host, { role: "button" },
136
- /**
137
- * Conditionally render either an <a> or <button> element
138
- * depending on if there's an `href` or not
139
- */
140
- this.href ? (index.h("a", { class: className, href: this.href, role: "button" }, !this.iconTrailing && icon, this.iconOnly ? (index.h("span", { class: "sr-only" }, index.h("slot", null))) : (index.h("slot", null)), this.iconTrailing && icon)) : (index.h("button", { class: className, disabled: this.disabled, name: this.name, type: this.type, value: this.value }, !this.iconTrailing && icon, this.iconOnly ? (index.h("span", { class: "sr-only" }, index.h("slot", null))) : (index.h("slot", null)), this.iconTrailing && icon))));
141
- }
142
- };
143
-
144
- const XplContentArea = class {
145
- constructor(hostRef) {
146
- index.registerInstance(this, hostRef);
147
- /**
148
- * @property {string} size - The content-area size.
149
- */
150
- this.size = "wide";
151
- }
152
- render() {
153
- return (index.h(index.Host, null, index.h("main", { class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, index.h("div", { class: "xpl-content-area" }, index.h("slot", null)))));
154
- }
155
- };
156
-
157
- const XplMainNav = class {
158
- constructor(hostRef) {
159
- index.registerInstance(this, hostRef);
160
- this.navWidth = index.createEvent(this, "navWidth", 7);
161
- /**
162
- * @property {string} width - The width of the Main Nav.
163
- */
164
- this.width = "default";
165
- }
166
- navWidthHandler() {
167
- this.navWidth.emit(this.width);
168
- }
169
- connectedCallback() {
170
- this.navWidthHandler();
171
- }
172
- componentDidUpdate() {
173
- this.navWidthHandler();
174
- }
175
- render() {
176
- return (index.h(index.Host, { class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, index.h("nav", null, index.h("header", { "aria-label": "Sidebar Header" }, index.h("slot", { name: "logo" }), index.h("slot", { name: "brand-name" })), index.h("div", { class: "xpl-main-nav__main_section" }, index.h("slot", { name: "navigation" })), index.h("footer", { class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, index.h("slot", { name: "footer" })))));
177
- }
178
- };
179
-
180
- const XplNavItem = class {
181
- constructor(hostRef) {
182
- index.registerInstance(this, hostRef);
183
- }
184
- render() {
185
- return (index.h(index.Host, { class: "xpl-nav-item", role: "listitem" }, index.h("slot", { name: "link" }, index.h("slot", { name: "icon" }), index.h("slot", null))));
186
- }
187
- };
188
-
189
- const XplSecondaryNav = class {
190
- constructor(hostRef) {
191
- index.registerInstance(this, hostRef);
192
- }
193
- render() {
194
- return (index.h(index.Host, { class: "xpl-secondary-nav" }, index.h("nav", { "aria-label": "Secondary Nav" }, index.h("slot", null))));
195
- }
196
- };
197
-
198
- const XplUtilityBar = class {
199
- constructor(hostRef) {
200
- index.registerInstance(this, hostRef);
201
- this.navOpen = index.createEvent(this, "navOpen", 7);
202
- this.open = true;
203
- this.bars = `
204
- <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14 xpl-utility-nav__bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
205
- `;
206
- }
207
- onNavToggle() {
208
- this.open = !this.open;
209
- this.navOpen.emit(this.open);
210
- }
211
- render() {
212
- return (index.h(index.Host, null, index.h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl
213
- ?
214
- index.h("div", null, index.h("button", { onClick: () => this.onNavToggle(), innerHTML: `${this.bars}` }), index.h("slot", { name: "aside" }))
215
- :
216
- index.h("slot", { name: "aside" }), index.h("slot", { name: "main" }))));
217
- }
218
- };
219
-
220
- exports.xpl_application_shell = XplApplicationShell;
221
- exports.xpl_avatar = XplAvatar;
222
- exports.xpl_backdrop = XplBackdrop;
223
- exports.xpl_breadcrumb_item = XplBreadcrumbItem;
224
- exports.xpl_breadcrumbs = XplBreadcrumbs;
225
- exports.xpl_button = XplButton;
226
- exports.xpl_content_area = XplContentArea;
227
- exports.xpl_main_nav = XplMainNav;
228
- exports.xpl_nav_item = XplNavItem;
229
- exports.xpl_secondary_nav = XplSecondaryNav;
230
- exports.xpl_utility_bar = XplUtilityBar;
@@ -1,21 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-944adb2e.js');
6
-
7
- const XplBadge = class {
8
- constructor(hostRef) {
9
- index.registerInstance(this, hostRef);
10
- }
11
- render() {
12
- let className = "xpl-badge";
13
- if (this.dot)
14
- className += " xpl-badge--dot";
15
- if (this.variant)
16
- className += " xpl-badge--" + this.variant;
17
- return (index.h(index.Host, null, index.h("div", { class: className }, index.h("slot", null))));
18
- }
19
- };
20
-
21
- exports.xpl_badge = XplBadge;
@@ -1,24 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-944adb2e.js');
6
-
7
- const XplButtonRow = class {
8
- constructor(hostRef) {
9
- index.registerInstance(this, hostRef);
10
- this.clickPrimary = index.createEvent(this, "clickPrimary", 7);
11
- this.clickSecondary = index.createEvent(this, "clickSecondary", 7);
12
- this.clickTertiary = index.createEvent(this, "clickTertiary", 7);
13
- this.onPrimary = () => this.clickPrimary.emit();
14
- this.onSecondary = () => this.clickSecondary.emit();
15
- this.onTertiary = () => this.clickTertiary.emit();
16
- }
17
- render() {
18
- return (index.h(index.Host, { class: "xpl-button-row" }, index.h("div", { class: "xpl-button-row-inner" }, index.h("div", { class: "xpl-button-row__left" }, this.secondary &&
19
- index.h("xpl-button", { variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), index.h("div", { class: "xpl-button-row__right" }, this.tertiary && index.h("xpl-button", { variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary), this.secondary &&
20
- index.h("xpl-button", { variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary), this.primary && index.h("xpl-button", { class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary)))));
21
- }
22
- };
23
-
24
- exports.xpl_button_row = XplButtonRow;
@@ -1,51 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-944adb2e.js');
6
- const v4 = require('./v4-14140ff3.js');
7
-
8
- const XplCheckbox = class {
9
- constructor(hostRef) {
10
- index.registerInstance(this, hostRef);
11
- this.checkboxChange = index.createEvent(this, "checkboxChange", 7);
12
- this.id = v4.v4();
13
- }
14
- render() {
15
- return (index.h(index.Host, { class: {
16
- "xpl-checkbox-radio-container": true,
17
- "styled": this.styled,
18
- "disabled": this.disabled,
19
- } }, index.h("input", { class: "xpl-checkbox", type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: () => this.checkboxChange.emit(this.input.checked), name: this.name, ref: (el) => (this.input = el), required: this.required, value: this.value }), index.h("label", { class: {
20
- "xpl-label": true,
21
- "xpl-label--disabled": this.disabled
22
- }, htmlFor: this.id }, index.h("slot", null), this.description && index.h("small", { class: {
23
- "xpl-description": true,
24
- "xpl-description--disabled": this.disabled
25
- } }, this.description))));
26
- }
27
- };
28
-
29
- const XplRadio = class {
30
- constructor(hostRef) {
31
- index.registerInstance(this, hostRef);
32
- this.radioChange = index.createEvent(this, "radioChange", 7);
33
- this.id = v4.v4();
34
- }
35
- render() {
36
- return (index.h(index.Host, { class: {
37
- "xpl-checkbox-radio-container": true,
38
- "styled": this.styled,
39
- "disabled": this.disabled,
40
- } }, index.h("input", { class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, value: this.value, onChange: () => this.radioChange.emit(true) }), index.h("label", { class: {
41
- "xpl-label": true,
42
- "xpl-label--disabled": this.disabled
43
- }, htmlFor: this.id }, index.h("slot", null), this.description && index.h("small", { class: {
44
- "xpl-description": true,
45
- "xpl-description--disabled": this.disabled
46
- } }, this.description))));
47
- }
48
- };
49
-
50
- exports.xpl_checkbox = XplCheckbox;
51
- exports.xpl_radio = XplRadio;
@@ -1,36 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-944adb2e.js');
6
-
7
- const XplChoicelist = class {
8
- constructor(hostRef) {
9
- index.registerInstance(this, hostRef);
10
- }
11
- componentWillLoad() {
12
- this.selected = this.choices !== undefined && this.choices !== null && this.choices.length > 0 ? this.choices.map(() => false) : [];
13
- }
14
- render() {
15
- let className = "xpl-choicelist";
16
- if (this.styled)
17
- className += " xpl-choicelist--styled";
18
- return (index.h(index.Host, { class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? index.h("div", { class: "xpl-choicelist-heading" }, this.heading && index.h("h3", null, this.heading), this.description && index.h("p", null, this.description)) : null, this.choices && (index.h("ul", { class: className }, this.choices.map(({ children, description, label }, i) => {
19
- const inner = this.multi ? (index.h("xpl-checkbox", { description: description, name: this.name, onCheckboxChange: (e) => {
20
- const { detail } = e;
21
- this.selected = this.selected.map((v, j) => i === j ? detail : v);
22
- } }, label)) : (index.h("xpl-radio", { description: description, name: this.name, onRadioChange: () => {
23
- // TypeScript errors since `v` isn't used
24
- // @ts-expect-error
25
- this.selected = this.selected.map((v, j) => i === j);
26
- } }, label));
27
- let className = this.styled && this.selected[i] ? "selected" : "";
28
- return (index.h("li", { class: className }, inner, children && index.h("ul", null, children.map((child) => {
29
- const childInner = this.multi ? (index.h("xpl-checkbox", { description: child.description }, child.label)) : (index.h("xpl-radio", { description: child.description }, child.label));
30
- return index.h("li", null, childInner);
31
- }))));
32
- })))));
33
- }
34
- };
35
-
36
- exports.xpl_choicelist = XplChoicelist;
@@ -1,18 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-944adb2e.js');
6
-
7
- const XplDivider = class {
8
- constructor(hostRef) {
9
- index.registerInstance(this, hostRef);
10
- }
11
- render() {
12
- let className = "xpl-divider";
13
- className += ` xpl-divider--${this.tier}`;
14
- return (index.h(index.Host, { class: className }, index.h("span", null, index.h("slot", null))));
15
- }
16
- };
17
-
18
- exports.xpl_divider = XplDivider;
@@ -1,25 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-944adb2e.js');
6
-
7
- const XplGridItem = class {
8
- constructor(hostRef) {
9
- index.registerInstance(this, hostRef);
10
- this.xs = 6;
11
- this.sm = 6;
12
- this.md = 6;
13
- this.lg = 6;
14
- }
15
- render() {
16
- let className = "xpl-grid-item";
17
- className += ` xpl-grid-item-xs-${this.xs}`;
18
- className += ` xpl-grid-item-sm-${this.sm}`;
19
- className += ` xpl-grid-item-md-${this.md}`;
20
- className += ` xpl-grid-item-lg-${this.lg}`;
21
- return (index.h(index.Host, { class: className }, index.h("slot", null)));
22
- }
23
- };
24
-
25
- exports.xpl_grid_item = XplGridItem;
@@ -1,35 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-944adb2e.js');
6
-
7
- const XplGrid = class {
8
- constructor(hostRef) {
9
- index.registerInstance(this, hostRef);
10
- }
11
- componentDidLoad() {
12
- const items = Array.from(this.container.querySelectorAll(".xpl-grid-item"));
13
- let lgCounter = 0, mdCounter = 0, smCounter = 0, xsCounter = 0;
14
- items.forEach(item => {
15
- lgCounter += +item.getAttribute("lg") || 6;
16
- mdCounter += +item.getAttribute("md") || 6;
17
- smCounter += +item.getAttribute("sm") || 6;
18
- xsCounter += +item.getAttribute("xs") || 6;
19
- if (lgCounter % 6 === 0)
20
- item.classList.add("xpl-grid-item-lg-last");
21
- if (mdCounter % 6 === 0)
22
- item.classList.add("xpl-grid-item-md-last");
23
- if (smCounter % 6 === 0)
24
- item.classList.add("xpl-grid-item-sm-last");
25
- if (xsCounter % 6 === 0)
26
- item.classList.add("xpl-grid-item-xs-last");
27
- });
28
- }
29
- render() {
30
- return (index.h(index.Host, { class: "xpl-grid" }));
31
- }
32
- get container() { return index.getElement(this); }
33
- };
34
-
35
- exports.xpl_grid = XplGrid;