@aquera/nile-elements 0.0.42 → 0.0.43

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 (205) hide show
  1. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.css.js +2 -2
  2. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.css.js.map +1 -1
  3. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-breadcrumb/nile-breadcrumb.js +5 -0
  4. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-breadcrumb/nile-breadcrumb.js.map +1 -1
  5. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.css.js +1 -1
  6. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.css.js.map +1 -1
  7. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button-toggle/nile-button-toggle.css.js +1 -1
  8. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button-toggle/nile-button-toggle.css.js.map +1 -1
  9. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.css.js +31 -8
  10. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.css.js.map +1 -1
  11. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.js +19 -20
  12. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.js.map +1 -1
  13. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-chip/nile-chip.css.js +1 -1
  14. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-chip/nile-chip.css.js.map +1 -1
  15. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-code-editor/nile-code-editor.d.ts +9 -0
  16. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-code-editor/nile-code-editor.js +84 -47
  17. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
  18. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-notification/nile-error-notification.css.js +1 -1
  19. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-notification/nile-error-notification.css.js.map +1 -1
  20. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-form-error-message/nile-form-error-message.css.js +1 -1
  21. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-form-error-message/nile-form-error-message.css.js.map +1 -1
  22. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-form-help-text/nile-form-help-text.css.js +1 -1
  23. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-form-help-text/nile-form-help-text.css.js.map +1 -1
  24. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-input/nile-input.css.js +1 -1
  25. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-input/nile-input.css.js.map +1 -1
  26. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-link/nile-link.css.js +1 -1
  27. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-link/nile-link.css.js.map +1 -1
  28. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-menu/nile-menu.js +20 -10
  29. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-menu/nile-menu.js.map +1 -1
  30. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-menu-item/nile-menu-item.d.ts +2 -0
  31. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-menu-item/nile-menu-item.js +33 -7
  32. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-menu-item/nile-menu-item.js.map +1 -1
  33. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-popover/nile-popover.css.js +1 -1
  34. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-popover/nile-popover.css.js.map +1 -1
  35. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio-group/nile-radio-group.css.js +1 -1
  36. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio-group/nile-radio-group.css.js.map +1 -1
  37. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.css.js +1 -3
  38. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.css.js.map +1 -1
  39. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-slide-toggle/nile-slide-toggle.css.js +1 -1
  40. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-slide-toggle/nile-slide-toggle.css.js.map +1 -1
  41. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.css.js +2 -2
  42. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.css.js.map +1 -1
  43. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js +1 -1
  44. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js.map +1 -1
  45. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-tab/nile-tab.css.js +1 -1
  46. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-tab/nile-tab.css.js.map +1 -1
  47. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-textarea/nile-textarea.css.js +1 -1
  48. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-textarea/nile-textarea.css.js.map +1 -1
  49. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-toast/nile-toast.css.js +1 -1
  50. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-toast/nile-toast.css.js.map +1 -1
  51. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
  52. package/demo/variables.css +641 -0
  53. package/demo/variables_v2.css +541 -0
  54. package/dist/index.iife.js +125 -83
  55. package/dist/nile-badge/nile-badge.css.cjs.js +1 -1
  56. package/dist/nile-badge/nile-badge.css.cjs.js.map +1 -1
  57. package/dist/nile-badge/nile-badge.css.esm.js +2 -2
  58. package/dist/nile-breadcrumb/nile-breadcrumb.cjs.js +1 -1
  59. package/dist/nile-breadcrumb/nile-breadcrumb.cjs.js.map +1 -1
  60. package/dist/nile-breadcrumb/nile-breadcrumb.esm.js +2 -1
  61. package/dist/nile-breadcrumb-item/nile-breadcrumb-item.css.cjs.js +1 -1
  62. package/dist/nile-breadcrumb-item/nile-breadcrumb-item.css.cjs.js.map +1 -1
  63. package/dist/nile-breadcrumb-item/nile-breadcrumb-item.css.esm.js +1 -1
  64. package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js +1 -1
  65. package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js.map +1 -1
  66. package/dist/nile-button-toggle/nile-button-toggle.css.esm.js +1 -1
  67. package/dist/nile-calendar/nile-calendar.cjs.js +1 -1
  68. package/dist/nile-calendar/nile-calendar.cjs.js.map +1 -1
  69. package/dist/nile-calendar/nile-calendar.css.cjs.js +1 -1
  70. package/dist/nile-calendar/nile-calendar.css.cjs.js.map +1 -1
  71. package/dist/nile-calendar/nile-calendar.css.esm.js +31 -8
  72. package/dist/nile-calendar/nile-calendar.esm.js +22 -23
  73. package/dist/nile-chip/nile-chip.css.cjs.js +1 -1
  74. package/dist/nile-chip/nile-chip.css.cjs.js.map +1 -1
  75. package/dist/nile-chip/nile-chip.css.esm.js +1 -1
  76. package/dist/nile-code-editor/extensionSetup.cjs.js +5 -5
  77. package/dist/nile-code-editor/extensionSetup.cjs.js.map +1 -1
  78. package/dist/nile-code-editor/extensionSetup.esm.js +1 -1
  79. package/dist/nile-code-editor/nile-code-editor.cjs.js +2 -2
  80. package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
  81. package/dist/nile-code-editor/nile-code-editor.esm.js +3 -4
  82. package/dist/nile-error-notification/nile-error-notification.css.cjs.js +1 -1
  83. package/dist/nile-error-notification/nile-error-notification.css.cjs.js.map +1 -1
  84. package/dist/nile-error-notification/nile-error-notification.css.esm.js +1 -1
  85. package/dist/nile-form-error-message/nile-form-error-message.css.cjs.js +1 -1
  86. package/dist/nile-form-error-message/nile-form-error-message.css.cjs.js.map +1 -1
  87. package/dist/nile-form-error-message/nile-form-error-message.css.esm.js +1 -1
  88. package/dist/nile-form-help-text/nile-form-help-text.css.cjs.js +1 -1
  89. package/dist/nile-form-help-text/nile-form-help-text.css.cjs.js.map +1 -1
  90. package/dist/nile-form-help-text/nile-form-help-text.css.esm.js +3 -3
  91. package/dist/nile-input/nile-input.css.cjs.js +1 -1
  92. package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
  93. package/dist/nile-input/nile-input.css.esm.js +1 -1
  94. package/dist/nile-link/nile-link.css.cjs.js +1 -1
  95. package/dist/nile-link/nile-link.css.cjs.js.map +1 -1
  96. package/dist/nile-link/nile-link.css.esm.js +3 -3
  97. package/dist/nile-menu/nile-menu.cjs.js +1 -1
  98. package/dist/nile-menu/nile-menu.cjs.js.map +1 -1
  99. package/dist/nile-menu/nile-menu.esm.js +16 -11
  100. package/dist/nile-menu-item/nile-menu-item.cjs.js +1 -1
  101. package/dist/nile-menu-item/nile-menu-item.cjs.js.map +1 -1
  102. package/dist/nile-menu-item/nile-menu-item.esm.js +24 -7
  103. package/dist/nile-popover/nile-popover.css.cjs.js +1 -1
  104. package/dist/nile-popover/nile-popover.css.cjs.js.map +1 -1
  105. package/dist/nile-popover/nile-popover.css.esm.js +1 -1
  106. package/dist/nile-radio-group/nile-radio-group.css.cjs.js +1 -1
  107. package/dist/nile-radio-group/nile-radio-group.css.cjs.js.map +1 -1
  108. package/dist/nile-radio-group/nile-radio-group.css.esm.js +3 -3
  109. package/dist/nile-select/nile-select.css.cjs.js +1 -1
  110. package/dist/nile-select/nile-select.css.cjs.js.map +1 -1
  111. package/dist/nile-select/nile-select.css.esm.js +1 -3
  112. package/dist/nile-slide-toggle/nile-slide-toggle.css.cjs.js +1 -1
  113. package/dist/nile-slide-toggle/nile-slide-toggle.css.cjs.js.map +1 -1
  114. package/dist/nile-slide-toggle/nile-slide-toggle.css.esm.js +1 -1
  115. package/dist/nile-switcher/nile-switcher.cjs.js +1 -1
  116. package/dist/nile-switcher/nile-switcher.cjs.js.map +1 -1
  117. package/dist/nile-switcher/nile-switcher.css.cjs.js +1 -1
  118. package/dist/nile-switcher/nile-switcher.css.cjs.js.map +1 -1
  119. package/dist/nile-switcher/nile-switcher.css.esm.js +4 -4
  120. package/dist/nile-switcher/nile-switcher.esm.js +1 -1
  121. package/dist/nile-tab/nile-tab.css.cjs.js +1 -1
  122. package/dist/nile-tab/nile-tab.css.cjs.js.map +1 -1
  123. package/dist/nile-tab/nile-tab.css.esm.js +1 -1
  124. package/dist/nile-textarea/nile-textarea.css.cjs.js +1 -1
  125. package/dist/nile-textarea/nile-textarea.css.cjs.js.map +1 -1
  126. package/dist/nile-textarea/nile-textarea.css.esm.js +1 -1
  127. package/dist/nile-toast/nile-toast.css.cjs.js +1 -1
  128. package/dist/nile-toast/nile-toast.css.cjs.js.map +1 -1
  129. package/dist/nile-toast/nile-toast.css.esm.js +1 -1
  130. package/dist/src/nile-badge/nile-badge.css.js +2 -2
  131. package/dist/src/nile-badge/nile-badge.css.js.map +1 -1
  132. package/dist/src/nile-breadcrumb/nile-breadcrumb.js +5 -0
  133. package/dist/src/nile-breadcrumb/nile-breadcrumb.js.map +1 -1
  134. package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.css.js +1 -1
  135. package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.css.js.map +1 -1
  136. package/dist/src/nile-button-toggle/nile-button-toggle.css.js +1 -1
  137. package/dist/src/nile-button-toggle/nile-button-toggle.css.js.map +1 -1
  138. package/dist/src/nile-calendar/nile-calendar.css.js +31 -8
  139. package/dist/src/nile-calendar/nile-calendar.css.js.map +1 -1
  140. package/dist/src/nile-calendar/nile-calendar.js +19 -20
  141. package/dist/src/nile-calendar/nile-calendar.js.map +1 -1
  142. package/dist/src/nile-chip/nile-chip.css.js +1 -1
  143. package/dist/src/nile-chip/nile-chip.css.js.map +1 -1
  144. package/dist/src/nile-code-editor/nile-code-editor.d.ts +9 -0
  145. package/dist/src/nile-code-editor/nile-code-editor.js +84 -47
  146. package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
  147. package/dist/src/nile-error-notification/nile-error-notification.css.js +1 -1
  148. package/dist/src/nile-error-notification/nile-error-notification.css.js.map +1 -1
  149. package/dist/src/nile-form-error-message/nile-form-error-message.css.js +1 -1
  150. package/dist/src/nile-form-error-message/nile-form-error-message.css.js.map +1 -1
  151. package/dist/src/nile-form-help-text/nile-form-help-text.css.js +1 -1
  152. package/dist/src/nile-form-help-text/nile-form-help-text.css.js.map +1 -1
  153. package/dist/src/nile-input/nile-input.css.js +1 -1
  154. package/dist/src/nile-input/nile-input.css.js.map +1 -1
  155. package/dist/src/nile-link/nile-link.css.js +1 -1
  156. package/dist/src/nile-link/nile-link.css.js.map +1 -1
  157. package/dist/src/nile-menu/nile-menu.js +20 -10
  158. package/dist/src/nile-menu/nile-menu.js.map +1 -1
  159. package/dist/src/nile-menu-item/nile-menu-item.d.ts +2 -0
  160. package/dist/src/nile-menu-item/nile-menu-item.js +33 -7
  161. package/dist/src/nile-menu-item/nile-menu-item.js.map +1 -1
  162. package/dist/src/nile-popover/nile-popover.css.js +1 -1
  163. package/dist/src/nile-popover/nile-popover.css.js.map +1 -1
  164. package/dist/src/nile-radio-group/nile-radio-group.css.js +1 -1
  165. package/dist/src/nile-radio-group/nile-radio-group.css.js.map +1 -1
  166. package/dist/src/nile-select/nile-select.css.js +1 -3
  167. package/dist/src/nile-select/nile-select.css.js.map +1 -1
  168. package/dist/src/nile-slide-toggle/nile-slide-toggle.css.js +1 -1
  169. package/dist/src/nile-slide-toggle/nile-slide-toggle.css.js.map +1 -1
  170. package/dist/src/nile-switcher/nile-switcher.css.js +2 -2
  171. package/dist/src/nile-switcher/nile-switcher.css.js.map +1 -1
  172. package/dist/src/nile-switcher/nile-switcher.js +1 -1
  173. package/dist/src/nile-switcher/nile-switcher.js.map +1 -1
  174. package/dist/src/nile-tab/nile-tab.css.js +1 -1
  175. package/dist/src/nile-tab/nile-tab.css.js.map +1 -1
  176. package/dist/src/nile-textarea/nile-textarea.css.js +1 -1
  177. package/dist/src/nile-textarea/nile-textarea.css.js.map +1 -1
  178. package/dist/src/nile-toast/nile-toast.css.js +1 -1
  179. package/dist/src/nile-toast/nile-toast.css.js.map +1 -1
  180. package/dist/tsconfig.tsbuildinfo +1 -1
  181. package/package.json +2 -2
  182. package/src/nile-badge/nile-badge.css.ts +2 -2
  183. package/src/nile-breadcrumb/nile-breadcrumb.ts +7 -1
  184. package/src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts +1 -1
  185. package/src/nile-button-toggle/nile-button-toggle.css.ts +1 -1
  186. package/src/nile-calendar/nile-calendar.css.ts +31 -8
  187. package/src/nile-calendar/nile-calendar.ts +68 -77
  188. package/src/nile-chip/nile-chip.css.ts +1 -1
  189. package/src/nile-code-editor/nile-code-editor.ts +91 -40
  190. package/src/nile-error-notification/nile-error-notification.css.ts +1 -1
  191. package/src/nile-form-error-message/nile-form-error-message.css.ts +1 -1
  192. package/src/nile-form-help-text/nile-form-help-text.css.ts +1 -1
  193. package/src/nile-input/nile-input.css.ts +1 -1
  194. package/src/nile-link/nile-link.css.ts +1 -1
  195. package/src/nile-menu/nile-menu.ts +25 -14
  196. package/src/nile-menu-item/nile-menu-item.ts +42 -9
  197. package/src/nile-popover/nile-popover.css.ts +1 -1
  198. package/src/nile-radio-group/nile-radio-group.css.ts +1 -1
  199. package/src/nile-select/nile-select.css.ts +1 -3
  200. package/src/nile-slide-toggle/nile-slide-toggle.css.ts +1 -1
  201. package/src/nile-switcher/nile-switcher.css.ts +2 -2
  202. package/src/nile-switcher/nile-switcher.ts +1 -1
  203. package/src/nile-tab/nile-tab.css.ts +1 -1
  204. package/src/nile-textarea/nile-textarea.css.ts +1 -1
  205. package/src/nile-toast/nile-toast.css.ts +1 -1
@@ -10,6 +10,7 @@ import { customElement, query } from 'lit/decorators.js';
10
10
  import { styles } from './nile-code-editor.css';
11
11
  import { EditorView } from 'codemirror';
12
12
  import { EditorState, Compartment } from '@codemirror/state';
13
+ import { lineNumbers } from '@codemirror/view';
13
14
  import { javascript, javascriptLanguage, scopeCompletionSource, } from '@codemirror/lang-javascript';
14
15
  import { autocompletion } from '@codemirror/autocomplete';
15
16
  import NileElement from '../internal/nile-element';
@@ -37,6 +38,8 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
37
38
  this.expandable = false;
38
39
  this.readonly = false;
39
40
  this.lineNumbersComp = new Compartment();
41
+ this.restrictSingleLineComp = new Compartment();
42
+ this.readOnlyComp = new Compartment();
40
43
  /* #endregion */
41
44
  }
42
45
  /**
@@ -59,55 +62,90 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
59
62
  return code.replace(/\s+/g, ' ').trim();
60
63
  }
61
64
  handleValueChange() { }
65
+ getLineNumbersExension() {
66
+ return this.multiline ? lineNumbers() : [];
67
+ }
68
+ getReadOnlyExtension() {
69
+ return EditorState.readOnly.of(this.readonly);
70
+ }
71
+ getSingleLineExtension() {
72
+ return !this.multiline ? EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr) : [];
73
+ }
74
+ firstUpdated() {
75
+ const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());
76
+ const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
77
+ const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension());
78
+ const customAutoCompletions = javascriptLanguage.data.of({
79
+ autocomplete: scopeCompletionSource(this.customAutoCompletions),
80
+ });
81
+ let startState = EditorState.create({
82
+ doc: !this.multiline
83
+ ? this.convertToSingleLine(this.value)
84
+ : this.value,
85
+ extensions: [
86
+ basicSetup({
87
+ lineNumbers: false,
88
+ highlightActiveLine: false,
89
+ foldGutter: false,
90
+ }),
91
+ lineNumbersExtension,
92
+ readOnlyExtension,
93
+ restrictSingleLineExtension,
94
+ customAutoCompletions,
95
+ autocompletion(),
96
+ javascript(),
97
+ this.setTheme(),
98
+ EditorView.updateListener.of((v) => {
99
+ if (v.docChanged) {
100
+ this.emitValues(this.view.state.doc.toString());
101
+ }
102
+ }),
103
+ ],
104
+ });
105
+ this.view = new EditorView({
106
+ state: startState,
107
+ parent: this.codeEditor,
108
+ });
109
+ this.addOpenListeners();
110
+ }
111
+ addOpenListeners() {
112
+ this.view.contentDOM.addEventListener('blur', () => this.toggleFocusAndBlur('blur'));
113
+ this.view.contentDOM.addEventListener('focus', () => this.toggleFocusAndBlur('focus'));
114
+ }
115
+ singleLineMultiLineToggle() {
116
+ this.view.dispatch({
117
+ changes: {
118
+ from: 0,
119
+ to: this.view.state.doc.length,
120
+ insert: !this.multiline
121
+ ? this.convertToSingleLine(this.value)
122
+ : this.value,
123
+ },
124
+ });
125
+ }
62
126
  updated(changedProperties) {
63
127
  super.updated(changedProperties);
64
- if (changedProperties.has('value')) {
65
- const customAutoCompletions = javascriptLanguage.data.of({
66
- autocomplete: scopeCompletionSource(this.customAutoCompletions),
128
+ if (changedProperties.has('value') && this.updateValue) {
129
+ // Editor has already been initialized, update its state
130
+ this.singleLineMultiLineToggle();
131
+ }
132
+ if (changedProperties.has('multiline')) {
133
+ this.view.dispatch({
134
+ effects: [this.lineNumbersComp.reconfigure(this.getLineNumbersExension()),
135
+ this.restrictSingleLineComp.reconfigure(this.getSingleLineExtension())],
67
136
  });
68
- if (!this.view) {
69
- let startState = EditorState.create({
70
- doc: !this.multiline
71
- ? this.convertToSingleLine(this.value)
72
- : this.value,
73
- extensions: [
74
- basicSetup({
75
- lineNumbers: !!this.multiline,
76
- highlightActiveLine: false,
77
- foldGutter: !!this.multiline,
78
- }),
79
- EditorState.readOnly.of(this.readonly),
80
- customAutoCompletions,
81
- autocompletion(),
82
- javascript(),
83
- this.setTheme(),
84
- !this.multiline ? this.restrictSingleLine() : [],
85
- EditorView.updateListener.of((v) => {
86
- if (v.docChanged) {
87
- this.emitValues(this.view.state.doc.toString());
88
- }
89
- }),
90
- ],
91
- });
92
- this.view = new EditorView({
93
- state: startState,
94
- parent: this.codeEditor,
95
- });
96
- }
97
- else {
98
- if (this.updateValue) {
99
- // Editor has already been initialized, update its state
100
- this.view.dispatch({
101
- changes: {
102
- from: 0,
103
- to: this.view.state.doc.length,
104
- insert: !this.multiline
105
- ? this.convertToSingleLine(this.value)
106
- : this.value,
107
- },
108
- });
109
- }
110
- }
137
+ this.singleLineMultiLineToggle();
138
+ }
139
+ if (changedProperties.has('readonly')) {
140
+ this.view.dispatch({ effects: this.readOnlyComp.reconfigure(this.getReadOnlyExtension()) });
141
+ }
142
+ }
143
+ toggleFocusAndBlur(action) {
144
+ if (action === 'blur') {
145
+ this.emit('nile-blur', { onBlur: true });
146
+ }
147
+ if (action === 'focus') {
148
+ this.emit('nile-focus', { onFocus: true });
111
149
  }
112
150
  }
113
151
  setTheme() {
@@ -128,7 +166,6 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
128
166
  const noborder = !!this.noborder;
129
167
  return html `<div
130
168
  part="code-editor-base"
131
- exportparts="code-editor-base : code-editor-base"
132
169
  class=${classMap({
133
170
  'code-mirror': true,
134
171
  noborder: noborder,
@@ -1 +1 @@
1
- {"version":3,"file":"nile-code-editor.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n PropertyValueMap,\n} from 'lit-element';\nimport { customElement, query } from 'lit/decorators.js';\nimport { styles } from './nile-code-editor.css';\nimport { EditorView } from 'codemirror';\nimport { ViewUpdate } from '@codemirror/view';\nimport { EditorState, Compartment } from '@codemirror/state';\nimport {\n javascript,\n javascriptLanguage,\n scopeCompletionSource,\n completionPath,\n} from '@codemirror/lang-javascript';\nimport { autocompletion } from '@codemirror/autocomplete';\nimport { CompletionContext, Completion } from '@codemirror/autocomplete';\nimport NileElement from '../internal/nile-element';\nimport { basicSetup } from './extensionSetup';\nimport { watch } from '../internal/watch';\nimport { PropertyValues } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { Theme } from './theme';\n\n// Choose the appropriate mode for your use case\n\n/**\n * Nile icon component.\n *\n * @tag nile-code-editor\n *\n */\n@customElement('nile-code-editor')\nexport class NileCodeEditor extends NileElement {\n @query('.code-mirror') codeEditor: HTMLInputElement;\n @property({ type: Boolean, reflect: true }) multiline = false;\n @property({ type: String }) value = '';\n @property({ type: String }) customAutoCompletions: any = {};\n @property({ type: Boolean }) updateValue: any = false;\n @property({ attribute: 'error-message' }) errorMessage = '';\n @property({ attribute: 'error' }) error = false;\n @property({ attribute: 'noborder' }) noborder = false;\n\n @property({ type: Boolean }) expandable: any = false;\n @property({ type: Boolean }) readonly: any = false;\n\n /**\n * The styles for CodeEditor\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit('nile-init');\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n view: EditorView;\n\n convertToSingleLine(code: any) {\n // Remove line breaks and unnecessary whitespace\n return code.replace(/\\s+/g, ' ').trim();\n }\n lineNumbersComp = new Compartment();\n\n @watch(['value'], { waitUntilFirstUpdate: true })\n handleValueChange() {}\n\n updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n const customAutoCompletions = javascriptLanguage.data.of({\n autocomplete: scopeCompletionSource(this.customAutoCompletions),\n });\n if (!this.view) {\n let startState = EditorState.create({\n doc: !this.multiline\n ? this.convertToSingleLine(this.value)\n : this.value,\n extensions: [\n basicSetup({\n lineNumbers: !!this.multiline,\n highlightActiveLine: false,\n foldGutter: !!this.multiline,\n }),\n EditorState.readOnly.of(this.readonly),\n customAutoCompletions,\n autocompletion(),\n javascript(),\n this.setTheme(),\n !this.multiline ? this.restrictSingleLine() : [],\n EditorView.updateListener.of((v: ViewUpdate) => {\n if (v.docChanged) {\n this.emitValues(this.view.state.doc.toString());\n }\n }),\n ],\n });\n\n this.view = new EditorView({\n state: startState,\n parent: this.codeEditor,\n });\n } else {\n if (this.updateValue) {\n // Editor has already been initialized, update its state\n this.view.dispatch({\n changes: {\n from: 0,\n to: this.view.state.doc.length,\n insert: !this.multiline\n ? this.convertToSingleLine(this.value)\n : this.value,\n },\n });\n }\n }\n }\n }\n\n setTheme() {\n return EditorView.theme(Theme);\n }\n\n emitValues(value: string) {\n this.emit('nile-change', { value: value });\n }\n\n expandCodeEditor() {\n this.emit('nile-expand', { expand: true });\n }\n\n restrictSingleLine() {\n return EditorState.transactionFilter.of(tr =>\n tr.newDoc.lines > 1 ? [] : tr\n );\n }\n public render(): TemplateResult {\n const hasErrorMessage = !!this.errorMessage;\n const hasError = !!this.error;\n const noborder = !!this.noborder;\n return html`<div\n part=\"code-editor-base\"\n exportparts=\"code-editor-base : code-editor-base\"\n class=${classMap({\n 'code-mirror': true,\n noborder: noborder,\n error: hasError || hasErrorMessage,\n 'code-mirror__singleline': !this.multiline,\n })}\n >\n ${this.expandable\n ? html` <nile-icon\n name=\"expand-2\"\n class=\"code-editor__icon__container\"\n size=\"16\"\n color=\"black\"\n @click=\"${(e: CustomEvent) => this.expandCodeEditor()}\"\n ></nile-icon>`\n : ''}\n </div>\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}`;\n }\n\n /* #endregion */\n}\n\nexport default NileCodeEditor;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-code-editor': NileCodeEditor;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-code-editor.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n PropertyValueMap,\n} from 'lit-element';\nimport { customElement, query } from 'lit/decorators.js';\nimport { styles } from './nile-code-editor.css';\nimport { EditorView } from 'codemirror';\nimport { ViewUpdate } from '@codemirror/view';\nimport { EditorState, Compartment } from '@codemirror/state';\nimport {lineNumbers} from '@codemirror/view';\nimport {\n javascript,\n javascriptLanguage,\n scopeCompletionSource,\n completionPath,\n} from '@codemirror/lang-javascript';\nimport { autocompletion } from '@codemirror/autocomplete';\nimport { CompletionContext, Completion } from '@codemirror/autocomplete';\nimport NileElement from '../internal/nile-element';\nimport { basicSetup } from './extensionSetup';\nimport { watch } from '../internal/watch';\nimport { PropertyValues } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { Theme } from './theme';\n\n// Choose the appropriate mode for your use case\n\n/**\n * Nile icon component.\n *\n * @tag nile-code-editor\n *\n */\n@customElement('nile-code-editor')\nexport class NileCodeEditor extends NileElement {\n @query('.code-mirror') codeEditor: HTMLInputElement;\n @property({ type: Boolean, reflect: true }) multiline = false;\n @property({ type: String }) value = '';\n @property({ type: String }) customAutoCompletions: any = {};\n @property({ type: Boolean }) updateValue: any = false;\n @property({ attribute: 'error-message' }) errorMessage = '';\n @property({ attribute: 'error' }) error = false;\n @property({ attribute: 'noborder' }) noborder = false;\n\n @property({ type: Boolean }) expandable: any = false;\n @property({ type: Boolean }) readonly: any = false;\n\n /**\n * The styles for CodeEditor\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.emit('nile-init');\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n view: EditorView;\n\n convertToSingleLine(code: any) {\n // Remove line breaks and unnecessary whitespace\n return code.replace(/\\s+/g, ' ').trim();\n }\n lineNumbersComp = new Compartment();\n restrictSingleLineComp = new Compartment();\n readOnlyComp = new Compartment();\n\n\n @watch(['value'], { waitUntilFirstUpdate: true })\n handleValueChange() { }\n\n getLineNumbersExension() {\n return this.multiline ? lineNumbers() : [];\n }\n\n getReadOnlyExtension() {\n return EditorState.readOnly.of(this.readonly);\n }\n\n getSingleLineExtension(){\n return !this.multiline ? EditorState.transactionFilter.of(tr =>\n tr.newDoc.lines > 1 ? [] : tr\n ) : [];\n }\n\n firstUpdated() {\n const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());\n const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());\n const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())\n const customAutoCompletions = javascriptLanguage.data.of({\n autocomplete: scopeCompletionSource(this.customAutoCompletions),\n });\n let startState = EditorState.create({\n doc: !this.multiline\n ? this.convertToSingleLine(this.value)\n : this.value,\n extensions: [\n basicSetup({\n lineNumbers: false,\n highlightActiveLine: false,\n foldGutter: false,\n }),\n lineNumbersExtension,\n readOnlyExtension,\n restrictSingleLineExtension,\n customAutoCompletions,\n autocompletion(),\n javascript(),\n this.setTheme(),\n EditorView.updateListener.of((v: ViewUpdate) => {\n if (v.docChanged) {\n this.emitValues(this.view.state.doc.toString());\n }\n }),\n \n ],\n });\n\n this.view = new EditorView({\n state: startState,\n parent: this.codeEditor,\n });\n this.addOpenListeners();\n }\n \n\n addOpenListeners() {\n this.view.contentDOM.addEventListener('blur', () => this.toggleFocusAndBlur('blur'));\n this.view.contentDOM.addEventListener('focus', () => this.toggleFocusAndBlur('focus'));\n }\n \n\n singleLineMultiLineToggle() {\n this.view.dispatch({\n changes: {\n from: 0,\n to: this.view.state.doc.length,\n insert: !this.multiline\n ? this.convertToSingleLine(this.value)\n : this.value,\n },\n });\n }\n \n updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n if (changedProperties.has('value') && this.updateValue) {\n // Editor has already been initialized, update its state\n this.singleLineMultiLineToggle();\n }\n if (changedProperties.has('multiline')) {\n this.view.dispatch({\n effects: [this.lineNumbersComp.reconfigure(this.getLineNumbersExension()),\n this.restrictSingleLineComp.reconfigure(this.getSingleLineExtension())],\n })\n this.singleLineMultiLineToggle();\n }\n if (changedProperties.has('readonly')) {\n this.view.dispatch({ effects: this.readOnlyComp.reconfigure(this.getReadOnlyExtension()) }) \n }\n }\n\n toggleFocusAndBlur(action: 'blur' | 'focus') {\n if(action === 'blur'){\n this.emit('nile-blur', { onBlur : true });\n }\n if (action === 'focus') {\n this.emit('nile-focus', { onFocus : true });\n }\n }\n\n setTheme() {\n return EditorView.theme(Theme);\n }\n\n emitValues(value: string) {\n this.emit('nile-change', { value: value });\n }\n\n expandCodeEditor() {\n this.emit('nile-expand', { expand: true });\n }\n\n restrictSingleLine() {\n return EditorState.transactionFilter.of(tr =>\n tr.newDoc.lines > 1 ? [] : tr\n );\n }\n public render(): TemplateResult {\n const hasErrorMessage = !!this.errorMessage;\n const hasError = !!this.error;\n const noborder = !!this.noborder;\n return html`<div\n part=\"code-editor-base\"\n class=${classMap({\n 'code-mirror': true,\n noborder: noborder,\n error: hasError || hasErrorMessage,\n 'code-mirror__singleline': !this.multiline,\n })}\n >\n ${this.expandable\n ? html` <nile-icon\n name=\"expand-2\"\n class=\"code-editor__icon__container\"\n size=\"16\"\n color=\"black\"\n @click=\"${(e: CustomEvent) => this.expandCodeEditor()}\"\n ></nile-icon>`\n : ''}\n </div>\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}`;\n }\n\n /* #endregion */\n}\n\nexport default NileCodeEditor;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-code-editor': NileCodeEditor;\n }\n}\n"]}
@@ -13,7 +13,7 @@ export const styles = css `
13
13
  }
14
14
 
15
15
  .nile-error-notification {
16
- font-family: Colfax-regular;
16
+ font-family: var(--nile-font-family-serif);
17
17
  font-size: 12px;
18
18
  font-style: normal;
19
19
  font-weight: 400;
@@ -1 +1 @@
1
- {"version":3,"file":"nile-error-notification.css.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * ErrorNotification CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-error-notification {\n font-family: Colfax-regular;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n padding: 8px;\n background: var(--nile-colors-neutral-100);\n color: var(--nile-colors-red-500);\n box-sizing: border-box;\n }\n\n .nile-error-notification__icon {\n vertical-align: middle;\n margin-right: 4px;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-error-notification.css.js","sourceRoot":"","sources":["../../../src/nile-error-notification/nile-error-notification.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * ErrorNotification CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-error-notification {\n font-family: var(--nile-font-family-serif);\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n padding: 8px;\n background: var(--nile-colors-neutral-100);\n color: var(--nile-colors-red-500);\n box-sizing: border-box;\n }\n\n .nile-error-notification__icon {\n vertical-align: middle;\n margin-right: 4px;\n }\n`;\n\nexport default [styles];\n"]}
@@ -16,7 +16,7 @@ export const styles = css `
16
16
  display: flex;
17
17
  align-items: center;
18
18
  color: var(--nile-colors-red-700);
19
- font-family: Colfax-regular;
19
+ font-family: var(--nile-font-family-serif);
20
20
  font-size: 12px;
21
21
  font-style: normal;
22
22
  font-weight: 400;
@@ -1 +1 @@
1
- {"version":3,"file":"nile-form-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * FormErrorMessage CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-form-error-message {\n display: flex;\n align-items: center;\n color: var(--nile-colors-red-700);\n font-family: Colfax-regular;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n margin-top: 6px;\n }\n\n .nile-form-error-message__icon {\n margin-right: 6px;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-form-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-form-error-message/nile-form-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * FormErrorMessage CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-form-error-message {\n display: flex;\n align-items: center;\n color: var(--nile-colors-red-700);\n font-family: var(--nile-font-family-serif);\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n margin-top: 6px;\n }\n\n .nile-form-error-message__icon {\n margin-right: 6px;\n }\n`;\n\nexport default [styles];\n"]}
@@ -17,7 +17,7 @@ export const styles = css `
17
17
  display: flex;
18
18
  align-items: center;
19
19
  color: var(--nile-colors-dark-500);
20
- font-family: Colfax-regular;
20
+ font-family: var(--nile-font-family-serif);
21
21
  font-size: 12px;
22
22
  font-style: normal;
23
23
  font-weight: 400;
@@ -1 +1 @@
1
- {"version":3,"file":"nile-form-help-text.css.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * FormHelpText CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n\n .nile-form-help-text {\n display: flex;\n align-items: center;\n color: var(--nile-colors-dark-500);\n font-family: Colfax-regular;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n margin-top: 6px;\n margin-right: 4px;\n width: auto;\n }\n\n .nile-form-help-text__more-button {\n display: inline-flex;\n gap: 4px;\n color: var(--nile-colors-primary-600);\n cursor: pointer;\n white-space: nowrap;\n align-items: center\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-form-help-text.css.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * FormHelpText CSS\n */\nexport const styles = css`\n\t:host {\n\n\t}\n\n .nile-form-help-text {\n display: flex;\n align-items: center;\n color: var(--nile-colors-dark-500);\n font-family: var(--nile-font-family-serif);\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.2px;\n margin-top: 6px;\n margin-right: 4px;\n width: auto;\n }\n\n .nile-form-help-text__more-button {\n display: inline-flex;\n gap: 4px;\n color: var(--nile-colors-primary-600);\n cursor: pointer;\n white-space: nowrap;\n align-items: center\n }\n`;\n\nexport default [styles];\n"]}
@@ -27,7 +27,7 @@ export const styles = css `
27
27
  color: inherit;
28
28
  margin-bottom: 12px;
29
29
  color: var(--nile-colors-dark-900);
30
- font-family: Colfax-regular;
30
+ font-family: var(--nile-font-family-serif);
31
31
  font-size: 14px;
32
32
  font-style: normal;
33
33
  font-weight: 400;
@@ -1 +1 @@
1
- {"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsbxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #A4121C;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7F7F7F;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #A4121C;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px; }\n\n /* Standard inputs */\n .input--standard {\n background-color: hsl(0, 0%, 100%);\n border: solid 1px #c7ced4;\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: hsl(240 3.8% 46.1%);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: 1rem;\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsbxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 12px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: #A4121C;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7F7F7F;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #A4121C;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-weight: 400;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n box-sizing: border-box;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.2px; }\n\n /* Standard inputs */\n .input--standard {\n background-color: hsl(0, 0%, 100%);\n border: solid 1px #c7ced4;\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input--standard.input--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: hsl(240 3.8% 46.1%);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: 1rem;\n height: 38px;\n }\n\n .input--medium .input__control {\n height: 14px;\n padding: 12px;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n .input__password {\n font-family: 'disc';\n }\n`;\n\nexport default [styles];\n"]}
@@ -29,7 +29,7 @@ export const styles = css `
29
29
  .link__label {
30
30
  color: #005ea6;
31
31
  text-align: center;
32
- font-family: Colfax-regular;
32
+ font-family: var(--nile-font-family-serif);
33
33
  font-size: 14px;
34
34
  font-style: normal;
35
35
  font-weight: 400;
@@ -1 +1 @@
1
- {"version":3,"file":"nile-link.css.js","sourceRoot":"","sources":["../../../src/nile-link/nile-link.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Link CSS\n */\nexport const styles = css`\n :host {\n }\n\n .link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n user-select: none;\n white-space: nowrap;\n padding: 12px;\n gap: 8px;\n height: 38px;\n box-sizing: border-box;\n cursor: pointer;\n }\n\n .link__label {\n color: #005ea6;\n text-align: center;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .link--disabled {\n color: rgba(0, 94, 166, 0.5);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n\n .link:not(.link--disabled):not(.link__button):hover {\n color: #005291;\n text-decoration-line: underline;\n }\n\n .link:not(.link--disabled):not(.link__button):active {\n color: #002f53;\n text-decoration-line: underline;\n }\n\n .link__button:hover {\n color: #005291;\n border-radius: 4px;\n background: #f5f7f7;\n }\n\n .link__button:active {\n color: #002f53;\n border-radius: 4px;\n background: rgba(0, 94, 166, 0.1);\n }\n\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-link.css.js","sourceRoot":"","sources":["../../../src/nile-link/nile-link.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Link CSS\n */\nexport const styles = css`\n :host {\n }\n\n .link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n user-select: none;\n white-space: nowrap;\n padding: 12px;\n gap: 8px;\n height: 38px;\n box-sizing: border-box;\n cursor: pointer;\n }\n\n .link__label {\n color: #005ea6;\n text-align: center;\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .link--disabled {\n color: rgba(0, 94, 166, 0.5);\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n\n .link:not(.link--disabled):not(.link__button):hover {\n color: #005291;\n text-decoration-line: underline;\n }\n\n .link:not(.link--disabled):not(.link__button):active {\n color: #002f53;\n text-decoration-line: underline;\n }\n\n .link__button:hover {\n color: #005291;\n border-radius: 4px;\n background: #f5f7f7;\n }\n\n .link__button:active {\n color: #002f53;\n border-radius: 4px;\n background: rgba(0, 94, 166, 0.1);\n }\n\n`;\n\nexport default [styles];\n"]}
@@ -31,6 +31,9 @@ let NileMenu = class NileMenu extends NileElement {
31
31
  handleClick(event) {
32
32
  const target = event.target;
33
33
  const item = target.closest('nile-menu-item');
34
+ if (item?.hasSubMenu) {
35
+ return;
36
+ }
34
37
  // if (!item || item.disabled || item.inert) {
35
38
  if (!item || item.disabled) {
36
39
  return;
@@ -145,23 +148,30 @@ let NileMenu = class NileMenu extends NileElement {
145
148
  render() {
146
149
  return html `
147
150
  <div>
148
- ${this.searchEnabled
151
+ ${this.searchEnabled
149
152
  ? html ` <nile-input
150
- size="medium"
151
- clearable
152
- style=${this.searchWidth
153
+ size="medium"
154
+ clearable
155
+ style=${this.searchWidth
153
156
  ? `width: ${this.searchWidth}px;`
154
157
  : 'width: 100%;'}
155
- .value=${this.searchValue}
156
- placeholder="Search..."
157
- @nile-input=${this.handleSearchChange}
158
- >
159
- <nile-icon name="search" slot="suffix"> </nile-icon>
160
- </nile-input>`
158
+ .value=${this.searchValue}
159
+ placeholder="Search..."
160
+ @nile-input=${this.handleSearchChange}
161
+ >
162
+ <nile-icon name="search" slot="suffix"> </nile-icon>
163
+ </nile-input>`
161
164
  : html ``}
162
165
  ${this.showNoResults
163
166
  ? html ` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `
164
167
  : ''}
168
+
169
+ <slot
170
+ name="menu__header"
171
+ @click=${(e) => {
172
+ e.stopPropagation();
173
+ }}
174
+ ></slot>
165
175
  <slot
166
176
  @slotchange=${this.handleSlotChange}
167
177
  @click=${this.handleClick}
@@ -1 +1 @@
1
- {"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,IAAI,EAAO,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC;;;;;;;;;;GAUG;AAGI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QAEI,gBAAW,GAAW,EAAE,CAAC;QACzB,gBAAW,GAAW,CAAC,CAAC;QAEW,kBAAa,GAAG,KAAK,CAAC;QACrC,kBAAa,GAAY,KAAK,CAAC;QAEhC,qBAAgB,GAAW,kBAAkB,CAAC;IAkL5E,CAAC;IA9KC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAE9C,8CAA8C;QAC9C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;YAC5B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAClD,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,uCAAuC;QACvC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YACnC,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,6FAA6F;YAC7F,IAAI,EAAE,KAAK,EAAE,CAAC;SACf;QAED,0CAA0C;QAC1C,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QAED,8CAA8C;QAC9C,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACjC,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YACzC,IAAI,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAEvD,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;oBAC7B,KAAK,EAAE,CAAC;iBACT;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;oBAClC,KAAK,EAAE,CAAC;iBACT;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;oBAC/B,KAAK,GAAG,CAAC,CAAC;iBACX;qBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;oBAC9B,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC1B;gBAED,IAAI,KAAK,GAAG,CAAC,EAAE;oBACb,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC1B;gBACD,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC5B,KAAK,GAAG,CAAC,CAAC;iBACX;gBAED,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;gBAClC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;aACtB;SACF;IACH,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE3C,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;YAC3B,IAAI,CAAC,cAAc,CAAC,MAAsB,CAAC,CAAC;SAC7C;IACH,CAAC;IAEO,gBAAgB;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEjC,2DAA2D;QAC3D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAC/B;IACH,CAAC;IAEO,UAAU,CAAC,IAAiB;QAClC,OAAO,CACL,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,gBAAgB;YAC/C,CAAC,UAAU,EAAE,kBAAkB,EAAE,eAAe,CAAC,CAAC,QAAQ,CACxD,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAChC,CACF,CAAC;IACJ,CAAC;IAED,6FAA6F;IAC7F,WAAW;QACT,OAAO,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACrE,CAAC,EAAe,EAAE,EAAE;YAClB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE;gBACxB,0CAA0C;gBAC1C,OAAO,KAAK,CAAC;aACd;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CACgB,CAAC;IACtB,CAAC;IAED;;;OAGG;IACH,cAAc;QACZ,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;IAC1E,CAAC;IAED;;;OAGG;IACH,cAAc,CAAC,IAAkB;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEjC,qBAAqB;QACrB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YAChB,CAAC,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,kBAAkB,CAAC,CAAM;QAC/B,IAAI,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC/B,IAAI,OAAO,GAAG,CAAC,CAAC;QAChB,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACpB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;YACrE,IACE,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,EACxE;gBACA,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;gBAClC,OAAO,EAAE,CAAC;aACX;iBAAM;gBACL,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;aAClC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,GAAG,OAAO,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;YAEH,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;;;wBAGM,IAAI,CAAC,WAAW;gBACtB,CAAC,CAAC,UAAU,IAAI,CAAC,WAAW,KAAK;gBACjC,CAAC,CAAC,cAAc;yBACT,IAAI,CAAC,WAAW;;8BAEX,IAAI,CAAC,kBAAkB;;;4BAGzB;YAChB,CAAC,CAAC,IAAI,CAAA,EAAE;UACV,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,gBAAgB,oBAAoB;YACnE,CAAC,CAAC,EAAE;;wBAEU,IAAI,CAAC,gBAAgB;mBAC1B,IAAI,CAAC,WAAW;qBACd,IAAI,CAAC,aAAa;uBAChB,IAAI,CAAC,eAAe;;;KAGtC,CAAC;IACJ,CAAC;;AAxLM,eAAM,GAAmB,MAAM,CAAC;AAC9B;IAAR,KAAK,EAAE;6CAA0B;AACzB;IAAR,KAAK,EAAE;6CAAyB;AAEW;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAuB;AACrC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAgC;AAEhC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA+C;AAE3D;IAAd,KAAK,CAAC,MAAM,CAAC;6CAA8B;AAVjC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0LpB;SA1LY,QAAQ;AA2LrB,eAAe,QAAQ,CAAC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n static styles: CSSResultGroup = styles;\n @state() searchValue: string = '';\n @state() searchWidth: number = 0;\n\n @property({ type: Boolean, reflect: true }) searchEnabled = false;\n @property({ type: Boolean }) showNoResults: boolean = false;\n\n @property({ type: String }) noResultsMessage: string = 'No results found';\n\n @query('slot') defaultSlot: HTMLSlotElement;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const item = target.closest('nile-menu-item');\n\n // if (!item || item.disabled || item.inert) {\n if (!item || item.disabled) {\n return;\n }\n\n if (item.type === 'checkbox') {\n item.checked = !item.checked;\n }\n\n this.emit('nile-select', { value: item.value });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const item = this.getCurrentItem();\n event.preventDefault();\n\n // Simulate a click to support @click handlers on menu items that also work with the keyboard\n item?.click();\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = items.length - 1;\n }\n\n if (index < 0) {\n index = items.length - 1;\n }\n if (index > items.length - 1) {\n index = 0;\n }\n\n this.setCurrentItem(items[index]);\n items[index].focus();\n }\n }\n }\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as NileMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'nile-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n item.getAttribute('role') ?? ''\n )\n );\n }\n\n /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n getAllItems() {\n return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n (el: HTMLElement) => {\n if (!this.isMenuItem(el)) {\n // if (el.inert || !this.isMenuItem(el)) {\n return false;\n }\n return true;\n }\n ) as NileMenuItem[];\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: NileMenuItem) {\n const items = this.getAllItems();\n\n // Update tab indexes\n items.forEach(i => {\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n private handleSearchChange(e: any) {\n let items = this.getAllItems();\n let counter = 0;\n items.map(curr_item => {\n this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n if (\n curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n ) {\n curr_item.style.display = 'block';\n counter++;\n } else {\n curr_item.style.display = 'none';\n }\n });\n this.showNoResults = counter === 0;\n }\n\n render() {\n return html`\n <div>\n ${this.searchEnabled\n ? html` <nile-input\n size=\"medium\"\n clearable\n style=${this.searchWidth\n ? `width: ${this.searchWidth}px;`\n : 'width: 100%;'}\n .value=${this.searchValue}\n placeholder=\"Search...\"\n @nile-input=${this.handleSearchChange}\n >\n <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n </nile-input>`\n : html``}\n ${this.showNoResults\n ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n : ''}\n <slot\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n </div>\n `;\n }\n}\nexport default NileMenu;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-menu': NileMenu;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n static styles: CSSResultGroup = styles;\n @state() searchValue: string = '';\n @state() searchWidth: number = 0;\n\n @property({ type: Boolean, reflect: true }) searchEnabled = false;\n @property({ type: Boolean }) showNoResults: boolean = false;\n\n @property({ type: String }) noResultsMessage: string = 'No results found';\n\n @query('slot') defaultSlot: HTMLSlotElement;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const item = target.closest('nile-menu-item');\n\n if (item?.hasSubMenu) {\n return;\n }\n\n // if (!item || item.disabled || item.inert) {\n if (!item || item.disabled) {\n return;\n }\n\n if (item.type === 'checkbox') {\n item.checked = !item.checked;\n }\n\n this.emit('nile-select', { value: item.value });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const item = this.getCurrentItem();\n event.preventDefault();\n\n // Simulate a click to support @click handlers on menu items that also work with the keyboard\n item?.click();\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = items.length - 1;\n }\n\n if (index < 0) {\n index = items.length - 1;\n }\n if (index > items.length - 1) {\n index = 0;\n }\n\n this.setCurrentItem(items[index]);\n items[index].focus();\n }\n }\n }\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as NileMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'nile-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n item.getAttribute('role') ?? ''\n )\n );\n }\n\n /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n getAllItems() {\n return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n (el: HTMLElement) => {\n if (!this.isMenuItem(el)) {\n // if (el.inert || !this.isMenuItem(el)) {\n return false;\n }\n return true;\n }\n ) as NileMenuItem[];\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: NileMenuItem) {\n const items = this.getAllItems();\n\n // Update tab indexes\n items.forEach(i => {\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n private handleSearchChange(e: any) {\n let items = this.getAllItems();\n let counter = 0;\n items.map(curr_item => {\n this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n if (\n curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n ) {\n curr_item.style.display = 'block';\n counter++;\n } else {\n curr_item.style.display = 'none';\n }\n });\n this.showNoResults = counter === 0;\n }\n\n render() {\n return html`\n <div>\n ${this.searchEnabled\n ? html` <nile-input\n size=\"medium\"\n clearable\n style=${this.searchWidth\n ? `width: ${this.searchWidth}px;`\n : 'width: 100%;'}\n .value=${this.searchValue}\n placeholder=\"Search...\"\n @nile-input=${this.handleSearchChange}\n >\n <nile-icon name=\"search\" slot=\"suffix\"> </nile-icon>\n </nile-input>`\n : html``}\n ${this.showNoResults\n ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n : ''}\n\n <slot\n name=\"menu__header\"\n @click=${(e: Event) => {\n e.stopPropagation();\n }}\n ></slot>\n <slot\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n </div>\n `;\n }\n}\nexport default NileMenu;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-menu': NileMenu;\n }\n}\n"]}
@@ -43,6 +43,8 @@ export declare class NileMenuItem extends NileElement {
43
43
  value: string;
44
44
  /** Draws the menu item in a disabled state, preventing selection. */
45
45
  disabled: boolean;
46
+ /** Draws the item in a checked state. */
47
+ hasSubMenu: boolean;
46
48
  connectedCallback(): void;
47
49
  disconnectedCallback(): void;
48
50
  private handleDefaultSlotChange;
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import { __decorate } from "tslib";
8
- import { html, property } from 'lit-element';
8
+ import { html, property, } from 'lit-element';
9
9
  import { customElement } from 'lit/decorators.js';
10
10
  import { styles } from './nile-menu-item.css';
11
11
  import '../nile-icon';
@@ -47,6 +47,8 @@ let NileMenuItem = class NileMenuItem extends NileElement {
47
47
  this.value = '';
48
48
  /** Draws the menu item in a disabled state, preventing selection. */
49
49
  this.disabled = false;
50
+ /** Draws the item in a checked state. */
51
+ this.hasSubMenu = false;
50
52
  }
51
53
  connectedCallback() {
52
54
  super.connectedCallback();
@@ -67,7 +69,11 @@ let NileMenuItem = class NileMenuItem extends NileElement {
67
69
  // When the label changes, emit a slotchange event so parent controls see it
68
70
  if (textLabel !== this.cachedTextLabel) {
69
71
  this.cachedTextLabel = textLabel;
70
- this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });
72
+ this.emit('slotchange', {
73
+ bubbles: true,
74
+ composed: false,
75
+ cancelable: false,
76
+ });
71
77
  }
72
78
  }
73
79
  handleHostClick(event) {
@@ -117,21 +123,38 @@ let NileMenuItem = class NileMenuItem extends NileElement {
117
123
  'menu-item': true,
118
124
  'menu-item--checked': this.checked,
119
125
  'menu-item--disabled': this.disabled,
120
- 'menu-item--has-submenu': false // reserved for future use
126
+ 'menu-item--has-submenu': this.hasSubMenu, // reserved for future use
121
127
  })}
122
128
  >
123
129
  <span part="checked-icon" class="menu-item__check">
124
- <nile-icon name="tick" library="system" aria-hidden="true"></nile-icon>
130
+ <nile-icon
131
+ name="tick"
132
+ library="system"
133
+ aria-hidden="true"
134
+ ></nile-icon>
125
135
  </span>
126
136
 
127
- <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
137
+ <slot
138
+ name="prefix"
139
+ part="prefix"
140
+ class="menu-item__prefix"
141
+
142
+ ></slot>
128
143
 
129
- <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
144
+ <slot
145
+ part="label"
146
+ class="menu-item__label"
147
+ @slotchange=${this.handleDefaultSlotChange}
148
+ ></slot>
130
149
 
131
150
  <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
132
151
 
133
152
  <span part="submenu-icon" class="menu-item__chevron">
134
- <nile-icon name="arrowright" library="system" aria-hidden="true"></nile-icon>
153
+ <nile-icon
154
+ name="arrowright"
155
+ library="system"
156
+ aria-hidden="true"
157
+ ></nile-icon>
135
158
  </span>
136
159
  </div>
137
160
  `;
@@ -156,6 +179,9 @@ __decorate([
156
179
  __decorate([
157
180
  property({ type: Boolean, reflect: true })
158
181
  ], NileMenuItem.prototype, "disabled", void 0);
182
+ __decorate([
183
+ property({ type: Boolean, reflect: true })
184
+ ], NileMenuItem.prototype, "hasSubMenu", void 0);
159
185
  __decorate([
160
186
  watch('checked')
161
187
  ], NileMenuItem.prototype, "handleCheckedChange", null);