@limetech/lime-elements 37.62.3 → 37.63.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 (86) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/limel-breadcrumbs_5.cjs.entry.js +1 -1
  3. package/dist/cjs/limel-breadcrumbs_5.cjs.entry.js.map +1 -1
  4. package/dist/cjs/limel-collapsible-section.cjs.entry.js +1 -1
  5. package/dist/cjs/limel-collapsible-section.cjs.entry.js.map +1 -1
  6. package/dist/cjs/limel-dynamic-label_4.cjs.entry.js +1 -1
  7. package/dist/cjs/limel-dynamic-label_4.cjs.entry.js.map +1 -1
  8. package/dist/cjs/limel-file.cjs.entry.js +1 -1
  9. package/dist/cjs/limel-file.cjs.entry.js.map +1 -1
  10. package/dist/cjs/limel-info-tile.cjs.entry.js +1 -1
  11. package/dist/cjs/limel-info-tile.cjs.entry.js.map +1 -1
  12. package/dist/cjs/limel-popover_2.cjs.entry.js +1 -1
  13. package/dist/cjs/limel-popover_2.cjs.entry.js.map +1 -1
  14. package/dist/collection/components/action-bar/action-bar-item/action-bar-item.css +5 -0
  15. package/dist/collection/components/badge/badge.css +5 -0
  16. package/dist/collection/components/breadcrumbs/breadcrumbs.css +5 -0
  17. package/dist/collection/components/button/button.css +5 -0
  18. package/dist/collection/components/button-group/button-group.css +5 -0
  19. package/dist/collection/components/checkbox/checkbox.css +5 -0
  20. package/dist/collection/components/chip/chip.css +5 -0
  21. package/dist/collection/components/chip-set/chip-set.css +10 -0
  22. package/dist/collection/components/circular-progress/circular-progress.css +5 -0
  23. package/dist/collection/components/code-editor/code-editor.css +5 -0
  24. package/dist/collection/components/collapsible-section/collapsible-section.css +8 -3
  25. package/dist/collection/components/color-picker/color-picker-palette.css +10 -0
  26. package/dist/collection/components/color-picker/color-picker.css +5 -0
  27. package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css +5 -0
  28. package/dist/collection/components/dialog/dialog.css +5 -0
  29. package/dist/collection/components/dock/dock-button/dock-button.css +5 -0
  30. package/dist/collection/components/dock/dock.css +5 -0
  31. package/dist/collection/components/dynamic-label/dynamic-label.css +5 -0
  32. package/dist/collection/components/file/file.css +62 -3
  33. package/dist/collection/components/file-viewer/file-viewer.css +5 -0
  34. package/dist/collection/components/form/form.css +5 -0
  35. package/dist/collection/components/header/header.css +5 -0
  36. package/dist/collection/components/help/help.css +5 -0
  37. package/dist/collection/components/help/limel-help-content.css +5 -0
  38. package/dist/collection/components/icon-button/icon-button.css +5 -0
  39. package/dist/collection/components/info-tile/info-tile.css +5 -0
  40. package/dist/collection/components/input-field/input-field.css +5 -0
  41. package/dist/collection/components/list/list.css +82 -3
  42. package/dist/collection/components/markdown/markdown.css +5 -0
  43. package/dist/collection/components/menu-list/menu-list.css +82 -3
  44. package/dist/collection/components/popover-surface/popover-surface.css +6 -1
  45. package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css +5 -0
  46. package/dist/collection/components/select/select.css +10 -0
  47. package/dist/collection/components/shortcut/shortcut.css +5 -0
  48. package/dist/collection/components/slider/slider.css +5 -0
  49. package/dist/collection/components/split-button/split-button.css +5 -0
  50. package/dist/collection/components/switch/switch.css +5 -0
  51. package/dist/collection/components/table/table.css +20 -0
  52. package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.css +5 -0
  53. package/dist/collection/components/text-editor/text-editor.css +5 -0
  54. package/dist/collection/style/mixins.scss +13 -0
  55. package/dist/esm/limel-breadcrumbs_5.entry.js +1 -1
  56. package/dist/esm/limel-breadcrumbs_5.entry.js.map +1 -1
  57. package/dist/esm/limel-collapsible-section.entry.js +1 -1
  58. package/dist/esm/limel-collapsible-section.entry.js.map +1 -1
  59. package/dist/esm/limel-dynamic-label_4.entry.js +1 -1
  60. package/dist/esm/limel-dynamic-label_4.entry.js.map +1 -1
  61. package/dist/esm/limel-file.entry.js +1 -1
  62. package/dist/esm/limel-file.entry.js.map +1 -1
  63. package/dist/esm/limel-info-tile.entry.js +1 -1
  64. package/dist/esm/limel-info-tile.entry.js.map +1 -1
  65. package/dist/esm/limel-popover_2.entry.js +1 -1
  66. package/dist/esm/limel-popover_2.entry.js.map +1 -1
  67. package/dist/lime-elements/lime-elements.esm.js +1 -1
  68. package/dist/lime-elements/{p-768dc020.entry.js → p-00e3e9be.entry.js} +2 -2
  69. package/dist/lime-elements/p-00e3e9be.entry.js.map +1 -0
  70. package/dist/lime-elements/p-03eea223.entry.js +2 -0
  71. package/dist/lime-elements/p-03eea223.entry.js.map +1 -0
  72. package/dist/lime-elements/{p-b334b138.entry.js → p-126ed7d5.entry.js} +2 -2
  73. package/dist/lime-elements/{p-b334b138.entry.js.map → p-126ed7d5.entry.js.map} +1 -1
  74. package/dist/lime-elements/p-7d215789.entry.js +2 -0
  75. package/dist/lime-elements/{p-b852d3f5.entry.js.map → p-7d215789.entry.js.map} +1 -1
  76. package/dist/lime-elements/{p-53fc6f0e.entry.js → p-c9598cfe.entry.js} +2 -2
  77. package/dist/lime-elements/{p-53fc6f0e.entry.js.map → p-c9598cfe.entry.js.map} +1 -1
  78. package/dist/lime-elements/{p-502b4476.entry.js → p-d86f8aea.entry.js} +2 -2
  79. package/dist/lime-elements/{p-502b4476.entry.js.map → p-d86f8aea.entry.js.map} +1 -1
  80. package/dist/lime-elements/style/mixins.scss +13 -0
  81. package/dist/scss/mixins.scss +13 -0
  82. package/package.json +5 -5
  83. package/dist/lime-elements/p-768dc020.entry.js.map +0 -1
  84. package/dist/lime-elements/p-889b4ae4.entry.js +0 -2
  85. package/dist/lime-elements/p-889b4ae4.entry.js.map +0 -1
  86. package/dist/lime-elements/p-b852d3f5.entry.js +0 -2
package/dist/esm/limel-collapsible-section.entry.js CHANGED
@@ -3,7 +3,7 @@ import { d as dispatchResizeEvent } from './dispatch-resize-event-cd1d230c.js';
3
3
  import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-a30589fb.js';
4
4
  import { c as createRandomString } from './random-string-812b1c35.js';
5
5
 
6
- const collapsibleSectionCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.5rem;height:2.5rem}.title{font-size:1rem;font-weight:300;color:var(--mdc-theme-on-surface);justify-self:flex-start;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:0fr}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden;opacity:0}section.open .body{--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;grid-template-rows:1fr}section.open .body slot{opacity:1}header:hover+.body{will-change:grid-template-rows}header:hover+.body slot{will-change:opacity}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}";
6
+ const collapsibleSectionCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.5rem;height:2.5rem}.title{font-size:1rem;font-weight:300;color:var(--mdc-theme-on-surface);justify-self:flex-start;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:0fr}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden;opacity:0}section.open .body{--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;grid-template-rows:1fr}section.open .body slot{opacity:1}header:hover+.body{will-change:grid-template-rows}header:hover+.body slot{will-change:opacity}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}";
7
7
 
8
8
  const CollapsibleSection = class {
9
9
  constructor(hostRef) {
package/dist/esm/limel-collapsible-section.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"limel-collapsible-section.entry.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,onMAAonM;;MC6BroM,kBAAkB;;;;;;IAwCnB,WAAM,GAAG,kBAAkB,EAAE,CAAC;IAkD9B,YAAO,GAAG;MACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B,CAAC;IAEM,sBAAiB,GAAG;MACxB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;OACtD;WAAM;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB;KACJ,CAAC;IAEM,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,QACI,WAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CACxC,EACR;KACL,CAAC;IAEM,uBAAkB,GAAG,CAAC,MAAc;MACxC,QACI,yBACI,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzC,EACJ;KACL,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAc,KAAK,CAAC,KAAiB;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC5B,CAAC;kBA/HuB,KAAK;;;;EAqCvB,kBAAkB;IACrB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,kBAAkB,CAAC,MAAM,CAAC,CAAC;GAC9B;EAEM,oBAAoB;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,oBAAoB,CAAC,MAAM,CAAC,CAAC;GAChC;EAEM,MAAM;IACT,QACI,eAAS,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,IAC1C,kBACI,cACI,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,MAAM,GAC5B,EACF,WAAK,KAAK,EAAC,aAAa,IACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,CAClB,EACN,UAAI,KAAK,EAAC,gDAAgD,IACrD,IAAI,CAAC,MAAM,CACX,EACL,WAAK,KAAK,EAAC,cAAc,GAAG,EAC3B,IAAI,CAAC,aAAa,EAAE,CAChB,EACT,WACI,KAAK,EAAC,MAAM,iBACC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,IAEf,eAAQ,CACN,CACA,EACZ;GACL;;;;;;;","names":[],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n --border-radius-of-header: 0.75rem;\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.open-close-toggle {\n all: unset;\n position: absolute;\n inset: 0;\n width: 100%; // for Firefox\n @include mixins.visualize-keyboard-focus;\n transition:\n background-color 0.4s ease,\n border-radius 0.1s ease;\n cursor: pointer;\n z-index: -1;\n\n background-color: var(\n --closed-header-background-color,\n rgb(var(--contrast-200))\n );\n border-radius: var(--border-radius-of-header);\n\n &:hover {\n background-color: var(\n --open-header-background-color,\n rgb(var(--contrast-300))\n );\n }\n\n section.open & {\n background-color: var(\n --open-header-background-color,\n rgb(var(--contrast-100))\n );\n border-radius: var(--border-radius-of-header)\n var(--border-radius-of-header) 0 0;\n &:hover {\n background-color: var(\n --open-header-background-color,\n rgb(var(--contrast-300))\n );\n }\n }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n pointer-events: none;\n}\n\nheader {\n isolation: isolate;\n position: relative;\n\n align-items: center;\n display: flex;\n justify-content: space-between;\n\n padding-left: 0.5rem;\n height: shared_input-select-picker.$height-of-mdc-text-field;\n}\n\n.title {\n font-size: 1rem;\n font-weight: 300;\n color: var(--mdc-theme-on-surface);\n\n justify-self: flex-start;\n\n user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n padding-right: 0.5rem;\n\n // Below tries to render text in two lines,\n // and then truncate if there is no more space\n height: auto;\n max-height: 3rem;\n line-height: 1.2rem;\n white-space: normal;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.divider-line {\n transition: opacity 0.3s ease 0.3s;\n flex-grow: 1;\n height: 0.125rem;\n border-radius: 1rem;\n background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n margin-right: 0.5rem;\n\n opacity: 0;\n\n section.open & {\n opacity: 0.16;\n }\n}\n\n.actions {\n justify-self: flex-end;\n flex-shrink: 0;\n}\n\n.body {\n background-color: var(--body-background-color, var(--contrast-100));\n padding-left: var(--body-padding, 1.25rem);\n padding-right: var(--body-padding, 1.25rem);\n border-radius: 0 0 var(--border-radius-of-header)\n var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n // All below vars are for internal use only!\n --limel-cs-opacity-transition-speed: 0.1s;\n --limel-cs-opacity-transition-delay: 0s;\n --limel-cs-grid-template-rows-transition-speed: 0.3s;\n transition: grid-template-rows\n var(--limel-cs-grid-template-rows-transition-speed)\n cubic-bezier(1, 0.09, 0, 0.89);\n display: grid;\n grid-template-rows: 0fr;\n\n slot {\n transition: opacity var(--limel-cs-opacity-transition-speed) ease\n var(--limel-cs-opacity-transition-delay);\n display: block;\n overflow: hidden;\n opacity: 0;\n }\n}\n\nsection.open {\n .body {\n --limel-cs-opacity-transition-speed: 0.4s;\n --limel-cs-opacity-transition-delay: 0.3s;\n --limel-cs-grid-template-rows-transition-speed: 0.46s;\n grid-template-rows: 1fr;\n\n slot {\n opacity: 1;\n }\n }\n}\n\nheader:hover {\n + .body {\n will-change: grid-template-rows;\n\n slot {\n will-change: opacity;\n }\n }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n Component,\n Event,\n Element,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n tag: 'limel-collapsible-section',\n shadow: true,\n styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n /**\n * `true` if the section is expanded, `false` if collapsed.\n */\n @Prop({ mutable: true, reflect: true })\n public isOpen: boolean = false;\n\n /**\n * Text to display in the header of the section\n */\n @Prop({ reflect: true })\n public header: string;\n\n /**\n * Actions to place to the far right inside the header\n */\n @Prop()\n public actions: Action[];\n\n /**\n * Emitted when the section is expanded\n */\n @Event()\n private open: EventEmitter<void>;\n\n /**\n * Emitted when the section is collapsed\n */\n @Event()\n private close: EventEmitter<void>;\n\n /**\n * Emitted when an action is clicked inside the header\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @Element()\n private host: HTMLElement;\n\n private bodyId = createRandomString();\n\n public componentDidRender() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle',\n ) as HTMLElement;\n\n makeEnterClickable(button);\n }\n\n public disconnectedCallback() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle',\n ) as HTMLElement;\n\n removeEnterClickable(button);\n }\n\n public render() {\n return (\n <section class={`${this.isOpen ? 'open' : ''}`}>\n <header>\n <button\n class=\"open-close-toggle\"\n onClick={this.onClick}\n aria-controls={this.bodyId}\n />\n <div class=\"expand-icon\">\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n </div>\n <h2 class=\"title mdc-typography mdc-typography--headline2\">\n {this.header}\n </h2>\n <div class=\"divider-line\" />\n {this.renderActions()}\n </header>\n <div\n class=\"body\"\n aria-hidden={String(!this.isOpen)}\n id={this.bodyId}\n >\n <slot />\n </div>\n </section>\n );\n }\n\n private onClick = () => {\n this.handleInteraction();\n };\n\n private handleInteraction = () => {\n this.isOpen = !this.isOpen;\n\n if (this.isOpen) {\n this.open.emit();\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n } else {\n this.close.emit();\n }\n };\n\n private renderActions = () => {\n if (!this.actions) {\n return;\n }\n\n return (\n <div class=\"actions\">\n {this.actions.map(this.renderActionButton)}\n </div>\n );\n };\n\n private renderActionButton = (action: Action) => {\n return (\n <limel-icon-button\n icon={action.icon}\n label={action.label}\n disabled={action.disabled}\n onClick={this.handleActionClick(action)}\n />\n );\n };\n\n private handleActionClick = (action: Action) => (event: MouseEvent) => {\n event.stopPropagation();\n this.action.emit(action);\n };\n}\n"],"version":3}
1
+ {"file":"limel-collapsible-section.entry.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,onMAAonM;;MC6BroM,kBAAkB;;;;;;IAwCnB,WAAM,GAAG,kBAAkB,EAAE,CAAC;IAkD9B,YAAO,GAAG;MACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B,CAAC;IAEM,sBAAiB,GAAG;MACxB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;OACtD;WAAM;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB;KACJ,CAAC;IAEM,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,QACI,WAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CACxC,EACR;KACL,CAAC;IAEM,uBAAkB,GAAG,CAAC,MAAc;MACxC,QACI,yBACI,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzC,EACJ;KACL,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAc,KAAK,CAAC,KAAiB;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC5B,CAAC;kBA/HuB,KAAK;;;;EAqCvB,kBAAkB;IACrB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,kBAAkB,CAAC,MAAM,CAAC,CAAC;GAC9B;EAEM,oBAAoB;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,oBAAoB,CAAC,MAAM,CAAC,CAAC;GAChC;EAEM,MAAM;IACT,QACI,eAAS,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,IAC1C,kBACI,cACI,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,MAAM,GAC5B,EACF,WAAK,KAAK,EAAC,aAAa,IACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,CAClB,EACN,UAAI,KAAK,EAAC,gDAAgD,IACrD,IAAI,CAAC,MAAM,CACX,EACL,WAAK,KAAK,EAAC,cAAc,GAAG,EAC3B,IAAI,CAAC,aAAa,EAAE,CAChB,EACT,WACI,KAAK,EAAC,MAAM,iBACC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,IAEf,eAAQ,CACN,CACA,EACZ;GACL;;;;;;;","names":[],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n --border-radius-of-header: 0.75rem;\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.open-close-toggle {\n all: unset;\n position: absolute;\n inset: 0;\n width: 100%; // for Firefox\n @include mixins.visualize-keyboard-focus;\n transition:\n background-color 0.4s ease,\n border-radius 0.1s ease;\n cursor: pointer;\n z-index: -1;\n\n background-color: var(\n --closed-header-background-color,\n rgb(var(--contrast-200))\n );\n border-radius: var(--border-radius-of-header);\n\n &:hover {\n background-color: var(\n --open-header-background-color,\n rgb(var(--contrast-300))\n );\n }\n\n section.open & {\n background-color: var(\n --open-header-background-color,\n rgb(var(--contrast-100))\n );\n border-radius: var(--border-radius-of-header)\n var(--border-radius-of-header) 0 0;\n &:hover {\n background-color: var(\n --open-header-background-color,\n rgb(var(--contrast-300))\n );\n }\n }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n pointer-events: none;\n}\n\nheader {\n isolation: isolate;\n position: relative;\n\n align-items: center;\n display: flex;\n justify-content: space-between;\n\n padding-left: 0.5rem;\n height: shared_input-select-picker.$height-of-mdc-text-field;\n}\n\n.title {\n font-size: 1rem;\n font-weight: 300;\n color: var(--mdc-theme-on-surface);\n\n justify-self: flex-start;\n\n user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n padding-right: 0.5rem;\n\n // Below tries to render text in two lines,\n // and then truncate if there is no more space\n height: auto;\n max-height: 3rem;\n line-height: 1.2rem;\n @include mixins.truncate-text-on-line(2);\n}\n\n.divider-line {\n transition: opacity 0.3s ease 0.3s;\n flex-grow: 1;\n height: 0.125rem;\n border-radius: 1rem;\n background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n margin-right: 0.5rem;\n\n opacity: 0;\n\n section.open & {\n opacity: 0.16;\n }\n}\n\n.actions {\n justify-self: flex-end;\n flex-shrink: 0;\n}\n\n.body {\n background-color: var(--body-background-color, var(--contrast-100));\n padding-left: var(--body-padding, 1.25rem);\n padding-right: var(--body-padding, 1.25rem);\n border-radius: 0 0 var(--border-radius-of-header)\n var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n // All below vars are for internal use only!\n --limel-cs-opacity-transition-speed: 0.1s;\n --limel-cs-opacity-transition-delay: 0s;\n --limel-cs-grid-template-rows-transition-speed: 0.3s;\n transition: grid-template-rows\n var(--limel-cs-grid-template-rows-transition-speed)\n cubic-bezier(1, 0.09, 0, 0.89);\n display: grid;\n grid-template-rows: 0fr;\n\n slot {\n transition: opacity var(--limel-cs-opacity-transition-speed) ease\n var(--limel-cs-opacity-transition-delay);\n display: block;\n overflow: hidden;\n opacity: 0;\n }\n}\n\nsection.open {\n .body {\n --limel-cs-opacity-transition-speed: 0.4s;\n --limel-cs-opacity-transition-delay: 0.3s;\n --limel-cs-grid-template-rows-transition-speed: 0.46s;\n grid-template-rows: 1fr;\n\n slot {\n opacity: 1;\n }\n }\n}\n\nheader:hover {\n + .body {\n will-change: grid-template-rows;\n\n slot {\n will-change: opacity;\n }\n }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n Component,\n Event,\n Element,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n tag: 'limel-collapsible-section',\n shadow: true,\n styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n /**\n * `true` if the section is expanded, `false` if collapsed.\n */\n @Prop({ mutable: true, reflect: true })\n public isOpen: boolean = false;\n\n /**\n * Text to display in the header of the section\n */\n @Prop({ reflect: true })\n public header: string;\n\n /**\n * Actions to place to the far right inside the header\n */\n @Prop()\n public actions: Action[];\n\n /**\n * Emitted when the section is expanded\n */\n @Event()\n private open: EventEmitter<void>;\n\n /**\n * Emitted when the section is collapsed\n */\n @Event()\n private close: EventEmitter<void>;\n\n /**\n * Emitted when an action is clicked inside the header\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @Element()\n private host: HTMLElement;\n\n private bodyId = createRandomString();\n\n public componentDidRender() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle',\n ) as HTMLElement;\n\n makeEnterClickable(button);\n }\n\n public disconnectedCallback() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle',\n ) as HTMLElement;\n\n removeEnterClickable(button);\n }\n\n public render() {\n return (\n <section class={`${this.isOpen ? 'open' : ''}`}>\n <header>\n <button\n class=\"open-close-toggle\"\n onClick={this.onClick}\n aria-controls={this.bodyId}\n />\n <div class=\"expand-icon\">\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n </div>\n <h2 class=\"title mdc-typography mdc-typography--headline2\">\n {this.header}\n </h2>\n <div class=\"divider-line\" />\n {this.renderActions()}\n </header>\n <div\n class=\"body\"\n aria-hidden={String(!this.isOpen)}\n id={this.bodyId}\n >\n <slot />\n </div>\n </section>\n );\n }\n\n private onClick = () => {\n this.handleInteraction();\n };\n\n private handleInteraction = () => {\n this.isOpen = !this.isOpen;\n\n if (this.isOpen) {\n this.open.emit();\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n } else {\n this.close.emit();\n }\n };\n\n private renderActions = () => {\n if (!this.actions) {\n return;\n }\n\n return (\n <div class=\"actions\">\n {this.actions.map(this.renderActionButton)}\n </div>\n );\n };\n\n private renderActionButton = (action: Action) => {\n return (\n <limel-icon-button\n icon={action.icon}\n label={action.label}\n disabled={action.disabled}\n onClick={this.handleActionClick(action)}\n />\n );\n };\n\n private handleActionClick = (action: Action) => (event: MouseEvent) => {\n event.stopPropagation();\n this.action.emit(action);\n };\n}\n"],"version":3}