@aquera/nile-elements 0.0.4-9 → 0.0.5-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/index.d.ts +0 -2
  2. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/index.js +0 -2
  3. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/index.js.map +1 -1
  4. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.css.js +42 -45
  5. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.css.js.map +1 -1
  6. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.d.ts +13 -5
  7. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.js +54 -84
  8. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-error-message/nile-error-message.js.map +1 -1
  9. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.js +2 -2
  10. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-select/nile-select.js.map +1 -1
  11. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
  12. package/dist/index.cjs.js +1 -1
  13. package/dist/index.esm.js +1 -1
  14. package/dist/index.iife.js +136 -433
  15. package/dist/nile-error-message/nile-error-message.cjs.js +1 -1
  16. package/dist/nile-error-message/nile-error-message.cjs.js.map +1 -1
  17. package/dist/nile-error-message/nile-error-message.css.cjs.js +1 -1
  18. package/dist/nile-error-message/nile-error-message.css.cjs.js.map +1 -1
  19. package/dist/nile-error-message/nile-error-message.css.esm.js +42 -45
  20. package/dist/nile-error-message/nile-error-message.esm.js +26 -28
  21. package/dist/nile-select/nile-select.cjs.js +1 -1
  22. package/dist/nile-select/nile-select.cjs.js.map +1 -1
  23. package/dist/nile-select/nile-select.esm.js +1 -1
  24. package/dist/src/index.d.ts +0 -2
  25. package/dist/src/index.js +0 -2
  26. package/dist/src/index.js.map +1 -1
  27. package/dist/src/nile-error-message/nile-error-message.css.js +42 -45
  28. package/dist/src/nile-error-message/nile-error-message.css.js.map +1 -1
  29. package/dist/src/nile-error-message/nile-error-message.d.ts +13 -5
  30. package/dist/src/nile-error-message/nile-error-message.js +54 -84
  31. package/dist/src/nile-error-message/nile-error-message.js.map +1 -1
  32. package/dist/src/nile-select/nile-select.js +2 -2
  33. package/dist/src/nile-select/nile-select.js.map +1 -1
  34. package/dist/tsconfig.tsbuildinfo +1 -1
  35. package/package.json +1 -1
  36. package/src/index.ts +0 -2
  37. package/src/nile-error-message/nile-error-message.css.ts +42 -45
  38. package/src/nile-error-message/nile-error-message.ts +52 -90
  39. package/src/nile-select/nile-select.ts +2 -2
@@ -30,5 +30,3 @@ export { NileFormErrorMessage } from './nile-form-error-message';
30
30
  export { NileFormHelpText } from './nile-form-help-text';
31
31
  export { NileCalendar } from './nile-calendar';
32
32
  export { NileLink } from './nile-link';
33
- export { NileRadioButton } from './nile-radio-button';
34
- export { NileRadioButtonGroup } from './nile-radio-button-group';
@@ -30,6 +30,4 @@ export { NileFormErrorMessage } from './nile-form-error-message';
30
30
  export { NileFormHelpText } from './nile-form-help-text';
31
31
  export { NileCalendar } from './nile-calendar';
32
32
  export { NileLink } from './nile-link';
33
- export { NileRadioButton } from './nile-radio-button';
34
- export { NileRadioButtonGroup } from './nile-radio-button-group';
35
33
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export { NileButton } from './nile-button';\nexport { NileHeading } from './nile-heading';\nexport { NileIcon } from './nile-icon';\nexport { NileInput } from './nile-input';\nexport { NileSidebar } from './nile-sidebar';\nexport { NileMenu } from './nile-menu';\nexport { NileBadge } from './nile-badge';\nexport { NileDrawer } from './nile-drawer';\nexport { NileCheckbox } from './nile-checkbox';\nexport { NileRadio } from './nile-radio';\nexport { NileRadioGroup } from './nile-radio-group';\nexport { NilePopup } from './nile-popup';\nexport { NileTooltip } from './nile-tooltip';\nexport { NileSlideToggle } from './nile-slide-toggle';\nexport { NileLoader } from './nile-loader';\nexport { NileProgressBar } from './nile-progress-bar';\nexport { NileSpinner } from './nile-spinner';\nexport { NileSelect } from './nile-select';\nexport { NileOption } from './nile-option';\nexport { NileTag } from './nile-tag';\nexport { NileIconButton } from './nile-icon-button';\nexport { NileMenuItem } from './nile-menu-item';\nexport { NileDropdown } from './nile-dropdown';\nexport { NileAutoComplete } from './nile-auto-complete';\nexport { NileChip } from './nile-chip';\nexport { NileTextarea } from './nile-textarea';\nexport { NileDatePicker } from './nile-date-picker';\nexport { NileErrorMessage } from './nile-error-message';\nexport { NileFormErrorMessage } from './nile-form-error-message';\nexport { NileFormHelpText } from './nile-form-help-text';\nexport { NileCalendar } from './nile-calendar';\nexport { NileLink} from './nile-link';\nexport { NileRadioButton } from './nile-radio-button';\nexport { NileRadioButtonGroup } from './nile-radio-button-group';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC","sourcesContent":["export { NileButton } from './nile-button';\nexport { NileHeading } from './nile-heading';\nexport { NileIcon } from './nile-icon';\nexport { NileInput } from './nile-input';\nexport { NileSidebar } from './nile-sidebar';\nexport { NileMenu } from './nile-menu';\nexport { NileBadge } from './nile-badge';\nexport { NileDrawer } from './nile-drawer';\nexport { NileCheckbox } from './nile-checkbox';\nexport { NileRadio } from './nile-radio';\nexport { NileRadioGroup } from './nile-radio-group';\nexport { NilePopup } from './nile-popup';\nexport { NileTooltip } from './nile-tooltip';\nexport { NileSlideToggle } from './nile-slide-toggle';\nexport { NileLoader } from './nile-loader';\nexport { NileProgressBar } from './nile-progress-bar';\nexport { NileSpinner } from './nile-spinner';\nexport { NileSelect } from './nile-select';\nexport { NileOption } from './nile-option';\nexport { NileTag } from './nile-tag';\nexport { NileIconButton } from './nile-icon-button';\nexport { NileMenuItem } from './nile-menu-item';\nexport { NileDropdown } from './nile-dropdown';\nexport { NileAutoComplete } from './nile-auto-complete';\nexport { NileChip } from './nile-chip';\nexport { NileTextarea } from './nile-textarea';\nexport { NileDatePicker } from './nile-date-picker';\nexport { NileErrorMessage } from './nile-error-message';\nexport { NileFormErrorMessage } from './nile-form-error-message';\nexport { NileFormHelpText } from './nile-form-help-text';\nexport { NileCalendar } from './nile-calendar';\nexport { NileLink} from './nile-link';\n"]}
@@ -10,76 +10,73 @@ import { css } from 'lit-element';
10
10
  */
11
11
  export const styles = css `
12
12
  :host {
13
- width:100%;
14
13
  }
15
14
 
16
15
  .nile-error-message {
17
16
  width: 100%;
17
+ word-break: break-all;
18
18
  font-size: var(--nile-font-size-small);
19
+ letter-spacing: 0.2px;
19
20
  font-weight: var(--nile-font-weight-regular);
20
21
  line-height: var(--nile-font-size-small);
21
- border: 1px solid var(--nile-colors-red-500);
22
- border-left: 6px solid var(--nile-colors-red-500);
23
- border-radius: var(--nile-radius-base-standard);
24
- background: var(--nile-colors-red-100);
25
22
  }
26
23
 
27
- .nile-error-message__info {
24
+ .nile-error-message__error {
28
25
  color: var(--nile-colors-red-500);
29
- padding: 8px;
30
- display: flex;
31
- align-items: center;
26
+ word-break: break-word;
27
+ }
28
+
29
+ .nile-error-message__response {
30
+ color: var(--nile-colors-dark-500);
32
31
  }
33
32
 
34
- .nile-error-message__icon,
35
- .nile-error-message__arrow {
33
+ .nile-error-message__icon {
36
34
  vertical-align: middle;
37
- margin-right: 6px;
38
- transition: transform 0.3s ease-in-out;
35
+ margin-right:2px;
39
36
  }
40
37
 
41
- .nile-error-message__expandable {
38
+ .nile-error-message__more-button {
39
+ color: var(--nile-colors-primary-600);
42
40
  cursor: pointer;
43
- overflow: hidden;
41
+ word-break: break-word;
44
42
  }
45
43
 
46
- .nile-error-message__content {
47
- display: flex;
48
- align-items: flex-start;
49
- padding: 8px 12px;
44
+ .nile-error-message__response-expanded {
45
+ height: auto;
46
+ border: 1px solid var(--nile-colors-red-500);
47
+ border-left: 6px solid var(--nile-colors-red-500);
48
+ border-radius: 4px;
49
+ margin-top: 12px;
50
+ padding: 12px;
51
+ background: var(--nile-colors-neutral-100);
50
52
  }
51
53
 
52
- .nile-error-message__expandable.bordered {
53
- border-top: 1px solid var(--nile-colors-neutral-500);
54
+ .nile-error-message__response-expanded {
55
+ max-height: 100px;
56
+ overflow-y: auto;
57
+ border: 1px solid var(--nile-colors-red-500);
58
+ border-left: 6px solid var(--nile-colors-red-500);
59
+ border-radius: 4px;
60
+ margin-top: 12px;
61
+ padding: 12px;
62
+ background: var(--nile-colors-neutral-100);
63
+ transition: max-height 0.3s ease-in-out;
64
+ flex-shrink: 0;
54
65
  }
55
66
 
56
- .nile-error-message__summary {
57
- white-space: nowrap;
67
+ .nile-error-message__response-expanded.collapsed {
68
+ max-height: 0;
58
69
  overflow: hidden;
59
- text-overflow: ellipsis;
60
- transition: height 0.3s ease-in-out, white-space 1s ease-in-out;
61
- height: 14px;
62
- }
63
-
64
- .nile-error-message__expandable.expanded .nile-error-message__summary {
65
- white-space: normal;
66
- max-height: 6em;
67
- overflow-y: scroll;
68
- }
69
-
70
- .nile-error-message__expandable.expanded
71
- .nile-error-message__summary::-webkit-scrollbar {
72
- width: 8px;
73
- }
74
-
75
- .nile-error-message__expandable.expanded
76
- .nile-error-message__summary::-webkit-scrollbar-thumb {
77
- border-radius: 20px;
78
- background: rgba(148, 159, 184, 0.25);
70
+ transition: max-height 0.3s ease-in-out;
71
+ visibility: hidden;
72
+ padding: 0 12px;
79
73
  }
80
74
 
81
- .nile-error-message__expandable.expanded .nile-error-message__arrow {
82
- transform: rotate(90deg);
75
+ .nile-error-message__response-expanded.expanded {
76
+ max-height: 100px;
77
+ transition: max-height 0.3s ease-in-out;
78
+ visibility: visible;
79
+ padding: 12px;
83
80
  }
84
81
  `;
85
82
  export default [styles];
@@ -1 +1 @@
1
- {"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB,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 * ErrorMessage CSS\n */\nexport const styles = css`\n :host {\n width:100%;\n }\n\n .nile-error-message {\n width: 100%;\n font-size: var(--nile-font-size-small);\n font-weight: var(--nile-font-weight-regular);\n line-height: var(--nile-font-size-small);\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: var(--nile-radius-base-standard);\n background: var(--nile-colors-red-100);\n }\n\n .nile-error-message__info {\n color: var(--nile-colors-red-500);\n padding: 8px;\n display: flex;\n align-items: center;\n }\n\n .nile-error-message__icon,\n .nile-error-message__arrow {\n vertical-align: middle;\n margin-right: 6px;\n transition: transform 0.3s ease-in-out;\n }\n\n .nile-error-message__expandable {\n cursor: pointer;\n overflow: hidden;\n }\n\n .nile-error-message__content {\n display: flex;\n align-items: flex-start;\n padding: 8px 12px;\n }\n\n .nile-error-message__expandable.bordered {\n border-top: 1px solid var(--nile-colors-neutral-500);\n }\n\n .nile-error-message__summary {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: height 0.3s ease-in-out, white-space 1s ease-in-out;\n height: 14px;\n }\n\n .nile-error-message__expandable.expanded .nile-error-message__summary {\n white-space: normal;\n max-height: 6em;\n overflow-y: scroll;\n }\n\n .nile-error-message__expandable.expanded\n .nile-error-message__summary::-webkit-scrollbar {\n width: 8px;\n }\n\n .nile-error-message__expandable.expanded\n .nile-error-message__summary::-webkit-scrollbar-thumb {\n border-radius: 20px;\n background: rgba(148, 159, 184, 0.25);\n }\n\n .nile-error-message__expandable.expanded .nile-error-message__arrow {\n transform: rotate(90deg);\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-error-message.css.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsExB,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 * ErrorMessage CSS\n */\nexport const styles = css`\n :host {\n }\n\n .nile-error-message {\n width: 100%;\n word-break: break-all;\n font-size: var(--nile-font-size-small);\n letter-spacing: 0.2px;\n font-weight: var(--nile-font-weight-regular);\n line-height: var(--nile-font-size-small);\n }\n\n .nile-error-message__error {\n color: var(--nile-colors-red-500);\n word-break: break-word;\n }\n\n .nile-error-message__response {\n color: var(--nile-colors-dark-500);\n }\n\n .nile-error-message__icon {\n vertical-align: middle;\n margin-right:2px;\n }\n\n .nile-error-message__more-button {\n color: var(--nile-colors-primary-600);\n cursor: pointer;\n word-break: break-word;\n }\n\n .nile-error-message__response-expanded {\n height: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 12px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n }\n\n .nile-error-message__response-expanded {\n max-height: 100px;\n overflow-y: auto;\n border: 1px solid var(--nile-colors-red-500);\n border-left: 6px solid var(--nile-colors-red-500);\n border-radius: 4px;\n margin-top: 12px;\n padding: 12px;\n background: var(--nile-colors-neutral-100);\n transition: max-height 0.3s ease-in-out;\n flex-shrink: 0;\n }\n\n .nile-error-message__response-expanded.collapsed {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-in-out;\n visibility: hidden;\n padding: 0 12px;\n }\n\n .nile-error-message__response-expanded.expanded {\n max-height: 100px;\n transition: max-height 0.3s ease-in-out;\n visibility: visible;\n padding: 12px;\n }\n`;\n\nexport default [styles];\n"]}
@@ -5,11 +5,19 @@ import { LitElement, CSSResultArray, TemplateResult } from 'lit-element';
5
5
  */
6
6
  export declare class NileErrorMessage extends LitElement {
7
7
  static get styles(): CSSResultArray;
8
- errorMessages: Array<string>;
9
- expandedIndex: number | null;
10
- expandText(index: number, target: any): void;
11
- collapseText(target: any): void;
12
- toggleExpand(index: number, event: any): void;
8
+ errorMessage: string;
9
+ errorResponse: string;
10
+ isExpanded: boolean;
11
+ private readonly MAX_LENGTH;
12
+ /**
13
+ * Get a truncated version of the errorResponse if it's too long.
14
+ * @returns {string}
15
+ */
16
+ getTruncatedResponse(): string;
17
+ /**
18
+ * Toggle the expanded state of the error response.
19
+ */
20
+ toggleExpanded(): void;
13
21
  render(): TemplateResult;
14
22
  }
15
23
  declare global {
@@ -2,12 +2,6 @@ import { __decorate } from "tslib";
2
2
  import { LitElement, html, property, } from 'lit-element';
3
3
  import { customElement } from 'lit/decorators.js';
4
4
  import { styles } from './nile-error-message.css';
5
- const convertToStringArray = (value) => {
6
- if (Array.isArray(value)) {
7
- return value.map(item => String(item));
8
- }
9
- return [];
10
- };
11
5
  /**
12
6
  * A custom error message component that displays error information to the user.
13
7
  * @customElement nile-error-message
@@ -15,99 +9,75 @@ const convertToStringArray = (value) => {
15
9
  let NileErrorMessage = class NileErrorMessage extends LitElement {
16
10
  constructor() {
17
11
  super(...arguments);
18
- this.errorMessages = [];
19
- this.expandedIndex = null;
12
+ // Represents the error message to be displayed to the user.
13
+ this.errorMessage = '';
14
+ this.isExpanded = false;
15
+ // The maximum length before truncation.
16
+ this.MAX_LENGTH = 100;
20
17
  }
21
18
  static get styles() {
22
19
  return [styles];
23
20
  }
24
- expandText(index, target) {
25
- const element = target.querySelector('.nile-error-message__summary');
26
- const originalHeight = element.clientHeight;
27
- element.style.whiteSpace = 'normal';
28
- element.style.height = 'auto';
29
- const expandedHeight = Math.min(element.clientHeight, 5.5 * 12);
30
- element.style.height = originalHeight + 'px';
31
- requestAnimationFrame(() => {
32
- element.style.height = expandedHeight + 'px';
33
- });
34
- }
35
- collapseText(target) {
36
- const element = target.querySelector('.nile-error-message__summary');
37
- const expandedHeight = element.clientHeight;
38
- element.style.height = expandedHeight + 'px';
39
- requestAnimationFrame(() => {
40
- element.style.height = '14px';
41
- element.style.whiteSpace = 'nowrap';
42
- });
43
- }
44
- toggleExpand(index, event) {
45
- if (this.shadowRoot) {
46
- if (this.expandedIndex !== null && this.expandedIndex !== index) {
47
- const prevExpandable = this.shadowRoot.querySelectorAll('.nile-error-message__expandable')[this.expandedIndex];
48
- if (prevExpandable) {
49
- this.collapseText(prevExpandable);
50
- }
51
- }
52
- }
53
- if (this.expandedIndex === index) {
54
- this.expandedIndex = null;
55
- this.collapseText(event.currentTarget);
56
- }
57
- else {
58
- this.expandedIndex = index;
59
- this.expandText(index, event.currentTarget);
21
+ /**
22
+ * Get a truncated version of the errorResponse if it's too long.
23
+ * @returns {string}
24
+ */
25
+ getTruncatedResponse() {
26
+ if (this.errorResponse.length > this.MAX_LENGTH) {
27
+ return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;
60
28
  }
29
+ return this.errorResponse;
30
+ }
31
+ /**
32
+ * Toggle the expanded state of the error response.
33
+ */
34
+ toggleExpanded() {
35
+ this.isExpanded = !this.isExpanded;
61
36
  }
62
37
  render() {
63
38
  return html `
64
- <div class="nile-error-message">
65
- <div class="nile-error-message__info">
66
- <nile-icon
67
- name="info2"
68
- size="14"
69
- class="nile-error-message__icon"
70
- part="icon"
71
- ></nile-icon>
72
- ${this.errorMessages.length}
73
- ${this.errorMessages.length > 1 ? 'attributes' : 'attribute'} are not
74
- valid
39
+ <div class="nile-error-message" part="base">
40
+ <nile-icon
41
+ name="info2"
42
+ size="14"
43
+ class="nile-error-message__icon"
44
+ part="icon"
45
+ color="#E5434D"
46
+ ></nile-icon>
47
+ <span class="nile-error-message__error">${this.errorMessage}</span>
48
+
49
+
50
+ ${this.errorResponse
51
+ ? html ` <span class="nile-error-message__response"
52
+ >${this.getTruncatedResponse()}</span
53
+ >
54
+ <span
55
+ class="nile-error-message__more-button"
56
+ @click=${this.toggleExpanded}
57
+ >${this.isExpanded ? 'View Less' : 'View More'}</span
58
+ >`
59
+ : ``}
60
+
61
+ <div
62
+ class="nile-error-message__response-expanded ${this.isExpanded
63
+ ? 'expanded'
64
+ : 'collapsed'}"
65
+ >
66
+ ${this.errorResponse}
75
67
  </div>
76
- ${this.errorMessages.map((errorMessage, index) => html `
77
- <div
78
- class="nile-error-message__expandable ${index !== 0
79
- ? 'bordered'
80
- : ''} ${this.expandedIndex === index ? 'expanded' : ''}"
81
- @click="${(event) => this.toggleExpand(index, event)}"
82
- >
83
- <div class="nile-error-message__content">
84
- <nile-icon
85
- name="arrowright"
86
- size="14"
87
- class="nile-error-message__arrow"
88
- ></nile-icon>
89
- <div class="nile-error-message__summary">${errorMessage}</div>
90
- </div>
91
- </div>
92
- `)}
93
68
  </div>
94
69
  `;
95
70
  }
96
71
  };
97
72
  __decorate([
98
- property({
99
- type: Array,
100
- attribute: 'error-messages',
101
- hasChanged: (newVal, oldVal) => JSON.stringify(newVal) !== JSON.stringify(oldVal),
102
- converter: {
103
- toAttribute: value => JSON.stringify(value),
104
- fromAttribute: value => convertToStringArray(JSON.parse(value || '[]')),
105
- },
106
- })
107
- ], NileErrorMessage.prototype, "errorMessages", void 0);
73
+ property({ type: String })
74
+ ], NileErrorMessage.prototype, "errorMessage", void 0);
75
+ __decorate([
76
+ property({ type: String })
77
+ ], NileErrorMessage.prototype, "errorResponse", void 0);
108
78
  __decorate([
109
- property({ type: Number })
110
- ], NileErrorMessage.prototype, "expandedIndex", void 0);
79
+ property({ type: Boolean })
80
+ ], NileErrorMessage.prototype, "isExpanded", void 0);
111
81
  NileErrorMessage = __decorate([
112
82
  customElement('nile-error-message')
113
83
  ], NileErrorMessage);
@@ -1 +1 @@
1
- {"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\nconst convertToStringArray = (value: any): Array<string> => {\n if (Array.isArray(value)) {\n return value.map(item => String(item));\n }\n return [];\n};\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({\n type: Array,\n attribute: 'error-messages',\n hasChanged: (newVal, oldVal) =>\n JSON.stringify(newVal) !== JSON.stringify(oldVal), // Optional: to detect deep changes\n converter: {\n toAttribute: value => JSON.stringify(value),\n fromAttribute: value => convertToStringArray(JSON.parse(value || '[]')),\n },\n })\n errorMessages: Array<string> = [];\n\n @property({ type: Number })\n expandedIndex: number | null = null;\n\n expandText(index: number, target: any) {\n const element = target.querySelector('.nile-error-message__summary');\n const originalHeight = element.clientHeight;\n element.style.whiteSpace = 'normal';\n element.style.height = 'auto';\n const expandedHeight = Math.min(element.clientHeight, 5.5 * 12);\n\n element.style.height = originalHeight + 'px';\n\n requestAnimationFrame(() => {\n element.style.height = expandedHeight + 'px';\n });\n }\n\n collapseText(target: any) {\n const element = target.querySelector('.nile-error-message__summary');\n const expandedHeight = element.clientHeight;\n element.style.height = expandedHeight + 'px';\n\n requestAnimationFrame(() => {\n element.style.height = '14px';\n element.style.whiteSpace = 'nowrap';\n });\n }\n\n toggleExpand(index: number, event: any) {\n if (this.shadowRoot) {\n if (this.expandedIndex !== null && this.expandedIndex !== index) {\n const prevExpandable = this.shadowRoot.querySelectorAll(\n '.nile-error-message__expandable'\n )[this.expandedIndex];\n if (prevExpandable) {\n this.collapseText(prevExpandable);\n }\n }\n }\n\n if (this.expandedIndex === index) {\n this.expandedIndex = null;\n this.collapseText(event.currentTarget);\n } else {\n this.expandedIndex = index;\n this.expandText(index, event.currentTarget);\n }\n }\n\n render(): TemplateResult {\n return html`\n <div class=\"nile-error-message\">\n <div class=\"nile-error-message__info\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-message__icon\"\n part=\"icon\"\n ></nile-icon>\n ${this.errorMessages.length}\n ${this.errorMessages.length > 1 ? 'attributes' : 'attribute'} are not\n valid\n </div>\n ${this.errorMessages.map(\n (errorMessage, index) => html`\n <div\n class=\"nile-error-message__expandable ${index !== 0\n ? 'bordered'\n : ''} ${this.expandedIndex === index ? 'expanded' : ''}\"\n @click=\"${(event: any) => this.toggleExpand(index, event)}\"\n >\n <div class=\"nile-error-message__content\">\n <nile-icon\n name=\"arrowright\"\n size=\"14\"\n class=\"nile-error-message__arrow\"\n ></nile-icon>\n <div class=\"nile-error-message__summary\">${errorMessage}</div>\n </div>\n </div>\n `\n )}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-error-message': NileErrorMessage;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-error-message.js","sourceRoot":"","sources":["../../../src/nile-error-message/nile-error-message.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD;;;GAGG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAKL,4DAA4D;QAE5D,iBAAY,GAAW,EAAE,CAAC;QAO1B,eAAU,GAAY,KAAK,CAAC;QAE5B,wCAAwC;QACvB,eAAU,GAAW,GAAG,CAAC;IAsD5C,CAAC;IAtEQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAgBD;;;OAGG;IACH,oBAAoB;QAClB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE;YAC/C,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;SACjE;QACD,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;;;;kDASmC,IAAI,CAAC,YAAY;;;UAGzD,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;mBACG,IAAI,CAAC,oBAAoB,EAAE;;;;yBAIrB,IAAI,CAAC,cAAc;mBACzB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;gBAC9C;YACN,CAAC,CAAC,EAAE;;;yDAG2C,IAAI,CAAC,UAAU;YAC5D,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,WAAW;;YAEb,IAAI,CAAC,aAAa;;;KAGzB,CAAC;IACJ,CAAC;CACF,CAAA;AAhEC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACD;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACA;AAdjB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAuE5B;SAvEY,gBAAgB","sourcesContent":["import {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-error-message.css';\n\n/**\n * A custom error message component that displays error information to the user.\n * @customElement nile-error-message\n */\n@customElement('nile-error-message')\nexport class NileErrorMessage extends LitElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n // Represents the error message to be displayed to the user.\n @property({ type: String })\n errorMessage: string = '';\n\n // Represents additional details about the error, like stack trace or other info.\n @property({ type: String })\n errorResponse: string;\n\n @property({ type: Boolean })\n isExpanded: boolean = false;\n\n // The maximum length before truncation.\n private readonly MAX_LENGTH: number = 100;\n\n /**\n * Get a truncated version of the errorResponse if it's too long.\n * @returns {string}\n */\n getTruncatedResponse(): string {\n if (this.errorResponse.length > this.MAX_LENGTH) {\n return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;\n }\n return this.errorResponse;\n }\n\n /**\n * Toggle the expanded state of the error response.\n */\n toggleExpanded() {\n this.isExpanded = !this.isExpanded;\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"nile-error-message\" part=\"base\">\n <nile-icon\n name=\"info2\"\n size=\"14\"\n class=\"nile-error-message__icon\"\n part=\"icon\"\n color=\"#E5434D\"\n ></nile-icon>\n <span class=\"nile-error-message__error\">${this.errorMessage}</span>\n\n\n ${this.errorResponse\n ? html` <span class=\"nile-error-message__response\"\n >${this.getTruncatedResponse()}</span\n >\n <span\n class=\"nile-error-message__more-button\"\n @click=${this.toggleExpanded}\n >${this.isExpanded ? 'View Less' : 'View More'}</span\n >`\n : ``}\n\n <div\n class=\"nile-error-message__response-expanded ${this.isExpanded\n ? 'expanded'\n : 'collapsed'}\"\n >\n ${this.errorResponse}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-error-message': NileErrorMessage;\n }\n}\n"]}
@@ -154,11 +154,11 @@ let NileSelect = class NileSelect extends NileElement {
154
154
  }
155
155
  /** Gets the validity state object */
156
156
  get validity() {
157
- return this.valueInput.validity;
157
+ return this.valueInput?.validity;
158
158
  }
159
159
  /** Gets the validation message */
160
160
  get validationMessage() {
161
- return this.valueInput.validationMessage;
161
+ return this.valueInput?.validationMessage;
162
162
  }
163
163
  connectedCallback() {
164
164
  super.connectedCallback();