@stackoverflow/stacks 1.9.0 → 1.9.2

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 (132) hide show
  1. package/README.md +161 -153
  2. package/dist/components/table/table.d.ts +26 -4
  3. package/dist/css/stacks.css +21 -6
  4. package/dist/css/stacks.min.css +1 -1
  5. package/dist/js/stacks.js +93 -64
  6. package/dist/js/stacks.min.js +1 -1
  7. package/lib/atomic/border.less +397 -397
  8. package/lib/atomic/color.less +210 -210
  9. package/lib/atomic/flex.less +426 -426
  10. package/lib/atomic/gap.less +44 -44
  11. package/lib/atomic/grid.less +139 -139
  12. package/lib/atomic/misc.less +343 -343
  13. package/lib/atomic/spacing.less +342 -342
  14. package/lib/atomic/typography.less +267 -267
  15. package/lib/atomic/width-height.less +194 -194
  16. package/lib/base/body.less +44 -44
  17. package/lib/base/configuration-static.less +61 -61
  18. package/lib/base/fieldset.less +5 -5
  19. package/lib/base/icon.less +11 -11
  20. package/lib/base/internal.less +220 -220
  21. package/lib/base/reset-meyer.less +64 -64
  22. package/lib/base/reset-normalize.less +449 -449
  23. package/lib/base/reset.less +20 -20
  24. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +21 -21
  25. package/lib/components/activity-indicator/activity-indicator.less +40 -40
  26. package/lib/components/activity-indicator/activity-indicator.visual.test.ts +23 -23
  27. package/lib/components/anchor/anchor.less +61 -61
  28. package/lib/components/avatar/avatar.a11y.test.ts +36 -36
  29. package/lib/components/avatar/avatar.less +108 -108
  30. package/lib/components/avatar/avatar.visual.test.ts +54 -54
  31. package/lib/components/award-bling/award-bling.a11y.test.ts +17 -0
  32. package/lib/components/award-bling/award-bling.less +31 -31
  33. package/lib/components/award-bling/award-bling.visual.test.ts +26 -0
  34. package/lib/components/badge/badge.less +251 -251
  35. package/lib/components/banner/banner.a11y.test.ts +37 -0
  36. package/lib/components/banner/banner.less +51 -51
  37. package/lib/components/banner/banner.test.ts +73 -77
  38. package/lib/components/banner/banner.ts +149 -149
  39. package/lib/components/banner/banner.visual.test.ts +37 -36
  40. package/lib/components/block-link/block-link.a11y.test.ts +68 -0
  41. package/lib/components/block-link/block-link.less +80 -80
  42. package/lib/components/block-link/block-link.visual.test.ts +61 -0
  43. package/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts +37 -0
  44. package/lib/components/breadcrumbs/breadcrumbs.less +41 -41
  45. package/lib/components/breadcrumbs/breadcrumbs.visual.test.ts +37 -0
  46. package/lib/components/button/button.a11y.test.ts +32 -32
  47. package/lib/components/button/button.less +502 -502
  48. package/lib/components/button/button.visual.test.ts +52 -52
  49. package/lib/components/button-group/button-group.less +83 -83
  50. package/lib/components/card/card.a11y.test.ts +13 -0
  51. package/lib/components/card/card.less +29 -29
  52. package/lib/components/card/card.visual.test.ts +54 -0
  53. package/lib/components/check-control/check-control.less +17 -17
  54. package/lib/components/check-group/check-group.less +19 -19
  55. package/lib/components/checkbox_radio/checkbox_radio.less +158 -158
  56. package/lib/components/code-block/code-block.less +116 -116
  57. package/lib/components/description/description.less +9 -9
  58. package/lib/components/empty-state/empty-state.less +16 -16
  59. package/lib/components/expandable/expandable.less +118 -118
  60. package/lib/components/expandable/expandable.test.ts +51 -53
  61. package/lib/components/expandable/expandable.ts +238 -238
  62. package/lib/components/input-fill/input-fill.less +35 -35
  63. package/lib/components/input-icon/input-icon.less +45 -45
  64. package/lib/components/input-message/input-message.less +48 -48
  65. package/lib/components/input_textarea/input_textarea.less +166 -166
  66. package/lib/components/label/label.less +111 -111
  67. package/lib/components/link/link.less +119 -119
  68. package/lib/components/link-preview/link-preview.less +139 -139
  69. package/lib/components/menu/menu.less +41 -41
  70. package/lib/components/modal/modal.less +113 -113
  71. package/lib/components/modal/modal.ts +379 -379
  72. package/lib/components/navigation/navigation.less +134 -134
  73. package/lib/components/navigation/navigation.ts +128 -128
  74. package/lib/components/notice/notice.less +203 -203
  75. package/lib/components/page-title/page-title.less +51 -51
  76. package/lib/components/pagination/pagination.less +52 -52
  77. package/lib/components/popover/popover.less +148 -148
  78. package/lib/components/popover/popover.ts +651 -651
  79. package/lib/components/popover/tooltip.test.ts +62 -66
  80. package/lib/components/popover/tooltip.ts +343 -343
  81. package/lib/components/popover/tooltip.visual.test.ts +31 -31
  82. package/lib/components/post-summary/post-summary.less +415 -415
  83. package/lib/components/progress-bar/progress-bar.less +291 -291
  84. package/lib/components/prose/prose.less +452 -452
  85. package/lib/components/select/select.less +148 -148
  86. package/lib/components/sidebar-widget/sidebar-widget.less +257 -258
  87. package/lib/components/spinner/spinner.less +103 -103
  88. package/lib/components/table/table.less +307 -292
  89. package/lib/components/table/table.test.ts +366 -0
  90. package/lib/components/table/table.ts +296 -263
  91. package/lib/components/table-container/table-container.less +4 -4
  92. package/lib/components/tag/tag.less +213 -213
  93. package/lib/components/toast/toast.less +35 -35
  94. package/lib/components/toast/toast.test.ts +63 -67
  95. package/lib/components/toast/toast.ts +357 -357
  96. package/lib/components/toast/toast.visual.test.ts +27 -27
  97. package/lib/components/toggle-switch/toggle-switch.less +110 -110
  98. package/lib/components/topbar/topbar.less +436 -435
  99. package/lib/components/uploader/uploader.less +195 -195
  100. package/lib/components/uploader/uploader.ts +205 -205
  101. package/lib/components/user-card/user-card.less +129 -129
  102. package/lib/controllers.ts +33 -33
  103. package/lib/exports/constants-colors.less +1112 -1111
  104. package/lib/exports/constants-helpers.less +108 -108
  105. package/lib/exports/constants-type.less +153 -153
  106. package/lib/exports/exports.less +15 -15
  107. package/lib/exports/mixins.less +299 -299
  108. package/lib/index.ts +32 -32
  109. package/lib/input-utils.less +44 -44
  110. package/lib/stacks-dynamic.less +24 -24
  111. package/lib/stacks-static.less +93 -93
  112. package/lib/stacks.less +13 -13
  113. package/lib/stacks.ts +113 -113
  114. package/lib/test/open-wc-testing-patch.d.ts +26 -0
  115. package/lib/test/test-utils.ts +466 -444
  116. package/lib/tsconfig.build.json +4 -0
  117. package/lib/tsconfig.json +16 -13
  118. package/package.json +106 -105
  119. package/dist/components/activity-indicator/activity-indicator.a11y.test.d.ts +0 -1
  120. package/dist/components/activity-indicator/activity-indicator.visual.test.d.ts +0 -1
  121. package/dist/components/avatar/avatar.a11y.test.d.ts +0 -1
  122. package/dist/components/avatar/avatar.visual.test.d.ts +0 -1
  123. package/dist/components/banner/banner.test.d.ts +0 -1
  124. package/dist/components/banner/banner.visual.test.d.ts +0 -1
  125. package/dist/components/button/button.a11y.test.d.ts +0 -1
  126. package/dist/components/button/button.visual.test.d.ts +0 -1
  127. package/dist/components/expandable/expandable.test.d.ts +0 -1
  128. package/dist/components/popover/tooltip.test.d.ts +0 -1
  129. package/dist/components/popover/tooltip.visual.test.d.ts +0 -1
  130. package/dist/components/toast/toast.test.d.ts +0 -1
  131. package/dist/components/toast/toast.visual.test.d.ts +0 -1
  132. package/dist/test/test-utils.d.ts +0 -136
@@ -1,44 +1,44 @@
1
- .input-states(@rules) {
2
- .is-disabled &,
3
- .is-readonly &,
4
- .has-success &,
5
- .has-error &,
6
- .has-warning & {
7
- @rules();
8
- }
9
- };
10
-
11
- .validation-states(@prefix, @error: {}, @success: {}, @warning: {}) {
12
- .has-error &,
13
- .has-success &,
14
- .has-warning & {
15
- --_@{prefix}-bc-focus: ~"var(--_@{prefix}-bc)";
16
- }
17
-
18
- .has-error & {
19
- --_@{prefix}-bc: var(--red-400);
20
- --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
21
- @error();
22
- }
23
-
24
- .has-success & {
25
- --_@{prefix}-bc: var(--green-400);
26
- --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
27
- @success();
28
- }
29
-
30
- .has-warning & {
31
- --_@{prefix}-bc: var(--yellow-600);
32
- --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
33
- @warning();
34
- }
35
- }
36
-
37
- .is-disabled,
38
- .is-readonly,
39
- .has-success,
40
- .has-error,
41
- .has-warning {
42
- position: relative;
43
- }
44
-
1
+ .input-states(@rules) {
2
+ .is-disabled &,
3
+ .is-readonly &,
4
+ .has-success &,
5
+ .has-error &,
6
+ .has-warning & {
7
+ @rules();
8
+ }
9
+ };
10
+
11
+ .validation-states(@prefix, @error: {}, @success: {}, @warning: {}) {
12
+ .has-error &,
13
+ .has-success &,
14
+ .has-warning & {
15
+ --_@{prefix}-bc-focus: ~"var(--_@{prefix}-bc)";
16
+ }
17
+
18
+ .has-error & {
19
+ --_@{prefix}-bc: var(--red-400);
20
+ --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
21
+ @error();
22
+ }
23
+
24
+ .has-success & {
25
+ --_@{prefix}-bc: var(--green-400);
26
+ --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
27
+ @success();
28
+ }
29
+
30
+ .has-warning & {
31
+ --_@{prefix}-bc: var(--yellow-600);
32
+ --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
33
+ @warning();
34
+ }
35
+ }
36
+
37
+ .is-disabled,
38
+ .is-readonly,
39
+ .has-success,
40
+ .has-error,
41
+ .has-warning {
42
+ position: relative;
43
+ }
44
+
@@ -1,24 +1,24 @@
1
- //
2
- // STACK OVERFLOW
3
- // DYNAMIC STACK ITEMS
4
- //
5
- // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
6
- // Stack Overflow. For documentation of all these classes and how to contribute,
7
- // visit https://stackoverflow.design/
8
- //
9
- // This is where all the magic happens.
10
- //
11
- //
12
- // ============================================================================
13
- // $ DYNAMIC ELEMENTS
14
- // The following items are elements which we allow communities to modify
15
- // via variables.
16
- // ----------------------------------------------------------------------------
17
- // -- SET BASIC STYLES FOR BODY
18
- @import "base/body.less";
19
- // -- LESS CONSTANTS AND MIXINS
20
- @import "exports/exports.less";
21
-
22
- // -- CONFIG
23
- @import "base/configuration-static.less";
24
- @import "base/internal.less";
1
+ //
2
+ // STACK OVERFLOW
3
+ // DYNAMIC STACK ITEMS
4
+ //
5
+ // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
6
+ // Stack Overflow. For documentation of all these classes and how to contribute,
7
+ // visit https://stackoverflow.design/
8
+ //
9
+ // This is where all the magic happens.
10
+ //
11
+ //
12
+ // ============================================================================
13
+ // $ DYNAMIC ELEMENTS
14
+ // The following items are elements which we allow communities to modify
15
+ // via variables.
16
+ // ----------------------------------------------------------------------------
17
+ // -- SET BASIC STYLES FOR BODY
18
+ @import "base/body.less";
19
+ // -- LESS CONSTANTS AND MIXINS
20
+ @import "exports/exports.less";
21
+
22
+ // -- CONFIG
23
+ @import "base/configuration-static.less";
24
+ @import "base/internal.less";
@@ -1,93 +1,93 @@
1
- // stacks-static.less contains styles which we DO NOT allow communities to modify via variables
2
- // BASE
3
- @import "base/reset.less";
4
- @import "base/fieldset.less";
5
- @import "base/icon.less";
6
- @import "input-utils.less";
7
-
8
- // -- COMPONENTS
9
- @import "components/activity-indicator/activity-indicator.less";
10
- @import "components/anchor/anchor.less";
11
- @import "components/avatar/avatar.less";
12
- @import "components/award-bling/award-bling.less";
13
- @import "components/badge/badge.less";
14
- @import "components/banner/banner.less";
15
- @import "components/block-link/block-link.less";
16
- @import "components/breadcrumbs/breadcrumbs.less";
17
- @import "components/button/button.less";
18
- @import "components/button-group/button-group.less";
19
- @import "components/card/card.less";
20
- @import "components/check-control/check-control.less";
21
- @import "components/check-group/check-group.less";
22
- @import "components/checkbox_radio/checkbox_radio.less";
23
- @import "components/code-block/code-block.less";
24
- @import "components/description/description.less";
25
- @import "components/empty-state/empty-state.less";
26
- @import "components/expandable/expandable.less";
27
- @import "components/input_textarea/input_textarea.less";
28
- @import "components/input-fill/input-fill.less";
29
- @import "components/input-icon/input-icon.less";
30
- @import "components/input-message/input-message.less";
31
- @import "components/label/label.less";
32
- @import "components/link/link.less";
33
- @import "components/link-preview/link-preview.less";
34
- @import "components/menu/menu.less";
35
- @import "components/modal/modal.less";
36
- @import "components/navigation/navigation.less";
37
- @import "components/notice/notice.less";
38
- @import "components/page-title/page-title.less";
39
- @import "components/pagination/pagination.less";
40
- @import "components/popover/popover.less";
41
- @import "components/post-summary/post-summary.less";
42
- @import "components/progress-bar/progress-bar.less";
43
- @import "components/prose/prose.less";
44
- @import "components/select/select.less";
45
- @import "components/sidebar-widget/sidebar-widget.less";
46
- @import "components/spinner/spinner.less";
47
- @import "components/table/table.less";
48
- @import "components/table-container/table-container.less";
49
- @import "components/tag/tag.less";
50
- @import "components/toast/toast.less";
51
- @import "components/toggle-switch/toggle-switch.less";
52
- @import "components/topbar/topbar.less";
53
- @import "components/uploader/uploader.less";
54
- @import "components/user-card/user-card.less";
55
-
56
- // LESS CONSTANTS AND MIXINS
57
- @import "exports/exports.less";
58
-
59
- // -- ATOMIC CLASSES
60
- @import "atomic/border.less";
61
- @import "atomic/color.less";
62
- @import "atomic/flex.less";
63
- @import "atomic/gap.less";
64
- @import "atomic/grid.less";
65
- @import "atomic/spacing.less";
66
- @import "atomic/typography.less";
67
- @import "atomic/misc.less";
68
- @import "atomic/width-height.less";
69
-
70
- /* stylelint-disable */
71
- #stacks-internals #screen-lg({
72
- #stacks-internals-collect-large();
73
- });
74
- #stacks-internals #screen-md({
75
- #stacks-internals-collect-medium();
76
- });
77
- #stacks-internals #screen-sm({
78
- #stacks-internals-collect-small();
79
- });
80
-
81
- @media print { // We need printing styles to be last so they can override all other styles.
82
- .print\:d-block & {
83
- display: block !important;
84
- }
85
- .print\:d-none & {
86
- display: none !important;
87
- }
88
- }
89
- /* stylelint-enable */
90
-
91
- // CONFIG
92
- @import "base/configuration-static.less";
93
- @import "base/internal.less";
1
+ // stacks-static.less contains styles which we DO NOT allow communities to modify via variables
2
+ // BASE
3
+ @import "base/reset.less";
4
+ @import "base/fieldset.less";
5
+ @import "base/icon.less";
6
+ @import "input-utils.less";
7
+
8
+ // -- COMPONENTS
9
+ @import "components/activity-indicator/activity-indicator.less";
10
+ @import "components/anchor/anchor.less";
11
+ @import "components/avatar/avatar.less";
12
+ @import "components/award-bling/award-bling.less";
13
+ @import "components/badge/badge.less";
14
+ @import "components/banner/banner.less";
15
+ @import "components/block-link/block-link.less";
16
+ @import "components/breadcrumbs/breadcrumbs.less";
17
+ @import "components/button/button.less";
18
+ @import "components/button-group/button-group.less";
19
+ @import "components/card/card.less";
20
+ @import "components/check-control/check-control.less";
21
+ @import "components/check-group/check-group.less";
22
+ @import "components/checkbox_radio/checkbox_radio.less";
23
+ @import "components/code-block/code-block.less";
24
+ @import "components/description/description.less";
25
+ @import "components/empty-state/empty-state.less";
26
+ @import "components/expandable/expandable.less";
27
+ @import "components/input_textarea/input_textarea.less";
28
+ @import "components/input-fill/input-fill.less";
29
+ @import "components/input-icon/input-icon.less";
30
+ @import "components/input-message/input-message.less";
31
+ @import "components/label/label.less";
32
+ @import "components/link/link.less";
33
+ @import "components/link-preview/link-preview.less";
34
+ @import "components/menu/menu.less";
35
+ @import "components/modal/modal.less";
36
+ @import "components/navigation/navigation.less";
37
+ @import "components/notice/notice.less";
38
+ @import "components/page-title/page-title.less";
39
+ @import "components/pagination/pagination.less";
40
+ @import "components/popover/popover.less";
41
+ @import "components/post-summary/post-summary.less";
42
+ @import "components/progress-bar/progress-bar.less";
43
+ @import "components/prose/prose.less";
44
+ @import "components/select/select.less";
45
+ @import "components/sidebar-widget/sidebar-widget.less";
46
+ @import "components/spinner/spinner.less";
47
+ @import "components/table/table.less";
48
+ @import "components/table-container/table-container.less";
49
+ @import "components/tag/tag.less";
50
+ @import "components/toast/toast.less";
51
+ @import "components/toggle-switch/toggle-switch.less";
52
+ @import "components/topbar/topbar.less";
53
+ @import "components/uploader/uploader.less";
54
+ @import "components/user-card/user-card.less";
55
+
56
+ // LESS CONSTANTS AND MIXINS
57
+ @import "exports/exports.less";
58
+
59
+ // -- ATOMIC CLASSES
60
+ @import "atomic/border.less";
61
+ @import "atomic/color.less";
62
+ @import "atomic/flex.less";
63
+ @import "atomic/gap.less";
64
+ @import "atomic/grid.less";
65
+ @import "atomic/spacing.less";
66
+ @import "atomic/typography.less";
67
+ @import "atomic/misc.less";
68
+ @import "atomic/width-height.less";
69
+
70
+ /* stylelint-disable */
71
+ #stacks-internals #screen-lg({
72
+ #stacks-internals-collect-large();
73
+ });
74
+ #stacks-internals #screen-md({
75
+ #stacks-internals-collect-medium();
76
+ });
77
+ #stacks-internals #screen-sm({
78
+ #stacks-internals-collect-small();
79
+ });
80
+
81
+ @media print { // We need printing styles to be last so they can override all other styles.
82
+ .print\:d-block & {
83
+ display: block !important;
84
+ }
85
+ .print\:d-none & {
86
+ display: none !important;
87
+ }
88
+ }
89
+ /* stylelint-enable */
90
+
91
+ // CONFIG
92
+ @import "base/configuration-static.less";
93
+ @import "base/internal.less";
package/lib/stacks.less CHANGED
@@ -1,13 +1,13 @@
1
- //
2
- // STACK OVERFLOW
3
- // THE COMPLETE STANDALONE STACKS
4
- //
5
- // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
6
- // Stack Overflow. For documentation of all these classes and how to contribute,
7
- // visit https://stackoverflow.design/
8
- //
9
- // This is where all the magic happens.
10
- //
11
- // ============================================================================
12
- @import "stacks-static.less";
13
- @import "stacks-dynamic.less";
1
+ //
2
+ // STACK OVERFLOW
3
+ // THE COMPLETE STANDALONE STACKS
4
+ //
5
+ // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
6
+ // Stack Overflow. For documentation of all these classes and how to contribute,
7
+ // visit https://stackoverflow.design/
8
+ //
9
+ // This is where all the magic happens.
10
+ //
11
+ // ============================================================================
12
+ @import "stacks-static.less";
13
+ @import "stacks-dynamic.less";
package/lib/stacks.ts CHANGED
@@ -1,113 +1,113 @@
1
- import * as Stimulus from "@hotwired/stimulus";
2
-
3
- export class StacksApplication extends Stimulus.Application {
4
- static _initializing = true;
5
-
6
- load(...definitions: Stimulus.Definition[]): void;
7
- load(definitions: Stimulus.Definition[]): void;
8
- load(
9
- head: Stimulus.Definition | Stimulus.Definition[],
10
- ...rest: Stimulus.Definition[]
11
- ) {
12
- const definitions = Array.isArray(head) ? head : [head, ...rest];
13
-
14
- for (const definition of definitions) {
15
- const hasPrefix = /^s-/.test(definition.identifier);
16
- if (StacksApplication._initializing && !hasPrefix) {
17
- throw 'Stacks-created Stimulus controller names must start with "s-".';
18
- }
19
- if (!StacksApplication._initializing && hasPrefix) {
20
- throw 'The "s-" prefix on Stimulus controller names is reserved for Stacks-created controllers.';
21
- }
22
- }
23
-
24
- super.load(definitions);
25
- }
26
-
27
- static start(
28
- element?: Element,
29
- schema?: Stimulus.Schema
30
- ): StacksApplication {
31
- const application = new StacksApplication(element, schema);
32
- // eslint-disable-next-line @typescript-eslint/no-floating-promises
33
- application.start();
34
- return application;
35
- }
36
-
37
- static finalize() {
38
- StacksApplication._initializing = false;
39
- }
40
- }
41
-
42
- export const application: Stimulus.Application = StacksApplication.start();
43
-
44
- export class StacksController extends Stimulus.Controller {
45
- protected getElementData(element: Element, key: string) {
46
- return element.getAttribute("data-" + this.identifier + "-" + key);
47
- }
48
- protected setElementData(element: Element, key: string, value: string) {
49
- element.setAttribute("data-" + this.identifier + "-" + key, value);
50
- }
51
- protected removeElementData(element: Element, key: string) {
52
- element.removeAttribute("data-" + this.identifier + "-" + key);
53
- }
54
- protected triggerEvent<T>(
55
- eventName: string,
56
- detail?: T,
57
- optionalElement?: Element
58
- ) {
59
- const namespacedName = this.identifier + ":" + eventName;
60
- let event: CustomEvent<T>;
61
- try {
62
- event = new CustomEvent(namespacedName, {
63
- bubbles: true,
64
- cancelable: true,
65
- detail: detail,
66
- });
67
- } catch (ex) {
68
- // Internet Explorer
69
- // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
70
- event = document.createEvent("CustomEvent");
71
- event.initCustomEvent(namespacedName, true, true, detail);
72
- }
73
- (optionalElement || this.element).dispatchEvent(event);
74
- return event;
75
- }
76
- }
77
-
78
- // ControllerDefinition/createController/addController is here to make
79
- // it easier to consume Stimulus from ES5 files (without classes)
80
- export interface ControllerDefinition {
81
- [name: string]: unknown;
82
- targets?: string[];
83
- }
84
- export function createController(
85
- controllerDefinition: ControllerDefinition
86
- ): typeof StacksController {
87
- // eslint-disable-next-line no-prototype-builtins
88
- const Controller = controllerDefinition.hasOwnProperty("targets")
89
- ? class Controller extends StacksController {
90
- static targets = controllerDefinition.targets ?? [];
91
- }
92
- : class Controller extends StacksController {};
93
-
94
- for (const prop in controllerDefinition) {
95
- const ownPropDescriptor =
96
- // eslint-disable-next-line no-prototype-builtins
97
- controllerDefinition.hasOwnProperty(prop) &&
98
- Object.getOwnPropertyDescriptor(controllerDefinition, prop);
99
- if (prop !== "targets" && ownPropDescriptor) {
100
- Object.defineProperty(
101
- Controller.prototype,
102
- prop,
103
- ownPropDescriptor
104
- );
105
- }
106
- }
107
-
108
- return Controller;
109
- }
110
-
111
- export function addController(name: string, controller: ControllerDefinition) {
112
- application.register(name, createController(controller));
113
- }
1
+ import * as Stimulus from "@hotwired/stimulus";
2
+
3
+ export class StacksApplication extends Stimulus.Application {
4
+ static _initializing = true;
5
+
6
+ load(...definitions: Stimulus.Definition[]): void;
7
+ load(definitions: Stimulus.Definition[]): void;
8
+ load(
9
+ head: Stimulus.Definition | Stimulus.Definition[],
10
+ ...rest: Stimulus.Definition[]
11
+ ) {
12
+ const definitions = Array.isArray(head) ? head : [head, ...rest];
13
+
14
+ for (const definition of definitions) {
15
+ const hasPrefix = /^s-/.test(definition.identifier);
16
+ if (StacksApplication._initializing && !hasPrefix) {
17
+ throw 'Stacks-created Stimulus controller names must start with "s-".';
18
+ }
19
+ if (!StacksApplication._initializing && hasPrefix) {
20
+ throw 'The "s-" prefix on Stimulus controller names is reserved for Stacks-created controllers.';
21
+ }
22
+ }
23
+
24
+ super.load(definitions);
25
+ }
26
+
27
+ static start(
28
+ element?: Element,
29
+ schema?: Stimulus.Schema
30
+ ): StacksApplication {
31
+ const application = new StacksApplication(element, schema);
32
+ // eslint-disable-next-line @typescript-eslint/no-floating-promises
33
+ application.start();
34
+ return application;
35
+ }
36
+
37
+ static finalize() {
38
+ StacksApplication._initializing = false;
39
+ }
40
+ }
41
+
42
+ export const application: Stimulus.Application = StacksApplication.start();
43
+
44
+ export class StacksController extends Stimulus.Controller {
45
+ protected getElementData(element: Element, key: string) {
46
+ return element.getAttribute("data-" + this.identifier + "-" + key);
47
+ }
48
+ protected setElementData(element: Element, key: string, value: string) {
49
+ element.setAttribute("data-" + this.identifier + "-" + key, value);
50
+ }
51
+ protected removeElementData(element: Element, key: string) {
52
+ element.removeAttribute("data-" + this.identifier + "-" + key);
53
+ }
54
+ protected triggerEvent<T>(
55
+ eventName: string,
56
+ detail?: T,
57
+ optionalElement?: Element
58
+ ) {
59
+ const namespacedName = this.identifier + ":" + eventName;
60
+ let event: CustomEvent<T>;
61
+ try {
62
+ event = new CustomEvent(namespacedName, {
63
+ bubbles: true,
64
+ cancelable: true,
65
+ detail: detail,
66
+ });
67
+ } catch (ex) {
68
+ // Internet Explorer
69
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
70
+ event = document.createEvent("CustomEvent");
71
+ event.initCustomEvent(namespacedName, true, true, detail);
72
+ }
73
+ (optionalElement || this.element).dispatchEvent(event);
74
+ return event;
75
+ }
76
+ }
77
+
78
+ // ControllerDefinition/createController/addController is here to make
79
+ // it easier to consume Stimulus from ES5 files (without classes)
80
+ export interface ControllerDefinition {
81
+ [name: string]: unknown;
82
+ targets?: string[];
83
+ }
84
+ export function createController(
85
+ controllerDefinition: ControllerDefinition
86
+ ): typeof StacksController {
87
+ // eslint-disable-next-line no-prototype-builtins
88
+ const Controller = controllerDefinition.hasOwnProperty("targets")
89
+ ? class Controller extends StacksController {
90
+ static targets = controllerDefinition.targets ?? [];
91
+ }
92
+ : class Controller extends StacksController {};
93
+
94
+ for (const prop in controllerDefinition) {
95
+ const ownPropDescriptor =
96
+ // eslint-disable-next-line no-prototype-builtins
97
+ controllerDefinition.hasOwnProperty(prop) &&
98
+ Object.getOwnPropertyDescriptor(controllerDefinition, prop);
99
+ if (prop !== "targets" && ownPropDescriptor) {
100
+ Object.defineProperty(
101
+ Controller.prototype,
102
+ prop,
103
+ ownPropDescriptor
104
+ );
105
+ }
106
+ }
107
+
108
+ return Controller;
109
+ }
110
+
111
+ export function addController(name: string, controller: ControllerDefinition) {
112
+ application.register(name, createController(controller));
113
+ }
@@ -0,0 +1,26 @@
1
+ // patch for @open-wc/testing types
2
+ // TODO: remove when this PR gets merged:
3
+ // https://github.com/open-wc/open-wc/pull/2652
4
+
5
+ // eslint-disable-next-line @typescript-eslint/triple-slash-reference
6
+ /// <reference path="../../node_modules/@open-wc/testing/register-chai-plugins.d.ts" />
7
+
8
+ export { html } from "@open-wc/testing-helpers";
9
+ export { unsafeStatic } from "@open-wc/testing-helpers";
10
+ export { triggerBlurFor } from "@open-wc/testing-helpers";
11
+ export { triggerFocusFor } from "@open-wc/testing-helpers";
12
+ export { oneEvent } from "@open-wc/testing-helpers";
13
+ export { isIE } from "@open-wc/testing-helpers";
14
+ export { defineCE } from "@open-wc/testing-helpers";
15
+ export { aTimeout } from "@open-wc/testing-helpers";
16
+ export { nextFrame } from "@open-wc/testing-helpers";
17
+ export { litFixture } from "@open-wc/testing-helpers";
18
+ export { litFixtureSync } from "@open-wc/testing-helpers";
19
+ export { fixture } from "@open-wc/testing-helpers";
20
+ export { fixtureSync } from "@open-wc/testing-helpers";
21
+ export { fixtureCleanup } from "@open-wc/testing-helpers";
22
+ export { elementUpdated } from "@open-wc/testing-helpers";
23
+ export { waitUntil } from "@open-wc/testing-helpers";
24
+
25
+ export * as chai from "chai";
26
+ export { expect, assert, should } from "chai";