@aquera/nile-elements 0.0.8 → 0.0.10

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 (114) hide show
  1. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/internal/enum.d.ts +17 -0
  2. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/internal/enum.js +18 -0
  3. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/internal/enum.js.map +1 -0
  4. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.css.js +14 -3
  5. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.css.js.map +1 -1
  6. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.d.ts +15 -4
  7. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.js +111 -51
  8. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.js.map +1 -1
  9. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/apply-filter.d.ts +5 -0
  10. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/apply-filter.js +5 -0
  11. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/apply-filter.js.map +1 -0
  12. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/index.d.ts +1 -0
  13. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/index.js +1 -0
  14. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon/icons/svg/index.js.map +1 -1
  15. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.d.ts +3 -1
  16. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js +9 -6
  17. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js.map +1 -1
  18. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
  19. package/demo/filenames.txt +1 -1
  20. package/dist/index.cjs.js +1 -1
  21. package/dist/index.esm.js +1 -1
  22. package/dist/index.iife.js +39 -26
  23. package/dist/internal/enum.cjs.js +2 -0
  24. package/dist/internal/enum.cjs.js.map +1 -0
  25. package/dist/internal/enum.esm.js +1 -0
  26. package/dist/nile-badge/index.cjs.js +1 -1
  27. package/dist/nile-badge/index.esm.js +1 -1
  28. package/dist/nile-badge/nile-badge.cjs.js +1 -1
  29. package/dist/nile-badge/nile-badge.cjs.js.map +1 -1
  30. package/dist/nile-badge/nile-badge.esm.js +1 -1
  31. package/dist/nile-button/index.cjs.js +1 -1
  32. package/dist/nile-button/index.esm.js +1 -1
  33. package/dist/nile-button/nile-button.cjs.js +1 -1
  34. package/dist/nile-button/nile-button.cjs.js.map +1 -1
  35. package/dist/nile-button/nile-button.esm.js +1 -1
  36. package/dist/nile-content-editor/index.cjs.js +1 -1
  37. package/dist/nile-content-editor/index.esm.js +1 -1
  38. package/dist/nile-content-editor/nile-content-editor.cjs.js +1 -1
  39. package/dist/nile-content-editor/nile-content-editor.cjs.js.map +1 -1
  40. package/dist/nile-content-editor/nile-content-editor.css.cjs.js +1 -1
  41. package/dist/nile-content-editor/nile-content-editor.css.cjs.js.map +1 -1
  42. package/dist/nile-content-editor/nile-content-editor.css.esm.js +14 -3
  43. package/dist/nile-content-editor/nile-content-editor.esm.js +13 -12
  44. package/dist/nile-dialog/index.cjs.js +1 -1
  45. package/dist/nile-dialog/index.esm.js +1 -1
  46. package/dist/nile-dialog/nile-dialog.cjs.js +1 -1
  47. package/dist/nile-dialog/nile-dialog.cjs.js.map +1 -1
  48. package/dist/nile-dialog/nile-dialog.esm.js +1 -1
  49. package/dist/nile-icon/icons/svg/apply-filter.cjs.js +2 -0
  50. package/dist/nile-icon/icons/svg/apply-filter.cjs.js.map +1 -0
  51. package/dist/nile-icon/icons/svg/apply-filter.esm.js +1 -0
  52. package/dist/nile-icon/icons/svg/index.cjs.js +1 -1
  53. package/dist/nile-icon/icons/svg/index.esm.js +1 -1
  54. package/dist/nile-icon/index.cjs.js +1 -1
  55. package/dist/nile-icon/index.cjs.js.map +1 -1
  56. package/dist/nile-icon/index.esm.js +1 -1
  57. package/dist/nile-icon-button/index.cjs.js +1 -1
  58. package/dist/nile-icon-button/index.esm.js +1 -1
  59. package/dist/nile-icon-button/nile-icon-button.cjs.js +1 -1
  60. package/dist/nile-icon-button/nile-icon-button.cjs.js.map +1 -1
  61. package/dist/nile-icon-button/nile-icon-button.esm.js +1 -1
  62. package/dist/nile-input/index.cjs.js +1 -1
  63. package/dist/nile-input/index.esm.js +1 -1
  64. package/dist/nile-input/nile-input.cjs.js +1 -1
  65. package/dist/nile-input/nile-input.cjs.js.map +1 -1
  66. package/dist/nile-input/nile-input.esm.js +1 -1
  67. package/dist/nile-menu-item/index.cjs.js +1 -1
  68. package/dist/nile-menu-item/index.esm.js +1 -1
  69. package/dist/nile-menu-item/nile-menu-item.cjs.js +1 -1
  70. package/dist/nile-menu-item/nile-menu-item.cjs.js.map +1 -1
  71. package/dist/nile-menu-item/nile-menu-item.esm.js +1 -1
  72. package/dist/nile-option/index.cjs.js +1 -1
  73. package/dist/nile-option/index.esm.js +1 -1
  74. package/dist/nile-option/nile-option.cjs.js +1 -1
  75. package/dist/nile-option/nile-option.cjs.js.map +1 -1
  76. package/dist/nile-option/nile-option.esm.js +1 -1
  77. package/dist/nile-select/index.cjs.js +1 -1
  78. package/dist/nile-select/index.esm.js +1 -1
  79. package/dist/nile-select/nile-select.cjs.js +1 -1
  80. package/dist/nile-select/nile-select.cjs.js.map +1 -1
  81. package/dist/nile-select/nile-select.esm.js +1 -1
  82. package/dist/nile-switcher/nile-switcher.cjs.js +1 -1
  83. package/dist/nile-switcher/nile-switcher.cjs.js.map +1 -1
  84. package/dist/nile-switcher/nile-switcher.esm.js +9 -8
  85. package/dist/nile-tag/index.cjs.js +1 -1
  86. package/dist/nile-tag/index.esm.js +1 -1
  87. package/dist/nile-tag/nile-tag.cjs.js +1 -1
  88. package/dist/nile-tag/nile-tag.cjs.js.map +1 -1
  89. package/dist/nile-tag/nile-tag.esm.js +1 -1
  90. package/dist/src/internal/enum.d.ts +17 -0
  91. package/dist/src/internal/enum.js +18 -0
  92. package/dist/src/internal/enum.js.map +1 -0
  93. package/dist/src/nile-content-editor/nile-content-editor.css.js +14 -3
  94. package/dist/src/nile-content-editor/nile-content-editor.css.js.map +1 -1
  95. package/dist/src/nile-content-editor/nile-content-editor.d.ts +15 -4
  96. package/dist/src/nile-content-editor/nile-content-editor.js +111 -51
  97. package/dist/src/nile-content-editor/nile-content-editor.js.map +1 -1
  98. package/dist/src/nile-icon/icons/svg/apply-filter.d.ts +5 -0
  99. package/dist/src/nile-icon/icons/svg/apply-filter.js +5 -0
  100. package/dist/src/nile-icon/icons/svg/apply-filter.js.map +1 -0
  101. package/dist/src/nile-icon/icons/svg/index.d.ts +1 -0
  102. package/dist/src/nile-icon/icons/svg/index.js +1 -0
  103. package/dist/src/nile-icon/icons/svg/index.js.map +1 -1
  104. package/dist/src/nile-switcher/nile-switcher.d.ts +3 -1
  105. package/dist/src/nile-switcher/nile-switcher.js +9 -6
  106. package/dist/src/nile-switcher/nile-switcher.js.map +1 -1
  107. package/dist/tsconfig.tsbuildinfo +1 -1
  108. package/package.json +1 -1
  109. package/src/internal/enum.ts +17 -0
  110. package/src/nile-content-editor/nile-content-editor.css.ts +14 -3
  111. package/src/nile-content-editor/nile-content-editor.ts +123 -59
  112. package/src/nile-icon/icons/svg/apply-filter.ts +5 -0
  113. package/src/nile-icon/icons/svg/index.ts +1 -0
  114. package/src/nile-switcher/nile-switcher.ts +12 -6
@@ -0,0 +1,17 @@
1
+ export declare const KeyCode: {
2
+ BACKSPACE: string;
3
+ TAB: string;
4
+ ENTER: string;
5
+ SHIFT: string;
6
+ CTRL: string;
7
+ ESCAPE: string;
8
+ SPACE: string;
9
+ PAGE_UP: string;
10
+ PAGE_DOWN: string;
11
+ END: string;
12
+ HOME: string;
13
+ ARROW_LEFT: string;
14
+ ARROW_UP: string;
15
+ ARROW_RIGHT: string;
16
+ ARROW_DOWN: string;
17
+ };
@@ -0,0 +1,18 @@
1
+ export const KeyCode = {
2
+ BACKSPACE: 'Backspace',
3
+ TAB: 'Tab',
4
+ ENTER: 'Enter',
5
+ SHIFT: 'ShiftLeft',
6
+ CTRL: 'ControlLeft',
7
+ ESCAPE: 'Escape',
8
+ SPACE: 'Space',
9
+ PAGE_UP: 'PageUp',
10
+ PAGE_DOWN: 'PageDown',
11
+ END: 'End',
12
+ HOME: 'Home',
13
+ ARROW_LEFT: 'ArrowLeft',
14
+ ARROW_UP: 'ArrowUp',
15
+ ARROW_RIGHT: 'ArrowRight',
16
+ ARROW_DOWN: 'ArrowDown',
17
+ };
18
+ //# sourceMappingURL=enum.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"enum.js","sourceRoot":"","sources":["../../../src/internal/enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,SAAS,EAAE,WAAW;IACtB,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,QAAQ;IACjB,SAAS,EAAE,UAAU;IACrB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,WAAW;IACvB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,WAAW;CACxB,CAAC","sourcesContent":["export const KeyCode = {\n BACKSPACE: 'Backspace',\n TAB: 'Tab',\n ENTER: 'Enter',\n SHIFT: 'ShiftLeft', // or 'ShiftRight'\n CTRL: 'ControlLeft', // or 'ControlRight'\n ESCAPE: 'Escape',\n SPACE: 'Space',\n PAGE_UP: 'PageUp',\n PAGE_DOWN: 'PageDown',\n END: 'End',\n HOME: 'Home',\n ARROW_LEFT: 'ArrowLeft',\n ARROW_UP: 'ArrowUp',\n ARROW_RIGHT: 'ArrowRight',\n ARROW_DOWN: 'ArrowDown',\n};\n"]}
@@ -12,6 +12,7 @@ export const styles = css `
12
12
  :host {
13
13
  width: 100%;
14
14
  box-sizing: border-box;
15
+ font-size: 14px;
15
16
  }
16
17
 
17
18
  .content-editable-wrapper {
@@ -47,21 +48,30 @@ export const styles = css `
47
48
  border-color: #e5434d;
48
49
  }
49
50
 
51
+ .read-only {
52
+ cursor: not-allowed;
53
+ }
54
+
50
55
  .chips {
56
+ display: inline;
51
57
  background: #e5e9eb;
52
58
  color: #000;
53
59
  border-radius: 4px;
54
60
  padding: 6px;
61
+ height: 24px;
62
+ line-height: 10px;
55
63
  margin-left: 3px;
56
- display: inline;
57
64
  letter-spacing: 0.2px;
58
65
  }
59
66
 
60
67
  .text-area {
61
68
  height: 120px;
62
- white-space: pre-wrap;
63
69
  overflow: scroll;
64
- line-height: 24px;
70
+ line-height: 26px;
71
+ }
72
+
73
+ .text-area .chips {
74
+ padding: 4px 8px;
65
75
  }
66
76
 
67
77
  .chip-error {
@@ -72,6 +82,7 @@ export const styles = css `
72
82
  background-color: #ffffff;
73
83
  border: 1px solid #c7ced4;
74
84
  overflow: auto;
85
+ max-height: 150px;
75
86
  }
76
87
 
77
88
  label {
@@ -1 +1 @@
1
- {"version":3,"file":"nile-content-editor.css.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExB,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 * AttributeExpression CSS\n */\nexport const styles = css`\n :host {\n width: 100%;\n box-sizing: border-box;\n }\n\n .content-editable-wrapper {\n position: relative;\n width: 100%;\n box-sizing: border-box;\n }\n\n .dropdown-position {\n position: relative;\n bottom: 60px;\n }\n .content-editable-input {\n box-sizing: border-box;\n width: 100%;\n padding: 9px;\n border: 1px solid #c7ced4;\n border-radius: 4px;\n overflow-x: auto;\n overflow-anchor: none;\n scrollbar-width: none;\n -ms-overflow-style: none;\n cursor: text;\n white-space: nowrap;\n background-color: #ffffff;\n height: 38px;\n }\n .content-editable-input:focus {\n outline: none;\n }\n\n .error {\n border-color: #e5434d;\n }\n\n .chips {\n background: #e5e9eb;\n color: #000;\n border-radius: 4px;\n padding: 6px;\n margin-left: 3px;\n display: inline;\n letter-spacing: 0.2px;\n }\n\n .text-area {\n height: 120px;\n white-space: pre-wrap;\n overflow: scroll;\n line-height: 24px;\n }\n\n .chip-error {\n background: #f3a5aa;\n }\n .nile-options-container {\n box-sizing: border-box;\n background-color: #ffffff;\n border: 1px solid #c7ced4;\n overflow: auto;\n }\n\n label {\n display: inline-block;\n margin-bottom: 6px;\n font-family: 'colfax-medium';\n }\n\n .asterik {\n color: #e5434d;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-content-editor.css.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFxB,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 * AttributeExpression CSS\n */\nexport const styles = css`\n :host {\n width: 100%;\n box-sizing: border-box;\n font-size: 14px;\n }\n\n .content-editable-wrapper {\n position: relative;\n width: 100%;\n box-sizing: border-box;\n }\n\n .dropdown-position {\n position: relative;\n bottom: 60px;\n }\n .content-editable-input {\n box-sizing: border-box;\n width: 100%;\n padding: 9px;\n border: 1px solid #c7ced4;\n border-radius: 4px;\n overflow-x: auto;\n overflow-anchor: none;\n scrollbar-width: none;\n -ms-overflow-style: none;\n cursor: text;\n white-space: nowrap;\n background-color: #ffffff;\n height: 38px;\n }\n .content-editable-input:focus {\n outline: none;\n }\n\n .error {\n border-color: #e5434d;\n }\n\n .read-only {\n cursor: not-allowed;\n }\n\n .chips {\n display: inline;\n background: #e5e9eb;\n color: #000;\n border-radius: 4px;\n padding: 6px;\n height: 24px;\n line-height: 10px;\n margin-left: 3px;\n letter-spacing: 0.2px;\n }\n\n .text-area {\n height: 120px;\n overflow: scroll;\n line-height: 26px;\n }\n\n .text-area .chips {\n padding: 4px 8px;\n }\n\n .chip-error {\n background: #f3a5aa;\n }\n .nile-options-container {\n box-sizing: border-box;\n background-color: #ffffff;\n border: 1px solid #c7ced4;\n overflow: auto;\n max-height: 150px;\n }\n\n label {\n display: inline-block;\n margin-bottom: 6px;\n font-family: 'colfax-medium';\n }\n\n .asterik {\n color: #e5434d;\n }\n`;\n\nexport default [styles];\n"]}
@@ -23,25 +23,36 @@ export declare class NileContentEditor extends NileElement {
23
23
  */
24
24
  value: string;
25
25
  options: Array<any>;
26
+ filteredOptions: Array<any>;
26
27
  showLabel: boolean;
27
28
  labelText: string;
28
29
  type: string;
29
30
  required: boolean;
30
- input: HTMLInputElement;
31
+ contentEditor: HTMLInputElement;
31
32
  autoOptions: HTMLInputElement;
32
- private openDropdown;
33
+ openDropdown: boolean;
34
+ tagIdentifier: string;
35
+ filteredValue: string;
33
36
  helpText: string;
37
+ readonly: boolean;
34
38
  errorMessage: string;
39
+ error: boolean;
35
40
  static styles: CSSResultGroup;
36
41
  connectedCallback(): void;
42
+ setInitialValues(): void;
43
+ addOpenListeners(): void;
44
+ removeOpenListeners(): void;
45
+ toggleDropdown(value: boolean): void;
46
+ handleOutsideClick(event: Event): void;
37
47
  handleTypeChange(): void;
38
48
  disconnectedCallback(): void;
39
- afterFirstRender(): Promise<boolean>;
49
+ handlePaste(event: ClipboardEvent): void;
40
50
  private handlekeyDown;
51
+ filterOptions(): void;
41
52
  generateValuesFromHTMLTags(string: any): string;
42
53
  generateHTMLTagsWithValues(string: any): string;
43
54
  emitInputChange(): void;
44
- moveCursorToEnd: () => void;
55
+ insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag: Node): void;
45
56
  handleOptions(option: any): void;
46
57
  renderAutoOptions(): TemplateResult;
47
58
  render(): TemplateResult;
@@ -11,6 +11,8 @@ import { styles } from './nile-content-editor.css';
11
11
  import { classMap } from 'lit/directives/class-map.js';
12
12
  import NileElement from '../internal/nile-element';
13
13
  import { watch } from '../internal/watch';
14
+ import { KeyCode } from '../internal/enum';
15
+ import { live } from 'lit/directives/live.js';
14
16
  /**
15
17
  * Nile icon component.
16
18
  *
@@ -33,48 +35,87 @@ let NileContentEditor = class NileContentEditor extends NileElement {
33
35
  this.type = 'text|text-area';
34
36
  this.required = true;
35
37
  this.openDropdown = false;
38
+ this.tagIdentifier = '$';
39
+ this.filteredValue = '';
36
40
  this.helpText = '';
41
+ this.readonly = false;
37
42
  this.errorMessage = '';
38
- this.moveCursorToEnd = () => {
39
- const range = document.createRange();
40
- const selection = window.getSelection();
41
- range.setStart(this.input, this.input.childNodes.length);
42
- range.collapse(true);
43
- selection?.removeAllRanges();
44
- selection?.addRange(range);
45
- this.input.focus();
46
- };
43
+ this.error = false;
47
44
  }
48
45
  connectedCallback() {
46
+ this.handleOutsideClick = this.handleOutsideClick.bind(this);
49
47
  super.connectedCallback();
50
48
  this.emit('nile-init');
51
- this.afterFirstRender().then(res => {
52
- if (res && this.value !== '')
53
- this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);
49
+ this.addOpenListeners();
50
+ this.setInitialValues();
51
+ }
52
+ setInitialValues() {
53
+ this.updateComplete.then(res => {
54
+ if (res && !!this.value)
55
+ this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);
54
56
  });
55
57
  }
58
+ addOpenListeners() {
59
+ window.addEventListener('click', this.handleOutsideClick);
60
+ }
61
+ removeOpenListeners() {
62
+ window.removeEventListener('click', this.handleOutsideClick);
63
+ }
64
+ toggleDropdown(value) {
65
+ this.openDropdown = value;
66
+ }
67
+ handleOutsideClick(event) {
68
+ if (event && event.target) {
69
+ this.toggleDropdown(false);
70
+ }
71
+ }
56
72
  handleTypeChange() {
57
- this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);
73
+ this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);
58
74
  }
59
75
  disconnectedCallback() {
60
76
  super.disconnectedCallback();
77
+ this.removeOpenListeners();
61
78
  this.emit('nile-destroy');
62
79
  }
63
- async afterFirstRender() {
64
- return await this.updateComplete;
80
+ handlePaste(event) {
81
+ event.preventDefault();
82
+ if (event.clipboardData) {
83
+ let text = event.clipboardData.getData('text/plain');
84
+ document.execCommand('insertText', false, text);
85
+ }
86
+ this.emitInputChange();
65
87
  }
66
88
  handlekeyDown(event) {
67
- if (event.code === 'Enter' && this.type === 'text') {
89
+ if (event.code === KeyCode.ENTER && this.type === 'text') {
90
+ event.preventDefault();
91
+ return;
92
+ }
93
+ if (event.code === KeyCode.ESCAPE) {
68
94
  event.preventDefault();
95
+ this.toggleDropdown(false);
96
+ return;
69
97
  }
70
98
  setTimeout(() => {
71
- const value = this.input.innerText;
99
+ const value = this.contentEditor.innerText;
72
100
  this.emitInputChange();
73
- if (value.includes('$')) {
74
- this.openDropdown = true;
101
+ if (value.includes(this.tagIdentifier)) {
102
+ this.toggleDropdown(true);
103
+ this.filterOptions();
104
+ }
105
+ else {
106
+ this.toggleDropdown(false);
75
107
  }
76
108
  });
77
109
  }
110
+ filterOptions() {
111
+ this.filteredOptions = this.options;
112
+ if (!!this.options.length && !!this.filteredValue) {
113
+ this.filteredOptions = this.options.filter(item => item.startsWith(this.filteredValue));
114
+ }
115
+ else {
116
+ this.filteredOptions = this.options;
117
+ }
118
+ }
78
119
  generateValuesFromHTMLTags(string) {
79
120
  var pattern = /<span class="chips(?: chip-error)?" contenteditable="false">(.*?)<\/span>/g;
80
121
  var result = string.replace(pattern, (match, option) => {
@@ -94,34 +135,40 @@ let NileContentEditor = class NileContentEditor extends NileElement {
94
135
  return result;
95
136
  }
96
137
  emitInputChange() {
97
- let fieldValue = this.input.innerHTML;
98
- if (this.input.innerText !== '') {
99
- fieldValue = this.generateValuesFromHTMLTags(fieldValue);
138
+ if (this.contentEditor) {
139
+ let fieldValue = this.contentEditor.innerHTML;
140
+ if (this.contentEditor.innerText !== '') {
141
+ fieldValue = this.generateValuesFromHTMLTags(fieldValue);
142
+ }
143
+ fieldValue = fieldValue.replace(/&nbsp;/g, ' ');
144
+ fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();
145
+ this.emit('nile-change', {
146
+ value: this.generateValuesFromHTMLTags(fieldValue),
147
+ });
100
148
  }
101
- fieldValue = fieldValue.replace(/&nbsp;/g, ' ');
102
- fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();
103
- this.emit('nile-change', {
104
- value: this.generateValuesFromHTMLTags(fieldValue),
149
+ }
150
+ insertNodes(parentNode, childNodes, autoOptionsTag) {
151
+ Array.from(childNodes).map((node, index) => {
152
+ if (node.hasChildNodes()) {
153
+ this.insertNodes(node, node.childNodes, autoOptionsTag);
154
+ }
155
+ else {
156
+ if (node.nodeValue?.includes(this.tagIdentifier)) {
157
+ parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(this.tagIdentifier + this.filteredValue, '');
158
+ parentNode.childNodes[index].after(autoOptionsTag);
159
+ }
160
+ }
105
161
  });
106
162
  }
107
163
  handleOptions(option) {
108
- this.openDropdown = !this.openDropdown;
109
- // not appending Native element as it replaces all existing child nodes with new node
110
- const autoOptionsTag = '<span class="chips" contenteditable="false">' + option + '</span>';
111
- // text editor adds div when pressing enter , so before appending have to check if its parent node is div else append it to content editable parent
112
- if (this.input?.lastElementChild?.tagName === 'DIV') {
113
- this.input.lastElementChild.insertAdjacentHTML('beforeend', autoOptionsTag);
114
- if (this.input.lastElementChild.lastChild?.previousSibling)
115
- this.input.lastElementChild.lastChild.previousSibling.nodeValue =
116
- this.input.lastElementChild.lastChild.previousSibling.nodeValue.replace('$', '');
117
- }
118
- else {
119
- this.input.insertAdjacentHTML('beforeend', autoOptionsTag);
120
- if (this.input.lastChild?.previousSibling) {
121
- this.input.lastChild.previousSibling.nodeValue =
122
- this.input.lastChild.previousSibling.nodeValue.replace('$', '');
123
- }
124
- }
164
+ this.toggleDropdown(false);
165
+ let autoOptionsTag = document.createElement('span');
166
+ autoOptionsTag.setAttribute('class', 'chips');
167
+ autoOptionsTag.setAttribute('contentEditable', 'false');
168
+ autoOptionsTag.innerText = option;
169
+ this.insertNodes(this.contentEditor, this.contentEditor.childNodes, autoOptionsTag);
170
+ this.filteredOptions = this.options;
171
+ this.filteredValue = '';
125
172
  this.emitInputChange();
126
173
  }
127
174
  renderAutoOptions() {
@@ -129,10 +176,10 @@ let NileContentEditor = class NileContentEditor extends NileElement {
129
176
  class="${classMap({
130
177
  'nile-options-container': true,
131
178
  'dropdown-position': this.type === 'text-area',
132
- })}class"
179
+ })}"
133
180
  >
134
- ${this.options &&
135
- this.options.map((option) => {
181
+ ${this.filteredOptions &&
182
+ this.filteredOptions.map((option) => {
136
183
  return html ` <nile-option
137
184
  .value="${option}"
138
185
  @click="${(event) => {
@@ -145,11 +192,13 @@ let NileContentEditor = class NileContentEditor extends NileElement {
145
192
  }
146
193
  render() {
147
194
  const hasHelpText = this.helpText ? true : false;
195
+ const hasError = !!this.error;
148
196
  const hasErrorMessage = !!this.errorMessage;
197
+ const readonly = !!this.readonly;
149
198
  const type = this.type;
150
199
  return html `
151
200
  <nile-popup
152
- .active="${this.openDropdown}"
201
+ .active="${live(this.openDropdown)}"
153
202
  sync="width"
154
203
  placement="bottom"
155
204
  class=${classMap({
@@ -162,17 +211,19 @@ let NileContentEditor = class NileContentEditor extends NileElement {
162
211
  ${this.showLabel && this.labelText
163
212
  ? html `<label class="ods-label">${this.labelText} </label> ${this
164
213
  .required
165
- ? html `<span class="asterik">*</span>`
214
+ ? html `<sapn class="asterik">*</span>`
166
215
  : ''}`
167
216
  : ''}
168
217
  <div
169
- contenteditable="true"
218
+ contenteditable="${!readonly}"
170
219
  class=${classMap({
171
220
  'content-editable-input': true,
172
- error: hasErrorMessage,
221
+ error: hasError || hasErrorMessage,
222
+ 'read-only': readonly,
173
223
  'text-area': type === 'text-area' ? true : false,
174
224
  })}
175
225
  @keydown=${this.handlekeyDown}
226
+ @paste=${this.handlePaste}
176
227
  ></div>
177
228
  ${hasHelpText
178
229
  ? html `
@@ -200,6 +251,9 @@ __decorate([
200
251
  __decorate([
201
252
  property()
202
253
  ], NileContentEditor.prototype, "options", void 0);
254
+ __decorate([
255
+ property()
256
+ ], NileContentEditor.prototype, "filteredOptions", void 0);
203
257
  __decorate([
204
258
  property()
205
259
  ], NileContentEditor.prototype, "showLabel", void 0);
@@ -214,7 +268,7 @@ __decorate([
214
268
  ], NileContentEditor.prototype, "required", void 0);
215
269
  __decorate([
216
270
  query('.content-editable-input')
217
- ], NileContentEditor.prototype, "input", void 0);
271
+ ], NileContentEditor.prototype, "contentEditor", void 0);
218
272
  __decorate([
219
273
  query('.nile-options-container')
220
274
  ], NileContentEditor.prototype, "autoOptions", void 0);
@@ -224,9 +278,15 @@ __decorate([
224
278
  __decorate([
225
279
  property({ attribute: 'help-text' })
226
280
  ], NileContentEditor.prototype, "helpText", void 0);
281
+ __decorate([
282
+ property({ attribute: 'readonly' })
283
+ ], NileContentEditor.prototype, "readonly", void 0);
227
284
  __decorate([
228
285
  property({ attribute: 'error-message' })
229
286
  ], NileContentEditor.prototype, "errorMessage", void 0);
287
+ __decorate([
288
+ property({ attribute: 'error' })
289
+ ], NileContentEditor.prototype, "error", void 0);
230
290
  __decorate([
231
291
  watch('type', { waitUntilFirstUpdate: true })
232
292
  ], NileContentEditor.prototype, "handleTypeChange", null);
@@ -1 +1 @@
1
- {"version":3,"file":"nile-content-editor.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-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 { html, property, TemplateResult } from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-content-editor.css';\nimport { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\n\n/**\n * Nile icon component.\n *\n * @tag nile-attribute-expression\n *\n */\n@customElement('nile-content-editor')\nexport class NileContentEditor extends NileElement {\n /**\n * @summary Allows you to handle both input and dropdown selection\n\n * @dependency nile-option\n \n * @event nile-change - Emitted when the control's value changes. \n */\n\n @property() value: string = '';\n\n @property() options: Array<any>;\n\n @property() showLabel: boolean = true;\n\n @property() labelText = '';\n\n @property() type = 'text|text-area';\n\n @property() required: boolean = true;\n\n @query('.content-editable-input') input: HTMLInputElement;\n @query('.nile-options-container') autoOptions: HTMLInputElement;\n\n @state() private openDropdown: boolean = false;\n\n @property({ attribute: 'help-text' }) helpText = '';\n\n @property({ attribute: 'error-message' }) errorMessage = '';\n\n static styles: CSSResultGroup = styles;\n\n connectedCallback() {\n super.connectedCallback();\n this.emit('nile-init');\n this.afterFirstRender().then(res => {\n if (res && this.value !== '')\n this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);\n });\n }\n\n @watch('type', { waitUntilFirstUpdate: true })\n handleTypeChange() {\n this.input.innerHTML = this.generateHTMLTagsWithValues(this.value);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n async afterFirstRender(): Promise<boolean> {\n return await this.updateComplete;\n }\n\n private handlekeyDown(event: any) {\n if (event.code === 'Enter' && this.type === 'text') {\n event.preventDefault();\n }\n setTimeout(() => {\n const value = this.input.innerText;\n this.emitInputChange();\n if (value.includes('$')) {\n this.openDropdown = true;\n }\n });\n }\n\n generateValuesFromHTMLTags(string: any): string {\n var pattern =\n /<span class=\"chips(?: chip-error)?\" contenteditable=\"false\">(.*?)<\\/span>/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return '{{' + option + '}}';\n });\n return result;\n }\n\n generateHTMLTagsWithValues(string: any): string {\n var pattern = /{{(.*?)}}/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return this.options.includes(option)\n ? '<span class=\"chips\" contenteditable=\"false\">' + option + '</span>'\n : '<span class=\"chips chip-error\" contenteditable=\"false\">' +\n option +\n '</span>';\n });\n return result;\n }\n\n emitInputChange(): void {\n let fieldValue = this.input.innerHTML;\n\n if (this.input.innerText !== '') {\n fieldValue = this.generateValuesFromHTMLTags(fieldValue);\n }\n fieldValue = fieldValue.replace(/&nbsp;/g, ' ');\n fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();\n this.emit('nile-change', {\n value: this.generateValuesFromHTMLTags(fieldValue),\n });\n }\n\n moveCursorToEnd = () => {\n const range = document.createRange();\n const selection = window.getSelection();\n range.setStart(this.input, this.input.childNodes.length);\n range.collapse(true);\n selection?.removeAllRanges();\n selection?.addRange(range);\n this.input.focus();\n };\n\n handleOptions(option: any): void {\n this.openDropdown = !this.openDropdown;\n\n // not appending Native element as it replaces all existing child nodes with new node\n const autoOptionsTag =\n '<span class=\"chips\" contenteditable=\"false\">' + option + '</span>';\n // text editor adds div when pressing enter , so before appending have to check if its parent node is div else append it to content editable parent\n if (this.input?.lastElementChild?.tagName === 'DIV') {\n this.input.lastElementChild.insertAdjacentHTML(\n 'beforeend',\n autoOptionsTag\n );\n if (this.input.lastElementChild.lastChild?.previousSibling)\n this.input.lastElementChild.lastChild.previousSibling.nodeValue =\n this.input.lastElementChild.lastChild.previousSibling.nodeValue!.replace(\n '$',\n ''\n );\n } else {\n this.input.insertAdjacentHTML('beforeend', autoOptionsTag);\n if (this.input.lastChild?.previousSibling) {\n this.input.lastChild.previousSibling.nodeValue =\n this.input.lastChild.previousSibling.nodeValue!.replace('$', '');\n }\n }\n this.emitInputChange();\n }\n\n public renderAutoOptions(): TemplateResult {\n return html`<div\n class=\"${classMap({\n 'nile-options-container': true,\n 'dropdown-position': this.type === 'text-area',\n })}class\"\n >\n ${this.options &&\n this.options.map((option: any) => {\n return html` <nile-option\n .value=\"${option}\"\n @click=\"${(event: Event) => {\n this.handleOptions(option);\n }}\"\n >${option}\n </nile-option>`;\n })}\n </div>`;\n }\n\n public render(): TemplateResult {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = !!this.errorMessage;\n const type = this.type;\n return html`\n <nile-popup\n .active=\"${this.openDropdown}\"\n sync=\"width\"\n placement=\"bottom\"\n class=${classMap({\n dropdown: true,\n 'dropdown--open': true,\n popup: true,\n })}\n >\n <div class=\"content-editable-wrapper\" slot=\"anchor\">\n ${this.showLabel && this.labelText\n ? html`<label class=\"ods-label\">${this.labelText} </label> ${this\n .required\n ? html`<span class=\"asterik\">*</span>`\n : ''}`\n : ''}\n <div\n contenteditable=\"true\"\n class=${classMap({\n 'content-editable-input': true,\n error: hasErrorMessage,\n 'text-area': type === 'text-area' ? true : false,\n })}\n @keydown=${this.handlekeyDown}\n ></div>\n ${hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``}\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n </div>\n\n ${this.renderAutoOptions()}\n </nile-popup>\n `;\n }\n}\n\nexport default NileContentEditor;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-content-editor': NileContentEditor;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-content-editor.js","sourceRoot":"","sources":["../../../src/nile-content-editor/nile-content-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 { html, property, TemplateResult } from 'lit-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-content-editor.css';\nimport { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport NileElement from '../internal/nile-element';\nimport { watch } from '../internal/watch';\nimport { KeyCode } from '../internal/enum';\nimport { live } from 'lit/directives/live.js';\n\n/**\n * Nile icon component.\n *\n * @tag nile-attribute-expression\n *\n */\n@customElement('nile-content-editor')\nexport class NileContentEditor extends NileElement {\n /**\n * @summary Allows you to handle both input and dropdown selection\n\n * @dependency nile-option\n \n * @event nile-change - Emitted when the control's value changes. \n */\n\n @property() value: string = '';\n\n @property() options: Array<any>;\n\n @property() filteredOptions: Array<any>;\n\n @property() showLabel: boolean = true;\n\n @property() labelText = '';\n\n @property() type = 'text|text-area';\n\n @property() required: boolean = true;\n\n @query('.content-editable-input') contentEditor: HTMLInputElement;\n @query('.nile-options-container') autoOptions: HTMLInputElement;\n\n @state() openDropdown = false;\n\n tagIdentifier = '$';\n\n filteredValue = '';\n\n @property({ attribute: 'help-text' }) helpText = '';\n\n @property({ attribute: 'readonly' }) readonly = false;\n\n @property({ attribute: 'error-message' }) errorMessage = '';\n\n @property({ attribute: 'error' }) error = false;\n\n static styles: CSSResultGroup = styles;\n\n connectedCallback() {\n this.handleOutsideClick = this.handleOutsideClick.bind(this);\n super.connectedCallback();\n this.emit('nile-init');\n this.addOpenListeners();\n this.setInitialValues();\n }\n\n setInitialValues() {\n this.updateComplete.then(res => {\n if (res && !!this.value)\n this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(\n this.value\n );\n });\n }\n\n addOpenListeners() {\n window.addEventListener('click', this.handleOutsideClick);\n }\n\n removeOpenListeners() {\n window.removeEventListener('click', this.handleOutsideClick);\n }\n\n toggleDropdown(value: boolean) {\n this.openDropdown = value;\n }\n\n handleOutsideClick(event: Event) {\n if (event && event.target) {\n this.toggleDropdown(false);\n }\n }\n\n @watch('type', { waitUntilFirstUpdate: true })\n handleTypeChange() {\n this.contentEditor.innerHTML = this.generateHTMLTagsWithValues(this.value);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeOpenListeners();\n this.emit('nile-destroy');\n }\n\n handlePaste(event: ClipboardEvent) {\n event.preventDefault();\n if (event.clipboardData) {\n let text = event.clipboardData.getData('text/plain');\n document.execCommand('insertText', false, text);\n }\n this.emitInputChange();\n }\n\n private handlekeyDown(event: any) {\n if (event.code === KeyCode.ENTER && this.type === 'text') {\n event.preventDefault();\n return;\n }\n if (event.code === KeyCode.ESCAPE) {\n event.preventDefault();\n this.toggleDropdown(false);\n return;\n }\n setTimeout(() => {\n const value = this.contentEditor.innerText;\n this.emitInputChange();\n if (value.includes(this.tagIdentifier)) {\n this.toggleDropdown(true);\n this.filterOptions();\n } else {\n this.toggleDropdown(false);\n }\n });\n }\n\n filterOptions() {\n this.filteredOptions = this.options;\n if (!!this.options.length && !!this.filteredValue) {\n this.filteredOptions = this.options.filter(item =>\n item.startsWith(this.filteredValue)\n );\n } else {\n this.filteredOptions = this.options;\n }\n }\n\n generateValuesFromHTMLTags(string: any): string {\n var pattern =\n /<span class=\"chips(?: chip-error)?\" contenteditable=\"false\">(.*?)<\\/span>/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return '{{' + option + '}}';\n });\n return result;\n }\n\n generateHTMLTagsWithValues(string: any): string {\n var pattern = /{{(.*?)}}/g;\n var result = string.replace(pattern, (match: any, option: any) => {\n return this.options.includes(option)\n ? '<span class=\"chips\" contenteditable=\"false\">' + option + '</span>'\n : '<span class=\"chips chip-error\" contenteditable=\"false\">' +\n option +\n '</span>';\n });\n return result;\n }\n\n emitInputChange(): void {\n if (this.contentEditor) {\n let fieldValue = this.contentEditor.innerHTML;\n\n if (this.contentEditor.innerText !== '') {\n fieldValue = this.generateValuesFromHTMLTags(fieldValue);\n }\n fieldValue = fieldValue.replace(/&nbsp;/g, ' ');\n fieldValue = fieldValue === '<br>' ? '' : fieldValue?.trim();\n this.emit('nile-change', {\n value: this.generateValuesFromHTMLTags(fieldValue),\n });\n }\n }\n\n insertNodes(parentNode: Node, childNodes: NodeList, autoOptionsTag: Node) {\n Array.from(childNodes).map((node: Node, index: number) => {\n if (node.hasChildNodes()) {\n this.insertNodes(node, node.childNodes, autoOptionsTag);\n } else {\n if (node.nodeValue?.includes(this.tagIdentifier)) {\n parentNode.childNodes[index].nodeValue = node.nodeValue?.replace(\n this.tagIdentifier + this.filteredValue,\n ''\n );\n parentNode.childNodes[index].after(autoOptionsTag);\n }\n }\n });\n }\n\n handleOptions(option: any): void {\n this.toggleDropdown(false);\n let autoOptionsTag = document.createElement('span');\n autoOptionsTag.setAttribute('class', 'chips');\n autoOptionsTag.setAttribute('contentEditable', 'false');\n autoOptionsTag.innerText = option;\n this.insertNodes(\n this.contentEditor,\n this.contentEditor.childNodes,\n autoOptionsTag\n );\n this.filteredOptions = this.options;\n this.filteredValue = '';\n this.emitInputChange();\n }\n\n public renderAutoOptions(): TemplateResult {\n return html`<div\n class=\"${classMap({\n 'nile-options-container': true,\n 'dropdown-position': this.type === 'text-area',\n })}\"\n >\n ${this.filteredOptions &&\n this.filteredOptions.map((option: any) => {\n return html` <nile-option\n .value=\"${option}\"\n @click=\"${(event: Event) => {\n this.handleOptions(option);\n }}\"\n >${option}\n </nile-option>`;\n })}\n </div>`;\n }\n\n public render(): TemplateResult {\n const hasHelpText = this.helpText ? true : false;\n const hasError = !!this.error;\n const hasErrorMessage = !!this.errorMessage;\n const readonly = !!this.readonly;\n const type = this.type;\n return html`\n <nile-popup\n .active=\"${live(this.openDropdown)}\"\n sync=\"width\"\n placement=\"bottom\"\n class=${classMap({\n dropdown: true,\n 'dropdown--open': true,\n popup: true,\n })}\n >\n <div class=\"content-editable-wrapper\" slot=\"anchor\">\n ${this.showLabel && this.labelText\n ? html`<label class=\"ods-label\">${this.labelText} </label> ${this\n .required\n ? html`<sapn class=\"asterik\">*</span>`\n : ''}`\n : ''}\n <div\n contenteditable=\"${!readonly}\"\n class=${classMap({\n 'content-editable-input': true,\n error: hasError || hasErrorMessage,\n 'read-only': readonly,\n 'text-area': type === 'text-area' ? true : false,\n })}\n @keydown=${this.handlekeyDown}\n @paste=${this.handlePaste}\n ></div>\n ${hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``}\n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n </div>\n\n ${this.renderAutoOptions()}\n </nile-popup>\n `;\n }\n}\n\nexport default NileContentEditor;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-content-editor': NileContentEditor;\n }\n}\n"]}
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Do not edit directly
3
+ */
4
+ declare const _default: "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iMTQiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz48cmVjdCB4PSIzIiB5PSI1IiB3aWR0aD0iMTAiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz48cmVjdCB4PSI1IiB5PSI5IiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIvPjxyZWN0IHg9IjciIHk9IjEzIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuMzA3MiA5LjUyMzIzQzExLjc5NTggOS4xODkyOSAxMi4zNzIyIDkuMDA3MzMgMTIuOTY0IDkuMDAwMjJDMTMuMzYwOSA4Ljk5NTQ1IDEzLjc1NDkgOS4wNjk1MiAxNC4xMjMxIDkuMjE4MTVDMTQuNDkxMiA5LjM2Njc4IDE0LjgyNjIgOS41ODcgMTUuMTA4NiA5Ljg2NjA1QzE1LjM5MSAxMC4xNDUxIDE1LjYxNTIgMTAuNDc3NCAxNS43NjgyIDEwLjg0MzhDMTUuOTIxMiAxMS4yMTAxIDE2IDExLjYwMzIgMTYgMTIuMDAwMkMxNS45OTk5IDEyLjU5MiAxNS44MjQ5IDEzLjE3MDYgMTUuNDk2OCAxMy42NjMxQzE1LjE2ODcgMTQuMTU1NiAxNC43MDIzIDE0LjU0MDEgMTQuMTU2MiAxNC43NjgyQzEzLjYxMDEgMTQuOTk2MyAxMy4wMDg4IDE1LjA1NzggMTIuNDI3OSAxNC45NDQ5QzExLjg0NjkgMTQuODMyMSAxMS4zMTIzIDE0LjU0OTkgMTAuODkxNCAxNC4xMzM5QzEwLjQ3MDQgMTMuNzE4IDEwLjE4MTkgMTMuMTg2OCAxMC4wNjIxIDEyLjYwNzNDOS45NDIzMSAxMi4wMjc3IDkuOTk2NiAxMS40MjU3IDEwLjIxODIgMTAuODc2OUMxMC40Mzk3IDEwLjMyODEgMTAuODE4NiA5Ljg1NzE3IDExLjMwNzIgOS41MjMyM1pNMTIuNTcwOCAxMy42OTExTDE1LjE0MTUgMTEuMTIwM0wxNC41MDQ1IDEwLjQ4MzNMMTIuNTcwOCAxMi40MTdMMTEuNTM3OSAxMS4zODQyTDEwLjkwMDkgMTIuMDIxMkwxMi41NzA4IDEzLjY5MTFaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==";
5
+ export default _default;
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Do not edit directly
3
+ */
4
+ export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iMTQiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz48cmVjdCB4PSIzIiB5PSI1IiB3aWR0aD0iMTAiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz48cmVjdCB4PSI1IiB5PSI5IiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIvPjxyZWN0IHg9IjciIHk9IjEzIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuMzA3MiA5LjUyMzIzQzExLjc5NTggOS4xODkyOSAxMi4zNzIyIDkuMDA3MzMgMTIuOTY0IDkuMDAwMjJDMTMuMzYwOSA4Ljk5NTQ1IDEzLjc1NDkgOS4wNjk1MiAxNC4xMjMxIDkuMjE4MTVDMTQuNDkxMiA5LjM2Njc4IDE0LjgyNjIgOS41ODcgMTUuMTA4NiA5Ljg2NjA1QzE1LjM5MSAxMC4xNDUxIDE1LjYxNTIgMTAuNDc3NCAxNS43NjgyIDEwLjg0MzhDMTUuOTIxMiAxMS4yMTAxIDE2IDExLjYwMzIgMTYgMTIuMDAwMkMxNS45OTk5IDEyLjU5MiAxNS44MjQ5IDEzLjE3MDYgMTUuNDk2OCAxMy42NjMxQzE1LjE2ODcgMTQuMTU1NiAxNC43MDIzIDE0LjU0MDEgMTQuMTU2MiAxNC43NjgyQzEzLjYxMDEgMTQuOTk2MyAxMy4wMDg4IDE1LjA1NzggMTIuNDI3OSAxNC45NDQ5QzExLjg0NjkgMTQuODMyMSAxMS4zMTIzIDE0LjU0OTkgMTAuODkxNCAxNC4xMzM5QzEwLjQ3MDQgMTMuNzE4IDEwLjE4MTkgMTMuMTg2OCAxMC4wNjIxIDEyLjYwNzNDOS45NDIzMSAxMi4wMjc3IDkuOTk2NiAxMS40MjU3IDEwLjIxODIgMTAuODc2OUMxMC40Mzk3IDEwLjMyODEgMTAuODE4NiA5Ljg1NzE3IDExLjMwNzIgOS41MjMyM1pNMTIuNTcwOCAxMy42OTExTDE1LjE0MTUgMTEuMTIwM0wxNC41MDQ1IDEwLjQ4MzNMMTIuNTcwOCAxMi40MTdMMTEuNTM3OSAxMS4zODQyTDEwLjkwMDkgMTIuMDIxMkwxMi41NzA4IDEzLjY5MTFaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==";
5
+ //# sourceMappingURL=apply-filter.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"apply-filter.js","sourceRoot":"","sources":["../../../../../src/nile-icon/icons/svg/apply-filter.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAe,s5CAAs5C,CAAC","sourcesContent":["/**\n * Do not edit directly\n */\n\nexport default \"PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iMTQiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz48cmVjdCB4PSIzIiB5PSI1IiB3aWR0aD0iMTAiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz48cmVjdCB4PSI1IiB5PSI5IiB3aWR0aD0iMyIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIvPjxyZWN0IHg9IjciIHk9IjEzIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuMzA3MiA5LjUyMzIzQzExLjc5NTggOS4xODkyOSAxMi4zNzIyIDkuMDA3MzMgMTIuOTY0IDkuMDAwMjJDMTMuMzYwOSA4Ljk5NTQ1IDEzLjc1NDkgOS4wNjk1MiAxNC4xMjMxIDkuMjE4MTVDMTQuNDkxMiA5LjM2Njc4IDE0LjgyNjIgOS41ODcgMTUuMTA4NiA5Ljg2NjA1QzE1LjM5MSAxMC4xNDUxIDE1LjYxNTIgMTAuNDc3NCAxNS43NjgyIDEwLjg0MzhDMTUuOTIxMiAxMS4yMTAxIDE2IDExLjYwMzIgMTYgMTIuMDAwMkMxNS45OTk5IDEyLjU5MiAxNS44MjQ5IDEzLjE3MDYgMTUuNDk2OCAxMy42NjMxQzE1LjE2ODcgMTQuMTU1NiAxNC43MDIzIDE0LjU0MDEgMTQuMTU2MiAxNC43NjgyQzEzLjYxMDEgMTQuOTk2MyAxMy4wMDg4IDE1LjA1NzggMTIuNDI3OSAxNC45NDQ5QzExLjg0NjkgMTQuODMyMSAxMS4zMTIzIDE0LjU0OTkgMTAuODkxNCAxNC4xMzM5QzEwLjQ3MDQgMTMuNzE4IDEwLjE4MTkgMTMuMTg2OCAxMC4wNjIxIDEyLjYwNzNDOS45NDIzMSAxMi4wMjc3IDkuOTk2NiAxMS40MjU3IDEwLjIxODIgMTAuODc2OUMxMC40Mzk3IDEwLjMyODEgMTAuODE4NiA5Ljg1NzE3IDExLjMwNzIgOS41MjMyM1pNMTIuNTcwOCAxMy42OTExTDE1LjE0MTUgMTEuMTIwM0wxNC41MDQ1IDEwLjQ4MzNMMTIuNTcwOCAxMi40MTdMMTEuNTM3OSAxMS4zODQyTDEwLjkwMDkgMTIuMDIxMkwxMi41NzA4IDEzLjY5MTFaIiBmaWxsPSJibGFjayIvPjwvc3ZnPg==\";"]}
@@ -11,6 +11,7 @@ export { default as anomaly } from './anomaly';
11
11
  export { default as api } from './api';
12
12
  export { default as application } from './application';
13
13
  export { default as applications } from './applications';
14
+ export { default as applyfilter } from './apply-filter';
14
15
  export { default as approve } from './approve';
15
16
  export { default as aquera } from './aquera';
16
17
  export { default as aquerasupport } from './aquerasupport';
@@ -11,6 +11,7 @@ export { default as anomaly } from './anomaly';
11
11
  export { default as api } from './api';
12
12
  export { default as application } from './application';
13
13
  export { default as applications } from './applications';
14
+ export { default as applyfilter } from './apply-filter';
14
15
  export { default as approve } from './approve';
15
16
  export { default as aquera } from './aquera';
16
17
  export { default as aquerasupport } from './aquerasupport';