@aquera/nile-elements 0.0.5-9 → 0.0.6-1

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 (51) hide show
  1. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/index.d.ts +1 -0
  2. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/index.js +1 -0
  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-button/nile-button.css.js +2 -2
  5. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.css.js.map +1 -1
  6. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/index.d.ts +1 -0
  7. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/index.js +2 -0
  8. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/index.js.map +1 -0
  9. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.css.d.ts +12 -0
  10. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.css.js +35 -0
  11. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.css.js.map +1 -0
  12. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.d.ts +60 -0
  13. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js +124 -0
  14. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js.map +1 -0
  15. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
  16. package/dist/index.cjs.js +1 -1
  17. package/dist/index.esm.js +1 -1
  18. package/dist/index.iife.js +59 -3
  19. package/dist/nile-button/nile-button.css.cjs.js +1 -1
  20. package/dist/nile-button/nile-button.css.cjs.js.map +1 -1
  21. package/dist/nile-button/nile-button.css.esm.js +2 -2
  22. package/dist/nile-switcher/index.cjs.js +2 -0
  23. package/dist/nile-switcher/index.cjs.js.map +1 -0
  24. package/dist/nile-switcher/index.esm.js +1 -0
  25. package/dist/nile-switcher/nile-switcher.cjs.js +2 -0
  26. package/dist/nile-switcher/nile-switcher.cjs.js.map +1 -0
  27. package/dist/nile-switcher/nile-switcher.css.cjs.js +2 -0
  28. package/dist/nile-switcher/nile-switcher.css.cjs.js.map +1 -0
  29. package/dist/nile-switcher/nile-switcher.css.esm.js +23 -0
  30. package/dist/nile-switcher/nile-switcher.esm.js +30 -0
  31. package/dist/src/index.d.ts +1 -0
  32. package/dist/src/index.js +1 -0
  33. package/dist/src/index.js.map +1 -1
  34. package/dist/src/nile-button/nile-button.css.js +2 -2
  35. package/dist/src/nile-button/nile-button.css.js.map +1 -1
  36. package/dist/src/nile-switcher/index.d.ts +1 -0
  37. package/dist/src/nile-switcher/index.js +2 -0
  38. package/dist/src/nile-switcher/index.js.map +1 -0
  39. package/dist/src/nile-switcher/nile-switcher.css.d.ts +12 -0
  40. package/dist/src/nile-switcher/nile-switcher.css.js +35 -0
  41. package/dist/src/nile-switcher/nile-switcher.css.js.map +1 -0
  42. package/dist/src/nile-switcher/nile-switcher.d.ts +60 -0
  43. package/dist/src/nile-switcher/nile-switcher.js +124 -0
  44. package/dist/src/nile-switcher/nile-switcher.js.map +1 -0
  45. package/dist/tsconfig.tsbuildinfo +1 -1
  46. package/package.json +1 -1
  47. package/src/index.ts +2 -1
  48. package/src/nile-button/nile-button.css.ts +2 -2
  49. package/src/nile-switcher/index.ts +1 -0
  50. package/src/nile-switcher/nile-switcher.css.ts +37 -0
  51. package/src/nile-switcher/nile-switcher.ts +185 -0
@@ -30,3 +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 { NileSwitcher } from './nile-switcher';
@@ -30,4 +30,5 @@ 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 { NileSwitcher } from './nile-switcher';
33
34
  //# 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","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"]}
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,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,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 { NileSwitcher } from './nile-switcher';\n"]}
@@ -144,7 +144,7 @@ export const styles = css `
144
144
  .button--standard.button--tertiary {
145
145
  background-color: var(--nile-colors-white-base);
146
146
  border-color: var(--nile-colors-neutral-500);
147
- color: var(--nile-colors-neutral-700);
147
+ color: var(--nile-colors-dark-900);
148
148
  box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
149
149
  }
150
150
 
@@ -216,7 +216,7 @@ export const styles = css `
216
216
  }
217
217
 
218
218
  .button--outline.button--secondary:active:not(.button--disabled) {
219
- border-color: var(--nile-colors-primary-700);
219
+ border-color: var(--nile-colors-neutral-700);
220
220
  color: var(--nile-colors-white-base);
221
221
  }
222
222
 
@@ -1 +1 @@
1
- {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkYxB,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 * Button CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: 1px;\n font-style: normal;\n font-weight: var(--nile-font-weight-regular);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default) border,\n var(--nile-transition-duration-default) box-shadow;\n cursor: inherit;\n padding: var(--nile-spacing-2-x);\n gap: var(--nile-spacing-2-x);\n border-radius: var(--nile-radius-base-standard);\n line-height: var(--nile-type-scale-3);\n box-sizing: border-box;\n height: 38px;\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .button--disabled * {\n pointer-events: none;\n }\n\n .button__label::slotted(nile-icon) {\n /* vertical-align: -2px; */\n }\n\n .button--standard.button--secondary {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border : none;\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\n box-shadow: none;\n }\n\n /* Primary */\n .button--standard.button--primary {\n background-color: var(--nile-colors-primary-600);\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700);\n border-color: var(--nile-colors-primary-700);\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700);\n border-color: var(--nile-colors-primary-900);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n cursor: not-allowed;\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n box-shadow: none;\n }\n\n /* Tertiary */\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-neutral-700);\n box-shadow: 0px 2px 4px var(--nile-colors-dark-200);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-100);\n border-color: var(--nile-colors-neutral-500);\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-700);\n }\n .button--standard.button--tertiary.button--disabled {\n border-color: #e5e9eb;\n background-color: var(--nile-colors-white-base);\n color: var(--nile-colors-neutral-700);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n border-color: #e5e9eb;\n background-color: var(--nile-colors-white-base);\n color: var(--nile-colors-neutral-700);\n box-shadow: none;\n }\n\n /* caution */\n .button--standard.button--caution {\n background-color: var(--nile-colors-red-500);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n\n /*\n * Outline buttons\n */\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n /* Default */\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Primary */\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Success */\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Neutral */\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Warning */\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Danger */\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /*\n * Pill modifier\n */\n\n .button--pill.button--small {\n border-radius: 24px;\n }\n\n .button--pill.button--medium {\n border-radius: 32px;\n }\n\n /*\n * Circle modifier\n */\n\n .button--circle {\n padding-left: 0;\n padding-right: 0;\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n /* Caret modifier */\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /*\n * Loading modifier\n */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: 1em;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /*\n * Badges\n */\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n`;\n"]}
1
+ {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkYxB,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 * Button CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: 1px;\n font-style: normal;\n font-weight: var(--nile-font-weight-regular);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default) border,\n var(--nile-transition-duration-default) box-shadow;\n cursor: inherit;\n padding: var(--nile-spacing-2-x);\n gap: var(--nile-spacing-2-x);\n border-radius: var(--nile-radius-base-standard);\n line-height: var(--nile-type-scale-3);\n box-sizing: border-box;\n height: 38px;\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .button--disabled * {\n pointer-events: none;\n }\n\n .button__label::slotted(nile-icon) {\n /* vertical-align: -2px; */\n }\n\n .button--standard.button--secondary {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border : none;\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\n box-shadow: none;\n }\n\n /* Primary */\n .button--standard.button--primary {\n background-color: var(--nile-colors-primary-600);\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700);\n border-color: var(--nile-colors-primary-700);\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700);\n border-color: var(--nile-colors-primary-900);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n cursor: not-allowed;\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n box-shadow: none;\n }\n\n /* Tertiary */\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n box-shadow: 0px 2px 4px var(--nile-colors-dark-200);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-100);\n border-color: var(--nile-colors-neutral-500);\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-700);\n }\n .button--standard.button--tertiary.button--disabled {\n border-color: #e5e9eb;\n background-color: var(--nile-colors-white-base);\n color: var(--nile-colors-neutral-700);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n border-color: #e5e9eb;\n background-color: var(--nile-colors-white-base);\n color: var(--nile-colors-neutral-700);\n box-shadow: none;\n }\n\n /* caution */\n .button--standard.button--caution {\n background-color: var(--nile-colors-red-500);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n\n /*\n * Outline buttons\n */\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n /* Default */\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Primary */\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Success */\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Neutral */\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Warning */\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Danger */\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /*\n * Pill modifier\n */\n\n .button--pill.button--small {\n border-radius: 24px;\n }\n\n .button--pill.button--medium {\n border-radius: 32px;\n }\n\n /*\n * Circle modifier\n */\n\n .button--circle {\n padding-left: 0;\n padding-right: 0;\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n /* Caret modifier */\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /*\n * Loading modifier\n */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: 1em;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /*\n * Badges\n */\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n`;\n"]}
@@ -0,0 +1 @@
1
+ export { NileSwitcher } from './nile-switcher';
@@ -0,0 +1,2 @@
1
+ export { NileSwitcher } from './nile-switcher';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-switcher/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { NileSwitcher } from './nile-switcher';\n"]}
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Copyright Aquera Inc 2023
3
+ *
4
+ * This source code is licensed under the BSD-3-Clause license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ /**
8
+ * FieldGenerator CSS
9
+ */
10
+ export declare const styles: import("lit-element").CSSResult;
11
+ declare const _default: import("lit-element").CSSResult[];
12
+ export default _default;
@@ -0,0 +1,35 @@
1
+ /**
2
+ * Copyright Aquera Inc 2023
3
+ *
4
+ * This source code is licensed under the BSD-3-Clause license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { css } from 'lit-element';
8
+ /**
9
+ * FieldGenerator CSS
10
+ */
11
+ export const styles = css `
12
+ :host {
13
+ display: inline-block;
14
+ width: 100%;
15
+ box-sizing: border-box;
16
+ }
17
+
18
+ .pointer-cursor {
19
+ cursor: pointer;
20
+ }
21
+ .input-container {
22
+ display: flex;
23
+ }
24
+
25
+ .input-container > :first-child {
26
+ width: 100%;
27
+ padding-right: 12px;
28
+ }
29
+ .flex-start {
30
+ align-items: flex-start;
31
+ padding-top: 10px;
32
+ }
33
+ `;
34
+ export default [styles];
35
+ //# sourceMappingURL=nile-switcher.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nile-switcher.css.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * FieldGenerator CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n width: 100%;\n box-sizing: border-box;\n }\n\n .pointer-cursor {\n cursor: pointer;\n }\n .input-container {\n display: flex;\n }\n\n .input-container > :first-child {\n width: 100%;\n padding-right: 12px;\n }\n .flex-start {\n align-items: flex-start;\n padding-top: 10px;\n }\n`;\n\nexport default [styles];\n"]}
@@ -0,0 +1,60 @@
1
+ /**
2
+ * Copyright Aquera Inc 2023
3
+ *
4
+ * This source code is licensed under the BSD-3-Clause license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { TemplateResult } from 'lit-element';
8
+ import NileElement from '../internal/nile-element';
9
+ import { CSSResultGroup } from 'lit';
10
+ /**
11
+ * @summary Allows you to switch between nile elements
12
+
13
+ * @dependency nile-icon
14
+ * @dependency nile-input
15
+ * @dependency nile-checkbox
16
+ * @dependency nile-dropdown
17
+ * @dependency nile-textarea
18
+ *
19
+
20
+ * @event nile-change - Emitted when the control's value changes.
21
+ */
22
+ export interface switchconfig {
23
+ toggleSwitch: boolean;
24
+ defaultInput: switchInputType;
25
+ switchInput: switchInputType;
26
+ }
27
+ export interface switchInputType {
28
+ inputType: 'dropdown' | 'text' | 'checkbox' | 'text-area';
29
+ value?: String | boolean;
30
+ label?: String;
31
+ placeholder?: string;
32
+ options?: Array<any>;
33
+ multiple?: boolean;
34
+ }
35
+ export declare class NileSwitcher extends NileElement {
36
+ /**
37
+ * The styles for nile switcher
38
+ * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
39
+ */
40
+ static styles: CSSResultGroup;
41
+ nileSwitchConfig: switchconfig;
42
+ connectedCallback(): void;
43
+ disconnectedCallback(): void;
44
+ renderNileText(defaultInput: switchInputType): TemplateResult<1>;
45
+ renderNileTextArea(switchInput: switchInputType): TemplateResult<1>;
46
+ renderNileCheckBox(defaultInput: switchInputType): TemplateResult<1>;
47
+ handleChange(event: CustomEvent): void;
48
+ handleChangeCheckbox(event: CustomEvent): void;
49
+ renderDropdown(defaultInput: switchInputType): TemplateResult<1>;
50
+ renderIcon(): TemplateResult<1>;
51
+ toggleField(): void;
52
+ singleFieldSwitcher(defaultInput: switchInputType, switchInput: switchInputType, toggleField: boolean): TemplateResult<1>;
53
+ render(): TemplateResult;
54
+ }
55
+ export default NileSwitcher;
56
+ declare global {
57
+ interface HTMLElementTagNameMap {
58
+ 'nile-switcher': NileSwitcher;
59
+ }
60
+ }
@@ -0,0 +1,124 @@
1
+ /**
2
+ * Copyright Aquera Inc 2023
3
+ *
4
+ * This source code is licensed under the BSD-3-Clause license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { __decorate } from "tslib";
8
+ import { html, property } from 'lit-element';
9
+ import { customElement } from 'lit/decorators.js';
10
+ import { styles } from './nile-switcher.css';
11
+ import NileElement from '../internal/nile-element';
12
+ import { choose } from 'lit/directives/choose.js';
13
+ import { classMap } from 'lit/directives/class-map.js';
14
+ let NileSwitcher = class NileSwitcher extends NileElement {
15
+ connectedCallback() {
16
+ super.connectedCallback();
17
+ this.emit('nile-init');
18
+ }
19
+ disconnectedCallback() {
20
+ super.disconnectedCallback();
21
+ this.emit('nile-destroy');
22
+ }
23
+ renderNileText(defaultInput) {
24
+ const { value, label, placeholder } = defaultInput;
25
+ return html `<nile-input
26
+ .value=${value}
27
+ .label=${label}
28
+ .placeholder=${placeholder}
29
+ @nile-input=${this.handleChange}
30
+ ></nile-input>`;
31
+ }
32
+ renderNileTextArea(switchInput) {
33
+ const { value } = switchInput;
34
+ return html `<nile-textarea
35
+ .value=${value}
36
+ @nile-input=${this.handleChange}
37
+ ></nile-textarea>`;
38
+ }
39
+ renderNileCheckBox(defaultInput) {
40
+ const { value, label } = defaultInput;
41
+ return html `<nile-checkbox
42
+ .checked=${value}
43
+ .label=${label}
44
+ @valueChange="${this.handleChangeCheckbox}"
45
+ ></nile-checkbox>`;
46
+ }
47
+ handleChange(event) {
48
+ this.emit('nile-change', { value: event.detail.value });
49
+ }
50
+ handleChangeCheckbox(event) {
51
+ this.emit('nile-change', { value: event.detail.checked });
52
+ }
53
+ renderDropdown(defaultInput) {
54
+ const { options, multiple, placeholder } = defaultInput;
55
+ return html `<nile-select
56
+ .placeholder=${placeholder}
57
+ .multiple="${multiple}"
58
+ @nile-change="${this.handleChange}"
59
+ >
60
+ ${options &&
61
+ options.map((option) => {
62
+ return html `<nile-option .value="${option}">${option} </nile-option>`;
63
+ })}
64
+ </nile-select>`;
65
+ }
66
+ renderIcon() {
67
+ const icon = !this.nileSwitchConfig.toggleSwitch
68
+ ? 'header-functions'
69
+ : 'stringinput';
70
+ return html `<nile-icon
71
+ size="14"
72
+ class=${classMap({
73
+ 'pointer-cursor': true,
74
+ 'flex-start': icon === 'stringinput',
75
+ })}
76
+ .name=${icon}
77
+ color="#005EA6"
78
+ @click=${this.toggleField}
79
+ ></nile-icon>`;
80
+ }
81
+ toggleField() {
82
+ this.nileSwitchConfig = {
83
+ ...this.nileSwitchConfig,
84
+ toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
85
+ };
86
+ }
87
+ singleFieldSwitcher(defaultInput, switchInput, toggleField) {
88
+ const defaultInputType = defaultInput.inputType;
89
+ const switchInputType = switchInput.inputType;
90
+ return html `
91
+ ${!toggleField
92
+ ? choose(defaultInputType, [
93
+ ['text', () => this.renderNileText(defaultInput)],
94
+ ['checkbox', () => this.renderNileCheckBox(defaultInput)],
95
+ [
96
+ 'dropdown',
97
+ () => this.renderDropdown(this.nileSwitchConfig.defaultInput),
98
+ ],
99
+ ], () => this.renderNileText(defaultInput))
100
+ : choose(switchInputType, [['text-area', () => this.renderNileTextArea(switchInput)]], () => this.renderNileTextArea(switchInput))}
101
+ ${this.renderIcon()}
102
+ `;
103
+ }
104
+ render() {
105
+ const { toggleSwitch: toggleField, defaultInput, switchInput, } = this.nileSwitchConfig;
106
+ return html `<div class="input-container">
107
+ ${this.singleFieldSwitcher(defaultInput, switchInput, toggleField)}
108
+ </div>`;
109
+ }
110
+ };
111
+ /**
112
+ * The styles for nile switcher
113
+ * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
114
+ */
115
+ NileSwitcher.styles = styles;
116
+ __decorate([
117
+ property()
118
+ ], NileSwitcher.prototype, "nileSwitchConfig", void 0);
119
+ NileSwitcher = __decorate([
120
+ customElement('nile-switcher')
121
+ ], NileSwitcher);
122
+ export { NileSwitcher };
123
+ export default NileSwitcher;
124
+ //# sourceMappingURL=nile-switcher.js.map
@@ -0,0 +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 */\n\nexport interface switchconfig {\n toggleSwitch: boolean;\n defaultInput: switchInputType;\n switchInput: switchInputType;\n}\n\nexport interface switchInputType {\n inputType: 'dropdown' | 'text' | 'checkbox' | 'text-area';\n value?: String | boolean;\n label?: String;\n placeholder?: string;\n options?: Array<any>;\n multiple?: boolean;\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() 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(defaultInput: switchInputType) {\n const { value, label, placeholder } = defaultInput;\n return html`<nile-input\n .value=${value}\n .label=${label}\n .placeholder=${placeholder}\n @nile-input=${this.handleChange}\n ></nile-input>`;\n }\n\n renderNileTextArea(switchInput: switchInputType) {\n const { value } = switchInput;\n return html`<nile-textarea\n .value=${value}\n @nile-input=${this.handleChange}\n ></nile-textarea>`;\n }\n\n renderNileCheckBox(defaultInput: switchInputType) {\n const { value, label } = defaultInput;\n\n return html`<nile-checkbox\n .checked=${value}\n .label=${label}\n @valueChange=\"${this.handleChangeCheckbox}\"\n ></nile-checkbox>`;\n }\n\n handleChange(event: CustomEvent) {\n this.emit('nile-change', { value: event.detail.value });\n }\n\n handleChangeCheckbox(event: CustomEvent) {\n this.emit('nile-change', { value: event.detail.checked });\n }\n\n renderDropdown(defaultInput: switchInputType) {\n const { options, multiple, placeholder } = defaultInput;\n return html`<nile-select\n .placeholder=${placeholder}\n .multiple=\"${multiple}\"\n @nile-change=\"${this.handleChange}\"\n >\n ${options &&\n options.map((option: any) => {\n return html`<nile-option .value=\"${option}\">${option} </nile-option>`;\n })}\n </nile-select>`;\n }\n\n renderIcon() {\n const icon = !this.nileSwitchConfig.toggleSwitch\n ? 'header-functions'\n : 'stringinput';\n return html`<nile-icon\n size=\"14\"\n class=${classMap({\n 'pointer-cursor': true,\n 'flex-start': icon === 'stringinput',\n })}\n .name=${icon}\n color=\"#005EA6\"\n @click=${this.toggleField}\n ></nile-icon>`;\n }\n\n toggleField() {\n this.nileSwitchConfig = {\n ...this.nileSwitchConfig,\n toggleSwitch: !this.nileSwitchConfig.toggleSwitch,\n };\n }\n\n singleFieldSwitcher(\n defaultInput: switchInputType,\n switchInput: switchInputType,\n toggleField: boolean\n ) {\n const defaultInputType = defaultInput.inputType;\n const switchInputType = switchInput.inputType;\n return html`\n ${!toggleField\n ? choose(\n defaultInputType,\n [\n ['text', () => this.renderNileText(defaultInput)],\n ['checkbox', () => this.renderNileCheckBox(defaultInput)],\n [\n 'dropdown',\n () => this.renderDropdown(this.nileSwitchConfig.defaultInput),\n ],\n ],\n () => this.renderNileText(defaultInput)\n )\n : choose(\n switchInputType,\n [['text-area', () => this.renderNileTextArea(switchInput)]],\n\n () => this.renderNileTextArea(switchInput)\n )}\n ${this.renderIcon()}\n `;\n }\n public render(): TemplateResult {\n const {\n toggleSwitch: toggleField,\n defaultInput,\n switchInput,\n } = this.nileSwitchConfig;\n\n return html`<div class=\"input-container\">\n ${this.singleFieldSwitcher(defaultInput, switchInput, toggleField)}\n </div>`;\n }\n}\n\nexport default NileSwitcher;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-switcher': NileSwitcher;\n }\n}\n"]}