@aquera/nile-elements 1.9.5 → 1.9.6

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 (67) hide show
  1. package/README.md +6 -0
  2. package/dist/index.cjs.js +1 -1
  3. package/dist/index.esm.js +1 -1
  4. package/dist/index.js +470 -298
  5. package/dist/nile-chip/nile-chip.css.cjs.js +1 -1
  6. package/dist/nile-chip/nile-chip.css.cjs.js.map +1 -1
  7. package/dist/nile-chip/nile-chip.css.esm.js +8 -1
  8. package/dist/nile-code-editor/nile-code-editor.cjs.js +1 -1
  9. package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
  10. package/dist/nile-code-editor/nile-code-editor.esm.js +3 -3
  11. package/dist/nile-hero/nile-hero.cjs.js +1 -1
  12. package/dist/nile-hero/nile-hero.cjs.js.map +1 -1
  13. package/dist/nile-hero/nile-hero.css.cjs.js +1 -1
  14. package/dist/nile-hero/nile-hero.css.cjs.js.map +1 -1
  15. package/dist/nile-hero/nile-hero.css.esm.js +14 -14
  16. package/dist/nile-hero/nile-hero.esm.js +1 -1
  17. package/dist/nile-hero-header/nile-hero-header.cjs.js +1 -1
  18. package/dist/nile-hero-header/nile-hero-header.cjs.js.map +1 -1
  19. package/dist/nile-hero-header/nile-hero-header.css.cjs.js +1 -1
  20. package/dist/nile-hero-header/nile-hero-header.css.cjs.js.map +1 -1
  21. package/dist/nile-hero-header/nile-hero-header.css.esm.js +11 -11
  22. package/dist/nile-hero-header/nile-hero-header.esm.js +3 -3
  23. package/dist/nile-rich-text-editor/index.cjs.js +1 -1
  24. package/dist/nile-rich-text-editor/index.esm.js +1 -1
  25. package/dist/nile-rich-text-editor/nile-rich-text-editor.cjs.js +1 -1
  26. package/dist/nile-rich-text-editor/nile-rich-text-editor.cjs.js.map +1 -1
  27. package/dist/nile-rich-text-editor/nile-rich-text-editor.css.cjs.js +1 -1
  28. package/dist/nile-rich-text-editor/nile-rich-text-editor.css.cjs.js.map +1 -1
  29. package/dist/nile-rich-text-editor/nile-rich-text-editor.css.esm.js +70 -0
  30. package/dist/nile-rich-text-editor/nile-rich-text-editor.esm.js +1 -1
  31. package/dist/nile-rich-text-editor/nile-rte-image.cjs.js +3 -0
  32. package/dist/nile-rich-text-editor/nile-rte-image.cjs.js.map +1 -0
  33. package/dist/nile-rich-text-editor/nile-rte-image.esm.js +96 -0
  34. package/dist/src/nile-chip/nile-chip.css.js +8 -1
  35. package/dist/src/nile-chip/nile-chip.css.js.map +1 -1
  36. package/dist/src/nile-code-editor/nile-code-editor.js +3 -3
  37. package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
  38. package/dist/src/nile-hero/nile-hero.css.js +12 -12
  39. package/dist/src/nile-hero/nile-hero.css.js.map +1 -1
  40. package/dist/src/nile-hero/nile-hero.js +1 -1
  41. package/dist/src/nile-hero/nile-hero.js.map +1 -1
  42. package/dist/src/nile-hero-header/nile-hero-header.css.js +9 -9
  43. package/dist/src/nile-hero-header/nile-hero-header.css.js.map +1 -1
  44. package/dist/src/nile-hero-header/nile-hero-header.js +1 -1
  45. package/dist/src/nile-hero-header/nile-hero-header.js.map +1 -1
  46. package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js +70 -0
  47. package/dist/src/nile-rich-text-editor/nile-rich-text-editor.css.js.map +1 -1
  48. package/dist/src/nile-rich-text-editor/nile-rich-text-editor.d.ts +3 -0
  49. package/dist/src/nile-rich-text-editor/nile-rich-text-editor.js +81 -3
  50. package/dist/src/nile-rich-text-editor/nile-rich-text-editor.js.map +1 -1
  51. package/dist/src/nile-rich-text-editor/nile-rte-image.d.ts +87 -0
  52. package/dist/src/nile-rich-text-editor/nile-rte-image.js +1073 -0
  53. package/dist/src/nile-rich-text-editor/nile-rte-image.js.map +1 -0
  54. package/dist/src/version.js +1 -1
  55. package/dist/src/version.js.map +1 -1
  56. package/dist/tsconfig.tsbuildinfo +1 -1
  57. package/package.json +1 -1
  58. package/src/nile-chip/nile-chip.css.ts +8 -1
  59. package/src/nile-code-editor/nile-code-editor.ts +3 -3
  60. package/src/nile-hero/nile-hero.css.ts +12 -12
  61. package/src/nile-hero/nile-hero.ts +1 -1
  62. package/src/nile-hero-header/nile-hero-header.css.ts +9 -9
  63. package/src/nile-hero-header/nile-hero-header.ts +1 -1
  64. package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts +70 -0
  65. package/src/nile-rich-text-editor/nile-rich-text-editor.ts +89 -3
  66. package/src/nile-rich-text-editor/nile-rte-image.ts +1132 -0
  67. package/vscode-html-custom-data.json +41 -1
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: var(--nile-spacing-sm,var( --ng-spacing-sm));\n color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n margin-top: var(--nile-spacing-xxxxsmall);\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xxxsmall);\n }\n\n :host {\n display: block;\n font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n }\n\n .nile-chip {\n padding: var(--nile-spacing-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n overflow-x: hidden;\n gap : var(--nile-gap-unset, var(--ng-spacing-md));\n }\n\n nile-input::part(base) {\n padding: 0px !important;\n }\n\n .nile-chip--no-wrap {\n flex-wrap: nowrap;\n overflow-x: scroll;\n }\n\n .nile-chip::-webkit-scrollbar {\n height: 2px;\n }\n\n .nile-chip::-webkit-scrollbar-thumb {\n background: var(\n --nile-colors-primary-600\n );\n }\n\n .nile-chip--disabled {\n \n /* opacity: 0.5; */\n cursor: not-allowed;\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n }\n\n :host([disabled]) nile-tag::part(base) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n\n :host([disabled]) .nile-chip {\n background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n pointer-events: none;\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n }\n\n .nile-chip.nile-chip--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n }\n\n .nile-chip.nile-chip--warning {\n border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n }\n\n .nile-chip.nile-chip--error {\n border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n }\n\n .nile-chip.nile-chip--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .nile-chip__auto-complete {\n flex: 1;\n }\n .nile-chip__tags {\n margin: var(--nile-margin-size-rem-small);\n }\n\n nile-auto-complete::part(input) {\n padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n }\n \n .nile-chip:hover:not(.nile-chip--disabled) {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n box-shadow: var(--nile-box-shadow-10);\n }\n\n :host([disabled]) .nile-chip:hover {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n box-shadow: none;\n }\n\n\n .nile-chip.nile-chip--open:hover {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n box-shadow: var(--nile-box-shadow-10, 0 0 0 1px var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n }\n\n .nile-chip__tags--focused::part(base) {\n border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n gap: 2px;\n }\n\n nile-auto-complete::part(base)::before {\n box-shadow: none;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n :host([disabled]) nile-auto-complete::part(base) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: var(--nile-spacing-sm,var( --ng-spacing-sm));\n color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n margin-top: var(--nile-spacing-xxxxsmall);\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xxxsmall);\n }\n\n :host {\n display: block;\n font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n }\n\n .nile-chip {\n padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n min-height: var(--ng-height-40px);\n background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n width: 100%;\n overflow-x: hidden;\n gap : var(--nile-gap-unset, var(--ng-spacing-md));\n }\n\n nile-input::part(base) {\n padding: 0px !important;\n height: auto;\n }\n\n .nile-chip--no-wrap {\n flex-wrap: nowrap;\n overflow-x: scroll;\n }\n\n .nile-chip::-webkit-scrollbar {\n height: 2px;\n }\n\n .nile-chip::-webkit-scrollbar-thumb {\n background: var(\n --nile-colors-primary-600\n );\n }\n\n .nile-chip--disabled {\n \n /* opacity: 0.5; */\n cursor: not-allowed;\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n }\n\n :host([disabled]) nile-tag::part(base) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n\n :host([disabled]) .nile-chip {\n background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n pointer-events: none;\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n }\n\n .nile-chip.nile-chip--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n }\n\n .nile-chip.nile-chip--warning {\n border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n }\n\n .nile-chip.nile-chip--error {\n border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n }\n\n .nile-chip.nile-chip--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .nile-chip__auto-complete {\n flex: 1;\n }\n .nile-chip__tags {\n margin: var(--nile-margin-size-rem-small);\n }\n\n nile-auto-complete::part(input) {\n padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n }\n\n nile-auto-complete::part(base) {\n height: auto;\n }\n \n .nile-chip:hover:not(.nile-chip--disabled) {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n box-shadow: var(--nile-box-shadow-10);\n }\n\n :host([disabled]) .nile-chip:hover {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n box-shadow: none;\n }\n\n\n .nile-chip.nile-chip--open:hover {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n box-shadow: var(--nile-box-shadow-10, 0 0 0 1px var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n }\n\n .nile-chip__tags--focused::part(base) {\n border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n gap: 2px;\n }\n\n nile-auto-complete::part(base)::before {\n box-shadow: none;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n :host([disabled]) nile-auto-complete::part(base) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-chip.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-chip.css.cjs.js","sources":["../../../src/nile-chip/nile-chip.css.ts"],"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';\n\n/**\n * Chip CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: var(--nile-spacing-sm,var( --ng-spacing-sm));\n color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n margin-top: var(--nile-spacing-xxxxsmall);\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xxxsmall);\n }\n\n :host {\n display: block;\n font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n }\n\n .nile-chip {\n padding: var(--nile-spacing-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n overflow-x: hidden;\n gap : var(--nile-gap-unset, var(--ng-spacing-md));\n }\n\n nile-input::part(base) {\n padding: 0px !important;\n }\n\n .nile-chip--no-wrap {\n flex-wrap: nowrap;\n overflow-x: scroll;\n }\n\n .nile-chip::-webkit-scrollbar {\n height: 2px;\n }\n\n .nile-chip::-webkit-scrollbar-thumb {\n background: var(\n --nile-colors-primary-600\n );\n }\n\n .nile-chip--disabled {\n \n /* opacity: 0.5; */\n cursor: not-allowed;\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n }\n\n :host([disabled]) nile-tag::part(base) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n\n :host([disabled]) .nile-chip {\n background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n pointer-events: none;\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n }\n\n .nile-chip.nile-chip--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n }\n\n .nile-chip.nile-chip--warning {\n border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n }\n\n .nile-chip.nile-chip--error {\n border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n }\n\n .nile-chip.nile-chip--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .nile-chip__auto-complete {\n flex: 1;\n }\n .nile-chip__tags {\n margin: var(--nile-margin-size-rem-small);\n }\n\n nile-auto-complete::part(input) {\n padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n }\n \n .nile-chip:hover:not(.nile-chip--disabled) {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n box-shadow: var(--nile-box-shadow-10);\n }\n\n :host([disabled]) .nile-chip:hover {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n box-shadow: none;\n }\n\n\n .nile-chip.nile-chip--open:hover {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n box-shadow: var(--nile-box-shadow-10, 0 0 0 1px var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n }\n\n .nile-chip__tags--focused::part(base) {\n border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n gap: 2px;\n }\n\n nile-auto-complete::part(base)::before {\n box-shadow: none;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n :host([disabled]) nile-auto-complete::part(base) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-chip.css.cjs.js","sources":["../../../src/nile-chip/nile-chip.css.ts"],"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';\n\n/**\n * Chip CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: var(--nile-spacing-sm,var( --ng-spacing-sm));\n color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif,var( --ng-font-family-body));\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));\n line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n margin-top: var(--nile-spacing-xxxxsmall);\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xxxsmall);\n }\n\n :host {\n display: block;\n font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n }\n\n .nile-chip {\n padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n min-height: var(--ng-height-40px);\n background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n width: 100%;\n overflow-x: hidden;\n gap : var(--nile-gap-unset, var(--ng-spacing-md));\n }\n\n nile-input::part(base) {\n padding: 0px !important;\n height: auto;\n }\n\n .nile-chip--no-wrap {\n flex-wrap: nowrap;\n overflow-x: scroll;\n }\n\n .nile-chip::-webkit-scrollbar {\n height: 2px;\n }\n\n .nile-chip::-webkit-scrollbar-thumb {\n background: var(\n --nile-colors-primary-600\n );\n }\n\n .nile-chip--disabled {\n \n /* opacity: 0.5; */\n cursor: not-allowed;\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled));\n }\n\n :host([disabled]) nile-tag::part(base) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n\n :host([disabled]) .nile-chip {\n background-color: var(--nile-colors-dark-200 , var(--ng-colors-bg-disabled-subtle));\n pointer-events: none;\n }\n\n .input--standard.input--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n }\n\n .nile-chip.nile-chip--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n opacity: 0.5;\n cursor: not-allowed;\n box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n }\n\n .nile-chip.nile-chip--warning {\n border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n }\n\n .nile-chip.nile-chip--error {\n border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n }\n\n .nile-chip.nile-chip--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .nile-chip__auto-complete {\n flex: 1;\n }\n .nile-chip__tags {\n margin: var(--nile-margin-size-rem-small);\n }\n\n nile-auto-complete::part(input) {\n padding: var(--nile-spacing-lg, var(--ng-spacing-none));\n }\n\n nile-auto-complete::part(base) {\n height: auto;\n }\n \n .nile-chip:hover:not(.nile-chip--disabled) {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));\n box-shadow: var(--nile-box-shadow-10);\n }\n\n :host([disabled]) .nile-chip:hover {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n box-shadow: none;\n }\n\n\n .nile-chip.nile-chip--open:hover {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-brand));\n box-shadow: var(--nile-box-shadow-10, 0 0 0 1px var(--ng-colors-border-brand) inset ); /* Need to create token for it */\n }\n\n .nile-chip__tags--focused::part(base) {\n border: 1px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));\n gap: 2px;\n }\n\n nile-auto-complete::part(base)::before {\n box-shadow: none;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n :host([disabled]) nile-auto-complete::part(base) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -77,11 +77,13 @@ import{css as o}from"lit";const r=o`
77
77
  }
78
78
 
79
79
  .nile-chip {
80
- padding: var(--nile-spacing-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,var(--ng-spacing-lg));
80
+ padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));
81
+ min-height: var(--ng-height-40px);
81
82
  background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));
82
83
  border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
83
84
  border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));
84
85
  display: flex;
86
+ align-items: center;
85
87
  flex-wrap: wrap;
86
88
  width: 100%;
87
89
  overflow-x: hidden;
@@ -90,6 +92,7 @@ import{css as o}from"lit";const r=o`
90
92
 
91
93
  nile-input::part(base) {
92
94
  padding: 0px !important;
95
+ height: auto;
93
96
  }
94
97
 
95
98
  .nile-chip--no-wrap {
@@ -159,6 +162,10 @@ import{css as o}from"lit";const r=o`
159
162
  nile-auto-complete::part(input) {
160
163
  padding: var(--nile-spacing-lg, var(--ng-spacing-none));
161
164
  }
165
+
166
+ nile-auto-complete::part(base) {
167
+ height: auto;
168
+ }
162
169
 
163
170
  .nile-chip:hover:not(.nile-chip--disabled) {
164
171
  border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));