@aquera/nile-elements 0.0.29 → 0.0.31
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.
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/index.d.ts +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/index.js +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/index.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.css.js +2 -2
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button-toggle/nile-button-toggle.css.js +12 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button-toggle/nile-button-toggle.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.js +1 -3
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-calendar/nile-calendar.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.css.js +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-content-editor/nile-content-editor.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-dialog/nile-dialog.js +0 -6
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-dialog/nile-dialog.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.css.js +5 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.js +5 -2
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon-button/nile-icon-button.d.ts +4 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon-button/nile-icon-button.js +16 -2
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-icon-button/nile-icon-button.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-input/nile-input.css.js +4 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-input/nile-input.js +4 -4
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-input/nile-input.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.d.ts +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.js +9 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.css.js +43 -6
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.d.ts +30 -17
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js +143 -110
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-tab/nile-tab.css.js +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-tab/nile-tab.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-tab/nile-tab.js +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-tab/nile-tab.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-textarea/nile-textarea.css.js +4 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-textarea/nile-textarea.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-textarea/nile-textarea.js +5 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-textarea/nile-textarea.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-toast/index.d.ts +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-toast/index.js +2 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-toast/index.js.map +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-toast/nile-toast.css.d.ts +12 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-toast/nile-toast.css.js +174 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-toast/nile-toast.css.js.map +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-toast/nile-toast.d.ts +88 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-toast/nile-toast.js +350 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-toast/nile-toast.js.map +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.iife.js +651 -325
- package/dist/nile-button/nile-button.css.cjs.js +1 -1
- package/dist/nile-button/nile-button.css.cjs.js.map +1 -1
- package/dist/nile-button/nile-button.css.esm.js +2 -2
- package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js +1 -1
- package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js.map +1 -1
- package/dist/nile-button-toggle/nile-button-toggle.css.esm.js +12 -0
- package/dist/nile-calendar/index.cjs.js +1 -1
- package/dist/nile-calendar/index.esm.js +1 -1
- package/dist/nile-calendar/nile-calendar.cjs.js +1 -1
- package/dist/nile-calendar/nile-calendar.cjs.js.map +1 -1
- package/dist/nile-calendar/nile-calendar.esm.js +4 -6
- package/dist/nile-calendar/timezones.cjs.js +1 -1
- package/dist/nile-calendar/timezones.cjs.js.map +1 -1
- package/dist/nile-calendar/timezones.esm.js +1 -1
- package/dist/nile-content-editor/nile-content-editor.css.cjs.js +1 -1
- package/dist/nile-content-editor/nile-content-editor.css.cjs.js.map +1 -1
- package/dist/nile-content-editor/nile-content-editor.css.esm.js +1 -0
- package/dist/nile-dialog/nile-dialog.cjs.js.map +1 -1
- package/dist/nile-error-message/nile-error-message.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.cjs.js.map +1 -1
- package/dist/nile-error-message/nile-error-message.css.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.css.cjs.js.map +1 -1
- package/dist/nile-error-message/nile-error-message.css.esm.js +5 -0
- package/dist/nile-error-message/nile-error-message.esm.js +6 -4
- package/dist/nile-icon-button/nile-icon-button.cjs.js +1 -1
- package/dist/nile-icon-button/nile-icon-button.cjs.js.map +1 -1
- package/dist/nile-icon-button/nile-icon-button.esm.js +5 -2
- package/dist/nile-input/nile-input.cjs.js +1 -1
- package/dist/nile-input/nile-input.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.cjs.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.esm.js +4 -0
- package/dist/nile-input/nile-input.esm.js +2 -2
- package/dist/nile-select/nile-select.cjs.js +1 -1
- package/dist/nile-select/nile-select.cjs.js.map +1 -1
- package/dist/nile-select/nile-select.esm.js +2 -2
- package/dist/nile-switcher/index.cjs.js +1 -1
- package/dist/nile-switcher/index.esm.js +1 -1
- package/dist/nile-switcher/nile-switcher.cjs.js +1 -1
- package/dist/nile-switcher/nile-switcher.cjs.js.map +1 -1
- package/dist/nile-switcher/nile-switcher.css.cjs.js +1 -1
- package/dist/nile-switcher/nile-switcher.css.cjs.js.map +1 -1
- package/dist/nile-switcher/nile-switcher.css.esm.js +45 -8
- package/dist/nile-switcher/nile-switcher.esm.js +72 -44
- package/dist/nile-tab/nile-tab.cjs.js +1 -1
- package/dist/nile-tab/nile-tab.cjs.js.map +1 -1
- package/dist/nile-tab/nile-tab.css.cjs.js +1 -1
- package/dist/nile-tab/nile-tab.css.cjs.js.map +1 -1
- package/dist/nile-tab/nile-tab.css.esm.js +1 -0
- package/dist/nile-tab/nile-tab.esm.js +1 -0
- package/dist/nile-textarea/nile-textarea.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.cjs.js.map +1 -1
- package/dist/nile-textarea/nile-textarea.css.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.css.cjs.js.map +1 -1
- package/dist/nile-textarea/nile-textarea.css.esm.js +4 -1
- package/dist/nile-textarea/nile-textarea.esm.js +3 -1
- package/dist/nile-toast/index.cjs.js +2 -0
- package/dist/nile-toast/index.cjs.js.map +1 -0
- package/dist/nile-toast/index.esm.js +1 -0
- package/dist/nile-toast/nile-toast.cjs.js +2 -0
- package/dist/nile-toast/nile-toast.cjs.js.map +1 -0
- package/dist/nile-toast/nile-toast.css.cjs.js +2 -0
- package/dist/nile-toast/nile-toast.css.cjs.js.map +1 -0
- package/dist/nile-toast/nile-toast.css.esm.js +162 -0
- package/dist/nile-toast/nile-toast.esm.js +74 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/nile-button/nile-button.css.js +2 -2
- package/dist/src/nile-button/nile-button.css.js.map +1 -1
- package/dist/src/nile-button-toggle/nile-button-toggle.css.js +12 -0
- package/dist/src/nile-button-toggle/nile-button-toggle.css.js.map +1 -1
- package/dist/src/nile-calendar/nile-calendar.js +1 -3
- package/dist/src/nile-calendar/nile-calendar.js.map +1 -1
- package/dist/src/nile-content-editor/nile-content-editor.css.js +1 -0
- package/dist/src/nile-content-editor/nile-content-editor.css.js.map +1 -1
- package/dist/src/nile-dialog/nile-dialog.js +0 -6
- package/dist/src/nile-dialog/nile-dialog.js.map +1 -1
- package/dist/src/nile-error-message/nile-error-message.css.js +5 -0
- package/dist/src/nile-error-message/nile-error-message.css.js.map +1 -1
- package/dist/src/nile-error-message/nile-error-message.js +5 -2
- package/dist/src/nile-error-message/nile-error-message.js.map +1 -1
- package/dist/src/nile-icon-button/nile-icon-button.d.ts +4 -0
- package/dist/src/nile-icon-button/nile-icon-button.js +16 -2
- package/dist/src/nile-icon-button/nile-icon-button.js.map +1 -1
- package/dist/src/nile-input/nile-input.css.js +4 -0
- package/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/dist/src/nile-input/nile-input.js +4 -4
- package/dist/src/nile-input/nile-input.js.map +1 -1
- package/dist/src/nile-select/nile-select.d.ts +1 -0
- package/dist/src/nile-select/nile-select.js +9 -0
- package/dist/src/nile-select/nile-select.js.map +1 -1
- package/dist/src/nile-switcher/nile-switcher.css.js +43 -6
- package/dist/src/nile-switcher/nile-switcher.css.js.map +1 -1
- package/dist/src/nile-switcher/nile-switcher.d.ts +30 -17
- package/dist/src/nile-switcher/nile-switcher.js +143 -110
- package/dist/src/nile-switcher/nile-switcher.js.map +1 -1
- package/dist/src/nile-tab/nile-tab.css.js +1 -0
- package/dist/src/nile-tab/nile-tab.css.js.map +1 -1
- package/dist/src/nile-tab/nile-tab.js +1 -0
- package/dist/src/nile-tab/nile-tab.js.map +1 -1
- package/dist/src/nile-textarea/nile-textarea.css.js +4 -1
- package/dist/src/nile-textarea/nile-textarea.css.js.map +1 -1
- package/dist/src/nile-textarea/nile-textarea.js +5 -0
- package/dist/src/nile-textarea/nile-textarea.js.map +1 -1
- package/dist/src/nile-toast/index.d.ts +1 -0
- package/dist/src/nile-toast/index.js +2 -0
- package/dist/src/nile-toast/index.js.map +1 -0
- package/dist/src/nile-toast/nile-toast.css.d.ts +12 -0
- package/dist/src/nile-toast/nile-toast.css.js +174 -0
- package/dist/src/nile-toast/nile-toast.css.js.map +1 -0
- package/dist/src/nile-toast/nile-toast.d.ts +88 -0
- package/dist/src/nile-toast/nile-toast.js +350 -0
- package/dist/src/nile-toast/nile-toast.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/index.ts +1 -0
- package/src/nile-button/nile-button.css.ts +2 -2
- package/src/nile-button-toggle/nile-button-toggle.css.ts +12 -0
- package/src/nile-calendar/nile-calendar.ts +1 -5
- package/src/nile-content-editor/nile-content-editor.css.ts +1 -0
- package/src/nile-dialog/nile-dialog.ts +0 -6
- package/src/nile-error-message/nile-error-message.css.ts +5 -0
- package/src/nile-error-message/nile-error-message.ts +6 -2
- package/src/nile-icon-button/nile-icon-button.ts +24 -5
- package/src/nile-input/nile-input.css.ts +4 -0
- package/src/nile-input/nile-input.ts +6 -6
- package/src/nile-select/nile-select.ts +9 -0
- package/src/nile-switcher/nile-switcher.css.ts +43 -6
- package/src/nile-switcher/nile-switcher.ts +167 -172
- package/src/nile-tab/nile-tab.css.ts +1 -0
- package/src/nile-tab/nile-tab.ts +1 -0
- package/src/nile-textarea/nile-textarea.css.ts +4 -1
- package/src/nile-textarea/nile-textarea.ts +6 -1
- package/src/nile-toast/index.ts +1 -0
- package/src/nile-toast/nile-toast.css.ts +176 -0
- package/src/nile-toast/nile-toast.ts +381 -0
@@ -11,6 +11,12 @@ import { styles } from './nile-switcher.css';
|
|
11
11
|
import NileElement from '../internal/nile-element';
|
12
12
|
import { choose } from 'lit/directives/choose.js';
|
13
13
|
import { classMap } from 'lit/directives/class-map.js';
|
14
|
+
import { repeat } from 'lit/directives/repeat.js';
|
15
|
+
export var POSITIONS;
|
16
|
+
(function (POSITIONS) {
|
17
|
+
POSITIONS["INLINE"] = "inline";
|
18
|
+
POSITIONS["BLOCK"] = "block";
|
19
|
+
})(POSITIONS || (POSITIONS = {}));
|
14
20
|
export var INPUT_TYPE;
|
15
21
|
(function (INPUT_TYPE) {
|
16
22
|
INPUT_TYPE["DEFAULT"] = "defaultInput";
|
@@ -24,9 +30,16 @@ export var INPUT_TYPE_NAMES;
|
|
24
30
|
INPUT_TYPE_NAMES["TEXTAREA"] = "text-area";
|
25
31
|
INPUT_TYPE_NAMES["RADIO"] = "radio";
|
26
32
|
INPUT_TYPE_NAMES["CONTENTEDITOR"] = "content-editor";
|
33
|
+
INPUT_TYPE_NAMES["OBJECT_MAPPER"] = "object-mapper";
|
27
34
|
})(INPUT_TYPE_NAMES || (INPUT_TYPE_NAMES = {}));
|
35
|
+
export var MODE;
|
36
|
+
(function (MODE) {
|
37
|
+
MODE["CREATE"] = "create";
|
38
|
+
MODE["EDIT"] = "edit";
|
39
|
+
})(MODE || (MODE = {}));
|
28
40
|
let NileSwitcher = class NileSwitcher extends NileElement {
|
29
41
|
connectedCallback() {
|
42
|
+
this.currentInput = this.nileSwitchConfig.inputs[0];
|
30
43
|
super.connectedCallback();
|
31
44
|
this.emit('nile-init');
|
32
45
|
}
|
@@ -34,9 +47,13 @@ let NileSwitcher = class NileSwitcher extends NileElement {
|
|
34
47
|
super.disconnectedCallback();
|
35
48
|
this.emit('nile-destroy');
|
36
49
|
}
|
37
|
-
renderNileText(Input
|
38
|
-
const { value, label, placeholder, disabled, required, error, errorMessage, inputType
|
50
|
+
renderNileText(Input) {
|
51
|
+
const { value, label, placeholder, disabled, required, error, errorMessage, inputType, noborder, } = Input;
|
39
52
|
return html `<nile-input
|
53
|
+
class=${classMap({
|
54
|
+
'switcher-input': true,
|
55
|
+
'switcher-input--noborder': !!noborder,
|
56
|
+
})}
|
40
57
|
.value=${value}
|
41
58
|
.label=${label}
|
42
59
|
.disabled=${disabled}
|
@@ -45,13 +62,14 @@ let NileSwitcher = class NileSwitcher extends NileElement {
|
|
45
62
|
.placeholder=${placeholder}
|
46
63
|
.error=${error}
|
47
64
|
@nile-input=${(e) => {
|
48
|
-
this.handleChange(e, inputType
|
65
|
+
this.handleChange(e, inputType);
|
49
66
|
}}
|
50
67
|
></nile-input>`;
|
51
68
|
}
|
52
|
-
renderDropdown(Input
|
53
|
-
const { options, multiple, placeholder, disabled, value, error, errorMessage, inputType
|
69
|
+
renderDropdown(Input) {
|
70
|
+
const { options, multiple, placeholder, disabled, value, error, errorMessage, inputType, } = Input;
|
54
71
|
return html `<nile-select
|
72
|
+
class="switcher-dropdown"
|
55
73
|
.placeholder=${placeholder}
|
56
74
|
.disabled="${disabled}"
|
57
75
|
.multiple="${multiple}"
|
@@ -59,7 +77,7 @@ let NileSwitcher = class NileSwitcher extends NileElement {
|
|
59
77
|
.error="${error}"
|
60
78
|
.errorMessage="${errorMessage}"
|
61
79
|
@nile-change=${(e) => {
|
62
|
-
this.handleChange(e, inputType
|
80
|
+
this.handleChange(e, inputType);
|
63
81
|
}}
|
64
82
|
>
|
65
83
|
${options?.map((option) => {
|
@@ -67,39 +85,42 @@ let NileSwitcher = class NileSwitcher extends NileElement {
|
|
67
85
|
})}
|
68
86
|
</nile-select>`;
|
69
87
|
}
|
70
|
-
renderNileTextArea(Input
|
71
|
-
const { value, disabled, readonly, errorMessage, error, inputType
|
88
|
+
renderNileTextArea(Input) {
|
89
|
+
const { value, disabled, readonly, errorMessage, error, inputType } = Input;
|
72
90
|
return html `<nile-textarea
|
91
|
+
class="switcher-textarea"
|
73
92
|
.value=${value}
|
74
93
|
.disabled=${disabled}
|
75
94
|
?readonly=${readonly}
|
76
95
|
.error=${error}
|
77
96
|
.errorMessage=${errorMessage}
|
78
97
|
@nile-input=${(e) => {
|
79
|
-
this.handleChange(e, inputType
|
98
|
+
this.handleChange(e, inputType);
|
80
99
|
}}
|
81
100
|
></nile-textarea>`;
|
82
101
|
}
|
83
|
-
renderNileCheckBox(Input
|
84
|
-
const { value, label, disabled, inputType
|
102
|
+
renderNileCheckBox(Input) {
|
103
|
+
const { value, label, disabled, inputType } = Input;
|
85
104
|
return html `<nile-checkbox
|
105
|
+
class="switcher-checkbox"
|
86
106
|
.checked=${value}
|
87
107
|
.label=${label}
|
88
108
|
.disabled=${disabled}
|
89
109
|
@valueChange=${(e) => {
|
90
|
-
this.handleChange(e, inputType
|
110
|
+
this.handleChange(e, inputType);
|
91
111
|
}}
|
92
112
|
></nile-checkbox
|
93
113
|
>; `;
|
94
114
|
}
|
95
|
-
renderNileRadio(Input
|
96
|
-
const { options, value, disabled,
|
115
|
+
renderNileRadio(Input) {
|
116
|
+
const { options, value, disabled, errorMessage, inputType } = Input;
|
97
117
|
const haserrorMessage = !!errorMessage;
|
98
118
|
return html `<nile-radio-group
|
119
|
+
class="switcher-radio-group"
|
99
120
|
.value=${value}
|
100
121
|
.disabled=${disabled}
|
101
122
|
@change=${(e) => {
|
102
|
-
this.handleChange(e, inputType
|
123
|
+
this.handleChange(e, inputType);
|
103
124
|
}}
|
104
125
|
>
|
105
126
|
${options &&
|
@@ -114,9 +135,10 @@ let NileSwitcher = class NileSwitcher extends NileElement {
|
|
114
135
|
<nile-form-error-message>${errorMessage}</nile-form-error-message>
|
115
136
|
`;
|
116
137
|
}
|
117
|
-
renderContentEditor(Input
|
118
|
-
let { options, inputType
|
138
|
+
renderContentEditor(Input) {
|
139
|
+
let { options, inputType, errorMessage, type, readonly, noborder, value } = Input;
|
119
140
|
return html `<nile-content-editor
|
141
|
+
class="switcher-content-editor"
|
120
142
|
.value=${value}
|
121
143
|
.options=${options}
|
122
144
|
.type=${type}
|
@@ -124,115 +146,123 @@ let NileSwitcher = class NileSwitcher extends NileElement {
|
|
124
146
|
.noborder=${noborder}
|
125
147
|
.errorMessage=${errorMessage}
|
126
148
|
@nile-change=${(e) => {
|
127
|
-
this.handleChange(e, inputType
|
149
|
+
this.handleChange(e, inputType);
|
128
150
|
}}
|
129
151
|
>
|
130
152
|
</nile-content-editor>`;
|
131
153
|
}
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
event.detail.value;
|
140
|
-
}
|
141
|
-
event.stopPropagation();
|
142
|
-
this.emit('nile-change', { config: this.nileSwitchConfig });
|
143
|
-
}
|
144
|
-
renderIcon(defaultInput, switchInput) {
|
145
|
-
const defaultHelperText = defaultInput.helperText;
|
146
|
-
const switchHelperText = switchInput.helperText;
|
147
|
-
const icon = !this.nileSwitchConfig.toggleSwitch
|
148
|
-
? 'header-functions'
|
149
|
-
: 'stringinput';
|
150
|
-
const helperText = !this.nileSwitchConfig.toggleSwitch
|
151
|
-
? !!switchHelperText
|
152
|
-
? switchHelperText
|
153
|
-
: `switch to ${switchInput.inputType}`
|
154
|
-
: !!defaultHelperText
|
155
|
-
? defaultHelperText
|
156
|
-
: `switch to ${defaultInput.inputType}`;
|
157
|
-
return html ` <nile-tooltip
|
154
|
+
renderObjectMapper() {
|
155
|
+
const noborder = this.currentInput.noborder;
|
156
|
+
const mode = this.currentInput.mode;
|
157
|
+
const value = this.currentInput.mode === MODE.CREATE
|
158
|
+
? 'Click to Create - Not Mapped'
|
159
|
+
: '';
|
160
|
+
return html `<nile-input
|
158
161
|
class=${classMap({
|
159
|
-
'
|
162
|
+
'switcher-object-mapper': true,
|
163
|
+
'switcher-object-mapper--noborder': !!noborder,
|
160
164
|
})}
|
161
|
-
|
162
|
-
|
165
|
+
.value=${value}
|
166
|
+
readonly="true"
|
167
|
+
@click="${(e) => this.handleChange(e, INPUT_TYPE_NAMES.OBJECT_MAPPER)}"
|
163
168
|
>
|
164
169
|
<nile-icon
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
})}
|
169
|
-
.name=${icon}
|
170
|
+
class="pointer-cursor switcher-object-mapper-icon"
|
171
|
+
slot="suffix"
|
172
|
+
name="collapse"
|
170
173
|
color="#005EA6"
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
+
size="16"
|
175
|
+
>
|
176
|
+
</nile-icon>
|
177
|
+
</nile-input>`;
|
174
178
|
}
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
179
|
+
handleChange(event, inputType) {
|
180
|
+
switch (inputType) {
|
181
|
+
case INPUT_TYPE_NAMES.OBJECT_MAPPER:
|
182
|
+
this.currentInput.value = 'clicked';
|
183
|
+
break;
|
184
|
+
case INPUT_TYPE_NAMES.CHECKBOX:
|
185
|
+
this.currentInput.value = event.detail.checked;
|
186
|
+
break;
|
187
|
+
default:
|
188
|
+
this.currentInput.value = event.detail.value;
|
181
189
|
}
|
182
|
-
|
190
|
+
event.stopPropagation();
|
191
|
+
this.emit('nile-change', { input: this.currentInput });
|
183
192
|
}
|
184
|
-
|
185
|
-
const
|
186
|
-
const
|
193
|
+
renderIcon() {
|
194
|
+
const inputs = this.nileSwitchConfig.inputs;
|
195
|
+
const toolTipPosition = this.nileSwitchConfig.align === POSITIONS.BLOCK ? 'top' : 'bottom';
|
187
196
|
return html `
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
197
|
+
<div class="switcher-icons-container">
|
198
|
+
${repeat(inputs, input => html ` <nile-tooltip
|
199
|
+
class=${classMap({
|
200
|
+
'switcher-tooltip-container': true,
|
201
|
+
})}
|
202
|
+
content=${input.helperText}
|
203
|
+
placement=${toolTipPosition}
|
204
|
+
>
|
205
|
+
<div class=${classMap({
|
206
|
+
'switcher-icon-container': true,
|
207
|
+
current: input.order === this.currentInput.order,
|
208
|
+
})}>
|
209
|
+
<nile-icon
|
210
|
+
size="16"
|
211
|
+
class=${classMap({
|
212
|
+
'pointer-cursor': true,
|
213
|
+
})}
|
214
|
+
.name=${input.icon}
|
215
|
+
color="#000000"
|
216
|
+
@click=${() => this.toggleField(input)}
|
217
|
+
></nile-icon>
|
218
|
+
<div>
|
219
|
+
|
220
|
+
</nile-tooltip>`)}
|
221
|
+
</div>
|
222
|
+
`;
|
223
|
+
}
|
224
|
+
toggleField(currentInput) {
|
225
|
+
this.currentInput = currentInput;
|
226
|
+
this.emit('nile-switch', { input: this.currentInput });
|
227
|
+
}
|
228
|
+
singleFieldSwitcher() {
|
229
|
+
return html `
|
230
|
+
${choose(this.currentInput.inputType, [
|
231
|
+
[INPUT_TYPE_NAMES.TEXT, () => this.renderNileText(this.currentInput)],
|
232
|
+
[
|
233
|
+
INPUT_TYPE_NAMES.CHECKBOX,
|
234
|
+
() => this.renderNileCheckBox(this.currentInput),
|
235
|
+
],
|
236
|
+
[
|
237
|
+
INPUT_TYPE_NAMES.TEXTAREA,
|
238
|
+
() => this.renderNileTextArea(this.currentInput),
|
239
|
+
],
|
240
|
+
[
|
241
|
+
INPUT_TYPE_NAMES.RADIO,
|
242
|
+
() => this.renderNileRadio(this.currentInput),
|
243
|
+
],
|
244
|
+
[
|
245
|
+
INPUT_TYPE_NAMES.DROPDOWN,
|
246
|
+
() => this.renderDropdown(this.currentInput),
|
247
|
+
],
|
248
|
+
[
|
249
|
+
INPUT_TYPE_NAMES.CONTENTEDITOR,
|
250
|
+
() => this.renderContentEditor(this.currentInput),
|
251
|
+
],
|
252
|
+
[INPUT_TYPE_NAMES.OBJECT_MAPPER, () => this.renderObjectMapper()],
|
253
|
+
], () => this.renderNileText(this.currentInput))}
|
230
254
|
`;
|
231
255
|
}
|
232
256
|
render() {
|
233
|
-
const
|
234
|
-
return html `<div
|
235
|
-
|
257
|
+
const align = this.nileSwitchConfig.align;
|
258
|
+
return html `<div
|
259
|
+
class=${classMap({
|
260
|
+
'switcher-block': align === POSITIONS.BLOCK,
|
261
|
+
'switcher-inline': align === POSITIONS.INLINE,
|
262
|
+
'switcher-input-container': true,
|
263
|
+
})}
|
264
|
+
>
|
265
|
+
${this.renderIcon()} ${this.singleFieldSwitcher()}
|
236
266
|
</div>`;
|
237
267
|
}
|
238
268
|
};
|
@@ -244,6 +274,9 @@ NileSwitcher.styles = styles;
|
|
244
274
|
__decorate([
|
245
275
|
property({ type: Object })
|
246
276
|
], NileSwitcher.prototype, "nileSwitchConfig", void 0);
|
277
|
+
__decorate([
|
278
|
+
property()
|
279
|
+
], NileSwitcher.prototype, "currentInput", void 0);
|
247
280
|
NileSwitcher = __decorate([
|
248
281
|
customElement('nile-switcher')
|
249
282
|
], NileSwitcher);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-switcher.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.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 } from 'lit/decorators.js';\nimport { styles } from './nile-switcher.css';\nimport NileElement from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * @summary Allows you to switch between nile elements\n\n * @dependency nile-icon\n * @dependency nile-input\n * @dependency nile-checkbox\n * @dependency nile-dropdown\n * @dependency nile-textarea\n *\n \n * @event nile-change - Emitted when the control's value changes.\n * @event nile-switch - Emitted when the nile component is being switched.\n \n */\n\nexport interface switchconfig {\n [key: string]: any;\n toggleSwitch: boolean;\n disable?: boolean;\n confirmation?: boolean;\n defaultInput: switchInputType;\n switchInput: switchInputType;\n}\n\nexport interface switchInputType {\n inputType:\n | INPUT_TYPE_NAMES.DROPDOWN\n | INPUT_TYPE_NAMES.TEXT\n | INPUT_TYPE_NAMES.CHECKBOX\n | INPUT_TYPE_NAMES.TEXTAREA\n | INPUT_TYPE_NAMES.RADIO\n | INPUT_TYPE_NAMES.CONTENTEDITOR;\n value?: String | boolean;\n label?: String;\n readonly?: boolean;\n type?: string;\n placeholder?: string;\n disabled?: boolean;\n required?: boolean;\n error?: boolean;\n errorMessage?: string;\n options?: Array<any>;\n helperText?: string;\n multiple?: boolean;\n noborder?: boolean;\n}\n\nexport enum INPUT_TYPE {\n DEFAULT = 'defaultInput',\n SWITCH = 'switchInput',\n}\n\nexport enum INPUT_TYPE_NAMES {\n DROPDOWN = 'dropdown',\n TEXT = 'text',\n CHECKBOX = 'checkbox',\n TEXTAREA = 'text-area',\n RADIO = 'radio',\n CONTENTEDITOR = 'content-editor',\n}\n\n@customElement('nile-switcher')\nexport class NileSwitcher extends NileElement {\n /**\n * The styles for nile switcher\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n static styles: CSSResultGroup = styles;\n @property({ type: Object }) nileSwitchConfig: switchconfig;\n\n connectedCallback() {\n super.connectedCallback();\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n renderNileText(Input: switchInputType, inputType: string) {\n const {\n value,\n label,\n placeholder,\n disabled,\n required,\n error,\n errorMessage,\n inputType: inputTypeName,\n } = Input;\n return html`<nile-input\n .value=${value}\n .label=${label}\n .disabled=${disabled}\n .required=${required}\n .errorMessage=${errorMessage}\n .placeholder=${placeholder}\n .error=${error}\n @nile-input=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n ></nile-input>`;\n }\n\n renderDropdown(Input: switchInputType, inputType: string) {\n const {\n options,\n multiple,\n placeholder,\n disabled,\n value,\n error,\n errorMessage,\n inputType: inputTypeName,\n } = Input;\n\n return html`<nile-select\n .placeholder=${placeholder}\n .disabled=\"${disabled}\"\n .multiple=\"${multiple}\"\n .value=\"${value}\"\n .error=\"${error}\"\n .errorMessage=\"${errorMessage}\"\n @nile-change=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n >\n ${options?.map((option: any) => {\n return html`<nile-option .value=\"${option}\">${option} </nile-option>`;\n })}\n </nile-select>`;\n }\n\n renderNileTextArea(Input: switchInputType, inputType: string) {\n const {\n value,\n disabled,\n readonly,\n errorMessage,\n error,\n inputType: inputTypeName,\n } = Input;\n\n return html`<nile-textarea\n .value=${value}\n .disabled=${disabled}\n ?readonly=${readonly}\n .error=${error}\n .errorMessage=${errorMessage}\n @nile-input=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n ></nile-textarea>`;\n }\n\n renderNileCheckBox(Input: switchInputType, inputType: string) {\n const { value, label, disabled, inputType: inputTypeName } = Input;\n\n return html`<nile-checkbox\n .checked=${value}\n .label=${label}\n .disabled=${disabled}\n @valueChange=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n ></nile-checkbox\n >; `;\n }\n\n renderNileRadio(Input: switchInputType, inputType: string) {\n const {\n options,\n value,\n disabled,\n inputType: inputTypeName,\n errorMessage,\n } = Input;\n\n const haserrorMessage = !!errorMessage;\n\n return html`<nile-radio-group\n .value=${value}\n .disabled=${disabled}\n @change=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n >\n ${options &&\n options.map((option: any) => {\n return html`<nile-radio .value=\"${option}\">${option} </nile-radio>`;\n })}\n ${haserrorMessage ? this.renderErrorMessage(errorMessage) : ''}\n </nile-radio-group> `;\n }\n\n renderErrorMessage(errorMessage: string) {\n return html`\n <nile-form-error-message>${errorMessage}</nile-form-error-message>\n `;\n }\n\n renderContentEditor(Input: switchInputType, inputType: string) {\n let {\n options,\n inputType: inputTypeName,\n errorMessage,\n type,\n readonly,\n noborder,\n value,\n } = Input;\n return html`<nile-content-editor\n .value=${value}\n .options=${options}\n .type=${type}\n .readonly=${readonly}\n .noborder=${noborder}\n .errorMessage=${errorMessage}\n @nile-change=${(e: CustomEvent) => {\n this.handleChange(e, inputType, inputTypeName);\n }}\n >\n </nile-content-editor>`;\n }\n\n handleChange(event: CustomEvent, inputType: string, inputTypeName: string) {\n if (inputTypeName === INPUT_TYPE_NAMES.CHECKBOX) {\n this.nileSwitchConfig[inputType as keyof switchconfig].value =\n event.detail.checked;\n } else {\n this.nileSwitchConfig[inputType as keyof switchconfig].value =\n event.detail.value;\n }\n event.stopPropagation();\n this.emit('nile-change', { config: this.nileSwitchConfig });\n }\n\n renderIcon(defaultInput: switchInputType, switchInput: switchInputType) {\n const defaultHelperText = defaultInput.helperText;\n const switchHelperText = switchInput.helperText;\n\n const icon = !this.nileSwitchConfig.toggleSwitch\n ? 'header-functions'\n : 'stringinput';\n\n const helperText = !this.nileSwitchConfig.toggleSwitch\n ? !!switchHelperText\n ? switchHelperText\n : `switch to ${switchInput.inputType}`\n : !!defaultHelperText\n ? defaultHelperText\n : `switch to ${defaultInput.inputType}`;\n\n return html` <nile-tooltip\n class=${classMap({\n 'tooltip-container': true,\n })}\n content=${helperText}\n placement=\"bottom\"\n >\n <nile-icon\n size=\"14\"\n class=${classMap({\n 'pointer-cursor': true,\n })}\n .name=${icon}\n color=\"#005EA6\"\n @click=${this.toggleField}\n ></nile-icon>\n </nile-tooltip>`;\n }\n\n toggleField() {\n if (!this.nileSwitchConfig.confirmation) {\n this.nileSwitchConfig = {\n ...this.nileSwitchConfig,\n toggleSwitch: !this.nileSwitchConfig.toggleSwitch,\n };\n }\n this.emit('nile-switch', { config: this.nileSwitchConfig });\n }\n\n singleFieldSwitcher(\n defaultInput: switchInputType,\n switchInput: switchInputType,\n toggleField: boolean,\n disable: boolean\n ) {\n const defaultInputType = defaultInput.inputType;\n const switchInputType = switchInput.inputType;\n return html`\n ${!toggleField\n ? choose(\n defaultInputType,\n [\n [\n INPUT_TYPE_NAMES.TEXT,\n () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.CHECKBOX,\n () => this.renderNileCheckBox(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.TEXTAREA,\n () => this.renderNileTextArea(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.RADIO,\n () => this.renderNileRadio(defaultInput, INPUT_TYPE.DEFAULT),\n ],\n [\n INPUT_TYPE_NAMES.DROPDOWN,\n () =>\n this.renderDropdown(\n this.nileSwitchConfig.defaultInput,\n INPUT_TYPE.DEFAULT\n ),\n ],\n [\n INPUT_TYPE_NAMES.CONTENTEDITOR,\n () =>\n this.renderContentEditor(\n this.nileSwitchConfig.defaultInput,\n INPUT_TYPE.DEFAULT\n ),\n ],\n ],\n () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT)\n )\n : choose(\n switchInputType,\n [\n [\n INPUT_TYPE_NAMES.TEXTAREA,\n () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH),\n ],\n [\n INPUT_TYPE_NAMES.TEXT,\n () => this.renderNileText(switchInput, INPUT_TYPE.SWITCH),\n ],\n [\n INPUT_TYPE_NAMES.CONTENTEDITOR,\n () => this.renderContentEditor(switchInput, INPUT_TYPE.SWITCH),\n ],\n ],\n\n () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH)\n )}\n ${!disable ? this.renderIcon(defaultInput, switchInput) : ''}\n `;\n }\n public render(): TemplateResult {\n const {\n toggleSwitch: toggleField,\n defaultInput,\n switchInput,\n disable,\n } = this.nileSwitchConfig;\n\n return html`<div class=\"input-container\">\n ${this.singleFieldSwitcher(\n defaultInput,\n switchInput,\n toggleField,\n !!disable\n )}\n </div>`;\n }\n}\n\nexport default NileSwitcher;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-switcher': NileSwitcher;\n }\n}\n"]}
|
1
|
+
{"version":3,"file":"nile-switcher.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.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 } from 'lit/decorators.js';\nimport { styles } from './nile-switcher.css';\nimport NileElement from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\n/**\n * @summary Allows you to switch between nile elements\n *\n * @dependency nile-icon\n * @dependency nile-input\n * @dependency nile-checkbox\n * @dependency nile-dropdown\n * @dependency nile-textarea\n *\n * @event nile-change - Emitted when the control's value changes.\n * @event nile-switch - Emitted when the nile component is being switched.\n */\n\nexport interface switchconfig {\n [key: string]: any;\n toggleSwitch: boolean;\n disable?: boolean;\n confirmation?: boolean;\n current: number;\n align: 'block' | 'inline';\n inputs: switchInputType[];\n}\n\nexport interface switchInputType {\n inputType:\n | INPUT_TYPE_NAMES.DROPDOWN\n | INPUT_TYPE_NAMES.TEXT\n | INPUT_TYPE_NAMES.CHECKBOX\n | INPUT_TYPE_NAMES.TEXTAREA\n | INPUT_TYPE_NAMES.RADIO\n | INPUT_TYPE_NAMES.CONTENTEDITOR\n | INPUT_TYPE_NAMES.OBJECT_MAPPER;\n value?: String | boolean;\n label?: String;\n readonly?: boolean;\n order: number;\n type?: string;\n icon: string;\n mode?: string;\n placeholder?: string;\n disabled?: boolean;\n required?: boolean;\n error?: boolean;\n errorMessage?: string;\n options?: Array<any>;\n helperText?: string;\n multiple?: boolean;\n noborder?: boolean;\n}\n\nexport enum POSITIONS {\n INLINE = 'inline',\n BLOCK = 'block',\n}\n\nexport enum INPUT_TYPE {\n DEFAULT = 'defaultInput',\n SWITCH = 'switchInput',\n}\n\nexport enum INPUT_TYPE_NAMES {\n DROPDOWN = 'dropdown',\n TEXT = 'text',\n CHECKBOX = 'checkbox',\n TEXTAREA = 'text-area',\n RADIO = 'radio',\n CONTENTEDITOR = 'content-editor',\n OBJECT_MAPPER = 'object-mapper',\n}\n\nexport enum MODE {\n CREATE = 'create',\n EDIT = 'edit',\n}\n\n@customElement('nile-switcher')\nexport class NileSwitcher extends NileElement {\n /**\n * The styles for nile switcher\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n static styles: CSSResultGroup = styles;\n\n @property({ type: Object }) nileSwitchConfig: switchconfig;\n @property() currentInput: switchInputType;\n\n connectedCallback() {\n this.currentInput = this.nileSwitchConfig.inputs[0];\n super.connectedCallback();\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n renderNileText(Input: switchInputType) {\n const {\n value,\n label,\n placeholder,\n disabled,\n required,\n error,\n errorMessage,\n inputType,\n noborder,\n } = Input;\n return html`<nile-input\n class=${classMap({\n 'switcher-input': true,\n 'switcher-input--noborder': !!noborder,\n })}\n .value=${value}\n .label=${label}\n .disabled=${disabled}\n .required=${required}\n .errorMessage=${errorMessage}\n .placeholder=${placeholder}\n .error=${error}\n @nile-input=${(e: CustomEvent) => {\n this.handleChange(e, inputType);\n }}\n ></nile-input>`;\n }\n\n renderDropdown(Input: switchInputType) {\n const {\n options,\n multiple,\n placeholder,\n disabled,\n value,\n error,\n errorMessage,\n inputType,\n } = Input;\n\n return html`<nile-select\n class=\"switcher-dropdown\"\n .placeholder=${placeholder}\n .disabled=\"${disabled}\"\n .multiple=\"${multiple}\"\n .value=\"${value}\"\n .error=\"${error}\"\n .errorMessage=\"${errorMessage}\"\n @nile-change=${(e: CustomEvent) => {\n this.handleChange(e, inputType);\n }}\n >\n ${options?.map((option: any) => {\n return html`<nile-option .value=\"${option}\">${option} </nile-option>`;\n })}\n </nile-select>`;\n }\n\n renderNileTextArea(Input: switchInputType) {\n const { value, disabled, readonly, errorMessage, error, inputType } = Input;\n\n return html`<nile-textarea\n class=\"switcher-textarea\"\n .value=${value}\n .disabled=${disabled}\n ?readonly=${readonly}\n .error=${error}\n .errorMessage=${errorMessage}\n @nile-input=${(e: CustomEvent) => {\n this.handleChange(e, inputType);\n }}\n ></nile-textarea>`;\n }\n\n renderNileCheckBox(Input: switchInputType) {\n const { value, label, disabled, inputType } = Input;\n\n return html`<nile-checkbox\n class=\"switcher-checkbox\"\n .checked=${value}\n .label=${label}\n .disabled=${disabled}\n @valueChange=${(e: CustomEvent) => {\n this.handleChange(e, inputType);\n }}\n ></nile-checkbox\n >; `;\n }\n\n renderNileRadio(Input: switchInputType) {\n const { options, value, disabled, errorMessage, inputType } = Input;\n\n const haserrorMessage = !!errorMessage;\n\n return html`<nile-radio-group\n class=\"switcher-radio-group\"\n .value=${value}\n .disabled=${disabled}\n @change=${(e: CustomEvent) => {\n this.handleChange(e, inputType);\n }}\n >\n ${options &&\n options.map((option: any) => {\n return html`<nile-radio .value=\"${option}\">${option} </nile-radio>`;\n })}\n ${haserrorMessage ? this.renderErrorMessage(errorMessage) : ''}\n </nile-radio-group> `;\n }\n\n renderErrorMessage(errorMessage: string) {\n return html`\n <nile-form-error-message>${errorMessage}</nile-form-error-message>\n `;\n }\n\n renderContentEditor(Input: switchInputType) {\n let { options, inputType, errorMessage, type, readonly, noborder, value } =\n Input;\n return html`<nile-content-editor\n class=\"switcher-content-editor\"\n .value=${value}\n .options=${options}\n .type=${type}\n .readonly=${readonly}\n .noborder=${noborder}\n .errorMessage=${errorMessage}\n @nile-change=${(e: CustomEvent) => {\n this.handleChange(e, inputType);\n }}\n >\n </nile-content-editor>`;\n }\n\n renderObjectMapper() {\n const noborder = this.currentInput.noborder;\n const mode = this.currentInput.mode;\n const value =\n this.currentInput.mode === MODE.CREATE\n ? 'Click to Create - Not Mapped'\n : '';\n\n return html`<nile-input\n class=${classMap({\n 'switcher-object-mapper': true,\n 'switcher-object-mapper--noborder': !!noborder,\n })}\n .value=${value}\n readonly=\"true\"\n @click=\"${(e: CustomEvent) =>\n this.handleChange(e, INPUT_TYPE_NAMES.OBJECT_MAPPER)}\"\n >\n <nile-icon\n class=\"pointer-cursor switcher-object-mapper-icon\"\n slot=\"suffix\"\n name=\"collapse\"\n color=\"#005EA6\"\n size=\"16\"\n >\n </nile-icon>\n </nile-input>`;\n }\n\n handleChange(event: CustomEvent, inputType: string) {\n switch (inputType) {\n case INPUT_TYPE_NAMES.OBJECT_MAPPER:\n this.currentInput.value = 'clicked';\n break;\n case INPUT_TYPE_NAMES.CHECKBOX:\n this.currentInput.value = event.detail.checked;\n break;\n default:\n this.currentInput.value = event.detail.value;\n }\n event.stopPropagation();\n this.emit('nile-change', { input: this.currentInput });\n }\n\n renderIcon() {\n const inputs = this.nileSwitchConfig.inputs;\n const toolTipPosition =\n this.nileSwitchConfig.align === POSITIONS.BLOCK ? 'top' : 'bottom';\n\n return html`\n <div class=\"switcher-icons-container\">\n ${repeat(\n inputs,\n input => html` <nile-tooltip\n class=${classMap({\n 'switcher-tooltip-container': true,\n })}\n content=${input.helperText}\n placement=${toolTipPosition}\n >\n <div class=${classMap({\n 'switcher-icon-container': true,\n current: input.order === this.currentInput.order,\n })}>\n <nile-icon\n size=\"16\"\n class=${classMap({\n 'pointer-cursor': true,\n })}\n .name=${input.icon}\n color=\"#000000\"\n @click=${() => this.toggleField(input)}\n ></nile-icon>\n <div>\n \n </nile-tooltip>`\n )}\n </div>\n `;\n }\n\n toggleField(currentInput: switchInputType) {\n this.currentInput = currentInput;\n this.emit('nile-switch', { input: this.currentInput });\n }\n\n singleFieldSwitcher() {\n return html`\n ${choose(\n this.currentInput.inputType,\n [\n [INPUT_TYPE_NAMES.TEXT, () => this.renderNileText(this.currentInput)],\n [\n INPUT_TYPE_NAMES.CHECKBOX,\n () => this.renderNileCheckBox(this.currentInput),\n ],\n [\n INPUT_TYPE_NAMES.TEXTAREA,\n () => this.renderNileTextArea(this.currentInput),\n ],\n [\n INPUT_TYPE_NAMES.RADIO,\n () => this.renderNileRadio(this.currentInput),\n ],\n [\n INPUT_TYPE_NAMES.DROPDOWN,\n () => this.renderDropdown(this.currentInput),\n ],\n [\n INPUT_TYPE_NAMES.CONTENTEDITOR,\n () => this.renderContentEditor(this.currentInput),\n ],\n [INPUT_TYPE_NAMES.OBJECT_MAPPER, () => this.renderObjectMapper()],\n ],\n () => this.renderNileText(this.currentInput)\n )}\n `;\n }\n\n public render(): TemplateResult {\n const align = this.nileSwitchConfig.align;\n return html`<div\n class=${classMap({\n 'switcher-block': align === POSITIONS.BLOCK,\n 'switcher-inline': align === POSITIONS.INLINE,\n 'switcher-input-container': true,\n })}\n >\n ${this.renderIcon()} ${this.singleFieldSwitcher()}\n </div>`;\n }\n}\n\nexport default NileSwitcher;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-switcher': NileSwitcher;\n }\n}\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-tab.css.js","sourceRoot":"","sources":["../../../src/nile-tab/nile-tab.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
1
|
+
{"version":3,"file":"nile-tab.css.js","sourceRoot":"","sources":["../../../src/nile-tab/nile-tab.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoExB,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 * Tab CSS\n */\nexport const styles = css`\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: inline-block;\n }\n\n .tab {\n display: inline-flex;\n align-items: center;\n border-radius: 8px;\n color: var(--nile-colors-dark-500);\n padding: 4px 4px 12px 4px;\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n transition: 0.2s box-shadow, 0.2s color;\n font-family: Colfax-regular;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px;\n letter-spacing: 0.2px;\n gap: 4px;\n }\n\n .tab:hover:not(.tab--disabled) {\n color: var(--nile-colors-dark-900);\n }\n\n .tab:focus {\n outline: none;\n }\n\n .tab:focus-visible:not(.tab--disabled) {\n color: var(--nile-colors-primary-600);\n }\n\n .tab.tab--active:not(.tab--disabled) {\n color: var(--nile-colors-primary-600);\n }\n\n .tab.tab--closable {\n padding-inline-end: 4px;\n }\n\n .tab.tab--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .tab__close-button {\n font-size: 14px;\n margin-inline-start: 4px;\n }\n\n .tab__close-button::part(base) {\n padding: 3px;\n }\n\n @media (forced-colors: active) {\n .tab.tab--active:not(.tab--disabled) {\n outline: solid 1px transparent;\n outline-offset: -3px;\n }\n }\n`;\n\nexport default [styles];\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-tab.js","sourceRoot":"","sources":["../../../src/nile-tab/nile-tab.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAAE,QAAQ,EAAiC,MAAM,aAAa,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAEtC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW;IAAjC;;QAGY,WAAM,GAAG,EAAE,EAAE,CAAC;QACd,gBAAW,GAAG,YAAY,IAAI,CAAC,MAAM,EAAE,CAAC;QAIzD,8GAA8G;QACjF,UAAK,GAAG,EAAE,CAAC;QAExC,wCAAwC;QACI,WAAM,GAAG,KAAK,CAAC;QAE3D,uDAAuD;QAC1B,aAAQ,GAAG,KAAK,CAAC;QAE9C,+CAA+C;QACH,aAAQ,GAAG,KAAK,CAAC;
|
1
|
+
{"version":3,"file":"nile-tab.js","sourceRoot":"","sources":["../../../src/nile-tab/nile-tab.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 {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-tab.css';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n\nlet id = 0;\n\n/**\n * Nile icon component.\n *\n * @tag nile-tab\n *\n *\n * @dependency nile-icon-button\n *\n * @slot - The tab's label.\n *\n * @event nile-close - Emitted when the tab is closable and the close button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart close-button - The close button, an `<nile-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n */\n@customElement('nile-tab')\nexport class NileTab extends NileElement {\n static styles: CSSResultGroup = styles;\n\n private readonly attrId = ++id;\n private readonly componentId = `nile-tab-${this.attrId}`;\n\n @query('.tab') tab: HTMLElement;\n\n /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n @property({ reflect: true }) panel = '';\n\n /** Draws the tab in an active state. */\n @property({ type: Boolean, reflect: true }) active = false;\n\n /** Makes the tab closable and shows a close button. */\n @property({ type: Boolean }) closable = false;\n\n /** Disables the tab and prevents selection. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'tab');\n }\n\n private handleCloseClick(event: Event) {\n event.stopPropagation();\n this.emit('nile-close');\n }\n\n @watch('active')\n handleActiveChange() {\n this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n }\n\n /** Sets focus to the tab. */\n focus(options?: FocusOptions) {\n this.tab.focus(options);\n }\n\n /** Removes focus from the tab. */\n blur() {\n this.tab.blur();\n }\n\n render() {\n // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n this.id = this.id.length > 0 ? this.id : this.componentId;\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n tab: true,\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled\n })}\n tabindex=${this.disabled ? '-1' : '0'}\n >\n <slot name=\"prefix\"></slot>\n <slot></slot>\n ${this.closable\n ? html`\n <nile-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n name=\"x-lg\"\n library=\"system\"\n label=\"close\"\n class=\"tab__close-button\"\n @click=${this.handleCloseClick}\n tabindex=\"-1\"\n ></nile-icon-button>\n `\n : ''}\n </div>\n `;\n }\n}\n\nexport default NileTab;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tab': NileTab;\n }\n}\n"]}
|
@@ -78,6 +78,7 @@ export const styles = css `
|
|
78
78
|
border-radius: var(--nile-radius-base-standard);
|
79
79
|
transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;
|
80
80
|
cursor: text;
|
81
|
+
min-height:12px;
|
81
82
|
}
|
82
83
|
|
83
84
|
/* Standard textareas */
|
@@ -179,16 +180,18 @@ export const styles = css `
|
|
179
180
|
/* Resize types */
|
180
181
|
.textarea--resize-none .textarea__control {
|
181
182
|
resize: none;
|
183
|
+
min-height:12px;
|
182
184
|
}
|
183
185
|
|
184
186
|
.textarea--resize-vertical .textarea__control {
|
185
187
|
resize: vertical;
|
188
|
+
min-height:12px;
|
186
189
|
}
|
187
190
|
|
188
191
|
.textarea--resize-auto .textarea__control {
|
189
|
-
height: auto;
|
190
192
|
resize: none;
|
191
193
|
overflow-y: hidden;
|
194
|
+
min-height:12px;
|
192
195
|
}
|
193
196
|
|
194
197
|
.textarea--standard.textarea--warning {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-textarea.css.js","sourceRoot":"","sources":["../../../src/nile-textarea/nile-textarea.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
1
|
+
{"version":3,"file":"nile-textarea.css.js","sourceRoot":"","sources":["../../../src/nile-textarea/nile-textarea.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqMxB,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 * TextArea CSS\n */\nexport const styles = css`\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 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: var(--nile-font-size-base);\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: var(--nile-colors-dark-500);\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: var(--nile-colors-red-700);\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 /* Host styles */\n :host {\n display: block;\n }\n\n /* Textarea styles */\n .textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n letter-spacing: 0.5px;\n vertical-align: middle;\n border-radius: var(--nile-radius-base-standard);\n transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;\n cursor: text;\n min-height:12px;\n }\n\n /* Standard textareas */\n .textarea--standard {\n background-color: var(\n --nile-colors-white-base\n );\n border: solid 1px var(--nile-colors-neutral-500);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) {\n background-color: var(\n --nile-colors-white-base\n );\n border-color: var(\n --nile-colors-dark-900\n );\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n border-color: var(--nile-colors-dark-900);\n border-radius: var(--nile-radius-base-standard);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) {\n background-color: var(\n --nile-colors-white-base\n );\n border-color: var(\n --nile-colors-primary-600\n );\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled)\n .textarea__control {\n color: #000000;\n }\n\n .textarea--standard.textarea--disabled {\n border-color: var(\n --nile-colors-neutral-500\n );\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .textarea--standard.textarea--disabled .textarea__control {\n color: var(\n --nile-colors-neutral-500\n );\n }\n\n .textarea--standard.textarea--disabled .textarea__control::placeholder {\n color: var(\n --nile-colors-neutral-500\n );\n }\n\n /* Textarea control styles */\n .textarea__control {\n flex: 1 1 auto;\n font-family: Colfax-regular;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px; /* 100% */\n letter-spacing: 0.2px;\n color: var(--nile-colors-dark-900);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .textarea__control::-webkit-search-decoration,\n .textarea__control::-webkit-search-cancel-button,\n .textarea__control::-webkit-search-results-button,\n .textarea__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .textarea__control::placeholder {\n color: var(\n --nile-colors-dark-500\n );\n user-select: none;\n }\n\n .textarea__control:focus {\n outline: none;\n }\n\n .textarea--medium .textarea__control {\n padding: 0.5em 10px;\n }\n\n /* Resize types */\n .textarea--resize-none .textarea__control {\n resize: none;\n min-height:12px;\n }\n\n .textarea--resize-vertical .textarea__control {\n resize: vertical;\n min-height:12px;\n }\n\n .textarea--resize-auto .textarea__control {\n resize: none;\n overflow-y: hidden;\n min-height:12px;\n }\n\n .textarea--standard.textarea--warning {\n border-color: var(--nile-colors-yellow-500);\n }\n\n .textarea--standard.textarea--error {\n border-color: var(--nile-colors-red-500);\n }\n\n .textarea--standard.textarea--success {\n border-color: var(--nile-colors-green-500);\n }\n`;\n\nexport default [styles];\n"]}
|
@@ -98,6 +98,9 @@ let NileTextarea = class NileTextarea extends NileElement {
|
|
98
98
|
let parentHeight = this.parentElement?.getBoundingClientRect().height;
|
99
99
|
if (parentHeight) {
|
100
100
|
parentHeight = parentHeight - 65;
|
101
|
+
if (parentHeight < 12) {
|
102
|
+
parentHeight = 12;
|
103
|
+
}
|
101
104
|
this.shadowRoot?.querySelector('textarea')?.style.setProperty('height', `${parentHeight}px`);
|
102
105
|
}
|
103
106
|
});
|
@@ -254,6 +257,8 @@ let NileTextarea = class NileTextarea extends NileElement {
|
|
254
257
|
@input=${this.handleInput}
|
255
258
|
@focus=${this.handleFocus}
|
256
259
|
@blur=${this.handleBlur}
|
260
|
+
|
261
|
+
|
257
262
|
></textarea>
|
258
263
|
</div>
|
259
264
|
</div>
|